@stacksjs/stx 0.2.119 → 0.2.121

package/dist/render.js

@@ -120,7 +120,12 @@ ${clientScripts.join(`
         const contentMatch = fullScript.match(/<script\b[^>]*>([\s\S]*?)<\/script>/);
         if (!contentMatch)
           return fullScript;
-        return await processClientScript(contentMatch[1], { eventBindings, templateContent: output, serverData });
+        return await processClientScript(contentMatch[1], {
+          eventBindings,
+          templateContent: output,
+          serverData,
+          filePath
+        });
       }))).join(`
 `);
       if (output.match(/(<\/body>)/i))

package/dist/runtime-globals.d.ts

@@ -9,8 +9,11 @@
  * A local declaration is intentionally allowed to shadow a runtime convenience
  * global, just as an explicit import would. Omitting it from this destructure
  * prevents duplicate-binding syntax errors.
+ * @param source optionally limits bindings to identifiers referenced by one
+ * component script. Page-level callers omit it and retain the full authoring
+ * surface.
  */
-export declare function buildRuntimeGlobalsDestructure(declaration?: 'const' | 'var', exclude?: readonly string[]): string;
+export declare function buildRuntimeGlobalsDestructure(declaration?: 'const' | 'var', exclude?: readonly string[], source?: string): string;
 /**
  * Runtime Globals
  *
@@ -26,10 +29,10 @@ export declare function buildRuntimeGlobalsDestructure(declaration?: 'const' | '
  * 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
+ * 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.
+ * to `undefined` and threw "is not a function" when called. `nextTick` now has a
+ * signals-runtime implementation; `inject` remains omitted until it does too.
  *
  * 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

package/dist/runtime-globals.js

@@ -12,6 +12,7 @@ export const STX_RUNTIME_GLOBALS = [
   "goBack",
   "goForward",
   "navigate",
+  "nextTick",
   "onBeforeUnmount",
   "onDestroy",
   "onMount",
@@ -34,6 +35,7 @@ export const STX_RUNTIME_GLOBALS = [
   "useFetch",
   "useFocus",
   "useHead",
+  "useId",
   "useInterval",
   "useLocalStorage",
   "useMediaQuery",
@@ -47,6 +49,7 @@ export const STX_RUNTIME_GLOBALS = [
   "useReactiveProp",
   "useRef",
   "useRoute",
+  "useScrollLock",
   "useSearchParams",
   "useSeoMeta",
   "useSessionStorage",
@@ -59,7 +62,12 @@ export const STX_RUNTIME_GLOBALS = [
   "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;
+export function buildRuntimeGlobalsDestructure(declaration = "const", exclude = [], source) {
+  let names = exclude.length ? STX_RUNTIME_GLOBALS.filter((name) => !exclude.includes(name)) : STX_RUNTIME_GLOBALS;
+  if (source !== void 0)
+    names = names.filter((name) => {
+      const escaped = name.replace(/[$()*+.?[\\\]^{|}-]/g, "\\$&");
+      return new RegExp(`(^|[^\\w$])${escaped}(?![\\w$])`).test(source);
+    });
   return `${declaration} { ${names.join(", ")} } = window.stx;`;
 }

package/dist/runtime-injection.js

@@ -16,7 +16,21 @@ export function injectBrowserRuntime(template) {
     "browserQuery",
     "BrowserQueryBuilder",
     "configureBrowser",
-    "createBrowserModel"
+    "createBrowserModel",
+    "debounce",
+    "throttle",
+    "retry",
+    "sleep",
+    "wait",
+    "delay",
+    "waitUntil",
+    "waitWhile",
+    "lazy",
+    "clamp",
+    "rand",
+    "readableSize",
+    "useDocumentVisibility",
+    "useIntervalFn"
   ].some((sym) => {
     return new RegExp(`\\b${sym}\\b`).test(clientCode);
   }), jsBuiltins = new Set(["Promise", "Object", "Array", "Map", "Set", "Date", "Error", "JSON", "Math", "Number", "String", "RegExp", "Symbol", "WeakMap", "WeakSet", "Proxy", "Reflect", "Intl", "URL", "URLSearchParams", "FormData", "Headers", "Request", "Response", "AbortController", "EventTarget", "Element", "Document", "Node", "Window", "Console", "Storage", "Navigator", "Blob", "File", "FileReader", "HTMLElement", "SVGElement", "Event", "CustomEvent", "DOMParser", "XMLSerializer", "WebSocket", "Worker", "SharedWorker", "IntersectionObserver", "MutationObserver", "ResizeObserver", "PerformanceObserver", "Notification", "Bun", "Buffer", "Process"]), modelPattern = /\b([A-Z][a-zA-Z0-9]*)\s*\.\s*(all|find|first|get|where|orderBy|orderByDesc|limit|select|pluck|create|update|delete)\s*\(/g;

package/dist/signal-processing.js

@@ -1,43 +1,32 @@
-import { generateServerDataBridge } from "./client-script.js";
+import { generateServerDataBridge, injectBrowserCoreAutoImports } 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";
+import { matchScriptElement, scanAtElementPosition } from "./html-masking.js";
 let signalSetupCounter = 0;
-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;
+const TAG_ATTR_RUN = `(?:"[^"]*"|'[^']*'|[^>"'])*`, 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 = [];
-  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)) {
-      cursor = end;
+  for (const item of scanAtElementPosition(html, matchScriptElement)) {
+    const opening = item.token.match(/^<script\b([^>]*)>/i), closing = item.token.match(/<\/script\s*>$/i);
+    if (!opening || !closing)
       continue;
+    const attrs = opening[1];
+    if (opts.skipAttrs) {
+      opts.skipAttrs.lastIndex = 0;
+      if (opts.skipAttrs.test(attrs))
+        continue;
     }
+    const bodyStart = opening[0].length, bodyEnd = item.token.length - closing[0].length;
     out.push({
-      fullMatch: html.slice(m.index, end),
+      fullMatch: item.token,
       attrs,
-      body: html.slice(bodyStart, closeIdx),
-      start: m.index,
-      end
+      body: item.token.slice(bodyStart, bodyEnd),
+      start: item.start,
+      end: item.end
     });
-    cursor = end;
   }
   return out;
 }
@@ -89,6 +78,7 @@ export function hasSignalsSyntax(template) {
     /\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])/,
@@ -668,7 +658,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|useMediaQuery|usePreferredDark|usePreferredLight|usePreferredReducedMotion|usePreferredContrast|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|useId|useReactiveProp|useFetch|useRef|useEventListener|useDebounce|useDebouncedValue|useThrottle|useInterval|useTimeout|useToggle|useCounter|useClickOutside|useFocus|useAsync|useColorMode|useDark|useMediaQuery|useScrollLock|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))
@@ -681,6 +671,7 @@ export async function processScriptSetup(template, filePath, serverData) {
   const setupFnName = `__stx_setup_${Date.now()}_${signalSetupCounter++}`, { hasUserImports, bundleClientScript } = await import("./client-script-bundler.js"), resolvedParts = [];
   for (let i = 0;i < signalScripts.length; i++) {
     let scriptContent = signalScripts[i].content;
+    scriptContent = injectBrowserCoreAutoImports(scriptContent).code;
     if (hasUserImports(scriptContent)) {
       console.log("[stx:bundler] bundling signal script imports");
       scriptContent = await bundleClientScript(scriptContent, filePath || "", {

package/dist/signals-api.d.ts

@@ -308,6 +308,7 @@ export declare function useOptimistic<T, A>(base: Signal<T> | DerivedSignal<T> |
  */
 export declare interface Signal<T> {
   (): T
+  value: T
   set(value: T): void
   update(fn: (current: T) => T): void
   subscribe(callback: (value: T, prev: T) => void): () => void
@@ -324,6 +325,7 @@ export declare interface Signal<T> {
  */
 export declare interface DerivedSignal<T> {
   (): T
+  readonly value: T
   readonly _isDerived: true
 }
 /**

package/dist/signals-api.js

@@ -28,6 +28,11 @@ export function state(initialValue) {
     return () => subscribers.delete(callback);
   };
   Object.defineProperty(signal, "_isSignal", { value: !0, writable: !1 });
+  Object.defineProperty(signal, "value", {
+    get: () => signal(),
+    set: (newValue) => signal.set(newValue),
+    configurable: !0
+  });
   return signal;
 }
 export function derived(compute) {
@@ -58,6 +63,10 @@ export function derived(compute) {
     return cachedValue;
   };
   Object.defineProperty(signal, "_isDerived", { value: !0, writable: !1 });
+  Object.defineProperty(signal, "value", {
+    get: () => signal(),
+    configurable: !0
+  });
   return signal;
 }
 export function effect(fn, options = {}) {