@jxsuite/compiler 1.3.0 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/compiler",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "description": "Jx static HTML compiler, island detector, and site builder",
   "license": "MIT",
   "repository": {
@@ -19,6 +19,7 @@
   "type": "module",
   "exports": {
     ".": "./src/compiler.ts",
+    "./asset-mounts": "./src/site/asset-mounts.ts",
     "./format-host": "./src/site/format-host.ts",
     "./project-sections": "./src/site/project-sections.ts",
     "./schema-command": "./src/site/schema-command.ts",
@@ -45,16 +46,16 @@
   },
   "dependencies": {
     "@apidevtools/json-schema-ref-parser": "^15.5.0",
-    "@jxsuite/create": "^1.2.0",
-    "@jxsuite/runtime": "^1.3.0",
-    "@jxsuite/schema": "^1.3.0",
+    "@jxsuite/create": "^1.2.2",
+    "@jxsuite/runtime": "^1.3.2",
+    "@jxsuite/schema": "^1.5.0",
     "esbuild": "^0.28.1",
     "sharp": "^0.35.3"
   },
   "devDependencies": {
-    "@happy-dom/global-registrator": "^20.11.0",
-    "@jxsuite/connector": "^0.4.0",
-    "@jxsuite/parser": "^1.3.0",
+    "@happy-dom/global-registrator": "^20.11.1",
+    "@jxsuite/connector": "^0.4.2",
+    "@jxsuite/parser": "^1.4.1",
     "@types/mdast": "^4.0.4"
   }
 }

package/src/shared.ts

@@ -77,8 +77,133 @@ export function emitFormulaFn(def: { parameters?: unknown[] }, compiledBody: str
   }
   return `(..._a) => { const _args = { ${entries.join(", ")} }; return ${compiledBody}; }`;
 }
+
+/**
+ * Emit the import-clause binding for one Function-def `$src` entry.
+ *
+ * `$export` names the export inside the module and defaults to the state key (spec.md §5.3 4d).
+ * When the two differ the clause has to alias, because the local name the rest of the generated
+ * module calls is the state key — importing the bare key instead requests an export the module does
+ * not have, and the browser rejects the whole module at link time.
+ *
+ * Aliasing rather than renaming call sites is what makes the awkward cases work: two keys may alias
+ * the same export, a key may collide with another entry's export name, and `$export: "default"` is
+ * only reachable as `default as key`.
+ *
+ * @param {string} key - State key, and the local binding name
+ * @param {unknown} def - The Function definition
+ * @returns {string}
+ */
+export function srcImportBinding(key: string, def: unknown) {
+  const declared = (def as { $export?: unknown } | null | undefined)?.$export;
+  const exportName = typeof declared === "string" && declared !== "" ? declared : key;
+  return exportName === key ? key : `${exportName} as ${key}`;
+}
+
+/**
+ * Emit the auto-fetch `effect()` for a `$prototype: "Request"` state entry.
+ *
+ * Shared by the client and element targets so both honour `manual`, template URLs and
+ * `method`/`headers`/`body` the same way. They diverged once: the element target emitted no fetch
+ * at all, leaving every Request entry permanently `null` with nothing thrown.
+ *
+ * A template `url` is read inside the effect, so the fetch re-runs whenever the interpolated state
+ * changes; an URL that still interpolates to `undefined` is skipped rather than fetched.
+ *
+ * @param {string} key - State key receiving the response
+ * @param {JxPrototypeDef} def - The Request definition
+ * @param {{ statePrefix?: string; indent?: string; collect?: string }} [opts] - `statePrefix` is
+ *   the expression the emitted code assigns through (`state` for the client module scope,
+ *   `this.state` inside a custom element); `indent` prefixes every emitted line; `collect`, when
+ *   given, is an array expression the effect runner is pushed onto so the caller can `stop()` it on
+ *   teardown.
+ * @returns {string}
+ */
+export function emitRequestFetch(
+  key: string,
+  def: JxPrototypeDef,
+  opts: { statePrefix?: string; indent?: string; collect?: string } = {},
+) {
+  const { statePrefix = "state", indent = "", collect } = opts;
+  const { url } = def;
+  const isTemplateUrl = isTemplateString(url);
+  const method = def.method ?? "GET";
+
+  if (def.manual) {
+    return `${indent}// ${key}: manual Request — fetch triggered by user action`;
+  }
+
+  const lines: string[] = [
+    `// ${key}: auto-fetch from ${isTemplateUrl ? "(dynamic URL)" : url}`,
+    collect ? `${collect}.push(effect(() => {` : "effect(() => {",
+  ];
+
+  if (isTemplateUrl) {
+    lines.push(
+      `  const url = \`${withStatePrefix(url as string, statePrefix)}\`;`,
+      '  if (!url || url === "undefined" || url.includes("undefined")) return;',
+    );
+  } else {
+    lines.push(`  const url = ${JSON.stringify(url)};`);
+  }
+
+  const fetchOpts: string[] = [];
+  if (method !== "GET") {
+    fetchOpts.push(`method: ${JSON.stringify(method)}`);
+  }
+  if (def.headers) {
+    fetchOpts.push(`headers: ${JSON.stringify(def.headers)}`);
+  }
+  if (def.body) {
+    const bodyStr =
+      typeof def.body === "object"
+        ? JSON.stringify(JSON.stringify(def.body))
+        : JSON.stringify(def.body);
+    fetchOpts.push(`body: ${bodyStr}`);
+  }
+
+  const optsStr = fetchOpts.length > 0 ? `, { ${fetchOpts.join(", ")} }` : "";
+  lines.push(
+    `  fetch(url${optsStr})`,
+    "    .then(r => r.ok ? r.json() : Promise.reject(r.statusText))",
+    `    .then(d => { ${statePrefix}.${key} = d; })`,
+    `    .catch(e => { ${statePrefix}.${key} = { error: String(e) }; });`,
+    collect ? "}));" : "});",
+  );
+
+  return lines.map((line) => `${indent}${line}`).join("\n");
+}
+
+/**
+ * Rebase the bare `state.` reads in a template string onto `statePrefix`.
+ *
+ * Only the `${…}` interpolation holes are rewritten. A blanket replace would corrupt the literal
+ * text around them — `/api/state.json?q=${state.q}` would request `/api/this.state.json` — and the
+ * `\b` guard keeps an identifier that merely ends in `state` (`substate.z`) intact. Reads already
+ * carrying the prefix are left alone.
+ *
+ * @param {string} str
+ * @param {string} statePrefix
+ * @returns {string}
+ */
+function withStatePrefix(str: string, statePrefix: string) {
+  if (statePrefix === "state") {
+    return str;
+  }
+  return str.replaceAll(
+    /\$\{([^}]*)\}/g,
+    (_match: string, expr: string) =>
+      `\${${expr.replaceAll(/(?<!this\.)\bstate\./g, `${statePrefix}.`)}}`,
+  );
+}
 export type { ExpressionNode } from "@jxsuite/runtime/expression";
 
+/**
+ * Non-enumerable marker on a build-time scope listing the state keys that hold no build-time value.
+ * Non-enumerable so it stays out of `Object.entries(scope)` and out of template evaluation.
+ */
+const RUNTIME_ONLY_KEYS = Symbol("jx.runtimeOnlyStateKeys");
+
 // CDN defaults
 export const DEFAULT_REACTIVITY_SRC = "https://esm.sh/@vue/reactivity@3.5.40";
 export const DEFAULT_LIT_HTML_SRC = "https://esm.sh/lit-html@3.3.0";
@@ -275,6 +400,8 @@ export interface CompileContext {
   scope: Record<string, unknown>;
   scopeDefs: Record<string, unknown>;
   media: Record<string, string>;
+  /** True inside a `<pre>`-like subtree, where emitters must not indent nested children. */
+  preformatted?: boolean;
 }
 
 export function createCompileContext(
@@ -299,6 +426,18 @@ export function buildInitialScope(
   parentScope: Record<string, unknown> | null = null,
 ) {
   const scope = Object.create(parentScope ?? null) as Record<string, unknown>;
+  // Keys whose real value only exists after hydration, so prerender must not interpolate them —
+  // See `readsRuntimeOnlyState`. Seeded from the parent so nested scopes inherit the marks.
+  const inherited = (parentScope as Record<PropertyKey, unknown> | null)?.[RUNTIME_ONLY_KEYS];
+  const runtimeOnly = new Set<string>(inherited instanceof Set ? (inherited as Set<string>) : []);
+  // Attached up front, and mutated in place by the passes below, so the template pass at the end can
+  // Consult the marks the earlier passes added.
+  Object.defineProperty(scope, RUNTIME_ONLY_KEYS, {
+    configurable: true,
+    enumerable: false,
+    value: runtimeOnly,
+    writable: true,
+  });
 
   for (const [key, def] of Object.entries(defs)) {
     if (typeof def !== "object" || def === null || Array.isArray(def)) {
@@ -315,9 +454,13 @@ export function buildInitialScope(
     }
   }
 
+  // Template-string entries are deferred to a third pass: whether one is resolvable depends on the
+  // Runtime-only marks the loop below adds, and key order must not decide the answer.
+  const templateDefs: [string, string][] = [];
+
   for (const [key, def] of Object.entries(defs)) {
     if (typeof def === "string" && isTemplateString(def)) {
-      defineLazyScopeValue(scope, key, () => evaluateStaticTemplate(def, scope));
+      templateDefs.push([key, def]);
       continue;
     }
     if (!def || typeof def !== "object") {
@@ -359,18 +502,27 @@ export function buildInitialScope(
           void runStatements(body, s ?? scope, event ?? null);
         });
       } else if (typeof def.body === "string") {
-        const names = def.parameters ? paramNames(def.parameters) : (def.arguments ?? []);
+        const declared = def.parameters ? paramNames(def.parameters) : (def.arguments ?? []);
         const { body } = def;
-        const fn = new Function("state", ...names, body) as (
-          state: Record<string, unknown>,
-        ) => unknown;
+        // Declared names bind by name, not by position (spec.md §5.3 4d): a parameter literally
+        // Named `state` receives the scope, anything else receives the event. `state` is prepended
+        // When undeclared so a body may always reference it. Unconditionally prepending it instead —
+        // The older behaviour here — produced a duplicate parameter for the `["state", "event"]`
+        // Form that examples/components/task-manager.json uses, leaving `state` undefined.
+        const params = declared.includes("state") ? declared : ["state", ...declared];
+        const fn = new Function(...params, body) as (...args: unknown[]) => unknown;
+        const invoke = (state: Record<string, unknown>, event?: unknown) =>
+          fn(...params.map((name) => (name === "state" ? state : event)));
         if (bodyReturnsValue(body)) {
-          defineLazyScopeValue(scope, key, () => fn(scope));
+          defineLazyScopeValue(scope, key, () => invoke(scope));
         } else {
-          setOwnScopeValue(scope, key, fn);
+          setOwnScopeValue(scope, key, invoke);
         }
       } else {
+        // Bodyless `$src` Function — the real implementation is only loaded in the browser, so this
+        // Is a placeholder standing in for its callable shape, never its value.
         setOwnScopeValue(scope, key, () => {});
+        runtimeOnly.add(key);
       }
       continue;
     }
@@ -379,9 +531,24 @@ export function buildInitialScope(
       (def.$prototype === "LocalStorage" || def.$prototype === "SessionStorage")
     ) {
       setOwnScopeValue(scope, key, cloneValue(def.default ?? null));
+      continue;
+    }
+    if (isPrototypeDef(def) && def.$prototype === "Request") {
+      // A client-timing fetch has no build-time value at all — not even a placeholder.
+      runtimeOnly.add(key);
     }
   }
 
+  for (const [key, template] of templateDefs) {
+    // A state entry that interpolates a runtime-only key cannot resolve until hydration either, so
+    // It is runtime-only in turn. Without this, prerender would bake the failed evaluation (`null`)
+    // Into every template that reads *this* entry, one step removed from the original.
+    if (readsRuntimeOnlyState(template, scope)) {
+      runtimeOnly.add(key);
+    }
+    defineLazyScopeValue(scope, key, () => evaluateStaticTemplate(template, scope));
+  }
+
   return scope;
 }
 
@@ -465,12 +632,51 @@ export function resolveRefValue(refValue: unknown, scope: Record<string, unknown
   return scope[refValue] ?? null;
 }
 
+/**
+ * Detect whether a template string interpolates a state value that only exists after hydration.
+ *
+ * Evaluating one of those at build time is worse than leaving it alone. The build-time scope holds
+ * a `() => {}` placeholder for a bodyless `$src` Function and nothing at all for a `Request`, so
+ * the template resolves to text like `() => {}`, `undefined` or `""` — and that text _replaces_ the
+ * template in the emitted HTML, so the client-side binding is destroyed rather than merely wrong.
+ * Returning "unresolvable" instead leaves the template in place for the client to populate.
+ *
+ * A read that _calls_ the value is left alone: invoking a build-time callable is exactly how named
+ * formulas (spec.md §19.4c) are meant to be used during prerender.
+ *
+ * @param {string} str
+ * @param {Record<string, unknown>} scope
+ * @returns {boolean}
+ */
+function readsRuntimeOnlyState(str: string, scope: Record<string, unknown>) {
+  if (!scope) {
+    return false;
+  }
+  const runtimeOnly = (scope as Record<PropertyKey, unknown>)[RUNTIME_ONLY_KEYS];
+  for (const match of str.matchAll(/\bstate\.([A-Za-z_$][\w$]*)\s*(\()?/g)) {
+    if (match[2]) {
+      continue;
+    }
+    const key = match[1] as string;
+    if (runtimeOnly instanceof Set && runtimeOnly.has(key)) {
+      return true;
+    }
+    if (typeof scope[key] === "function") {
+      return true;
+    }
+  }
+  return false;
+}
+
 /**
  * @param {string} str
  * @param {Record<string, unknown>} scope
  * @returns {unknown}
  */
 export function evaluateStaticTemplate(str: string, scope: Record<string, unknown>) {
+  if (readsRuntimeOnlyState(str, scope)) {
+    return null;
+  }
   try {
     const singleExprMatch = str.match(/^\$\{(.+)\}$/s);
     if (singleExprMatch) {
@@ -613,6 +819,26 @@ export function buildAttrs(def: JxElement | JxMutableNode, scope: Record<string,
   return out;
 }
 
+/**
+ * Tags rendered with `white-space: pre` by every UA, where inter-element whitespace is content
+ * rather than formatting. Emitters indent nested children for readability; inside these tags — and
+ * anywhere below them, since `white-space` inherits — that indentation would render as literal
+ * blank lines and leading spaces, so children must be concatenated with no separator.
+ */
+export const PREFORMATTED_TAGS = new Set(["pre", "textarea", "listing", "plaintext", "xmp"]);
+
+/**
+ * The separator to place between an element's compiled children: none inside a preformatted
+ * subtree, a newline plus `indent` elsewhere.
+ *
+ * @param {boolean | undefined} preformatted
+ * @param {string} [indent]
+ * @returns {string}
+ */
+export function childSeparator(preformatted: boolean | undefined, indent = "  "): string {
+  return preformatted ? "" : `\n${indent}`;
+}
+
 /**
  * Build the inner HTML (textContent or children) for a node.
  *
@@ -622,6 +848,7 @@ export function buildAttrs(def: JxElement | JxMutableNode, scope: Record<string,
  *   scope: Record<string, unknown>;
  *   scopeDefs: Record<string, unknown>;
  *   media: Record<string, string>;
+ *   preformatted?: boolean;
  * }} context
  * @param {(def: unknown, raw: unknown, context: unknown) => string} childCompiler
  * @returns {string}
@@ -633,6 +860,7 @@ export function buildInner(
     scope: Record<string, unknown> | null;
     scopeDefs: Record<string, unknown>;
     media: Record<string, string>;
+    preformatted?: boolean;
   },
   childCompiler: (def: unknown, raw: unknown, context: unknown) => string,
 ) {
@@ -652,7 +880,7 @@ export function buildInner(
         const childRaw = (rawChildren as (JxElement | string)[] | undefined)?.[i] ?? c;
         return childCompiler(c, childRaw, context);
       })
-      .join("\n  ");
+      .join(childSeparator(context.preformatted));
   }
   return "";
 }

package/src/site/asset-mounts.ts

@@ -0,0 +1,140 @@
+/**
+ * Asset-mounts — host side of the extension `assets` capability (specs/extensions.md §8.5).
+ *
+ * A section-owner class publishes directories that may sit outside the project root (an external
+ * content source's co-located images) at a stable site URL. The build resolves those URLs while
+ * optimizing images, collects the ones its compiled output actually references, and copies just
+ * those files into dist — the source directory itself is never mirrored, so entry files never leak
+ * into the build output.
+ *
+ * @module asset-mounts
+ * @docs framework/site/images
+ */
+
+import { cpSync, existsSync, mkdirSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import {
+  collectAssetUrls,
+  normalizeAssetPrefix,
+  resolveAssetUrl,
+} from "@jxsuite/schema/asset-paths";
+import type { AssetMount } from "@jxsuite/schema/asset-paths";
+import type { ExtensionRegistry } from "@jxsuite/schema/extension-registry";
+import type { ProjectConfig } from "@jxsuite/schema/types";
+
+/**
+ * Gather every asset mount contributed by the project's extensions.
+ *
+ * Gating matches `emit` (extensions.md §8.4): a class owning a project section contributes only
+ * when the project declares a non-empty value for that section. Mounts claiming the same URL prefix
+ * for different directories are a configuration error — the first wins and the clash is reported.
+ *
+ * @param {ExtensionRegistry} registry - The project's extension registry
+ * @param {ProjectConfig} projectConfig
+ * @param {string} projectRoot - Absolute project root
+ * @returns {Promise<{ mounts: AssetMount[]; errors: string[] }>}
+ */
+export async function loadAssetMounts(
+  registry: ExtensionRegistry,
+  projectConfig: ProjectConfig,
+  projectRoot: string,
+): Promise<{ mounts: AssetMount[]; errors: string[] }> {
+  const mounts: AssetMount[] = [];
+  const errors: string[] = [];
+  const byPrefix = new Map<string, AssetMount>();
+
+  for (const entry of registry.assetProviders()) {
+    const sectionKey = entry.project?.key;
+    const sectionValue = sectionKey
+      ? (projectConfig as unknown as Record<string, unknown>)[sectionKey]
+      : undefined;
+    if (
+      sectionKey &&
+      (sectionValue == null ||
+        (typeof sectionValue === "object" && Object.keys(sectionValue).length === 0))
+    ) {
+      continue;
+    }
+    try {
+      const declared = (await entry.call("assets", sectionValue ?? null, {
+        projectConfig,
+        root: projectRoot,
+      })) as AssetMount[] | null;
+      for (const mount of declared ?? []) {
+        if (!mount?.urlPrefix || !mount.dir) {
+          continue;
+        }
+        const normalized: AssetMount = {
+          dir: mount.dir,
+          urlPrefix: normalizeAssetPrefix(mount.urlPrefix),
+        };
+        const prior = byPrefix.get(normalized.urlPrefix);
+        if (prior) {
+          if (prior.dir !== normalized.dir) {
+            errors.push(
+              `Asset mount conflict: "${normalized.urlPrefix}" is claimed by both ` +
+                `"${prior.dir}" and "${normalized.dir}"`,
+            );
+          }
+          continue;
+        }
+        byPrefix.set(normalized.urlPrefix, normalized);
+        mounts.push(normalized);
+      }
+    } catch (error) {
+      errors.push(`Error in ${entry.name}.assets: ${(error as Error).message}`);
+    }
+  }
+
+  return { errors, mounts };
+}
+
+/**
+ * Add every mounted URL referenced by a compiled artifact to `into`.
+ *
+ * @param {string} text - Compiled HTML or CSS
+ * @param {readonly AssetMount[]} mounts
+ * @param {Set<string>} into - Accumulator across the whole build
+ */
+export function collectAssetRefs(text: string, mounts: readonly AssetMount[], into: Set<string>) {
+  if (mounts.length === 0 || !text) {
+    return;
+  }
+  for (const url of collectAssetUrls(text, mounts)) {
+    into.add(url);
+  }
+}
+
+/**
+ * Copy referenced mounted assets into the build output, each at its own URL path.
+ *
+ * @param {Iterable<string>} urls - Mounted URLs collected from the compiled output
+ * @param {readonly AssetMount[]} mounts
+ * @param {string} outDir - Absolute build output directory
+ * @returns {{ copied: number; missing: string[] }} Files written, and URLs that resolved to nothing
+ */
+export function copyMountedAssets(
+  urls: Iterable<string>,
+  mounts: readonly AssetMount[],
+  outDir: string,
+): { copied: number; missing: string[] } {
+  let copied = 0;
+  const missing: string[] = [];
+
+  for (const url of urls) {
+    // The single containment gate is resolveAssetUrl: it decodes once and refuses `.`/`..`,
+    // Empty segments, and undecodable input, so a surviving URL cannot escape either the mount
+    // Directory it reads from or the outDir path it writes to.
+    const source = resolveAssetUrl(mounts, url);
+    if (!source || !existsSync(source)) {
+      missing.push(url);
+      continue;
+    }
+    const target = resolve(outDir, decodeURIComponent(url).replace(/^\//, ""));
+    mkdirSync(dirname(target), { recursive: true });
+    cpSync(source, target);
+    copied += 1;
+  }
+
+  return { copied, missing };
+}

package/src/site/image-transform.ts

@@ -16,7 +16,9 @@ import {
   processImage,
 } from "./image-optimizer.ts";
 import { getCached, getImageCacheDir, setCached } from "./image-cache.ts";
+import { resolveAssetUrl } from "@jxsuite/schema/asset-paths";
 
+import type { AssetMount } from "@jxsuite/schema/asset-paths";
 import type { ImageConfig, ImageManifest } from "./image-optimizer.ts";
 import type { JxDocument, JxMutableNode } from "@jxsuite/schema/types";
 import type { CacheManifest } from "./image-cache.ts";
@@ -193,13 +195,20 @@ function isAllowedRemote(src: string, config: ImageConfig) {
 /**
  * Resolve a src path to an absolute filesystem path.
  *
- * Handles paths starting with "/" (relative to public dir or project root).
+ * Extension asset mounts win first — they publish directories that may sit outside the project root
+ * (extensions.md §8.5), so a mounted src has no other resolution. Otherwise paths starting with "/"
+ * resolve into `public/`, and relative ones from the project root.
  *
  * @param {string} src
  * @param {string} projectRoot
+ * @param {readonly AssetMount[]} [mounts]
  * @returns {string}
  */
-function resolveImagePath(src: string, projectRoot: string) {
+function resolveImagePath(src: string, projectRoot: string, mounts?: readonly AssetMount[]) {
+  const mounted = mounts?.length ? resolveAssetUrl(mounts, src) : null;
+  if (mounted) {
+    return mounted;
+  }
   if (src.startsWith("/")) {
     return resolve(projectRoot, "public", src.slice(1));
   }
@@ -218,6 +227,7 @@ function resolveImagePath(src: string, projectRoot: string) {
  * @param {string} projectRoot
  * @param {CacheManifest | null} cache - Variant cache (build mode); unused in cloudflare mode
  * @param {ImageMetaCache} [metaCache] - Dimension/hash memo (cloudflare mode)
+ * @param {readonly AssetMount[]} [mounts] - Extension asset mounts (extensions.md §8.5)
  * @returns {Promise<{ imageRefs: Map<string, ImageManifest> }>}
  */
 export async function transformImageNodes(
@@ -226,6 +236,7 @@ export async function transformImageNodes(
   projectRoot: string,
   cache: CacheManifest | null,
   metaCache?: ImageMetaCache,
+  mounts: readonly AssetMount[] = [],
 ) {
   const imageRefs = new Map<string, ImageManifest>();
 
@@ -234,7 +245,7 @@ export async function transformImageNodes(
   }
 
   const meta = metaCache ?? new Map();
-  await walkAndTransform(doc, config, projectRoot, cache, meta, imageRefs);
+  await walkAndTransform(doc, config, projectRoot, cache, meta, imageRefs, mounts);
 
   return { imageRefs };
 }
@@ -246,6 +257,7 @@ export async function transformImageNodes(
  * @param {CacheManifest | null} cache
  * @param {ImageMetaCache} metaCache
  * @param {Map<string, ImageManifest>} imageRefs
+ * @param {readonly AssetMount[]} mounts
  */
 async function walkAndTransform(
   node: JxMutableNode | JxDocument,
@@ -254,13 +266,14 @@ async function walkAndTransform(
   cache: CacheManifest | null,
   metaCache: ImageMetaCache,
   imageRefs: Map<string, ImageManifest>,
+  mounts: readonly AssetMount[],
 ) {
   if (!node || typeof node !== "object") {
     return;
   }
 
   if (node.tagName === "img") {
-    await transformImgNode(node, config, projectRoot, cache, metaCache, imageRefs);
+    await transformImgNode(node, config, projectRoot, cache, metaCache, imageRefs, mounts);
   }
 
   if (typeof node.innerHTML === "string" && node.innerHTML.includes("<img")) {
@@ -271,6 +284,7 @@ async function walkAndTransform(
       cache,
       metaCache,
       imageRefs,
+      mounts,
     );
   }
 
@@ -279,7 +293,7 @@ async function walkAndTransform(
       if (typeof child === "string") {
         continue;
       }
-      await walkAndTransform(child, config, projectRoot, cache, metaCache, imageRefs);
+      await walkAndTransform(child, config, projectRoot, cache, metaCache, imageRefs, mounts);
     }
   }
 }
@@ -291,6 +305,7 @@ async function walkAndTransform(
  * @param {CacheManifest | null} cache
  * @param {ImageMetaCache} metaCache
  * @param {Map<string, ImageManifest>} imageRefs
+ * @param {readonly AssetMount[]} mounts
  */
 async function transformImgNode(
   node: JxMutableNode | JxDocument,
@@ -299,6 +314,7 @@ async function transformImgNode(
   cache: CacheManifest | null,
   metaCache: ImageMetaCache,
   imageRefs: Map<string, ImageManifest>,
+  mounts: readonly AssetMount[],
 ) {
   if (!node.attributes) {
     node.attributes = {};
@@ -325,7 +341,7 @@ async function transformImgNode(
     // Fit=scale-down avoid upscaling past the source size.
     srcset = buildCloudflareSrcset(src, config, Infinity, null);
   } else {
-    const absoluteSrc = resolveImagePath(src, projectRoot);
+    const absoluteSrc = resolveImagePath(src, projectRoot, mounts);
     if (!existsSync(absoluteSrc)) {
       return;
     }
@@ -382,6 +398,7 @@ const DATA_NO_OPT_RE = /\bdata-no-optimize\b/;
  * @param {CacheManifest | null} cache
  * @param {ImageMetaCache} metaCache
  * @param {Map<string, ImageManifest>} imageRefs
+ * @param {readonly AssetMount[]} mounts
  * @returns {Promise<string>}
  */
 async function transformInnerHtmlImages(
@@ -391,6 +408,7 @@ async function transformInnerHtmlImages(
   cache: CacheManifest | null,
   metaCache: ImageMetaCache,
   imageRefs: Map<string, ImageManifest>,
+  mounts: readonly AssetMount[],
 ) {
   /** @type {{ match: string; replacement: string }[]} */
   const replacements = [];
@@ -418,7 +436,7 @@ async function transformInnerHtmlImages(
       continue;
     }
 
-    const absoluteSrc = remote ? null : resolveImagePath(src, projectRoot);
+    const absoluteSrc = remote ? null : resolveImagePath(src, projectRoot, mounts);
     if (absoluteSrc && !existsSync(absoluteSrc)) {
       continue;
     }