@decocms/blocks-admin 7.0.0

package/src/admin/invoke.ts

@@ -0,0 +1,290 @@
+/**
+ * Handles /deco/invoke -- executes loaders and actions by key.
+ *
+ * Supports:
+ * - Single invoke by key: POST /deco/invoke/some/loader.ts
+ * - Batch invoke: POST /deco/invoke with { key: payload } body
+ * - FormData parsing for file uploads and form submissions
+ * - `?select=field1,field2` to pick fields from the result
+ * - Resolves __resolveType in batch payloads
+ *
+ * Handlers can write to `RequestContext.responseHeaders` to forward
+ * headers (e.g., Set-Cookie from VTEX checkout). The invoke endpoint
+ * copies those headers into the final HTTP Response.
+ */
+
+import { RequestContext } from "@decocms/blocks/sdk/requestContext";
+
+export type InvokeLoader = (props: any, request: Request) => Promise<any>;
+export type InvokeAction = (props: any, request: Request) => Promise<any>;
+
+// Additive handler registry — registerInvokeHandlers() adds to this map.
+const handlerRegistry = new Map<string, InvokeLoader | InvokeAction>();
+
+// Legacy getter-based registries (backward compat for setInvokeLoaders/Actions).
+let getRegisteredLoaders: () => Record<string, InvokeLoader> = () => ({});
+let getRegisteredActions: () => Record<string, InvokeAction> = () => ({});
+
+export function setInvokeLoaders(getter: () => Record<string, InvokeLoader>) {
+  getRegisteredLoaders = getter;
+}
+
+export function setInvokeActions(getter: () => Record<string, InvokeAction>) {
+  getRegisteredActions = getter;
+}
+
+/**
+ * Additive handler registration — adds handlers without replacing existing ones.
+ * First registration wins: if a key already exists, it is NOT overwritten.
+ * Use this for automatic manifest-based registration from setupApps().
+ */
+export function registerInvokeHandlers(
+  handlers: Record<string, InvokeLoader | InvokeAction>,
+): void {
+  for (const [key, handler] of Object.entries(handlers)) {
+    if (!handlerRegistry.has(key)) {
+      handlerRegistry.set(key, handler);
+    }
+  }
+}
+
+/**
+ * Clear all registered invoke handlers.
+ * Called by setupApps() before re-registering on hot-reload.
+ */
+export function clearInvokeHandlers(): void {
+  handlerRegistry.clear();
+}
+
+const JSON_HEADERS = { "Content-Type": "application/json" } as const;
+
+/**
+ * Copy headers that handlers wrote to `RequestContext.responseHeaders`
+ * onto an outgoing Response.
+ *
+ * Why this exists and is not a `for…of headers.entries()` one-liner:
+ * `Headers.entries()` (and `forEach`) collapses multiple `Set-Cookie`
+ * values into a single comma-joined string (per the Fetch spec).
+ * Browsers silently discard cookies whose value contains an unescaped
+ * comma, so every VTEX cart action that returns multiple cookies
+ * (`checkout.vtex.com__orderFormId`, `segment`, `sc`, `vtex_session`…)
+ * loses them in transit. The next request creates a fresh empty
+ * orderForm and the user lands on /checkout with an empty cart.
+ *
+ * `Headers.getSetCookie()` is the spec-blessed way to read the
+ * un-collapsed list. We append each value individually onto the
+ * response so the browser sees N distinct `Set-Cookie` headers, and
+ * use `forEach` to copy any non-cookie headers as-is.
+ */
+function forwardCtxHeadersTo(response: Response): void {
+  const ctx = RequestContext.current;
+  if (!ctx) return;
+  const cookies =
+    typeof ctx.responseHeaders.getSetCookie === "function"
+      ? ctx.responseHeaders.getSetCookie()
+      : [];
+  for (const cookie of cookies) {
+    response.headers.append("set-cookie", cookie);
+  }
+  ctx.responseHeaders.forEach((value, key) => {
+    if (key.toLowerCase() !== "set-cookie") {
+      response.headers.append(key, value);
+    }
+  });
+}
+
+const isDev =
+  typeof globalThis.process !== "undefined" && globalThis.process.env?.NODE_ENV === "development";
+
+function selectFields(data: unknown, select?: string[]): unknown {
+  if (!select?.length || !data || typeof data !== "object") return data;
+  if (Array.isArray(data)) return data.map((item) => selectFields(item, select));
+  const result: Record<string, unknown> = {};
+  for (const key of select) {
+    if (key in (data as Record<string, unknown>)) {
+      result[key] = (data as Record<string, unknown>)[key];
+    }
+  }
+  return result;
+}
+
+function errorResponse(message: string, status: number, error?: unknown) {
+  const body: Record<string, unknown> = { error: message };
+  if (isDev && error instanceof Error && error.stack) {
+    body.stack = error.stack;
+  }
+  return new Response(JSON.stringify(body), { status, headers: JSON_HEADERS });
+}
+
+async function parseBody(request: Request): Promise<any> {
+  const contentType = request.headers.get("content-type") ?? "";
+
+  // FormData
+  if (
+    contentType.includes("multipart/form-data") ||
+    contentType.includes("application/x-www-form-urlencoded")
+  ) {
+    try {
+      const formData = await request.formData();
+      const obj: Record<string, unknown> = {};
+      for (const [key, value] of formData.entries()) {
+        if (obj[key] !== undefined) {
+          // Multiple values → array
+          const existing = Array.isArray(obj[key]) ? (obj[key] as unknown[]) : [obj[key]];
+          existing.push(value);
+          obj[key] = existing;
+        } else {
+          obj[key] = value;
+        }
+      }
+      return obj;
+    } catch {
+      return {};
+    }
+  }
+
+  // URL-encoded search params (for GET fallback)
+  if (request.method === "GET") {
+    const url = new URL(request.url);
+    const propsParam = url.searchParams.get("props");
+    if (propsParam) {
+      try {
+        return JSON.parse(decodeURIComponent(propsParam));
+      } catch {
+        return {};
+      }
+    }
+    return {};
+  }
+
+  // JSON (default for POST)
+  try {
+    return await request.json();
+  } catch {
+    return {};
+  }
+}
+
+function findHandler(
+  key: string,
+): { handler: InvokeLoader | InvokeAction; type: "loader" | "action" } | null {
+  // 1. Check additive registry first (from registerInvokeHandlers / setupApps)
+  const registered = handlerRegistry.get(key);
+  if (registered) return { handler: registered, type: "action" };
+
+  // 2. Fall back to legacy getter-based registries
+  const loaders = getRegisteredLoaders();
+  if (loaders[key]) return { handler: loaders[key], type: "loader" };
+
+  const actions = getRegisteredActions();
+  if (actions[key]) return { handler: actions[key], type: "action" };
+
+  return null;
+}
+
+// Track which missing keys we've already warned about so dev console doesn't
+// log the same warning every IntersectionObserver / nav loop iteration.
+const warnedMissingKeys = new Set<string>();
+
+function unknownHandlerMessage(key: string): string {
+  const isLoader = key.includes("/loaders/");
+  const isAction = key.includes("/actions/");
+  const kind = isAction ? "action" : isLoader ? "loader" : "loader/action";
+  const dir = isAction ? "src/actions/" : "src/loaders/";
+  const cliHint = "npm run generate:loaders";
+  const setupHint =
+    isAction
+      ? "setInvokeActions(() => COMMERCE_ACTIONS)"
+      : "setInvokeLoaders(() => COMMERCE_LOADERS)";
+  return (
+    `Unknown handler: ${key}. ` +
+    `Check that the ${kind} exists in ${dir} (file path must match the key — ` +
+    `keys like "site/loaders/foo" resolve to ${dir}foo.ts) and that it is ` +
+    `included in src/server/cms/loaders.gen.ts. Regenerate with \`${cliHint}\` ` +
+    `or wire it manually via ${setupHint} in setup.ts. If you previously ran ` +
+    `the generator with --decofile-dir / --prune-by-decofile, drop the flag ` +
+    `to register code-driven loaders as well.`
+  );
+}
+
+function warnMissingHandlerOnce(key: string): void {
+  if (!isDev || warnedMissingKeys.has(key)) return;
+  warnedMissingKeys.add(key);
+  console.warn(`[invoke] ${unknownHandlerMessage(key)}`);
+}
+
+export async function handleInvoke(request: Request): Promise<Response> {
+  const url = new URL(request.url);
+  const pathParts = url.pathname.split("/deco/invoke/");
+  const invokeKey = pathParts[1] || "";
+  const select = url.searchParams.get("select")?.split(",").filter(Boolean);
+
+  const body = await parseBody(request);
+
+  // Single invoke by key
+  if (invokeKey) {
+    const found = findHandler(invokeKey);
+    if (!found) {
+      warnMissingHandlerOnce(invokeKey);
+      return errorResponse(unknownHandlerMessage(invokeKey), 404);
+    }
+
+    try {
+      const result = await found.handler(body, request);
+      // Response passthrough: if the handler returns a Response object,
+      // forward it as-is (preserving headers like Set-Cookie).
+      if (result instanceof Response) {
+        return result;
+      }
+      const filtered = selectFields(result, select);
+      const response = new Response(JSON.stringify(filtered), { status: 200, headers: JSON_HEADERS });
+      forwardCtxHeadersTo(response);
+      return response;
+    } catch (error) {
+      return errorResponse((error as Error).message, 500, error);
+    }
+  }
+
+  // Batch invoke
+  if (request.method === "POST" && body && typeof body === "object" && !Array.isArray(body)) {
+    const results: Record<string, unknown> = {};
+
+    const entries = Object.entries(body as Record<string, unknown>);
+    await Promise.all(
+      entries.map(async ([key, payload]) => {
+        const resolveType = (payload as any)?.__resolveType || key;
+        const found = findHandler(resolveType);
+
+        if (found) {
+          try {
+            let result = await found.handler(payload, request);
+            // If a loader returns a Response, extract its JSON body for batching.
+            // Set-Cookie values from a handler-returned Response are *not*
+            // forwarded — those leave the AsyncLocalStorage scope. Handlers
+            // that need cookie passthrough must write to
+            // RequestContext.responseHeaders (which forwardCtxHeadersTo()
+            // below propagates onto the batch response).
+            if (result instanceof Response) {
+              try { result = await result.json(); } catch { result = null; }
+            }
+            results[key] = selectFields(result, select);
+          } catch (error) {
+            results[key] = { error: (error as Error).message };
+          }
+        } else {
+          warnMissingHandlerOnce(resolveType);
+          results[key] = { error: unknownHandlerMessage(resolveType) };
+        }
+      }),
+    );
+
+    const response = new Response(JSON.stringify(results), { status: 200, headers: JSON_HEADERS });
+    // All batch handlers share the same RequestContext, so any Set-Cookie
+    // they appended (e.g. from VTEX vtexFetchWithCookies) is in
+    // `responseHeaders` by now. Forward it as N distinct Set-Cookie headers.
+    forwardCtxHeadersTo(response);
+    return response;
+  }
+
+  return errorResponse("No invoke key specified", 400);
+}

package/src/admin/liveControls.ts

@@ -0,0 +1,29 @@
+/**
+ * Admin Live Controls - Inline script for storefront pages.
+ *
+ * When the storefront is embedded in the admin's iframe, the admin sends
+ * `editor::inject` postMessage events containing a script that handles
+ * the preview navigation loop. This listener receives that script and
+ * evaluates it in the page context.
+ *
+ * Include this script in the root layout (e.g., via a <script> tag) so
+ * the admin can communicate with the storefront.
+ */
+export const LIVE_CONTROLS_SCRIPT = `
+(function() {
+  if (window.__DECO_LIVE_CONTROLS__) return;
+  window.__DECO_LIVE_CONTROLS__ = true;
+
+  addEventListener("message", function(event) {
+    var data = event.data;
+    if (!data || typeof data !== "object") return;
+    switch (data.type) {
+      case "editor::inject":
+        if (data.args && data.args.script) {
+          try { eval(data.args.script); } catch(e) { console.error("[deco] inject error:", e); }
+        }
+        break;
+    }
+  });
+})();
+`;

package/src/admin/meta.ts

@@ -0,0 +1,91 @@
+import { djb2Hex } from "@decocms/blocks/sdk/djb2";
+import { composeMeta, type MetaResponse } from "@decocms/blocks/cms";
+
+// Use globalThis to share meta state across module instances.
+// The daemon middleware imports this module via native import() (outside Vite SSR),
+// while setup.ts calls setMetaData() via Vite SSR — these are different module instances.
+// globalThis bridges them so both see the same metaData.
+const G = globalThis as unknown as {
+  __deco_meta_data?: MetaResponse | null;
+  __deco_meta_etag?: string | null;
+};
+
+function getMetaData(): MetaResponse | null {
+  return G.__deco_meta_data ?? null;
+}
+
+function setMetaDataInternal(data: MetaResponse | null) {
+  G.__deco_meta_data = data;
+}
+
+function getCachedEtag(): string | null {
+  return G.__deco_meta_etag ?? null;
+}
+
+function setCachedEtag(etag: string | null) {
+  G.__deco_meta_etag = etag;
+}
+
+/**
+ * Invalidate the cached ETag so the admin re-fetches meta after a
+ * hot-reload or decofile change.
+ *
+ * Called by decofile.ts after setBlocks() — no server-side loader import
+ * needed here, keeping this module safe for client-side bundles.
+ */
+export function invalidateMetaCache() {
+  setCachedEtag(null);
+}
+
+/**
+ * Set the schema metadata that /deco/meta will return.
+ * Runs composeMeta() to inject framework-level schemas (pages, etc.)
+ * on top of the site-generated section schemas.
+ */
+export function setMetaData(data: MetaResponse) {
+  setMetaDataInternal(composeMeta(data));
+  setCachedEtag(null);
+}
+
+/**
+ * Content-based hash for ETag.
+ * Uses DJB2 over the serialised JSON so any definition change
+ * results in a different ETag, forcing admin to re-fetch.
+ */
+function getEtag(): string {
+  let etag = getCachedEtag();
+  if (!etag) {
+    const str = JSON.stringify(getMetaData() || {});
+    etag = `"meta-${djb2Hex(str)}"`;
+    setCachedEtag(etag);
+  }
+  return etag;
+}
+
+export function handleMeta(request: Request): Response {
+  const metaData = getMetaData();
+  if (!metaData) {
+    return new Response(JSON.stringify({ error: "Schema not initialized" }), {
+      status: 503,
+      headers: { "Content-Type": "application/json" },
+    });
+  }
+
+  const ifNoneMatch = request.headers.get("if-none-match");
+  const etag = getEtag();
+
+  if (ifNoneMatch === etag) {
+    return new Response(null, { status: 304, headers: { ETag: etag } });
+  }
+
+  const body = JSON.stringify({ ...metaData, etag });
+
+  return new Response(body, {
+    status: 200,
+    headers: {
+      "Content-Type": "application/json",
+      ETag: etag,
+      "Cache-Control": "must-revalidate",
+    },
+  });
+}

package/src/admin/render.ts

@@ -0,0 +1,289 @@
+import { createElement } from "react";
+import {
+  loadBlocks,
+  withBlocksOverride,
+  getSection,
+  type MatcherContext,
+  type ResolvedSection,
+  resolvePageSections,
+  resolveValue,
+  WELL_KNOWN_TYPES,
+  runSingleSectionLoader,
+} from "@decocms/blocks/cms";
+import { buildHtmlShell } from "../sdk/htmlShell";
+import { LIVE_CONTROLS_SCRIPT } from "./liveControls";
+import { getPreviewWrapper } from "./setup";
+
+export { setRenderShell, setPreviewWrapper } from "./setup";
+
+/** Escape user-controlled strings before interpolating into HTML. */
+function escapeHtml(str: string): string {
+  return str
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}
+
+// Cache the dynamic import — avoids re-importing per section render
+let _renderToString: ((element: any) => string) | null = null;
+async function getRenderToString() {
+  if (!_renderToString) {
+    const mod = await import("react-dom/server");
+    _renderToString = mod.renderToString;
+  }
+  return _renderToString;
+}
+
+function wrapInHtmlShell(sectionHtml: string): string {
+  return buildHtmlShell({ body: sectionHtml, script: LIVE_CONTROLS_SCRIPT });
+}
+
+/**
+ * Render a single ResolvedSection to an HTML string.
+ * Uses the pre-cached renderToString and the preview wrapper.
+ */
+async function renderResolvedSection(section: ResolvedSection): Promise<string> {
+  const sectionLoader = getSection(section.component);
+  if (!sectionLoader) {
+    return `<div style="padding:8px;color:orange;font-size:12px;border:1px dashed orange;margin:4px 0;">Unsupported: ${escapeHtml(section.component)}</div>`;
+  }
+
+  try {
+    const renderToString = await getRenderToString();
+    const mod = await sectionLoader();
+    const element = createElement(mod.default, section.props);
+    const Wrapper = getPreviewWrapper();
+    const wrapped = Wrapper ? createElement(Wrapper, null, element) : element;
+    return renderToString(wrapped);
+  } catch (error) {
+    return `<div style="padding:8px;color:red;font-size:12px;">Error rendering ${escapeHtml(section.component)}: ${escapeHtml((error as Error).message)}</div>`;
+  }
+}
+
+/**
+ * Render a single raw section object (with __resolveType) to HTML.
+ * Kept for the single-section preview path where we don't go through
+ * resolvePageSections.
+ */
+async function renderOneSection(section: Record<string, unknown>): Promise<string> {
+  const resolveType = section.__resolveType as string | undefined;
+  if (!resolveType) return "";
+
+  const sectionLoader = getSection(resolveType);
+  if (!sectionLoader) {
+    return `<div style="padding:8px;color:orange;font-size:12px;border:1px dashed orange;margin:4px 0;">Unsupported: ${escapeHtml(resolveType)}</div>`;
+  }
+
+  try {
+    const { __resolveType: _, ...sectionProps } = section;
+    const renderToString = await getRenderToString();
+    const mod = await sectionLoader();
+    const element = createElement(mod.default, sectionProps);
+    const Wrapper = getPreviewWrapper();
+    const wrapped = Wrapper ? createElement(Wrapper, null, element) : element;
+    return renderToString(wrapped);
+  } catch (error) {
+    return `<div style="padding:8px;color:red;font-size:12px;">Error rendering ${escapeHtml(resolveType)}: ${escapeHtml((error as Error).message)}</div>`;
+  }
+}
+
+/**
+ * Build a MatcherContext from the preview request.
+ * Enables matchers (device, date, cookie, etc.) to evaluate correctly
+ * during preview resolution.
+ */
+function buildPreviewMatcherCtx(request: Request): MatcherContext {
+  const url = new URL(request.url);
+  const deviceHint = url.searchParams.get("deviceHint");
+  const path = url.searchParams.get("path") || "/";
+
+  let userAgent = request.headers.get("user-agent") ?? "";
+  if (deviceHint === "mobile" && !/mobile/i.test(userAgent)) {
+    userAgent += " Mobile";
+  }
+
+  const cookieHeader = request.headers.get("cookie") ?? "";
+  const cookies: Record<string, string> = {};
+  for (const part of cookieHeader.split(";")) {
+    const [k, ...v] = part.trim().split("=");
+    if (k) cookies[k.trim()] = v.join("=").trim();
+  }
+
+  return {
+    userAgent,
+    url: url.toString(),
+    path,
+    cookies,
+    request,
+  };
+}
+
+/**
+ * Handles /live/previews/* -- renders sections to HTML for the admin preview.
+ *
+ * Supports:
+ * - Page compositor (website/pages/Page.tsx): resolves + renders all child sections
+ * - Single section render with full __resolveType resolution
+ * - Per-request decofile override via AsyncLocalStorage
+ */
+export async function handleRender(request: Request): Promise<Response> {
+  const url = new URL(request.url);
+  const resolveChain = url.searchParams.get("resolveChain");
+  const propsParam = url.searchParams.get("props");
+  console.log("handleRender", request.url);
+
+  const pathPrefix = "/live/previews/";
+  const rawPathComponent = url.pathname.startsWith(pathPrefix)
+    ? url.pathname.slice(pathPrefix.length)
+    : "";
+  // Admin sends double-encoded path segments (e.g. space → %20 → %2520).
+  // Decode until stable so the block key matches the decofile.
+  const pathComponent = (() => {
+    try {
+      const once = decodeURIComponent(rawPathComponent);
+      try { return decodeURIComponent(once); } catch { return once; }
+    } catch { return rawPathComponent; }
+  })();
+  let component = resolveChain || pathComponent || "";
+  let props: Record<string, unknown> = {};
+  let decofileOverride: Record<string, unknown> | null = null;
+
+  if (request.method === "POST") {
+    try {
+      const body = await request.json();
+      if (body && typeof body === "object") {
+        if (body.__decofile && typeof body.__decofile === "object") {
+          decofileOverride = body.__decofile;
+        }
+        if (body.__props && typeof body.__props === "object") {
+          props = body.__props;
+          if (body.__props.__resolveType) {
+            component = body.__props.__resolveType as string;
+          }
+        } else if (body.props && typeof body.props === "object") {
+          props = body.props;
+        } else if (body.__resolveType) {
+          component = body.__resolveType as string;
+          const { __decofile: _, __resolveType: __, ...rest } = body;
+          props = rest;
+        } else if (!body.__decofile) {
+          props = body;
+        }
+      }
+    } catch {
+      // fall through to query-param handling
+    }
+  }
+
+  if (!decofileOverride) {
+    const decofileParam = url.searchParams.get("__decofile");
+    if (decofileParam) {
+      try {
+        decofileOverride = JSON.parse(decodeURIComponent(decofileParam));
+      } catch {
+        // invalid __decofile param, ignore
+      }
+    }
+  }
+
+  if (propsParam && Object.keys(props).length === 0) {
+    try {
+      props = JSON.parse(decodeURIComponent(propsParam));
+    } catch {
+      // Try base64-encoded props (admin uses btoa(encodeURIComponent(json)))
+      try {
+        props = JSON.parse(decodeURIComponent(atob(propsParam)));
+      } catch {
+        // props parsing failed
+      }
+    }
+  }
+
+  if (props.__resolveType && !component) {
+    component = props.__resolveType as string;
+  }
+
+  const renderFn = async () => {
+    const blocks = loadBlocks();
+
+    // Resolve named block at the component level
+    if (blocks[component]) {
+      const block = blocks[component] as Record<string, unknown>;
+      if (block.__resolveType) {
+        component = block.__resolveType as string;
+        props = { ...block, ...props };
+      }
+    }
+
+    // Page compositor: resolve + render all child sections in parallel
+    if (component === WELL_KNOWN_TYPES.PAGE) {
+      const matcherCtx = buildPreviewMatcherCtx(request);
+
+      // resolvePageSections uses the same strategy as resolveDecoPage:
+      // parallel section resolution, layout caching, in-flight dedup, memoization
+      const resolvedSections = await resolvePageSections(
+        props.sections,
+        matcherCtx,
+      );
+
+      // Run section loaders in parallel — benefits from layout and cacheable caches
+      const enrichedSections = await Promise.all(
+        resolvedSections.map((section) =>
+          runSingleSectionLoader(section, request).catch(() => section),
+        ),
+      );
+
+      // Render all sections in parallel
+      const htmlParts = await Promise.all(
+        enrichedSections.map((section) => renderResolvedSection(section)),
+      );
+
+      return new Response(wrapInHtmlShell(htmlParts.filter(Boolean).join("\n")), {
+        status: 200,
+        headers: { "Content-Type": "text/html; charset=utf-8" },
+      });
+    }
+
+    // Single section render
+    const sectionLoader = getSection(component);
+    if (!sectionLoader) {
+      const unknownHtml = wrapInHtmlShell(
+        `<div style="padding:20px;color:red;">Unknown section: ${escapeHtml(component)}</div>`,
+      );
+      return new Response(unknownHtml, {
+        status: 200,
+        headers: { "Content-Type": "text/html" },
+      });
+    }
+
+    try {
+      const resolvedProps = (await resolveValue(props)) as Record<string, unknown>;
+      const { __resolveType: _, ...cleanProps } = resolvedProps;
+      const renderToString = await getRenderToString();
+      const mod = await sectionLoader();
+      const element = createElement(mod.default, cleanProps);
+      const Wrapper = getPreviewWrapper();
+      const wrapped = Wrapper ? createElement(Wrapper, null, element) : element;
+      const sectionHtml = renderToString(wrapped);
+      return new Response(wrapInHtmlShell(sectionHtml), {
+        status: 200,
+        headers: { "Content-Type": "text/html; charset=utf-8" },
+      });
+    } catch (error) {
+      const errorHtml = wrapInHtmlShell(
+        `<div style="padding:20px;color:red;">Render error: ${escapeHtml((error as Error).message)}</div>`,
+      );
+      return new Response(errorHtml, {
+        status: 200,
+        headers: { "Content-Type": "text/html" },
+      });
+    }
+  };
+
+  if (decofileOverride) {
+    return withBlocksOverride(decofileOverride, renderFn);
+  }
+  return renderFn();
+}