@stacksjs/stx 0.2.152 → 0.2.154

package/dist/plugin-system.d.ts

@@ -89,7 +89,7 @@ export declare interface StxPlugin {
   registerFilters?: () => Record<string, (value: unknown, ...args: unknown[]) => unknown>
   onRegister?: (options: StxOptions) => void | Promise<void>
   onUnregister?: () => void | Promise<void>
-  components?: string
+  components?: string | string[]
   functions?: string
   stores?: string
   pages?: string

package/dist/process.js

@@ -7,7 +7,7 @@ import { processTemplateBindings } from "./reactive-bindings.js";
 import { injectAnalytics } from "./analytics.js";
 import { injectHeatmap } from "./heatmap.js";
 import { processAnimationDirectives } from "./animation.js";
-import { processEventDirectives } from "./events.js";
+import { generateRuntimeScript, processEventDirectives } from "./events.js";
 import { extractBridgeData, processClientScript } from "./client-script.js";
 import { processReactiveDirectives } from "./reactive.js";
 import { processMarkdownFileDirectives } from "./assets.js";
@@ -36,8 +36,9 @@ import { processServerBindings } from "./server-bindings.js";
 import { processVueTemplate } from "./vue-template.js";
 import { processDynamicComponents } from "./dynamic-components.js";
 import { dedupeScopedStyles, processScopedStyles } from "./style-scoping.js";
-import { injectColorModeBootScript } from "./color-mode-boot.js";
-import { ensureDocumentShell, hasDocumentShell, injectCloakStyle, injectConfigHeadTags } from "./document-shell.js";
+import { injectColorModeBootScript, normalizeCriticalHeadOrder } from "./color-mode-boot.js";
+import { injectBuildId } from "./build-id.js";
+import { applyHtmlAttrs, ensureDocumentShell, hasDocumentShell, injectCloakStyle, injectConfigHeadTags, mergeHtmlAttrs, startsDocument } from "./document-shell.js";
 import { hasSignalsSyntax, convertSignalDirectivesToAttributes, convertSignalLoopsToAttributes, preEvalLiteralReactiveIfs, processSignals } from "./signal-processing.js";
 import { processComponents } from "./component-renderer.js";
 import { processInlineAssets } from "./inline-assets.js";
@@ -50,6 +51,7 @@ import { deriveLayoutGroup } from "stx-router/layout-metadata";
 import { initializeComponentClientFactories, injectComponentClientFactories } from "./component-client-factories.js";
 import { importOnce } from "./lazy-module.js";
 export { injectRouterScript } from "./runtime-injection.js";
+import { injectSignalsRuntime, outputNeedsSignalsRuntime, pageShipsSignalsRuntime } from "./runtime-injection.js";
 export { processJsonDirective, processOnceDirective } from "./misc-directives.js";
 export { validateClientScript } from "./script-validation.js";
 const PARENT_PLACEHOLDER = "<!--PARENT_CONTENT_PLACEHOLDER-->";
@@ -245,6 +247,8 @@ function placeSignalsRuntimeBeforeScripts(html) {
 export async function processDirectives(template, context, filePath, options, dependencies) {
   if (options.ssr === !1 && !options.autoShell && options.buildMode === "spa")
     return template;
+  if (context.__stx_signals_gate === void 0)
+    context.__stx_signals_gate = usesSignalsInScript(template);
   const isTopLevel = !context.__stxProcessingDepth;
   if (isTopLevel)
     initializeComponentClientFactories(context);
@@ -268,7 +272,7 @@ export async function processDirectives(template, context, filePath, options, de
           pageHeadTitle = rawTitleMatch[1].trim();
           pageHeadRaw = pageHeadRaw.replace(rawTitleMatch[0], "").trim();
         }
-        const sectionTitle = context.__sections?.title, pageTitle = runtimeHead.title || pageHeadTitle || sectionTitle, headConfig = {
+        const sectionTitle = context.__sections?.title, pageTitle = runtimeHead.title || pageHeadTitle || sectionTitle, titleIsHtml = !runtimeHead.title && (!!pageHeadTitle || !!sectionTitle), headConfig = {
           ...baseHeadConfig,
           ...pageTitle && { title: pageTitle },
           meta: [...baseHeadConfig.meta || [], ...runtimeHead.meta || []],
@@ -276,18 +280,21 @@ export async function processDirectives(template, context, filePath, options, de
           script: [...baseHeadConfig.script || [], ...runtimeHead.script || []],
           headRaw: [baseHeadConfig.headRaw, pageHeadRaw].filter(Boolean).join(`
 `),
-          ...runtimeHead.htmlAttrs && { htmlAttrs: { ...baseHeadConfig.htmlAttrs || {}, ...runtimeHead.htmlAttrs } },
+          ...runtimeHead.htmlAttrs && { htmlAttrs: mergeHtmlAttrs(baseHeadConfig.htmlAttrs, runtimeHead.htmlAttrs) },
           ...runtimeHead.bodyAttrs && { bodyAttrs: { ...baseHeadConfig.bodyAttrs || {}, ...runtimeHead.bodyAttrs } }
         }, alreadyShelled = hasDocumentShell(result);
         result = ensureDocumentShell(result, headConfig, {
+          ...titleIsHtml && { titleIsHtml: !0 },
           ...options.app?.colorMode && { colorMode: options.app.colorMode }
         });
-        if (alreadyShelled)
+        if (alreadyShelled) {
           result = injectConfigHeadTags(result, baseHeadConfig);
+          result = applyHtmlAttrs(result, headConfig.htmlAttrs);
+        }
         const layoutComment = result.match(/<!-- stx-layout: ([^ ]+) -->/);
         if (layoutComment && result.includes("<head")) {
           const layoutName = layoutComment[1], layoutGroup = deriveLayoutGroup(layoutName);
-          result = result.replace("<head>", `<head>
+          result = result.replace(/<head\b[^>]*>/i, (match) => `${match}
   <meta name="stx-layout" content="${escapeHtmlAttribute(layoutName)}">
   <meta name="stx-layout-group" content="${escapeHtmlAttribute(layoutGroup)}">`);
         }
@@ -303,6 +310,7 @@ export async function processDirectives(template, context, filePath, options, de
         const colorModeConfig = options.app?.colorMode;
         if (colorModeConfig)
           result = injectColorModeBootScript(result, colorModeConfig);
+        result = injectBuildId(result);
         result = placeSignalsRuntimeBeforeScripts(result);
       }
       if (isTopLevel)
@@ -315,6 +323,16 @@ export async function processDirectives(template, context, filePath, options, de
 ` + storeTag + result.slice(runtime.end);
           }
         } catch {}
+      if (isTopLevel)
+        try {
+          const { getFrameworkComposableScript } = await importOnce("stx/framework-composables", () => import("./framework-composables.js")), frameworkScript = await getFrameworkComposableScript(result);
+          if (frameworkScript) {
+            const anchor = findScriptBlockByAttribute(result, "data-stx-stores") || findScriptBlockByAttribute(result, "data-stx-runtime");
+            if (anchor)
+              result = result.slice(0, anchor.end) + `
+` + frameworkScript + result.slice(anchor.end);
+          }
+        } catch {}
       if (isTopLevel)
         try {
           const { getComposableScript } = await importOnce("stx/composable-loader", () => import("./composable-loader.js")), resolvedComposablesDir = options.composablesDir, composableCode = await getComposableScript(resolvedComposablesDir);
@@ -325,6 +343,8 @@ export async function processDirectives(template, context, filePath, options, de
 ` + composableTag + result.slice(anchor.end);
           }
         } catch {}
+      if (isTopLevel)
+        result = normalizeCriticalHeadOrder(result);
       if (isTopLevel && context.__stx_inject_css !== !1)
         result = await injectCrosswindCSS(result, void 0, options.buildMode === "serve");
       if (isTopLevel)
@@ -380,8 +400,8 @@ async function processDirectivesInternal(template, context, filePath, options, d
     output = output.replace(/@(?:layout|extends)\(\s*['"]([^'"]+)['"]\s*\)/g, "");
   }
   if (!layoutPath && !hasNoLayout && opts.defaultLayout) {
-    const hasDoctype = /<!DOCTYPE\s/i.test(output), hasSections = /@section\s*\(/.test(output);
-    if (!hasDoctype || hasSections) {
+    const isDocument = startsDocument(output), hasSections = /@section\s*\(/.test(output);
+    if (!isDocument || hasSections) {
       let autoLayoutPath = "", searchDir = path.dirname(filePath);
       const rootDir = opts.layoutsDir ? path.dirname(opts.layoutsDir) : process.cwd();
       for (let i = 0;i < 20; i++) {
@@ -598,8 +618,8 @@ async function processOtherDirectives(template, context, filePath, options, depe
   const { processStreamDirectives } = await importOnce("stx/streaming", () => import("./streaming.js"));
   output = processStreamDirectives(output, context);
   output = processLoops(output, context, filePath, opts);
-  output = await processComponents(output, context, filePath, opts, dependencies);
   output = await processDynamicComponents(output, context, filePath, opts, dependencies);
+  output = await processComponents(output, context, filePath, opts, dependencies);
   output = processAnimationDirectives(output, context, filePath, opts);
   const { processDeferDirectives } = await importOnce("stx/defer", () => import("./defer.js"));
   output = processDeferDirectives(output, context, filePath);
@@ -735,7 +755,7 @@ ${snippet}
   }
   const hasClientScripts = /<script\b(?![^>]*\bserver\b)[^>]*>[\s\S]*?<\/script>/i.test(output), hasStxUsage = /\bSTX\.\w+/.test(output), alreadyHasRuntime = /window\.STX\s*=/.test(output);
   if (hasClientScripts && hasStxUsage && !alreadyHasRuntime) {
-    const runtimeScript = `<script data-stx-scoped>
+    const runtimeScript = `<script data-stx-scoped data-stx-run="once">
 ${generateLifecycleRuntime()}
 </script>`;
     if (output.includes("</head>")) {
@@ -785,12 +805,26 @@ ${runtimeScript}`);
   for (const { match, attrs, content } of clientScriptMatches) {
     clientScriptsTransformed = !0;
     let processedContent = content;
-    validateClientScript(content, filePath, options.strict);
+    validateClientScript(content, filePath, options.strict, context.__originalFilePath);
     const scriptResult = await processClientScript(content, { eventBindings, attrs, hasColonDirectives, templateContent: template, filePath, projectRoot: process.cwd(), production: options.buildMode === "compile", serverData });
     output = output.replace(match, () => scriptResult);
   }
   if (clientScriptsTransformed)
     context.__stx_event_bindings = [];
+  if (!clientScriptsTransformed && context.__stxProcessingDepth === 1) {
+    const orphaned = context.__stx_event_bindings || [];
+    if (orphaned.length > 0) {
+      const script = generateRuntimeScript(orphaned);
+      if (script) {
+        const bodyIdx = output.lastIndexOf("</body>");
+        output = bodyIdx === -1 ? output + script : output.slice(0, bodyIdx) + script + `
+` + output.slice(bodyIdx);
+      }
+      context.__stx_event_bindings = [];
+    }
+  }
+  if (!pageShipsSignalsRuntime(output) && outputNeedsSignalsRuntime(output))
+    output = await injectSignalsRuntime(output, opts);
   if (opts.csp?.enabled && opts.csp.useNonce && typeof context.cspNonce === "string")
     output = addNonceToInlineContent(output, context.cspNonce);
   return output;

package/dist/production-builder.js

@@ -5,7 +5,7 @@ import { buildRuntimeAsset, buildRouterAsset } from "./build-assets.js";
 import { compileTemplate } from "./template-compiler.js";
 import { generateManifest, writeManifest } from "./manifest.js";
 import { injectColorModeBootScript } from "./color-mode-boot.js";
-import { ensureDocumentShell } from "./document-shell.js";
+import { applyHtmlAttrs, ensureDocumentShell } from "./document-shell.js";
 import { extractContainerContent } from "./app-shell.js";
 import { injectCrosswindCSS } from "./dev-server/crosswind.js";
 import { loadStxConfig } from "./config.js";
@@ -88,6 +88,8 @@ export async function buildForProduction(options = {}) {
       });
       if (colorModeConfig)
         compiled.html = injectColorModeBootScript(compiled.html, colorModeConfig);
+      if (headConfigDefault.htmlAttrs)
+        compiled.html = applyHtmlAttrs(compiled.html, headConfigDefault.htmlAttrs);
       if (!/<body[^>]*\bdata-stx=/.test(compiled.html)) {
         const dataStxMatch = compiled.html.match(/<(?!body\b)[a-zA-Z][a-zA-Z0-9-]*\b[^>]*?\s(data-stx="[^"]+")[^>]*>/);
         if (dataStxMatch && dataStxMatch[1]) {

package/dist/production-server.js

@@ -4,6 +4,7 @@ import { serve } from "bun";
 import { loadManifest } from "./manifest.js";
 import { hydrateTemplateStream, hydrateFragment } from "./template-hydrator.js";
 import { extractLayoutMetadata } from "./app-shell.js";
+import { pageShipsSignalsRuntime } from "./runtime-injection.js";
 import { patternToRegex } from "stx-router";
 const MIME_TYPES = {
   ".js": "application/javascript",
@@ -41,12 +42,13 @@ export async function startProductionServer(options = {}) {
     process.exit(1);
   }
   console.log(`[stx] Production server loading ${manifest.routes.length} routes...`);
-  const compiledTemplates = new Map, fragmentCache = new Map, layoutMetadataCache = new Map;
+  const compiledTemplates = new Map, fragmentCache = new Map, layoutMetadataCache = new Map, runtimeCache = new Map;
   for (const route of manifest.routes)
     try {
       const compiledPath = path.join(outputDir, route.compiledPath), compiled = JSON.parse(await Bun.file(compiledPath).text());
       compiledTemplates.set(route.pattern, compiled);
       layoutMetadataCache.set(route.pattern, extractLayoutMetadata(compiled.html));
+      runtimeCache.set(route.pattern, pageShipsSignalsRuntime(compiled.html));
       const fragmentPath = path.join(outputDir, route.fragmentPath);
       if (await Bun.file(fragmentPath).exists())
         fragmentCache.set(route.pattern, await Bun.file(fragmentPath).text());
@@ -129,6 +131,7 @@ export async function startProductionServer(options = {}) {
             headers: {
               "Content-Type": "text/html",
               "X-STX-Fragment": "true",
+              ...runtimeCache.has(matchedRoute.pattern) ? { "X-STX-Runtime": runtimeCache.get(matchedRoute.pattern) ? "true" : "false" } : {},
               ...layoutMetadata ? {
                 "X-STX-Layout": layoutMetadata.layout,
                 "X-STX-Layout-Group": layoutMetadata.group

package/dist/prop-sentinels.d.ts

@@ -0,0 +1,31 @@
+/** Is this value the bare-boolean-attribute marker? */
+export declare function isBooleanAttributeSentinel(value: unknown): boolean;
+/**
+ * Last-resort guard for anything about to be written into a response.
+ *
+ * Nothing should reach output carrying a NUL, but the cost of one escaping is
+ * an invalid document and a silent grep, which is far worse than the cost of
+ * this check.
+ */
+export declare function stripControlChars(value: string): string;
+/**
+ * Sentinel values used while resolving component props.
+ *
+ * A leaf module on purpose: `component-renderer.ts` imports `./builtins`, so a
+ * builtin importing the renderer back would be a cycle. Both sides import this
+ * instead.
+ *
+ * @module prop-sentinels
+ */
+/**
+ * Marks a prop that was written as a bare HTML boolean attribute — `<X open>`
+ * rather than `<X open="true">`.
+ *
+ * It carries a leading NUL precisely so it cannot collide with an author-written
+ * value, which also means it must never survive into a response: a NUL byte
+ * makes the document invalid UTF-8, and tools treat the file as binary. `grep`
+ * in particular goes SILENT on it — not zero matches, no output at all — so a
+ * verification step that greps rendered HTML returns an empty string and reads
+ * as a pass (stacksjs/stx#1816).
+ */
+export declare const BOOLEAN_ATTRIBUTE_SENTINEL: '\0stx-boolean-attribute';

package/dist/prop-sentinels.js

@@ -0,0 +1,7 @@
+export const BOOLEAN_ATTRIBUTE_SENTINEL = "\x00stx-boolean-attribute";
+export function isBooleanAttributeSentinel(value) {
+  return value === BOOLEAN_ATTRIBUTE_SENTINEL;
+}
+export function stripControlChars(value) {
+  return value.indexOf("\x00") === -1 ? value : value.replace(/\0/g, "");
+}