feat: add es modules

fix #14

CHANGELOG.md

@@ -4,13 +4,14 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [1.1.4] - unknown
+## [1.2.0] - 2018-12-14
 ### Added
+ - ES Module versions are now provided as `index.mjs` and `index.min.mjs`!
  - Firefox bug where `<a href="#top">` doesn't smooth scroll now mentioned in docs
 ### Changed
  - Update docs to mention Firefox supporting both `scroll-behavior` and `prefers-reduced-motion`
 ### Fixed
- - Added support for (URL-encoded) special characters in fragments, e.g. "#👍🏻" (which the browser will encode to "#%F0%9F%91%8D%F0%9F%8F%BB")
+ - Support for (URL-encoded) special characters in fragments, e.g. "#👍🏻" (which the browser will encode to "#%F0%9F%91%8D%F0%9F%8F%BB")
 
 ## [1.1.3] - 2018-12-10
 ### Changed

docs/index.html

@@ -176,6 +176,8 @@ <h4 id="install-npm"><span>Option 2: With npm</span></h3>
 // (Unlike this package, smoothscroll-polyfill needs to be actively invoked: )
 smoothscrollPolyfill.polyfill();
 </code></pre>
+          <p>👉🏻 The polyfill is also provided in ES module format as <code>index.mjs</code>
+            and <code>index.min.mjs</code>.</p>
           <h3 id="code-splitting"><span>Advanced installation (with Code
               Splitting)</span></h3>
           <p>If you're using a build system with support for code splitting
@@ -316,11 +318,12 @@ <h4 id="native-inconsistencies"><span>Inconsistencies in native
           smoothly.<br>If this is important to you, you can fix it by detecting
           the Blink engine and force-enabling this polyfill. Load <a href="https://github.com/isocroft/browsengine">browsengine.js</a>,
           then do (<i>before</i> the polyfill runs):</p>
-          <pre><code>if (window.webpage.engine.blink) {
+        <pre><code>if (window.webpage.engine.blink) {
           window.__forceSmoothscrollAnchorPolyfill__ = true;
 }</code></pre>
         <p><b>Gecko (Firefox):</b><br>
-          <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=279629#c27">Anchors pointing to <code>#top</code> don't smooth scroll.</a> Use
+          <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=279629#c27">Anchors
+            pointing to <code>#top</code> don't smooth scroll.</a> Use
           anchors pointing at <code>#</code> for an easy fix.</p>
         <h3 id="faq"><span>FAQ</span></h3>
         <h4 id="ssr"><span>Will this break Server Side Rendering?</span></h4>

index.js

@@ -9,7 +9,8 @@
 
 (function(global, Factory) {
     var SmoothscrollAnchorPolyfill = new Factory();
-    if (typeof exports === 'object' && typeof module !== 'undefined') {
+    var isESModule = typeof global !== 'undefined' && global.__ESM_MOCK__;
+    if (!isESModule && typeof exports === 'object' && typeof module !== 'undefined') {
         module.exports = SmoothscrollAnchorPolyfill;
     } else {
         global.SmoothscrollAnchorPolyfill = SmoothscrollAnchorPolyfill;

package.json

@@ -1,9 +1,10 @@
 {
   "name": "smoothscroll-anchor-polyfill",
-  "version": "1.1.4",
+  "version": "1.2.0",
   "description": "Apply smooth scroll to anchor links to replicate CSS scroll-behavior",
   "main": "dist/index.js",
   "unpkg": "dist/index.min.js",
+  "module": "dist/index.mjs",
   "files": [
     "dist/*",
     "index.js",
@@ -17,9 +18,11 @@
   ],
   "scripts": {
     "test": "jest --verbose",
-    "minify": "npx terser index.js -m -o dist/index.min.js --comments",
+    "build": "npx copyfiles index.js dist && node scripts/esm.js",
+    "minify": "npx terser dist/index.js -m -o dist/index.min.js --comments",
+    "minify:esm": "npx terser dist/index.mjs -m -o dist/index.min.mjs --comments --module",
     "version": "npx replace '__VERSION__' $npm_package_version dist/*",
-    "prepublishOnly": "npm run minify && npx copyfiles index.js dist && npm run version"
+    "prepublishOnly": "npm run build && npm run minify && npm run minify:esm && npm run version"
   },
   "repository": {
     "type": "git",

scripts/esm.js

@@ -0,0 +1,26 @@
+const fs = require('fs')
+const path = require('path')
+
+// Get original, non-ESM code
+const originalCode = fs.readFileSync(
+  path.resolve(__dirname, '../', 'index.js'),
+  { encoding: 'utf8' }
+)
+
+// Transform CommonJS/universal code into ESM code.
+// We provide an Object as thisArg and tell the script to bind
+// to it (even if run in CommonJS env) through a special property.
+// Then we export the polyfill now bound to the provided Object.
+const esmCode = `const esmMock = { __ESM_MOCK__: true };
+(function() {
+  ${originalCode}
+}).call(esmMock);
+
+const { SmoothscrollAnchorPolyfill } = esmMock;
+const { destroy, polyfill } = SmoothscrollAnchorPolyfill;
+
+export { destroy, polyfill };
+export default SmoothscrollAnchorPolyfill;`
+
+// Write ESM code to directory "dist"
+fs.writeFileSync(path.resolve(__dirname, '../', 'dist', 'index.mjs'), esmCode, 'utf8')