npm - @decocms/blocks-cli - Versions diffs - 7.0.0 - Mend

@decocms/blocks-cli 7.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (93) hide show

package/package.json +44 -0
package/scripts/analyze-traces.mjs +1117 -0
package/scripts/audit-observability-config.test.ts +446 -0
package/scripts/audit-observability-config.ts +511 -0
package/scripts/deco-migrate-cli.ts +444 -0
package/scripts/fast-deploy-kv.test.ts +131 -0
package/scripts/generate-blocks.test.ts +94 -0
package/scripts/generate-blocks.ts +274 -0
package/scripts/generate-invoke.test.ts +195 -0
package/scripts/generate-invoke.ts +469 -0
package/scripts/generate-loaders.ts +217 -0
package/scripts/generate-schema.ts +1287 -0
package/scripts/generate-sections.ts +237 -0
package/scripts/htmx-analyze.ts +226 -0
package/scripts/lib/blocks-dedupe.test.ts +179 -0
package/scripts/lib/blocks-dedupe.ts +142 -0
package/scripts/lib/cf-kv-rest.ts +78 -0
package/scripts/lib/jsonc.ts +122 -0
package/scripts/lib/kv-snapshot.ts +51 -0
package/scripts/lib/read-decofile.ts +70 -0
package/scripts/lib/sync-helpers.ts +44 -0
package/scripts/migrate/analyzers/htmx-analyze.test.ts +372 -0
package/scripts/migrate/analyzers/htmx-analyze.ts +425 -0
package/scripts/migrate/analyzers/island-classifier.ts +96 -0
package/scripts/migrate/analyzers/loader-inventory.ts +63 -0
package/scripts/migrate/analyzers/section-metadata.ts +147 -0
package/scripts/migrate/analyzers/theme-extractor.ts +122 -0
package/scripts/migrate/colors.ts +46 -0
package/scripts/migrate/config.test.ts +202 -0
package/scripts/migrate/config.ts +186 -0
package/scripts/migrate/phase-analyze.test.ts +63 -0
package/scripts/migrate/phase-analyze.ts +782 -0
package/scripts/migrate/phase-cleanup-audit.test.ts +137 -0
package/scripts/migrate/phase-cleanup-audit.ts +105 -0
package/scripts/migrate/phase-cleanup.test.ts +141 -0
package/scripts/migrate/phase-cleanup.ts +1588 -0
package/scripts/migrate/phase-compile.test.ts +193 -0
package/scripts/migrate/phase-compile.ts +177 -0
package/scripts/migrate/phase-report.ts +243 -0
package/scripts/migrate/phase-scaffold.ts +593 -0
package/scripts/migrate/phase-transform.ts +310 -0
package/scripts/migrate/phase-verify.test.ts +127 -0
package/scripts/migrate/phase-verify.ts +572 -0
package/scripts/migrate/post-cleanup/rules.ts +1708 -0
package/scripts/migrate/post-cleanup/runner.test.ts +1771 -0
package/scripts/migrate/post-cleanup/runner.ts +137 -0
package/scripts/migrate/post-cleanup/shim-classify.test.ts +352 -0
package/scripts/migrate/post-cleanup/shim-classify.ts +246 -0
package/scripts/migrate/post-cleanup/types.ts +106 -0
package/scripts/migrate/source-layout.test.ts +111 -0
package/scripts/migrate/source-layout.ts +103 -0
package/scripts/migrate/templates/app-css.ts +366 -0
package/scripts/migrate/templates/cache-config.ts +26 -0
package/scripts/migrate/templates/commerce-loaders.ts +230 -0
package/scripts/migrate/templates/cursor-rules.test.ts +59 -0
package/scripts/migrate/templates/cursor-rules.ts +70 -0
package/scripts/migrate/templates/hooks.test.ts +141 -0
package/scripts/migrate/templates/hooks.ts +152 -0
package/scripts/migrate/templates/knip-config.ts +27 -0
package/scripts/migrate/templates/lib-utils.test.ts +139 -0
package/scripts/migrate/templates/lib-utils.ts +326 -0
package/scripts/migrate/templates/lockfile-check-yml.test.ts +26 -0
package/scripts/migrate/templates/lockfile-check-yml.ts +66 -0
package/scripts/migrate/templates/package-json.ts +177 -0
package/scripts/migrate/templates/routes.ts +237 -0
package/scripts/migrate/templates/sdk-gen.ts +59 -0
package/scripts/migrate/templates/section-loaders.ts +456 -0
package/scripts/migrate/templates/server-entry.ts +561 -0
package/scripts/migrate/templates/setup.ts +148 -0
package/scripts/migrate/templates/tsconfig.ts +21 -0
package/scripts/migrate/templates/types-gen.ts +174 -0
package/scripts/migrate/templates/ui-components.ts +144 -0
package/scripts/migrate/templates/vite-config.ts +101 -0
package/scripts/migrate/transforms/dead-code.ts +455 -0
package/scripts/migrate/transforms/deno-isms.ts +85 -0
package/scripts/migrate/transforms/fresh-apis.ts +223 -0
package/scripts/migrate/transforms/htmx-on-events.test.ts +305 -0
package/scripts/migrate/transforms/htmx-on-events.ts +193 -0
package/scripts/migrate/transforms/imports.ts +385 -0
package/scripts/migrate/transforms/jsx.ts +317 -0
package/scripts/migrate/transforms/section-conventions.ts +210 -0
package/scripts/migrate/transforms/tailwind.ts +739 -0
package/scripts/migrate/types.ts +244 -0
package/scripts/migrate-blocks-to-kv.ts +104 -0
package/scripts/migrate-post-cleanup.ts +191 -0
package/scripts/migrate-to-cf-observability.test.ts +215 -0
package/scripts/migrate-to-cf-observability.ts +699 -0
package/scripts/migrate.ts +282 -0
package/scripts/smoke-otlp-errorlog.ts +46 -0
package/scripts/smoke-otlp-meter.ts +48 -0
package/scripts/sync-blocks-to-kv.ts +153 -0
package/scripts/tailwind-lint.ts +518 -0
package/tsconfig.json +7 -0

package/scripts/migrate/transforms/fresh-apis.ts ADDED Viewed

@@ -0,0 +1,223 @@
+import type { TransformResult } from "../types";
+/**
+ * Fix JSX after scriptAsDataURI → useScript replacement.
+ *
+ * Transforms patterns like:
+ *   <script dangerouslySetInnerHTML={{ __html: useScript(fn, { ...props, x })}
+ *     defer
+ *   />
+ * Into:
+ *   <script dangerouslySetInnerHTML={{ __html: useScript(fn, { ...props, x }) }}
+ *   />
+ *
+ * The key issue: the original `src={scriptAsDataURI(...)}` has one closing `}`,
+ * but `dangerouslySetInnerHTML={{ __html: useScript(...) }}` needs two closing `}}`.
+ * We also need to remove stray attrs like `defer` that sit between the call and `/>`.
+ */
+function rebalanceScriptDataUri(code: string): string {
+  const marker = "dangerouslySetInnerHTML={{ __html: useScript(";
+  let idx = code.indexOf(marker);
+  while (idx !== -1) {
+    const start = idx + marker.length;
+    // Find the balanced closing paren for useScript(
+    let depth = 1;
+    let i = start;
+    while (i < code.length && depth > 0) {
+      if (code[i] === "(") depth++;
+      else if (code[i] === ")") depth--;
+      i++;
+    }
+    // i is now right after the matching ) of useScript(...)
+    // We expect `}` next (closing the old src={...})
+    // We need to replace everything from ) to /> with `) }} />`
+    // and remove any stray attributes like `defer`, `type="module"`, etc.
+    const afterParen = code.substring(i);
+    const closingMatch = afterParen.match(/^\s*\}\s*\n?\s*([\s\S]*?)\s*\/>/);
+    if (closingMatch) {
+      const endOffset = i + closingMatch[0].length;
+      // i is already past the closing ), so just add the }} and />
+      const replacement = ` }}\n    />`;
+      code = code.substring(0, i) + replacement + code.substring(endOffset);
+    }
+    idx = code.indexOf(marker, idx + 1);
+  }
+  return code;
+}
+/**
+ * Removes or replaces Fresh-specific APIs:
+ *
+ * - asset("/path") → "/path"
+ * - <Head>...</Head> → content extracted or removed
+ * - defineApp wrapper → unwrap
+ * - IS_BROWSER → typeof window !== "undefined"
+ * - Context.active().release?.revision() → "" (Vite handles cache busting)
+ */
+export function transformFreshApis(content: string): TransformResult {
+  const notes: string[] = [];
+  let changed = false;
+  let result = content;
+  // asset("/path") → "/path" and asset(`/path`) → `/path`
+  if (/\basset\(/.test(result)) {
+    result = result.replace(
+      /\basset\(\s*(`[^`]+`|"[^"]+"|'[^']+')\s*\)/g,
+      (_match, path) => {
+        // For template literals with revision, simplify
+        const inner = path.slice(1, -1);
+        if (inner.includes("${revision}") || inner.includes("?revision=")) {
+          // Remove cache-busting query — Vite handles it
+          const clean = inner
+            .replace(/\?revision=\$\{revision\}/, "")
+            .replace(/\$\{revision\}/, "");
+          return `"${clean}"`;
+        }
+        return path;
+      },
+    );
+    changed = true;
+    notes.push("Replaced asset() calls with direct paths");
+  }
+  // Remove import { asset, Head } from "$fresh/runtime.ts"
+  // (the imports transform handles the specifier, but we also need to handle
+  // cases where the import line wasn't fully removed)
+  result = result.replace(
+    /^import\s+\{[^}]*\b(?:asset|Head)\b[^}]*\}\s+from\s+["']\$fresh\/runtime\.ts["'];?\s*\n?/gm,
+    "",
+  );
+  result = result.replace(
+    /^import\s+\{[^}]*\}\s+from\s+["']\$fresh\/server\.ts["'];?\s*\n?/gm,
+    "",
+  );
+  // IS_BROWSER → typeof window !== "undefined"
+  if (result.includes("IS_BROWSER")) {
+    result = result.replace(
+      /\bIS_BROWSER\b/g,
+      '(typeof window !== "undefined")',
+    );
+    // Remove the import
+    result = result.replace(
+      /^import\s+\{[^}]*\bIS_BROWSER\b[^}]*\}\s+from\s+["'][^"']+["'];?\s*\n?/gm,
+      "",
+    );
+    changed = true;
+    notes.push('Replaced IS_BROWSER with typeof window !== "undefined"');
+  }
+  // Context.active().release?.revision() → "" or remove the entire await line
+  if (result.includes("Context.active()")) {
+    result = result.replace(
+      /(?:const|let)\s+\w+\s*=\s*await\s+Context\.active\(\)\.release\?\.revision\(\);?\s*\n?/g,
+      "",
+    );
+    result = result.replace(
+      /Context\.active\(\)\.release\?\.revision\(\)/g,
+      '""',
+    );
+    result = result.replace(
+      /^import\s+\{\s*Context\s*\}\s+from\s+["']@deco\/deco["'];?\s*\n?/gm,
+      "",
+    );
+    changed = true;
+    notes.push("Removed Context.active().release?.revision()");
+  }
+  // defineApp wrapper → unwrap to a plain function
+  // Matches: export default defineApp(async (_req, ctx) => { ... });
+  if (result.includes("defineApp")) {
+    result = result.replace(
+      /export\s+default\s+defineApp\(\s*(?:async\s+)?\([^)]*\)\s*=>\s*\{/,
+      "// NOTE: defineApp removed — this file needs manual conversion to a route\nexport default function AppLayout() {",
+    );
+    // Remove trailing ); that closed defineApp
+    // This is tricky — we'll flag for manual review instead of guessing
+    changed = true;
+    notes.push(
+      "MANUAL: defineApp wrapper partially unwrapped — verify closing brackets",
+    );
+  }
+  // Replace <Head>...</Head> with <>...</>
+  // React 19 auto-hoists <title>, <meta>, <link> tags to document <head>.
+  if (result.includes("<Head>") || result.includes("<Head ")) {
+    // Handle self-closing <Head ... /> first so it becomes <></> (not just <>)
+    result = result.replace(/<Head\s[^>]*\/>/g, "<></>");
+    result = result.replace(/<Head\s*\/>/g, "<></>");
+    result = result.replace(/<Head>/g, "<>");
+    result = result.replace(/<Head\s[^>]*>/g, "<>");
+    result = result.replace(/<\/Head>/g, "</>");
+    changed = true;
+    notes.push("Replaced <Head> with fragment — React 19 hoists head tags automatically");
+  }
+  // scriptAsDataURI → useScript with dangerouslySetInnerHTML
+  // scriptAsDataURI is a Fresh pattern that returns a data: URI for <script src=...>.
+  // In React/TanStack, useScript returns a string for dangerouslySetInnerHTML.
+  //
+  // Before: <script src={scriptAsDataURI(fn, arg1, arg2)} defer />
+  // After:  <script dangerouslySetInnerHTML={{ __html: useScript(fn, arg1, arg2) }} />
+  if (result.includes("scriptAsDataURI")) {
+    // Ensure useScript is imported
+    if (
+      !result.includes('"@decocms/start/sdk/useScript"') &&
+      !result.includes("'@decocms/start/sdk/useScript'")
+    ) {
+      result = `import { useScript } from "@decocms/start/sdk/useScript";\n${result}`;
+    }
+    // Transform src={scriptAsDataURI(...)} into dangerouslySetInnerHTML={{ __html: useScript(...) }}
+    // We need to match balanced parens to capture the full argument list.
+    result = result.replace(
+      /\bsrc=\{scriptAsDataURI\(/g,
+      "dangerouslySetInnerHTML={{ __html: useScript(",
+    );
+    // Now close the pattern: find the matching )} and replace with ) }}
+    // The pattern after replacement is: dangerouslySetInnerHTML={{ __html: useScript(...)}<maybe whitespace and other attrs>
+    // We need to find the closing )} that ends the JSX expression
+    result = rebalanceScriptDataUri(result);
+    // Replace any remaining standalone scriptAsDataURI references
+    result = result.replace(/\bscriptAsDataURI\b/g, "useScript");
+    changed = true;
+    notes.push("Replaced scriptAsDataURI with useScript + dangerouslySetInnerHTML");
+  }
+  // allowCorsFor — not available in @decocms/start, remove usage
+  if (result.includes("allowCorsFor")) {
+    result = result.replace(
+      /^import\s+\{[^}]*\ballowCorsFor\b[^}]*\}\s+from\s+["'][^"']+["'];?\s*\n?/gm,
+      "",
+    );
+    // Remove allowCorsFor calls
+    result = result.replace(/\ballowCorsFor\b\([^)]*\);?\s*\n?/g, "");
+    changed = true;
+    notes.push("Removed allowCorsFor (not needed in TanStack)");
+  }
+  // ctx.response.headers → not available, flag
+  if (result.includes("ctx.response")) {
+    notes.push("MANUAL: ctx.response usage found — FnContext in @decocms/start does not have response object");
+  }
+  // { crypto } from "@std/crypto" → use globalThis.crypto (Web Crypto API)
+  // The import is already removed by imports transform, but `crypto` references
+  // need to be prefixed with globalThis if they'd shadow the global
+  if (result.match(/^import\s+\{[^}]*\bcrypto\b/m)) {
+    // Import already removed by imports transform, so just ensure bare `crypto` works
+    // No action needed — globalThis.crypto is available in Workers + Node 20+
+    notes.push("INFO: @std/crypto replaced with globalThis.crypto (Web Crypto API)");
+  }
+  // Clean up blank lines
+  result = result.replace(/\n{3,}/g, "\n\n");
+  return { content: result, changed, notes };
+}

package/scripts/migrate/transforms/htmx-on-events.test.ts ADDED Viewed

@@ -0,0 +1,305 @@
+import { describe, expect, it } from "vitest";
+import {
+  _internals,
+  transformHtmxOnEvents,
+} from "./htmx-on-events";
+const { STANDARD_EVENT_MAP, TODO_MARKER } = _internals;
+describe("transformHtmxOnEvents — basic renames", () => {
+  it("renames hx-on:click → onClick (colon variant)", () => {
+    const src = `<button hx-on:click={() => alert("hi")}>click</button>`;
+    const r = transformHtmxOnEvents(src);
+    expect(r.changed).toBe(true);
+    expect(r.content).toBe(
+      `<button onClick={() => alert("hi")}>click</button>`,
+    );
+    expect(r.notes[0]).toContain("Renamed 1 hx-on:* attribute(s)");
+    expect(r.notes[0]).toContain("onClick=1");
+  });
+  it("renames hx-on-click → onClick (dash variant)", () => {
+    const src = `<button hx-on-click={fn}>click</button>`;
+    const r = transformHtmxOnEvents(src);
+    expect(r.changed).toBe(true);
+    expect(r.content).toBe(`<button onClick={fn}>click</button>`);
+  });
+  it("preserves whitespace around `=`", () => {
+    const src = `<button hx-on:click = {fn}>x</button>`;
+    const r = transformHtmxOnEvents(src);
+    expect(r.content).toBe(`<button onClick = {fn}>x</button>`);
+  });
+  it("renames every standard event in the map", () => {
+    for (const [htmxEvent, reactName] of Object.entries(STANDARD_EVENT_MAP)) {
+      const src = `<x hx-on:${htmxEvent}={fn}/>`;
+      const r = transformHtmxOnEvents(src);
+      expect(r.content, `event=${htmxEvent}`).toBe(`<x ${reactName}={fn}/>`);
+    }
+  });
+  it("renames every standard event in the map (dash variant)", () => {
+    for (const [htmxEvent, reactName] of Object.entries(STANDARD_EVENT_MAP)) {
+      const src = `<x hx-on-${htmxEvent}={fn}/>`;
+      const r = transformHtmxOnEvents(src);
+      expect(r.content, `event=${htmxEvent}`).toBe(`<x ${reactName}={fn}/>`);
+    }
+  });
+  it("handles multiple events on the same element", () => {
+    const src = `<input hx-on:change={a} hx-on:keyup={b} hx-on:focus={c}/>`;
+    const r = transformHtmxOnEvents(src);
+    expect(r.content).toBe(
+      `<input onChange={a} onKeyUp={b} onFocus={c}/>`,
+    );
+    expect(r.notes[0]).toContain("Renamed 3 hx-on:* attribute(s)");
+  });
+  it("handles multi-line attribute values", () => {
+    const src = `<button
+  hx-on:click={() => {
+    setLoading(true);
+    doStuff();
+  }}>
+  Submit
+</button>`;
+    const r = transformHtmxOnEvents(src);
+    expect(r.content).toContain("onClick={() => {");
+    expect(r.content).toContain("setLoading(true);");
+    expect(r.content).not.toContain("hx-on");
+  });
+  it("handles string-valued events (rare but legal htmx)", () => {
+    const src = `<button hx-on:click="alert('hi')">x</button>`;
+    const r = transformHtmxOnEvents(src);
+    expect(r.content).toBe(`<button onClick="alert('hi')">x</button>`);
+  });
+});
+describe("transformHtmxOnEvents — what stays untouched", () => {
+  it("leaves htmx lifecycle events alone (htmx-config-request, htmx-before-request, ...)", () => {
+    const src = `<form hx-post="/x"
+      hx-on:htmx-before-request={a}
+      hx-on:htmx-config-request={b}
+      hx-on-htmx-after-swap={c}
+    />`;
+    const r = transformHtmxOnEvents(src);
+    expect(r.changed).toBe(false);
+    expect(r.content).toBe(src);
+  });
+  it("renames standard events but preserves htmx lifecycle on the same element", () => {
+    const src = `<form hx-post="/x" hx-on:submit={validate} hx-on:htmx-before-request={addCsrf}>...</form>`;
+    const r = transformHtmxOnEvents(src);
+    expect(r.changed).toBe(true);
+    expect(r.content).toBe(
+      `<form hx-post="/x" onSubmit={validate} hx-on:htmx-before-request={addCsrf}>...</form>`,
+    );
+  });
+  it("leaves unknown/custom events alone (no React synthetic equivalent)", () => {
+    const src = `<x hx-on:my-custom-event={fn} hx-on-other-thing={fn2}/>`;
+    const r = transformHtmxOnEvents(src);
+    expect(r.changed).toBe(false);
+    expect(r.content).toBe(src);
+  });
+  it("leaves non-event hx-* attributes alone (hx-post, hx-target, hx-swap, ...)", () => {
+    const src = `<form hx-post="/x" hx-target="#r" hx-swap="innerHTML" hx-trigger="submit"/>`;
+    const r = transformHtmxOnEvents(src);
+    expect(r.changed).toBe(false);
+    expect(r.content).toBe(src);
+  });
+  it("leaves already-React onClick alone", () => {
+    const src = `<button onClick={fn}>x</button>`;
+    const r = transformHtmxOnEvents(src);
+    expect(r.changed).toBe(false);
+    expect(r.content).toBe(src);
+  });
+  it("does not match attribute names that merely contain 'hx-on' as a substring", () => {
+    const src = `<x data-hx-onfoo={fn} aria-hx-on="x"/>`;
+    const r = transformHtmxOnEvents(src);
+    expect(r.changed).toBe(false);
+  });
+  it("returns unchanged on files with no hx-on at all (fast path)", () => {
+    const src = `<button onClick={fn}>x</button>\n<form hx-post="/x"/>`;
+    const r = transformHtmxOnEvents(src);
+    expect(r.changed).toBe(false);
+    expect(r.content).toBe(src);
+    expect(r.notes).toEqual([]);
+  });
+});
+describe("transformHtmxOnEvents — Fresh-isms TODO injection", () => {
+  it("injects a top-of-file MIGRATION TODO when handler references useScript()", () => {
+    const src = `import { useScript } from "site/sdk/useScript.ts";
+export default function X() {
+  return <button hx-on:click={useScript(handler)}>x</button>;
+}
+`;
+    const r = transformHtmxOnEvents(src);
+    expect(r.changed).toBe(true);
+    expect(r.content.startsWith(TODO_MARKER)).toBe(true);
+    expect(r.content).toContain("onClick={useScript(handler)}");
+    expect(r.notes.some((n) => n.includes("Injected MIGRATION TODO"))).toBe(true);
+  });
+  it("injects a top-of-file MIGRATION TODO when handler references globalThis.window.STOREFRONT", () => {
+    const src = `<button hx-on:click={() => { globalThis.window.STOREFRONT.CART.addToCart({}); }}>buy</button>`;
+    const r = transformHtmxOnEvents(src);
+    expect(r.content.startsWith(TODO_MARKER)).toBe(true);
+  });
+  it("injects a top-of-file MIGRATION TODO when handler references STOREFRONT.* (shorthand)", () => {
+    const src = `import { STOREFRONT } from "site/sdk";\n<button hx-on:click={() => STOREFRONT.CART.addToCart()}>x</button>`;
+    const r = transformHtmxOnEvents(src);
+    expect(r.content.startsWith(TODO_MARKER)).toBe(true);
+  });
+  it("does NOT inject a TODO when no Fresh-isms are detected", () => {
+    const src = `<button hx-on:click={() => setOpen(true)}>x</button>`;
+    const r = transformHtmxOnEvents(src);
+    expect(r.changed).toBe(true);
+    expect(r.content.startsWith(TODO_MARKER)).toBe(false);
+    expect(r.content).toBe(`<button onClick={() => setOpen(true)}>x</button>`);
+    expect(r.notes.some((n) => n.includes("Injected MIGRATION TODO"))).toBe(false);
+  });
+  it("preserves a leading shebang and inserts the TODO after it", () => {
+    const src = `#!/usr/bin/env node\n<button hx-on:click={useScript(fn)}>x</button>\n`;
+    const r = transformHtmxOnEvents(src);
+    expect(r.content.startsWith("#!/usr/bin/env node\n")).toBe(true);
+    expect(r.content.split("\n")[1]).toBe(TODO_MARKER);
+  });
+  it("does not inject the TODO twice when the codemod is rerun (idempotent)", () => {
+    const src = `<button hx-on:click={useScript(fn)}>x</button>`;
+    const first = transformHtmxOnEvents(src);
+    const second = transformHtmxOnEvents(first.content);
+    expect(second.changed).toBe(false);
+    const occurrences = first.content.split(TODO_MARKER).length - 1;
+    expect(occurrences).toBe(1);
+  });
+});
+describe("transformHtmxOnEvents — idempotency + edge cases", () => {
+  it("is idempotent on a clean rewritten file (rerunning is a no-op)", () => {
+    const src = `<button onClick={fn}>x</button>`;
+    const first = transformHtmxOnEvents(src);
+    const second = transformHtmxOnEvents(first.content);
+    expect(first.changed).toBe(false);
+    expect(second.changed).toBe(false);
+    expect(second.content).toBe(src);
+  });
+  it("is idempotent on a file that just got rewritten (rerun produces same output)", () => {
+    const src = `<button hx-on:click={fn}>x</button>`;
+    const first = transformHtmxOnEvents(src);
+    const second = transformHtmxOnEvents(first.content);
+    expect(second.changed).toBe(false);
+    expect(second.content).toBe(first.content);
+  });
+  it("handles JSX components (capitalized tag names) just like lowercase intrinsics", () => {
+    const src = `<Accordion.Trigger hx-on-click={toggle}>open</Accordion.Trigger>`;
+    const r = transformHtmxOnEvents(src);
+    expect(r.content).toBe(
+      `<Accordion.Trigger onClick={toggle}>open</Accordion.Trigger>`,
+    );
+  });
+  it("renames within a long file containing many tags", () => {
+    const src = Array.from({ length: 20 })
+      .map((_, i) => `<button key={${i}} hx-on:click={() => setCount(${i})}>${i}</button>`)
+      .join("\n");
+    const r = transformHtmxOnEvents(src);
+    expect(r.notes[0]).toContain("Renamed 20 hx-on:* attribute(s)");
+    expect(r.content.split("onClick=").length - 1).toBe(20);
+    expect(r.content.includes("hx-on")).toBe(false);
+  });
+});
+describe("transformHtmxOnEvents — als-shaped fixtures", () => {
+  it("AddToBagButton: hx-on-click + Fresh useScript → onClick + TODO", () => {
+    const src = `import { useScript } from "site/sdk/useScript.ts";
+interface Props { productId: string; }
+export default function AddToBagButton({ productId }: Props) {
+  const handler = (id: string) => {
+    globalThis.window.STOREFRONT.CART.addToCart({ id });
+  };
+  return (
+    <button
+      class="btn"
+      hx-on-click={useScript(handler, productId)}
+    >
+      Add to bag
+    </button>
+  );
+}
+`;
+    const r = transformHtmxOnEvents(src);
+    expect(r.changed).toBe(true);
+    expect(r.content).toContain("onClick={useScript(handler, productId)}");
+    expect(r.content.startsWith(TODO_MARKER)).toBe(true);
+    const codeBody = r.content.split("§ Pattern 1 (event-handler).\n")[1];
+    expect(codeBody).not.toMatch(/\bhx-on\b/);
+  });
+  it("SearchInput: keeps hx-post/hx-target/etc, renames hx-on:change", () => {
+    const src = `<input
+  type="search"
+  hx-post={searchUrl}
+  hx-target="#suggestions"
+  hx-swap="innerHTML"
+  hx-trigger="keyup changed delay:300ms"
+  hx-sync="closest form:abort"
+  hx-on:change={(e) => { e.preventDefault(); }}
+/>`;
+    const r = transformHtmxOnEvents(src);
+    expect(r.changed).toBe(true);
+    expect(r.content).toContain(`onChange={(e) => { e.preventDefault(); }}`);
+    expect(r.content).toContain("hx-post={searchUrl}");
+    expect(r.content).toContain('hx-target="#suggestions"');
+    expect(r.content).toContain('hx-swap="innerHTML"');
+    expect(r.content).toContain('hx-sync="closest form:abort"');
+  });
+  it("RecoveryPassword: form with mixed standard + htmx lifecycle hooks", () => {
+    const src = `<form
+  hx-post={url}
+  hx-target="#form"
+  hx-swap="outerHTML"
+  hx-trigger="submit"
+  hx-disabled-elt="find button"
+  hx-indicator="#loader"
+  hx-select="#form"
+  hx-on:submit={(e) => { /* validate */ }}
+  hx-on-htmx-before-request={(e) => addCsrf(e)}
+>
+  …
+</form>`;
+    const r = transformHtmxOnEvents(src);
+    expect(r.changed).toBe(true);
+    expect(r.content).toContain(`onSubmit={(e) => { /* validate */ }}`);
+    expect(r.content).toContain("hx-on-htmx-before-request={(e) => addCsrf(e)}");
+    expect(r.content).toContain("hx-post={url}");
+    expect(r.content).toContain('hx-trigger="submit"');
+  });
+  it("Footer.tsx-style: simple onClick with no Fresh-ism — no TODO", () => {
+    const src = `<button hx-on:click={() => setOpen((p) => !p)}>menu</button>`;
+    const r = transformHtmxOnEvents(src);
+    expect(r.changed).toBe(true);
+    expect(r.content.startsWith(TODO_MARKER)).toBe(false);
+    expect(r.content).toBe(
+      `<button onClick={() => setOpen((p) => !p)}>menu</button>`,
+    );
+  });
+});