@skaldapp/loader-sfc 2.4.10

package/dist/loader-sfc.js

@@ -0,0 +1,107 @@
+import { compileScript, compileStyleAsync, compileTemplate, parse, } from "@vue/compiler-sfc";
+import hash_sum from "hash-sum";
+import { transform } from "sucrase";
+const fetching = async (input) => {
+    try {
+        const response = await fetch(input);
+        if (response.ok)
+            return await response.text();
+        else
+            throw new Error(response.statusText);
+    }
+    catch (error) {
+        console.error(error);
+    }
+    return;
+}, inject = async (code) => {
+    const objectURL = URL.createObjectURL(new Blob([code], { type: "application/javascript" }));
+    try {
+        return (await import(objectURL));
+    }
+    finally {
+        URL.revokeObjectURL(objectURL);
+    }
+};
+export default async (sfc, { parseOptions, scriptOptions: { templateOptions: { compilerOptions: { expressionPlugins, ...restCompilerOptions } = {}, ...restTemplateOptions } = {}, ...restScriptOptions } = {}, styleOptions, } = {}) => {
+    let styleWarning = "";
+    const hash = hash_sum(sfc), styleErrors = [], { descriptor, errors: parseErrors } = parse(sfc || "<template></template>", { filename: `${hash}.vue`, ...parseOptions }), { filename, script, scriptSetup, slotted, styles, template } = descriptor;
+    const id = `data-v-${hash}`, langs = new Set([script, scriptSetup]
+        .filter((scriptBlock) => scriptBlock !== null)
+        .flatMap(({ lang = "js" }) => [
+        ...(/[jt]sx$/.test(lang) ? ["jsx"] : []),
+        ...(/tsx?$/.test(lang) ? ["typescript"] : []),
+    ])), compilerOptions = {
+        expressionPlugins: [
+            ...new Set([...(expressionPlugins ?? []), ...langs]),
+        ],
+        filename,
+        scopeId: id,
+        slotted,
+        ...restCompilerOptions,
+    }, templateOptions = {
+        compilerOptions,
+        filename,
+        id,
+        scoped: styles.some(({ scoped }) => scoped),
+        slotted,
+        ...restTemplateOptions,
+    }, scriptOptions = {
+        id,
+        templateOptions,
+        ...restScriptOptions,
+    }, style = document.getElementById(id) instanceof HTMLStyleElement
+        ? Promise.resolve([])
+        : Promise.all(styles.map(async ({ content, module, scoped = false, src }) => {
+            const modules = !!module;
+            if (modules && !styleWarning) {
+                styleWarning =
+                    "<style module> is not supported in the playground.";
+                return "";
+            }
+            else {
+                const { code, errors } = await compileStyleAsync({
+                    filename,
+                    id,
+                    modules,
+                    scoped,
+                    source: src ? ((await fetching(src)) ?? "") : content,
+                    ...styleOptions,
+                });
+                styleErrors.push(...errors);
+                return code;
+            }
+        })), sucraseOptions = {
+        jsxRuntime: "preserve",
+        transforms: [...langs],
+    }, { ast, content: source = "" } = template ?? {}, { bindings, content, warnings: scriptWarnings, } = script || scriptSetup ? compileScript(descriptor, scriptOptions) : {};
+    if (bindings)
+        compilerOptions.bindingMetadata = bindings;
+    const { code, errors: templateErrors, tips: templateTips, } = template && (!scriptSetup || !scriptOptions.inlineTemplate)
+        ? compileTemplate({
+            ...ast,
+            filename,
+            id,
+            source,
+            ...templateOptions,
+        })
+        : {};
+    [...parseErrors, ...(templateErrors ?? []), ...styleErrors].forEach(console.error);
+    [...(scriptWarnings ?? []), ...(styleWarning ? [styleWarning] : [])].forEach(console.warn);
+    [...(templateTips ?? [])].forEach(console.info);
+    const [styleResult, scriptResult, templateResult] = await Promise.all([
+        style,
+        content
+            ? inject(langs.size ? transform(content, sucraseOptions).code : content)
+            : Promise.resolve(undefined),
+        code
+            ? inject(langs.size ? transform(code, sucraseOptions).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);
+    }
+    return { __scopeId: id, ...scriptResult?.["default"], ...templateResult };
+};

package/package.json

@@ -0,0 +1,50 @@
+{
+  "$schema": "https://www.schemastore.org/package",
+  "name": "@skaldapp/loader-sfc",
+  "version": "2.4.10",
+  "description": "A lightweight library that enables loading Vue 3 Single File Components (.vue files) directly in the browser at runtime without requiring a build step. Supports TypeScript and JSX transformations for dynamic component loading.",
+  "keywords": [
+    "vue",
+    "sfc",
+    "loader",
+    "runtime",
+    "typescript",
+    "jsx",
+    "dynamic",
+    "components"
+  ],
+  "homepage": "https://github.com/skaldapp/loader-sfc#readme",
+  "bugs": {
+    "url": "https://github.com/skaldapp/loader-sfc/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/skaldapp/loader-sfc.git"
+  },
+  "license": "AGPL-3.0-only",
+  "author": "Jerry Bruwes <jbruwes@gmail.com> (https://jbruwes.github.io)",
+  "type": "module",
+  "main": "./dist/loader-sfc.js",
+  "types": "./dist/loader-sfc.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc && vite build",
+    "lint": "eslint ."
+  },
+  "prettier": "@skaldapp/configs/prettierrc",
+  "dependencies": {
+    "@vue/compiler-sfc": "^3.5.26",
+    "hash-sum": "^2.0.0",
+    "sucrase": "^3.35.1"
+  },
+  "devDependencies": {
+    "@skaldapp/configs": "^1.2.41",
+    "@types/hash-sum": "^1.0.2",
+    "@types/node": "^25.0.3",
+    "eslint": "^9.39.2",
+    "terser": "^5.44.1",
+    "vite": "^7.3.1"
+  }
+}