From 4ef95add388210c79b67d0024f811b9c14c989c0 Mon Sep 17 00:00:00 2001 From: Jonathan Neal Date: Tue, 25 Oct 2016 17:00:53 -0400 Subject: [PATCH 1/5] 2.0.0 --- .gitignore | 1 + CHANGELOG.md | 4 ++++ README.md | 32 ++++++++++++++++++++++++++++++-- document-promises.es6 | 19 +++++++++++++++++++ document-promises.js | 30 ------------------------------ package.json | 36 ++++++++++++++++++++++++------------ 6 files changed, 78 insertions(+), 44 deletions(-) create mode 100644 document-promises.es6 delete mode 100644 document-promises.js 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..e8bc032 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 may also polyfill the proposal at their own risk. + +```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 236 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..eb50f8c --- /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', /r|m/); +export let contentLoaded = promisify('DOMContentLoaded', /r|m/); +export let loaded = promisify('readystatechange', /m/); 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..f62a1ee 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" + "build": "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" - } + ] } From 99d2ecf1d6ffea7c6f66e2d2464c72aa3d2647c6 Mon Sep 17 00:00:00 2001 From: Jonathan Neal Date: Tue, 25 Oct 2016 17:29:20 -0400 Subject: [PATCH 2/5] 2.0.0: Use explicit regex --- document-promises.es6 | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/document-promises.es6 b/document-promises.es6 index eb50f8c..41c76ae 100644 --- a/document-promises.es6 +++ b/document-promises.es6 @@ -14,6 +14,6 @@ let promisify = (type, readyState) => { }); }; -export let interactive = promisify('readystatechange', /r|m/); -export let contentLoaded = promisify('DOMContentLoaded', /r|m/); -export let loaded = promisify('readystatechange', /m/); +export let interactive = promisify('readystatechange', /^(?:interactive|complete)$/); +export let contentLoaded = promisify('DOMContentLoaded', /^(?:interactive|complete)$/); +export let loaded = promisify('readystatechange', /^complete$/); From 4db67e00eabcecc698237d29a32f592a96a631c2 Mon Sep 17 00:00:00 2001 From: Jonathan Neal Date: Tue, 25 Oct 2016 17:29:45 -0400 Subject: [PATCH 3/5] 2.0.0: Advise against assigning promises to the document --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index e8bc032..f906a1e 100644 --- a/README.md +++ b/README.md @@ -50,7 +50,7 @@ contentLoaded.then(function () { }); ``` -Developers may also polyfill the proposal at their own risk. +Developers are strongly advised not to assign these promises to `document`, as the standard may still change substantially and such code would be future-incompatible. ```js document.contentLoaded = contentLoaded; @@ -68,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 236 bytes or less when minified and gzipped. +[Document Promises] is [public domain], dependency free, and 252 bytes or less when minified and gzipped. ### Any known limitations? From ea1cb4841da7b273619ca970f64a475229346192 Mon Sep 17 00:00:00 2001 From: Jonathan Neal Date: Tue, 25 Oct 2016 17:30:05 -0400 Subject: [PATCH 4/5] 2.0.0: Safely generate the file on prepublish --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index f62a1ee..d9c1719 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "LICENSE.md" ], "scripts": { - "build": "babel document-promises.es6 --out-file document-promises.js", + "prepublish": "babel document-promises.es6 --out-file document-promises.js", "test": "eslint document-promises.es6 && jscs document-promises.es6" }, "engines": { From 9994f658c278292659051686362836478a6bad1a Mon Sep 17 00:00:00 2001 From: Jonathan Neal Date: Tue, 25 Oct 2016 23:49:03 -0400 Subject: [PATCH 5/5] 2.0.0: Clarify discouragement --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index f906a1e..41af798 100644 --- a/README.md +++ b/README.md @@ -50,7 +50,7 @@ contentLoaded.then(function () { }); ``` -Developers are strongly advised not to assign these promises to `document`, as the standard may still change substantially and such code would be future-incompatible. +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;