fix(signal-processing): don't rewrite <body in script/style content

glennmichael123 · glennmichael123 · commit bc03a5a955b9 · 2026-05-13T15:27:36.000+08:00
The body-tag auto-annotation pass (`&lt;body([^&gt;]*)&gt;` → `&lt;body$1
data-stx-auto&gt;`) ran a global-but-first-match regex over the entire
rendered output. If any embedded `&lt;script&gt;` block contained a regex
literal like `/&lt;body[^&gt;]*&gt;/` (common in HTML-cleaning libraries —
ts-medium-editor's paste extension does exactly this), the rewrite
landed inside the JS code instead of the document body.

The corrupted output looked like

    [/^[\s\S]*&lt;body[^ data-stx-auto&gt;]*&gt;\s*|.../g, ""]

which JS rejects with `Invalid regular expression: Range out of
order in character class` (the `-` chars inside `data-stx-auto`
become broken character ranges like `t-s`). The page-level script
fails to load, scopes don't register, downstream components don't
hydrate.

Two changes:
- Detect the body tag using a script/style-stripped copy of the
  output, so embedded JS regex literals don't masquerade as a
  body tag.
- When the rewrite is warranted, locate the actual body offset in
  the original output by scanning past every &lt;script&gt;/&lt;style&gt;
  block, and only rewrite at that anchored position.
diff --git a/packages/stx/src/signal-processing.ts b/packages/stx/src/signal-processing.ts
@@ -953,13 +953,43 @@ export async function processSignals(template: string, options: StxOptions, file
   }
 
   // If no setup code but has signals syntax, add data-stx-auto to body for auto-processing
-  // Check if body already has data-stx attribute (not just any occurrence in the template)
-  const bodyMatch = output.match(/<body([^>]*)>/i)
+  // Check if body already has data-stx attribute (not just any occurrence in the template).
+  // Crucially, scan for `<body` only outside of <script> and <style> blocks — embedded
+  // JS often contains regex literals like `/<body[^>]*>/` and corrupting those into
+  // `<body data-stx-auto[^>]*>` breaks the entire page (the malformed character class
+  // throws "Invalid regular expression: Range out of order in character class").
+  const stripped = output.replace(/<script\b[\s\S]*?<\/script>/gi, '').replace(/<style\b[\s\S]*?<\/style>/gi, '')
+  const bodyMatch = stripped.match(/<body([^>]*)>/i)
   const bodyHasDataStx = bodyMatch && /data-stx/.test(bodyMatch[1])
 
-  if (!setupCode && !bodyHasDataStx) {
-    if (output.includes('<body') && bodyMatch && !/data-stx-auto/.test(bodyMatch[1])) {
-      output = output.replace(/<body([^>]*)>/, '<body$1 data-stx-auto>')
+  if (!setupCode && !bodyHasDataStx && bodyMatch && !/data-stx-auto/.test(bodyMatch[1])) {
+    // Locate the actual body tag in the original output to replace. Find the
+    // first <body in `stripped`, then find the equivalent position in `output`
+    // by walking forward and skipping over <script>/<style> regions, so we
+    // don't replace a regex literal inside a script.
+    const bodyTagRe = /<body[^>]*>/i
+    const scriptOrStyleRe = /<(script|style)\b[\s\S]*?<\/\1>/gi
+    const skipRanges: Array<[number, number]> = []
+    let m: RegExpExecArray | null
+    while ((m = scriptOrStyleRe.exec(output)) !== null)
+      skipRanges.push([m.index, m.index + m[0].length])
+
+    let searchFrom = 0
+    let bodyIdx = -1
+    while (searchFrom < output.length) {
+      bodyTagRe.lastIndex = searchFrom
+      const hit = bodyTagRe.exec(output.slice(searchFrom))
+      if (!hit) break
+      const absIdx = searchFrom + hit.index
+      const insideSkip = skipRanges.some(([s, e]) => absIdx >= s && absIdx < e)
+      if (!insideSkip) { bodyIdx = absIdx; break }
+      searchFrom = absIdx + hit[0].length
+    }
+
+    if (bodyIdx !== -1) {
+      const before = output.slice(0, bodyIdx)
+      const after = output.slice(bodyIdx).replace(bodyTagRe, m => m.replace(/^<body([^>]*)>$/i, '<body$1 data-stx-auto>'))
+      output = before + after
     }
   }
 
