@decocms/nextjs 8.0.0 → 8.4.0

package/src/proxy/index.ts

@@ -0,0 +1,161 @@
+/**
+ * `@decocms/nextjs/proxy`: draft previews in a Next.js proxy (`proxy.ts`, or
+ * `middleware.ts` before Next 16). No React and no block map: pass the proxy
+ * a CMS handle made with an empty block map and the app's options, which
+ * shares the app's instance (one per process) without pulling the site's
+ * sections into the proxy bundle:
+ *
+ * ```ts
+ * // src/cms.proxy.ts
+ * export const proxyCms = createCMS({ blocks: {}, ...cmsConfig });
+ * ```
+ *
+ * A site with a proxy of its own calls the pieces (`decideDraft`, then
+ * `draftRequestHeaders` on the request it forwards, then `applyDraft` on the
+ * response); a site without one exports `draftProxy(...)`.
+ *
+ * Statically rendered pages can't read a draft, so a drafted request to one
+ * is rewritten onto a dynamic draft route (`/_draft/<path>`, mounted as
+ * `app/%5Fdraft/...`: a literal `_draft` folder is private in Next and never
+ * routes).
+ */
+import type { CMS } from "@decocms/blocks";
+import { type NextRequest, NextResponse } from "next/server.js";
+import { DRAFT_HEADER, draftResponseHeaders } from "../draft.ts";
+import {
+  allowedDraft,
+  draftCookie,
+  endsPreview,
+  fromDraftLink,
+  hasDraftSignal,
+  type PreviewPolicy,
+  requestLike,
+} from "../drafts.ts";
+
+export {
+  inferredPreviewHosts,
+  type PreviewPolicy,
+  previewHostDecision,
+  requestLike,
+} from "../drafts.ts";
+
+/** What the proxy needs from the CMS: the site's declared preview hosts and their check. */
+export type CMSHandle = Pick<CMS, "draftPointer" | "settings" | "forRelease">;
+
+/** What the proxy does with a request's draft state. */
+export interface DraftDecision {
+  /** The draft this request renders, after the host check; `null` for the release. */
+  pointer: string | null;
+  /** The `Set-Cookie` the response carries: storing a draft link's pointer, or ending a preview. */
+  setCookie: string | null;
+}
+
+/** The URL prefix a drafted request is rewritten onto (`app/%5Fdraft/[[...path]]`). */
+export const DRAFT_ROUTE_PREFIX = "/_draft";
+
+const INERT: DraftDecision = Object.freeze({ pointer: null, setCookie: null });
+
+/**
+ * The draft a request renders and the cookie its response sets, under
+ * `policy` (the same options the pages pass to `bindDraft`). A request with
+ * no `?__draft=` and no draft cookie never reaches the CMS.
+ */
+export async function decideDraft(
+  cms: CMSHandle,
+  request: NextRequest | Request,
+  policy: PreviewPolicy = {},
+): Promise<DraftDecision> {
+  const url = new URL(request.url);
+  const like = requestLike(request.headers, url.pathname + url.search, url.host);
+  if (like === null || !hasDraftSignal(like)) return INERT;
+  // Ending a preview is allowed on any host, so a cookie set earlier always goes.
+  if (endsPreview(like)) return { pointer: null, setCookie: draftCookie("", ["Max-Age=0"]) };
+  const pointer = await allowedDraft(cms, like, policy);
+  if (pointer === null) return INERT;
+  return {
+    pointer,
+    setCookie: fromDraftLink(like, pointer) ? draftCookie(encodeURIComponent(pointer)) : null,
+  };
+}
+
+/**
+ * The request headers to forward: the accepted pointer on `x-deco-draft`, so
+ * the root layout can bind the draft on the same request (a layout gets no
+ * `searchParams`, and on a draft link the cookie is only on the response).
+ * A copy that arrives from outside is always removed.
+ */
+export function draftRequestHeaders(
+  request: NextRequest | Request,
+  decision: DraftDecision,
+): Headers {
+  const headers = new Headers(request.headers);
+  if (decision.pointer) headers.set(DRAFT_HEADER, decision.pointer);
+  else headers.delete(DRAFT_HEADER);
+  return headers;
+}
+
+/** Whether `pathname` is on the draft route: a site answers a direct hit there with its 404. */
+export function isDraftRoutePath(pathname: string): boolean {
+  return pathname === DRAFT_ROUTE_PREFIX || pathname.startsWith(`${DRAFT_ROUTE_PREFIX}/`);
+}
+
+/**
+ * The rewrite of a drafted request onto the draft route, keeping its path and
+ * forwarding the pointer; `null` when the request isn't drafted or is already
+ * on the draft route.
+ */
+export function rewriteToDraftRoute(
+  request: NextRequest,
+  decision: DraftDecision,
+): NextResponse | null {
+  if (!decision.pointer) return null;
+  const url = request.nextUrl.clone();
+  if (isDraftRoutePath(url.pathname)) return null;
+  url.pathname = `${DRAFT_ROUTE_PREFIX}${url.pathname}`;
+  return NextResponse.rewrite(url, {
+    request: { headers: draftRequestHeaders(request, decision) },
+  });
+}
+
+/**
+ * The cookie and the response headers of a draft: `Set-Cookie`, and for a
+ * drafted response `Cache-Control: no-store, private`, `Vary: Cookie` and
+ * `X-Robots-Tag: noindex, nofollow` (`draftResponseHeaders`). With the
+ * pointer in a cookie a draft shares its URL with the published page, so a
+ * cache keyed on the URL alone would serve it to visitors.
+ */
+export function applyDraft<R extends Response>(response: R, decision: DraftDecision): R {
+  if (decision.setCookie) response.headers.append("set-cookie", decision.setCookie);
+  for (const [name, value] of Object.entries(draftResponseHeaders(decision.pointer))) {
+    response.headers.set(name, value);
+  }
+  return response;
+}
+
+export interface DraftProxyOptions extends PreviewPolicy {
+  /**
+   * Which drafted requests go to the draft route (a statically rendered
+   * page's). Default: every drafted request outside the draft route. Return
+   * `false` for a route that is already dynamic and binds the draft itself.
+   */
+  rewrite?: (request: NextRequest) => boolean;
+}
+
+/**
+ * The whole draft flow for a site with no proxy of its own:
+ * `export const proxy = draftProxy(proxyCms, { site: "my-store" })`.
+ */
+export function draftProxy(
+  cms: CMSHandle,
+  options: DraftProxyOptions = {},
+): (request: NextRequest) => Promise<NextResponse> {
+  const { rewrite = () => true, ...policy } = options;
+  return async (request) => {
+    const decision = await decideDraft(cms, request, policy);
+    const rewritten = rewrite(request) ? rewriteToDraftRoute(request, decision) : null;
+    const response =
+      rewritten ??
+      NextResponse.next({ request: { headers: draftRequestHeaders(request, decision) } });
+    return applyDraft(response, decision);
+  };
+}

package/src/server/index.ts

@@ -0,0 +1,77 @@
+/**
+ * `@decocms/nextjs/server`: draft previews in Server Components (pages,
+ * layouts, route handlers). Server only: it reads `next/headers`.
+ *
+ * A page (and, through the `x-deco-draft` header the proxy forwards, the root
+ * layout) binds the request's draft before it reads content, then reads
+ * through `contentClient(cms)`:
+ *
+ * ```tsx
+ * export default async function Page({ searchParams }) {
+ *   await bindDraft(cms, { searchParams: await searchParams, site: "my-store" });
+ *   const client = contentClient(cms);
+ *   …
+ *   return <>{sections}<DraftPreviewIndicator /></>;
+ * }
+ * ```
+ *
+ * The host check is the proxy's (`decideDraft`), repeated here with the same
+ * options, so a route the proxy doesn't match, or a forged `x-deco-draft`,
+ * still gets the release on a host that may not preview.
+ */
+
+import type { Client, CMS } from "@decocms/blocks";
+import { headers } from "next/headers.js";
+import { DRAFT_HEADER, DRAFT_PARAM } from "../draft.ts";
+import { allowedDraft, isDraftPreviewEnabled, type PreviewPolicy, requestLike } from "../drafts.ts";
+import { activeDraftPointer, draftSlot } from "./slot.ts";
+
+export { type PreviewPolicy, requestLike } from "../drafts.ts";
+export { activeDraftPointer };
+
+/** A page's `searchParams` prop, awaited. */
+export type SearchParams = Record<string, string | string[] | undefined>;
+
+export interface BindDraftOptions extends PreviewPolicy {
+  /** The page's own `searchParams` (a layout has none: it reads the proxy's `x-deco-draft`). */
+  searchParams?: SearchParams;
+}
+
+function firstParam(searchParams: SearchParams | undefined, key: string): string | null {
+  const raw = searchParams?.[key];
+  return (Array.isArray(raw) ? raw[0] : raw) ?? null;
+}
+
+/**
+ * Binds the request's draft, if any: the page's own `?__draft=` first (`off`
+ * leaves preview), then the pointer the proxy forwarded on `x-deco-draft`,
+ * then the draft cookie, each on a host the options allow. Returns whether a
+ * draft was bound. With previews off on every host it returns `false`
+ * without reading the request, so a static page stays static.
+ */
+export async function bindDraft(
+  cms: Pick<CMS, "draftPointer" | "settings" | "forRelease">,
+  options: BindDraftOptions = {},
+): Promise<boolean> {
+  const { searchParams, ...policy } = options;
+  if (!(await isDraftPreviewEnabled(cms, policy))) return false;
+  const param = firstParam(searchParams, DRAFT_PARAM);
+  if (param === "off") return false;
+  const requestHeaders = await headers();
+  const forwarded = param ?? requestHeaders.get(DRAFT_HEADER);
+  const query = forwarded ? `?${DRAFT_PARAM}=${encodeURIComponent(forwarded)}` : "";
+  const request = requestLike(requestHeaders as Headers, `/${query}`);
+  const pointer = request ? await allowedDraft(cms, request, policy) : null;
+  if (pointer === null) return false;
+  draftSlot().pointer = pointer;
+  return true;
+}
+
+/**
+ * The content client for this request: the draft `bindDraft` bound, or the
+ * release.
+ */
+export function contentClient(cms: Pick<CMS, "forDraft" | "forRelease">): Client {
+  const pointer = activeDraftPointer();
+  return pointer ? cms.forDraft(pointer) : cms.forRelease();
+}

package/src/server/slot.ts

@@ -0,0 +1,14 @@
+/**
+ * The draft a request renders, held for the request's Server Components.
+ * React's `cache()` gives one slot per request in the React Server
+ * Components graph, the scope a draft needs; no `next/headers` here, so the
+ * root components can read it without binding anything.
+ */
+import { cache } from "react";
+
+export const draftSlot = cache((): { pointer: string | null } => ({ pointer: null }));
+
+/** The draft pointer bound to this request (`bindDraft`), or `null` when it renders the release. */
+export function activeDraftPointer(): string | null {
+  return draftSlot().pointer;
+}

package/src/studio.ts

@@ -0,0 +1,54 @@
+/**
+ * Where Deco Studio runs: the origins its site editor frames a site from and
+ * talks to it from (`postMessage`). One list, so the Studio bridge
+ * (`StudioBridge`), `withDeco()`'s dev origins and a site's own
+ * `frame-ancestors` never drift apart. This package's own copy: it never
+ * imports `@decocms/tanstack`.
+ *
+ * No module state and no framework code: safe in a browser bundle.
+ */
+
+/**
+ * Studio's origins, in the CSP source form (`https://*.decocms.com` matches
+ * any subdomain). Test an origin with {@link isStudioOrigin}: the list holds a
+ * wildcard, so `includes()` isn't the check.
+ */
+export const STUDIO_ORIGINS: readonly string[] = Object.freeze([
+  "https://studio.decocms.com",
+  "https://studio-stg.decocms.com",
+  "https://decocms.com",
+  "https://*.decocms.com",
+]);
+
+/**
+ * The `frame-ancestors` sources a site sends so Studio can show it in the
+ * site editor: the site itself, {@link STUDIO_ORIGINS}, and v7's
+ * `https://*.deco.studio`. For a site that writes its own CSP; add the
+ * loopback origins in local development (`http://localhost:*`), where a
+ * Studio runs on the same machine.
+ */
+export const STUDIO_FRAME_ANCESTORS: readonly string[] = Object.freeze([
+  "'self'",
+  ...STUDIO_ORIGINS,
+  "https://*.deco.studio",
+]);
+
+/**
+ * Whether `origin` (a `MessageEvent.origin`, an `Origin` header) is one of
+ * {@link STUDIO_ORIGINS}: `https`, the default port, and `decocms.com` or a
+ * name under it.
+ */
+export function isStudioOrigin(origin: string | null | undefined): boolean {
+  if (typeof origin !== "string" || origin === "") return false;
+  let url: URL;
+  try {
+    url = new URL(origin);
+  } catch {
+    return false;
+  }
+  // An origin is the scheme and host alone: `https://decocms.com/x` or one with
+  // credentials isn't one.
+  if (url.origin !== origin || url.protocol !== "https:" || url.port !== "") return false;
+  const host = url.hostname;
+  return host === "decocms.com" || host.endsWith(".decocms.com");
+}

package/src/ClientOnlySection.tsx

@@ -1,20 +0,0 @@
-"use client";
-
-import dynamic from "next/dynamic";
-import type { ComponentType } from "react";
-
-interface ClientOnlySectionProps {
-  loader: () => Promise<{ default: ComponentType<any> }>;
-  props: Record<string, unknown>;
-}
-
-const cache = new Map<() => Promise<{ default: ComponentType<any> }>, ComponentType<any>>();
-
-export function ClientOnlySection({ loader, props }: ClientOnlySectionProps) {
-  let Dynamic = cache.get(loader);
-  if (!Dynamic) {
-    Dynamic = dynamic(loader, { ssr: false });
-    cache.set(loader, Dynamic);
-  }
-  return <Dynamic {...props} />;
-}

package/src/DecoPageRenderer.test.tsx

@@ -1,37 +0,0 @@
-import { registerSectionsSync } from "@decocms/blocks/cms";
-import { renderToString } from "react-dom/server";
-import { describe, expect, it } from "vitest";
-import { DecoPageRenderer } from "./DecoPageRenderer";
-
-function Hero({ label }: { label?: string }) {
-  return <h1>{`hero-${label ?? "none"}`}</h1>;
-}
-
-describe("DecoPageRenderer (next)", () => {
-  it("renders eager sections in order", async () => {
-    registerSectionsSync({
-      "site/sections/NextPageA.tsx": { default: Hero },
-      "site/sections/NextPageB.tsx": { default: Hero },
-    });
-
-    const element = await DecoPageRenderer({
-      sections: [
-        {
-          key: "site/sections/NextPageA.tsx",
-          component: "site/sections/NextPageA.tsx",
-          props: { label: "first" },
-          index: 0,
-        } as any,
-        {
-          key: "site/sections/NextPageB.tsx",
-          component: "site/sections/NextPageB.tsx",
-          props: { label: "second" },
-          index: 1,
-        } as any,
-      ],
-      pagePath: "/",
-    });
-    const html = renderToString(element);
-    expect(html.indexOf("hero-first")).toBeLessThan(html.indexOf("hero-second"));
-  });
-});

package/src/DecoPageRenderer.tsx

@@ -1,107 +0,0 @@
-import type { DeferredSection, ResolvedSection } from "@decocms/blocks/cms";
-import { resolveDeferredSection } from "@decocms/blocks/cms";
-import { cloneElement, type ReactElement, type ReactNode } from "react";
-import { DeferredSectionBoundary } from "./DeferredSection";
-import { SectionRenderer } from "./SectionRenderer";
-
-interface DecoPageRendererProps {
-  sections: ResolvedSection[];
-  deferredSections?: DeferredSection[];
-  pagePath: string;
-  pageUrl?: string;
-  loadingFallback?: ReactNode;
-  errorFallback?: ReactNode;
-}
-
-type PageItem =
-  | { type: "eager"; section: ResolvedSection; sort: number }
-  | { type: "deferred"; deferred: DeferredSection; sort: number };
-
-function mergeSections(resolved: ResolvedSection[], deferred: DeferredSection[]): PageItem[] {
-  const items: PageItem[] = [];
-  resolved.forEach((section, i) =>
-    items.push({ type: "eager", section, sort: section.index ?? i }),
-  );
-  for (const d of deferred) items.push({ type: "deferred", deferred: d, sort: d.index });
-  items.sort((a, b) => a.sort - b.sort);
-  return items;
-}
-
-/**
- * Top-level renderer for a resolved CMS page. Kicks off (but does not await)
- * each deferred section's resolve promise immediately, so they resolve
- * concurrently with the eager sections' own rendering — React's streaming
- * SSR then flushes each <Suspense> boundary as its promise settles.
- */
-export async function DecoPageRenderer({
-  sections,
-  deferredSections = [],
-  pagePath,
-  pageUrl,
-  loadingFallback,
-  errorFallback,
-}: DecoPageRendererProps) {
-  const items = mergeSections(sections, deferredSections);
-
-  // `resolveDeferredSection`'s real signature (packages/blocks/src/cms/resolve.ts)
-  // takes positional args `(component, rawProps, pagePath, matcherCtx?)` and
-  // returns a `ResolvedSection` WITHOUT `index` set — unlike the object-shaped
-  // call the plan sketch assumed. `pageUrl` isn't a direct parameter either; it
-  // flows in via `matcherCtx.url`, mirroring how the TanStack route loader
-  // builds `matcherCtx` for `loadDeferredSection` (packages/tanstack/src/routes/cmsRoute.ts).
-  // We also stamp `index` onto the resolved section ourselves (mirroring what
-  // `resolveDeferredSectionFull` does) so downstream consumers can rely on it.
-  const matcherCtx = pageUrl ? { url: pageUrl } : undefined;
-  const deferredPromises = new Map<number, Promise<ResolvedSection | null>>();
-  for (const d of deferredSections) {
-    deferredPromises.set(
-      d.index,
-      resolveDeferredSection(d.component, d.rawProps ?? {}, pagePath, matcherCtx).then(
-        (resolved) => {
-          if (!resolved) return null;
-          return { ...resolved, index: d.index };
-        },
-      ),
-    );
-  }
-
-  // Eager sections are resolved via a direct (awaited) function call rather
-  // than nested as a `<SectionRenderer />` JSX child. `SectionRenderer` is an
-  // async function; Next's real RSC renderer awaits async components nested
-  // anywhere in the tree, but that's specific to the RSC streaming renderer —
-  // plain `react-dom/server` (used by this package's unit tests, and by any
-  // consumer that isn't going through Next's RSC pipeline) throws ("A
-  // component suspended while responding to synchronous input") when an async
-  // component suspends outside a `<Suspense>` boundary. Deferred sections are
-  // deliberately exempt: `DeferredSectionBoundary` wraps its async child in a
-  // `<Suspense>`, so letting it suspend there is exactly the intended
-  // behavior (renders the fallback synchronously, then streams in later).
-  //
-  // `deferredPromises` above is already populated before this `Promise.all`
-  // runs, so every deferred resolve is in flight concurrently with eager
-  // section rendering — nothing here blocks on it.
-  const rendered = await Promise.all(
-    items.map(async (item): Promise<ReactElement | null> => {
-      if (item.type === "eager") {
-        const element = await SectionRenderer({
-          resolved: item.section,
-          errorFallback,
-        });
-        if (!element) return null;
-        return cloneElement(element, { key: `${item.section.key}-${item.section.index}` });
-      }
-      return (
-        <DeferredSectionBoundary
-          key={`deferred-${item.deferred.key}-${item.deferred.index}`}
-          deferred={item.deferred}
-          promise={deferredPromises.get(item.deferred.index)!}
-          pagePath={pagePath}
-          fallback={loadingFallback}
-          errorFallback={errorFallback}
-        />
-      );
-    }),
-  );
-
-  return <>{rendered}</>;
-}

package/src/DecoRootLayout.test.tsx

@@ -1,22 +0,0 @@
-import { renderToString } from "react-dom/server";
-import { describe, expect, it } from "vitest";
-import { DecoRootLayout } from "./DecoRootLayout";
-
-describe("DecoRootLayout (next)", () => {
-  it("renders the html shell with LiveControls and the analytics bootstrap script", () => {
-    const html = renderToString(
-      <DecoRootLayout siteName="test-site">
-        <div>page content</div>
-      </DecoRootLayout>,
-    );
-    expect(html).toContain("page content");
-    expect(html).toContain("__DECO_STATE");
-    // "window.DECO" alone is a false-positive trap: it also appears twice in
-    // this component's own inline bootstrap script (buildDecoEventsBootstrap's
-    // `window.DECO = window.DECO || {}` and `window.DECO.events = ...`), so it
-    // would still pass even if the ANALYTICS_SCRIPT <script> tag were deleted
-    // entirely. "IntersectionObserver" only exists inside ANALYTICS_SCRIPT
-    // (packages/blocks/src/sdk/analytics.ts) — it genuinely pins that script.
-    expect(html).toContain("IntersectionObserver");
-  });
-});

package/src/DecoRootLayout.tsx

@@ -1,82 +0,0 @@
-import { LiveControls } from "@decocms/blocks/hooks";
-import { ANALYTICS_SCRIPT } from "@decocms/blocks/sdk/analytics";
-import type { ReactNode } from "react";
-
-function buildDecoEventsBootstrap(account?: string): string {
-  const accountJson = JSON.stringify(account ?? "");
-  return `
-window.__RUNTIME__ = window.__RUNTIME__ || { account: ${accountJson} };
-window.DECO = window.DECO || {};
-window.DECO.events = window.DECO.events || {
-  _q: [],
-  _subs: [],
-  dispatch: function(e) {
-    this._q.push(e);
-    for (var i = 0; i < this._subs.length; i++) {
-      try { this._subs[i](e); } catch(err) { console.error('[DECO.events]', err); }
-    }
-  },
-  subscribe: function(fn) {
-    this._subs.push(fn);
-    for (var i = 0; i < this._q.length; i++) {
-      try { fn(this._q[i]); } catch(err) {}
-    }
-  }
-};
-window.dataLayer = window.dataLayer || [];
-`;
-}
-
-export interface DecoRootLayoutProps {
-  /** Language attribute for the <html> tag. Default: "en" */
-  lang?: string;
-  /** DaisyUI data-theme attribute. Default: "light" */
-  dataTheme?: string;
-  /** Site name for LiveControls (admin iframe communication). Required. */
-  siteName: string;
-  /** Commerce platform account name for analytics bootstrap (e.g. VTEX account). */
-  account?: string;
-  /** CSS class for <body>. Default: "bg-base-200 text-base-content" */
-  bodyClassName?: string;
-  children?: ReactNode;
-}
-
-/**
- * Root layout for app/layout.tsx — the Next.js analogue of
- * `@decocms/tanstack`'s `DecoRootLayout`.
- *
- * The bootstrap/analytics <script> tags run once per navigation session
- * because Next.js App Router doesn't remount a shared layout.tsx across
- * same-layout navigations — the same property TanStack's <ScriptOnce>
- * provides explicitly, here implicit in the framework's own layout model.
- * That's why a plain inline <script> (rather than a ScriptOnce-like helper)
- * is sufficient here.
- *
- * No <head>/<HeadContent> equivalent: Next.js App Router injects
- * `generateMetadata`'s output automatically, and a root layout.tsx doesn't
- * render its own <head> element by convention.
- *
- * No NavigationProgress/StableOutlet port in v1 — those are
- * TanStack-Router-specific SPA-navigation UX polish (a loading bar during
- * client-side nav, height-preserved outlet), not part of the core
- * CMS-rendering feature set this plan scopes.
- */
-export function DecoRootLayout({
-  lang = "en",
-  dataTheme = "light",
-  siteName,
-  account,
-  bodyClassName = "bg-base-200 text-base-content",
-  children,
-}: DecoRootLayoutProps) {
-  return (
-    <html lang={lang} data-theme={dataTheme} suppressHydrationWarning>
-      <body className={bodyClassName} suppressHydrationWarning>
-        <script dangerouslySetInnerHTML={{ __html: buildDecoEventsBootstrap(account) }} />
-        {children}
-        <LiveControls site={siteName} />
-        <script dangerouslySetInnerHTML={{ __html: ANALYTICS_SCRIPT }} />
-      </body>
-    </html>
-  );
-}

package/src/DeferredSection.test.tsx

@@ -1,27 +0,0 @@
-import { registerSectionsSync } from "@decocms/blocks/cms";
-import { renderToString } from "react-dom/server";
-import { describe, expect, it } from "vitest";
-import { DeferredSectionBoundary } from "./DeferredSection";
-
-function Hero({ label }: { label?: string }) {
-  return <h1>{`hero-${label ?? "none"}`}</h1>;
-}
-
-describe("DeferredSectionBoundary (next)", () => {
-  it("renders the fallback while the promise is pending, per Suspense semantics", () => {
-    const KEY = "site/sections/NextDeferredA.tsx";
-    registerSectionsSync({ [KEY]: { default: Hero } });
-
-    const neverResolves = new Promise<any>(() => {});
-    const html = renderToString(
-      <DeferredSectionBoundary
-        deferred={{ key: KEY, component: KEY, index: 0 } as any}
-        promise={neverResolves}
-        pagePath="/"
-        fallback={<div>loading</div>}
-      />,
-    );
-    expect(html).toContain("loading");
-    expect(html).not.toContain("hero-");
-  });
-});

package/src/DeferredSection.tsx

@@ -1,59 +0,0 @@
-import type { DeferredSection, ResolvedSection } from "@decocms/blocks/cms";
-import { SectionErrorBoundary } from "@decocms/blocks/hooks";
-import { type ReactNode, Suspense } from "react";
-import { SectionRenderer } from "./SectionRenderer";
-
-interface DeferredSectionBoundaryProps {
-  deferred: DeferredSection;
-  promise: Promise<ResolvedSection | null>;
-  pagePath: string;
-  fallback?: ReactNode;
-  errorFallback?: ReactNode;
-}
-
-async function ResolvedDeferredSection({
-  promise,
-  errorFallback,
-}: {
-  promise: Promise<ResolvedSection | null>;
-  errorFallback?: ReactNode;
-}) {
-  const resolved = await promise;
-  if (!resolved) return null;
-  return <SectionRenderer resolved={resolved} errorFallback={errorFallback} />;
-}
-
-/**
- * Deferred/streamed section — the RSC-native analogue of DecoPageRenderer's
- * <Suspense><Await promise={promise}>{...}</Await></Suspense>. React 19
- * Server Components can await a promise directly inside an async component,
- * so there is no need for TanStack's <Await> wrapper — <Suspense> here is
- * the same React primitive TanStack also uses, just without the extra
- * unwrapping component.
- */
-export function DeferredSectionBoundary({
-  deferred,
-  promise,
-  pagePath: _pagePath,
-  fallback,
-  errorFallback,
-}: DeferredSectionBoundaryProps) {
-  const sectionId = deferred.key
-    .replace(/\//g, "-")
-    .replace(/\.tsx$/, "")
-    .replace(/^site-sections-/, "");
-
-  return (
-    <SectionErrorBoundary sectionKey={deferred.key} fallback={errorFallback}>
-      <Suspense
-        fallback={
-          <section id={sectionId} data-manifest-key={deferred.key} data-deferred="true">
-            {fallback}
-          </section>
-        }
-      >
-        <ResolvedDeferredSection promise={promise} errorFallback={errorFallback} />
-      </Suspense>
-    </SectionErrorBoundary>
-  );
-}