├── .eslintrc
├── .gitignore
├── .npmignore
├── LICENSE
├── README.md
├── importModule.js
├── package.json
└── test
    ├── .nojekyll
    ├── a.js
    ├── abs.nested.js
    ├── b.js
    ├── c.js
    ├── index.html
    ├── link.js
    ├── native.html
    ├── polyfill.abs.html
    ├── polyfill.abs.nested.html
    ├── polyfill.rel.html
    ├── polyfill.rel.nested.html
    └── rel.nested.js


/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "parserOptions": {
 3 |     "ecmaVersion":      6,
 4 |     "sourceType":       "module"
 5 |   },
 6 |   "env": {
 7 |     "browser":          true,
 8 |     "node":             true,
 9 |     "es6":              true
10 |   },
11 |   "extends": [
12 |     "eslint:recommended"
13 |   ],
14 |   "rules": {
15 |     "strict":           [0],
16 |     "no-new":           [0],
17 |     "new-cap":          [0],
18 |     "no-empty":         [0],
19 |     "no-shadow":        [0],
20 |     "camelcase":        [0],
21 |     "key-spacing":      [0],
22 |     "dot-notation":     [0],
23 |     "comma-dangle":     [0],
24 |     "no-console":       [0],
25 |     "no-multi-str":     [0],
26 |     "no-multi-spaces":  [0],
27 |     "no-control-regex": [0],
28 |     "no-unused-vars":   [1, { "vars": "all", "args": "after-used"} ],
29 |     "no-underscore-dangle": [0],
30 |     "no-use-before-define": [0],
31 |     "no-inner-declarations": [0]
32 |   },
33 |   "globals": {
34 |     "unescape":         false,
35 |     "escape":           false,
36 |     "google":           false
37 |   }
38 | }
39 | 
40 | 
41 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | ## ignore the dependency modules directory
2 | node_modules
3 | 
4 | ## ignore the file that is automatically regenerated
5 | .DS_Store
6 | 
7 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | ## ignore the dependency modules directory
2 | node_modules
3 | 
4 | ## ignore the file that is automatically regenerated
5 | .DS_Store
6 | 
7 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 uupaa
 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 | # Dynamic import() polyfill
  2 | 
  3 | importModule() is a polyfill of dynamic import JavaScript function.
  4 | 
  5 | ## Prepare
  6 | 
  7 | `npm i -S @uupaa/dynamic-import-polyfill`
  8 | 
  9 | ## Browser support
 10 | 
 11 | | Browser                   | `<script type="module">` | `import()`<br>(js native) | `importModule()`<br>(polyfill) |
 12 | |---------------------------|------------|---------|------------------------------|
 13 | | Chrome                    | 61+        | 63+     | 61+                          |
 14 | | Chrome (Android)          | 61+        | 63+     | 61+                          |
 15 | | Safari                    | 10.1+      | 11+     | 10.1+                        |
 16 | | Safari (iOS)              | 10.3+      | 11+     | 10.3+                        |
 17 | | Firefox                   | 60+        | 67+     | 60+                          |
 18 | | Edge                      | 16+        | :x:     | 16+                          |
 19 | | new Edge (Chromium based) | 76+        | 76+     | 76+                          |
 20 | | IE                        | :x:        | :x:     | :x:                          |
 21 | 
 22 | Browser should supports are ES Modules(`<script type="module">`), Promise, Blob and window.URL functions.
 23 | 
 24 | `import()` function browser compatibilitiy resources:
 25 | 
 26 | - MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Browser_compatibility
 27 | - Can I use: https://caniuse.com/#search=import
 28 | 
 29 | ## Usage
 30 | 
 31 | async / await style
 32 | 
 33 | ```js
 34 | <script type="module">
 35 | import { importModule } from "https://uupaa.github.io/dynamic-import-polyfill/importModule.js";
 36 | 
 37 | (async() => {
 38 |   const Modules = {
 39 |     Lib1: "./Lib1.js",
 40 |     Lib2: "https://example.com/Lib2.js",
 41 |   };
 42 |   const { Lib1 } = await importModule(Modules.Lib1); // named export and import
 43 |   const { default: Lib2 } = await importModule(Modules.Lib2); // default export and import
 44 | 
 45 |   const lib1 = new Lib1();
 46 |   const lib2 = new Lib2();
 47 |   console.log( lib1.say() );
 48 |   console.log( lib2.say() );
 49 | })();
 50 | ```
 51 | 
 52 | or Promise style.
 53 | 
 54 | ```js
 55 | <script type="module">
 56 | import { importModule } from "https://uupaa.github.io/dynamic-import-polyfill/importModule.js";
 57 | 
 58 | importModule("./Lib1.js").then(Lib1 => {
 59 |   const lib1 = new Lib1();
 60 |   console.log( lib1.say() );
 61 | });
 62 | ```
 63 | 
 64 | 
 65 | ## Demo
 66 | 
 67 | - [use native import() or polyfill importModule()](https://uupaa.github.io/dynamic-import-polyfill/test/index.html)
 68 | - [use native import()](https://uupaa.github.io/dynamic-import-polyfill/test/native.html)
 69 | - [use polyfill importModule(abs-url)](https://uupaa.github.io/dynamic-import-polyfill/test/polyfill.abs.html)
 70 | - [use polyfill importModule(rel-url)](https://uupaa.github.io/dynamic-import-polyfill/test/polyfill.rel.html)
 71 | 
 72 | ```html
 73 | <!DOCTYPE html><html>
 74 | <head>
 75 | <meta charset="utf-8"><title>dynamic-import-polyfill</title>
 76 | </head>
 77 | <body>
 78 |   <script type="module">
 79 |     import { importModule } from "../importModule.js";
 80 | 
 81 |     (async() => {
 82 |       const Modules = {
 83 |         a: "https://uupaa.github.io/dynamic-import-polyfill/test/a.js",
 84 |         b: "https://uupaa.github.io/dynamic-import-polyfill/test/b.js",
 85 |         c: "https://uupaa.github.io/dynamic-import-polyfill/test/c.js",
 86 |       };
 87 | 
 88 |       const usePolyfill = Date.now() % 2;
 89 | 
 90 |       if (usePolyfill) {
 91 |         console.log("use polyfill");
 92 |         const { a } = await importModule(Modules.a);
 93 |         const { default: b } = await importModule(Modules.b);
 94 |         const { c } = await importModule(Modules.c);
 95 |         console.log( a(), b(), c() );
 96 |       } else {
 97 |         console.log("use native");
 98 |         // use native
 99 |         const { a } = await import(Modules.a);
100 |         const { default: b } = await import(Modules.b);
101 |         const { c } = await import(Modules.c);
102 |         console.log( a(), b(), c() );
103 |       }
104 |     })();
105 |   </script>
106 | </body>
107 | </html>
108 | ```
109 | 
110 | 


--------------------------------------------------------------------------------
/importModule.js:
--------------------------------------------------------------------------------
 1 | function toAbsoluteURL(url) {
 2 |   const a = document.createElement("a");
 3 |   a.setAttribute("href", url);    // <a href="hoge.html">
 4 |   return a.cloneNode(false).href; // -> "http://example.com/hoge.html"
 5 | }
 6 | 
 7 | export function importModule(url) {
 8 |   return new Promise((resolve, reject) => {
 9 |     const vector = "$importModule$" + Math.random().toString(32).slice(2);
10 |     const script = document.createElement("script");
11 |     const destructor = () => {
12 |       delete window[vector];
13 |       script.onerror = null;
14 |       script.onload = null;
15 |       script.remove();
16 |       URL.revokeObjectURL(script.src);
17 |       script.src = "";
18 |     };
19 |     script.defer = "defer";
20 |     script.type = "module";
21 |     script.onerror = () => {
22 |       reject(new Error(`Failed to import: ${url}`));
23 |       destructor();
24 |     };
25 |     script.onload = () => {
26 |       resolve(window[vector]);
27 |       destructor();
28 |     };
29 |     const absURL = toAbsoluteURL(url);
30 |     const loader = `import * as m from "${absURL}"; window.${vector} = m;`; // export Module
31 |     const blob = new Blob([loader], { type: "text/javascript" });
32 |     script.src = URL.createObjectURL(blob);
33 | 
34 |     document.head.appendChild(script);
35 |   });
36 | }
37 | 
38 | export default importModule;
39 | 
40 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@uupaa/dynamic-import-polyfill",
 3 |   "version": "1.0.2",
 4 |   "description": "importModule() is a polyfill of import().",
 5 |   "repository": {
 6 |     "type": "git",
 7 |     "url": "https://github.com/uupaa/dynamic-import-polyfill.git"
 8 |   },
 9 |   "scripts": {},
10 |   "publishConfig": {
11 |     "access": "public"
12 |   },
13 |   "author": "uupaa.js@gmail.com",
14 |   "license": "MIT",
15 |   "main": "importModule.js",
16 |   "keywords": [
17 |     "dynamic",
18 |     "import",
19 |     "polyfill",
20 |     "module",
21 |     "ESModule",
22 |     "ESModules",
23 |     "uupaa"
24 |   ]
25 | }
26 | 


--------------------------------------------------------------------------------
/test/.nojekyll:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/test/a.js:
--------------------------------------------------------------------------------
1 | export function a() {
2 |   return "a";
3 | }
4 | 
5 | export default a;
6 | 
7 | 


--------------------------------------------------------------------------------
/test/abs.nested.js:
--------------------------------------------------------------------------------
1 | import "https://uupaa.github.io/dynamic-import-polyfill/test/b.js";
2 | import "https://uupaa.github.io/dynamic-import-polyfill/test/c.js";
3 | 
4 | export function a() {
5 |   return "a";
6 | }
7 | 
8 | export default a;
9 | 


--------------------------------------------------------------------------------
/test/b.js:
--------------------------------------------------------------------------------
1 | export function b() {
2 |   return "b";
3 | }
4 | 
5 | export default b;
6 | 
7 | 


--------------------------------------------------------------------------------
/test/c.js:
--------------------------------------------------------------------------------
1 | export function c() {
2 |   return "c";
3 | }
4 | 
5 | document.body.style.backgroundColor = "lime";
6 | 
7 | 


--------------------------------------------------------------------------------
/test/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html><html><head><meta charset="utf-8"><title>dynamic-import-polyfill</title>
 2 | </head>
 3 | <body>
 4 |   <div>Back to <a href="https://github.com/uupaa/dynamic-import-polyfill">dynamic-import-polyfill</a> repository</div>
 5 |   <div class="link-contener"></div>
 6 | 
 7 |   <script>
 8 |   window.onerror = (msg, file, line, column, err) => {
 9 |     console.error(msg, file, line, column, err);
10 |     document.body.innerHTML += `<p>${msg}, ${file}, ${line}, ${column}, ${err}</p>`;
11 |   };
12 |   </script>
13 |   <script type="module">
14 |     import "./link.js";
15 |   </script>
16 |   <script type="module">
17 |     import { importModule } from "../importModule.js";
18 | 
19 |     (async() => {
20 |       const Modules = {
21 |         a: "https://uupaa.github.io/dynamic-import-polyfill/test/a.js",
22 |         b: "https://uupaa.github.io/dynamic-import-polyfill/test/b.js",
23 |         c: "https://uupaa.github.io/dynamic-import-polyfill/test/c.js",
24 |       };
25 | 
26 |       const usePolyfill = Date.now() % 2;
27 | 
28 |       if (usePolyfill) {
29 |         console.log("use polyfill");
30 |         const { a } = await importModule(Modules.a);
31 |         const { default: b } = await importModule(Modules.b);
32 |         const { c } = await importModule(Modules.c);
33 |         console.log( a(), b(), c() );
34 |       } else {
35 |         console.log("use native");
36 |         // use native
37 |         const { a } = await import(Modules.a);
38 |         const { default: b } = await import(Modules.b);
39 |         const { c } = await import(Modules.c);
40 |         console.log( a(), b(), c() );
41 |       }
42 |     })();
43 |   </script>
44 | </body>
45 | </html>
46 | 
47 | 
48 | 


--------------------------------------------------------------------------------
/test/link.js:
--------------------------------------------------------------------------------
 1 | const LINKS = `
 2 |   <ul>
 3 |     <li><a href="./index.html">use native import() or polyfill importModule()</a></li>
 4 |     <li><a href="./native.html">use native import()</a></li>
 5 |     <li><a href="./polyfill.abs.html">use polyfill importModule(abs-url)</a></li>
 6 |     <li><a href="./polyfill.rel.html">use polyfill importModule(rel-url)</a></li>
 7 |     <li><a href="./polyfill.abs.nested.html">use polyfill importModule(abs-url) and nested import</a></li>
 8 |     <li><a href="./polyfill.rel.nested.html">use polyfill importModule(rel-url) and nested import</a></li>
 9 |   </ul>
10 | `;
11 | 
12 | document.querySelector("div.link-contener").innerHTML = LINKS;
13 | 
14 | 


--------------------------------------------------------------------------------
/test/native.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html><html><head><meta charset="utf-8"><title>dynamic-import-polyfill</title>
 2 | </head>
 3 | <body>
 4 |   <div>Back to <a href="https://github.com/uupaa/dynamic-import-polyfill">dynamic-import-polyfill</a> repository</div>
 5 |   <div class="link-contener"></div>
 6 | 
 7 |   <script>
 8 |   window.onerror = (msg, file, line, column, err) => {
 9 |     console.error(msg, file, line, column, err);
10 |     document.body.innerHTML += `<p>${msg}, ${file}, ${line}, ${column}, ${err}</p>`;
11 |   };
12 |   </script>
13 |   <script type="module">
14 |     import "./link.js";
15 |   </script>
16 |   <script type="module">
17 |     import { importModule } from "../importModule.js";
18 | 
19 |     (async() => {
20 |       const Modules = {
21 |         a: "https://uupaa.github.io/dynamic-import-polyfill/test/a.js",
22 |         b: "https://uupaa.github.io/dynamic-import-polyfill/test/b.js",
23 |         c: "https://uupaa.github.io/dynamic-import-polyfill/test/c.js",
24 |       };
25 | 
26 |         console.log("use native");
27 |         // use native
28 |         const { a } = await import(Modules.a);
29 |         const { default: b } = await import(Modules.b);
30 |         const { c } = await import(Modules.c);
31 |         console.log( a(), b(), c() );
32 |     })();
33 |   </script>
34 | </body>
35 | </html>
36 | 
37 | 
38 | 


--------------------------------------------------------------------------------
/test/polyfill.abs.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html><html><head><meta charset="utf-8"><title>dynamic-import-polyfill</title>
 2 | </head>
 3 | <body>
 4 |   <div>Back to <a href="https://github.com/uupaa/dynamic-import-polyfill">dynamic-import-polyfill</a> repository</div>
 5 |   <div class="link-contener"></div>
 6 | 
 7 |   <script>
 8 |   window.onerror = (msg, file, line, column, err) => {
 9 |     console.error(msg, file, line, column, err);
10 |     document.body.innerHTML += `<p>${msg}, ${file}, ${line}, ${column}, ${err}</p>`;
11 |   };
12 |   </script>
13 |   <script type="module">
14 |     import "./link.js";
15 |   </script>
16 |   <script type="module">
17 |     import { importModule } from "../importModule.js";
18 | 
19 |     (async() => {
20 |       const Modules = {
21 |         a: "https://uupaa.github.io/dynamic-import-polyfill/test/a.js",
22 |         b: "https://uupaa.github.io/dynamic-import-polyfill/test/b.js",
23 |         c: "https://uupaa.github.io/dynamic-import-polyfill/test/c.js",
24 |       };
25 | 
26 |         console.log("use polyfill");
27 |         const { a } = await importModule(Modules.a);
28 |         const { default: b } = await importModule(Modules.b);
29 |         const { c } = await importModule(Modules.c);
30 |         console.log( a(), b(), c() );
31 |     })();
32 |   </script>
33 | </body>
34 | </html>
35 | 
36 | 
37 | 


--------------------------------------------------------------------------------
/test/polyfill.abs.nested.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html><html><head><meta charset="utf-8"><title>dynamic-import-polyfill</title>
 2 | </head>
 3 | <body>
 4 |   <div>Back to <a href="https://github.com/uupaa/dynamic-import-polyfill">dynamic-import-polyfill</a> repository</div>
 5 |   <div class="link-contener"></div>
 6 | 
 7 |   <script>
 8 |   window.onerror = (msg, file, line, column, err) => {
 9 |     console.error(msg, file, line, column, err);
10 |     document.body.innerHTML += `<p>${msg}, ${file}, ${line}, ${column}, ${err}</p>`;
11 |   };
12 |   </script>
13 |   <script type="module">
14 |     import "./link.js";
15 |   </script>
16 |   <script type="module">
17 |     import { importModule } from "../importModule.js";
18 | 
19 |     (async() => {
20 |       const Modules = {
21 |         a: "https://uupaa.github.io/dynamic-import-polyfill/test/abs.nested.js",
22 |       };
23 | 
24 |         console.log("use polyfill edge");
25 |         const { a } = await importModule(Modules.a);
26 |         console.log( a() );
27 |     })();
28 |   </script>
29 | </body>
30 | </html>
31 | 
32 | 
33 | 


--------------------------------------------------------------------------------
/test/polyfill.rel.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html><html><head><meta charset="utf-8"><title>dynamic-import-polyfill</title>
 2 | </head>
 3 | <body>
 4 |   <div>Back to <a href="https://github.com/uupaa/dynamic-import-polyfill">dynamic-import-polyfill</a> repository</div>
 5 |   <div class="link-contener"></div>
 6 | 
 7 |   <script>
 8 |   window.onerror = (msg, file, line, column, err) => {
 9 |     console.error(msg, file, line, column, err);
10 |     document.body.innerHTML += `<p>${msg}, ${file}, ${line}, ${column}, ${err}</p>`;
11 |   };
12 |   </script>
13 |   <script type="module">
14 |     import "./link.js";
15 |   </script>
16 |   <script type="module">
17 |     import { importModule } from "../importModule.js";
18 | 
19 |     (async() => {
20 |       const Modules = {
21 |         a: "./a.js",
22 |         b: "./b.js",
23 |         c: "./c.js",
24 |       };
25 | 
26 |         console.log("use polyfill");
27 |         const { a } = await importModule(Modules.a);
28 |         const { default: b } = await importModule(Modules.b);
29 |         const { c } = await importModule(Modules.c);
30 |         console.log( a(), b(), c() );
31 |     })();
32 |   </script>
33 | </body>
34 | </html>
35 | 
36 | 
37 | 


--------------------------------------------------------------------------------
/test/polyfill.rel.nested.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html><html><head><meta charset="utf-8"><title>dynamic-import-polyfill</title>
 2 | </head>
 3 | <body>
 4 |   <div>Back to <a href="https://github.com/uupaa/dynamic-import-polyfill">dynamic-import-polyfill</a> repository</div>
 5 |   <div class="link-contener"></div>
 6 | 
 7 |   <script>
 8 |   window.onerror = (msg, file, line, column, err) => {
 9 |     console.error(msg, file, line, column, err);
10 |     document.body.innerHTML += `<p>${msg}, ${file}, ${line}, ${column}, ${err}</p>`;
11 |   };
12 |   </script>
13 |   <script type="module">
14 |     import "./link.js";
15 |   </script>
16 |   <script type="module">
17 |     import { importModule } from "../importModule.js";
18 | 
19 |     (async() => {
20 |       const Modules = {
21 |         a: "./rel.nested.js",
22 |       };
23 | 
24 |         console.log("use polyfill edge");
25 |         const { a } = await importModule(Modules.a);
26 |         console.log( a() );
27 |     })();
28 |   </script>
29 | </body>
30 | </html>
31 | 
32 | 
33 | 


--------------------------------------------------------------------------------
/test/rel.nested.js:
--------------------------------------------------------------------------------
1 | import "./b.js";
2 | import "./c.js";
3 | 
4 | export function a() {
5 |   return "a";
6 | }
7 | 
8 | export default a;
9 | 


--------------------------------------------------------------------------------