@stacksjs/stx 0.2.118 → 0.2.120

package/dist/state-management.d.ts

@@ -225,7 +225,7 @@ export declare function transformStoreImports(code: string): string;
  * }
  * ```
  */
-export declare function registerStoresClient(stores: Record<string, DefinedStoreWithGettersAndActions<any, any, any>>): void;
+export declare function registerStoresClient(stores: Record<string, object>): void;
 /** Store options */
 export declare interface StoreOptions<T> {
   name?: string

package/dist/state-management.js

@@ -495,7 +495,7 @@ export function generateStoreImportRuntime() {
           resolve(store);
         }
 else if (Date.now() - start > timeout) {
-          reject(new Error('Timeout waiting for store: ' + storeName));
+          reject(new Error('Timeout waiting for store: '.concat(storeName)));
         }
 else {
           requestAnimationFrame(check);

package/dist/strict-lint.d.ts

@@ -18,7 +18,7 @@ export declare interface StxStrictDiagnostic {
 }
 export declare interface StxStrictOptions {
   filePath?: string
-  fileKind?: 'view' | 'component'
+  fileKind?: 'view' | 'component' | 'layout'
   rules?: Partial<Record<StxStrictRuleId, boolean>>
 }
 /**

package/dist/strict-lint.js

@@ -265,7 +265,7 @@ function isRuleOn(rules, id) {
   return rules?.[id] !== !1;
 }
 export function lintStxStrict(source, options = {}) {
-  const out = [], spans = rawTextSpans(source), filePath = (options.filePath ?? "").replace(/\\/g, "/"), fileKind = options.fileKind ?? (/\/components?\//i.test(filePath) ? "component" : "view");
+  const out = [], spans = rawTextSpans(source), filePath = (options.filePath ?? "").replace(/\\/g, "/"), fileKind = options.fileKind ?? (/\/components?\//i.test(filePath) ? "component" : /\/layouts?\//i.test(filePath) ? "layout" : "view");
   if (isRuleOn(options.rules, "stx/no-bare-function-ref-in-event"))
     ruleBareFunctionRef(source, spans, out);
   if (isRuleOn(options.rules, "stx/no-view-level-script-client"))

package/dist/stx.d.ts

@@ -38,6 +38,7 @@ declare module '*.md' {
 
 interface StxSignal<T> {
   (): T
+  value: T
   set: (value: T) => void
   update: (fn: (current: T) => T) => void
   subscribe: (cb: (value: T) => void) => () => void
@@ -46,6 +47,7 @@ interface StxSignal<T> {
 
 interface StxDerivedSignal<T> {
   (): T
+  readonly value: T
   // Derived signals carry `_isDerived: true` (distinguishes them from state
   // signals, which carry `_isSignal: true`). The two branches are exposed
   // separately as `isSignal()` / `isDerived()`. Surfaced by the dual-impl
@@ -155,6 +157,9 @@ declare function useEventListener(
   _handler: (event: Event) => void,
   _options?: boolean | AddEventListenerOptions,
 ): StxCleanup
+declare function useScrollLock(
+  _target?: HTMLElement | null | { current?: HTMLElement | null, value?: HTMLElement | null } | (() => HTMLElement | null | undefined),
+): StxSignal<boolean>
 declare function useMeta(_meta: Record<string, string>): void
 declare function useClickOutside(_target: HTMLElement | StxRef<HTMLElement | null> | string | null, _handler: (event: MouseEvent) => void): StxCleanup
 declare function useFocus(_target: HTMLElement | StxRef<HTMLElement | null> | string | null): { focused: StxSignal<boolean>, focus: () => void, blur: () => void }
@@ -496,6 +501,7 @@ interface StxRuntimeRegistry {
   useAsync: typeof useAsync
   useLocalStorage: typeof useLocalStorage
   useEventListener: typeof useEventListener
+  useScrollLock: typeof useScrollLock
   useWebSocket: typeof useWebSocket
   useColorMode: typeof useColorMode
   useDark: typeof useDark

package/dist/style-scoping.js

@@ -1,3 +1,4 @@
+import { maskAtElementPosition, matchScriptElement, matchStyleElement } from "./html-masking.js";
 import { generateComponentId, scopeCss } from "./web-components/css-scoping.js";
 const SCOPED_STYLE_ATTR = String.raw`(?<![\w-])scoped(?![\w-])`, SCOPED_STYLE_PROBE = new RegExp(`<style\\s+[^>]*${SCOPED_STYLE_ATTR}`, "i");
 export function processScopedStyles(template, filePath) {
@@ -20,7 +21,16 @@ export function processScopedStyles(template, filePath) {
 function scopeCssWithAttribute(css, scopeAttr) {
   return scopeCss(css, "__SCOPE_PLACEHOLDER__", { preserveHost: !1 }).replace(/\.(__SCOPE_PLACEHOLDER__) /g, `[${scopeAttr}] `).replace(/\.(__SCOPE_PLACEHOLDER__)/g, `[${scopeAttr}]`);
 }
+const MASK_TOKEN = (index) => `\x00stx-scope-mask-${index}\x00`, MASK_TOKEN_PATTERN = /\u0000stx-scope-mask-(\d+)\u0000/g;
 function addScopeAttribute(html, scopeAttr) {
+  const masked = maskAtElementPosition(html, (source, index) => {
+    const script = matchScriptElement(source, index);
+    return script > index ? script : matchStyleElement(source, index);
+  }, (_token, index) => MASK_TOKEN(index)), injected = injectScopeAttribute(masked.output, scopeAttr);
+  MASK_TOKEN_PATTERN.lastIndex = 0;
+  return injected.replace(MASK_TOKEN_PATTERN, (_match, index) => masked.tokens[Number(index)]);
+}
+function injectScopeAttribute(html, scopeAttr) {
   const skipTags = new Set([
     "script",
     "style",

package/dist/utils.js

@@ -1,6 +1,6 @@
 import fs from "node:fs";
 import path from "node:path";
-import { extractAndStripCssImports, extractBridgeData, processClientScript, renderVendorStyleTags } from "./client-script.js";
+import { extractAndStripCssImports, extractBridgeData, injectBrowserCoreAutoImports, processClientScript, renderVendorStyleTags } from "./client-script.js";
 import { interpolateScriptExpressions, processExpressions, unescapeHtml } from "./expressions.js";
 import { COMPONENT_SCOPE_LOCAL_GLOBALS, buildRuntimeGlobalsDestructure } from "./runtime-globals.js";
 import { transformStoreImports } from "./store-imports.js";
@@ -629,7 +629,9 @@ ${triedPaths.map((p) => `  - ${p}`).join(`
           projectRoot: process.cwd()
         });
         let bundledContent = cssExtraction.code;
-        const vendorStyleTags = renderVendorStyleTags(cssExtraction.styles), { hasUserImports, bundleClientScript } = await import("./client-script-bundler.js");
+        const vendorStyleTags = renderVendorStyleTags(cssExtraction.styles);
+        bundledContent = injectBrowserCoreAutoImports(bundledContent).code;
+        const { hasUserImports, bundleClientScript } = await import("./client-script-bundler.js");
         if (hasUserImports(bundledContent))
           bundledContent = await bundleClientScript(bundledContent, componentFilePath, {
             projectRoot: process.cwd(),
@@ -639,7 +641,7 @@ ${triedPaths.map((p) => `  - ${p}`).join(`
         bundledContent = bundledContent.replace(/^\s*import\s+(?:type\s+)?\{([^}]*)\}\s+from\s+['"](?:stx|@stacksjs\/stx|@stacksjs\/browser)['"]\s*;?\s*$/gm, (_match, specifiers) => rewriteStxImportSpecifiers(specifiers));
         const content = transformStoreImports(bundledContent), componentLocalNames = extractVariableNames(content), wrappedContent = `
 (function() {
-  ${buildRuntimeGlobalsDestructure("const", [...COMPONENT_SCOPE_LOCAL_GLOBALS, ...componentLocalNames])}
+  ${buildRuntimeGlobalsDestructure("const", [...COMPONENT_SCOPE_LOCAL_GLOBALS, ...componentLocalNames], content)}
   const __scope = window.stx._scopes = window.stx._scopes || {};
   const __scopeVars = __scope['${scopeId}'] = __scope['${scopeId}'] || {};
   const __previousCurrentElement = window.__STX_CURRENT_ELEMENT__;

package/dist/variable-extractor.js

@@ -1,7 +1,7 @@
 var {require}=import.meta;import path from "node:path";
 import process from "node:process";
 import { findMatchingDelimiter } from "./parser/tokenizer.js";
-import { useHead as headUseHead, useSeoMeta as headUseSeoMeta, getHead as headGetHead } from "./head.js";
+import { mergeHeadConfigs, seoMetaToHeadConfig } from "./head.js";
 import { getPublicEnvDefine } from "./public-env.js";
 import { safeEvaluate } from "./safe-evaluator.js";
 function extractDeclaredVariableNames(script) {
@@ -261,6 +261,13 @@ export async function extractVariables(scriptContent, context, filePath, options
   };
   for (const [key, value] of Object.entries(propsObj))
     Object.defineProperty($props, key, { value, enumerable: !0, configurable: !0, writable: !0 });
+  for (const shadowed of ["name", "length", "caller", "arguments"]) {
+    if (Object.prototype.hasOwnProperty.call(propsObj, shadowed))
+      continue;
+    try {
+      Object.defineProperty($props, shadowed, { value: void 0, enumerable: !1, configurable: !0, writable: !0 });
+    } catch {}
+  }
   const defineProps = (definitions) => {
     if (!definitions)
       return propsObj;
@@ -309,26 +316,11 @@ export async function extractVariables(scriptContent, context, filePath, options
       matched: []
     };
   }, useRouter = () => ({ push: (_to) => {}, replace: (_to) => {}, back: () => {}, forward: () => {}, go: (_n) => {} }), useHead = (head) => {
-    headUseHead(head);
-    const existing = context.__stx_runtime_head || {}, incoming = head || {};
-    context.__stx_runtime_head = {
-      ...existing,
-      ...incoming.title && { title: incoming.title },
-      meta: [...existing.meta || [], ...incoming.meta || []],
-      link: [...existing.link || [], ...incoming.link || []],
-      script: [...existing.script || [], ...incoming.script || []],
-      htmlAttrs: { ...existing.htmlAttrs || {}, ...incoming.htmlAttrs || {} },
-      bodyAttrs: { ...existing.bodyAttrs || {}, ...incoming.bodyAttrs || {} }
-    };
+    const existing = context.__stx_runtime_head || {};
+    context.__stx_runtime_head = mergeHeadConfigs(existing, head || {});
   }, useSeoMeta = (meta) => {
-    headUseSeoMeta(meta);
-    const head = headGetHead();
-    context.__stx_runtime_head = {
-      ...context.__stx_runtime_head || {},
-      ...head.title && { title: head.title },
-      meta: head.meta ? [...head.meta] : []
-    };
-  }, ref = (val) => ({ value: val }), reactive = (obj) => obj, computed = (fn) => ({ value: typeof fn === "function" ? fn() : fn }), watch = (_source, _cb) => {}, onMounted = (_fn) => {}, onUnmounted = (_fn) => {}, nextTick = (fn) => fn ? fn() : Promise.resolve(), defineEmits = (_events) => (_event, ..._args) => {}, defineExpose = (_exposed) => {}, provide = (_key, _value) => {}, inject = (_key, defaultValue) => defaultValue, useColorMode = () => ({ value: "light" }), useDark = () => state(!1), useMediaQuery = (_query) => state(!1), usePreferredDark = () => useMediaQuery("(prefers-color-scheme: dark)"), usePreferredLight = () => useMediaQuery("(prefers-color-scheme: light)"), usePreferredReducedMotion = () => useMediaQuery("(prefers-reduced-motion: reduce)"), usePreferredContrast = () => useMediaQuery("(prefers-contrast: more)"), mockWindow = {
+    useHead(seoMetaToHeadConfig(meta || {}));
+  }, ref = (val) => ({ value: val }), reactive = (obj) => obj, computed = (fn) => ({ value: typeof fn === "function" ? fn() : fn }), watch = (_source, _cb) => {}, onMounted = (_fn) => {}, onUnmounted = (_fn) => {}, nextTick = (fn) => fn ? fn() : Promise.resolve(), defineEmits = (_events) => (_event, ..._args) => {}, defineExpose = (_exposed) => {}, provide = (_key, _value) => {}, inject = (_key, defaultValue) => defaultValue, useColorMode = () => ({ value: "light" }), useDark = () => state(!1), useMediaQuery = (_query) => state(!1), useScrollLock = () => state(!1), usePreferredDark = () => useMediaQuery("(prefers-color-scheme: dark)"), usePreferredLight = () => useMediaQuery("(prefers-color-scheme: light)"), usePreferredReducedMotion = () => useMediaQuery("(prefers-reduced-motion: reduce)"), usePreferredContrast = () => useMediaQuery("(prefers-contrast: more)"), mockWindow = {
     siteId: void 0,
     API_ENDPOINT: "",
     ANALYTICS_SITE_ID: void 0,
@@ -463,11 +455,11 @@ export async function extractVariables(scriptContent, context, filePath, options
       scriptContextKeys.push(filteredContextKeys[i]);
       scriptContextValues.push(filteredContextValues[i]);
     }
-    const result = await Function("module", "exports", "require", "props", "$props", "defineProps", "withDefaults", "state", "derived", "effect", "batch", "onMount", "onDestroy", "definePageMeta", "useRoute", "useRouter", "useHead", "useSeoMeta", "ref", "reactive", "computed", "watch", "onMounted", "onUnmounted", "nextTick", "defineEmits", "defineExpose", "defineSlots", "provide", "inject", "useColorMode", "useDark", "useMediaQuery", "usePreferredDark", "usePreferredLight", "usePreferredReducedMotion", "usePreferredContrast", "window", "document", "console", "confirm", "alert", "fetch", "params", ...propArgNames, ...scriptContextKeys, `return (async () => {
+    const result = await Function("module", "exports", "require", "props", "$props", "defineProps", "withDefaults", "state", "derived", "effect", "batch", "onMount", "onDestroy", "definePageMeta", "useRoute", "useRouter", "useHead", "useSeoMeta", "ref", "reactive", "computed", "watch", "onMounted", "onUnmounted", "nextTick", "defineEmits", "defineExpose", "defineSlots", "provide", "inject", "useColorMode", "useDark", "useMediaQuery", "useScrollLock", "usePreferredDark", "usePreferredLight", "usePreferredReducedMotion", "usePreferredContrast", "window", "document", "console", "confirm", "alert", "fetch", "params", ...propArgNames, ...scriptContextKeys, `return (async () => {
         ${convertedScript}
         ${reSyncCode}
         return module.exports
-      })()`)(module, exports, requireFn, propsObj, $props, defineProps, withDefaults, state, derived, effect, batch, onMount, onDestroy, definePageMeta, useRoute, useRouter, useHead, useSeoMeta, ref, reactive, computed, watch, onMounted, onUnmounted, nextTick, defineEmits, defineExpose, defineSlots, provide, inject, useColorMode, useDark, useMediaQuery, usePreferredDark, usePreferredLight, usePreferredReducedMotion, usePreferredContrast, windowProxy, mockDocument, mockConsole, mockWindow.confirm, mockWindow.alert, mockWindow.fetch, paramsObj, ...propArgValues, ...scriptContextValues);
+      })()`)(module, exports, requireFn, propsObj, $props, defineProps, withDefaults, state, derived, effect, batch, onMount, onDestroy, definePageMeta, useRoute, useRouter, useHead, useSeoMeta, ref, reactive, computed, watch, onMounted, onUnmounted, nextTick, defineEmits, defineExpose, defineSlots, provide, inject, useColorMode, useDark, useMediaQuery, useScrollLock, usePreferredDark, usePreferredLight, usePreferredReducedMotion, usePreferredContrast, windowProxy, mockDocument, mockConsole, mockWindow.confirm, mockWindow.alert, mockWindow.fetch, paramsObj, ...propArgValues, ...scriptContextValues);
     if (options.preserveExisting) {
       for (const [key, value] of Object.entries(result))
         if (!(key in context) || context[key] === void 0)

package/dist/vue-template.js

@@ -134,11 +134,12 @@ function findNextOpenTag(html, startFrom) {
   const match = tagRegex.exec(html);
   if (!match)
     return null;
+  const selfClosing = /\/\s*>$/.test(match[0]) || VOID_ELEMENTS.has(match[1].toLowerCase()), attrs = selfClosing ? match[2].replace(/\/\s*$/, "") : match[2];
   return {
     full: match[0],
     tag: match[1],
-    attrs: match[2],
-    selfClosing: match[3].includes("/") || VOID_ELEMENTS.has(match[1].toLowerCase()),
+    attrs,
+    selfClosing,
     start: match.index,
     end: match.index + match[0].length
   };

package/dist/x-element.d.ts

@@ -29,7 +29,7 @@
  */
 /**
  * Generate the x-element runtime script
- * This is injected once per page that uses x-* directives
+ * This is injected once per page that declares an x-data scope
  */
 export declare function generateXElementRuntime(): string;
 /**
@@ -38,6 +38,6 @@ export declare function generateXElementRuntime(): string;
 export declare function hasXElementDirectives(template: string): boolean;
 /**
  * Process x-element directives in template
- * Injects the runtime if x-* directives are found
+ * Injects one runtime if an x-data scope is found
  */
 export declare function processXElementDirectives(template: string): string;

package/dist/x-element.js

@@ -1,5 +1,5 @@
 export function generateXElementRuntime() {
-  return `<script data-stx-scoped>
+  return `<script data-stx-scoped data-stx-x-element-runtime>
 (function() {
   'use strict';
 
@@ -286,15 +286,16 @@ else {
 </script>`;
 }
 export function hasXElementDirectives(template) {
-  return /\bx-(data|model|text|show|init|html)\b/.test(template) || /\s:[a-z]/.test(template);
+  return /\bx-data(?:\s|=)/.test(template);
 }
 export function processXElementDirectives(template) {
-  if (!hasXElementDirectives(template))
-    return template;
-  const runtime = generateXElementRuntime(), bodyCloseIdx = template.lastIndexOf("</body>");
+  const runtimePattern = /<script\b(?=[^>]*\bdata-stx-x-element-runtime\b)[^>]*>[\s\S]*?<\/script>\s*/gi, existingRuntimes = template.match(runtimePattern) || [], withoutRuntimes = existingRuntimes.length > 0 ? template.replace(runtimePattern, "") : template;
+  if (!hasXElementDirectives(withoutRuntimes))
+    return withoutRuntimes;
+  const runtime = existingRuntimes[0]?.trim() || generateXElementRuntime(), bodyCloseIdx = withoutRuntimes.lastIndexOf("</body>");
   if (bodyCloseIdx !== -1)
-    return template.slice(0, bodyCloseIdx) + runtime + `
-` + template.slice(bodyCloseIdx);
-  return template + `
+    return withoutRuntimes.slice(0, bodyCloseIdx) + runtime + `
+` + withoutRuntimes.slice(bodyCloseIdx);
+  return withoutRuntimes + `
 ` + runtime;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stacksjs/stx",
   "type": "module",
-  "version": "0.2.118",
+  "version": "0.2.120",
   "description": "A performant UI Framework. Powered by Bun.",
   "author": "Chris Breuer <chris@stacksjs.org>",
   "license": "MIT",
@@ -117,12 +117,12 @@
   "dependencies": {
     "@cwcss/crosswind": "^0.2.12",
     "@stacksjs/clapp": "^0.2.0",
-    "@stacksjs/desktop": "0.2.118",
-    "@stacksjs/sanitizer": "0.2.118",
+    "@stacksjs/desktop": "0.2.120",
+    "@stacksjs/sanitizer": "0.2.120",
     "@stacksjs/ts-i18n": "^0.1.11",
-    "bun-plugin-stx": "0.2.118",
+    "bun-plugin-stx": "0.2.120",
     "bunfig": "^0.15.15",
-    "stx-router": "0.2.118",
+    "stx-router": "0.2.120",
     "ts-broadcasting": "^0.0.9",
     "ts-images": "^0.1.9",
     "ts-syntax-highlighter": "^0.2.1"

package/stx.d.ts

@@ -38,6 +38,7 @@ declare module '*.md' {
 
 interface StxSignal<T> {
   (): T
+  value: T
   set: (value: T) => void
   update: (fn: (current: T) => T) => void
   subscribe: (cb: (value: T) => void) => () => void
@@ -46,6 +47,7 @@ interface StxSignal<T> {
 
 interface StxDerivedSignal<T> {
   (): T
+  readonly value: T
   // Derived signals carry `_isDerived: true` (distinguishes them from state
   // signals, which carry `_isSignal: true`). The two branches are exposed
   // separately as `isSignal()` / `isDerived()`. Surfaced by the dual-impl
@@ -155,6 +157,9 @@ declare function useEventListener(
   _handler: (event: Event) => void,
   _options?: boolean | AddEventListenerOptions,
 ): StxCleanup
+declare function useScrollLock(
+  _target?: HTMLElement | null | { current?: HTMLElement | null, value?: HTMLElement | null } | (() => HTMLElement | null | undefined),
+): StxSignal<boolean>
 declare function useMeta(_meta: Record<string, string>): void
 declare function useClickOutside(_target: HTMLElement | StxRef<HTMLElement | null> | string | null, _handler: (event: MouseEvent) => void): StxCleanup
 declare function useFocus(_target: HTMLElement | StxRef<HTMLElement | null> | string | null): { focused: StxSignal<boolean>, focus: () => void, blur: () => void }
@@ -496,6 +501,7 @@ interface StxRuntimeRegistry {
   useAsync: typeof useAsync
   useLocalStorage: typeof useLocalStorage
   useEventListener: typeof useEventListener
+  useScrollLock: typeof useScrollLock
   useWebSocket: typeof useWebSocket
   useColorMode: typeof useColorMode
   useDark: typeof useDark