├── .eslintrc.js
├── .gitignore
├── LICENSE
├── README.md
├── dist
    ├── core.js
    └── loaders.js
├── index.js
├── jest.config.js
├── loaders
    ├── index.js
    ├── react-loader.js
    ├── typescript-loader.js
    └── utils.js
├── package-lock.json
├── package.json
└── tests
    ├── index.spec.js
    └── pages
        └── simple.html


/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   ENV: {
 3 |     jest: true,
 4 |   },
 5 |   globals: {
 6 |     globalThis: true,
 7 |     page: true,
 8 |   },
 9 |   extends: 'eslint-config-sprite',
10 |   rules: {
11 |     complexity: ['warn', 25],
12 |     'no-unused-vars': 'warn',
13 |     'no-restricted-globals': 'off',
14 |     'max-params': ['warn', 7],
15 |     'import/no-anonymous-default-export': 'off',
16 |     'no-console': 'warn',
17 |   },
18 | };
19 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | npm-debug.log*
3 | .nyc_*/
4 | .dir-locals.el
5 | .DS_Store
6 | .test
7 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 稀土掘金
 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.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # ES inline module
  2 | 
  3 | A simple way of loading inline es-modules on modern browser.
  4 | 
  5 | ## Usage
  6 | 
  7 | 1. Use `inlineImport` to dynamically import inline scripts.
  8 | 
  9 | ```html
 10 | <script type="inline-module" id="foo">
 11 |   const foo = 'bar';
 12 |   export default {foo};
 13 | </script>
 14 | <script src="https://unpkg.com/inline-module/index.js" setup="false"></script>
 15 | <script type="module">
 16 |   const foo = (await inlineImport('#foo')).default;
 17 |   console.log(foo); // {foo: 'bar'}
 18 | </script>
 19 |   ```
 20 | 
 21 | 2. Auto setup to insert importmap. Then you can use inline module as normal es-modules.
 22 | 
 23 | ```html
 24 | <script type="inline-module" id="foo">
 25 |   const foo = 'bar';
 26 |   export default {foo};
 27 | </script>
 28 | <script src="https://unpkg.com/inline-module/index.js"></script>
 29 | <script type="module">
 30 |   import foo from '#foo';
 31 |   console.log(foo); // {foo: 'bar'}
 32 | </script>
 33 | ```
 34 | 
 35 | **Note：inline-module script must be setup before all module scripts and after all inline-module scripts in this mode.**
 36 | 
 37 | 3. Use setup and external importmap.
 38 | 
 39 | ```html
 40 | <script type="inline-module-importmap">
 41 |   {
 42 |     "imports": {
 43 |       "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
 44 |     }
 45 |   }
 46 | </script>
 47 | <script type="inline-module" id="foo">
 48 | const foo = 'bar';
 49 | export default foo;
 50 | </script>
 51 | <script src="https://unpkg.com/inline-module/index.js"></script>
 52 | <script type="module">
 53 |   import foo from '#foo'
 54 |   console.log(foo);
 55 |   import {createApp} from 'vue';
 56 |   console.log(createApp);
 57 | </script>
 58 | ```
 59 | 
 60 | ## v0.4+ Update
 61 | 
 62 | 1. react & typescript loader
 63 | 
 64 | ```html
 65 | <script type="inline-module-importmap">
 66 |   {
 67 |     "imports": {
 68 |       "styled-components": "https://unpkg.com/@esm-bundle/styled-components/esm/styled-components.browser.min.js"
 69 |     }
 70 |   }
 71 | </script>
 72 | <script type="inline-module" name="hello" loader="react">
 73 |   import React from 'react';
 74 |   import styled from 'styled-components';
 75 |   
 76 |   const Title = styled.h1`
 77 |     font-size: 1.5em;
 78 |     text-align: center;
 79 |     color: palevioletred;
 80 |   `;
 81 |   
 82 |   const name = 'Akira';
 83 |   class Hello extends React.Component {
 84 |     render() {
 85 |       return (
 86 |         <Title>
 87 |           Hello~~ {name}
 88 |         </Title>
 89 |       );
 90 |     }
 91 |   }
 92 |   
 93 |   export default Hello;
 94 | </script>
 95 | <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
 96 | <script src="https://unpkg.com/inline-module/dist/loaders.js"></script>
 97 | <script src="https://unpkg.com/inline-module/dist/core.js"></script>
 98 | <div id="app"></div>
 99 | <script type="module">
100 |   import Hello from 'hello';
101 |   import React from 'react';
102 |   import ReactDOM from 'react-dom';
103 |   ReactDOM.render(React.createElement(Hello), document.getElementById('app'));
104 | </script>
105 | ```
106 | 


--------------------------------------------------------------------------------
/dist/core.js:
--------------------------------------------------------------------------------
1 | (()=>{var d=window["inline-module-loaders"],l=document.currentScript||document.querySelector("script"),a={imports:{},scopes:{}},f=new Set;function y(t){return btoa(unescape(encodeURIComponent(t)))}function g(t){let n=new XMLHttpRequest;if(n.open("GET",t,!1),n.send(null),n.status===200)return n.responseText;throw new Error(n.statusText)}function S(t,n){let r=/^(\s*import\s+[\s\S]*?from\s*['"`])([\s\S]*?)(['"`])/img;return t.replace(r,(s,i,e,o)=>{let c=n[e];return c?`${i}${c}${o}`:`${i}${e}${o}`})}function b(t,n=!1,r={}){let s=t.textContent;if(t.hasAttribute("src")){let e=t.getAttribute("src");s=g(e),t.textContent=s}n&&(s=S(s,r));let i=t.getAttribute("loader");return i&&(i=i.split(/\s*>\s*/),s=i.reduce((e,o)=>{let{transform:c,imports:p}=d[o],{code:u,map:m}=c(e,{sourceMap:!0,filename:t.getAttribute("name")||t.id||"anonymous"});return m?e=`${u}
2 | 
3 | //# sourceMappingURL=data:application/json;base64,${y(JSON.stringify(m))}`:e=u,Object.assign(r.imports,p),e},s)),$(s,"text/javascript")}function $(t,n="text/plain"){let r=new Blob([t],{type:n});return URL.createObjectURL(r)}function w(){let t=document.querySelectorAll('script[type="inline-module"]'),n={},r=[],s=document.querySelector('script[type="importmap"]');s&&console.warn('Cannot update importmap after  <script type="importmap"> is set. Please use <script type="inline-module-importmap"> instead.'),[...t].forEach(e=>{let{id:o}=e,c=e.getAttribute("name"),p=b(e,!!s,n);o&&(n[`#${o}`]=p,n[`//#${o}`]=p),c&&(n[c]=p,n[`//${c}`]=p),r.push(p)});let i=document.querySelector('script[type="inline-module-importmap"]');if(i){let e=JSON.parse(i.textContent);Object.assign(a.imports,e.imports),Object.assign(a.scopes,e.scopes)}if(Object.assign(a.imports,n),!s){let e=document.createElement("script");e.setAttribute("type","importmap"),e.textContent=JSON.stringify(a),l.after(e)}r.forEach(e=>{if(!f.has(e)){let o=document.createElement("script");o.async=!1,o.setAttribute("type","module"),o.setAttribute("src",e),l.after(o),f.add(e)}})}l.getAttribute("setup")!=="false"&&w();window.inlineImport=async t=>{let{imports:n}=a,r=null;if(t in n)r=n[t];else{let s;/^#/.test(t)&&(s=document.querySelector(`script[type="inline-module"]${t}`)),s||(s=document.querySelector(`script[type="inline-module"][name="${t}"]`)),s&&(r=b(s),n[t]=r)}return r?await import(r):null};})();
4 | 


--------------------------------------------------------------------------------
/dist/loaders.js:
--------------------------------------------------------------------------------
1 | (()=>{function s(){if(typeof Babel>"u")throw new Error("React transform requires babel-standalone(https://unpkg.com/@babel/standalone/babel.min.js).");return Babel}var o={transform(a,e={}){let{availablePresets:t,transform:n}=s(),{filename:r}=e;/\.[tj]sx$/.test(r)||(e.filename=`${r}.jsx`);let i=[t.react];return/\.tsx$/.test(r)&&i.push(t.typescript),n(a,{presets:[t.react,t.typescript],...e})},imports:{react:"https://unpkg.com/@esm-bundle/react/esm/react.development.js","react-dom":"https://unpkg.com/@esm-bundle/react-dom/esm/react-dom.development.js","react-is":"https://unpkg.com/@esm-bundle/react-is/esm/react-is.development.js"}};var m={transform(a,e={}){let{availablePresets:t,transform:n}=s(),{filename:r}=e;return/\.ts$/.test(r)||(e.filename=`${r}.ts`),n(a,{presets:[t.typescript],...e})},imports:{}};window["inline-module-loaders"]=window["inline-module-loaders"]||{};window["inline-module-loaders"].react=o;window["inline-module-loaders"].typescript=m;})();
2 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
  1 | const loaderMap = window['inline-module-loaders'];
  2 | 
  3 | const currentScript = document.currentScript || document.querySelector('script');
  4 | 
  5 | // https://github.com/WICG/import-maps
  6 | const map = {imports: {}, scopes: {}};
  7 | const installed = new Set();
  8 | 
  9 | function toBase64(str) {
 10 |   return btoa(unescape(encodeURIComponent(str)));
 11 | }
 12 | 
 13 | function loadContent(url) {
 14 |   const request = new XMLHttpRequest();
 15 |   request.open('GET', url, false); // `false` makes the request synchronous
 16 |   request.send(null);
 17 | 
 18 |   if(request.status === 200) {
 19 |     return request.responseText;
 20 |   }
 21 |   throw new Error(request.statusText);
 22 | }
 23 | 
 24 | // replace code
 25 | function replaceImport(code, map) {
 26 |   const importExp = /^(\s*import\s+[\s\S]*?from\s*['"`])([\s\S]*?)(['"`])/img;
 27 |   return code.replace(importExp, (a, b, c, d) => {
 28 |     const url = map[c];
 29 |     if(url) {
 30 |       return `${b}${url}${d}`;
 31 |     }
 32 |     return `${b}${c}${d}`;
 33 |   });
 34 | }
 35 | 
 36 | function getBlobURL(module, replaceImportURL = false, map = {}) {
 37 |   let jsCode = module.textContent;
 38 |   if(module.hasAttribute('src')) {
 39 |     const url = module.getAttribute('src');
 40 |     jsCode = loadContent(url);
 41 |     module.textContent = jsCode;
 42 |   }
 43 |   if(replaceImportURL) {
 44 |     jsCode = replaceImport(jsCode, map);
 45 |   }
 46 |   let loaders = module.getAttribute('loader');
 47 |   if(loaders) {
 48 |     loaders = loaders.split(/\s*>\s*/);
 49 |     jsCode = loaders.reduce((code, loader) => {
 50 |       const {transform, imports} = loaderMap[loader];
 51 |       const {code: resolved, map: sourceMap} = transform(code, {sourceMap: true, filename: module.getAttribute('name') || module.id || 'anonymous'});
 52 |       if(sourceMap) code = `${resolved}\n\n//# sourceMappingURL=data:application/json;base64,${toBase64(JSON.stringify(sourceMap))}`;
 53 |       else code = resolved;
 54 |       Object.assign(map.imports, imports);
 55 |       return code;
 56 |     }, jsCode);
 57 |   }
 58 |   return createBlob(jsCode, 'text/javascript');
 59 | }
 60 | 
 61 | function createBlob(code, type = 'text/plain') {
 62 |   const blob = new Blob([code], {type});
 63 |   const blobURL = URL.createObjectURL(blob);
 64 |   return blobURL;
 65 | }
 66 | 
 67 | function setup() {
 68 |   const modules = document.querySelectorAll('script[type="inline-module"]');
 69 |   const importMap = {};
 70 |   const loadModules = [];
 71 | 
 72 |   const importMapEl = document.querySelector('script[type="importmap"]');
 73 |   if(importMapEl) {
 74 |     console.warn('Cannot update importmap after  <script type="importmap"> is set. Please use <script type="inline-module-importmap"> instead.');
 75 |   }
 76 | 
 77 |   [...modules].forEach((module) => {
 78 |     const {id} = module;
 79 |     const name = module.getAttribute('name');
 80 |     const url = getBlobURL(module, !!importMapEl, importMap);
 81 |     if(id) {
 82 |       importMap[`#${id}`] = url;
 83 |       importMap[`//#${id}`] = url; // for some platform only support protocals
 84 |     }
 85 |     if(name) {
 86 |       importMap[name] = url;
 87 |       importMap[`//${name}`] = url; // for some platform only support protocals
 88 |     }
 89 |     loadModules.push(url);
 90 |   });
 91 | 
 92 |   const externalMapEl = document.querySelector('script[type="inline-module-importmap"]');
 93 |   if(externalMapEl) {
 94 |     const externalMap = JSON.parse(externalMapEl.textContent);
 95 |     Object.assign(map.imports, externalMap.imports);
 96 |     Object.assign(map.scopes, externalMap.scopes);
 97 |   }
 98 | 
 99 |   Object.assign(map.imports, importMap);
100 | 
101 |   if(!importMapEl) {
102 |     const mapEl = document.createElement('script');
103 |     mapEl.setAttribute('type', 'importmap');
104 |     mapEl.textContent = JSON.stringify(map);
105 |     currentScript.after(mapEl);
106 |   }
107 | 
108 |   loadModules.forEach((url) => {
109 |     if(!installed.has(url)) { // mount
110 |       const el = document.createElement('script');
111 |       el.async = false;
112 |       el.setAttribute('type', 'module');
113 |       el.setAttribute('src', url);
114 |       currentScript.after(el);
115 |       installed.add(url);
116 |     }
117 |   });
118 | }
119 | 
120 | if(currentScript.getAttribute('setup') !== 'false') {
121 |   setup();
122 | }
123 | 
124 | window.inlineImport = async (moduleID) => {
125 |   const {imports} = map;
126 |   let blobURL = null;
127 |   if(moduleID in imports) blobURL = imports[moduleID];
128 |   else {
129 |     let module;
130 |     if(/^#/.test(moduleID)) {
131 |       module = document.querySelector(`script[type="inline-module"]${moduleID}`);
132 |     }
133 |     if(!module) {
134 |       module = document.querySelector(`script[type="inline-module"][name="${moduleID}"]`);
135 |     }
136 |     if(module) {
137 |       blobURL = getBlobURL(module);
138 |       imports[moduleID] = blobURL;
139 |     }
140 |   }
141 |   if(blobURL) {
142 |     const result = await import(blobURL);
143 |     return result;
144 |   }
145 |   return null;
146 | };


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     preset: 'jest-puppeteer',
 3 |     globals: {
 4 |         URL: 'http://localhost:8080',
 5 |     },
 6 |     verbose: true,
 7 |     coveragePathIgnorePatterns: [
 8 |         "/node_modules/", // 这个目录的内容是不用 jest 处理的
 9 |         "/.test/",
10 |     ]
11 | };
12 | 


--------------------------------------------------------------------------------
/loaders/index.js:
--------------------------------------------------------------------------------
1 | import reactLoader from './react-loader';
2 | import tsLoader from './typescript-loader';
3 | 
4 | window['inline-module-loaders'] = window['inline-module-loaders'] || {};
5 | 
6 | window['inline-module-loaders'].react = reactLoader;
7 | window['inline-module-loaders'].typescript = tsLoader;


--------------------------------------------------------------------------------
/loaders/react-loader.js:
--------------------------------------------------------------------------------
 1 | import { requireBabel } from "./utils";
 2 | 
 3 | export default {
 4 |   transform(code, options = {}) {
 5 |     const {availablePresets, transform} = requireBabel();
 6 |     const {filename} = options;
 7 |     if(!/\.[tj]sx$/.test(filename)) {
 8 |       options.filename = `${filename}.jsx`;
 9 |     }
10 |     const presets = [availablePresets.react];
11 |     if(/\.tsx$/.test(filename)) {
12 |       presets.push(availablePresets.typescript);
13 |     }
14 |     return transform(code, {
15 |       presets: [availablePresets.react, availablePresets.typescript],
16 |       ...options
17 |     }); 
18 |   },
19 |   imports: {
20 |     react: 'https://unpkg.com/@esm-bundle/react/esm/react.development.js',
21 |     'react-dom': 'https://unpkg.com/@esm-bundle/react-dom/esm/react-dom.development.js',
22 |     'react-is': 'https://unpkg.com/@esm-bundle/react-is/esm/react-is.development.js',
23 |   },
24 | };


--------------------------------------------------------------------------------
/loaders/typescript-loader.js:
--------------------------------------------------------------------------------
 1 | import { requireBabel } from "./utils";
 2 | 
 3 | export default {
 4 |   transform(code, options = {}) {
 5 |     const {availablePresets, transform} = requireBabel();
 6 |     const {filename} = options;
 7 |     if(!/\.ts$/.test(filename)) {
 8 |       options.filename = `${filename}.ts`;
 9 |     }
10 |     return transform(code, {
11 |       presets: [availablePresets.typescript],
12 |       ...options
13 |     }); 
14 |   },
15 |   imports: {
16 | 
17 |   },
18 | };


--------------------------------------------------------------------------------
/loaders/utils.js:
--------------------------------------------------------------------------------
1 | export function requireBabel() {
2 |   if(typeof Babel === 'undefined') {
3 |     throw new Error('React transform requires babel-standalone(https://unpkg.com/@babel/standalone/babel.min.js).');
4 |   }
5 |   return Babel;
6 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "inline-module",
 3 |   "version": "0.6.1",
 4 |   "description": "Load inline es modules on modern browser.",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "build": "npm run build:loaders & npm run build:core",
 8 |     "build:loaders": "esbuild loaders/index.js --bundle --outfile=dist/loaders.js --minify",
 9 |     "build:core": "esbuild index.js --bundle --outfile=dist/core.js --minify",
10 |     "prepublishOnly": "npm run build && npm run test",
11 |     "test": "jest"
12 |   },
13 |   "repository": {
14 |     "type": "git",
15 |     "url": "https://github.com/xitu/inline-module"
16 |   },
17 |   "author": "akira-cn",
18 |   "license": "MIT",
19 |   "devDependencies": {
20 |     "@babel/standalone": "^7.17.6",
21 |     "@types/jest": "^27.4.1",
22 |     "@types/puppeteer": "^5.4.5",
23 |     "esbuild": "^0.14.24",
24 |     "eslint": "^8.10.0",
25 |     "eslint-config-sprite": "^1.0.6",
26 |     "jest": "^27.5.1",
27 |     "jest-puppeteer": "^6.1.0",
28 |     "puppeteer": "^13.5.2"
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/tests/index.spec.js:
--------------------------------------------------------------------------------
 1 | const timeout = 5000;
 2 | const fs = require('fs');
 3 | const path = require('path');
 4 | 
 5 | async function getDocCase(file) {
 6 |   const filePath = fs.realpathSync(path.join(__dirname, file));
 7 |   await page.goto(`file://${filePath}`, {waitUntil: 'domcontentloaded'});
 8 | }
 9 | 
10 | describe('inline-module', () => {
11 |   test(
12 |     'importing inline module correctly',
13 |     async () => {
14 |       await getDocCase('./pages/simple.html');
15 |       const value = await page.evaluate(() => window.fooValue);
16 |       expect(value).toBe('bar');
17 |     },
18 |     timeout,
19 |   );
20 | 
21 |   test('more tests...', () => {
22 |     expect(1).toBe(1);
23 |   });
24 | });
25 | 


--------------------------------------------------------------------------------
/tests/pages/simple.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>inline-module</title>
 9 |     <script type="inline-module-importmap">
10 |         {
11 |           "imports": {
12 |             "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
13 |           }
14 |         }
15 |       </script>
16 |     <script type="inline-module" id="foo">
17 |       const foo = 'bar';
18 |       export default foo;
19 |     </script>
20 |     <script src="../../index.js"></script>
21 |     <script type="module">
22 |         import foo from '#foo'
23 |         import { createApp } from 'vue';
24 |         console.log(createApp);
25 |         console.log(foo);
26 |         window.fooValue = foo
27 |     </script>
28 | </head>
29 | 
30 | <body>
31 | 
32 | </body>
33 | 
34 | </html>


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