@stacksjs/stx 0.2.113 → 0.2.114

package/dist/render.js

@@ -3,32 +3,12 @@ import { defaultConfig } from "./config.js";
 import { extractVariables } from "./variable-extractor.js";
 import { injectRouterScript, processDirectives } from "./process.js";
 import { extractBridgeData, processClientScript } from "./client-script.js";
+import { findSfcTemplateBlock } from "./sfc-template.js";
 function parseTemplate(content) {
   let workingContent = content;
-  const templateOpenMatch = content.match(/<template\b(?![^>]*(?:\b(?:id|x-for|x-if|@for|@if|:for|:if)\s*=|\s#[\w-]|\bv-slot|\bslot\s*=))[^>]*>/i);
-  if (templateOpenMatch && templateOpenMatch.index !== void 0) {
-    const openEnd = templateOpenMatch.index + templateOpenMatch[0].length;
-    let depth = 1, pos = openEnd;
-    while (depth > 0 && pos < content.length) {
-      const nextOpen = content.indexOf("<template", pos), nextClose = content.indexOf("</template>", pos);
-      if (nextClose === -1)
-        break;
-      if (nextOpen !== -1 && nextOpen < nextClose) {
-        const after = content[nextOpen + 9];
-        if (after === ">" || after === " " || after === `
-` || after === "\t")
-          depth++;
-        pos = nextOpen + 9;
-      } else {
-        depth--;
-        if (depth === 0) {
-          workingContent = content.slice(openEnd, nextClose).trim();
-          break;
-        }
-        pos = nextClose + 11;
-      }
-    }
-  }
+  const templateBlock = findSfcTemplateBlock(content);
+  if (templateBlock)
+    workingContent = templateBlock.content.trim();
   const scriptRegex = /<script\b([^>]*)>([\s\S]*?)<\/script>/gi, clientScripts = [], serverScripts = [], signalsScripts = [], usesSignalsAPI = (scriptContent) => /\b(?:state|derived|effect|batch)\s*(?:<[^<>()]*>)?\s*\(/.test(scriptContent);
   let scriptMatch;
   while ((scriptMatch = scriptRegex.exec(content)) !== null) {

package/dist/runtime-globals.d.ts

@@ -0,0 +1,59 @@
+/**
+ * Build the destructuring statement that pulls {@link STX_RUNTIME_GLOBALS} into
+ * a generated client script's scope.
+ *
+ * @param declaration `var` for scripts that reassign a binding (the `@include`
+ * wrapper rebinds `onDestroy` to tee into its teardown channel — an assignment,
+ * which `var` permits), `const` otherwise.
+ * @param exclude names the call site declares itself; see
+ * {@link COMPONENT_SCOPE_LOCAL_GLOBALS}.
+ */
+export declare function buildRuntimeGlobalsDestructure(declaration?: 'const' | 'var', exclude?: readonly string[]): string;
+/**
+ * Runtime Globals
+ *
+ * The single source of truth for the stx APIs destructured off `window.stx` at
+ * the top of every generated client script, so user code can write `state(...)`
+ * or `onMount(...)` without importing anything.
+ *
+ * This list used to be hardcoded separately in three places — the `@include`
+ * component wrapper, the page setup function, and the `<Component />` client
+ * script wrapper. They drifted, so which APIs existed depended on which kind of
+ * script you happened to be writing, and the failure was a bare `ReferenceError`
+ * at runtime with nothing at build time: `nextTick()` resolved in a component
+ * script but threw in a page, `onMounted()` resolved in a page but threw in an
+ * `@include`d component. See #1785.
+ *
+ * Two entries were also phantoms — `inject` and `nextTick` were destructured by
+ * one site but never defined on `window.stx` at all, so they silently evaluated
+ * to `undefined` and threw "is not a function" when called. They are omitted
+ * here; re-add them only alongside a real implementation.
+ *
+ * Adding a runtime global is now a one-line change here. `runtime-globals.test.ts`
+ * asserts every name actually exists on `window.stx` and that all three call
+ * sites emit the same set, which is what keeps this from drifting again.
+ *
+ * @module runtime-globals
+ */
+/**
+ * Public stx APIs made available as bare identifiers inside client scripts.
+ *
+ * Sorted for a stable diff. Internal `window.stx` members (`_scopes`,
+ * `_cleanupContainer`, …) are deliberately excluded — they are runtime
+ * plumbing, not part of the authoring surface.
+ */
+export declare const STX_RUNTIME_GLOBALS: readonly string[];
+/**
+ * Names a call site declares itself and therefore must NOT also destructure.
+ *
+ * The `<Component />` wrapper defines scope-aware `onMount`/`onDestroy` that
+ * push into that component's own callback arrays:
+ *
+ *   const onMount = (fn) => __scopeVars.__mountCallbacks.push(fn)
+ *
+ * Destructuring the same names first makes that a duplicate `const` — a
+ * SyntaxError, which surfaces as the whole chunk silently failing to minify (and
+ * failing to run). This omission is deliberate, unlike the accidental drift
+ * #1785 fixed, so it is declared here rather than left implicit.
+ */
+export declare const COMPONENT_SCOPE_LOCAL_GLOBALS: readonly string[];

package/dist/runtime-globals.js

@@ -0,0 +1,65 @@
+export const STX_RUNTIME_GLOBALS = [
+  "batch",
+  "computed",
+  "defineEmits",
+  "defineExpose",
+  "definePageMeta",
+  "defineProps",
+  "defineSlots",
+  "defineStore",
+  "derived",
+  "effect",
+  "goBack",
+  "goForward",
+  "navigate",
+  "onBeforeUnmount",
+  "onDestroy",
+  "onMount",
+  "onMounted",
+  "onUnmounted",
+  "provide",
+  "reactive",
+  "ref",
+  "registerStoresClient",
+  "state",
+  "useAsync",
+  "useClickOutside",
+  "useColorMode",
+  "useCookie",
+  "useCounter",
+  "useDark",
+  "useDebounce",
+  "useDebouncedValue",
+  "useEventListener",
+  "useFetch",
+  "useFocus",
+  "useHead",
+  "useInterval",
+  "useLocalStorage",
+  "useMediaQuery",
+  "useMutation",
+  "useOptimistic",
+  "usePreferredContrast",
+  "usePreferredDark",
+  "usePreferredLight",
+  "usePreferredReducedMotion",
+  "useQuery",
+  "useReactiveProp",
+  "useRef",
+  "useRoute",
+  "useSearchParams",
+  "useSeoMeta",
+  "useSessionStorage",
+  "useStore",
+  "useThrottle",
+  "useTimeout",
+  "useToggle",
+  "useWebSocket",
+  "watch",
+  "watchEffect",
+  "withDefaults"
+], COMPONENT_SCOPE_LOCAL_GLOBALS = ["onMount", "onDestroy"];
+export function buildRuntimeGlobalsDestructure(declaration = "const", exclude = []) {
+  const names = exclude.length ? STX_RUNTIME_GLOBALS.filter((name) => !exclude.includes(name)) : STX_RUNTIME_GLOBALS;
+  return `${declaration} { ${names.join(", ")} } = window.stx;`;
+}

package/dist/runtime-injection.js

@@ -50,7 +50,7 @@ export async function injectSignalsRuntime(template, options) {
   if (template.includes("window.stx.state") || template.includes("STX Signals Runtime"))
     return template;
   if (options.buildMode === "compile") {
-    const runtimeScript = '<script src="/__stx/runtime.__STX_HASH__.js"></script>', firstScriptInDoc = template.indexOf("<script");
+    const runtimeScript = '<script data-stx-runtime src="/__stx/runtime.__STX_HASH__.js"></script>', firstScriptInDoc = template.indexOf("<script");
     if (firstScriptInDoc !== -1)
       return template.slice(0, firstScriptInDoc) + runtimeScript + `
 ` + template.slice(firstScriptInDoc);
@@ -62,7 +62,7 @@ export async function injectSignalsRuntime(template, options) {
     return runtimeScript + `
 ` + template;
   }
-  const { getCachedSignalsRuntime } = await import("./caching.js"), runtimeScript = `<script data-stx-scoped>${await getCachedSignalsRuntime(options.debug)}</script>`, firstScriptInDoc = template.indexOf("<script");
+  const { getCachedSignalsRuntime } = await import("./caching.js"), runtimeScript = `<script data-stx-scoped data-stx-runtime>${await getCachedSignalsRuntime(options.debug)}</script>`, firstScriptInDoc = template.indexOf("<script");
   if (firstScriptInDoc !== -1)
     return template.slice(0, firstScriptInDoc) + runtimeScript + `
 ` + template.slice(firstScriptInDoc);

package/dist/serve.js

@@ -1,6 +1,7 @@
 import { serve as bunServe } from "bun";
 import fs from "node:fs";
 import path from "node:path";
+import { findSfcTemplateBlock } from "./sfc-template.js";
 import { readMarkdownFile } from "./assets.js";
 import { processDirectives } from "./process.js";
 import { extractVariables } from "./utils.js";
@@ -33,27 +34,9 @@ export async function serve(options = {}) {
       if (key.startsWith(`${filePath}:`) && key !== cacheKey)
         fileCache.delete(key);
     let content = await Bun.file(filePath).text(), workingContent = content;
-    const templateOpenMatch = content.match(/<template\b(?![^>]*(?:\b(?:id|x-for|x-if|@for|@if|:for|:if)\s*=|\s#[\w-]|\bv-slot|\bslot\s*=))[^>]*>/i);
-    if (templateOpenMatch && templateOpenMatch.index !== void 0) {
-      const contentStart = templateOpenMatch.index + templateOpenMatch[0].length;
-      let depth = 1, pos = contentStart;
-      while (pos < content.length && depth > 0) {
-        const openIdx = content.indexOf("<template", pos), closeIdx = content.indexOf("</template>", pos);
-        if (closeIdx === -1)
-          break;
-        if (openIdx !== -1 && openIdx < closeIdx) {
-          depth++;
-          pos = openIdx + 9;
-        } else {
-          depth--;
-          if (depth === 0) {
-            workingContent = content.substring(contentStart, closeIdx).trim();
-            break;
-          }
-          pos = closeIdx + 11;
-        }
-      }
-    }
+    const templateBlock = findSfcTemplateBlock(content);
+    if (templateBlock)
+      workingContent = templateBlock.content.trim();
     const scriptRegex = /<script\b([^>]*)>([\s\S]*?)<\/script>/gi, clientScripts = [], serverScripts = [];
     let scriptMatch;
     while ((scriptMatch = scriptRegex.exec(content)) !== null) {

package/dist/sfc-template.d.ts

@@ -0,0 +1,17 @@
+export declare function isClientTemplateTag(openingTag: string): boolean;
+export declare function findSfcTemplateBlock(source: string): SfcTemplateBlock | null;
+/**
+ * Locate the explicit wrapper `<template>` in an STX single-file component.
+ *
+ * A bare `<template>` can be an SFC wrapper, while a template carrying a
+ * client directive (`:for`, `@if`, `x-else`, slots, or an id) is runtime DOM
+ * and must stay in the rendered body. Keeping this distinction in one scanner
+ * avoids subtle regex boundary bugs for punctuation-prefixed attributes.
+ */
+export declare interface SfcTemplateBlock {
+  start: number
+  openEnd: number
+  closeStart: number
+  end: number
+  content: string
+}

package/dist/sfc-template.js

@@ -0,0 +1,32 @@
+const TEMPLATE_TAG_RE = /<\/?template\b[^>]*>/gi, CLIENT_TEMPLATE_ATTRIBUTE_RE = /(?:^|\s)(?:id\s*=|(?:x-|[@:])(?:for|if|else(?:-if)?)(?=\s|=|$)|#[\w-]+(?:\s*=|\s|$)|v-slot(?::[\w-]+)?(?=\s|=|$)|slot\s*=)/i;
+export function isClientTemplateTag(openingTag) {
+  const attrs = openingTag.replace(/^<template\b/i, "").replace(/>$/, "");
+  return CLIENT_TEMPLATE_ATTRIBUTE_RE.test(attrs);
+}
+export function findSfcTemplateBlock(source) {
+  TEMPLATE_TAG_RE.lastIndex = 0;
+  let opening;
+  while ((opening = TEMPLATE_TAG_RE.exec(source)) !== null) {
+    if (opening[0].startsWith("</") || isClientTemplateTag(opening[0]))
+      continue;
+    const start = opening.index, openEnd = TEMPLATE_TAG_RE.lastIndex;
+    let depth = 1, nested;
+    while ((nested = TEMPLATE_TAG_RE.exec(source)) !== null)
+      if (nested[0].startsWith("</")) {
+        depth--;
+        if (depth === 0) {
+          const closeStart = nested.index;
+          return {
+            start,
+            openEnd,
+            closeStart,
+            end: TEMPLATE_TAG_RE.lastIndex,
+            content: source.slice(openEnd, closeStart)
+          };
+        }
+      } else
+        depth++;
+    return null;
+  }
+  return null;
+}

package/dist/signal-processing.js

@@ -1,21 +1,33 @@
 import { generateServerDataBridge } from "./client-script.js";
 import { findIfBlocks } from "./parser/index.js";
+import { buildRuntimeGlobalsDestructure } from "./runtime-globals.js";
 import { transformStoreImports } from "./store-imports.js";
 import { shouldTranspileTypeScript, transpileTypeScript } from "./utils.js";
 import { injectSignalsRuntime, injectBrowserRuntime } from "./runtime-injection.js";
 let signalSetupCounter = 0;
-const SCRIPT_OPEN_RE = /<script\b([^>]*)>/gi, SINGLE_ELEMENT_RE = /^<([a-zA-Z][a-zA-Z0-9-]*)\b((?:\s+[^=\s>]+(?:=(?:"[^"]*"|'[^']*'|[^\s>]*))?)*\s*)>([\s\S]*)<\/\1>$/s;
+const TAG_ATTR_RUN = `(?:"[^"]*"|'[^']*'|[^>"'])*`, SCRIPT_OPEN_RE = /<script\b([^>]*)>/gi, SINGLE_ELEMENT_RE = /^<([a-zA-Z][a-zA-Z0-9-]*)\b((?:\s+[^=\s>]+(?:=(?:"[^"]*"|'[^']*'|[^\s>]*))?)*\s*)>([\s\S]*)<\/\1>$/s;
 export function scanScriptTags(html, opts = {}) {
   const out = [];
-  SCRIPT_OPEN_RE.lastIndex = 0;
-  let m;
-  while ((m = SCRIPT_OPEN_RE.exec(html)) !== null) {
+  let cursor = 0;
+  while (cursor < html.length) {
+    SCRIPT_OPEN_RE.lastIndex = cursor;
+    const m = SCRIPT_OPEN_RE.exec(html);
+    if (!m)
+      break;
+    const commentStart = html.indexOf("<!--", cursor);
+    if (commentStart !== -1 && commentStart < m.index) {
+      const commentEnd = html.indexOf("-->", commentStart + 4);
+      if (commentEnd === -1)
+        break;
+      cursor = commentEnd + 3;
+      continue;
+    }
     const attrs = m[1], bodyStart = m.index + m[0].length, closeIdx = html.toLowerCase().indexOf("</script>", bodyStart);
     if (closeIdx === -1)
       break;
     const end = closeIdx + 9;
     if (opts.skipAttrs && opts.skipAttrs.test(attrs)) {
-      SCRIPT_OPEN_RE.lastIndex = end;
+      cursor = end;
       continue;
     }
     out.push({
@@ -25,7 +37,7 @@ export function scanScriptTags(html, opts = {}) {
       start: m.index,
       end
     });
-    SCRIPT_OPEN_RE.lastIndex = end;
+    cursor = end;
   }
   return out;
 }
@@ -77,6 +89,8 @@ export function hasSignalsSyntax(template) {
     /\breactive\s*(?:<[^>]*>)?\s*\(/,
     /\bwatch\s*(?:<[^>]*>)?\s*\(/,
     /\bwatchEffect\s*(?:<[^>]*>)?\s*\(/,
+    /\buseReactiveProp\s*(?:<[^>]*>)?\s*\(/,
+    /\s:(?:if|else-if|else|for|show|text|html|model)\s*=/,
     /data-stx(?:-auto)?(?![-\w])/,
     /data-stx-scoped/
   ].some((pattern) => pattern.test(template));
@@ -654,7 +668,7 @@ function dedupeTopLevelDeclarations(code) {
 export async function processScriptSetup(template, filePath, serverData) {
   const scripts = scanScriptTags(template, {
     skipAttrs: /\bserver\b|\bsrc\s*=|\bdata-stx-scoped\b|\bdata-stx-router\b/
-  }), SIGNAL_API_RE = /\b(?:state|derived|effect|ref|reactive|computed|watch|watchEffect|useStore|useLocalStorage|useSessionStorage|useCookie|useReactiveProp|useFetch|useRef|useEventListener|useDebounce|useDebouncedValue|useThrottle|useInterval|useTimeout|useToggle|useCounter|useClickOutside|useFocus|useAsync|useColorMode|useDark|useWebSocket|useRoute|useSearchParams|onMount|onDestroy|defineProps|withDefaults|defineEmits|defineExpose|defineSlots|useOptimistic)\s*(?:<[^>]*>)?\s*\(/, signalScripts = [];
+  }), SIGNAL_API_RE = /\b(?:state|derived|effect|ref|reactive|computed|watch|watchEffect|useStore|useLocalStorage|useSessionStorage|useCookie|useReactiveProp|useFetch|useRef|useEventListener|useDebounce|useDebouncedValue|useThrottle|useInterval|useTimeout|useToggle|useCounter|useClickOutside|useFocus|useAsync|useColorMode|useDark|useMediaQuery|usePreferredDark|usePreferredLight|usePreferredReducedMotion|usePreferredContrast|useWebSocket|useRoute|useSearchParams|onMount|onDestroy|defineProps|withDefaults|defineEmits|defineExpose|defineSlots|useOptimistic)\s*(?:<[^>]*>)?\s*\(/, signalScripts = [];
   for (const s of scripts) {
     let content = s.body;
     if (shouldTranspileTypeScript(s.attrs))
@@ -685,21 +699,22 @@ ${resolved}`);
   const mergedExports = extractExports(mergedContent), bridge = generateServerDataBridge(mergedContent, serverData), setupCode = `
 <script data-stx-scoped>
 function ${setupFnName}() {
-  const { state, derived, effect, batch, onMount, onDestroy, defineStore, useStore, useFetch, useRef, useQuery, useMutation, useOptimistic, useDebounce, useDebouncedValue, useThrottle, useInterval, useTimeout, useToggle, useCounter, useClickOutside, useFocus, useAsync, useLocalStorage, useSessionStorage, useCookie, useReactiveProp, useEventListener, useWebSocket, useColorMode, useDark, useHead, useSeoMeta, definePageMeta, useRoute, useSearchParams, navigate, goBack, goForward, provide, ref, reactive, computed, watch, watchEffect, defineProps, withDefaults, defineEmits, defineExpose, defineSlots } = window.stx;
+  ${buildRuntimeGlobalsDestructure("const")}
 ${bridge}${mergedContent}
   return { ${mergedExports} };
 }
+window.__stx_latestSetup=${setupFnName};
 if(window.stx)window.stx._latestSetup=${setupFnName};
 </script>`;
   let output = template;
   for (const s of signalScripts)
     output = output.split(s.fullMatch).join("");
   if (output.includes("<body"))
-    output = output.replace(/<body([^>]*)>/, `<body$1 data-stx="${setupFnName}">`);
+    output = output.replace(new RegExp(`<body(${TAG_ATTR_RUN})>`), `<body$1 data-stx="${setupFnName}">`);
   else {
     const skipTags = ["script", "style", "html", "head", "meta", "link", "title", "!doctype"];
     let marked = !1;
-    output = output.replace(/<([a-zA-Z][a-zA-Z0-9-]*)\b([^>]*)>/gi, (match, tag, attrs) => {
+    output = output.replace(new RegExp(`<([a-zA-Z][a-zA-Z0-9-]*)\\b(${TAG_ATTR_RUN})>`, "gi"), (match, tag, attrs) => {
       if (marked || skipTags.includes(tag.toLowerCase()))
         return match;
       marked = !0;
@@ -955,7 +970,7 @@ export function findMarkupIndexOutsideScripts(html, pattern) {
   }
   return -1;
 }
-const STX_IMPORT_STRIPPED = "// [stx import stripped \u2014 resolved via window.stx in __stx_setup]";
+const STX_IMPORT_STRIPPED = "/* [stx import stripped, resolved via window.stx in __stx_setup] */";
 export function rewriteStxImportSpecifiers(specifiers) {
   const aliases = [];
   for (const raw of specifiers.split(",")) {
@@ -968,5 +983,5 @@ export function rewriteStxImportSpecifiers(specifiers) {
   }
   if (aliases.length === 0)
     return STX_IMPORT_STRIPPED;
-  return `const ${aliases.join(", ")}; ${STX_IMPORT_STRIPPED}`;
+  return `var ${aliases.join(", ")}; ${STX_IMPORT_STRIPPED}`;
 }