@bettercms-ai/convert 0.17.2 → 0.18.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @bettercms-ai/convert
 
+## 0.18.0
+
+### Minor Changes
+
+- 6cb71a0: - **Images passed to a section component are bound.** `<Hero src={heroImage} />` rendering `<Image src={src}>` used to be `IMAGE_ASSET_UNRESOLVED`. The call site now reads `bcmsImage(...)` and passes `bcmsBindings`, and the component's `<Image>` gets the binding. No class or markup changes.
+  - **`bcmsImage` keeps an imported asset at build** (helper v8). `astro:assets` refuses a remote url without width and height, so returning the CMS url broke the build once an editor replaced an image. The published page shows the editor's image through the release write.
+  - **New `--verify-styles [--base <ref>]`.** It lists every `class`, `className` and `style` token changed since the base commit, repo-wide so a `--componentize` move is not an edit, and exits 1 when there are any. Put its `styleEdits` in the conversion receipt; a receipt with edits is refused.
+
 ## 0.17.2
 
 ### Patch Changes

package/dist/cli.js

@@ -1,6 +1,7 @@
 #!/usr/bin/env node
 
 // src/cli.ts
+import { execFileSync } from "child_process";
 import { readdir, readFile, writeFile, mkdir, stat } from "fs/promises";
 import { dirname, join as join2, relative, resolve, sep } from "path";
 
@@ -3187,6 +3188,7 @@ function soleChild(node) {
   const kept = node.children.filter((c) => !(c.type === "text" && c.value.trim() === ""));
   return kept.length === 1 ? kept[0] : null;
 }
+var ASSET_TAGS = /* @__PURE__ */ new Set(["Image", "Picture"]);
 function findPropTargets(content, parsed, propName, dialect, imported = null) {
   const empty = {
     targets: [],
@@ -3203,6 +3205,7 @@ function findPropTargets(content, parsed, propName, dialect, imported = null) {
   const reception = dialect === "astro" ? astroReception(ast, propName, offset, content) : receptionIn(component, propName, offset, content);
   if (!reception.receivable) return empty;
   const names = new Set(reception.names.size > 0 ? reception.names : [propName]);
+  const assetComponents = /from\s+["']astro:assets["']/.test(content);
   const within = (node) => component === null || node.start >= (component.start ?? 0) + offset && node.start <= (component.end ?? 0) + offset;
   const targets = [];
   const forwards = [];
@@ -3212,6 +3215,15 @@ function findPropTargets(content, parsed, propName, dialect, imported = null) {
       return;
     }
     if (node.type !== "element") return;
+    const sources = IMAGE_SOURCES[node.tag.toLowerCase()] ?? (assetComponents && ASSET_TAGS.has(node.tag) ? ["src"] : []);
+    const readsImage = node.attrs.some((attr) => {
+      if (!sources.includes(attr.name) || !attr.expressionRange) return false;
+      return readsProp(content.slice(attr.expressionRange.start, attr.expressionRange.end), propName, names);
+    });
+    if (readsImage) {
+      if (within(node)) targets.push({ attrInsertAt: node.attrInsertAt, inner: null, tag: node.tag });
+      return;
+    }
     if (isIntrinsic(node.tag)) {
       const child = soleChild(node);
       if (within(node) && child?.type === "expr" && readsProp(child.value, propName, names)) {
@@ -4069,6 +4081,27 @@ function baseName(url) {
   const base = file.split(".")[0] ?? "";
   return base === "" ? null : base.toLowerCase();
 }
+function passedTo(content, parsed, binding) {
+  const out = [];
+  const visit = (node) => {
+    if (node.type === "expr") {
+      for (const child of node.children) visit(child);
+      return;
+    }
+    if (node.type !== "element" || node.raw) return;
+    const isComponent = /^[A-Z]/.test(node.tag) && !ASSET_COMPONENTS.has(node.tag);
+    if (isComponent && !node.attrs.some((a) => a.name === "bcmsBindings")) {
+      for (const attr of node.attrs) {
+        if (!attr.expressionRange) continue;
+        const inner = content.slice(attr.expressionRange.start, attr.expressionRange.end).replace(/^\{|\}$/g, "").trim();
+        if (inner === binding) out.push({ node, prop: attr.name, attr });
+      }
+    }
+    for (const child of node.children) visit(child);
+  };
+  for (const root of parsed.roots) visit(root);
+  return out;
+}
 function assetCandidates(parsed, dialect, original) {
   const wanted = baseName(original);
   if (wanted === null || parsed.error) return [];
@@ -4106,8 +4139,8 @@ function renderedBy(content, parsed, dialect, binding) {
   for (const root of parsed.roots) visit(root);
   return out;
 }
-function bindImages(ctx, targets) {
-  const out = { splices: [], slugs: [], bound: [], refused: [] };
+async function bindImages(ctx, targets) {
+  const out = { splices: [], slugs: [], bound: [], refused: [], componentEdits: [], props: [] };
   const rule = DIALECT_RULES[ctx.dialect];
   if (!rule.attr || !rule.text || ctx.parsed.error) return out;
   const claimed = /* @__PURE__ */ new Set();
@@ -4115,6 +4148,23 @@ function bindImages(ctx, targets) {
     const binding = assetImport(ctx.parsed, ctx.dialect, target.original);
     const rendered = binding === null ? [] : renderedBy(ctx.content, ctx.parsed, ctx.dialect, binding);
     const free = rendered.filter((hit2) => !claimed.has(hit2.node.attrInsertAt));
+    const args = (b) => [ctx.snapshotName(target.slug), JSON.stringify(target.path), b, ...ctx.slug ? [ctx.slug] : []];
+    if (free.length === 0 && binding !== null && ctx.drill) {
+      const calls = passedTo(ctx.content, ctx.parsed, binding).filter((c) => !claimed.has(c.node.attrInsertAt));
+      const call = calls.length === 1 ? calls[0] : null;
+      const drilled = call ? await ctx.drill(call.node.tag, call.prop, target.kind || "image") : null;
+      if (call && drilled?.ok) {
+        claimed.add(call.node.attrInsertAt);
+        const literal = `${call.prop}: ${JSON.stringify(target.path)}`;
+        out.splices.push({ start: call.attr.range.start, end: call.attr.range.end, text: rule.attr(call.prop, `${ctx.image}(${args(binding).join(", ")})`) });
+        out.splices.push({ start: call.node.attrInsertAt, end: call.node.attrInsertAt, text: ` bcmsBindings={{ ${literal} }}` });
+        out.componentEdits.push(...drilled.edits);
+        out.props.push({ file: drilled.edits[0].file, prop: call.prop, path: target.path, literal });
+        out.slugs.push(target.slug);
+        out.bound.push(target.key);
+        continue;
+      }
+    }
     if (free.length !== 1) {
       out.refused.push({ key: target.key, reason: "IMAGE_ASSET_UNRESOLVED" });
       continue;
@@ -4122,16 +4172,10 @@ function bindImages(ctx, targets) {
     const hit = free[0];
     claimed.add(hit.node.attrInsertAt);
     const attr = hit.node.attrs.find((a) => a.name === hit.attr);
-    const args = [
-      ctx.snapshotName(target.slug),
-      JSON.stringify(target.path),
-      binding,
-      ...ctx.slug ? [ctx.slug] : []
-    ];
     out.splices.push({
       start: attr.range.start,
       end: attr.range.end,
-      text: rule.attr(hit.attr, `${ctx.image}(${args.join(", ")})`)
+      text: rule.attr(hit.attr, `${ctx.image}(${args(binding).join(", ")})`)
     });
     out.splices.push({
       start: hit.node.attrInsertAt,
@@ -4146,7 +4190,7 @@ function bindImages(ctx, targets) {
 
 // src/helper.ts
 import { createHash as createHash2 } from "crypto";
-var HELPER_VERSION = 7;
+var HELPER_VERSION = 8;
 var HEADER = "// @bettercms-ai/convert helper v";
 var HELPER_PATH = Object.fromEntries(
   Object.keys(DIALECT_RULES).map((d) => [d, DIALECT_RULES[d].helper])
@@ -4278,8 +4322,18 @@ export function bcmsTuples(page: unknown, paths: string[][], fallback: string[][
   return paths.map((row, index) => bcmsList(page, row, fallback[index] ?? [], slug));
 }
 
-/** An image field's url, or the asset the template already imports. @see IMAGE_ASSET_UNRESOLVED */
+/**
+ * An image field's url, or the asset the template already imports. @see IMAGE_ASSET_UNRESOLVED
+ *
+ * \u{1F534} AN IMPORTED ASSET IS KEPT AT BUILD. \`<Image src={\u2026}>\` from \`astro:assets\` refuses a remote
+ * url string without width, height and an allowed domain, so returning the CMS url here broke the
+ * build the moment an editor replaced the image. The build renders the optimised import; the
+ * release write (\`writeImage\`) puts the editor's image on the \`data-bcms-field\` element, which
+ * is where every published value lands. A plain string fallback (\`<img src="/hero.png">\`) has
+ * no such rule and takes the CMS url directly.
+ */
 export function bcmsImage<T>(page: unknown, path: string, fallback: T, slug?: string): T | string {
+  if (fallback !== null && typeof fallback === "object") return fallback;
   const entries = isRecord(page) ? page.entries : undefined;
   const root = slug !== undefined && isRecord(entries) ? entries[slug] : page;
   return render(readPath(root, path)) ?? fallback;
@@ -4445,7 +4499,8 @@ var HISTORICAL = {
     3: "d4305b2983adcb456ef782d35ea9d083a04465c2b68baa0d44a084dfa01a9227",
     4: "a5742f64dacb1b26ee6dd5e1469a54871487934c71bc8267df19e3a80e417595",
     5: "0472fe3ffdcfa49e719c7b9da9cb63b6eba637cc22783bb00c3c2cadd3d800da",
-    6: "c907e7245578d947c6541b1ab2c5c6659ea7789a1519e895b4a4aed122c6f649"
+    6: "c907e7245578d947c6541b1ab2c5c6659ea7789a1519e895b4a4aed122c6f649",
+    7: "f22514ef48c50230985e605bea6cf9bf41756384a7dc80603e347baba9b65d93"
   },
   "src/lib/bcms-content.ts": {
     1: "ae72ae14d706943d481c880d70da5789b4816ba1ba319a10fbc63ded4d0b42f2",
@@ -4453,7 +4508,8 @@ var HISTORICAL = {
     3: "0be9c73160361882a038552bc02673c14ed532287823dabaafe36179bc55ed7e",
     4: "0146d027a727ecd3c9e3fc336fcf1299b59ddf75b04091c05703f3f983ec28af",
     5: "c8c93655320fa65664611ba84541f3fa7bfa292cc9a2fd655373440b99049fba",
-    6: "63f1fa29e47e70c5193b81ee24addb238ba100247124d55bc17713102d587df5"
+    6: "63f1fa29e47e70c5193b81ee24addb238ba100247124d55bc17713102d587df5",
+    7: "ed92fb88de953d9951abbe6a1edae1d048f4050eaf6fb607ac08167f94d8bcc7"
   },
   "composables/bcms-content.ts": {
     1: "c272412532efed7db64b6cf313b2bed4291f9951430412289c8a588b7f565407",
@@ -4461,7 +4517,8 @@ var HISTORICAL = {
     3: "d4305b2983adcb456ef782d35ea9d083a04465c2b68baa0d44a084dfa01a9227",
     4: "a5742f64dacb1b26ee6dd5e1469a54871487934c71bc8267df19e3a80e417595",
     5: "0472fe3ffdcfa49e719c7b9da9cb63b6eba637cc22783bb00c3c2cadd3d800da",
-    6: "c907e7245578d947c6541b1ab2c5c6659ea7789a1519e895b4a4aed122c6f649"
+    6: "c907e7245578d947c6541b1ab2c5c6659ea7789a1519e895b4a4aed122c6f649",
+    7: "f22514ef48c50230985e605bea6cf9bf41756384a7dc80603e347baba9b65d93"
   }
 };
 var sha256 = (value) => createHash2("sha256").update(value, "utf8").digest("hex");
@@ -9564,8 +9621,21 @@ async function plan(file, content, dialect, targets, sites, importAt, outcomes,
       callSites: [{ file, literal: drilledProp.literal }]
     });
   }
-  const images = bindImages(
-    { content, parsed, dialect: writing, image: helperName("bcmsImage"), snapshotName, slug: params?.slug ?? null },
+  const images = await bindImages(
+    {
+      content,
+      parsed,
+      dialect: writing,
+      image: helperName("bcmsImage"),
+      snapshotName,
+      slug: params?.slug ?? null,
+      // An image handed to a section component is bound in that component, by the same drill a
+      // text prop takes. @see images.ts
+      drill: async (component, prop, kind) => {
+        const drilled = await drillProp(drill, file, component, prop, kind, 1);
+        return drilled.ok ? { ok: true, edits: drilled.edits } : { ok: false, reason: drilled.reason ?? "PROP_TARGET_NOT_FOUND" };
+      }
+    },
     targets.filter((t) => {
       const outcome = outcomes.get(t.key);
       return t.kind === "image" && t.scope === "page" && (outcome === void 0 || UNPLACED.has(outcome));
@@ -9573,6 +9643,10 @@ async function plan(file, content, dialect, targets, sites, importAt, outcomes,
   );
   for (const key of images.bound) outcomes.set(key, "rewritten");
   for (const refusal of images.refused) outcomes.set(refusal.key, refusal.reason);
+  componentEdits.push(...images.componentEdits);
+  for (const drilledProp of images.props) {
+    dynamic.push({ file: drilledProp.file, prop: drilledProp.prop, path: drilledProp.path, callSites: [{ file, literal: drilledProp.literal }] });
+  }
   const lanes = [...data.splices, ...images.splices];
   if (applied.length === 0 && lanes.length === 0) {
     return { tier, content: null, outcomes, bindings: [], occurrences: { located, rewritten: 0 }, dialect: writing, dynamic: [], componentEdits, snapshots: [], notes: [] };
@@ -9804,10 +9878,58 @@ function emitStubs2(dialects, slugs, contents, out) {
   }
 }
 
+// src/styles.ts
+var ATTR = /\b(class|className|style)\s*=\s*(?:"([^"]*)"|'([^']*)'|\{\s*`([^`$]*)`\s*\})/g;
+function styleTokens(file, content) {
+  const out = [];
+  for (const match of content.matchAll(ATTR)) {
+    const attr = match[1] === "className" ? "class" : match[1];
+    const value = match[2] ?? match[3] ?? match[4] ?? "";
+    const line = content.slice(0, match.index).split("\n").length;
+    const tokens = attr === "style" ? value.split(";").map((d) => d.replace(/\s+/g, "").toLowerCase()).filter(Boolean) : value.split(/\s+/).filter(Boolean);
+    for (const token of tokens) out.push({ attr, token, file, line });
+  }
+  return out;
+}
+function styleEdits(before, after) {
+  const count = (files) => {
+    const seen = /* @__PURE__ */ new Map();
+    for (const f of files) {
+      for (const o of styleTokens(f.path, f.content)) {
+        const key = `${o.attr}\0${o.token}`;
+        seen.set(key, [...seen.get(key) ?? [], o]);
+      }
+    }
+    return seen;
+  };
+  const perFile = (list) => {
+    const files = /* @__PURE__ */ new Map();
+    for (const o of list) files.set(o.file, [...files.get(o.file) ?? [], o]);
+    return files;
+  };
+  const pick = (from, other, n) => {
+    const mine = perFile(from);
+    const theirs = perFile(other);
+    const out = [];
+    for (const [file, list] of mine) out.push(...list.slice(theirs.get(file)?.length ?? 0));
+    return out.slice(0, n);
+  };
+  const was = count(before);
+  const now = count(after);
+  const edits = [];
+  for (const key of /* @__PURE__ */ new Set([...was.keys(), ...now.keys()])) {
+    const a = was.get(key) ?? [];
+    const b = now.get(key) ?? [];
+    if (a.length > b.length) for (const o of pick(a, b, a.length - b.length)) edits.push({ change: "removed", ...o });
+    else if (b.length > a.length) for (const o of pick(b, a, b.length - a.length)) edits.push({ change: "added", ...o });
+  }
+  return edits.sort((x, y) => x.file.localeCompare(y.file) || x.line - y.line || x.token.localeCompare(y.token));
+}
+
 // package.json
 var package_default = {
   name: "@bettercms-ai/convert",
-  version: "0.17.2",
+  version: "0.18.0",
   type: "module",
   description: "Deterministic codemod that turns an imported site's text-matched bindings into declared ones \u2014 parser offsets in, one magic-string pass out, plus a receipt of everything it could not do.",
   bin: {
@@ -9870,6 +9992,8 @@ function parseArgs(argv) {
     forms: false,
     pins: {},
     xray: void 0,
+    verifyStyles: false,
+    base: "HEAD",
     plan: void 0,
     copy: "bind",
     root: ".",
@@ -9895,6 +10019,8 @@ function parseArgs(argv) {
       if (Object.hasOwn(args.pins, form)) throw new CliError(`--pin ${form} twice: give one file. See --help.`);
       args.pins[form] = raw.slice(at + 1);
     } else if (arg === "--xray") args.xray = argv[++i];
+    else if (arg === "--verify-styles") args.verifyStyles = true;
+    else if (arg === "--base") args.base = argv[++i] ?? "HEAD";
     else if (arg === "--plan") args.plan = argv[++i];
     else if (arg === "--copy") {
       const mode = argv[++i];
@@ -9923,6 +10049,7 @@ var HELP = `bettercms-convert ${VERSION}
   bettercms-convert --componentize --brief <json> --plan <json> --root . [options]
   bettercms-convert --forms --brief <json> --root . [options]
   bettercms-convert --xray <dist-dir>
+  bettercms-convert --verify-styles [--base <ref>] --root .
 
   --brief <file>       The conversion brief, as get_conversion_brief returns it. Required.
   --componentize       Lift each planned SECTION into a component the CMS can reorder.
@@ -9938,6 +10065,12 @@ var HELP = `bettercms-convert ${VERSION}
                        after a build to see what the next conversion still has to reach,
                        without deploying. Takes no --brief. Exit 2 with --strict when any
                        page is above 2 %.
+  --verify-styles      Check that no class, className or style was changed by hand: every
+                       token in the repository is compared with --base (default HEAD).
+                       Conversion maps content into the CMS and never edits the site's
+                       design; exit 1 lists each removed or added token with file:line.
+                       Include the result in the conversion receipt as styleEdits.
+  --base <ref>         With --verify-styles: the commit before the conversion.
   --plan <file>        The componentize plan, as get_componentize_plan returns it.
                        Required with --componentize.
   --copy bind|instance Which copy model the plan is expected to describe. Default: bind
@@ -10095,6 +10228,31 @@ ${pages.length - over} of ${pages.length} pages at or under 2% unaddressable
 `);
   return strict && over > 0 ? 2 : 0;
 }
+function treeAt(root, ref) {
+  const git = (...argv) => execFileSync("git", ["-C", root, ...argv], { encoding: "utf-8", maxBuffer: 64 * 1024 * 1024 });
+  let listed;
+  try {
+    listed = git("ls-tree", "-r", "--name-only", ref);
+  } catch {
+    throw new CliError(`--base ${ref} is not a commit in ${root}.`);
+  }
+  return listed.split("\n").filter((path) => path && isSourceCandidate(path)).map((path) => ({ path, content: git("show", `${ref}:${path}`) }));
+}
+async function verifyStyles(root, base, verbose) {
+  const edits = styleEdits(treeAt(root, base), await readTree(root, verbose));
+  process.stdout.write(`${JSON.stringify({ base, styleEdits: edits }, null, 2)}
+`);
+  if (edits.length === 0) {
+    process.stderr.write(`styles: unchanged since ${base}.
+`);
+    return 0;
+  }
+  process.stderr.write(
+    `styles: ${edits.length} class/style token(s) changed since ${base}. Conversion must not edit the site's design \u2014 restore these, the CMS keeps inline markup as written:
+` + edits.map((e) => `  ${e.file}:${e.line}  ${e.change === "removed" ? "-" : "+"} ${e.attr} ${e.token}`).join("\n") + "\n"
+  );
+  return 1;
+}
 async function main() {
   const args = parseArgs(process.argv.slice(2));
   if (args.help) {
@@ -10105,6 +10263,7 @@ async function main() {
     if (args.brief) throw new CliError("--xray measures a build; it reads no brief. See --help.");
     return await xray(resolve(args.xray), args.strict);
   }
+  if (args.verifyStyles) return await verifyStyles(resolve(args.root), args.base, args.verbose);
   if (!args.brief) throw new CliError("--brief <file> is required. See --help.");
   if (args.plan && !args.componentize) {
     throw new CliError("--plan is only read with --componentize. See --help.");