setupin 2.2.3 → 2.3.0

package/dist/main.js

@@ -1,50 +1,6 @@
 (function () {
   'use strict';
 
-  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 loaded(callback) {
-    document.addEventListener("DOMContentLoaded", callback);
-  }
-
-  function observe(SorM, callback) {
-    return when(SorM, typeof SorM)({
-      string: (selector) => new Promise((resolve, reject) => {
-        let isFound = false;
-        new MutationObserver((mutations, observer) => {
-          for (const mutation of mutations) {
-            const target = mutation.target?.querySelector(selector);
-            if (target) {
-              isFound = true;
-              observer.disconnect();
-              const result = callback?.(target);
-              result instanceof Error ? reject(result) : resolve(result);
-              break;
-            }
-          }
-          loaded(() => {
-            if (isFound)
-              return;
-            observer.disconnect();
-            resolve(callback?.(void 0));
-            console.warn(`No ${selector} found`);
-          });
-        }).observe(document, {
-          childList: true,
-          subtree: true
-        });
-      }),
-      object: (map) => Object.fromEntries(
-        Object.entries(map).map(([key, fn]) => [key, observe(key, fn)])
-      )
-    });
-  }
-
   var lib = {};
 
   Object.defineProperty(lib, '__esModule', {
@@ -14068,9 +14024,54 @@
   lib.parseExpression = parseExpression;
   lib.tokTypes = tokTypes;
 
-  function getASTBody(code) {
-    return parse_1(code, { sourceType: "module" }).program.body;
+  function extractImport(astBody, code) {
+    const imports = astBody.filter(({ type }) => type === "ImportDeclaration").map((node) => code.slice(node.start, node.end));
+    return {
+      importText: imports.join("\n"),
+      setupText: code.replace(new RegExp(imports.join("|"), "g"), "")
+    };
+  }
+
+  function observe(selector, callback) {
+    return new Promise((resolve, reject) => {
+      let isFound = false;
+      new MutationObserver((mutations, observer) => {
+        for (const mutation of mutations) {
+          const target = mutation.target?.querySelector(selector);
+          if (target) {
+            isFound = true;
+            observer.disconnect();
+            resolve(callback?.(target));
+            break;
+          }
+        }
+        document.addEventListener("DOMContentLoaded", () => {
+          if (isFound)
+            return;
+          observer.disconnect();
+          const result = callback?.(void 0);
+          if (result instanceof Error) {
+            reject(result);
+          } else {
+            resolve(result);
+            console.warn(`No ${selector} found`);
+          }
+        });
+      }).observe(document, {
+        childList: true,
+        subtree: true
+      });
+    });
+  }
+
+  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] : [],
@@ -14095,43 +14096,62 @@
       });
     }
   }
-  function extractImport(code, astBody) {
-    const imports = astBody.filter(({ type }) => type === "ImportDeclaration").map((node) => code.slice(node.start, node.end));
-    return [imports.join("\n"), code.replace(new RegExp(imports.join("|"), "g"), "")];
+
+  function ast(code) {
+    const astBody = parse_1(code, { sourceType: "module" }).program.body;
+    return {
+      getGlobalVars: () => getGlobalVars(astBody),
+      extractImport: () => extractImport(astBody, code)
+    };
   }
 
-  function parseSetup(scriptEl) {
-    const scriptText = scriptEl?.textContent ?? "";
-    const astBody = getASTBody(scriptText);
-    const [importText, setupText] = extractImport(scriptText, astBody);
-    if (scriptEl && importText) {
-      scriptEl.type = "module";
-      scriptEl.textContent = importText;
+  function parseSetup(setupEl) {
+    const scriptContent = setupEl?.textContent ?? "";
+    if (setupEl) {
+      setupEl.type = "module";
+      setupEl.textContent = "";
     } else {
-      scriptEl?.remove();
+      setupEl = document.createElement("script");
+      setupEl.type = "module";
+      document.head.appendChild(setupEl);
     }
+    const { extractImport, getGlobalVars } = ast(scriptContent);
     return {
-      setupText,
-      retNames: getGlobalVars(astBody)
+      ...extractImport(),
+      retNames: getGlobalVars(),
+      setupEl
     };
   }
 
-  function parseTemplate(body) {
-    const template = document.querySelector("head>template");
-    const templateContent = template?.content.cloneNode(true);
-    template?.remove();
-    body?.replaceChildren(templateContent ?? "");
-    return template ? body : new Error("No template found");
+  function parseTemplate(templateEl) {
+    if (!templateEl)
+      return new Error("No template found");
+    const templateContent = templateEl.innerHTML;
+    templateEl.remove();
+    return templateContent.replace(/[`"'$\\]/g, (s) => `\\${s}`);
   }
 
-  const oTemplate = observe("body", parseTemplate);
+  const oTemplate = observe("head>template", parseTemplate);
   const oSetup = observe("script[setup]", parseSetup);
-  loaded(async () => {
-    const [{ setupText, retNames }, Template] = await Promise.all([oSetup, oTemplate]);
-    const Vue = window.Vue = await import('https://unpkg.com/vue/dist/vue.esm-browser.prod.js');
-    Vue.createApp({
-      setup: new Function(`const { ${Object.keys(Vue)} } = Vue; ${setupText} return { ${retNames} }`)
-    }).mount(Template);
-  });
+  (async () => {
+    const template = await oTemplate;
+    const { setupEl, importText, setupText, retNames } = await oSetup;
+    setupEl.textContent = `
+  import * as Vue from 'https://unpkg.com/vue/dist/vue.esm-browser.prod.js'
+  ${importText}
+  for (const k in Vue) {
+    window[k] = Vue[k]
+  }
+  Vue.createApp({
+    template: \`${template}\`,
+    setup(){
+      ${setupText}
+      return {
+        ${retNames}
+      }
+    }
+  }).mount(document.body)
+  `;
+  })();
 
 })();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "setupin",
   "type": "module",
-  "version": "2.2.3",
+  "version": "2.3.0",
   "description": "Vue SFC? HTML! <script setup> in html",
   "author": "tofu-xx <tofu-xx@foxmail.com>",
   "license": "MIT",