setupin 2.5.0-beta.1 → 2.5.1

package/README.md

@@ -2,11 +2,11 @@
   <b>English</b> | <a href="./README.zh-CN.md">简体中文</a>
 </p>
 
-<p align="center"><img src="./public/svgs/logo.svg"></p>
+<p align="center"><img src="./doc/logo.svg"></p>
 
 <p align="center">
   <a href="https://npmjs.com/package/setupin"><img src="https://img.shields.io/npm/v/setupin?color=orange"></a>
-  <a href="https://stackblitz.com/edit/setupin?file=index.html"><img src="https://img.shields.io/badge/Open%20in%20StackBlitz-blue"></a>
+  <a href="https://stackblitz.com/edit/setupin"><img src="https://img.shields.io/badge/Open%20in%20StackBlitz-blue"></a>
 </p>
 
 ## 😏 Why setupin
@@ -23,26 +23,39 @@
 ## 🤯 setupin.html _vs_ setup.vue
 
 <p align="center">
-  <img src="./public/svgs/setup.vue.svg" width="49%">
-  <img src="./public/svgs/setupin.html.svg" width="49%">
+  <img src="./doc/setup.vue.svg" width="49%">
+  <img src="./doc/setupin.html.svg" width="49%">
 </p>
 
 How about that? Aren't they similar
 
-## 😝 playground
+## 🤓 Characteristics
+
+[x] auto on-demand import
+[x] supports esm syntax
+[x] [top-level await](https://vuejs.org/api/sfc-script-setup.html#top-level-await)
+[ ] [sfc css features](https://vuejs.org/api/sfc-css-features.html)
+[ ] vue3 macro functions
+
+## 😝 Playground
 
 try it on
 [stackblitz](https://stackblitz.com/edit/setupin?file=index.html)
 !
 
-## 🥰 CDN
+## 🥰 Usage
 
+**The default is the dev version**
 ```html
 <script src="https://unpkg.com/setupin"></script>
 ```
 
-**or**
+**dev**
+```html
+<script src="https://unpkg.com/setupin/dist/main.js"></script>
+```
 
+**prod**
 ```html
-<script src="https://cdn.jsdelivr.net/npm/setupin"></script>
+<script src="https://unpkg.com/setupin/dist/main.prod.js"></script>
 ```

package/README.zh-CN.md

@@ -2,11 +2,11 @@
   <a href="./README.md">English</a> | <b>简体中文</b>
 </p>
 
-<p align="center"><img src="./public/svgs/logo.svg"></p>
+<p align="center"><img src="./doc/logo.svg"></p>
 
 <p align="center">
   <a href="https://npmjs.com/package/setupin"><img src="https://img.shields.io/npm/v/setupin?color=orange"></a>
-  <a href="https://stackblitz.com/edit/setupin?file=index.html"><img src="https://img.shields.io/badge/Open%20in%20StackBlitz-blue"></a>
+  <a href="https://stackblitz.com/edit/setupin"><img src="https://img.shields.io/badge/Open%20in%20StackBlitz-blue"></a>
 </p>
 
 ## 😏 为什么选择 setupin
@@ -23,12 +23,20 @@
 ## 🤯 setupin.html _vs_ setup.vue
 
 <p align="center">
-  <img src="./public/svgs/setup.vue.svg" width="49%">
-  <img src="./public/svgs/setupin.html.svg" width="49%">
+  <img src="./doc/setup.vue.svg" width="49%">
+  <img src="./doc/setupin.html.svg" width="49%">
 </p>
 
 怎么样, 它们很像吧。
 
+## 🤓 特性
+
+[x] 自动按需导入
+[x] 支持 esm 语法
+[x] [顶层 await](https://cn.vuejs.org/api/sfc-script-setup.html#top-level-await)
+[ ] [CSS 功能](https://cn.vuejs.org/api/sfc-css-features)
+[ ] vue3 宏函数
+
 ## 😝 演练场
 
 在 [stackblitz](https://stackblitz.com/edit/setupin?file=index.html)
@@ -36,12 +44,17 @@
 
 ## 🥰 CDN
 
+**默认为dev版本**
 ```html
 <script src="https://unpkg.com/setupin"></script>
 ```
 
-**or**
+**dev**
+```html
+<script src="https://unpkg.com/setupin/dist/main.js"></script>
+```
 
+**prod**
 ```html
-<script src="https://cdn.jsdelivr.net/npm/setupin"></script>
+<script src="https://unpkg.com/setupin/dist/main.prod.js"></script>
 ```

package/dist/{development/main.js → main.js}

@@ -1,53 +1,6 @@
 (function () {
   'use strict';
 
-  function discover(onPrior, onAfter) {
-    return new Promise((resolve) => {
-      const discovery = /* @__PURE__ */ Object.create(null);
-      const observer = new MutationObserver((mutations) => {
-        for (const mutation of mutations) {
-          mutation.addedNodes.forEach((node) => {
-            node instanceof Element && onPrior({ node, discovery, announce });
-          });
-        }
-      });
-      observer.observe(document, {
-        childList: true,
-        subtree: true
-      });
-      document.addEventListener("DOMContentLoaded", () => {
-        onAfter?.({ discovery, announce });
-        announce();
-      });
-      function announce() {
-        resolve(discovery);
-        observer.disconnect();
-      }
-    });
-  }
-
-  function isElMatch(el, targetHtml) {
-    try {
-      const parse = new DOMParser();
-      const aimEl = parse.parseFromString(`<body>${targetHtml}</body>`, "text/html").body.firstElementChild;
-      const isTag = aimEl?.tagName === el.tagName;
-      const nodeAttrs = el.getAttributeNames();
-      const aimAttrs = aimEl?.getAttributeNames() ?? [];
-      const hasAttr = new Set(aimAttrs).isSubsetOf(new Set(nodeAttrs));
-      return isTag && hasAttr;
-    } catch {
-      return false;
-    }
-  }
-
-  function when(gist, verifyer = gist) {
-    return function(classify) {
-      const sym = Object.getOwnPropertySymbols(classify).find((sym2) => sym2.description === "default");
-      const handler = classify[verifyer] ?? (sym && classify[sym]);
-      return handler?.(gist);
-    };
-  }
-
   var lib = {};
 
   Object.defineProperty(lib, '__esModule', {
@@ -14081,6 +14034,53 @@
     };
   }
 
+  function discover(onPrior, onAfter) {
+    return new Promise((resolve) => {
+      const discovery = /* @__PURE__ */ Object.create(null);
+      const observer = new MutationObserver((mutations) => {
+        for (const mutation of mutations) {
+          mutation.addedNodes.forEach((node) => {
+            node instanceof Element && onPrior({ node, discovery, announce });
+          });
+        }
+      });
+      observer.observe(document, {
+        childList: true,
+        subtree: true
+      });
+      document.addEventListener("DOMContentLoaded", () => {
+        onAfter?.({ discovery, announce });
+        announce();
+      });
+      function announce() {
+        resolve(discovery);
+        observer.disconnect();
+      }
+    });
+  }
+
+  function isElMatch(el, targetHtml) {
+    try {
+      const parse = new DOMParser();
+      const aimEl = parse.parseFromString(`<body>${targetHtml}</body>`, "text/html").body.firstElementChild;
+      const isTag = aimEl?.tagName === el.tagName;
+      const nodeAttrs = el.getAttributeNames();
+      const aimAttrs = aimEl?.getAttributeNames() ?? [];
+      const hasAttr = new Set(aimAttrs).isSubsetOf(new Set(nodeAttrs));
+      return isTag && hasAttr;
+    } catch {
+      return false;
+    }
+  }
+
+  function when(gist, verifyer = gist) {
+    return function(classify) {
+      const sym = Object.getOwnPropertySymbols(classify).find((sym2) => sym2.description === "default");
+      const handler = classify[verifyer] ?? (sym && classify[sym]);
+      return handler?.(gist);
+    };
+  }
+
   function getGlobalVars(astBody) {
     return astBody.flatMap((node) => when(node, node.type)({
       FunctionDeclaration: ({ id }) => id ? [id.name] : [],
@@ -14123,13 +14123,13 @@
   }
 
   function parseScript(scriptEl) {
-    const scriptContent = scriptEl?.textContent ?? "";
+    const scriptContent = scriptEl?.innerHTML ?? "";
     when(scriptEl?.tagName ?? 0)({
       0: () => {
         scriptEl = document.createElement("script");
         document.head.appendChild(scriptEl);
       },
-      SCRIPT: () => scriptEl.textContent = ""
+      SCRIPT: () => scriptEl.innerHTML = ""
     });
     scriptEl.type = "module";
     const { extractImport, getGlobalVars, isAsyncModule } = ast(scriptContent);
@@ -14188,14 +14188,14 @@
     [tagTemplate.str]: newCarrier(0, null)
   };
 
-  var state = /* @__PURE__ */ ((state2) => {
-    state2[state2["WITHOUT"] = 0] = "WITHOUT";
-    state2[state2["RELATE"] = 1] = "RELATE";
-    state2[state2["CORRECT"] = 2] = "CORRECT";
-    return state2;
-  })(state || {});
-  const { WITHOUT, RELATE, CORRECT } = state;
   const onPrior = ({ node, discovery }) => {
+    let state;
+    ((state2) => {
+      state2[state2["WITHOUT"] = 0] = "WITHOUT";
+      state2[state2["RELATE"] = 1] = "RELATE";
+      state2[state2["CORRECT"] = 2] = "CORRECT";
+    })(state || (state = {}));
+    const { WITHOUT, RELATE, CORRECT } = state;
     Object.assign(discovery, carrier);
     function _getState(tag) {
       if (!isElMatch(node, tag)) return WITHOUT;
@@ -14216,6 +14216,8 @@
       behavior[tagScript.str].beNoHere(node);
   };
 
+  const asciiLogoRaw = "/***************************************\r\n**           _               _        **\r\n**  ___  ___| |_ _   _ _ __ (_)_ __   **\r\n** / __|/ _ \\ __| | | | '_ \\| | '_ \\  **\r\n** \\__ \\  __/ |_| |_| | |_) | | | | | **\r\n** |___/\\___|\\__|\\__,_| .__/|_|_| |_| **\r\n**                    |_|             **\r\n****************************************/\r\n";
+
   /**
   * vue v3.5.12
   * (c) 2018-present Yuxi (Evan) You and Vue contributors
@@ -32547,21 +32549,23 @@ ${codeFrame}` : message);
     withScopeId
   }, Symbol.toStringTag, { value: 'Module' }));
 
-  function generate(templateCode, context) {
-    document.body.innerHTML = templateCode;
+  function generate(context) {
+    const asciiLogo = asciiLogoRaw ;
     const demandRex = new RegExp(`\\b${Object.keys(window.Vue = Vue).join("\\b|\\b")}\\b`, "g");
-    const { scriptEl, importsCode, setupCode, retNames, isAsync } = context;
+    const { importsCode, setupCode, retNames, isAsync } = context;
     const async = isAsync ? "async" : "";
     const appComp = `{template:document.body.innerHTML,${async} setup(){${setupCode}return{${retNames}}}}`;
     const suspenseComp = `{components:{c:${appComp}},template:'<Suspense><c/></Suspense>'}`;
     const createApp = `createApp(${isAsync ? suspenseComp : appComp}).mount(document.body);`;
     const autoImport = `const {createApp,${[...new Set(setupCode.match(demandRex))]}}=Vue;`;
-    scriptEl.innerHTML = importsCode + autoImport + createApp;
+    return asciiLogo + importsCode + autoImport + createApp;
   }
 
   (async () => {
     const discovery = await discover(onPrior, onAfter);
-    generate(discovery[tagTemplate.str].parsed, discovery[tagScript.str].parsed);
+    document.body.innerHTML = discovery[tagTemplate.str].parsed;
+    const { scriptEl, ...context } = discovery[tagScript.str].parsed;
+    scriptEl.innerHTML = generate(context);
   })();
 
 })();

package/dist/{production/main.js → main.prod.js}

@@ -1,53 +1,6 @@
 (function () {
   'use strict';
 
-  function discover(onPrior, onAfter) {
-    return new Promise((resolve) => {
-      const discovery = /* @__PURE__ */ Object.create(null);
-      const observer = new MutationObserver((mutations) => {
-        for (const mutation of mutations) {
-          mutation.addedNodes.forEach((node) => {
-            node instanceof Element && onPrior({ node, discovery, announce });
-          });
-        }
-      });
-      observer.observe(document, {
-        childList: true,
-        subtree: true
-      });
-      document.addEventListener("DOMContentLoaded", () => {
-        onAfter?.({ discovery, announce });
-        announce();
-      });
-      function announce() {
-        resolve(discovery);
-        observer.disconnect();
-      }
-    });
-  }
-
-  function isElMatch(el, targetHtml) {
-    try {
-      const parse = new DOMParser();
-      const aimEl = parse.parseFromString(`<body>${targetHtml}</body>`, "text/html").body.firstElementChild;
-      const isTag = aimEl?.tagName === el.tagName;
-      const nodeAttrs = el.getAttributeNames();
-      const aimAttrs = aimEl?.getAttributeNames() ?? [];
-      const hasAttr = new Set(aimAttrs).isSubsetOf(new Set(nodeAttrs));
-      return isTag && hasAttr;
-    } catch {
-      return false;
-    }
-  }
-
-  function when(gist, verifyer = gist) {
-    return function(classify) {
-      const sym = Object.getOwnPropertySymbols(classify).find((sym2) => sym2.description === "default");
-      const handler = classify[verifyer] ?? (sym && classify[sym]);
-      return handler?.(gist);
-    };
-  }
-
   var lib = {};
 
   Object.defineProperty(lib, '__esModule', {
@@ -14081,6 +14034,53 @@
     };
   }
 
+  function discover(onPrior, onAfter) {
+    return new Promise((resolve) => {
+      const discovery = /* @__PURE__ */ Object.create(null);
+      const observer = new MutationObserver((mutations) => {
+        for (const mutation of mutations) {
+          mutation.addedNodes.forEach((node) => {
+            node instanceof Element && onPrior({ node, discovery, announce });
+          });
+        }
+      });
+      observer.observe(document, {
+        childList: true,
+        subtree: true
+      });
+      document.addEventListener("DOMContentLoaded", () => {
+        onAfter?.({ discovery, announce });
+        announce();
+      });
+      function announce() {
+        resolve(discovery);
+        observer.disconnect();
+      }
+    });
+  }
+
+  function isElMatch(el, targetHtml) {
+    try {
+      const parse = new DOMParser();
+      const aimEl = parse.parseFromString(`<body>${targetHtml}</body>`, "text/html").body.firstElementChild;
+      const isTag = aimEl?.tagName === el.tagName;
+      const nodeAttrs = el.getAttributeNames();
+      const aimAttrs = aimEl?.getAttributeNames() ?? [];
+      const hasAttr = new Set(aimAttrs).isSubsetOf(new Set(nodeAttrs));
+      return isTag && hasAttr;
+    } catch {
+      return false;
+    }
+  }
+
+  function when(gist, verifyer = gist) {
+    return function(classify) {
+      const sym = Object.getOwnPropertySymbols(classify).find((sym2) => sym2.description === "default");
+      const handler = classify[verifyer] ?? (sym && classify[sym]);
+      return handler?.(gist);
+    };
+  }
+
   function getGlobalVars(astBody) {
     return astBody.flatMap((node) => when(node, node.type)({
       FunctionDeclaration: ({ id }) => id ? [id.name] : [],
@@ -14123,13 +14123,13 @@
   }
 
   function parseScript(scriptEl) {
-    const scriptContent = scriptEl?.textContent ?? "";
+    const scriptContent = scriptEl?.innerHTML ?? "";
     when(scriptEl?.tagName ?? 0)({
       0: () => {
         scriptEl = document.createElement("script");
         document.head.appendChild(scriptEl);
       },
-      SCRIPT: () => scriptEl.textContent = ""
+      SCRIPT: () => scriptEl.innerHTML = ""
     });
     scriptEl.type = "module";
     const { extractImport, getGlobalVars, isAsyncModule } = ast(scriptContent);
@@ -14188,14 +14188,14 @@
     [tagTemplate.str]: newCarrier(0, null)
   };
 
-  var state = /* @__PURE__ */ ((state2) => {
-    state2[state2["WITHOUT"] = 0] = "WITHOUT";
-    state2[state2["RELATE"] = 1] = "RELATE";
-    state2[state2["CORRECT"] = 2] = "CORRECT";
-    return state2;
-  })(state || {});
-  const { WITHOUT, RELATE, CORRECT } = state;
   const onPrior = ({ node, discovery }) => {
+    let state;
+    ((state2) => {
+      state2[state2["WITHOUT"] = 0] = "WITHOUT";
+      state2[state2["RELATE"] = 1] = "RELATE";
+      state2[state2["CORRECT"] = 2] = "CORRECT";
+    })(state || (state = {}));
+    const { WITHOUT, RELATE, CORRECT } = state;
     Object.assign(discovery, carrier);
     function _getState(tag) {
       if (!isElMatch(node, tag)) return WITHOUT;
@@ -14399,21 +14399,23 @@
     withScopeId: nm
   }, Symbol.toStringTag, { value: 'Module' }));
 
-  function generate(templateCode, context) {
-    document.body.innerHTML = templateCode;
+  function generate(context) {
+    const asciiLogo = "";
     const demandRex = new RegExp(`\\b${Object.keys(window.Vue = Vue).join("\\b|\\b")}\\b`, "g");
-    const { scriptEl, importsCode, setupCode, retNames, isAsync } = context;
+    const { importsCode, setupCode, retNames, isAsync } = context;
     const async = isAsync ? "async" : "";
     const appComp = `{template:document.body.innerHTML,${async} setup(){${setupCode}return{${retNames}}}}`;
     const suspenseComp = `{components:{c:${appComp}},template:'<Suspense><c/></Suspense>'}`;
     const createApp = `createApp(${isAsync ? suspenseComp : appComp}).mount(document.body);`;
     const autoImport = `const {createApp,${[...new Set(setupCode.match(demandRex))]}}=Vue;`;
-    scriptEl.innerHTML = importsCode + autoImport + createApp;
+    return asciiLogo + importsCode + autoImport + createApp;
   }
 
   (async () => {
     const discovery = await discover(onPrior, onAfter);
-    generate(discovery[tagTemplate.str].parsed, discovery[tagScript.str].parsed);
+    document.body.innerHTML = discovery[tagTemplate.str].parsed;
+    const { scriptEl, ...context } = discovery[tagScript.str].parsed;
+    scriptEl.innerHTML = generate(context);
   })();
 
 })();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "setupin",
   "type": "module",
-  "version": "2.5.0-beta.1",
+  "version": "2.5.1",
   "description": "Vue SFC? HTML! <script setup> in html",
   "author": "tofu-xx <tofu-xx@foxmail.com>",
   "license": "MIT",
@@ -20,14 +20,9 @@
     "html",
     "sfc"
   ],
-  "exports": {
-    "./main.js": "./dist/development/main.js",
-    "./main.prod.js": "./dist/production/main.js"
-  },
-  "main": "dist/development/main.js",
+  "main": "dist/main.js",
   "files": [
-    "dist",
-    "public"
+    "dist"
   ],
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -38,21 +33,17 @@
     "@antfu/ni": "^0.23.0",
     "@babel/parser": "^7.26.2",
     "@babel/types": "^7.26.0",
-    "@types/node": "^22.8.7",
+    "@types/node": "^22.9.0",
     "bumpp": "^9.8.1",
     "eslint": "^9.14.0",
     "eslint-plugin-format": "^0.1.2",
     "taze": "^0.18.0",
     "vite": "^5.4.10",
-    "vite-plugin-babel": "^1.2.0",
     "vue": "^3.5.12"
   },
   "scripts": {
-    "build:dev": "vite build --mode development",
-    "build:prod": "vite build --mode production",
-    "build": "nr build:dev && nr build:prod",
+    "build": "zsh ./script/build.zsh",
     "watch": "vite build --watch",
-    "dev": "vite dev",
     "release": "bumpp --no-push && nr build && pnpm publish",
     "iv": "zsh ./script/install_vue.zsh",
     "up": "taze major -I",

package/dist/development/svgs/logo.svg

@@ -1,18 +0,0 @@
-  <svg xmlns="http://www.w3.org/2000/svg" width="231" height="137.66">
-    <path
-      style="fill: #2b3d4f; stroke: none"
-      d="M25 41L25 99L58 99C62.5954 99 68.6309 97.9925 73 99.6034C78.1157 101.49 82.2455 107.245 86 111C95.2825 120.282 106.436 129.262 114 140L117 140C124.564 129.262 135.718 120.282 145 111C148.755 107.245 152.884 101.49 158 99.6034C162.369 97.9925 168.405 99 173 99L206 99L206 41L171 41C166.035 41 159.383 42.1639 155 39.3966C144.593 32.8268 135.694 20.6941 127 12C124.177 9.17657 119.429 2.28673 115 2.34567C110.546 2.40495 105.853 9.14688 103 12C94.3055 20.694 85.407 32.8267 75 39.3966C70.8239 42.033 64.7246 41 60 41L25 41z" />
-    <text fill="#21b899" x="58" y="80" font-family="'Comic Sans MS'" font-size="34">setupin</text>
-    <path
-      style="fill: #f2fbf9; stroke: none"
-      d="M115 7C104.443 17.557 91.5993 27.7923 83 40C86.4725 40 90.6915 40.6165 94 39.3966C101.585 36.5999 110.439 25.4748 115 19C121.119 25.1192 128.774 36.3637 137 39.3966C140.309 40.6165 144.528 40 148 40C143.546 33.6776 137.46 28.4599 132 23C126.54 17.5401 121.322 11.4536 115 7z" />
-    <path
-      style="fill: #21b899; stroke: none"
-      d="M97 40L134 40C131.415 34.4563 126.392 30.2125 122 26.0193C120.359 24.453 118.407 22.2053 116 21.9213C113.163 21.5866 110.838 24.2646 109 26.0193C104.608 30.2125 99.5852 34.4563 97 40z" />
-    <path
-      style="fill: #21b899; stroke: none"
-      d="M97 100C99.5852 105.544 104.608 109.787 109 113.981C110.838 115.735 113.163 118.413 116 118.079C118.804 117.748 121.125 114.834 123 112.995C127.208 108.869 131.603 104.822 135 100L97 100z" />
-    <path
-      style="fill: #f2fbf9; stroke: none"
-      d="M84 101C92.3411 112.841 104.761 122.761 115 133C120.952 128.807 125.86 123.14 131 118C136.46 112.54 142.546 107.322 147 101C143.527 101 139.309 100.384 136 101.603C128.696 104.296 120.386 114.773 116 121C110.137 115.137 102.89 104.512 95 101.603C91.6915 100.384 87.4725 101 84 101z" />
-  </svg>