diff --git a/.gitignore b/.gitignore index 93f1361..1e81a84 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ node_modules npm-debug.log +document-promises.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 2d13acb..65c8bc9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # Changes to document-promises +### 2.0.0 (October 25, 2016) + +- Re-implemented as a ponyfill + ### 1.0.0 (October 20, 2016) - Initial version diff --git a/README.md b/README.md index 9c1e9de..41af798 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ [![Changelog][log-image]][log-url] [![Gitter Chat][git-image]][git-url] -[Document Promises] is a polyfill for [document.interactive], [document.contentLoaded], and [document.loaded] which allow you to run code after specific states of the document. +[Document Promises] is a ponyfill for [document.interactive], [document.contentLoaded], and [document.loaded] which allow you to run code after specific states of the document. ```js fetch('data.json').then(function (data) { @@ -28,6 +28,34 @@ fetch('data.json').then(function (data) { [document.loaded] is a promise that fulfills when the when the document's `readyState` becomes `complete`. +## Usage + +[Document Promises] does not attach properties to the document by default, because no browsers have yet implemented this behavior. + +Instead, developers may import the features individually. + +```js +// Example ES6 import +import contentLoaded from 'document-promises'; + +// Example CommonJS import +require('document-promises').contentLoaded; +``` + +Developers may use the ponyfill as-is immediately. + +```js +contentLoaded.then(function () { + /* document is ready */ +}); +``` + +Developers are strongly advised not to assign these promises to `document`, as the standard may still change substantially, and then such code would be future-incompatible. + +```js +document.contentLoaded = contentLoaded; +``` + ## FAQ ### What’s the difference between these promises and DOMContentLoaded? @@ -40,7 +68,7 @@ Using promises for state transitions is much more [developer friendly]. ### What’s the catch? -[Document Promises] is [public domain], dependency free, and 195 bytes when minified and gzipped. +[Document Promises] is [public domain], dependency free, and 252 bytes or less when minified and gzipped. ### Any known limitations? diff --git a/document-promises.es6 b/document-promises.es6 new file mode 100644 index 0000000..41c76ae --- /dev/null +++ b/document-promises.es6 @@ -0,0 +1,19 @@ +let promisify = (type, readyState) => { + return new Promise((resolve) => { + let listener = () => { + if (readyState.test(document.readyState)) { + document.removeEventListener(type, listener); + + resolve(); + } + }; + + document.addEventListener(type, listener); + + listener(); + }); +}; + +export let interactive = promisify('readystatechange', /^(?:interactive|complete)$/); +export let contentLoaded = promisify('DOMContentLoaded', /^(?:interactive|complete)$/); +export let loaded = promisify('readystatechange', /^complete$/); diff --git a/document-promises.js b/document-promises.js deleted file mode 100644 index f77c916..0000000 --- a/document-promises.js +++ /dev/null @@ -1,30 +0,0 @@ -if (!document.loaded) { - (function () { - function documentPromise(type, readyState) { - // promise an event has fired with a matching ready state - return new Promise(function (resolve) { - function listener() { - if (readyState.test(document.readyState)) { - document.removeEventListener(type, listener); - - resolve(); - } - } - - document.addEventListener(type, listener); - - listener(); - }); - } - - // mdn ready states: loading, interactive, & complete - // https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState - // msdn ready states: uninitialized, loading, loaded, interactive, & complete - // https://msdn.microsoft.com/en-us/library/ms534358(v=vs.85).aspx - - // document promises - document.interactive = documentPromise('readystatechange', /r|m/); - document.contentLoaded = documentPromise('DOMContentLoaded', /r|m/); - document.loaded = documentPromise('readystatechange', /m/); - })(); -} diff --git a/package.json b/package.json index e370efd..d9c1719 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "document-promises", - "version": "1.0.0", + "version": "2.0.0", "description": "Document loading states as Promises", "author": "Jonathan Neal (http://jonathantneal.com)", "license": "CC0-1.0", @@ -8,28 +8,43 @@ "homepage": "https://github.com/jonathantneal/document-promises#readme", "bugs": "https://github.com/jonathantneal/document-promises/issues", "main": "document-promises.js", + "jsnext:main": "document-promises.es6", "files": [ + "document-promises.es6", "document-promises.js", "LICENSE.md" ], "scripts": { - "test": "eslint document-promises.js && jscs document-promises.js" + "prepublish": "babel document-promises.es6 --out-file document-promises.js", + "test": "eslint document-promises.es6 && jscs document-promises.es6" }, "engines": { "node": ">=4.0.0" }, "devDependencies": { + "babel-cli": "^6.18.0", + "babel-preset-es2015": "^6.18.0", "eslint": "^3.8.1", "eslint-config-10up": "github:jonathantneal/eslint-config-10up", - "jscs": "^3.0.7" + "jscs": "^3.0.7", + "jscs-config-10up": "github:jonathantneal/jscs-config-10up" + }, + "babel": { + "presets": [ + [ + "es2015", { + "loose": true, + "modules": "commonjs" + } + ] + ] }, "eslintConfig": { "extends": "10up", - "rules": { - "consistent-this": [ - 2, - "document" - ] + "parserOptions": { + "ecmaVersion": 6, + "impliedStrict": true, + "sourceType": "module" } }, "jscsConfig": { @@ -44,8 +59,5 @@ "interactive", "state", "promise" - ], - "dependencies": { - "jscs-config-10up": "github:jonathantneal/jscs-config-10up" - } + ] }