Add additional build target of compiled es2015 mode w/ native es2015 module syntax

.babelrc

@@ -0,0 +1,5 @@
+{
+  "presets": [
+    ["es2015", { "modules": false }]
+  ]
+}

README.md

@@ -23,7 +23,6 @@ ally.js is a JavaScript library simplifying certain accessibility features, func
 ## Requirements
 
 * [ES5](https://kangax.github.io/compat-table/es5/)
-* [ES6 Array.prototype.findIndex](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex)
 * [CSSOM CSS.escape](https://developer.mozilla.org/en-US/docs/Web/API/CSS.escape) ([spec](https://dev.w3.org/csswg/cssom/#the-css.escape%28%29-method))
 * [Element.classList](https://developer.mozilla.org/en/docs/Web/API/Element/classList)
 
@@ -32,7 +31,6 @@ ally.js is a JavaScript library simplifying certain accessibility features, func
 
 * [platform.js](https://github.com/bestiejs/platform.js) (because parsing the userAgent string yourself is ludicrous)
 * [ES5-shim](https://github.com/es-shims/es5-shim) (implicitly expected)
-* [ES6-shim Array.prototype.findIndex](https://github.com/paulmillr/Array.prototype.findIndex) (or complete [ES6-shim](https://github.com/paulmillr/es6-shim))
 * [CSSOM CSS.escape polyfill](https://github.com/mathiasbynens/CSS.escape)
 
 

docs/api/prototype.md

@@ -15,8 +15,6 @@ Polyfills should only extend JavaScript and BOM (Browser Object Model). Polyfill
 Additionally ally.js uses the following third party polyfills:
 
 * [`CSS.escape`](https://github.com/mathiasbynens/CSS.escape) to polyfill the [CSSOM `CSS.escape`](https://developer.mozilla.org/en-US/docs/Web/API/CSS/escape) function
-* [array.prototype.findindex](https://github.com/paulmillr/Array.prototype.findIndex) to polyfill the [ES6 `Array.findIndex`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex)
-
 
 ## Contributing
 

docs/api/util.md

@@ -128,3 +128,7 @@ A component's `engage()` function may return an result object. The decorated `di
 ### Match element agains CSS selector
 
 `util/element-matches` provides a simple interface to using [Element.matches](https://developer.mozilla.org/en-US/docs/Web/API/Element.matches) through its various vendor-prefixed names.
+
+### Find an item in an array
+
+`util/array-find-index` is a simple wrapper that provides the same functionality as [Array.findIndex](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex) for non ES 6 browsers.

docs/contributing/build.md

@@ -31,7 +31,7 @@ dist
     └── <ES6 files>
 ```
 
-`npm run build` then runs `build:umd`, `build:amd`, `build:common` and creates the following structure in the `dist` directory:
+`npm run build` then runs `build:umd`, `build:amd`, `build:common`, `build:esm` and creates the following structure in the `dist` directory:
 
 ```text
 dist
@@ -40,6 +40,8 @@ dist
 │   └── <UMD module files>
 └── common
 │   └── <CommonJS module files>
+└── esm
+│   └── <ES6 module files compiled to ES5>
 └── src
     └── <ES6 module files>
 ```
@@ -56,6 +58,8 @@ dist
 ├── <CommonJS module files>
 ├── amd
 │   └── <UMD module files>
+└── esm
+│   └── <ES6 module files compiled to ES5>
 └── src
     └── <ES6 module files>
 ```
@@ -75,9 +79,9 @@ npm run build:umd
 npm run clean
 ```
 
-### Building AMD and CommonJS modules
+### Building AMD and CommonJS and ES6 modules
 
-To allow developers to use selected features (rather than import everything), the ES6 source (`src`) is made available in ES5 via AMD and CommonJS in `dist/amd` and `dist/common`.
+To allow developers to use selected features (rather than import everything), the ES6 source (`src`) is made available in ES5 via AMD and CommonJS in `dist/amd` and `dist/common` and as ES6 modules in `dist/esm`.
 
 ```sh
 # convert to CommonJS modules
@@ -88,11 +92,13 @@ npm run build:amd
 
 # keep converting to dist/amd while working on src
 npm run watch:amd
+
+# convert to compiled ES6 modules
+npm run build:esm
 ```
 
 Since `v1.4.0` the AMD modules are actually UMD modules, because of how babel 6 handles default exports. Since UMD can be consumed by both AMD and CommonJS system, a separate CommonJS build is not necessary anymore. However, changing the npm module's structure is a breaking change and has thus been deferred to the next major release.
 
-
 ---
 
 ## Linting
@@ -119,14 +125,3 @@ npm run lint:js:fix
 ```
 
 Linting is done automatically during `git commit` by way of [pre-commit](https://www.npmjs.com/package/pre-commit) and limited to the actually changed files by way of [lint-staged](https://www.npmjs.com/package/lint-staged) in order to keep `git commit` as fast as possible.
-
----
-
-## ES6 in older browsers
-
-Currently only a single ES6 function `Array.prototype.findIndex` is used in ally.js. Should we choose to use more ES6 functions, possibly things like `Set` and `Map`, we would have to include the [babel polyfill](http://babeljs.io/docs/usage/polyfill/) in our distribution. This step should not be taken lightly, as the polyfill is a heavyweight.
-
-```sh
-npm install babel-core
-cat node_modules/babel-core/browser-polyfill.js dist/ally.js > dist/ally.old-browser.js
-```

docs/getting-started.md

@@ -14,7 +14,6 @@ In order to load successfully in IE8, the [es5-shim](https://github.com/es-shims
 The UMD bundle contains the following dependencies:
 
 * [platform.js](https://github.com/bestiejs/platform.js) because parsing the userAgent string yourself is ludicrous.
-* [ES6-shim Array.prototype.findIndex](https://github.com/paulmillr/Array.prototype.findIndex) because loading the entire ES6-shim is unnecessary.
 * [CSSOM CSS.escape polyfill](https://github.com/mathiasbynens/CSS.escape) for properly constructing CSS query selectors.
 
 
@@ -135,6 +134,21 @@ console.log('focusable elements', queryFocusable());
 The ES6 source modules are available from the [github repository](https://github.com/medialize/ally.js) through [npm](https://www.npmjs.com/package/ally.js) and [`ally.js.zip`](https://github.com/medialize/ally.js/releases/download/{{pkg.version}}/ally.js.zip).
 :::
 
+## Using ES5 code contained in ES6 modules
+
+ally.js also ships a version of the source code as ES6 modules but with the contents of each module compiled to ES5 in the `esm` directory. It is recommeneded that you use these modules with a build tool such as [webpack 2](https://webpack.js.org/) or [Rollup](https://github.com/rollup/rollup) which understand how to parse ES6 modules but generally recommened ignoring the `node_modules` folder.
+
+```js
+import version from 'ally.js/esm/version';
+console.log('loaded version of ally.js', version);
+
+import queryFocusable from 'ally.js/esm/query/focusable';
+console.log('focusable elements', queryFocusable());
+```
+
+:::note
+The ES5 compiled ES6 modules with are available from the [github repository](https://github.com/medialize/ally.js) through [npm](https://www.npmjs.com/package/ally.js) and [`ally.js.zip`](https://github.com/medialize/ally.js/releases/download/{{pkg.version}}/ally.js.zip).
+:::
 
 ## Using AMD modules
 
@@ -160,8 +174,8 @@ require.config({
   paths: {
     // map to AMD files
     'ally.js': 'node_modules/ally.js/amd',
+
     // provide paths to dependencies
-    'array.prototype.findindex': 'node_modules/array.prototype.findindex/index',
     'css.escape': 'node_modules/css.escape/css.escape',
     'platform': 'node_modules/platform/platform',
   },
@@ -184,6 +198,30 @@ require(['ally.js/query/focusable'], function(queryFocusable) {
 The AMD modules are only available through [npm](https://www.npmjs.com/package/ally.js) and [`ally.js.zip`](https://github.com/medialize/ally.js/releases/download/{{pkg.version}}/ally.js.zip).
 :::
 
+## Using with TypeScript
+
+ally.js does not have a dediated set of TypeScript definitions. However you can still use ally.js in TypeScript by declaring a TypeScript module and using the ES5 compiled ES6 modules in the `esm` folder.
+
+```ts
+// in a .d.ts file, usually next to your applications entry point
+declare module 'ally.js/esm/version';
+declare module 'ally.js/esm/query/focusable';
+```
+
+```ts
+// in your application code
+import version from 'ally.js/esm/version';
+console.log('loaded version of ally.js', version);
+
+import queryFocusable from 'ally.js/esm/query/focusable';
+console.log('focusable elements', queryFocusable());
+```
+
+You will also need to set `allowJs` in your `tsconfig.json` file to be `true`.
+
+:::note
+This approach allows TypeScript to build and compile ally.js it does not provide any type checking. Only a properly authored definition file can provide type checking. If you want to contribute TypeScript definitions for ally.js the TypeScript documentation has an [excellent section on declartion files](https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html).
+:::
 
 ## Integrations
 

docs/legal.md

@@ -18,8 +18,8 @@ The logo is a composition of the [United Nations Accessibility Logo](https://www
 
 In its UMD bundle ally.js contains resources of the following projects:
 
-* [array.prototype.findindex](https://github.com/paulmillr/Array.prototype.findIndex), also MIT license
 * [domtokenlist-shim](https://github.com/jwilsson/domtokenlist), also MIT license, removed in `v1.2.0`
+* [array.prototype.findindex](https://github.com/paulmillr/Array.prototype.findIndex), also MIT license, removed in [`e2c6e42`](https://github.com/medialize/ally.js/pull/154/commits/e2c6e42f29a1f38f2d01e5455420e0595d72d7b9)
 * [css.escape](https://github.com/mathiasbynens/CSS.escape), also MIT license
 * [platform.js](https://github.com/bestiejs/platform.js), also MIT License
 

package.json

@@ -38,19 +38,20 @@
     "test:sauce": "intern-runner config=test/sauce",
     "test:browserstack": "intern-runner config=test/browserstack",
     "clean": "rimraf dist web reports && mkdirp dist web reports",
-    "build": "npm-run-all --sequential build:pre --parallel build:umd build:common build:amd --sequential build:post build:archive",
+    "build": "npm-run-all --sequential build:pre --parallel build:umd build:common build:amd build:esm --sequential build:post build:archive",
     "build:pre": "node build/build.pre.js",
     "build:post": "node build/build.post.js",
     "build:archive": "node build/build.archive.js",
     "build:umd": "npm-run-all --sequential build:umd:bundle build:umd:min build:umd:clean",
     "build:umd:bundle": "browserify dist/src/ally.js --debug --standalone ally --transform rollupify --transform [ babelify --presets [ es2015 ] ] | exorcist dist/ally.js.map > dist/ally.js",
     "build:umd:clean": "rm dist/ally.js dist/ally.js.map",
     "build:umd:min": "uglifyjs dist/ally.js --in-source-map dist/ally.js.map --source-map dist/ally.min.js.map --source-map-url ally.min.js.map --preamble \"/*! ${npm_package_name} - v${npm_package_version} - ${npm_package_homepage} - ${npm_package_license} License */\" --mangle --compress --output dist/ally.min.js",
-    "build:common": "babel --presets es2015 --plugins add-module-exports --source-maps --out-dir dist/common dist/src",
-    "build:amd": "babel --presets es2015 --plugins add-module-exports,transform-es2015-modules-umd --source-maps --out-dir dist/amd dist/src",
+    "build:common": "babel --no-babelrc --presets es2015 --plugins add-module-exports --source-maps --out-dir dist/common dist/src",
+    "build:amd": "babel --no-babelrc --presets es2015 --plugins add-module-exports,transform-es2015-modules-umd --source-maps --out-dir dist/amd dist/src",
+    "build:esm": "babel --source-maps --out-dir dist/esm dist/src",
     "postbuild:amd": "npm run build:amd:ignore-umd-wrapper",
     "build:amd:ignore-umd-wrapper": "replace '\\(function \\(global, factory\\) \\{' '(/* istanbul ignore next */ function (global, factory) {' dist/amd -r --include='*.js'",
-    "watch:amd": "babel --presets es2015 --plugins add-module-exports,transform-es2015-modules-umd --watch --source-maps --out-dir dist/amd src",
+    "watch:amd": "babel --no-babelrc --presets es2015 --plugins add-module-exports,transform-es2015-modules-umd --watch --source-maps --out-dir dist/amd src",
     "preanalyze:bundle": "browserify dist/src/ally.js --debug --standalone ally --transform [ babelify --presets [ es2015 ] ] | exorcist dist/bundle.js.map > dist/bundle.js",
     "analyze:bundle": "source-map-explorer dist/bundle.js --replace \"`node -e 'console.log(process.cwd())'`/dist/\" --with '' --html > reports/bundle-size.html",
     "postanalyze:bundle": "rimraf dist/bundle.js.map dist/bundle.js",
@@ -154,7 +155,6 @@
     "urijs": "^1.18.2"
   },
   "dependencies": {
-    "array.prototype.findindex": "^1.0.0",
     "css.escape": "^1.5.0",
     "platform": "1.3.3"
   }

src/is/visible.js

@@ -2,7 +2,7 @@
 // determine if an element is rendered
 // NOTE: that does not mean an element is visible in the viewport, see util/visible-area
 
-import 'array.prototype.findindex';
+import findIndex from '../util/array-find-index';
 import getParents from '../get/parents';
 import contextToElement from '../util/context-to-element';
 import getFrameElement from '../util/get-frame-element';
@@ -27,7 +27,7 @@ function notVisible(_path) {
   // https://github.com/jquery/jquery-ui/blob/master/ui/core.js#L109-L114
   // NOTE: a nested element can reverse visibility:hidden|collapse by explicitly setting visibility:visible
   // NOTE: visibility can be ["", "visible", "hidden", "collapse"]
-  const hidden = _path.findIndex(function(element) {
+  const hidden = findIndex(_path, function(element) {
     const visibility = computedStyle(element, 'visibility');
     return visibility === 'hidden' || visibility === 'collapse';
   });
@@ -37,7 +37,7 @@ function notVisible(_path) {
     return false;
   }
 
-  const visible = _path.findIndex(function(element) {
+  const visible = findIndex(_path, function(element) {
     return computedStyle(element, 'visibility') === 'visible';
   });
 

src/query/first-tabbable.js

@@ -10,7 +10,7 @@
     bad practice we'll ignore it until someone complains.
  */
 
-import 'array.prototype.findindex';
+import findIndex from '../util/array-find-index';
 import queryTabbable from './tabbable';
 import isFocusable from '../is/focusable';
 import nodeArray from '../util/node-array';
@@ -45,12 +45,12 @@ export default function({
 
   if (sequence.length && !ignoreAutofocus) {
     // prefer [autofocus]
-    index = sequence.findIndex(hasAutofocus);
+    index = findIndex(sequence, hasAutofocus);
   }
 
   if (sequence.length && index === -1) {
     // ignore positive [tabindex]
-    index = sequence.findIndex(hasNoPositiveTabindex);
+    index = findIndex(sequence, hasNoPositiveTabindex);
   }
 
   const _isFocusable = isFocusable.rules.except({

src/util/array-find-index.js

@@ -0,0 +1,22 @@
+export default function findIndex(array, callback) {
+  // attempt to use native or polyfilled Array#findIndex first
+  if (array.findIndex) {
+    return array.findIndex(callback);
+  }
+
+  const length = array.length;
+
+  // shortcut if the array is empty
+  if (length === 0) {
+    return -1;
+  }
+
+  // otherwise loop over array
+  for (let i = 0; i < length; i++) {
+    if (callback(array[i], i, array)) {
+      return i;
+    }
+  }
+
+  return -1;
+}

src/util/merge-dom-order.js

@@ -18,12 +18,13 @@
     })
 */
 
+import findIndex from '../util/array-find-index';
 import nodeArray from './node-array';
 import sortDomOrder from './sort-dom-order';
 
 function getFirstSuccessorOffset(list, target) {
   // find the first element that comes AFTER the target element
-  return list.findIndex(function(element) {
+  return findIndex(list, function(element) {
     return target.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_FOLLOWING;
   });
 }

test/helper/worker.js

@@ -5,8 +5,8 @@ require.config({
   paths: {
     // map to AMD files
     'ally.js': '../../dist/amd',
+
     // provide paths to dependencies
-    'array.prototype.findindex': '../../node_modules/array.prototype.findindex/index',
     'css.escape': '../../node_modules/css.escape/css.escape',
     platform: '../../node_modules/platform/platform',
   },

test/intern.js

@@ -38,7 +38,6 @@ define([], function() {
       paths: {
         'ally/util/logger': 'test/overrides/util.logger.override',
 
-        'array.prototype.findindex': 'node_modules/array.prototype.findindex/index',
         'css.escape': 'node_modules/css.escape/css.escape',
         platform: 'node_modules/platform/platform',
       },

test/pages/element.disabled.test.html

@@ -50,7 +50,6 @@ <h1>Element Disabled</h1>
       paths: {
         ally: '../../dist/amd',
         // shims required by ally.js
-        'array.prototype.findindex': '../../node_modules/array.prototype.findindex/index',
         'css.escape': '../../node_modules/css.escape/css.escape',
         'platform': '../../node_modules/platform/platform'
       }

test/pages/fix.pointer-focus-children.test.html

@@ -110,7 +110,6 @@ <h2>Flexed Redirect</h2>
       paths: {
         ally: '../../dist/amd',
         // shims required by ally.js
-        'array.prototype.findindex': '../../node_modules/array.prototype.findindex/index',
         'css.escape': '../../node_modules/css.escape/css.escape',
         'platform': '../../node_modules/platform/platform',
       }

test/pages/fix.pointer-focus-input.test.html

@@ -101,7 +101,6 @@ <h2>Non-Focusable</h2>
       paths: {
         ally: '../../dist/amd',
         // shims required by ally.js
-        'array.prototype.findindex': '../../node_modules/array.prototype.findindex/index',
         'css.escape': '../../node_modules/css.escape/css.escape',
         'platform': '../../node_modules/platform/platform',
       }

test/pages/fix.pointer-focus-parent.test.html

@@ -47,7 +47,6 @@ <h2>Link</h2>
       paths: {
         ally: '../../dist/amd',
         // shims required by ally.js
-        'array.prototype.findindex': '../../node_modules/array.prototype.findindex/index',
         'css.escape': '../../node_modules/css.escape/css.escape',
         'platform': '../../node_modules/platform/platform',
       }

test/pages/intern.events.test.html

@@ -17,7 +17,6 @@
       paths: {
         ally: '../../dist/amd',
         // shims required by ally.js
-        'array.prototype.findindex': '../../node_modules/array.prototype.findindex/index',
         'css.escape': '../../node_modules/css.escape/css.escape',
         'platform': '../../node_modules/platform/platform',
       }

test/pages/maintain.tab-focus.test.html

@@ -30,7 +30,6 @@ <h1>Maintain Tab Focus</h1>
       paths: {
         ally: '../../dist/amd',
         // shims required by ally.js
-        'array.prototype.findindex': '../../node_modules/array.prototype.findindex/index',
         'css.escape': '../../node_modules/css.escape/css.escape',
         'platform': '../../node_modules/platform/platform'
       }

test/pages/observe.interaction-type.test.html

@@ -13,7 +13,6 @@ <h1>Observe Interaction Type</h1>
       paths: {
         ally: '../../dist/amd',
         // shims required by ally.js
-        'array.prototype.findindex': '../../node_modules/array.prototype.findindex/index',
         'css.escape': '../../node_modules/css.escape/css.escape',
         'platform': '../../node_modules/platform/platform'
       }

test/pages/style.focus-within.test.html

@@ -33,7 +33,6 @@ <h1>Style focus-within</h1>
       paths: {
         ally: '../../dist/amd',
         // shims required by ally.js
-        'array.prototype.findindex': '../../node_modules/array.prototype.findindex/index',
         'css.escape': '../../node_modules/css.escape/css.escape',
         'platform': '../../node_modules/platform/platform'
       }