@stacksjs/stx 0.2.175 → 0.2.177

package/dist/reactive.js

@@ -585,8 +585,8 @@ function finalizeTemplate(template, scopes) {
   });
   output = output.replace(/\s*x-data\s*=\s*"([^"]*)"/g, ' data-stx-xdata="$1"');
   output = output.replace(/\s*x-data\s*=\s*'([^']*)'/g, " data-stx-xdata='$1'");
-  output = output.replace(/\s*x-init\s*=\s*"[^"]*"/g, "");
-  output = output.replace(/\s*x-init\s*=\s*'[^']*'/g, "");
+  output = output.replace(/\s*x-init\s*=\s*"([^"]*)"/g, ' data-stx-xinit="$1"');
+  output = output.replace(/\s*x-init\s*=\s*'([^']*)'/g, " data-stx-xinit='$1'");
   return output;
 }
 export function hasReactiveDirectives(template) {

package/dist/resolve-stx-targets.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Resolve whatever a user typed — a directory, a file, or a glob — to `.stx` files.
+ *
+ * The CLI commands disagreed about which of those they took, and each was silent
+ * about the shape it did not accept. `stx a11y` joined its argument into a scan
+ * pattern (`path.join(arg, '**' + '/*.stx')`), so a FILE path became
+ * `file.stx/**` + `/*.stx` and matched nothing, and a glob became
+ * `'x/**' + '/*.stx/**' + '/*.stx'` and also matched nothing. Both then took the
+ * empty branch, which printed
+ *
+ *     ✓ No accessibility issues found!
+ *
+ * and exited 0 — on a file with three SERIOUS findings. Meanwhile `typecheck`
+ * globbed and, handed a directory, said it matched nothing. Both halves
+ * inverted, and inverted silently in the direction that costs you: the natural
+ * way to add a checker to CI is to copy the line that already works, so
+ *
+ *     - run: stx a11y 'resources/**' + '/*.stx'
+ *
+ * passes on every commit for the life of the project, indistinguishable from a
+ * project with no accessibility problems (stacksjs/stx#1918).
+ *
+ * So there is one resolver and every command uses it. The separate half of that
+ * fix lives at the call sites and matters more: **an empty match set is not a
+ * pass.** A run that read no files has verified nothing, and has to say so.
+ *
+ * @module resolve-stx-targets
+ */
+/** Is this argument a glob pattern rather than a plain path? */
+export declare function looksLikeGlob(target: string): boolean;
+export interface ResolveStxTargetsOptions {
+    /** Directory to resolve relative targets against. Defaults to the cwd. */
+    cwd?: string;
+    /** Recurse into subdirectories when the target is a directory. Default true. */
+    recursive?: boolean;
+    /** Substrings that exclude a matched path. */
+    ignorePaths?: readonly string[];
+}
+/**
+ * Expand targets to absolute `.stx` file paths, de-duplicated and sorted.
+ *
+ * A named FILE is returned whether or not it ends in `.stx`: naming one is an
+ * explicit request, and silently dropping it is the failure this module exists
+ * to remove. Directories and globs are filtered to `.stx`.
+ *
+ * `node_modules` and `dist` are always excluded — a glob like `**` + `/*.stx`
+ * otherwise sweeps up every template in every installed package.
+ */
+export declare function resolveStxTargets(targets: readonly string[], options?: ResolveStxTargetsOptions): Promise<string[]>;

package/dist/resolve-stx-targets.js

@@ -0,0 +1,38 @@
+import { existsSync, statSync } from "node:fs";
+import path from "node:path";
+const GLOB_MAGIC = /[*?[\]{}]/;
+export function looksLikeGlob(target) {
+  return GLOB_MAGIC.test(target);
+}
+export async function resolveStxTargets(targets, options = {}) {
+  const cwd = options.cwd ?? process.cwd(), recursive = options.recursive !== !1, ignorePaths = options.ignorePaths ?? [], Glob = globalThis.Bun.Glob, found = new Set, accept = (file) => {
+    if (file.includes(`${path.sep}node_modules${path.sep}`) || file.includes(`${path.sep}dist${path.sep}`))
+      return;
+    if (ignorePaths.some((ignore) => ignore && file.includes(path.normalize(ignore))))
+      return;
+    found.add(file);
+  }, scan = async (pattern) => {
+    try {
+      for await (const file of new Glob(pattern).scan({ cwd, absolute: !0 }))
+        accept(file);
+    } catch {}
+  };
+  for (const target of targets) {
+    if (!target)
+      continue;
+    if (looksLikeGlob(target)) {
+      await scan(target);
+      continue;
+    }
+    const absolute = path.resolve(cwd, target);
+    if (!existsSync(absolute))
+      continue;
+    if (statSync(absolute).isDirectory()) {
+      for await (const file of new Glob(recursive ? "**/*.stx" : "*.stx").scan({ cwd: absolute, absolute: !0 }))
+        accept(file);
+      continue;
+    }
+    accept(absolute);
+  }
+  return [...found].sort();
+}

package/dist/runtime-globals.d.ts

@@ -168,6 +168,30 @@ export declare function templateHasReactiveContext(template: string): boolean;
  * signal-processing.ts would close a cycle through client-script.ts.
  */
 export declare function templateNeedsRuntime(template: string): boolean;
+/**
+ * Colon attributes that are DIRECTIVES, not attribute bindings.
+ *
+ * `:href` and `:disabled` name a real HTML attribute and can be resolved to one.
+ * `:if`, `:for` and `:text` do not — they are instructions to the conditional
+ * processor, the loop runtime and the text binder, and the element carries no
+ * attribute of that name at any point.
+ *
+ * The distinction had never been written down, so `processServerBindings`
+ * evaluated every `:name="expr"` alike. It went unnoticed because its tag regex
+ * required each attribute chunk to start with whitespace and be a single
+ * character, so it never matched a real tag with a real attribute — the pass was
+ * effectively dead. Fixing that regex (0.2.173) switched it on for everything at
+ * once, and `<p :if="error">` started rendering as `<p if="Bad creds">`: the
+ * attribute leaked into the markup AND the conditional stopped applying, so a
+ * falsy condition no longer removed the element. Same for `:show`, `:text`,
+ * `:html`, `:model` and `:key`.
+ *
+ * `:class` and `:style` are deliberately absent: they DO resolve to real
+ * attributes, and `processServerBindings` has specific handling for them.
+ */
+export declare const RUNTIME_OWNED_COLON_ATTRS: readonly string[];
+/** Is this colon attribute a directive rather than something to resolve? */
+export declare function isRuntimeOwnedColonAttr(name: string): boolean;
 /**
  * `x-` attributes the signals runtime consumes itself.
  *

package/dist/runtime-globals.js

@@ -143,6 +143,22 @@ export function templateNeedsRuntime(template) {
     return !1;
   return HAS_EVENT_HANDLER.test(blankInertHtmlRegions(template)) || templateHasReactiveContext(template);
 }
+export const RUNTIME_OWNED_COLON_ATTRS = [
+  "if",
+  "else-if",
+  "elseif",
+  "else",
+  "for",
+  "show",
+  "key",
+  "text",
+  "html",
+  "model",
+  "ref"
+];
+export function isRuntimeOwnedColonAttr(name) {
+  return RUNTIME_OWNED_COLON_ATTRS.includes(name.toLowerCase());
+}
 export const RUNTIME_HANDLED_X_ATTRS = [
   "x-text",
   "x-html",

package/dist/runtime-injection.d.ts

@@ -72,6 +72,42 @@ export declare function outputNeedsSignalsRuntime(html: string): boolean;
  * The runtime provides client-side reactivity.
  */
 export declare function injectSignalsRuntime(template: string, options: StxOptions): Promise<string>;
+/**
+ * Whether the finished page has an element carrying `x-tooltip`.
+ *
+ * Asked of the OUTPUT rather than the source, for the reason
+ * `outputNeedsSignalsRuntime` is: both the attribute and every rewrite that
+ * could have produced it have happened by then, so no processing order can hide
+ * the answer.
+ *
+ * Anchored on `<` … so the name has to sit inside a tag: documentation prose
+ * that merely names the attribute does not pull a runtime onto the page. The
+ * attribute value is allowed to contain `>` — a tooltip reading `a > b` is
+ * ordinary — so the scan walks to the quote rather than to the first `>`.
+ */
+export declare function outputNeedsTooltipRuntime(html: string): boolean;
+/**
+ * Ship the `x-tooltip` runtime on any page that uses the attribute.
+ *
+ * `getTooltipRuntime()` was written, exported from `builtins/index.ts`, and
+ * called by nothing — two definitions and zero call sites, in stx and in
+ * `bun-plugin-stx`. `registerBuiltins()` registers ten builtins and tooltip is
+ * not one of them, so the attribute reached the DOM and nothing ever acted on
+ * it. Hovering showed the native `title` tooltip, which would have shown anyway
+ * (stacksjs/stx#1922).
+ *
+ * The dead export was not merely unused: the codemod's largest and only
+ * auto-fixable rule rewrites `title=` into `x-tooltip=`, so every consuming
+ * codebase was being pointed at an attribute that had never worked. It read as
+ * an adoption problem — `codemod.d.ts` records `x-tooltip` as "delivered and
+ * used zero times" — when the cause was that there was nothing to adopt.
+ *
+ * Not a registered builtin, because it is not a component: it is one delegated
+ * listener pair on `document`, so it costs nothing when no element matches and
+ * covers elements added later without per-element wiring. Injected only when the
+ * attribute is present, and before the CSP pass so a nonce still reaches it.
+ */
+export declare function injectTooltipRuntime(html: string): string;
 /**
  * Inject the SPA router script into the template.
  * The router is provided by the canonical router in packages/router/src/client.ts.

package/dist/runtime-injection.js

@@ -1,6 +1,7 @@
 import { getOwnedRouteMatchers } from "./owned-routes.js";
 import { toScriptJson } from "./script-json.js";
 import { findBodyOpenTag, replaceBodyOpenTag } from "./find-body-tag.js";
+import { getTooltipRuntime } from "./builtins/tooltip.js";
 export function injectBrowserRuntime(template) {
   if (template.includes("window.StacksBrowser") || template.includes("StacksBrowser ="))
     return template;
@@ -109,6 +110,19 @@ export async function injectSignalsRuntime(template, options) {
   const { getCachedSignalsRuntime } = await import("./caching.js"), runtime = await getCachedSignalsRuntime(options.debug);
   return placeRuntimeTag(template, `<script data-stx-scoped data-stx-runtime>${runtime}</script>`);
 }
+export function outputNeedsTooltipRuntime(html) {
+  return /<[a-z][^>]*?\sx-tooltip\s*=/i.test(html);
+}
+export function injectTooltipRuntime(html) {
+  if (html.includes("data-stx-tooltip-runtime") || !outputNeedsTooltipRuntime(html))
+    return html;
+  const tag = `<script data-stx-scoped data-stx-tooltip-runtime>${getTooltipRuntime()}</script>`, bodyIdx = html.lastIndexOf("</body>");
+  if (bodyIdx === -1)
+    return `${html}
+${tag}`;
+  return `${html.slice(0, bodyIdx)}${tag}
+${html.slice(bodyIdx)}`;
+}
 export async function injectRouterScript(template, options) {
   if (!template.includes("</body>"))
     return template;

package/dist/server-bindings.js

@@ -1,3 +1,4 @@
+import { isRuntimeOwnedColonAttr } from "./runtime-globals.js";
 const BOOLEAN_ATTRS = new Set([
   "disabled",
   "checked",
@@ -96,6 +97,8 @@ export function processServerBindings(template, context) {
     let attrMatch, newAttrs = attrs, hadReplacement = !1;
     while ((attrMatch = bindingRegex.exec(attrs)) !== null) {
       const attrName = attrMatch[1], expression = attrMatch[2];
+      if (isRuntimeOwnedColonAttr(attrName))
+        continue;
       if (expression.includes("()") && !expression.includes(".get(") || expression.includes("$store") || expression.includes("$ref"))
         continue;
       try {

package/dist/signal-processing.js

@@ -90,6 +90,30 @@ function extractClientSignalNames(template) {
   }
   return names;
 }
+function collectClientLoopScopes(template) {
+  if (!/[:@]for\s*=/.test(template) && !/\bx-for\s*=/.test(template))
+    return [];
+  const openingTag = new RegExp(`<([a-zA-Z][\\w-]*)\\b(${TAG_ATTR_RUN})>`, "iy"), loopAttr = /(?:^|\s)(?::for|@for|x-for)\s*=\s*(?:"([^"]*)"|'([^']*)')/i, starts = scanAtElementPosition(template, (html, index) => {
+    openingTag.lastIndex = index;
+    const match = openingTag.exec(html);
+    if (!match || match.index !== index || !loopAttr.test(match[2]))
+      return -1;
+    return openingTag.lastIndex;
+  }), scopes = [];
+  for (const start of starts) {
+    openingTag.lastIndex = 0;
+    const match = openingTag.exec(start.token);
+    if (!match)
+      continue;
+    const attrMatch = match[2].match(loopAttr), parsed = parseLoopExpression(attrMatch?.[1] ?? attrMatch?.[2] ?? ""), vars = [parsed.itemVar, parsed.indexVar].filter(Boolean);
+    if (vars.length === 0)
+      continue;
+    const tag = match[1], end = /\/\s*>$/.test(start.token) || VOID_ELEMENT_TAGS.has(tag.toLowerCase()) ? start.end : findElementEnd(template, start.start, tag, start.end);
+    if (end !== -1)
+      scopes.push({ start: start.start, end, vars: new Set(vars) });
+  }
+  return scopes;
+}
 const JS_NON_VARS = new Set([
   "true",
   "false",
@@ -132,7 +156,7 @@ const JS_NON_VARS = new Set([
 function stripExprStrings(expr) {
   return expr.replace(/'(?:\\.|[^'\\])*'/g, "''").replace(/"(?:\\.|[^"\\])*"/g, '""').replace(/`(?:\\.|[^`\\])*`/g, "``");
 }
-function conditionIsClientReactive(condition, signalNames, context) {
+function conditionIsClientReactive(condition, signalNames, context, clientLoopVars) {
   if (!condition)
     return !1;
   const expr = stripExprStrings(condition);
@@ -145,7 +169,7 @@ function conditionIsClientReactive(condition, signalNames, context) {
       continue;
     if (JS_NON_VARS.has(id))
       continue;
-    if (signalNames.has(id))
+    if (signalNames.has(id) || clientLoopVars?.has(id))
       refsSignal = !0;
     else if (context && id in context)
       refsServerVar = !0;
@@ -186,7 +210,14 @@ export function convertSignalDirectivesToAttributes(template, context) {
   const signalNames = extractClientSignalNames(template);
   function convert(input) {
     let output = input;
-    const ifDirectiveStart = /@if\s*\(/g;
+    const clientLoopScopes = collectClientLoopScopes(input), loopVarsAt = (position) => {
+      const vars = new Set;
+      for (const scope of clientLoopScopes)
+        if (position > scope.start && position < scope.end)
+          for (const name of scope.vars)
+            vars.add(name);
+      return vars;
+    }, ifDirectiveStart = /@if\s*\(/g;
     let match;
     const replacements = [];
     while ((match = ifDirectiveStart.exec(output)) !== null) {
@@ -224,8 +255,8 @@ export function convertSignalDirectivesToAttributes(template, context) {
         const parsed = findIfBlocks(output.substring(startIdx, endIdx));
         if (parsed.length === 0)
           continue;
-        const valueBranches = parsed[0].branches.filter((b) => b.type !== "else");
-        if (!(valueBranches.length > 0 && valueBranches.every((b) => conditionIsClientReactive(b.condition, signalNames, context))))
+        const valueBranches = parsed[0].branches.filter((b) => b.type !== "else"), clientLoopVars = loopVarsAt(startIdx);
+        if (!(valueBranches.length > 0 && valueBranches.every((b) => conditionIsClientReactive(b.condition, signalNames, context, clientLoopVars))))
           continue;
         replacement = parsed[0].branches.map((branch) => {
           const branchContent = convert(branch.content);
@@ -237,7 +268,7 @@ export function convertSignalDirectivesToAttributes(template, context) {
         }).join(`
 `);
       } else {
-        if (!conditionIsClientReactive(condition, signalNames, context))
+        if (!conditionIsClientReactive(condition, signalNames, context, loopVarsAt(startIdx)))
           continue;
         replacement = branchToAttrElement(convert(content), "@if", condition);
       }
@@ -801,7 +832,7 @@ export function extractExports(setupContent) {
   }, checkDeclaration = () => {
     if (depth !== 0)
       return;
-    const declMatch = code.slice(i).match(/^(const|let|var)\s+([a-zA-Z_$][a-zA-Z0-9_$]*)\s*=/);
+    const declMatch = code.slice(i).match(/^(const|let|var)\s+([a-zA-Z_$][a-zA-Z0-9_$]*)\s*(?:[!:;,\n]|=(?!=)|$)/);
     if (declMatch) {
       const varName = declMatch[2];
       if (!seen.has(varName)) {