fix(templates): resolve dynamic data in outlet previews (CoreBunch#78)

DavidBabinec · web-flow · commit cc1b050527e2 · 2026-06-17T18:39:00.000+02:00
diff --git a/docs/features/templates.md b/docs/features/templates.md
@@ -266,7 +266,7 @@ The design canvas renders the active document the way it publishes: **inside its
 - `resolveEditorWrapperTemplates(site, activeDoc)` (`canvasComposition.ts`) returns the templates that WRAP the active document, outermost-first — the editor-side mirror of `resolveTemplateChain`. Editing a page, a `postTypes` template, or a `notFound` template ⇒ wrapped by the `everywhere` layout; editing the `everywhere` layout ⇒ nothing wraps it.
 - Wrappers render **read-only** via `ReadOnlyNodeTree` with the editable document spliced into the innermost wrapper's `base.outlet` (the `outletSlot` prop replaces the outlet node, mirroring `spliceIntoOutlet`). Only the active document's nodes keep `data-node-id` + handlers, so selection / hover / DnD stay scoped to it; the chrome is pixel-identical but non-interactive.
 - Body ownership mirrors the publisher: the iframe `<body>` carries the OUTERMOST wrapper body's classes, and the active document renders as its body *children* (its own `base.body` is dropped, just as the composer drops the inner body).
-- `ReadOnlyNodeTree` (`src/modules/base/utils/ReadOnlyNodeTree.tsx`) is the shared non-interactive tree renderer — also used by `VCInlineTree` for inlined Visual Component bodies. It mirrors the publisher's per-node output: `classIds` resolve to class names AND `inlineStyles` are applied as the element's `style` (via `bagToReactStyle` from `@core/publisher`, the same sanitisation gate as the published `style="…"` attribute) — so composed content (template chrome, outlet previews, VC bodies) renders with the same inline styles as the editable canvas and the published page.
+- `ReadOnlyNodeTree` (`src/modules/base/utils/ReadOnlyNodeTree.tsx`) is the shared non-interactive tree renderer — also used by `VCInlineTree` for inlined Visual Component bodies. It mirrors the publisher's per-node output: `classIds` resolve to class names, `inlineStyles` are applied as the element's `style` (via `bagToReactStyle` from `@core/publisher`, the same sanitisation gate as the published `style="…"` attribute), template bindings/tokens resolve against the canvas render context when one is provided, and `base.loop` nodes use the same live preview items as the editable canvas. Composed content (template chrome, outlet previews, VC bodies) therefore renders with the same styles and dynamic data as the editable canvas and the published page.
 - **Navigation guard:** the canvas iframe is an editing surface, never a browsing surface. `IframeFrameSurface` installs a capture-phase `click`/`auxclick`/`submit` listener on the iframe document that `preventDefault`s link navigation and form submission (without `stopPropagation`, so node selection still works) — so clicking a logo/link in the read-only template chrome, an inlined component, or any authored content never reloads the frame. Applies to both the design canvas and the live/preview frame.
 - **Read-only affordance:** `ReadOnlyNodeTree` stamps `data-instatic-readonly-{label,kind,id}` on every read-only element (the source is named by `CanvasComposedTree`, `OutletEditor`, and `VCInlineTree`). `BreakpointFrame` shows a cursor-following `CursorTooltip` ("Part of X — double-click to edit") on hover, and `IframeFrameSurface` opens the source on double-click (`onReadonlyOpen` → `openPageInCanvas` / `setActiveDocument`). The read-only markers ride the optional fields on `NodeWrapperProps`.
 
diff --git a/src/__tests__/canvas/templatePreviewBindings.test.tsx b/src/__tests__/canvas/templatePreviewBindings.test.tsx
@@ -149,6 +149,98 @@ describe('canvas template preview bindings', () => {
       expect(combinedCanvasText()).toContain('No image selected')
     })
   })
+
+  it('resolves loop currentEntry tokens when an everywhere template previews a page in its outlet', async () => {
+    globalThis.fetch = (async (input: RequestInfo | URL) => {
+      const url = String(input)
+      if (url === '/admin/api/cms/data/tables/posts') {
+        return new Response(JSON.stringify({ table: postsTable }), { status: 200 })
+      }
+      if (url.startsWith('/admin/api/cms/data/tables/posts/loop-preview')) {
+        return new Response(JSON.stringify({
+          items: [
+            {
+              id: 'post-1',
+              fields: {
+                id: 'post-1',
+                title: 'Published Blog Post',
+                slug: 'published-blog-post',
+                body: 'Body',
+                permalink: '/posts/published-blog-post',
+                publishedAt: '2026-05-01T10:00:00.000Z',
+              },
+            },
+          ],
+          totalItems: 1,
+        }), { status: 200 })
+      }
+      if (url === '/admin/api/cms/data/tables') {
+        return new Response(JSON.stringify({ tables: [postsTable] }), { status: 200 })
+      }
+
+      return new Response('{}', { status: 404 })
+    }) as typeof fetch
+
+    const mainRoot = makeNode({ id: 'main-root', moduleId: 'base.body', children: ['main-outlet'] })
+    const mainOutlet = makeNode({ id: 'main-outlet', moduleId: 'base.outlet', props: {} })
+    const mainTemplate = makePage({
+      id: 'main-template',
+      title: 'Main',
+      slug: 'main',
+      rootNodeId: 'main-root',
+      nodes: { 'main-root': mainRoot, 'main-outlet': mainOutlet },
+      template: {
+        enabled: true,
+        target: { kind: 'everywhere' },
+        priority: 100,
+      },
+    })
+
+    const blogRoot = makeNode({ id: 'blog-root', moduleId: 'base.body', children: ['post-loop'] })
+    const postLoop = makeNode({
+      id: 'post-loop',
+      moduleId: 'base.loop',
+      props: {
+        sourceId: 'data.rows',
+        filters: { tableId: 'posts' },
+        orderBy: 'publishedAt',
+        direction: 'desc',
+        limit: 6,
+        offset: 0,
+        pagination: 'none',
+        pageSize: 10,
+        tag: 'section',
+        customTag: '',
+      },
+      children: ['post-title'],
+    })
+    const postTitle = makeNode({
+      id: 'post-title',
+      moduleId: 'base.text',
+      props: { text: '{currentEntry.title}', tag: 'h2' },
+    })
+    const blogPage = makePage({
+      id: 'blog',
+      title: 'Blog',
+      slug: 'blog',
+      rootNodeId: 'blog-root',
+      nodes: { 'blog-root': blogRoot, 'post-loop': postLoop, 'post-title': postTitle },
+    })
+
+    useEditorStore.setState({
+      site: makeSite({ pages: [mainTemplate, blogPage] }),
+      activePageId: mainTemplate.id,
+      activeDocument: { kind: 'page', pageId: mainTemplate.id },
+    } as Parameters<typeof useEditorStore.setState>[0])
+
+    renderCanvas()
+
+    await waitFor(() => {
+      const text = combinedCanvasText()
+      expect(text).toContain('Published Blog Post')
+      expect(text).not.toContain('{currentEntry.title}')
+    })
+  })
 })
 
 function canvasFrameDocs(): Document[] {
diff --git a/src/__tests__/editor/readOnlyNodeTree.test.tsx b/src/__tests__/editor/readOnlyNodeTree.test.tsx
@@ -101,6 +101,27 @@ describe('ReadOnlyNodeTree — inline styles', () => {
   })
 })
 
+describe('ReadOnlyNodeTree — dynamic preview context', () => {
+  it('resolves currentEntry tokens in read-only template previews', () => {
+    const nodes: Record<string, BaseNode> = {
+      h1: textNode('h1', {
+        props: { text: '{currentEntry.title}', tag: 'h1', htmlAttributes: {} },
+      }),
+    }
+    const { container } = render(
+      <ReadOnlyNodeTree
+        nodes={nodes}
+        rootNodeId="h1"
+        classes={{}}
+        templateContext={{ entryStack: [{ id: 'post-1', fields: { title: 'Dynamic Post' } }] }}
+      />,
+    )
+    const h1 = container.querySelector('h1')
+    expect(h1).not.toBeNull()
+    expect(h1!.textContent).toBe('Dynamic Post')
+  })
+})
+
 describe('bagToReactStyle', () => {
   it('passes fluid values like clamp() through unchanged', () => {
     expect(bagToReactStyle({ fontSize: 'clamp(46px, 10.5vw, 138px)' })).toEqual({
diff --git a/src/admin/pages/site/canvas/CanvasComposedTree.tsx b/src/admin/pages/site/canvas/CanvasComposedTree.tsx
@@ -25,13 +25,14 @@
  * `OutletEditor`.
  */
 
-import { useEffect, useRef, type ReactNode } from 'react'
+import { use, useEffect, useRef, type ReactNode } from 'react'
 import type { BaseNode, Page } from '@core/page-tree'
 import { classNamesForClassIds } from '@core/page-tree'
 import { useEditorStore } from '@site/store/store'
 import { ReadOnlyNodeTree } from '@modules/base/utils/ReadOnlyNodeTree'
 import { NodeRenderer } from './NodeRenderer'
 import { resolveEditorWrapperTemplates } from './canvasComposition'
+import { CanvasTemplateContext } from './CanvasContexts'
 
 const NO_WRAPPERS: Page[] = []
 
@@ -44,6 +45,7 @@ export function CanvasComposedTree({ page }: CanvasComposedTreeProps) {
   const site = useEditorStore((s) => s.site)
   const isVcMode = useEditorStore((s) => s.activeDocument?.kind === 'visualComponent')
   const styleRules = useEditorStore((s) => s.site?.styleRules ?? null)
+  const templateContext = use(CanvasTemplateContext)
 
   // Templates wrapping the active document (outermost-first). A Visual
   // Component edit surface is never a published route, so it is never wrapped.
@@ -75,6 +77,7 @@ export function CanvasComposedTree({ page }: CanvasComposedTreeProps) {
         classes={styleRules}
         outletSlot={composed}
         readonly={{ label: `${wrapper.title} template`, kind: 'page', targetId: wrapper.id }}
+        templateContext={templateContext}
       />
     )
   }
diff --git a/src/modules/base/utils/ReadOnlyNodeTree.tsx b/src/modules/base/utils/ReadOnlyNodeTree.tsx
@@ -31,9 +31,15 @@
 import type { ReactNode } from 'react'
 import { registry } from '@core/module-engine'
 import type { NodeWrapperProps as NodeWrapperPropsType } from '@core/module-engine'
-import type { BaseNode } from '@core/page-tree'
-import { classNamesForClassIds, type StyleRuleRegistry } from '@core/page-tree'
+import type { BaseNode, PageNode } from '@core/page-tree'
+import { classNamesForClassIds, resolveProps, type StyleRuleRegistry } from '@core/page-tree'
 import { bagToReactStyle } from '@core/publisher'
+import {
+  effectiveNodeBindings,
+  resolveDynamicProps,
+  type TemplateRenderDataContext,
+} from '@core/templates/dynamicBindings'
+import { useLoopPreviewItems } from '@site/canvas/useLoopPreviewItems'
 
 /**
  * Identifies the editable source a read-only region was composed from, so the
@@ -78,6 +84,11 @@ interface ReadOnlyNodeTreeProps {
    * canvas can show a hover hint and open the source on double-click.
    */
   readonly?: ReadOnlyRegion
+  /**
+   * Render data used to resolve template bindings and `{source.field}` tokens
+   * in read-only canvas content. When omitted, unresolved tokens stay visible.
+   */
+  templateContext?: TemplateRenderDataContext
 }
 
 /** Build the `data-instatic-readonly-*` marker bag spread onto read-only nodes. */
@@ -106,6 +117,7 @@ export function ReadOnlyNodeTree({
   rootNodeWrapperProps,
   outletSlot,
   readonly,
+  templateContext,
 }: ReadOnlyNodeTreeProps) {
   // Resolve the single outlet that hosts `outletSlot` up front so only the
   // first outlet is filled (matching the composer's "first outlet wins").
@@ -120,6 +132,7 @@ export function ReadOnlyNodeTree({
       outletNodeId={outletNodeId}
       outletSlot={outletSlot}
       readonlyMarkers={readonlyMarkers(readonly)}
+      templateContext={templateContext}
     />
   )
 }
@@ -142,6 +155,8 @@ interface ReadOnlyNodeRendererProps {
   outletSlot?: ReactNode
   /** Read-only marker bag stamped on every node lacking selection props. */
   readonlyMarkers?: NodeWrapperPropsType
+  /** Render data used to resolve dynamic props and token interpolation. */
+  templateContext?: TemplateRenderDataContext
 }
 
 function ReadOnlyNodeRenderer({
@@ -153,6 +168,7 @@ function ReadOnlyNodeRenderer({
   outletNodeId,
   outletSlot,
   readonlyMarkers,
+  templateContext,
 }: ReadOnlyNodeRendererProps) {
   const node = nodes[nodeId]
   if (!node) return null
@@ -180,6 +196,7 @@ function ReadOnlyNodeRenderer({
             outletNodeId={outletNodeId}
             outletSlot={outletSlot}
             readonlyMarkers={readonlyMarkers}
+            templateContext={templateContext}
           />
         ))}
       </>
@@ -190,18 +207,36 @@ function ReadOnlyNodeRenderer({
   if (!definition) return null
 
   const ComponentType = definition.component
+  const effectiveProps = resolveDynamicProps(
+    resolveProps(node, undefined, definition.schema),
+    effectiveNodeBindings(node),
+    templateContext,
+  )
 
-  const children = node.children.map((childId) => (
-    <ReadOnlyNodeRenderer
-      key={childId}
-      nodeId={childId}
+  const children = node.moduleId === 'base.loop' && node.children.length > 0 ? (
+    <ReadOnlyLoopIterationsPreview
+      node={node as PageNode}
       nodes={nodes}
       classes={classes}
       outletNodeId={outletNodeId}
       outletSlot={outletSlot}
       readonlyMarkers={readonlyMarkers}
+      templateContext={templateContext}
     />
-  ))
+  ) : (
+    node.children.map((childId) => (
+      <ReadOnlyNodeRenderer
+        key={childId}
+        nodeId={childId}
+        nodes={nodes}
+        classes={classes}
+        outletNodeId={outletNodeId}
+        outletSlot={outletSlot}
+        readonlyMarkers={readonlyMarkers}
+        templateContext={templateContext}
+      />
+    ))
+  )
 
   const ownClassNames = classNamesForClassIds(classes, node.classIds)
   const merged = [extraClassName, ...ownClassNames].filter(Boolean).join(' ')
@@ -226,7 +261,7 @@ function ReadOnlyNodeRenderer({
 
   return (
     <ComponentType
-      props={node.props as never}
+      props={effectiveProps as never}
       nodeId={node.id}
       isSelected={false}
       mcClassName={mcClassName}
@@ -245,3 +280,51 @@ function isRenderableNode(nodes: Record<string, BaseNode>, nodeId: string): bool
   }
   return Boolean(registry.get(node.moduleId))
 }
+
+interface ReadOnlyLoopIterationsPreviewProps {
+  node: PageNode
+  nodes: Record<string, BaseNode>
+  classes: StyleRuleRegistry
+  outletNodeId?: string
+  outletSlot?: ReactNode
+  readonlyMarkers?: NodeWrapperPropsType
+  templateContext?: TemplateRenderDataContext
+}
+
+function ReadOnlyLoopIterationsPreview({
+  node,
+  nodes,
+  classes,
+  outletNodeId,
+  outletSlot,
+  readonlyMarkers,
+  templateContext,
+}: ReadOnlyLoopIterationsPreviewProps) {
+  const items = useLoopPreviewItems(node)
+  if (items.length === 0) return null
+
+  const baseStack = templateContext?.entryStack ?? []
+  return (
+    <>
+      {items.map((item, i) => {
+        const variantId = node.children[i % node.children.length]
+        const augmentedContext: TemplateRenderDataContext = {
+          ...templateContext,
+          entryStack: [...baseStack, item],
+        }
+        return (
+          <ReadOnlyNodeRenderer
+            key={`${variantId}-${i}-${item.id}`}
+            nodeId={variantId}
+            nodes={nodes}
+            classes={classes}
+            outletNodeId={outletNodeId}
+            outletSlot={outletSlot}
+            readonlyMarkers={readonlyMarkers}
+            templateContext={augmentedContext}
+          />
+        )
+      })}
+    </>
+  )
+}
