Update package version to 0.0.12, add support for referencing global components in tests, and refactor global component handling in the inline Svelte plugin for improved stability and clarity.

hanielu · hanielu · commit 110c0943b263 · 2025-07-24T12:06:31.000+01:00
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@hvniel/vite-plugin-svelte-inline-component",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "license": "MIT",
   "author": "Haniel Ubogu <https://github.com/HanielU>",
   "repository": {
diff --git a/src/lib/plugin/index.ts b/src/lib/plugin/index.ts
@@ -34,6 +34,28 @@ function applyImports(markup: string, imports: string): string {
   return `<script>\n${imports}\n</script>\n` + markup;
 }
 
+function getTransitiveDependencies(
+  entryPoints: Set<string>,
+  dependencyGraph: Map<string, Set<string>>
+): Set<string> {
+  const resolved = new Set<string>();
+  const queue = [...entryPoints];
+
+  while (queue.length > 0) {
+    const current = queue.shift()!;
+    if (resolved.has(current)) continue;
+
+    resolved.add(current);
+    const dependencies = dependencyGraph.get(current);
+    if (dependencies) {
+      for (const dep of dependencies) {
+        queue.push(dep);
+      }
+    }
+  }
+  return resolved;
+}
+
 /* ───────── plugin ───────── */
 
 export default function inlineSveltePlugin({
@@ -47,16 +69,15 @@ export default function inlineSveltePlugin({
   const tplRE = new RegExp(`(?:${tagGroup})\\s*\`([\\s\\S]*?)\``, "g");
   const fenceRE = new RegExp(`${esc(fenceStart)}([\\s\\S]*?)${esc(fenceEnd)}`, "m");
   const globalsRE = new RegExp(`${esc(globalsStart)}([\\s\\S]*?)${esc(globalsEnd)}`, "m");
-  // FIX: Simplified the regex to remove a problematic negative lookahead that was preventing multiple matches.
-  const globalDefWithTplRE = new RegExp(
-    `(const\\s+([a-zA-Z0-9_$]+)\\s*=\\s*)((?:${tagGroup})\\s*\`[\\s\\S]*?\`)`,
-    "g"
+  // FIX: New, safer regex anchored to the start of a line.
+  const globalDefRE = new RegExp(
+    `^const\\s+([a-zA-Z0-9_$]+)\\s*=\\s*(?:${tagGroup})\\s*(\`[\\s\\S]*?\`)`,
+    "gm"
   );
 
   const VIRT = "virtual:inline-svelte/";
   const RSLV = "\0" + VIRT;
 
-  /** virtualId → full markup (with injected imports) */
   const cache = new Map<string, string>();
 
   return {
@@ -74,8 +95,8 @@ export default function inlineSveltePlugin({
       let importsToAdd = "";
       let globalImportsForTpl = "";
       let hoistedCode = "";
-      const hashToLocal = new Map<string, string>();
       const globalVarDefs = new Map<string, string>();
+      const hashToLocal = new Map<string, string>();
       const globalComponentNames = new Set<string>();
 
       /* 1. Process globals */
@@ -84,42 +105,86 @@ export default function inlineSveltePlugin({
         edited = true;
         const globalsContent = globalsMatch[1] ?? "";
         ms.overwrite(globalsMatch.index, globalsMatch.index + globalsMatch[0].length, "");
+        hoistedCode = globalsContent;
 
-        globalDefWithTplRE.lastIndex = 0;
-
-        hoistedCode = globalsContent.replace(
-          globalDefWithTplRE,
-          (match, declaration: string, compName: string, templateLiteral: string) => {
-            globalComponentNames.add(compName);
-            const rawMarkup = templateLiteral.match(/`([\s\S]*?)`/)[1];
-            const markup = applyImports(rawMarkup, imports);
-            const hash = createHash("sha1").update(markup).digest("hex").slice(0, 8);
-
-            let local = hashToLocal.get(hash);
-            if (!local) {
-              local = `Inline_${hash}`;
-              hashToLocal.set(hash, local);
-              const virt = `${VIRT}${hash}.js`;
-              if (!cache.has(virt)) cache.set(virt, markup);
-              const ns = `__InlineNS_${hash}`;
-              importsToAdd += `import * as ${ns} from '${virt}';\nconst ${local}=Object.assign(${ns}.default, ${ns});\n`;
-              globalImportsForTpl += `import ${compName} from '${virt}';\n`;
-            }
-            return `${declaration}${local}`;
+        // FIX: Refactored component processing to use a more stable while/exec loop.
+        const replacements = [];
+        let match;
+        globalDefRE.lastIndex = 0;
+        while ((match = globalDefRE.exec(globalsContent)) !== null) {
+          const [fullMatch, compName, templateLiteralWithTicks] = match;
+          globalComponentNames.add(compName);
+
+          const rawMarkup = templateLiteralWithTicks.slice(1, -1);
+          const markup = applyImports(rawMarkup, imports);
+          const hash = createHash("sha1").update(markup).digest("hex").slice(0, 8);
+
+          let local = hashToLocal.get(hash);
+          if (!local) {
+            local = `Inline_${hash}`;
+            hashToLocal.set(hash, local);
+            const virt = `${VIRT}${hash}.js`;
+            if (!cache.has(virt)) cache.set(virt, markup);
+            const ns = `__InlineNS_${hash}`;
+            importsToAdd += `import * as ${ns} from '${virt}';\nconst ${local}=Object.assign(${ns}.default, ${ns});\n`;
+            globalImportsForTpl += `import ${compName} from '${virt}';\n`;
           }
-        );
 
-        const varLines = hoistedCode
-          .split("\n")
-          .filter(line => line.trim().match(/^(const|let|var)\s/));
-        for (const line of varLines) {
-          const nameMatch = line.match(/(?:const|let|var)\s+([a-zA-Z0-9_$]+)/);
-          if (nameMatch) {
-            globalVarDefs.set(nameMatch[1], line);
+          replacements.push({
+            start: match.index,
+            end: match.index + fullMatch.length,
+            newText: `const ${compName} = ${local}`,
+          });
+        }
+
+        // Apply replacements from end to start to avoid index shifting
+        for (const rep of replacements.reverse()) {
+          hoistedCode = hoistedCode.slice(0, rep.start) + rep.newText + hoistedCode.slice(rep.end);
+        }
+
+        const startOfDeclRegex = /^(?:const|let|var)\s+([a-zA-Z0-9_$]+)/gm;
+        let declMatch;
+        while ((declMatch = startOfDeclRegex.exec(hoistedCode)) !== null) {
+          const varName = declMatch[1];
+          const startIndex = declMatch.index;
+          let braceDepth = 0,
+            bracketDepth = 0,
+            parenDepth = 0,
+            endIndex = -1;
+          for (let i = startIndex; i < hoistedCode.length; i++) {
+            const char = hoistedCode[i];
+            if (char === "{") braceDepth++;
+            else if (char === "}") braceDepth--;
+            else if (char === "[") bracketDepth++;
+            else if (char === "]") bracketDepth--;
+            else if (char === "(") parenDepth++;
+            else if (char === ")") parenDepth--;
+            else if (char === ";" && braceDepth === 0 && bracketDepth === 0 && parenDepth === 0) {
+              endIndex = i + 1;
+              break;
+            }
           }
+          if (endIndex === -1) {
+            const nextNewline = hoistedCode.indexOf("\n", startIndex);
+            endIndex = nextNewline !== -1 ? nextNewline : hoistedCode.length;
+          }
+          const definition = hoistedCode.substring(startIndex, endIndex).trim();
+          if (definition) globalVarDefs.set(varName, definition);
+          startOfDeclRegex.lastIndex = endIndex;
         }
       }
 
+      const depGraph = new Map<string, Set<string>>();
+      const allGlobalNames = [...globalVarDefs.keys()];
+      for (const [name, definition] of globalVarDefs.entries()) {
+        const dependencies = new Set<string>();
+        for (const depName of allGlobalNames) {
+          if (name === depName) continue;
+          if (new RegExp(`\\b${depName}\\b`).test(definition)) dependencies.add(depName);
+        }
+        depGraph.set(name, dependencies);
+      }
+
       /* 2. Process all regular templates */
       let m: RegExpExecArray | null;
       tplRE.lastIndex = 0;
@@ -128,22 +193,26 @@ export default function inlineSveltePlugin({
           globalsMatch &&
           m.index >= globalsMatch.index &&
           m.index < globalsMatch.index + globalsMatch[0].length
-        ) {
+        )
           continue;
-        }
 
         const rawMarkup = m[1];
-        const scriptContentRE = /<script.*?>([\s\S]*?)<\/script>/;
-        const existingScriptContent = rawMarkup.match(scriptContentRE)?.[1] ?? "";
+        const directDeps = new Set<string>();
+        for (const name of allGlobalNames) {
+          if (new RegExp(`\\b${name}\\b`).test(rawMarkup)) directDeps.add(name);
+        }
+        const allDeps = getTransitiveDependencies(directDeps, depGraph);
         let scriptToInject = globalImportsForTpl;
+        const existingScriptContent = rawMarkup.match(/<script.*?>([\s\S]*?)<\/script>/)?.[1] ?? "";
+        const sortedDeps = [...allDeps].sort(
+          (a, b) => allGlobalNames.indexOf(a) - allGlobalNames.indexOf(b)
+        );
 
-        for (const [name, definition] of globalVarDefs.entries()) {
+        for (const name of sortedDeps) {
           if (globalComponentNames.has(name)) continue;
-
-          const isUsedInTemplate = new RegExp(`\\b${name}\\b`).test(rawMarkup);
-          if (isUsedInTemplate && !existingScriptContent.includes(name)) {
-            scriptToInject += `\n${definition}`;
-          }
+          if (existingScriptContent.includes(name)) continue;
+          const definition = globalVarDefs.get(name);
+          if (definition) scriptToInject += `\n${definition}`;
         }
 
         const markupWithGlobals = applyImports(rawMarkup, scriptToInject);
diff --git a/src/plugin.svelte.test.ts b/src/plugin.svelte.test.ts
@@ -12,6 +12,17 @@ import { MemoryRouter, Routes, Route } from "@hvniel/svelte-router";
 const Frank = html`<h1>Frank</h1>`;
 const James = html`<h1>James</h1>`;
 const count = $state(0);
+const dupes = [
+  {
+    name: "John",
+    comp: James,
+  },
+  {
+    name: "Jane",
+    comp: James,
+  },
+];
+const dupe = dupes[0];
 // sg
 
 describe("Inline Svelte Components with sv", () => {
@@ -246,4 +257,17 @@ describe("Inline Svelte Components with sv", () => {
       </p>
     `);
   });
+
+  it("allows global vars to reference global components", () => {
+    const renderer = render(html`<div><dupe.comp /></div>`);
+
+    expect(renderer.container.firstElementChild).toMatchInlineSnapshot(`
+      <div>
+        <h1>
+          James
+        </h1>
+        <!---->
+      </div>
+    `);
+  });
 });

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@hvniel/vite-plugin-svelte-inline-component",`
`3`		`- "version": "0.0.11",`
	`3`	`+ "version": "0.0.12",`
`4`	`4`	`"license": "MIT",`
`5`	`5`	`"author": "Haniel Ubogu <https://github.com/HanielU>",`
`6`	`6`	`"repository": {`