@stacksjs/stx 0.2.170 → 0.2.172

package/dist/client-script-bundler.js

@@ -30,7 +30,8 @@ export function resolveBundlerFallback() {
   if (_fallbackOverride)
     return _fallbackOverride;
   try {
-    return config.strict?.bundlerFallback ?? "warn";
+    const strict = config.strict;
+    return typeof strict === "object" && strict !== null ? strict.bundlerFallback ?? "warn" : "warn";
   } catch {
     return "warn";
   }

package/dist/client-script.d.ts

@@ -32,6 +32,7 @@
  * @module client-script
  */
 import type { ParsedEvent } from './events';
+export { findInterpolationEnd, stripCommentsAndLiterals } from './strip-literals';
 export interface VendorCssImport {
     /** The original specifier as written in the import — kept verbatim for the data attribute. */
     source: string;
@@ -117,18 +118,6 @@ export interface BrowserCoreAutoImportResult {
  * helpers together with the component, exactly like an explicit user import.
  */
 export declare function injectBrowserCoreAutoImports(code: string): BrowserCoreAutoImportResult;
-/**
- * Blank out comments and string literals, preserving length and line structure
- * so offsets still line up, so that identifier detection only ever sees code.
- *
- * Template-literal INTERPOLATIONS are kept, because `${...}` is code, not text.
- * Blanking them hid every identifier that appears only inside one — a helper
- * called as `${formatDate(d)}` looked unused to the auto-import scanner, and a
- * server value read as `` `/api/users/${userId}` `` looked unreferenced to the
- * data bridge, which would have withheld it and left the client throwing on an
- * undefined name.
- */
-export declare function stripCommentsAndLiterals(code: string): string;
 export interface ClientScriptOptions {
     /** Event bindings collected from template @event attributes */
     eventBindings?: ParsedEvent[];

package/dist/client-script.js

@@ -2,6 +2,8 @@ import path from "node:path";
 import fs from "node:fs";
 import { asInvocableStatement } from "./events.js";
 import { transformStoreImports } from "./store-imports.js";
+import { findInterpolationEnd, stripCommentsAndLiterals } from "./strip-literals.js";
+export { findInterpolationEnd, stripCommentsAndLiterals } from "./strip-literals.js";
 import { shouldTranspileTypeScript, transpileTypeScript } from "./utils.js";
 import { importOnce } from "./lazy-module.js";
 import { STX_RUNTIME_GLOBALS, usesReactiveRuntime } from "./runtime-globals.js";
@@ -263,155 +265,6 @@ const JS_BUILTINS = new Set([
   "Modal",
   "Intl"
 ]);
-function skipQuoted(code, start) {
-  const quote = code[start];
-  let i = start + 1;
-  while (i < code.length) {
-    if (code[i] === "\\") {
-      i += 2;
-      continue;
-    }
-    if (code[i] === quote)
-      return i + 1;
-    i++;
-  }
-  return code.length;
-}
-function skipTemplate(code, start) {
-  let i = start + 1;
-  while (i < code.length) {
-    if (code[i] === "\\") {
-      i += 2;
-      continue;
-    }
-    if (code[i] === "`")
-      return i + 1;
-    if (code[i] === "$" && code[i + 1] === "{") {
-      i = findInterpolationEnd(code, i + 2);
-      if (i < code.length)
-        i++;
-      continue;
-    }
-    i++;
-  }
-  return code.length;
-}
-function findInterpolationEnd(code, start) {
-  let depth = 1, i = start;
-  while (i < code.length) {
-    const ch = code[i];
-    if (ch === "\\") {
-      i += 2;
-      continue;
-    }
-    if (ch === '"' || ch === "'") {
-      i = skipQuoted(code, i);
-      continue;
-    }
-    if (ch === "`") {
-      i = skipTemplate(code, i);
-      continue;
-    }
-    if (ch === "/" && code[i + 1] === "/") {
-      while (i < code.length && code[i] !== `
-`)
-        i++;
-      continue;
-    }
-    if (ch === "/" && code[i + 1] === "*") {
-      i += 2;
-      while (i < code.length && code.slice(i, i + 2) !== "*/")
-        i++;
-      i += 2;
-      continue;
-    }
-    if (ch === "{") {
-      depth++;
-      i++;
-      continue;
-    }
-    if (ch === "}") {
-      depth--;
-      if (depth === 0)
-        return i;
-      i++;
-      continue;
-    }
-    i++;
-  }
-  return code.length;
-}
-export function stripCommentsAndLiterals(code) {
-  let out = "", i = 0;
-  while (i < code.length) {
-    const two = code.slice(i, i + 2);
-    if (two === "//") {
-      while (i < code.length && code[i] !== `
-`)
-        out += " ", i++;
-      continue;
-    }
-    if (two === "/*") {
-      while (i < code.length && code.slice(i, i + 2) !== "*/")
-        out += code[i] === `
-` ? `
-` : " ", i++;
-      out += "  ";
-      i += 2;
-      continue;
-    }
-    const ch = code[i];
-    if (ch === '"' || ch === "'") {
-      const quote = ch;
-      out += " ";
-      i++;
-      while (i < code.length && code[i] !== quote) {
-        if (code[i] === "\\") {
-          out += "  ";
-          i += 2;
-          continue;
-        }
-        out += code[i] === `
-` ? `
-` : " ";
-        i++;
-      }
-      out += " ";
-      i++;
-      continue;
-    }
-    if (ch === "`") {
-      out += " ";
-      i++;
-      while (i < code.length && code[i] !== "`") {
-        if (code[i] === "\\") {
-          out += "  ";
-          i += 2;
-          continue;
-        }
-        if (code[i] === "$" && code[i + 1] === "{") {
-          const bodyStart = i + 2, bodyEnd = findInterpolationEnd(code, bodyStart);
-          out += "  ";
-          out += stripCommentsAndLiterals(code.slice(bodyStart, bodyEnd));
-          if (bodyEnd < code.length)
-            out += " ";
-          i = bodyEnd + 1;
-          continue;
-        }
-        out += code[i] === `
-` ? `
-` : " ";
-        i++;
-      }
-      out += " ";
-      i++;
-      continue;
-    }
-    out += ch;
-    i++;
-  }
-  return out;
-}
 function detectModelUsage(code) {
   const models = new Set, 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;
   let match;

package/dist/codemod.d.ts

@@ -18,31 +18,8 @@ export declare interface CodemodOptions {
   rules?: CodemodRule[]
   file?: string
 }
-/**
- * Codemods for adopting stx primitives an app hand-rolled around (#1843).
- *
- * Two production apps built on stx reached past it into vanilla JS for things
- * it already ships. The audit found the cause was discovery, not absence: one
- * app called bare `confirm()` in five places and used `title=` thirteen times
- * while `stxConfirm` and `x-tooltip` were both delivered and used zero times.
- * A native fallback that WORKS is the hardest kind of gap to notice — nothing
- * fails, so nothing prompts you to look.
- *
- * #1843 proposes both rewrites as "mechanical and safe". Neither is, and the
- * difference matters enough that this tool reports by default and only edits
- * when asked:
- *
- *   - `confirm()` returns a boolean synchronously; `stxConfirm()` returns a
- *     Promise. `if (confirm(m))` rewritten to `if (stxConfirm(m))` is ALWAYS
- *     TRUE, because a Promise is truthy. A blind rewrite turns every "Delete
- *     this?" into an unconditional yes.
- *
- *   - `title=` is announced by screen readers. `x-tooltip` sets no `role` and
- *     no `aria-*` — it is a visual tooltip driven by mouseover/focusin.
- *     Replacing one with the other removes the accessible description. So the
- *     tooltip rule ADDS `x-tooltip` and keeps `title`.
- */
 export type CodemodRule = | 'confirm'
+    | 'alert'
     | 'tooltip'
     | 'route-params'
     | 'search-params'

package/dist/codemod.js

@@ -1,3 +1,4 @@
+import { stripCommentsAndLiterals } from "./strip-literals.js";
 function contextAfter(source, index, length = 240) {
   return source.slice(index, index + length);
 }
@@ -8,11 +9,25 @@ const REPORT_RULES = [
     primitive: "useRoute() / useRouteParams() / useRouteParam(name)",
     why: "parsing the URL by hand re-implements the router and does not update on SPA navigation"
   },
+  {
+    rule: "alert",
+    pattern: /(?<![.#\w$])(?:(?:window|globalThis)\s*\.\s*)?alert\s*\(/g,
+    primitive: "stxAlert(message)",
+    why: "themed, focus-trapped and non-blocking \u2014 but `await` it if the code after it " + "depended on the native dialog blocking until dismissal",
+    reject: (source) => /\b(?:async\s+)?function\s+alert\s*\(/.test(source) || /\b(?:const|let|var)\s+alert\s*=/.test(source)
+  },
   {
     rule: "search-params",
     pattern: /new\s+URLSearchParams\s*\(/g,
     primitive: "useSearchParams()",
-    why: "reactive, and writes back through the router instead of history.replaceState"
+    why: "reactive, and writes back through the router instead of history.replaceState",
+    reject: (source, index) => {
+      const open = source.indexOf("(", index);
+      if (open === -1)
+        return !0;
+      const arg = source.slice(open + 1, source.indexOf(")", open) + 1);
+      return !/\b(?:location|search|href|url)\b/i.test(arg);
+    }
   },
   {
     rule: "navigate",
@@ -87,10 +102,15 @@ function isInsideAsyncFunction(source, index) {
   const window = source.slice(Math.max(0, boundary - 120), boundary);
   return /\basync\b[^;{}]*$/.test(window);
 }
+function declaresOwnConfirm(source) {
+  return /\b(?:async\s+)?function\s+confirm\s*\(/.test(source) || /\b(?:const|let|var)\s+confirm\s*=/.test(source) || /\bimport\s*\{[^}]*\bconfirm\b[^}]*\}/.test(source);
+}
 function applyConfirmRule(source, file, findings) {
-  const pattern = /(^|[^\w$.])confirm\s*\(/g;
+  if (declaresOwnConfirm(source))
+    return source;
+  const pattern = /(^|[^\w$.])(?:(?:window|globalThis)\s*\.\s*)?confirm\s*\(/g, searchable = searchableSource(source);
   let out = "", last = 0, match;
-  while ((match = pattern.exec(source)) !== null) {
+  while ((match = pattern.exec(searchable)) !== null) {
     const callAt = match.index + match[1].length, line = lineOf(source, callAt), snippet = snippetAt(source, callAt);
     if (/stxConfirm\s*\($/.test(source.slice(0, callAt + 8)))
       continue;
@@ -105,16 +125,27 @@ function applyConfirmRule(source, file, findings) {
     });
     if (safe) {
       out += source.slice(last, callAt) + "await stxConfirm(";
-      last = callAt + 8;
+      last = callAt + (match[0].length - match[1].length);
     }
   }
   return out + source.slice(last);
 }
 function applyTooltipRule(source, file, findings) {
-  const pattern = /(<[a-z][\w-]*\b[^>]*?)\stitle=(["'])(.*?)\2/gis;
+  const pattern = /(<[a-z][\w-]*\b[^>]*?)\stitle=(["'])(.*?)\2/gis, searchable = markupSearchable(source);
   let out = "", last = 0, match;
-  while ((match = pattern.exec(source)) !== null) {
-    const [whole, openTag, quote, value] = match, line = lineOf(source, match.index), snippet = snippetAt(source, match.index);
+  while ((match = pattern.exec(searchable)) !== null) {
+    const [whole, openTag, quote, value] = match, line = lineOf(source, match.index), snippet = snippetAt(source, match.index), tagName = openTag.match(/^<([A-Za-z][\w-]*)/)?.[1] ?? "";
+    if (/^[A-Z]/.test(tagName)) {
+      findings.push({
+        file,
+        line,
+        rule: "tooltip",
+        applied: !1,
+        snippet,
+        reason: `\`title\` on <${tagName}> is a component prop, not an HTML attribute \u2014 ` + "adding x-tooltip here would put a tooltip on a component and may duplicate text it already renders."
+      });
+      continue;
+    }
     if (/\bx-tooltip[=\s]/.test(openTag) || value.trim() === "") {
       findings.push({
         file,
@@ -132,7 +163,19 @@ function applyTooltipRule(source, file, findings) {
   }
   return out + source.slice(last);
 }
+function markupSearchable(source) {
+  return source.replace(/<!--[\s\S]*?-->/g, (match) => match.replace(/[^\n]/g, " ")).replace(/\{\{--[\s\S]*?--\}\}/g, (match) => match.replace(/[^\n]/g, " "));
+}
+function blankJsComments(source) {
+  const blank = (match) => match.replace(/[^\n]/g, " ");
+  return source.replace(/\/\*[\s\S]*?\*\//g, blank).replace(/\/\/[^\n]*/g, blank);
+}
+function searchableSource(source, keepStrings = !1) {
+  const markupOnly = markupSearchable(source);
+  return (keepStrings ? blankJsComments(markupOnly) : stripCommentsAndLiterals(markupOnly)).replace(/<script\b([^>]*)>([\s\S]*?)<\/script\s*>/gi, (match, attrs) => /\bclient\b/i.test(attrs) ? match : match.replace(/[^\n]/g, " "));
+}
 function applyReportRules(source, file, rules, findings) {
+  const codeView = searchableSource(source), stringView = searchableSource(source, !0);
   for (const entry of REPORT_RULES) {
     if (!rules.includes(entry.rule))
       continue;
@@ -140,7 +183,9 @@ function applyReportRules(source, file, rules, findings) {
       continue;
     entry.pattern.lastIndex = 0;
     let match;
-    while ((match = entry.pattern.exec(source)) !== null) {
+    const searchable = /['"]/.test(entry.pattern.source) ? stringView : codeView;
+    entry.pattern.lastIndex = 0;
+    while ((match = entry.pattern.exec(searchable)) !== null) {
       if (entry.reject?.(source, match.index))
         continue;
       findings.push({
@@ -163,7 +208,14 @@ export function codemodSource(source, options = {}) {
   if (rules.includes("tooltip"))
     code = applyTooltipRule(code, file, findings);
   findings.sort((a, b) => a.line - b.line);
-  return { code, findings };
+  const seen = new Set, unique = findings.filter((finding) => {
+    const key = `${finding.rule}:${finding.line}`;
+    if (seen.has(key))
+      return !1;
+    seen.add(key);
+    return !0;
+  });
+  return { code, findings: unique };
 }
 const REWRITABLE = new Set(["confirm", "tooltip"]);
 export function formatCodemodFindings(findings, wrote) {

package/dist/compression.d.ts

@@ -3,10 +3,17 @@ export declare function isCompressible(contentType: string | null): boolean;
 /**
  * The best encoding both sides support, or `null` for none.
  *
- * Deliberately ignores the q-values in `Accept-Encoding`. Honouring them means
- * parsing a header that is, in practice, one of about four fixed strings every
- * real browser sends, all of which accept both encodings; the only clients
- * that weight them are testing tools.
+ * This used to be `accepted.includes('br')` on the raw header, on the argument
+ * that q-values are only ever sent by testing tools. The substring is the
+ * problem: `br;q=0` contains `br`, and it is the one string in the header that
+ * means *do not send me brotli*. Answering that with a brotli body is not a
+ * missed optimisation, it is a response the client cannot read — the failure
+ * this function's `Vary` sibling exists to prevent, arrived at from the other
+ * direction.
+ *
+ * Brotli is still preferred when both are genuinely on offer: ~20% smaller
+ * than gzip on HTML at comparable cost, and every browser without it predates
+ * 2017.
  */
 export declare function negotiateEncoding(acceptEncoding: string | null): 'br' | 'gzip' | null;
 /**

package/dist/compression.js

@@ -1,5 +1,6 @@
 import zlib from "node:zlib";
-const COMPRESSIBLE = [
+import { promisify } from "node:util";
+const brotliCompress = promisify(zlib.brotliCompress), gzipCompress = promisify(zlib.gzip), COMPRESSIBLE = [
   "text/",
   "application/json",
   "application/javascript",
@@ -21,13 +22,32 @@ export function isCompressible(contentType) {
     return !1;
   return COMPRESSIBLE.some((prefix) => type.startsWith(prefix));
 }
+function parseAcceptEncoding(header) {
+  const weights = new Map;
+  for (const part of header.split(",")) {
+    const [rawName, ...params] = part.trim().split(";"), name = rawName.trim().toLowerCase();
+    if (!name)
+      continue;
+    let quality = 1;
+    for (const param of params) {
+      const match = /^\s*q\s*=\s*([\d.]+)\s*$/i.exec(param);
+      if (!match)
+        continue;
+      const parsed = Number.parseFloat(match[1]);
+      if (Number.isFinite(parsed))
+        quality = parsed;
+    }
+    weights.set(name, quality);
+  }
+  return weights;
+}
 export function negotiateEncoding(acceptEncoding) {
   if (!acceptEncoding)
     return null;
-  const accepted = acceptEncoding.toLowerCase();
-  if (accepted.includes("br"))
+  const weights = parseAcceptEncoding(acceptEncoding), wildcard = weights.get("*"), quality = (coding) => weights.get(coding) ?? wildcard ?? 0;
+  if (quality("br") > 0)
     return "br";
-  if (accepted.includes("gzip"))
+  if (quality("gzip") > 0)
     return "gzip";
   return null;
 }
@@ -41,28 +61,47 @@ export async function compressResponse(request, response, options = {}) {
   const encoding = negotiateEncoding(request.headers.get("accept-encoding"));
   if (!encoding)
     return response;
+  let body;
   try {
-    const body = Buffer.from(await response.clone().arrayBuffer());
-    if (body.length < (options.threshold ?? MIN_BYTES))
-      return response;
-    const compressed = encoding === "br" ? zlib.brotliCompressSync(body, {
+    body = new Uint8Array(await response.arrayBuffer());
+  } catch {
+    return response;
+  }
+  const passthrough = () => new Response(body, {
+    status: response.status,
+    statusText: response.statusText,
+    headers: varyByAcceptEncoding(response.headers)
+  });
+  if (body.length < (options.threshold ?? MIN_BYTES))
+    return passthrough();
+  try {
+    const compressed = encoding === "br" ? await brotliCompress(body, {
       params: {
         [zlib.constants.BROTLI_PARAM_QUALITY]: options.quality ?? 5,
         [zlib.constants.BROTLI_PARAM_SIZE_HINT]: body.length
       }
-    }) : zlib.gzipSync(body);
+    }) : await gzipCompress(body);
     if (compressed.length >= body.length)
-      return response;
-    const headers = new Headers(response.headers);
+      return passthrough();
+    const headers = varyByAcceptEncoding(response.headers);
     headers.set("Content-Encoding", encoding);
     headers.set("Content-Length", String(compressed.length));
-    headers.append("Vary", "Accept-Encoding");
     return new Response(compressed, {
       status: response.status,
       statusText: response.statusText,
       headers
     });
   } catch {
-    return response;
+    return passthrough();
+  }
+}
+function varyByAcceptEncoding(source) {
+  const headers = new Headers(source), existing = headers.get("Vary");
+  if (!existing) {
+    headers.set("Vary", "Accept-Encoding");
+    return headers;
   }
+  if (!existing.split(",").some((field) => field.trim().toLowerCase() === "accept-encoding"))
+    headers.set("Vary", `${existing}, Accept-Encoding`);
+  return headers;
 }