diff --git a/CHANGELOG.md b/CHANGELOG.md index 015dc57..dd55c3c 100755 --- a/CHANGELOG.md +++ b/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 `` 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 diff --git a/docs/index.html b/docs/index.html index a9307fb..4877a72 100755 --- a/docs/index.html +++ b/docs/index.html @@ -176,6 +176,8 @@

Option 2: With npm

// (Unlike this package, smoothscroll-polyfill needs to be actively invoked: ) smoothscrollPolyfill.polyfill(); +

👉🏻 The polyfill is also provided in ES module format as index.mjs + and index.min.mjs.

Advanced installation (with Code Splitting)

If you're using a build system with support for code splitting @@ -316,11 +318,12 @@

Inconsistencies in native smoothly.
If this is important to you, you can fix it by detecting the Blink engine and force-enabling this polyfill. Load
browsengine.js, then do (before the polyfill runs):

-
if (window.webpage.engine.blink) {
+        
if (window.webpage.engine.blink) {
           window.__forceSmoothscrollAnchorPolyfill__ = true;
 }

Gecko (Firefox):
- Anchors pointing to #top don't smooth scroll. Use + Anchors + pointing to #top don't smooth scroll. Use anchors pointing at # for an easy fix.

FAQ

Will this break Server Side Rendering?

diff --git a/index.js b/index.js index b3354ac..d23996c 100755 --- a/index.js +++ b/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; diff --git a/package.json b/package.json index 2385a45..78efeee 100644 --- a/package.json +++ b/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", diff --git a/scripts/esm.js b/scripts/esm.js new file mode 100755 index 0000000..4a5811c --- /dev/null +++ b/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')