@stacksjs/stx 0.2.171 → 0.2.173

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",
@@ -93,9 +108,9 @@ function declaresOwnConfirm(source) {
 function applyConfirmRule(source, file, findings) {
   if (declaresOwnConfirm(source))
     return source;
-  const pattern = /(^|[^\w$.])confirm\s*\(/g;
+  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;
@@ -110,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,
@@ -137,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;
@@ -145,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({
@@ -168,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) {