0.3.3

atomicpages · atomicpages · commit eadbe2c2a507 · 2019-09-09T08:57:49.000-07:00
* Adding clostest polyfill for IE 9+
* Fixing some README issues
* Bumping a few dependencies
* Properyly utilizing HTMLWebpackPlugin
* Adding .yalc to .gitignore
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -13,5 +13,6 @@ module.exports = {
     rules: {
         '@typescript-eslint/explicit-function-return-type': 0,
         '@typescript-eslint/ban-ts-ignore': 'warn',
+        '@typescript-eslint/no-this-alias': 'warn',
     },
 };
diff --git a/.gitignore b/.gitignore
@@ -63,3 +63,5 @@ typings/
 # build artifacts
 pkg/
 playground/dist/
+.yalc/
+yalc.lock
diff --git a/README.md b/README.md
@@ -61,6 +61,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 import { Shuttle, useShuttleState } from 'react-accessible-shuttle';
+import 'react-accessible-shuttle/css/shuttle.css';
 
 function App() {
     const shuttle = useShuttleState({
@@ -176,7 +177,7 @@ You can also use react-accessible-shuttle via CDN -- it even works with legacy b
                 ]);
             }
 
-            ReactDOM.render(App, document.getElementById('root'));
+            ReactDOM.render(React.createElement(App), document.getElementById('root'));
         </script>
     </body>
 </html>
diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
     "scripts": {
         "test": "jest --silent",
         "build": "npm run clean && npm run lint && npm run build:css && pika build && npm run clean:css",
-        "build:css": "sass -s compressed --embed-source-map src/styles/** ./css/shuttle.css",
+        "build:css": "sass -s compressed --no-charset --embed-sources src/styles/** ./css/shuttle.css",
         "build:test": "npm run clean && tsc src/index.ts --pretty --jsx react --esModuleInterop  --downLevelIteration --outDir pkg",
         "clean": "rimraf pkg/",
         "clean:css": "rimraf css/",
diff --git a/playground/package-lock.json b/playground/package-lock.json
diff --git a/playground/package.json b/playground/package.json
@@ -24,11 +24,11 @@
         "node-sass": "^4.12.0",
         "postcss-loader": "^3.0.0",
         "react-hot-loader": "^4.12.12",
-        "sass-loader": "^7.3.1",
+        "sass-loader": "^8.0.0",
         "style-loader": "^1.0.0",
         "ts-loader": "^6.0.4",
         "webpack": "^4.39.3",
-        "webpack-cli": "^3.3.7",
+        "webpack-cli": "^3.3.8",
         "webpack-dev-server": "^3.8.0"
     },
     "dependencies": {
diff --git a/playground/public/index.html b/playground/public/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+    </head>
+    <body>
+        <div id="root"></div>
+    </body>
+</html>
diff --git a/playground/src/index.tsx b/playground/src/index.tsx
@@ -11,15 +11,6 @@ import { App as SearchShuttle } from './examples/with-search';
 
 import '../../src/styles/shuttle.scss';
 
-if (process.env.NODE_ENV === 'development') {
-    (function() {
-        const div = document.createElement('div');
-        div.id = 'root';
-
-        document.body.appendChild(div);
-    })();
-}
-
 function Main() {
     return (
         <main>
diff --git a/playground/webpack.config.js b/playground/webpack.config.js
@@ -15,7 +15,9 @@ module.exports = {
             filename: '[name].css',
             chunkFilename: '[id].css',
         }),
-        new HtmlWebpackPlugin(),
+        new HtmlWebpackPlugin({
+            template: path.resolve('./public/index.html'),
+        }),
     ],
     resolve: {
         extensions: ['.tsx', '.ts', '.js'],
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
@@ -165,3 +165,22 @@ export const isContainer = (container: HTMLDivElement) => {
 
     return bool && (name === SHUTTLE_CONTAINERS.SOURCE || name === SHUTTLE_CONTAINERS.TARGET);
 };
+
+// IE 9+ polyfill for closest
+// https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill
+if (!Element.prototype.closest) {
+    Element.prototype.closest = function(selector: string) {
+        // @ts-ignore
+        let el: any = this;
+
+        do {
+            if (el.matches(selector)) {
+                return el;
+            }
+
+            el = el.parentElement || el.parentNode;
+        } while (el !== null && el.nodeType === 1);
+
+        return null;
+    };
+}
