@stacksjs/stx 0.2.100 → 0.2.101

package/dist/signal-processing.d.ts

@@ -132,6 +132,33 @@ export declare function extractExports(setupContent: string): string;
  * injects the signals runtime and browser runtime.
  */
 export declare function processSignals(template: string, options: StxOptions, filePath?: string, serverData?: Record<string, unknown>): Promise<string>;
+/**
+ * Index of the first `pattern` match in `html` that is not inside a `<script>`
+ * or `<style>` block, or -1 when every match is embedded.
+ *
+ * Markup landmarks cannot be located with a plain `indexOf` / `String.replace`
+ * once a runtime has been inlined: those scripts are hundreds of kilobytes of
+ * JavaScript that legitimately mention `<body>` and `</head>` in comments,
+ * strings and regex literals. Anchoring on the first textual hit splices
+ * generated markup into the middle of a script tag, which both corrupts the
+ * script and — when the inserted markup contains `</script>` — silently ends
+ * the tag early.
+ */
+export declare function findMarkupIndexOutsideScripts(html: string, pattern: RegExp): number;
+/**
+ * Turn the specifier list of an `import { … } from 'stx'` into local aliases.
+ *
+ * The setup function already destructures the stx API from `window.stx`, so a
+ * plain `{ state }` specifier needs nothing. A RENAMED one does: when the
+ * bundler inlines a composable that imports a name the outer script already
+ * binds, it emits `import { state as state2 } from '@stacksjs/stx'`. Dropping
+ * that line loses the mapping and every `state2(…)` call in the inlined module
+ * throws `state2 is not defined` — which aborts the whole setup, so no
+ * directive on the page ever binds.
+ *
+ * Type-only specifiers are erased: they have no runtime binding to alias.
+ */
+export declare function rewriteStxImportSpecifiers(specifiers: string): string;
 /**
  * Parsed form of a loop expression (`@for` / `@foreach` argument).
  *

package/dist/signal-processing.js

@@ -667,7 +667,7 @@ export async function processScriptSetup(template, filePath, serverData) {
         projectRoot: process.cwd()
       });
     }
-    scriptContent = scriptContent.replace(/^\s*import\s+(?:type\s+)?\{[^}]*\}\s+from\s+['"](?:stx|@stacksjs\/stx|@stacksjs\/browser)['"]\s*;?\s*$/gm, "// [stx import stripped \u2014 resolved via window.stx in __stx_setup]");
+    scriptContent = scriptContent.replace(/^\s*import\s+(?:type\s+)?\{([^}]*)\}\s+from\s+['"](?:stx|@stacksjs\/stx|@stacksjs\/browser)['"]\s*;?\s*$/gm, (_match, specifiers) => rewriteStxImportSpecifiers(specifiers));
     const resolved = transformStoreImports(scriptContent);
     resolvedParts.push(`// \u2500\u2500 merged signal script #${i + 1} \u2500\u2500
 ${resolved}`);
@@ -908,35 +908,22 @@ export async function processSignals(template, options, filePath, serverData) {
   output = processedOutput;
   output = await injectSignalsRuntime(output, options);
   output = injectBrowserRuntime(output);
-  if (setupCode)
-    if (output.includes("</head>"))
-      output = output.replace("</head>", `${setupCode}
-</head>`);
-    else if (output.includes("<body"))
-      output = output.replace(/<body([^>]*)>/, `<body$1>
-${setupCode}`);
-    else
-      output = output + `
-` + setupCode;
+  if (setupCode) {
+    const headIdx = findMarkupIndexOutsideScripts(output, /<\/head>/i), bodyIdx = headIdx === -1 ? findMarkupIndexOutsideScripts(output, /<body[^>]*>/i) : -1;
+    if (headIdx !== -1)
+      output = `${output.slice(0, headIdx)}${setupCode}
+${output.slice(headIdx)}`;
+    else if (bodyIdx !== -1) {
+      const bodyTag = /<body[^>]*>/i.exec(output.slice(bodyIdx))[0], insertAt = bodyIdx + bodyTag.length;
+      output = `${output.slice(0, insertAt)}
+${setupCode}${output.slice(insertAt)}`;
+    } else
+      output = `${output}
+${setupCode}`;
+  }
   const bodyMatch = output.replace(/<script\b[\s\S]*?<\/script>/gi, "").replace(/<style\b[\s\S]*?<\/style>/gi, "").match(/<body([^>]*)>/i), bodyHasDataStx = bodyMatch && /data-stx/.test(bodyMatch[1]);
   if (!setupCode && !bodyHasDataStx && bodyMatch && !/data-stx-auto/.test(bodyMatch[1])) {
-    const bodyTagRe = /<body[^>]*>/i, scriptOrStyleRe = /<(script|style)\b[\s\S]*?<\/\1>/gi, skipRanges = [];
-    let m;
-    while ((m = scriptOrStyleRe.exec(output)) !== null)
-      skipRanges.push([m.index, m.index + m[0].length]);
-    let searchFrom = 0, bodyIdx = -1;
-    while (searchFrom < output.length) {
-      bodyTagRe.lastIndex = searchFrom;
-      const hit = bodyTagRe.exec(output.slice(searchFrom));
-      if (!hit)
-        break;
-      const absIdx = searchFrom + hit.index;
-      if (!skipRanges.some(([s, e]) => absIdx >= s && absIdx < e)) {
-        bodyIdx = absIdx;
-        break;
-      }
-      searchFrom = absIdx + hit[0].length;
-    }
+    const bodyTagRe = /<body[^>]*>/i, bodyIdx = findMarkupIndexOutsideScripts(output, bodyTagRe);
     if (bodyIdx !== -1) {
       const before = output.slice(0, bodyIdx), after = output.slice(bodyIdx).replace(bodyTagRe, (m) => m.replace(/^<body([^>]*)>$/i, "<body$1 data-stx-auto>"));
       output = before + after;
@@ -944,3 +931,36 @@ ${setupCode}`);
   }
   return output;
 }
+export function findMarkupIndexOutsideScripts(html, pattern) {
+  const scriptOrStyleRe = /<(script|style)\b[\s\S]*?<\/\1>/gi, skipRanges = [];
+  let block;
+  while ((block = scriptOrStyleRe.exec(html)) !== null)
+    skipRanges.push([block.index, block.index + block[0].length]);
+  const probe = new RegExp(pattern.source, pattern.flags.replace(/[gy]/g, ""));
+  let searchFrom = 0;
+  while (searchFrom < html.length) {
+    const hit = probe.exec(html.slice(searchFrom));
+    if (!hit)
+      return -1;
+    const absoluteIndex = searchFrom + hit.index;
+    if (!skipRanges.some(([start, end]) => absoluteIndex >= start && absoluteIndex < end))
+      return absoluteIndex;
+    searchFrom = absoluteIndex + Math.max(hit[0].length, 1);
+  }
+  return -1;
+}
+const STX_IMPORT_STRIPPED = "// [stx import stripped \u2014 resolved via window.stx in __stx_setup]";
+export function rewriteStxImportSpecifiers(specifiers) {
+  const aliases = [];
+  for (const raw of specifiers.split(",")) {
+    const specifier = raw.trim();
+    if (!specifier || specifier.startsWith("type "))
+      continue;
+    const renamed = specifier.match(/^([A-Za-z_$][\w$]*)\s+as\s+([A-Za-z_$][\w$]*)$/);
+    if (renamed && renamed[1] !== renamed[2])
+      aliases.push(`${renamed[2]} = ${renamed[1]}`);
+  }
+  if (aliases.length === 0)
+    return STX_IMPORT_STRIPPED;
+  return `const ${aliases.join(", ")}; ${STX_IMPORT_STRIPPED}`;
+}