@stacksjs/stx 0.2.113 → 0.2.114

package/dist/stx.d.ts

@@ -233,6 +233,14 @@ declare function useColorMode(): {
   setMode: (mode: 'light' | 'dark' | 'auto') => void
 }
 declare function useDark(): StxSignal<boolean>
+declare function useMediaQuery(query: string): StxSignal<boolean> & {
+  readonly matches: boolean
+  readonly value: boolean
+}
+declare function usePreferredDark(): ReturnType<typeof useMediaQuery>
+declare function usePreferredLight(): ReturnType<typeof useMediaQuery>
+declare function usePreferredReducedMotion(): ReturnType<typeof useMediaQuery>
+declare function usePreferredContrast(): ReturnType<typeof useMediaQuery>
 
 // ============================================================================
 // Head / SEO

package/dist/testing.js

@@ -30,7 +30,14 @@ export function shimAttributes(root) {
         const m = el.__attrMap, arr = [];
         let i = 0;
         for (const [name, value] of m)
-          arr[i++] = { name, value };
+          arr[i++] = {
+            name,
+            value,
+            *[Symbol.iterator]() {
+              yield name;
+              yield value;
+            }
+          };
         arr.length = i;
         arr.get = (k) => m.get(k);
         arr.set = (k, v) => m.set(k, v);

package/dist/types/config-types.d.ts

@@ -271,8 +271,10 @@ export declare interface StxConfig {
   enabled: boolean
   partialsDir: string
   componentsDir: string
+  _rootComponentsDir?: string
   layoutsDir?: string
   storesDir?: string
+  composablesDir?: string
   defaultLayout?: string
   plugins?: Array<string | [string, Record<string, any>]>
   publicDir?: string

package/dist/utils.d.ts

@@ -45,6 +45,15 @@ export declare function isHydrateTrigger(trigger: string): boolean;
  * would flag components that have no slot expressions at all.
  */
 export declare function slotContentHasExpressions(slotContent: string): boolean;
+/**
+ * Collect client variables whose initializer returns a signal-like value.
+ *
+ * Component scripts are removed before their template body reaches the
+ * expression pipeline. Recording these names in the component context keeps
+ * interpolations such as `{{ title() }}` client-owned even when a static prop
+ * named `title` also exists in the server context.
+ */
+export declare function componentClientSignalNames(scripts: string[]): string[];
 export declare function renderComponentWithSlot(componentPath: string, props: Record<string, unknown>, slotContent: string, componentsDir: string, parentContext: Record<string, unknown>, parentFilePath: string, options: StxOptions, processedComponents?: Set<string> | undefined, dependencies: Set<string>): Promise<string>;
 /**
  * Check if a file exists

package/dist/utils.js

@@ -1,12 +1,14 @@
 import fs from "node:fs";
 import path from "node:path";
-import { extractBridgeData, processClientScript } from "./client-script.js";
-import { processExpressions, unescapeHtml } from "./expressions.js";
+import { extractAndStripCssImports, extractBridgeData, 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";
 import { LRUCache } from "./performance-utils.js";
 import { processDirectives } from "./process.js";
 import { getPublicEnvDefine } from "./public-env.js";
 import { processScopedStyles } from "./style-scoping.js";
+import { findSfcTemplateBlock } from "./sfc-template.js";
 export {
   extractDirectiveNames,
   getPositionInfo,
@@ -325,6 +327,7 @@ export async function userComponentFileExists(componentPath, componentsDir, pare
   if (originalFilePath)
     push(path.join(path.dirname(originalFilePath), "components"));
   push(componentsDir);
+  push(options._rootComponentsDir);
   push(path.join(path.dirname(parentFilePath), "components"));
   push(options.componentsDir);
   const pluginDirs = options._pluginComponentDirs;
@@ -356,6 +359,16 @@ export function slotContentHasExpressions(slotContent) {
   const withoutScripts = slotContent.replace(/<script[\s\S]*?<\/script>/gi, "").replace(/<style[\s\S]*?<\/style>/gi, "");
   return /\{\{[\s\S]*?\}\}|\{!![\s\S]*?!!\}/.test(withoutScripts);
 }
+export function componentClientSignalNames(scripts) {
+  const names = new Set, declaration = /\b(?:const|let|var)\s+([a-zA-Z_$][\w$]*)\s*=\s*(?:state|derived|computed|ref|reactive|signal|useReactiveProp|useLocalStorage|useSessionStorage|useCookie|useDebouncedValue)\s*(?:<[^>]*>)?\s*\(/g;
+  for (const script of scripts) {
+    let match;
+    while ((match = declaration.exec(script)) !== null)
+      names.add(match[1]);
+    declaration.lastIndex = 0;
+  }
+  return [...names];
+}
 export async function renderComponentWithSlot(componentPath, props, slotContent, componentsDir, parentContext, parentFilePath, options, processedComponents = new Set, dependencies) {
   const { extractVariables } = await import("./variable-extractor.js"), components = processedComponents ?? new Set;
   if (components.has(componentPath))
@@ -396,6 +409,9 @@ export async function renderComponentWithSlot(componentPath, props, slotContent,
       }
       if (componentsDir)
         searchDirs.push(componentsDir);
+      const rootComponentsDir = options._rootComponentsDir;
+      if (typeof rootComponentsDir === "string" && !searchDirs.includes(rootComponentsDir))
+        searchDirs.push(rootComponentsDir);
       const parentRelative = path.join(path.dirname(parentFilePath), "components");
       if (!searchDirs.includes(parentRelative))
         searchDirs.push(parentRelative);
@@ -521,9 +537,9 @@ ${triedPaths.map((p) => `  - ${p}`).join(`
     };
     applyDestructuredPropDefaults(componentContent, componentContext);
     let workingContent = componentContent;
-    const templateMatch = workingContent.match(/<template\b(?![^>]*(?:\b(?:id|x-for|x-if|@for|@if|:for|:if)\s*=|\s#[\w-]|\bv-slot|\bslot\s*=))[^>]*>([\s\S]*?)<\/template>/i);
-    if (templateMatch)
-      workingContent = templateMatch[1].trim();
+    const templateBlock = findSfcTemplateBlock(workingContent);
+    if (templateBlock)
+      workingContent = templateBlock.content.trim();
     const scriptRegex = /<script\b([^>]*)>([\s\S]*?)<\/script>/gi, scriptMatches = [...componentContent.matchAll(scriptRegex)], clientScripts = [];
     for (const match of scriptMatches) {
       const attrs = match[1] || "";
@@ -537,8 +553,9 @@ ${triedPaths.map((p) => `  - ${p}`).join(`
         } catch (e) {}
       if (!isServerScript) {
         let cleanContent = content.replace(/^\s*const\s*\{[^}]+\}\s*=\s*window\.stx\s*;?\s*\n?/gm, "");
-        if (cleanContent.includes("{{") && cleanContent.includes("}}"))
-          cleanContent = processExpressions(cleanContent, componentContext, componentFilePath);
+        const hasMustache = cleanContent.includes("{{") && cleanContent.includes("}}"), hasRawMarker = cleanContent.includes("{!!") && cleanContent.includes("!!}");
+        if (hasMustache || hasRawMarker)
+          cleanContent = interpolateScriptExpressions(cleanContent, componentContext);
         const cleanAttrs = attrs.replace(/\s*\bts\b/g, "").replace(/\s*\blang\s*=\s*["']?(ts|typescript)["']?/gi, "");
         clientScripts.push(`<script${cleanAttrs}>${cleanContent}</script>`);
       }
@@ -568,7 +585,7 @@ ${triedPaths.map((p) => `  - ${p}`).join(`
     if (slotContent && templateContent.includes("{{ text || slot }}"))
       templateContent = templateContent.replace(/\{\{\s*text\s*\|\|\s*slot\s*\}\}/g, () => slotContent);
     const { applySlots } = await import("./slots.js"), { defaultSlot, namedSlots } = parsedSlotContent;
-    templateContent = await applySlots(templateContent, defaultSlot || slotContent, namedSlots, componentContext);
+    templateContent = await applySlots(templateContent, defaultSlot, namedSlots, componentContext);
     for (const [key, value] of Object.entries(componentContext))
       if (typeof value === "string") {
         if (value.includes("<") && value.includes(">") || value.includes("&lt;") || value.includes("&quot;")) {
@@ -576,15 +593,24 @@ ${triedPaths.map((p) => `  - ${p}`).join(`
           componentContext[key] = unescaped;
         }
       }
-    const hasSignalScripts = clientScripts.some((s) => /\b(state|derived|effect)\s*(?:<[^<>()]*>)?\s*\(/.test(s)), componentOptions = {
+    const hasSignalScripts = clientScripts.some((s) => /\b(?:state|derived|effect|ref|reactive|computed|watch|watchEffect|useReactiveProp|defineProps|withDefaults|defineEmits|defineExpose|defineSlots)\s*(?:<[^<>()]*>)?\s*\(/.test(s)), clientSignalNames = componentClientSignalNames(clientScripts);
+    if (clientSignalNames.length > 0)
+      componentContext.__stx_client_signal_names = clientSignalNames;
+    const componentOptions = {
       ...options,
+      _rootComponentsDir: options._rootComponentsDir || options.componentsDir,
       componentsDir: path.dirname(componentFilePath),
       skipSignalsRuntime: !0,
-      skipEventDirectives: hasSignalScripts,
+      skipEventDirectives: hasSignalScripts || clientScripts.length === 0,
       defaultLayout: void 0
     };
     componentContext.__stxProcessingDepth = (parentContext.__stxProcessingDepth || 0) + 1;
-    const result = await processDirectives(templateContent, componentContext, componentFilePath, componentOptions, dependencies), scopeId = `stx_${baseName.replace(/[^a-zA-Z0-9]/g, "_")}_${++scopeIdCounter}_${Math.random().toString(36).slice(2, 8)}`;
+    const result = await processDirectives(templateContent, componentContext, componentFilePath, componentOptions, dependencies), preservedExpressions = new Set(Array.isArray(parentContext.__stx_preserved_client_expressions) ? parentContext.__stx_preserved_client_expressions : []);
+    for (const match of result.matchAll(/\{\{([\s\S]*?)\}\}/g))
+      preservedExpressions.add(match[1].trim());
+    if (preservedExpressions.size > 0)
+      parentContext.__stx_preserved_client_expressions = [...preservedExpressions];
+    const scopeId = `stx_${baseName.replace(/[^a-zA-Z0-9]/g, "_")}_${++scopeIdCounter}_${Math.random().toString(36).slice(2, 8)}`;
     let output = result;
     if (hasSignalScripts) {
       let propsJson = "";
@@ -594,15 +620,30 @@ ${triedPaths.map((p) => `  - ${p}`).join(`
         } catch {}
       const hydrateJson = hydrateTrigger ? ` stx-hydrate="${escapeAttr(hydrateTrigger)}"` : "";
       output = `<div data-stx-scope="${scopeId}"${propsJson}${hydrateJson}>${result}</div>`;
-      output = clientScripts.map((script) => {
+      const scopedScripts = await Promise.all(clientScripts.map(async (script) => {
         const scriptMatch = script.match(/<script([^>]*)>([\s\S]*)<\/script>/i);
         if (!scriptMatch)
           return script;
-        const [, attrs, rawContent] = scriptMatch, content = transformStoreImports(rawContent), wrappedContent = `
+        const [, attrs, rawContent] = scriptMatch, cssExtraction = extractAndStripCssImports(rawContent, {
+          filePath: componentFilePath,
+          projectRoot: process.cwd()
+        });
+        let bundledContent = cssExtraction.code;
+        const vendorStyleTags = renderVendorStyleTags(cssExtraction.styles), { hasUserImports, bundleClientScript } = await import("./client-script-bundler.js");
+        if (hasUserImports(bundledContent))
+          bundledContent = await bundleClientScript(bundledContent, componentFilePath, {
+            projectRoot: process.cwd(),
+            minify: options.buildMode === "compile"
+          });
+        const { rewriteStxImportSpecifiers } = await import("./signal-processing.js");
+        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), wrappedContent = `
 (function() {
-  const { state, derived, effect, batch, defineEmits, defineExpose, defineSlots, defineProps, withDefaults, useStore, useFetch, useRef, useQuery, useMutation, useOptimistic, useDebounce, useDebouncedValue, useThrottle, useInterval, useTimeout, useToggle, useCounter, useClickOutside, useFocus, useAsync, useLocalStorage, useSessionStorage, useCookie, useReactiveProp, useEventListener, useWebSocket, useColorMode, useDark, useHead, useSeoMeta, definePageMeta, useRoute, useSearchParams, navigate, goBack, goForward, provide, inject, ref, reactive, computed, watch, watchEffect, nextTick } = window.stx;
+  ${buildRuntimeGlobalsDestructure("const", COMPONENT_SCOPE_LOCAL_GLOBALS)}
   const __scope = window.stx._scopes = window.stx._scopes || {};
   const __scopeVars = __scope['${scopeId}'] = __scope['${scopeId}'] || {};
+  const __previousCurrentElement = window.__STX_CURRENT_ELEMENT__;
+  window.__STX_CURRENT_ELEMENT__ = document.querySelector('[data-stx-scope="${scopeId}"]');
 
   // Scope-specific lifecycle callbacks
   __scopeVars.__mountCallbacks = __scopeVars.__mountCallbacks || [];
@@ -610,6 +651,7 @@ ${triedPaths.map((p) => `  - ${p}`).join(`
   const onMount = (fn) => __scopeVars.__mountCallbacks.push(fn);
   const onDestroy = (fn) => __scopeVars.__destroyCallbacks.push(fn);
 
+try {
 ${content}
 
   // Register all defined signals and functions in this scope
@@ -620,13 +662,18 @@ ${content}
   }
 catch (e) {}
   Object.assign(__scopeVars, __localVars);
+}
+finally {
+  window.__STX_CURRENT_ELEMENT__ = __previousCurrentElement;
+}
 })();`;
         if (hydrateTrigger)
-          return `<script type="stx/island" data-stx-island="${scopeId}" data-stx-scoped${attrs}>${wrappedContent}</script>`;
-        return `<script data-stx-scoped${attrs}>${wrappedContent}</script>`;
-      }).join(`
-`) + `
-` + output;
+          return `${vendorStyleTags}<script type="stx/island" data-stx-island="${scopeId}" data-stx-scoped${attrs}>${wrappedContent}</script>`;
+        return `${vendorStyleTags}<script data-stx-scoped${attrs}>${wrappedContent}</script>`;
+      }));
+      output = output + `
+` + scopedScripts.join(`
+`);
       if (preservedStyle)
         output += `
 ` + preservedStyle;

package/dist/variable-extractor.js

@@ -328,7 +328,7 @@ export async function extractVariables(scriptContent, context, filePath, options
       ...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 = () => ({ value: !1 }), mockWindow = {
+  }, 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 = {
     siteId: void 0,
     API_ENDPOINT: "",
     ANALYTICS_SITE_ID: void 0,
@@ -463,11 +463,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", "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", "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, 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, 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/package.json

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

package/stx.d.ts

@@ -233,6 +233,14 @@ declare function useColorMode(): {
   setMode: (mode: 'light' | 'dark' | 'auto') => void
 }
 declare function useDark(): StxSignal<boolean>
+declare function useMediaQuery(query: string): StxSignal<boolean> & {
+  readonly matches: boolean
+  readonly value: boolean
+}
+declare function usePreferredDark(): ReturnType<typeof useMediaQuery>
+declare function usePreferredLight(): ReturnType<typeof useMediaQuery>
+declare function usePreferredReducedMotion(): ReturnType<typeof useMediaQuery>
+declare function usePreferredContrast(): ReturnType<typeof useMediaQuery>
 
 // ============================================================================
 // Head / SEO