├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── no-module-fallback.js └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | # IDE 2 | /*.iml 3 | /.idea/ 4 | 5 | # Node 6 | node_modules 7 | npm-debug.log -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | /*.iml 2 | /.idea/ 3 | .npmignore 4 | demo -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Serg Hospodarets 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Native ECMAScript modules utilities 2 | 3 | ## Installation 4 | 5 | * With npm: `npm install es-modules-utils` 6 | * With yarn: `yarn add es-modules-utils` 7 | 8 | ## Usage 9 | 10 | ### no-module-fallback 11 | 12 | Provides ability to use native ECMAScript modules (aka ES or ES6 modules, with native `import`/`export`) 13 | or the bundled JavaScript file if they are not supported. 14 | 15 | The utility script is expected to be included in HTML, e.g.: 16 | 17 | ```html 18 | 28 | ``` 29 | 30 | Params: 31 | 32 | - `module="module-URL.js"`: the URL of the script file, which will be loaded if the browser DOES support native ECMAScript modules 33 | - `no-module="no-module-URL.js"`: the URL of the script file, which will be loaded in case the browser DOES NOT support native ECMAScript modules 34 | - `add-global-class`: the binary attribute, which enables adding the 35 | `` if ES modules are supported, `` otherwise 36 | (can be used e.g. to show some animation till the ES module is loaded) 37 | - `add-global-variable`: the binary attribute, which enables adding the global Boolean variable 38 | `window.esmodules=true/false` (can be used e.g. to decide which method to use to include new scripts) 39 | 40 | The solution uses the [`nomodule`](https://html.spec.whatwg.org/#attr-script-nomodule) script attribute approach, 41 | which also can be used without the additional features like: 42 | 43 | ```html 44 | 45 | 46 | ``` 47 | 48 | --- 49 | 50 | ### [Demo live](https://hospodarets.com/demos/native-ecmascript-modules-aliases/index.html) 51 | 52 | ### [Demo code](https://github.com/shospodarets/es-modules-utils/tree/gh-pages/demo) 53 | 54 | -------------------------------------------------------------------------------- /no-module-fallback.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | // VARS 3 | const currentScript = document.currentScript; 4 | 5 | // METHODS 6 | function insertScript({isModule, src, scriptContent}) { 7 | const script = document.createElement('script'); 8 | 9 | if (isModule) { 10 | script.type = 'module'; 11 | } else { 12 | script.setAttribute('nomodule', ''); 13 | } 14 | 15 | if (src) { 16 | script.src = src; 17 | } 18 | 19 | if (scriptContent) { 20 | script.innerHTML = scriptContent; 21 | } 22 | 23 | document.head.appendChild(script); // start loading the script; 24 | } 25 | 26 | function getCommonScriptContent({isModule}) { 27 | let commonScriptContent = ''; 28 | 29 | if (currentScript.hasAttribute('add-global-class')) { 30 | commonScriptContent += 31 | `document.documentElement.classList.add("${isModule ? 'esmodules' : 'no-esmodules'}");`; 32 | } 33 | 34 | if (currentScript.hasAttribute('add-global-variable')) { 35 | commonScriptContent += `window.esmodules = ${String(isModule)};`; 36 | } 37 | 38 | return commonScriptContent; 39 | } 40 | 41 | // INIT 42 | // module 43 | insertScript({ 44 | isModule: true, 45 | scriptContent: getCommonScriptContent({isModule: true}) 46 | }); 47 | insertScript({ 48 | isModule: true, 49 | src: currentScript.getAttribute('module') 50 | }); 51 | // no-module 52 | insertScript({ 53 | isModule: false, 54 | scriptContent: getCommonScriptContent({isModule: false}) 55 | }); 56 | insertScript({ 57 | isModule: false, 58 | src: currentScript.getAttribute('no-module') 59 | }); 60 | }()); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "es-modules-utils", 3 | "version": "2.0.0", 4 | "main": "no-module-fallback.js", 5 | "description": "Native ECMAScript modules utilities", 6 | "author": "Serg Hospodarets ", 7 | "license": "MIT", 8 | "repository": "https://github.com/malyw/es-modules-utils", 9 | "bugs": { 10 | "url": "https://github.com/malyw/es-modules-utils/issues" 11 | }, 12 | "keywords": [ 13 | "javascript", 14 | "js", 15 | "es", 16 | "es6", 17 | "ECMAScript" 18 | ], 19 | "scripts": { 20 | "test": "true" 21 | } 22 | } 23 | --------------------------------------------------------------------------------