fix(includes): defensively register scope vars to survive harvest mis-hits

glennmichael123 · glennmichael123 · commit 8adf4416d185 · 2026-05-13T16:08:17.000+08:00
`extractExports` walks a client script's bundled output looking for
top-level const/let/var/function declarations. Its depth tracker
handles strings, template literals, and {} braces — but not regex
literals or other nested constructs. When a `&lt;script client&gt;` pulls
in a heavier third-party (e.g. `ts-medium-editor`) via Bun.build,
the bundled blob contains regex literals like `/\{.../` that flip
the depth counter and let inner-scope vars (e.g. `message`,
`parent`, `frag`) leak into the harvested top-level list.

The downstream effect was fatal: `transformSignalScript` emitted

  window.stx._scopes['stx_scope_X'] = { isIE, ..., message, ... };

and at hydration `{ message }` (shorthand for `{ message: message }`)
threw `ReferenceError: message is not defined` — taking the whole
scope registration down with it and leaving the component
unregistered.

Switch the registration to a try/catch per name. Stray harvested
identifiers just resolve to `undefined` (skipped) instead of
crashing, so a single false-positive can no longer brick the rest
of the scope's vars. Cleaner long-term fix is to teach the depth
walker about regex literals — left as a follow-up since this
defensive shape is correct even with a perfect harvester.
diff --git a/packages/stx/src/includes.ts b/packages/stx/src/includes.ts
@@ -248,6 +248,20 @@ function extractExports(setupContent: string): string {
  */
 function transformSignalScript(scriptContent: string, scopeId: string): string {
   const exports = extractExports(scriptContent)
+  const exportNames = exports.split(',').map(s => s.trim()).filter(Boolean)
+
+  // Build the scope assignment defensively. `extractExports` is a
+  // heuristic walker — when client scripts include bundled third-party
+  // sources (e.g. `ts-medium-editor` inlined via Bun.build) the depth
+  // tracker can mis-identify inner-scope vars as top-level, putting
+  // names like `message`, `parent`, `frag` into the export list. Doing
+  // `{ message, ... }` then throws `ReferenceError: message is not
+  // defined` at hydration and kills the whole scope's registration.
+  // Wrap each property in a try/catch so a stray harvested name turns
+  // into `undefined` instead of a fatal ReferenceError.
+  const scopeAssign = exportNames.map(name =>
+    `  try { __scopeRegistration[${JSON.stringify(name)}] = ${name}; } catch (e) { /* not actually top-level */ }`,
+  ).join('\n')
 
   // Use real window.stx APIs (signals runtime is injected in <head>, runs before this script).
   // No polyfill fallbacks — they create signals without ._isSignal which breaks auto-unwrap
@@ -263,7 +277,9 @@ ${scriptContent}
 
   // Register scope variables for STX runtime
   if (!window.stx._scopes) window.stx._scopes = {};
-  window.stx._scopes['${scopeId}'] = { ${exports}, __destroyCallbacks: __destroyHooks };
+  var __scopeRegistration = { __destroyCallbacks: __destroyHooks };
+${scopeAssign}
+  window.stx._scopes['${scopeId}'] = __scopeRegistration;
 })();
 `
 }
