@vuebro/loader-sfc 2.0.4 → 2.1.0

package/dist/loader-sfc.js

@@ -11,29 +11,33 @@ const fetchText = async (url) => {
         return new Response("");
     }
 }, inject = async (code) => {
-    const objectURL = URL.createObjectURL(new Blob([code], { type: "application/javascript" })), value = (await import(objectURL));
-    URL.revokeObjectURL(objectURL);
-    return value;
-}, log = (msgs) => {
-    msgs.forEach((msg) => {
-        console.log(msg);
-    });
-}, options = {
-    jsxRuntime: "preserve",
-    transforms: ["jsx", "typescript"],
+    const objectURL = URL.createObjectURL(new Blob([code], { type: "application/javascript" }));
+    try {
+        return (await import(objectURL));
+    }
+    finally {
+        URL.revokeObjectURL(objectURL);
+    }
 };
 /* -------------------------------------------------------------------------- */
 export default async (filename) => {
-    const id = `data-v-${hash(filename)}`, { descriptor, errors } = parse((await (await fetchText(filename)).text()) || "<template></template>"), { script, scriptSetup, slotted, styles, template } = descriptor;
-    log(errors);
+    const id = `data-v-${hash(filename)}`, langs = new Set(), { descriptor, errors: alerts } = parse((await (await fetchText(filename)).text()) || "<template></template>"), { script, scriptSetup, slotted, styles, template } = descriptor;
+    [script, scriptSetup].forEach((scriptBlock) => {
+        const { lang = "js" } = scriptBlock ?? {};
+        if (/[jt]sx$/.test(lang))
+            langs.add("jsx");
+        if (/tsx?$/.test(lang))
+            langs.add("typescript");
+    });
     const compilerOptions = {
-        expressionPlugins: ["jsx", "typescript"],
+        expressionPlugins: [...langs],
         scopeId: id,
         slotted,
-    }, scoped = styles.some(({ scoped }) => scoped), component = scoped ? { __scopeId: id } : {};
-    if (!(document.getElementById(id) instanceof HTMLStyleElement)) {
-        const warnings = new Set();
-        const textContent = (await Promise.all(styles.map(async ({ content, module, scoped = false, src }) => {
+    }, scoped = styles.some(({ scoped }) => scoped), component = scoped ? { __scopeId: id } : {}, options = {
+        jsxRuntime: "preserve",
+        transforms: [...langs],
+    }, style = !(document.getElementById(id) instanceof HTMLStyleElement)
+        ? Promise.all(styles.map(async ({ content, module = false, scoped = false, src }) => {
             const { code, errors } = await compileStyleAsync({
                 filename,
                 id,
@@ -41,40 +45,43 @@ export default async (filename) => {
                 source: src ? await (await fetchText(src)).text() : content,
             });
             if (module)
-                warnings.add("<style module> is not supported in the playground.");
-            log(errors);
+                errors.push(Error("<style module> is not supported in the playground."));
+            alerts.push(...errors);
             return code;
-        })))
-            .join("\n")
-            .trim();
-        if (textContent) {
-            const el = document.createElement("style");
-            el.id = id;
-            el.textContent = textContent;
-            document.head.appendChild(el);
-        }
-        log([...warnings]);
-    }
-    if (script || scriptSetup) {
-        const { bindings, content, warnings = [], } = compileScript(descriptor, { id });
-        if (template && bindings)
-            compilerOptions.bindingMetadata = bindings;
-        Object.assign(component, (await inject(transform(content, options).code)).default);
-        log(warnings);
-    }
-    if (template) {
-        const { ast, content: source } = template, { code, errors, tips } = compileTemplate({
-            ...(ast && { ast }),
+        }))
+        : Promise.resolve([]), { ast, content: source } = template ?? {}, { bindings, content, warnings } = script || scriptSetup ? compileScript(descriptor, { id }) : {};
+    if (source && bindings)
+        compilerOptions.bindingMetadata = bindings;
+    const { code, errors, tips } = source !== undefined
+        ? compileTemplate({
+            ...(ast ?? {}),
             compilerOptions,
             filename,
             id,
             scoped,
             slotted,
             source,
-        });
-        Object.assign(component, await inject(transform(code, options).code));
-        log(tips);
-        log(errors);
+        })
+        : {};
+    const [styleResult, scriptResult, templateResult] = await Promise.all([
+        style,
+        content
+            ? inject(langs.size ? transform(content, options).code : content)
+            : Promise.resolve(undefined),
+        code
+            ? inject(langs.size ? transform(code, options).code : code)
+            : Promise.resolve(undefined),
+    ]), textContent = styleResult.join("\n").trim();
+    if (textContent) {
+        const el = document.createElement("style");
+        el.id = id;
+        el.textContent = textContent;
+        document.head.appendChild(el);
     }
+    Object.assign(component, scriptResult?.default);
+    Object.assign(component, templateResult);
+    [...alerts, ...(warnings ?? []), ...(tips ?? []), ...(errors ?? [])].forEach((msg) => {
+        console.log(msg);
+    });
     return component;
 };

package/package.json

@@ -21,7 +21,7 @@
     "url": "git+https://github.com/vuebro/loader-sfc.git"
   },
   "license": "AGPL-3.0-only",
-  "version": "2.0.4",
+  "version": "2.1.0",
   "type": "module",
   "main": "./dist/loader-sfc.js",
   "types": "./dist/loader-sfc.d.ts",