├── .gitignore
├── .eslintrc.js
├── package.json
├── README.md
├── LICENSE
└── src
    └── index.js


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


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   globals: {
 3 |     globalThis: true,
 4 |   },
 5 |   extends:  "eslint-config-next",
 6 |   rules: {
 7 |     "semi": [2, "always"],
 8 |     "complexity": ["warn", 25],
 9 |     "no-unused-vars": 'warn',
10 |     'no-restricted-globals': 'off',
11 |     "no-console": 'off',
12 |     "max-params": ["warn", 7],
13 |   },
14 | }
15 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "noscript-sfc",
 3 |   "version": "0.1.4",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "repository": {
 7 |     "type": "git",
 8 |     "url": "https://github.com/xitu/noscript-sfc"
 9 |   },
10 |   "scripts": {
11 |     "build": "esbuild src/index.js --bundle --outfile=index.js --minify",
12 |     "test": "echo \"Error: no test specified\" && exit 1"
13 |   },
14 |   "author": "akira-cn",
15 |   "license": "MIT",
16 |   "devDependencies": {
17 |     "@vue/compiler-sfc": "^3.2.31",
18 |     "esbuild": "^0.14.24",
19 |     "eslint": "^8.10.0",
20 |     "eslint-config-next": "^12.1.0"
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # NoScript SFC
 2 | 
 3 | Load vue3 SFC component with inline `<noscript>` tag. Funny :-) :Yeah:
 4 | 
 5 | https://codepen.io/akira-cn-the-selector/pen/mdqQYEg
 6 | 
 7 | ```html
 8 | <noscript type="vue-sfc" component="MyComponent" mount="#app">
 9 |   <script>
10 |     export default {
11 |       data() {
12 |         return {
13 |           count: 0
14 |         }
15 |       }
16 |     }
17 |   </script>
18 | 
19 |   <template>
20 |     <button @click="count++">Count is: {{ count }}</button>
21 |   </template>
22 | 
23 |   <style scoped>
24 |     button {
25 |       font-weight: bold;
26 |     }
27 |   </style>
28 | </noscript>
29 | <div id="app"></div>
30 | <script src="https://unpkg.com/noscript-sfc/index.js"></script>
31 | ```
32 | 


--------------------------------------------------------------------------------
/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.


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
  1 | import * as compiler from '@vue/compiler-sfc';
  2 | 
  3 | function toBase64(str) {
  4 |   return btoa(unescape(encodeURIComponent(str)));
  5 | }
  6 | function generateID() {
  7 |   return Math.random().toString(36).slice(2, 12);
  8 | }
  9 | function transformVueSFC(source, filename, mountname) {
 10 |   const {descriptor, errors} = compiler.parse(source, {filename});
 11 |   if(errors.length) throw new Error(errors.toString());
 12 |   const id = generateID();
 13 |   const hasScoped = descriptor.styles.some(e => e.scoped);
 14 |   const scopeId = hasScoped ? `data-v-${id}` : undefined;
 15 |   const templateOptions = {
 16 |     id,
 17 |     source: descriptor.template.content,
 18 |     filename: descriptor.filename,
 19 |     scoped: hasScoped,
 20 |     slotted: descriptor.slotted,
 21 |     compilerOptions: {
 22 |       scopeId: hasScoped ? scopeId : undefined,
 23 |       mode: 'module',
 24 |     },
 25 |   };
 26 |   const script = compiler.compileScript(descriptor, {id, templateOptions, sourceMap:true});
 27 |   if(script.map) {
 28 |     script.content = `${script.content}\n//# sourceMappingURL=data:application/json;base64,${toBase64(JSON.stringify(script.map))}`;
 29 |   }
 30 |   const template = compiler.compileTemplate({...templateOptions, sourceMap: true});
 31 |   if(template.map) {
 32 |     template.map.sources[0] = `${template.map.sources[0]}?template`;
 33 |     template.code = `${template.code}\n//# sourceMappingURL=data:application/json;base64,${toBase64(JSON.stringify(template.map))}`;
 34 |   }
 35 |   let cssInJS = '';
 36 |   if(descriptor.styles) {
 37 |     const styled = descriptor.styles.map((style) => {
 38 |       return compiler.compileStyle({
 39 |         id,
 40 |         source: style.content,
 41 |         scoped: style.scoped,
 42 |         preprocessLang: style.lang,
 43 |       });
 44 |     });
 45 |     if(styled.length) {
 46 |       const cssCode = styled.map(s => `${mountname} ${s.code}`).join('\n');
 47 |       cssInJS = `(function(){const el = document.createElement('style');
 48 | el.innerHTML = \`${cssCode}\`;
 49 | document.body.appendChild(el);}());`;
 50 |     }
 51 |   }
 52 |   const moduleCode = `
 53 |   import script from '${getBlobURL(script.content)}';
 54 |   import {render} from '${getBlobURL(template.code)}';
 55 |   script.render = render;
 56 |   ${filename ? `script.__file = '${filename}'` : ''};
 57 |   ${scopeId ? `script.__scopeId = '${scopeId}'` : ''};
 58 |   ${cssInJS}
 59 |   export default script;
 60 |   `;
 61 |   return moduleCode;
 62 | }
 63 | 
 64 | function getBlobURL(jsCode) {
 65 |   const blob = new Blob([jsCode], {type: 'text/javascript'});
 66 |   const blobURL = URL.createObjectURL(blob);
 67 |   return blobURL;
 68 | }
 69 | 
 70 | // https://github.com/WICG/import-maps
 71 | const map = {
 72 |   imports: {
 73 |     vue: 'https://unpkg.com/vue@3/dist/vue.esm-browser.js',
 74 |   },
 75 |   scopes: { },
 76 | };
 77 | 
 78 | function makeComponent(component) {
 79 |   const module = component.getAttribute('component');
 80 |   let moduleName = module;
 81 |   if(!/\.vue$/.test(module)) {
 82 |     moduleName += '.vue';
 83 |   }
 84 |   component.setAttribute('module', moduleName);
 85 |   if(module) {
 86 |     return [getBlobURL(transformVueSFC(component.innerHTML, moduleName, component.getAttribute('mount'))), module];
 87 |   }
 88 |   return [];
 89 | }
 90 | 
 91 | const currentScript = document.currentScript || document.querySelector('script');
 92 | 
 93 | function setup() {
 94 |   const components = document.querySelectorAll('noscript[type="vue-sfc"]');
 95 |   const importMap = {};
 96 |   let mount = [];
 97 | 
 98 |   [...components].forEach((component) => {
 99 |     const [url, module] = makeComponent(component);
100 |     if(component.hasAttribute('mount')) {
101 |       mount.push([module, component.getAttribute('mount')]);
102 |     }
103 |     if(url) {
104 |       importMap[module] = url;
105 |     }
106 |   });
107 |   const importMapEl = document.querySelector('script[type="importmap"]');
108 |   if(importMapEl) {
109 |     // map = JSON.parse(mapEl.innerHTML);
110 |     throw new Error('Cannot setup after importmap is set. Use <script type="sfc-importmap"> instead.');
111 |   }
112 | 
113 |   const externalMapEl = document.querySelector('script[type="sfc-importmap"]');
114 | 
115 |   if(externalMapEl) {
116 |     const externalMap = JSON.parse(externalMapEl.textContent);
117 |     Object.assign(map.imports, externalMap.imports);
118 |     Object.assign(map.scopes, externalMap.scopes);
119 |   }
120 | 
121 |   Object.assign(map.imports, importMap);
122 | 
123 |   const mapEl = document.createElement('script');
124 |   mapEl.setAttribute('type', 'importmap');
125 |   mapEl.textContent = JSON.stringify(map);
126 |   currentScript.after(mapEl);
127 | 
128 |   if(mount) {
129 |     const script = document.createElement('script');
130 |     script.setAttribute('type', 'module');
131 |     const apps = mount.map((item, index)=>`
132 |     import App${index} from '${item[0]}';
133 |     createApp(App${index}).mount('${item[1]}');`).join('');
134 |     script.innerHTML = `
135 |       import {createApp} from 'vue';
136 |       ${apps}
137 |     `;
138 |     document.body.appendChild(script);
139 |   }
140 | }
141 | 
142 | setup();
143 | 


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