@stacksjs/stx 0.2.153 → 0.2.155

package/dist/reactive.js

@@ -438,7 +438,7 @@ function generateScopeInitializers(scopes, context) {
   }).join(`
 `);
   return `
-<script data-stx-scoped data-stx-reactive>
+<script data-stx-scoped data-stx-reactive data-stx-run="always">
 ${generateReactiveRuntime()}
 ${initializers}
 </script>`;

package/dist/reactivity.d.ts

@@ -49,21 +49,6 @@ export declare function reactive<T extends object>(target: T): T;
  * ```
  */
 export declare function computed<T>(getter: () => T): Ref<T>;
-/**
- * Watch a reactive source and run a callback on changes.
- *
- * @example
- * ```typescript
- * const count = ref(0)
- *
- * watch(count, (newVal, oldVal) => {
- *   console.log(`Changed from ${oldVal} to ${newVal}`)
- * })
- *
- * // With options
- * watch(count, callback, { immediate: true, deep: true })
- * ```
- */
 export declare function watch<T>(source: Ref<T> | (() => T), callback: WatchCallback<T>, options?: WatchOptions): () => void;
 /**
  * Watch multiple sources.

package/dist/reactivity.js

@@ -197,6 +197,15 @@ export function computed(getter) {
     }
   };
 }
+function afterRender(fn) {
+  if (typeof requestAnimationFrame === "function") {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(fn);
+    });
+    return;
+  }
+  setTimeout(fn, 0);
+}
 export function watch(source, callback, options = {}) {
   const { immediate = !1, deep = !1, flush = "post" } = options;
   let oldValue, cleanup, stopped = !1;
@@ -221,9 +230,7 @@ export function watch(source, callback, options = {}) {
     else if (flush === "pre")
       Promise.resolve().then(fn);
     else
-      requestAnimationFrame(() => {
-        requestAnimationFrame(fn);
-      });
+      afterRender(fn);
   };
   let scheduled = !1;
   const onChange = () => {
@@ -509,8 +516,10 @@ export function generateClientRuntime() {
     window[name] = value;
   }
 
-  // Expose globally for <script client> blocks
-  window.stx = {
+  // Expose globally for <script client> blocks.
+  // MERGE, never replace (#1804): several client bundles write window.stx
+  // and a wholesale assignment erases whichever ran first.
+  window.stx = Object.assign(window.stx || {}, {
     // Reactivity
     ref,
     reactive,
@@ -546,7 +555,7 @@ export function generateClientRuntime() {
     // SSR detection
     isClient: function() { return true; },
     isServer: function() { return false; }
-  };
+  });
   window.provide = provide;
 })();
 </script>`;

package/dist/runtime-globals.d.ts

@@ -14,6 +14,14 @@
  * surface.
  */
 export declare function buildRuntimeGlobalsDestructure(declaration?: 'const' | 'var', exclude?: readonly string[], source?: string): string;
+/**
+ * Does this script call anything that needs the reactive runtime?
+ *
+ * Matches a CALL, not a mention: a bare word can be a property, a string or a
+ * comment. Tolerates a generic argument list, since `state<Foo>(…)` is valid
+ * TypeScript and common.
+ */
+export declare function usesReactiveRuntime(source: string): boolean;
 /**
  * Runtime Globals
  *
@@ -31,8 +39,16 @@ export declare function buildRuntimeGlobalsDestructure(declaration?: 'const' | '
  *
  * 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. `nextTick` now has a
- * signals-runtime implementation; `inject` remains omitted until it does too.
+ * to `undefined` and threw "is not a function" when called. Both are now
+ * implemented by the signals runtime (`inject` as of #1804).
+ *
+ * This list is also the source of `STX_AUTO_IMPORTS` (client-script.ts), which
+ * used to be a fourth hand-maintained copy for the classic `<script client>`
+ * path. It had drifted to 82 names against a runtime surface of 66, so 16 names
+ * — `h`, `Fragment`, `createStore`, `useMeta`, `getCurrentInstance` and others —
+ * were destructured off `window.stx` for every client script and silently bound
+ * to `undefined`, failing at the call site as "undefined is not a function" with
+ * nothing pointing at the missing name. One list, one guard (#1804).
  *
  * 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
@@ -62,3 +78,25 @@ export declare const STX_RUNTIME_GLOBALS: readonly string[];
  * #1785 fixed, so it is declared here rather than left implicit.
  */
 export declare const COMPONENT_SCOPE_LOCAL_GLOBALS: readonly string[];
+/**
+ * Runtime globals that are COMPILE-TIME macros rather than reactive APIs.
+ *
+ * Calling one of these does not make a script reactive — they are consumed by
+ * the compiler and produce no runtime subscription — so the auto-mount test
+ * below must not treat them as evidence that a block needs mounting.
+ */
+export declare const COMPILE_TIME_ONLY_GLOBALS: readonly string[];
+/**
+ * Names whose presence in a client script means it needs the signals runtime
+ * and an `stx.mount()` wrapper.
+ *
+ * DERIVED, not hand-maintained (stacksjs/stx#1819). This was a literal regex
+ * alternation of 36 names against 71 runtime globals, so a block built out of
+ * the newer reactive composables — `useStore`, `useQuery`, `useMutation`,
+ * `useCookie`, `watchMultiple` and a dozen more — was classified as "not using
+ * signals", skipped mounting, and fell through to the legacy IIFE path with no
+ * reactivity at all.
+ *
+ * Exactly the drift #1804 removed for STX_AUTO_IMPORTS, one file away.
+ */
+export declare const REACTIVE_RUNTIME_GLOBALS: readonly string[];

package/dist/runtime-globals.js

@@ -11,18 +11,25 @@ export const STX_RUNTIME_GLOBALS = [
   "effect",
   "goBack",
   "goForward",
+  "inject",
+  "isDerived",
+  "isSignal",
   "navigate",
   "nextTick",
+  "onBeforeMount",
   "onBeforeUnmount",
   "onDestroy",
   "onMount",
   "onMounted",
   "onUnmounted",
+  "peek",
   "provide",
   "reactive",
   "ref",
   "registerStoresClient",
+  "setRouteParams",
   "state",
+  "untrack",
   "useAsync",
   "useClickOutside",
   "useColorMode",
@@ -53,6 +60,7 @@ export const STX_RUNTIME_GLOBALS = [
   "useSearchParams",
   "useSeoMeta",
   "useSessionStorage",
+  "useSlots",
   "useStore",
   "useThrottle",
   "useTimeout",
@@ -60,6 +68,7 @@ export const STX_RUNTIME_GLOBALS = [
   "useWebSocket",
   "watch",
   "watchEffect",
+  "watchMultiple",
   "withDefaults"
 ], COMPONENT_SCOPE_LOCAL_GLOBALS = ["onMount", "onDestroy"];
 export function buildRuntimeGlobalsDestructure(declaration = "const", exclude = [], source) {
@@ -71,3 +80,84 @@ export function buildRuntimeGlobalsDestructure(declaration = "const", exclude =
     });
   return `${declaration} { ${names.join(", ")} } = window.stx;`;
 }
+export const COMPILE_TIME_ONLY_GLOBALS = [
+  "defineEmits",
+  "defineExpose",
+  "definePageMeta",
+  "defineProps",
+  "defineSlots",
+  "withDefaults"
+], REACTIVE_RUNTIME_GLOBALS = STX_RUNTIME_GLOBALS.filter((name) => !COMPILE_TIME_ONLY_GLOBALS.includes(name));
+export function usesReactiveRuntime(source) {
+  if (!source)
+    return !1;
+  return REACTIVE_RUNTIME_GLOBALS.some((name) => new RegExp(`\\b${name}\\s*(?:<[^>]*>)?\\s*\\(`).test(source));
+}
+const TEMPLATE_REACTIVE_PATTERNS = [
+  /@if\s*=/,
+  /@for\s*=/,
+  /@show\s*=/,
+  /@model\s*=/,
+  /@bind:/,
+  /@class\s*=/,
+  /@style\s*=/,
+  /\bx-data\s*=/,
+  /\bstate\s*(?:<[^>]*>)?\s*\(/,
+  /\bderived\s*(?:<[^>]*>)?\s*\(/,
+  /\beffect\s*(?:<[^>]*>)?\s*\(/,
+  /\bref\s*(?:<[^>]*>)?\s*\(/,
+  /\bcomputed\s*(?:<[^>]*>)?\s*\(/,
+  /\breactive\s*(?:<[^>]*>)?\s*\(/,
+  /\bwatch\s*(?:<[^>]*>)?\s*\(/,
+  /\bwatchEffect\s*(?:<[^>]*>)?\s*\(/,
+  /\s:[a-z][\w-]*\s*=\s*["']/i,
+  /\s:(?:if|else-if|else|for|show|text|html|model)\s*=/,
+  /data-stx(?:-auto)?(?![-\w])/,
+  /data-stx-scoped/
+], HAS_EVENT_HANDLER = /\s@[a-z][\w.:-]*\s*=/i;
+export function templateHasReactiveContext(template) {
+  if (!template)
+    return !1;
+  const live = blankInertHtmlRegions(template);
+  if (TEMPLATE_REACTIVE_PATTERNS.some((pattern) => pattern.test(live)))
+    return !0;
+  return usesReactiveRuntime(live);
+}
+export function templateNeedsRuntime(template) {
+  if (!template)
+    return !1;
+  return HAS_EVENT_HANDLER.test(blankInertHtmlRegions(template)) || templateHasReactiveContext(template);
+}
+export const RUNTIME_HANDLED_X_ATTRS = [
+  "x-text",
+  "x-html",
+  "x-model",
+  "x-show",
+  "x-if",
+  "x-for",
+  "x-cloak",
+  "x-ref",
+  "x-data",
+  "x-bind",
+  "x-class",
+  "x-style",
+  "x-tooltip",
+  "x-tooltip-position"
+], ALPINE_BRIDGE_X_ATTRS = [
+  "x-init",
+  "x-transition",
+  "x-effect",
+  "x-on"
+], COMPONENT_PASSTHROUGH_X_ATTRS = [
+  ...RUNTIME_HANDLED_X_ATTRS,
+  ...ALPINE_BRIDGE_X_ATTRS
+];
+export function runtimeHandledXAttrsLiteral() {
+  return `{${RUNTIME_HANDLED_X_ATTRS.map((n) => `'${n}':1`).join(",")}}`;
+}
+export function blankInertHtmlRegions(html) {
+  if (!html)
+    return html;
+  const blankText = (segment) => segment.replace(/(<[^>]*>)|([^<]+)/g, (_match, tag, text) => tag ?? " ".repeat(text.length));
+  return html.replace(/(<pre\b[^>]*>)([\s\S]*?)(<\/pre>)/gi, (_m, open, body, close) => open + blankText(body) + close).replace(/(<code\b[^>]*>)([\s\S]*?)(<\/code>)/gi, (_m, open, body, close) => open + blankText(body) + close).replace(/<!--[\s\S]*?-->/g, (match) => " ".repeat(match.length));
+}

package/dist/runtime-injection.d.ts

@@ -8,6 +8,57 @@ import type { StxOptions } from './types';
  * Server scripts should use the server ORM directly, not browser functions.
  */
 export declare function injectBrowserRuntime(template: string): string;
+/**
+ * Does this rendered page ship the signals runtime?
+ *
+ * Answers the question the SPA router cannot: a fragment never carries the
+ * runtime, so swapping one into a page that has none leaves it permanently
+ * unhydrated. The router used to guess from markers in the fragment markup and
+ * missed the shape that has no markers at all — reactive syntax with no setup
+ * function, whose only stamp is `data-stx-auto` on `<body>`, which the fragment
+ * excludes (stacksjs/stx#1827). The server knows, because it is the thing that
+ * decided; it reports the answer in `X-STX-Runtime` on fragment responses.
+ *
+ * Deliberately keyed on the same marker `injectSignalsRuntime` writes and
+ * checks below, so the two cannot disagree about what "has a runtime" means.
+ * Pass the FULL page, before it is reduced to the container's inner content.
+ */
+export declare function pageShipsSignalsRuntime(fullPageHtml: string): boolean;
+/**
+ * Does this rendered output contain a script that will THROW without the
+ * signals runtime?
+ *
+ * The safety net for stacksjs/stx#1820. Two independent decisions used to be
+ * made about the same page — `hasSignalsSyntax` decided whether to inject the
+ * runtime, and the client-script pass separately decided to emit
+ * `window.stx.mount(...)` — and nothing reconciled them. When they disagreed
+ * the page died on its first client line with "Cannot read properties of
+ * undefined (reading 'mount')", taking every handler defined in that block
+ * with it.
+ *
+ * Widening the gate does not fix that; it only makes the disagreement rarer,
+ * and it has already been widened twice. The gate is also evaluated against a
+ * template `processEventDirectives` has already rewritten, so an `@event=`
+ * page cannot match it however many patterns are added. This asks the opposite
+ * question, of the finished output, where no ordering can hide the answer: did
+ * we emit something that requires the runtime?
+ *
+ * Keyed on an UNGUARDED reach for `window.stx`, because that is precisely what
+ * throws. The guarded spellings the compiler also emits are all safe and must
+ * not trigger injection:
+ *
+ *   var { state } = window.stx || window;   // falls back
+ *   var s = window.stx || {};               // falls back
+ *   window.stx = window.stx || {};          // self-initializing
+ *   if (window.stx) window.stx._latestSetup = null;   // guarded
+ *
+ * The appearance bootstrap is the reason this runs before that directive is
+ * processed: it emits a self-contained `data-stx-scoped` script on pages with
+ * no reactivity at all, so keying on the presence of a client script — the
+ * obvious invariant, and the one the issue suggested — would pull the runtime
+ * onto every static page that sets a theme.
+ */
+export declare function outputNeedsSignalsRuntime(html: string): boolean;
 /**
  * Inject STX signals runtime into the template.
  * The runtime provides client-side reactivity.

package/dist/runtime-injection.js

@@ -60,6 +60,19 @@ ${browserScript}`);
   return browserScript + `
 ` + template;
 }
+export function pageShipsSignalsRuntime(fullPageHtml) {
+  return fullPageHtml.includes("data-stx-runtime");
+}
+export function outputNeedsSignalsRuntime(html) {
+  const reach = /window\.stx\s*\.\s*[A-Za-z_$]|\}\s*=\s*window\.stx\s*;/g;
+  for (let m = reach.exec(html);m !== null; m = reach.exec(html)) {
+    const preceding = html.slice(Math.max(0, m.index - 80), m.index);
+    if (/if\s*\(\s*window\.stx\s*\)|window\.stx\s*&&/.test(preceding))
+      continue;
+    return !0;
+  }
+  return !1;
+}
 export async function injectSignalsRuntime(template, options) {
   if (template.includes("data-stx-runtime") || template.includes("window.stx.state") || template.includes("STX Signals Runtime"))
     return template;

package/dist/script-emit.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Neutralise closing script tags in a JavaScript body about to be embedded in
+ * an HTML `<script>` element.
+ *
+ * Idempotent: an already-escaped `<\/script` contains no `</script`, so
+ * re-running this is a no-op rather than a double-escape.
+ */
+export declare function escapeScriptBody(js: string): string;
+/**
+ * Warn when a body still carries a raw closing tag at emit time.
+ *
+ * A truncated script is never the intent, so this is worth saying out loud —
+ * both of the reported production incidents were diagnosed from the browser's
+ * "Unexpected end of input" rather than from anything stx said.
+ *
+ * Deliberately a warning rather than the `StxSyntaxError` the issue proposes: a
+ * hard throw here could brick a production build over a vendor bundle inlined
+ * through `stx-inline`, which is a worse failure than the one being reported.
+ */
+export declare function assertNoRawClose(js: string, site: string, filePath?: string): void;

package/dist/script-emit.js

@@ -0,0 +1,11 @@
+const RAW_CLOSE = /<\/(script)/gi;
+export function escapeScriptBody(js) {
+  if (!js || js.indexOf("</") === -1)
+    return js;
+  return js.replace(RAW_CLOSE, "<\\/$1");
+}
+export function assertNoRawClose(js, site, filePath) {
+  if (!js || !/<\/script/i.test(js))
+    return;
+  console.warn(`[stx] ${filePath ? `${filePath}: ` : ""}a script body emitted by ${site} still contains a literal closing script tag. The HTML parser will end the element there, so everything after it becomes page text and every declaration below it silently disappears. See stacksjs/stx#1792.`);
+}

package/dist/script-validation.js

@@ -60,9 +60,9 @@ export const PROHIBITED_DOM_PATTERNS = [
     suggestion: "Use useEventListener() or @click directives"
   },
   {
-    pattern: /window\.localStorage(?![A-Za-z])/g,
+    pattern: /(?:\bwindow\.)?localStorage(?![A-Za-z])/g,
     message: "window.localStorage is prohibited",
-    suggestion: "Use useLocalStorage() from composables"
+    suggestion: "Use useLocalStorage() from composables \u2014 or @appearanceBootstrap if this must run before first paint, where the runtime does not exist yet"
   },
   {
     pattern: /window\.sessionStorage(?![A-Za-z])/g,
@@ -125,10 +125,10 @@ export const PROHIBITED_DOM_PATTERNS = [
     suggestion: "Use navigate() instead"
   }
 ];
-export function validateClientScript(content, filePath, strict) {
+export function validateClientScript(content, filePath, strict, originFilePath) {
   const strictConfig = typeof strict === "boolean" ? { enabled: strict, failOnViolation: strict } : strict ?? { enabled: !1 }, allowPatterns = strictConfig.allowPatterns ?? [], errors = [];
   for (const { pattern, message, suggestion } of PROHIBITED_DOM_PATTERNS) {
-    if (allowPatterns.some((allowed) => message.includes(allowed) || pattern.source.includes(allowed)))
+    if (allowPatterns.some((allowed) => /\w/.test(allowed) && message.includes(allowed)))
       continue;
     pattern.lastIndex = 0;
     const matches = content.match(pattern);
@@ -140,13 +140,18 @@ export function validateClientScript(content, filePath, strict) {
         if (pattern.test(line))
           lineNumbers.push(index + 1);
       });
-      const locationInfo = lineNumbers.length > 0 ? ` (line${lineNumbers.length > 1 ? "s" : ""}: ${lineNumbers.join(", ")})` : "";
+      const locationInfo = lineNumbers.length > 0 ? ` (script line${lineNumbers.length > 1 ? "s" : ""} ${lineNumbers.join(", ")})` : "", quoted = lineNumbers.slice(0, 3).map((n) => `        ${n} | ${(lines[n - 1] ?? "").trim().slice(0, 100)}`).join(`
+`), snippet = quoted ? `
+${quoted}` : "";
       errors.push(`  \u2717 ${message}${locationInfo}
-    \u2192 ${suggestion}`);
+    \u2192 ${suggestion}${snippet}`);
     }
   }
   if (errors.length > 0 && strictConfig.enabled) {
-    const baseMessage = `[STX] DOM API violation in ${filePath.split("/").pop() || filePath}:
+    const rel = (p) => {
+      const cwd = `${process.cwd()}/`;
+      return p.startsWith(cwd) ? p.slice(cwd.length) : p;
+    }, baseMessage = `[STX] DOM API violation in ${originFilePath && originFilePath !== filePath ? `${rel(originFilePath)} (composed into ${rel(filePath)})` : rel(filePath)}:
 ${errors.join(`
 `)}
   Tip: prefer useRef(), navigate(), and composables for component code`;

package/dist/signal-processing.js

@@ -1,6 +1,7 @@
 import { generateServerDataBridge, injectBrowserCoreAutoImports } from "./client-script.js";
 import { findIfBlocks } from "./parser/index.js";
-import { buildRuntimeGlobalsDestructure } from "./runtime-globals.js";
+import { buildRuntimeGlobalsDestructure, templateNeedsRuntime, usesReactiveRuntime } from "./runtime-globals.js";
+import { escapeScriptBody } from "./script-emit.js";
 import { transformStoreImports } from "./store-imports.js";
 import { shouldTranspileTypeScript, transpileTypeScript } from "./utils.js";
 import { injectSignalsRuntime } from "./runtime-injection.js";
@@ -62,29 +63,7 @@ function parseItemSpec(spec) {
   return { itemVar: null, indexVar: null };
 }
 export function hasSignalsSyntax(template) {
-  return [
-    /@if\s*=/,
-    /@for\s*=/,
-    /@show\s*=/,
-    /@model\s*=/,
-    /@bind:/,
-    /@class\s*=/,
-    /@style\s*=/,
-    /\bx-data\s*=/,
-    /\bstate\s*(?:<[^>]*>)?\s*\(/,
-    /\bderived\s*(?:<[^>]*>)?\s*\(/,
-    /\beffect\s*(?:<[^>]*>)?\s*\(/,
-    /\bref\s*(?:<[^>]*>)?\s*\(/,
-    /\bcomputed\s*(?:<[^>]*>)?\s*\(/,
-    /\breactive\s*(?:<[^>]*>)?\s*\(/,
-    /\bwatch\s*(?:<[^>]*>)?\s*\(/,
-    /\bwatchEffect\s*(?:<[^>]*>)?\s*\(/,
-    /\buseId\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));
+  return templateNeedsRuntime(template);
 }
 function hasTopLevelElseBranch(content) {
   const tokenRegex = /@(if\s*\(|endif|elseif\s*\(|else\b)/g;
@@ -461,7 +440,7 @@ export function convertSignalLoopsToAttributes(template, context) {
   let output = template;
   const forDirectiveStart = /@(for|foreach)\s*\(/g;
   let match;
-  const replacements = [];
+  const replacements = [], serverScopes = [];
   while ((match = forDirectiveStart.exec(output)) !== null) {
     const directive = match[1], startIdx = match.index, exprStart = startIdx + match[0].length;
     let depth = 1, i = exprStart;
@@ -475,20 +454,7 @@ export function convertSignalLoopsToAttributes(template, context) {
     if (depth !== 0)
       continue;
     let expr = output.substring(exprStart, i - 1).trim();
-    const afterExpr = i, parsed = parseLoopExpression(expr);
-    if (parsed.iterable) {
-      const iter = parsed.iterable.trim();
-      if (iter.startsWith("[") || iter.startsWith("{") || iter.startsWith("'") || iter.startsWith('"') || iter.startsWith("`") || /^-?\d/.test(iter))
-        continue;
-      if (context) {
-        const rootVar = iter.split(/[.[(]/)[0].trim();
-        if (rootVar && rootVar in context)
-          continue;
-      }
-    }
-    if (parsed.style === "as")
-      expr = parsed.indexVar ? `(${parsed.itemVar}, ${parsed.indexVar}) in ${parsed.iterable}` : `${parsed.itemVar} in ${parsed.iterable}`;
-    const endTag = directive === "for" ? "@endfor" : "@endforeach";
+    const afterExpr = i, parsed = parseLoopExpression(expr), endTag = directive === "for" ? "@endfor" : "@endforeach";
     let forDepth = 1, endIdx = afterExpr;
     const endRegex = directive === "for" ? new RegExp("@(for(?!each)\\s*\\(|endfor(?!each))", "g") : new RegExp(`@(${directive}\\s*\\(|end${directive})`, "g");
     endRegex.lastIndex = afterExpr;
@@ -505,6 +471,25 @@ export function convertSignalLoopsToAttributes(template, context) {
       }
     if (forDepth !== 0)
       continue;
+    const keepServerSide = () => {
+      const vars = [parsed.itemVar, parsed.indexVar].filter(Boolean);
+      if (vars.length)
+        serverScopes.push({ start: startIdx, end: endIdx, vars });
+    };
+    if (parsed.iterable) {
+      const iter = parsed.iterable.trim();
+      if (iter.startsWith("[") || iter.startsWith("{") || iter.startsWith("'") || iter.startsWith('"') || iter.startsWith("`") || /^-?\d/.test(iter)) {
+        keepServerSide();
+        continue;
+      }
+      const rootVar = iter.split(/[.[(]/)[0].trim(), fromContext = context ? rootVar in context : !1, fromEnclosingLoop = serverScopes.some((s) => startIdx > s.start && startIdx < s.end && s.vars.includes(rootVar));
+      if (rootVar && (fromContext || fromEnclosingLoop)) {
+        keepServerSide();
+        continue;
+      }
+    }
+    if (parsed.style === "as")
+      expr = parsed.indexVar ? `(${parsed.itemVar}, ${parsed.indexVar}) in ${parsed.iterable}` : `${parsed.itemVar} in ${parsed.iterable}`;
     const content = output.substring(afterExpr, endIdx - endTag.length).trim(), singleElementMatch = content.match(SINGLE_ELEMENT_RE);
     let replacement;
     if (singleElementMatch) {
@@ -690,7 +675,7 @@ ${resolved}`);
 <script data-stx-scoped>
 function ${setupFnName}() {
   ${buildRuntimeGlobalsDestructure("const", mergedExportNames)}
-${bridge}${mergedContent}
+${escapeScriptBody(`${bridge}${mergedContent}`)}
   return { ${mergedExports} };
 }
 window.__stx_latestSetup=${setupFnName};

package/dist/signals-api.d.ts

@@ -199,6 +199,36 @@ export declare function onMount(callback: LifecycleCallback): void;
  * ```
  */
 export declare function onDestroy(callback: LifecycleCallback): void;
+/**
+ * Run and clear every callback registered with {@link onMount}.
+ *
+ * Both queues used to be write-only: `onMount` and `onDestroy` pushed, and
+ * nothing anywhere drained them (stacksjs/stx#1811). Two consequences, and the
+ * first is the one that bites — a composable registering cleanup via
+ * `onDestroy` got no cleanup, silently. The code reads as correct, passes
+ * review, and does nothing. The second is a slow leak: nothing cleared the
+ * arrays, so every registration retained its closure for the life of the
+ * process, and the retained objects were precisely the ones the author expected
+ * to be released.
+ *
+ * The client runtime drains its equivalents, so leaving these undrained also
+ * broke the dual-implementation parity CLAUDE.md item 40 requires: the same
+ * public API did something on one side and nothing on the other.
+ *
+ * Drains before invoking, so a callback that registers another is queued for
+ * the next drain rather than running inside this one.
+ *
+ * Errors are contained per callback: one throwing hook must not swallow the
+ * rest, which is the same lesson as the page-setup loop in #1805.
+ */
+export declare function runMountCallbacks(): void;
+/** Run and clear every callback registered with {@link onDestroy}. */
+export declare function runDestroyCallbacks(): void;
+/**
+ * How many callbacks are queued. Exposed for tests and diagnostics — a queue
+ * that only ever grows is the shape of the defect above.
+ */
+export declare function pendingLifecycleCounts(): { mount: number, destroy: number };
 /**
  * Checks if a value is a signal.
  *

package/dist/signals-api.js

@@ -116,6 +116,24 @@ export function onMount(callback) {
 export function onDestroy(callback) {
   destroyCallbacks.push(callback);
 }
+export function runMountCallbacks() {
+  drain(mountCallbacks, "onMount");
+}
+export function runDestroyCallbacks() {
+  drain(destroyCallbacks, "onDestroy");
+}
+function drain(queue, label) {
+  const pending = queue.splice(0, queue.length);
+  for (const callback of pending)
+    try {
+      callback();
+    } catch (error) {
+      console.error(`[stx] ${label} callback threw:`, error);
+    }
+}
+export function pendingLifecycleCounts() {
+  return { mount: mountCallbacks.length, destroy: destroyCallbacks.length };
+}
 export function isSignal(value) {
   return typeof value === "function" && value._isSignal === !0;
 }