@bettercms-ai/convert 0.17.2 → 0.18.0

package/dist/index.d.ts

@@ -951,7 +951,7 @@ declare function attrsFor(path: string, kind: string, props?: AttrBinding[], sco
 declare function propsAttribute(props: AttrBinding[]): string;
 
 /** Bumped whenever the emitted source changes. `isKnownHelper` upgrades anything older. */
-declare const HELPER_VERSION = 7;
+declare const HELPER_VERSION = 8;
 /** Where each dialect's helper lives. Null = this dialect reads nothing at build time. */
 declare const HELPER_PATH: Record<Dialect, string | null>;
 /** The directory the snapshots live in, at the repository root. */
@@ -1196,6 +1196,14 @@ interface ImageContext {
     snapshotName: (slug: string) => string;
     /** How this file reads its route parameter, on a dynamic route. Null off one. */
     slug: string | null;
+    /**
+     * Follow a prop into the component that renders it. @see drillProp
+     *
+     * Most Astro pages import an image and hand it to a section component (`<Hero src={hero} />`),
+     * which renders the `<Image>`. Without this, every such image was `IMAGE_ASSET_UNRESOLVED` and a
+     * converted site had no editable images at all.
+     */
+    drill?: (component: string, prop: string, kind: string) => Promise<DrillOutcome>;
 }
 interface ImageResult {
     splices: ImageSplice[];
@@ -1205,6 +1213,18 @@ interface ImageResult {
         key: string;
         reason: "IMAGE_ASSET_UNRESOLVED";
     }[];
+    /** Edits to the components an image prop was drilled into. */
+    componentEdits: {
+        file: string;
+        splices: ImageSplice[];
+    }[];
+    /** Each drilled image: the component file, the prop, the path, and the call-site literal. */
+    props: {
+        file: string;
+        prop: string;
+        path: string;
+        literal: string;
+    }[];
 }
 /**
  * Which local binding this built url came from, or null when nothing here says.
@@ -1231,7 +1251,7 @@ declare function assetImport(parsed: ParsedFile, dialect: Dialect, original: str
  * one, the import the bundler already optimised when there is not — so a build against the
  * committed `{}` stub renders exactly the image the repository renders today.
  */
-declare function bindImages(ctx: ImageContext, targets: ImageTarget[]): ImageResult;
+declare function bindImages(ctx: ImageContext, targets: ImageTarget[]): Promise<ImageResult>;
 
 /** The recipe an Astro site needs instead — never auto-migrate a site to SSR. */
 declare const SSR_DRAFT_RECIPE: string;

package/dist/index.js

@@ -3185,6 +3185,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: [],
@@ -3201,6 +3202,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 = [];
@@ -3210,6 +3212,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)) {
@@ -4067,6 +4078,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 [];
@@ -4104,8 +4136,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();
@@ -4113,6 +4145,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;
@@ -4120,16 +4169,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,
@@ -4144,7 +4187,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])
@@ -4276,8 +4319,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;
@@ -4443,7 +4496,8 @@ var HISTORICAL = {
     3: "d4305b2983adcb456ef782d35ea9d083a04465c2b68baa0d44a084dfa01a9227",
     4: "a5742f64dacb1b26ee6dd5e1469a54871487934c71bc8267df19e3a80e417595",
     5: "0472fe3ffdcfa49e719c7b9da9cb63b6eba637cc22783bb00c3c2cadd3d800da",
-    6: "c907e7245578d947c6541b1ab2c5c6659ea7789a1519e895b4a4aed122c6f649"
+    6: "c907e7245578d947c6541b1ab2c5c6659ea7789a1519e895b4a4aed122c6f649",
+    7: "f22514ef48c50230985e605bea6cf9bf41756384a7dc80603e347baba9b65d93"
   },
   "src/lib/bcms-content.ts": {
     1: "ae72ae14d706943d481c880d70da5789b4816ba1ba319a10fbc63ded4d0b42f2",
@@ -4451,7 +4505,8 @@ var HISTORICAL = {
     3: "0be9c73160361882a038552bc02673c14ed532287823dabaafe36179bc55ed7e",
     4: "0146d027a727ecd3c9e3fc336fcf1299b59ddf75b04091c05703f3f983ec28af",
     5: "c8c93655320fa65664611ba84541f3fa7bfa292cc9a2fd655373440b99049fba",
-    6: "63f1fa29e47e70c5193b81ee24addb238ba100247124d55bc17713102d587df5"
+    6: "63f1fa29e47e70c5193b81ee24addb238ba100247124d55bc17713102d587df5",
+    7: "ed92fb88de953d9951abbe6a1edae1d048f4050eaf6fb607ac08167f94d8bcc7"
   },
   "composables/bcms-content.ts": {
     1: "c272412532efed7db64b6cf313b2bed4291f9951430412289c8a588b7f565407",
@@ -4459,7 +4514,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");
@@ -9582,8 +9638,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));
@@ -9591,6 +9660,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: [] };