Merge pull request #32 - Fix #30, Upgrade build

Merge pull request #32 from Dan503/develop

.babelrc

@@ -0,0 +1,3 @@
+{
+	"presets": ["@babel/preset-env"]
+}

.editorconfig

@@ -2,8 +2,8 @@
 root = true
 
 [*]
-indent_style = space
-indent_size = 2
+indent_style = tab
+indent_size = 4
 end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true

.eslintrc

@@ -1,29 +1,37 @@
 {
-  "env": {
-    "browser": true,
-    "node": true
-  },
-  "globals": {
-    "DocumentFragment": true
-  },
-  "rules": {
-    "indent": [2, 2],
-    "valid-jsdoc": 0,
-    "brace-style": [1, "stroustrup"],
-    "no-constant-condition": 1,
-    "no-underscore-dangle": 0,
-    "no-use-before-define": 1,
-    "func-names": 0,
-    "semi": [2, "always"],
-    "no-new": 0,
-    "new-parens": 2,
-    "no-ternary": 0,
-    "new-cap": 0,
-    "no-unused-vars": [1, {"vars": "local", "args": "none"}],
-    "quotes": [2, "single"],
-    "one-var": 0,
-    "space-infix-ops": 0,
-    "strict": 0,
-    "camelcase": [2, {"properties": "never"}]
-  }
+	"env": {
+		"browser": true,
+		"node": true,
+		"es6": true
+	},
+	"extends": ["plugin:prettier/recommended"],
+	"parserOptions": {
+		"ecmaFeatures": {
+			"modules": true
+		},
+		"sourceType": "module"
+	},
+	"globals": {
+		"DocumentFragment": true
+	},
+	"rules": {
+		"indent": [1, "tab"],
+		"valid-jsdoc": 0,
+		"brace-style": [1, "1tbs"],
+		"no-constant-condition": 1,
+		"no-underscore-dangle": 0,
+		"no-use-before-define": 1,
+		"func-names": 0,
+		"semi": [1, "never"],
+		"no-new": 0,
+		"new-parens": 1,
+		"no-ternary": 0,
+		"new-cap": 0,
+		"no-unused-vars": [1, { "vars": "local", "args": "none" }],
+		"quotes": [1, "single"],
+		"one-var": 0,
+		"space-infix-ops": 0,
+		"strict": 0,
+		"camelcase": 0
+	}
 }

.gitignore

@@ -4,5 +4,5 @@ build
 tmp
 .grunt
 .DS_Store
-file-loader.pug
+auto-imports.pug
 docs/scripts/time-input-polyfill.*

.prettierrc

@@ -0,0 +1,7 @@
+{
+	"singleQuote": true,
+	"trailingComma": "es5",
+	"useTabs": true,
+	"tabWidth": 4,
+	"semi": false
+}

README.md

@@ -4,27 +4,27 @@
 
 An accessible polyfill for `<input type='time'/>` elements.
 
-- ✔️ Modeled after the Chrome 78 and Firefox 70 desktop implementations.
-- ✔️ Fully keyboard and screen reader accessible.
-- ✔️ Submits the same values to servers as real time inputs (24 hour time).
-- ✔️ Only downloads the full polyfill code in the browsers that need it.
-- ✔️ Zero dependencies.
+-   ✔️ Modeled after the Chrome 78 and Firefox 70 desktop implementations.
+-   ✔️ Fully keyboard and screen reader accessible.
+-   ✔️ Submits the same values to servers as real time inputs (24 hour time).
+-   ✔️ Only downloads the full polyfill code in the browsers that need it.
+-   ✔️ Zero dependencies.
 
 Demo available here: https://dan503.github.io/time-input-polyfill/
 
 <details>
-  <summary>The recommended version is <code>1.0.9</code> or higher.</summary>
+  <summary>The recommended version is <code>1.0.10</code> or higher.</summary>
 
-<p>If the recommended version in this documentation is out of sync with the npm version, this is because npm only allows readme edits to be committed through full releases. To prevent needless cache invalidation, I'll only update the recommended version number when there are actual changes to the polyfill code. The current recommended version is <code>1.0.9</code>. As long as you are using a version that is equal to or higher than that, you are using the latest version of the polyfill.</p>
+<p>If the recommended version in this documentation is out of sync with the npm version, this is because npm only allows readme edits to be committed through full releases. To prevent needless cache invalidation, I'll only update the recommended version number when there are actual changes to the polyfill code. The current recommended version is <code>1.0.10</code>. As long as you are using a version that is equal to or higher than that, you are using the latest version of the polyfill.</p>
 
 </details>
 
 ## Pre-built components
 
 To make it easier to implement this polyfill into your projects, I have some pre-built component versions of it that you might find easier to use.
 
-- [React component](https://www.npmjs.com/package/react-time-input-polyfill)
-- [Vue component](https://www.npmjs.com/package/vue-time-input-polyfill) (not built yet)
+-   [React component](https://www.npmjs.com/package/react-time-input-polyfill)
+-   [Vue component](https://www.npmjs.com/package/vue-time-input-polyfill) (not built yet)
 
 ## Fastest and easiest way to implement
 
@@ -44,10 +44,10 @@ Then require it in your main JavaScript file like so:
 
 ```js
 // ES5
-require('time-input-polyfill/auto');
+require('time-input-polyfill/auto')
 
 // ES6
-import 'time-input-polyfill/auto';
+import 'time-input-polyfill/auto'
 ```
 
 That's all you need to do.
@@ -59,39 +59,40 @@ You didn't load the actual polyfill onto the page, you loaded a much smaller aut
 1. The initialiser checks if the browser supports `input[type="time"]` elements.
 2. If it **does**, it skips the rest of the functionality.
 3. If it does **not**, it will:
-	1. load `https://cdn.jsdelivr.net/npm/[email protected]/dist/time-input-polyfill.min.js` (the actual polyfill).
-	2. Collect all existing `input[type="time"]` elements on the page.
-	3. Loop through each `input[type="time"]` element and apply the polyfill to it.
-
+    1. load `https://cdn.jsdelivr.net/npm/[email protected]/dist/time-input-polyfill.min.js` (the actual polyfill).
+    2. Collect all existing `input[type="time"]` elements on the page.
+    3. Loop through each `input[type="time"]` element and apply the polyfill to it.
 
 ## I need more control
 
-The following downloads the full polyfill in all browsers, take a look at the [auto.js](https://github.com/Dan503/time-input-polyfill/blob/master/auto.js) file if you want to see how it loads the polyfill dynamically.
+The following downloads the full polyfill in all browsers, take a look at the [auto.mjs](https://github.com/Dan503/time-input-polyfill/blob/master/auto.mjs) file if you want to see how it loads the polyfill dynamically.
 
 ### npm
 
 First check for `input[type="time"]` support.
 
 ```js
-var supportsTime = require('time-input-polyfill/supportsTime');
+import supportsTime from 'time-input-polyfill/supportsTime'
 
 if (!supportsTime) {
-  //Apply polyfill here
+	//Apply polyfill here
 }
 ```
 
 Then gather a list of all `input[type="time"]` elements on the page, and loop through them to apply the polyfill.
 
 ```js
-var supportsTime = require('time-input-polyfill/supportsTime');
-var TimePolyfill = require('time-input-polyfill');
+import supportsTime from 'time-input-polyfill/supportsTime'
+import TimePolyfill from 'time-input-polyfill'
 
 if (!supportsTime) {
-  // Converting to an array for IE support
-  var $$inputs = [].slice.call( document.querySelectorAll('input[type="time"]') );
-  $$inputs.forEach(function($input){
-    new TimePolyfill($input);
-  })
+	// Converting to an array for IE support
+	const $$inputs = [].slice.call(
+		document.querySelectorAll('input[type="time"]')
+	)
+	$$inputs.forEach(function ($input) {
+		new TimePolyfill($input)
+	})
 }
 ```
 
@@ -102,32 +103,59 @@ if (!supportsTime) {
 First check for `input[type="time"]` support.
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/[email protected].9/core/helpers/supportsTime.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected].10/core/helpers/supportsTime.js"></script>
 ```
+
 ```js
 if (!supportsTime) {
-  //Apply polyfill here
+	//Apply polyfill here
 }
 ```
 
 Then gather a list of all `input[type="time"]` elements on the page, and loop through them to apply the polyfill.
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/[email protected].9/core/helpers/supportsTime.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/[email protected].9/dist/time-input-polyfill.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected].10/core/helpers/supportsTime.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected].10/dist/time-input-polyfill.min.js"></script>
 ```
+
 ```js
 if (!supportsTime) {
-  // Converting to an array for IE support
-  var $$inputs = [].slice.call( document.querySelectorAll('input[type="time"]') );
-  $$inputs.forEach(function($input){
-    new TimePolyfill($input);
-  })
+	// Converting to an array for IE support
+	const $$inputs = [].slice.call(
+		document.querySelectorAll('input[type="time"]')
+	)
+	$$inputs.forEach(function ($input) {
+		new TimePolyfill($input)
+	})
 }
 ```
 
 This will add a global `TimePolyfill` function to the page.
 
+## Shadow DOM
+
+When your code is inside a component that resides in the Shadow DOM, the polyfill will not be able to find your label
+element. For this case, you can pass your label element in directly.
+
+```html
+<label id="myLabel" for="timeInput">Label text</label>
+<input type="time" id="timeInput" />
+```
+
+```js
+import timePolyfill from 'time-input-polyfill'
+
+// The following element must not be in a shadow DOM
+const componentRootElem = document.getElementById(
+	'idOfYourShadowDomComponentRootElement'
+)
+
+const timeLabelElem = componentRootElem.shadowRoot.getElementById('myLabel')
+const timeInputElem = componentRootElem.shadowRoot.getElementById('timeInput')
+timePolyFill(timeInputElem, timeLabelElem)
+```
+
 ## Major limitations
 
 Note that I refer to an `input[type="time"]` element that has had the polyfill initialized on it as an `$input` in this section.
@@ -147,13 +175,14 @@ I couldn't find any reliable way to track when a user uses `$input.value = '13:3
 Any time you update the value of the time input element through JavaScript, check that `$input.polyfill` exists, and if it does, call `$input.polyfill.update()`.
 
 ```html
-<input id="example" type="time">
+<input id="example" type="time" />
 ```
+
 ```js
-var $input = document.getElementByID('example');
-$input.value = '13:30';
+const $input = document.getElementByID('example')
+$input.value = '13:30'
 // call the update() method whenever the value is updated through JS
-if ($input.polyfill) $input.polyfill.update();
+if ($input.polyfill) $input.polyfill.update()
 ```
 
 The `update()` method will return the input element that it was called on so it can be chained if you want.
@@ -164,31 +193,30 @@ The polyfill will fail if the `$input` is missing a label.
 
 The following is a list of ways you can add a label to the `$input`. The list is in order from the **best** method to the **worst** method:
 
-1. Nesting the `$input` inside a `<label>` _(Doesn't require IDs to work)_
-	```html
-	<label>
-	  <span>Label text</span>
-	  <input type="time">
-	</label>
-	```
-2. Using the `for` attribute
-	```html
-	<label for="uniqueID">Label text</label>
-	<input type="time" id="uniqueID">
-	```
-3. Using the `aria-labelledby` attribute
-	```html
-	<p id="uniqueID">Label text</p>
-	<input type="time" aria-labelledby="uniqueID">
-	```
+1. Using the `for` attribute
+    ```html
+    <label for="uniqueID">Label text</label> <input type="time" id="uniqueID" />
+    ```
+2. Using the `aria-labelledby` attribute
+    ```html
+    <p id="uniqueID">Label text</p>
+    <input type="time" aria-labelledby="uniqueID" />
+    ```
+3. Nesting the `$input` inside a `<label>` (Doesn't require IDs to work but not supported by all screen readers)
+    ```html
+    <label>
+    	<span>Label text</span>
+    	<input type="time" />
+    </label>
+    ```
 4. Using the `title` attribute
-	```html
-	<input type="time" title="Label text">
-	```
+    ```html
+    <input type="time" title="Label text" />
+    ```
 5. Using the `aria-label` attribute
-	```html
-	<input type="time" aria-label="Label text">
-	```
+    ```html
+    <input type="time" aria-label="Label text" />
+    ```
 
 ## Change log
 

auto.mjs

@@ -0,0 +1,18 @@
+import supports_time from './core/helpers/supportsTime'
+import loadJS from './core/helpers/loadJS'
+
+document.addEventListener('DOMContentLoaded', () => {
+	if (!supports_time) {
+		loadJS(
+			'https://cdn.jsdelivr.net/npm/[email protected]/dist/time-input-polyfill.min.js',
+			() => {
+				var $inputs = [].slice.call(
+					document.querySelectorAll('input[type="time"]')
+				)
+				$inputs.forEach(($input) => {
+					new TimePolyfill($input)
+				})
+			}
+		)
+	}
+})