@stacksjs/stx 0.2.146 → 0.2.147

package/dist/script-classifier.d.ts

@@ -11,6 +11,20 @@ export declare function classifyScript(attrs: string, content: string, fullTag:
 /**
  * Classify all `<script>` tags in a template.
  *
+ * The scan walks the template rather than running a global regex so that HTML
+ * comments are inert. A comment whose prose merely mentions a script tag — e.g.
+ * `<!-- the <script server> block owner-scopes the switcher -->` — used to be
+ * matched as a REAL opening tag, and the non-greedy regex then ran on to the
+ * next `</script>`. The resulting bogus `fullTag` spanned from inside the comment
+ * to the end of an unrelated script, so callers that delete `fullTag`
+ * (app-shell's `cleanTemplate`, serve-app's `templateContent`) erased the
+ * comment's `-->` terminator AND every real script in between — producing a
+ * runaway comment node that swallowed the rest of the document.
+ *
+ * `<template>` contents are deliberately still scanned: stx SFC files wrap their
+ * whole markup in `<template>`, and callers rely on scripts authored inside it
+ * being classified so they can be stripped from the rendered output.
+ *
  * Returns arrays of scripts grouped by type.
  */
 export declare function classifyAllScripts(content: string): {
@@ -24,12 +38,4 @@ export declare interface ScriptClassification {
   content: string
   attrs: string
 }
-/**
- * Script Classification
- *
- * Single source of truth for classifying `<script>` tags in `.stx` files.
- * Used by bun-plugin, dev-server, and process.ts to ensure consistent behavior.
- *
- * @module script-classifier
- */
 export type ScriptType = 'signals' | 'client' | 'server';

package/dist/script-classifier.js

@@ -1,3 +1,4 @@
+import { matchHtmlComment, matchScriptElement } from "./html-masking.js";
 const SIGNALS_PATTERN = /\b(?:state|derived|effect|batch|ref|reactive|computed|watch|watchEffect)\s*(?:<[^>]*>)?\s*\(/;
 export function classifyScript(attrs, content, fullTag) {
   const result = { fullTag, content, attrs };
@@ -11,22 +12,40 @@ export function classifyScript(attrs, content, fullTag) {
     return { ...result, type: "client" };
   return { ...result, type: "server" };
 }
+const SCRIPT_PARTS = /^<script\b([^>]*)>([\s\S]*)<\/script\s*>$/i;
 export function classifyAllScripts(content) {
-  const signals = [], client = [], server = [], scriptRegex = /<script\b([^>]*)>([\s\S]*?)<\/script>/gi;
-  let match;
-  while ((match = scriptRegex.exec(content)) !== null) {
-    const classification = classifyScript(match[1], match[2], match[0]);
-    switch (classification.type) {
-      case "signals":
-        signals.push(classification);
-        break;
-      case "client":
-        client.push(classification);
-        break;
-      case "server":
-        server.push(classification);
-        break;
+  const signals = [], client = [], server = [];
+  let i = 0;
+  while (i < content.length) {
+    const lt = content.indexOf("<", i);
+    if (lt === -1)
+      break;
+    const commentEnd = matchHtmlComment(content, lt);
+    if (commentEnd > lt) {
+      i = commentEnd;
+      continue;
     }
+    const scriptEnd = matchScriptElement(content, lt);
+    if (scriptEnd > lt) {
+      const fullTag = content.slice(lt, scriptEnd), parts = SCRIPT_PARTS.exec(fullTag);
+      if (parts) {
+        const classification = classifyScript(parts[1], parts[2], fullTag);
+        switch (classification.type) {
+          case "signals":
+            signals.push(classification);
+            break;
+          case "client":
+            client.push(classification);
+            break;
+          case "server":
+            server.push(classification);
+            break;
+        }
+      }
+      i = scriptEnd;
+      continue;
+    }
+    i = lt + (content.startsWith("<!--", lt) ? 4 : 1);
   }
   return { signals, client, server };
 }

package/dist/signals.js

@@ -4402,10 +4402,18 @@ else if (timer === null) {
 
   function useColorMode(options) {
     options = options || {};
-    var storageKey = options.storageKey || 'stx-color-mode';
-    var initialMode = options.initialMode || 'auto';
-    var darkClass = options.darkClass || 'dark';
-    var attribute = options.attribute || null;
+    // The pre-paint boot script (stacksjs/stx#1794) publishes the app's
+    // configured options here. Reading them makes a bare useColorMode() agree
+    // with whatever already landed on <html> before first paint \u2014 without this
+    // the composable would fall back to its own defaults, read a different
+    // storage key, and undo the theme on hydration, reintroducing the very
+    // flash the boot script exists to prevent.
+    var boot = null;
+    try { boot = window.__STX_COLOR_MODE__ || null; } catch (e) {}
+    var storageKey = options.storageKey || (boot && boot.storageKey) || 'stx-color-mode';
+    var initialMode = options.initialMode || (boot && boot.initialMode) || 'auto';
+    var darkClass = options.darkClass || (boot && boot.darkClass) || 'dark';
+    var attribute = options.attribute || (boot && boot.attribute) || null;
     var disableTransitions = options.disableTransitions !== false;
     var preference = initialMode;
     var resolved = 'light';
@@ -4571,15 +4579,60 @@ catch (e) {}
   var watch = $watch;
   var watchEffect = function(fn) { return effect(fn); };
 
+  // Storage access is guarded end to end (stacksjs/stx#1793). Every one of
+  // these can throw, and each throw took down the whole client script for the
+  // page rather than just the composable:
+  //
+  //   getItem  - SecurityError in a sandboxed iframe or with storage disabled
+  //   parse    - any non-JSON value already sitting at the key
+  //   setItem  - QuotaExceededError, Safari private mode
+  //
+  // The parse fallback is deliberately LENIENT: a value that isn't JSON is
+  // returned as the raw string rather than discarded for defaultValue. A key
+  // that previously held a bare 'list' keeps reading back 'list' and is
+  // rewritten as JSON on the next set, so migrating an existing key onto this
+  // composable no longer needs the key to be renamed. This also matches
+  // composables/use-storage.ts, whose default serializer already returns the
+  // raw string on parse failure \u2014 the two implementations have to agree.
+  function stxParseStored(raw, fallback, key, label) {
+    if (raw === null || raw === undefined) return fallback;
+    try { return JSON.parse(raw); }
+    catch (e) {
+      console.warn('[stx] ' + label + ': "' + key + '" holds a value that is not JSON (' + String(raw).slice(0, 64) + '); using it as a raw string. Write it with the same composable to store it as JSON.');
+      return raw;
+    }
+  }
+  function stxStorageRead(store, key, fallback, label) {
+    var raw;
+    try { raw = store.getItem(key); }
+    catch (e) {
+      console.warn('[stx] ' + label + ': cannot read "' + key + '" (' + (e && e.message ? e.message : e) + '); using the default.');
+      return fallback;
+    }
+    return stxParseStored(raw, fallback, key, label);
+  }
+  function stxStorageWrite(store, key, value, label) {
+    try { store.setItem(key, JSON.stringify(value)); }
+    catch (e) {
+      console.warn('[stx] ' + label + ': cannot persist "' + key + '" (' + (e && e.message ? e.message : e) + '); the value stays in memory only.');
+    }
+  }
+
   function useLocalStorage(key, defaultValue) {
-    var stored = localStorage.getItem(key);
-    var initial = stored !== null ? JSON.parse(stored) : defaultValue;
-    var s = state(initial);
+    var s = state(stxStorageRead(localStorage, key, defaultValue, 'useLocalStorage'));
     effect(function() {
-      localStorage.setItem(key, JSON.stringify(s()));
+      stxStorageWrite(localStorage, key, s(), 'useLocalStorage');
     });
     var handler = function(e) {
-      if (e.key === key) s.set(e.newValue !== null ? JSON.parse(e.newValue) : defaultValue);
+      // Fires from ANOTHER tab at an arbitrary later time, so an unguarded
+      // parse here throws inside a window listener with a stack pointing at
+      // the runtime rather than at the consumer.
+      // storageArea is also matched so a sessionStorage write to the same key
+      // name can't clobber this signal \u2014 useSessionStorage already filtered,
+      // this side didn't. Synthetic events (tests) leave storageArea null and
+      // are still accepted; real browsers always populate it.
+      if (e.key === key && (!e.storageArea || e.storageArea === localStorage))
+        s.set(stxParseStored(e.newValue, defaultValue, key, 'useLocalStorage'));
     };
     window.addEventListener('storage', handler);
     onDestroy(function() { window.removeEventListener('storage', handler); });
@@ -4593,15 +4646,13 @@ catch (e) {}
   // event (filtered to sessionStorage's storageArea \u2014 localStorage events
   // share the same listener but fire from a different area).
   function useSessionStorage(key, defaultValue) {
-    var stored = sessionStorage.getItem(key);
-    var initial = stored !== null ? JSON.parse(stored) : defaultValue;
-    var s = state(initial);
+    var s = state(stxStorageRead(sessionStorage, key, defaultValue, 'useSessionStorage'));
     effect(function() {
-      sessionStorage.setItem(key, JSON.stringify(s()));
+      stxStorageWrite(sessionStorage, key, s(), 'useSessionStorage');
     });
     var handler = function(e) {
-      if (e.key === key && e.storageArea === sessionStorage)
-        s.set(e.newValue !== null ? JSON.parse(e.newValue) : defaultValue);
+      if (e.key === key && (!e.storageArea || e.storageArea === sessionStorage))
+        s.set(stxParseStored(e.newValue, defaultValue, key, 'useSessionStorage'));
     };
     window.addEventListener('storage', handler);
     onDestroy(function() { window.removeEventListener('storage', handler); });