sygnal 5.3.7 → 6.0.0

package/src/vike/onRenderClient.ts

@@ -18,6 +18,7 @@
 // Import from the package entry so rollup externalizes it
 // @ts-ignore — resolved at runtime via package exports
 import { run } from 'sygnal'
+import { owned } from '../extra/owned'
 
 declare global {
   interface Window {
@@ -31,12 +32,16 @@ interface PageContext {
   routeParams?: Record<string, string>
   urlPathname?: string
   isHydration?: boolean
+  /** PLAN-3 5-5 (H-7): the queryCache() snapshot a loader seeded (see onRenderHtml) */
+  queryCache?: any
   config: {
     Layout?: any | any[]
     Wrapper?: any | any[]
     title?: string
     ssr?: boolean
     drivers?: Record<string, (sink: any) => any>
+    // PLAN-4 GS-11: the app-level error hook (not Vike's own onError)
+    sygnalOnError?: (error: any, info: any) => void
   }
 }
 
@@ -54,40 +59,53 @@ let currentRouteParams: any = {}
 let currentUrlPathname: string = ''
 let pageNavCounter: number = 0
 
+/**
+ * PLAN-4 G-207: the uid() path part of a shell component or the Page: wrapper_0 → 'w0',
+ * layout_1 → 'l1', page → 'p'. Given as the nested vnode's `id` prop, so the Page's uid is
+ * 'u-w0-l0-p' however the shell nests it; onRenderHtml renders each one with the same root
+ * (renderToString's `uid`), so server and client ids match. (Same helper in onRenderHtml.ts.)
+ */
+function uidPart(key: string): string {
+  return key == 'page' ? 'p' : key[0] + key.slice(key.indexOf('_') + 1)
+}
+
+/**
+ * PLAN-4.6 R4 (04 §3.11): the core instantiates a component from the vnode's `data.c`, a
+ * component function, and reads its statics there (no options object). A shell component or a
+ * Page is wrapped once (a per-app / per-navigation function) with the statics the options
+ * gave the 5.x core: isolatedState, and the initial state.
+ */
+const shellFns = new WeakMap<any, any>()
+function shellFn(comp: any, initialState: any, cache = true): any {
+  let f = cache ? shellFns.get(comp) : undefined
+  if (!f) {
+    f = Object.assign((p: any) => comp(p), comp, { isolatedState: true, initialState })
+    try { Object.defineProperty(f, 'name', { value: comp.name, configurable: true }) } catch (_) {}
+    if (cache) shellFns.set(comp, f)
+  }
+  return f
+}
+let pageFn: any, pageFnNav = -1
+
 /**
  * Build a component vnode that matches what the JSX pragma produces.
  */
-function componentVNode(comp: any, stateField: string, children: any[], compInitialState?: any): any {
+function componentVNode(comp: any, key: string, stateField: any, children: any[], compInitialState?: any): any {
   const name = comp.componentName || comp.name || 'FUNCTION_COMPONENT'
   return {
     sel: name,
     data: {
+      c: shellFn(comp, owned(comp.initialState)),
       props: {
         state: stateField,
-        sygnalOptions: {
-          name,
-          view: comp,
-          model: comp.model,
-          intent: comp.intent,
-          hmrActions: comp.hmrActions,
-          context: comp.context,
-          peers: comp.peers,
-          components: comp.components,
-          initialState: compInitialState,
-          isolatedState: true,
-          calculated: comp.calculated,
-          storeCalculatedInState: comp.storeCalculatedInState,
-          DOMSourceName: comp.DOMSourceName,
-          stateSourceName: comp.stateSourceName,
-          onError: comp.onError,
-          debug: comp.debug,
-        },
+        // G-207: the uid() base, as onRenderHtml gives this shell component (see uidPart)
+        id: uidPart(key),
       },
     },
     children,
     text: undefined,
     elm: undefined,
-    key: '__vike_' + stateField + '__',
+    key: '__vike_' + key + '__',
   }
 }
 
@@ -96,33 +114,19 @@ function componentVNode(comp: any, stateField: string, children: any[], compInit
  * Reads from mutable `currentPage` / `currentPageName` so the wrapper
  * view picks up the new Page component on navigation without being recreated.
  */
-function pageChildVNode(pageState: any): any {
-  // Include pageNavCounter in sel so instantiateSubComponents detects a
-  // component swap even when both pages have the same function name (e.g. 'Page').
+function pageChildVNode(pageState: any, stateField: any = 'page'): any {
+  // a new function per navigation, so the Page is made again even when both pages are the same
+  // function (e.g. 'Page'); the nav counter in `sel` keeps the vnodes apart
   const sel = currentPageName + '__nav' + pageNavCounter
+  if (pageFnNav !== pageNavCounter) { pageFnNav = pageNavCounter; pageFn = shellFn(currentPage, undefined, false) }
   return {
     sel,
     data: {
+      c: pageFn,
       props: {
-        state: 'page',
-        sygnalOptions: {
-          name: sel,
-          view: currentPage,
-          model: currentPage.model,
-          intent: currentPage.intent,
-          hmrActions: currentPage.hmrActions,
-          context: currentPage.context,
-          peers: currentPage.peers,
-          components: currentPage.components,
-          initialState: pageState,
-          isolatedState: true,
-          calculated: currentPage.calculated,
-          storeCalculatedInState: currentPage.storeCalculatedInState,
-          DOMSourceName: currentPage.DOMSourceName,
-          stateSourceName: currentPage.stateSourceName,
-          onError: currentPage.onError,
-          debug: currentPage.debug,
-        },
+        state: stateField,
+        // G-207: the Page's uid() base, as onRenderHtml gives it (the same across navigations)
+        id: uidPart('page'),
       },
     },
     children: [],
@@ -146,13 +150,37 @@ function createLayoutWrapper(wrappers: any[], layouts: any[], Page: any): any {
   currentPage = Page
   currentPageName = Page.componentName || Page.name || 'VikePageComponent'
 
-  // Combined shell = wrappers (outermost) + layouts (innermost around Page)
-  // State keys: wrapper_0, wrapper_1, ..., layout_0, layout_1, ...
-  // Page state lives under the innermost shell component's slice.
-  const shell = [
-    ...wrappers.map((w: any, i: number) => ({ comp: w, key: 'wrapper_' + i })),
-    ...layouts.map((l: any, i: number) => ({ comp: l, key: 'layout_' + i })),
-  ]
+  // Combined shell = wrappers (outermost) + layouts (innermost around Page).
+  // D50: the root state holds every slice as a sibling, as in 5.4.0 but with the Page at the
+  // root too: { wrapper_0, ..., layout_0, ..., page }. A component's `state` prop selects from
+  // its parent component's state, and the shell components are nested in each other, so each
+  // one (and the Page) gets a { get, set } lens onto its own ROOT slice: an outer component's
+  // reducer replacing its state can't wipe the inner slices (R2-2), and no view sees another
+  // component's slice.
+  const keys = shellKeys(wrappers, layouts)
+  const shell = [...wrappers, ...layouts].map((comp: any, i: number) => ({ comp, key: keys[i] }))
+
+  // The latest root state. Only the outermost lens gets the root itself; the nested lenses get
+  // their parent shell component's state. In both directions the outermost lens runs first and
+  // synchronously (state: root -> outer get -> inner get; a reducer: outer get, inner get, inner
+  // set, outer set), so the nested lenses read and write through `root`.
+  let root: any = {}
+  const rootLens = (key: string, outermost: boolean, fresh: boolean) => ({
+    get: (state: any) => {
+      if (outermost) root = state || {}
+      const slice = root[key]
+      // a shell slice is a new object on every root state, so the components nested in the
+      // shell component see every change (their state stream drops repeated objects)
+      return fresh && slice && typeof slice === 'object' && !Array.isArray(slice) ? { ...slice } : slice
+    },
+    set: (state: any, slice: any) => {
+      root = { ...root, [key]: slice }
+      // a nested lens returns a changed parent state, so the parent's lens writes `root` back
+      return outermost ? root : { ...state }
+    },
+  })
+  const lenses = keys.map((key, i) => rootLens(key, i === 0, true))
+  const pageLens = rootLens('page', false, false)
 
   function LayoutWrapperView({ state }: any) {
     if (shell.length === 0) {
@@ -161,17 +189,17 @@ function createLayoutWrapper(wrappers: any[], layouts: any[], Page: any): any {
     }
 
     const lastIdx = shell.length - 1
-    const innermostState = state[shell[lastIdx].key] || {}
     let inner: any = componentVNode(
       shell[lastIdx].comp,
       shell[lastIdx].key,
-      [pageChildVNode(innermostState.page)],
-      innermostState
+      lenses[lastIdx],
+      [pageChildVNode(state.page, pageLens)],
+      state[shell[lastIdx].key]
     )
 
     // Wrap with outer shell components
     for (let i = lastIdx - 1; i >= 0; i--) {
-      inner = componentVNode(shell[i].comp, shell[i].key, [inner], state[shell[i].key])
+      inner = componentVNode(shell[i].comp, shell[i].key, lenses[i], [inner], state[shell[i].key])
     }
 
     // Wrap in a plain div so the view returns a regular DOM vnode.
@@ -188,19 +216,16 @@ function createLayoutWrapper(wrappers: any[], layouts: any[], Page: any): any {
   }
 
   LayoutWrapperView.componentName = 'VikeLayoutWrapper'
+  // run() names the root by `name` first
+  try { Object.defineProperty(LayoutWrapperView, 'name', { value: 'VikeLayoutWrapper', configurable: true }) } catch (_) {}
 
-  // Build the wrapper's initial state with a slice for each shell component.
-  // Page state is nested under the innermost shell component's slice.
-  const wrapperInitialState: any = {}
-  shell.forEach(({ comp, key }: any, i: number) => {
-    const sliceState: any = { ...(comp.initialState || {}) }
-    if (i === shell.length - 1) {
-      sliceState.page = Page.initialState || {}
-    }
-    wrapperInitialState[key] = sliceState
-  })
-
-  LayoutWrapperView.initialState = wrapperInitialState
+  // The wrapper's initial state: a sibling slice for each shell component and the Page.
+  // Must match onRenderHtml's serialized state.
+  const initialState: any = {}
+  shell.forEach(({ comp, key }: any) => { initialState[key] = { ...(comp.initialState || {}) } })
+  initialState.page = Page.initialState || {}
+  // G-275: owned (built from the hydrated state and pageContext.data: never frozen in dev)
+  LayoutWrapperView.initialState = root = owned(initialState)
 
   // Context uses mutable references so navigation updates are picked up.
   // Wrapper and Layout contexts are merged once; page-level context
@@ -224,6 +249,14 @@ function createLayoutWrapper(wrappers: any[], layouts: any[], Page: any): any {
   return LayoutWrapperView
 }
 
+/** State keys of the shell components, outermost first: wrapper_0, ..., layout_0, ... */
+function shellKeys(wrappers: any[], layouts: any[]): string[] {
+  return [
+    ...wrappers.map((_: any, i: number) => 'wrapper_' + i),
+    ...layouts.map((_: any, i: number) => 'layout_' + i),
+  ]
+}
+
 /**
  * Normalize a cumulative config value into an array of functions.
  */
@@ -240,37 +273,41 @@ export function onRenderClient(pageContext: PageContext) {
   const layouts = toComponentArray(config.Layout)
   const hasShell = wrappers.length > 0 || layouts.length > 0
 
-  // The shell is wrappers (outermost) + layouts. The innermost component
-  // holds the Page state as a nested sub-component.
-  const shell = [
-    ...wrappers.map((_: any, i: number) => 'wrapper_' + i),
-    ...layouts.map((_: any, i: number) => 'layout_' + i),
-  ]
-  const innermostKey = shell.length > 0 ? shell[shell.length - 1] : null
+  // The shell is wrappers (outermost) + layouts; their state slices and the Page's are
+  // siblings at the root (D50).
+  const shell = shellKeys(wrappers, layouts)
+
+  // PLAN-3 5-5 (H-7): seed the caches of the fetch drivers (makeFetchDriver({ cache: queryCache() })
+  // exposes it as driver.cache) before the page renders, so its resources start at 'success'
+  if (pageContext.queryCache) {
+    for (const d of Object.values(config.drivers || {})) (d as any)?.cache?.hydrate?.(pageContext.queryCache)
+  }
 
   // Update mutable context references (used by the wrapper's context functions)
   currentPageData = data
   currentRouteParams = pageContext.routeParams || {}
-  currentUrlPathname = pageContext.urlPathname || ''
+  // urlPathname is built in on the client with Client Routing (G-046: it is
+  // not in passToClient); fall back to the location with Server Routing.
+  currentUrlPathname = pageContext.urlPathname
+    || (typeof window !== 'undefined' && window.location ? window.location.pathname : '')
 
   // --- Shell path: hot-swap Page, keep Layout/Wrapper alive ---
   if (hasShell) {
     if (currentApp) {
       // Client-side navigation: swap the Page without disposing the shell.
+      // PLAN-3 5-4b: a router given Vike's navigate() (makeRouter({ routes, navigate })) re-reads
+      // the route on this event; sent before the swap, so the new Page declares after it
+      if (typeof window !== 'undefined') window.dispatchEvent?.(new Event('sygnal:navigate'))
       currentPage = Page
       currentPageName = Page.componentName || Page.name || 'VikePageComponent'
       pageNavCounter++
 
       const newPageState = { ...(Page.initialState || {}), ...data }
-      if (currentApp.sinks?.STATE?.shamefullySendNext) {
-        currentApp.sinks.STATE.shamefullySendNext((state: any) => {
-          const shellState = state[innermostKey!] || {}
-          return {
-            ...state,
-            [innermostKey!]: { ...shellState, page: newPageState },
-          }
-        })
-      }
+      // replace the page slice, keeping every shell slice (G-106, D50)
+      const swapPage = (state: any) => ({ ...state, page: newPageState })
+      // (PLAN-4.6 core: through the runtime API, 04 §3.11)
+      const rt = (currentApp as any).__runtime
+      rt?.setState('root', swapPage)
     } else {
       // First load: read hydrated state or build from initialState
       let initialState: any
@@ -281,23 +318,25 @@ export function onRenderClient(pageContext: PageContext) {
         initialState = null
       }
 
-      if (initialState && innermostKey && initialState[innermostKey] !== undefined) {
-        // Hydrated combined state — distribute slices to each shell component
+      if (initialState && initialState[shell[shell.length - 1]] !== undefined) {
+        // Hydrated shell state: sibling slices (D50), or the 5.4.0 shape with the Page state
+        // under the innermost shell slice (R2-9) — distribute the slices to each component
         const allShellComps = [...wrappers, ...layouts]
+        let pageState = initialState.page
         shell.forEach((key: string, i: number) => {
-          if (initialState[key] !== undefined) {
-            if (i === shell.length - 1) {
-              const { page: pageState, ...compState } = initialState[key]
-              allShellComps[i].initialState = compState
-              Page.initialState = pageState || { ...(Page.initialState || {}), ...data }
-            } else {
-              allShellComps[i].initialState = initialState[key]
-            }
+          let slice = initialState[key]
+          if (slice === undefined) return
+          if (i === shell.length - 1 && slice && 'page' in slice) {
+            const { page, ...rest } = slice
+            if (pageState === undefined) pageState = page
+            slice = rest
           }
+          allShellComps[i].initialState = owned(slice)
         })
+        Page.initialState = owned(pageState || { ...(Page.initialState || {}), ...data })
       } else {
         // SPA mode or client-side first navigation
-        Page.initialState = { ...(Page.initialState || {}), ...data }
+        Page.initialState = owned({ ...(Page.initialState || {}), ...data })
       }
 
       // Inject page-level context into Page (for SSR renderToString compat)
@@ -311,7 +350,9 @@ export function onRenderClient(pageContext: PageContext) {
       const Component = createLayoutWrapper(wrappers, layouts, Page)
 
       try {
-        currentApp = run(Component, config.drivers || {}, { mountPoint: '#page-view' }) as any
+        // 3-B2: `__vike` marks the shell's components (Page, Layouts, Wrappers: sub-components of
+        // the shell root) for the dev entry, whose SYG224 then says persist() isn't supported there
+        currentApp = run(Component, { ...config.drivers, __vike: () => 1 }, { mountPoint: '#page-view', onError: config.sygnalOnError }) as any
       } catch (err: any) {
         console.error('[sygnal/vike] Client render error:', err)
         const container = document.getElementById('page-view')
@@ -332,14 +373,17 @@ export function onRenderClient(pageContext: PageContext) {
     }
 
     let initialState: any
+    // 3-B2: the server's state is here when the page hydrates its HTML
+    let serverState = false
     if (typeof window !== 'undefined' && window.__VIKE_SYGNAL_STATE__ !== undefined) {
       initialState = window.__VIKE_SYGNAL_STATE__
       delete window.__VIKE_SYGNAL_STATE__
+      serverState = true
     } else {
       initialState = { ...(Page.initialState || {}), ...data }
     }
 
-    Page.initialState = initialState
+    Page.initialState = owned(initialState)
     Page.context = {
       ...Page.context,
       pageData: () => currentPageData,
@@ -348,7 +392,11 @@ export function onRenderClient(pageContext: PageContext) {
     }
 
     try {
-      currentApp = run(Page, config.drivers || {}, { mountPoint: '#page-view' }) as any
+      // 3-B2: the Page is the root, so its persist() restores after the first render when this
+      // is a hydration (`__hydrate`), keeping that render equal to the server's HTML. A client-side
+      // navigation isn't one, though the previous page's markup is still in #page-view
+      const hydrating = pageContext.isHydration ?? serverState
+      currentApp = run(Page, { ...config.drivers, __hydrate: () => hydrating }, { mountPoint: '#page-view', onError: config.sygnalOnError }) as any
     } catch (err: any) {
       console.error('[sygnal/vike] Client render error:', err)
       const container = document.getElementById('page-view')

package/src/vike/onRenderHtml.ts

@@ -15,7 +15,7 @@
  */
 
 // @ts-ignore — resolved at runtime via package exports
-import { renderToString } from 'sygnal'
+import { renderToString, renderHead, queryCache } from 'sygnal'
 
 interface PageContext {
   Page: any
@@ -31,8 +31,16 @@ interface PageContext {
     favicon?: string
     lang?: string
     ssr?: boolean
+    // PLAN-4 GS-11: the app-level error hook (not Vike's own onError)
+    sygnalOnError?: (error: any, info: any) => void
   }
   is404?: boolean
+  /**
+   * PLAN-3 5-5 (H-7): a queryCache() snapshot a loader (+data) seeded:
+   * `pageContext.queryCache = cache.dehydrate()`. Resources render from it here, and Vike passes
+   * it to the client (passToClient), where onRenderClient hydrates the drivers' caches with it
+   */
+  queryCache?: any
 }
 
 /**
@@ -46,6 +54,16 @@ function esc(str: string): string {
     .replace(/"/g, '"')
 }
 
+/**
+ * PLAN-4 G-207: the uid() path part of a shell component or the Page (wrapper_0 → 'w0',
+ * layout_1 → 'l1', page → 'p'), as onRenderClient gives each nested vnode in its `id` prop. Each
+ * one renders here as its own root, so its root is 'u' plus the parts of the shell around it and
+ * its own: the same uids as the client's nested instances.
+ */
+function uidPart(key: string): string {
+  return key == 'page' ? 'p' : key[0] + key.slice(key.indexOf('_') + 1)
+}
+
 export function onRenderHtml(pageContext: PageContext) {
   const { Page, config } = pageContext
   const data = pageContext.data || {}
@@ -107,6 +125,9 @@ export function onRenderHtml(pageContext: PageContext) {
     urlPathname: () => pageContext.urlPathname || '',
   }
 
+  // PLAN-3 5-5 (H-7): the seeded cache the components' resources render from
+  const cache = pageContext.queryCache ? queryCache({ initial: pageContext.queryCache }) : undefined
+
   // Determine if Wrapper(s) and/or Layout(s) are present — this affects hydration state shape
   const wrapperArray = config.Wrapper
     ? (Array.isArray(config.Wrapper) ? config.Wrapper : [config.Wrapper])
@@ -117,15 +138,32 @@ export function onRenderHtml(pageContext: PageContext) {
         .filter((L: any) => typeof L === 'function')
     : []
   const hasShell = wrapperArray.length > 0 || layoutArray.length > 0
+  // Combined shell: wrappers (outermost) + layouts (innermost around Page)
+  // Must match the order used in onRenderClient's createLayoutWrapper.
+  const shell = [
+    ...wrapperArray.map((w: any, i: number) => ({ comp: w, key: 'wrapper_' + i })),
+    ...layoutArray.map((l: any, i: number) => ({ comp: l, key: 'layout_' + i })),
+  ]
+  // G-207: with a shell, the client nests each shell component and the Page in the one outside it
+  // with an `id` prop (onRenderClient), so their uid roots are 'u-w0', 'u-w0-l0', 'u-w0-l0-p'
+  const uidRoot = (i: number) => ['u', ...shell.slice(0, i + 1).map(s => uidPart(s.key))].join('-')
+  const pageUid = hasShell ? uidRoot(shell.length - 1) + '-' + uidPart('page') : undefined
 
   // Render the page component to HTML, with error boundary.
   // When layouts are present, the hydration state is serialized separately
   // as the wrapper's combined state (with page + layout slices).
+  // PLAN-3 (HEAD driver): the `head` statics of the rendered components (shell first, so the page's win)
+  const pageHeads: any[] = [], shellHeads: any[] = []
   let pageHtml: string
   try {
     pageHtml = renderToString(Page, {
       state: initialState,
+      onError: config.sygnalOnError,
+      // G-207: the client's uid base and `id` prop for the nested Page
+      ...(hasShell && { uid: pageUid, props: { id: uidPart('page') } }),
       hydrateState: hasShell ? false : '__VIKE_SYGNAL_STATE__',
+      head: pageHeads,
+      cache,
     })
   } catch (err: any) {
     // If the component has an onError boundary, try rendering its fallback
@@ -152,27 +190,33 @@ export function onRenderHtml(pageContext: PageContext) {
   // If Layout(s) and/or Wrapper(s) are defined, render them wrapping the page content.
   // HTML is rendered INSIDE #page-view so the structure matches the client-side
   // wrapper component. Nesting order: Wrapper > Layout > Page.
-  // Each shell component receives page content via a placeholder in its children slot.
+  // Each shell component receives the page content as a placeholder. G-464: a placeholder element
+  // as its `children` (`<main>{children}</main>`, as on the client), and, for a Layout written
+  // for the server only, the `innerHTML` prop.
   let pageViewContent = pageHtml
   if (hasShell) {
-    // Combined shell: wrappers (outermost) + layouts (innermost around Page)
-    // Must match the order used in onRenderClient's createLayoutWrapper.
-    const shell = [
-      ...wrapperArray.map((w: any, i: number) => ({ comp: w, key: 'wrapper_' + i })),
-      ...layoutArray.map((l: any, i: number) => ({ comp: l, key: 'layout_' + i })),
-    ]
-
+    // G-491: with attributes too (a shell whose root, or fragment's first element, is the slot
+    // carries the SSR root stamp: data-sygnal-ssr="")
+    const SLOT = /<sygnal-page-slot(?:\s[^>]*)?><\/sygnal-page-slot>/
+    const PLACEHOLDER = '<!--SYGNAL_PAGE_SLOT-->'
     // Wrap from innermost to outermost (reverse order)
     for (let i = shell.length - 1; i >= 0; i--) {
-      const { comp } = shell[i]
-      const PLACEHOLDER = '<!--SYGNAL_PAGE_SLOT-->'
+      const { comp, key } = shell[i]
+      const slot = { sel: 'sygnal-page-slot', data: {}, children: [], text: undefined, elm: undefined, key: undefined }
       const compHtml = renderToString(comp, {
         state: comp.initialState || {},
-        props: { innerHTML: PLACEHOLDER },
+        // G-207: the uid root and `id` prop the client's nested instance has
+        uid: uidRoot(i),
+        props: { innerHTML: PLACEHOLDER, id: uidPart(key), children: [slot] },
+        head: shellHeads,
+        cache,
+        onError: config.sygnalOnError,
       })
-      const splitIdx = compHtml.indexOf(PLACEHOLDER)
+      const m = SLOT.exec(compHtml)
+      let splitIdx = m ? m.index : -1, len = m ? m[0].length : 0
+      if (splitIdx === -1) splitIdx = compHtml.indexOf(PLACEHOLDER), len = PLACEHOLDER.length
       if (splitIdx !== -1) {
-        pageViewContent = compHtml.substring(0, splitIdx) + pageViewContent + compHtml.substring(splitIdx + PLACEHOLDER.length)
+        pageViewContent = compHtml.substring(0, splitIdx) + pageViewContent + compHtml.substring(splitIdx + len)
       } else {
         // Fallback: component didn't use children/innerHTML, wrap content after it
         pageViewContent = compHtml + pageViewContent
@@ -181,17 +225,12 @@ export function onRenderHtml(pageContext: PageContext) {
     // Wrap in a shell div matching the client-side wrapper's root element
     pageViewContent = `<div id="vike-shell">${pageViewContent}</div>`
 
-    // Serialize the wrapper's combined state for hydration.
-    // Must match the state shape from createLayoutWrapper:
-    //   { wrapper_0: {...}, layout_0: { ...layoutState, page: pageState } }
+    // Serialize the wrapper's combined state for hydration. Must match the state shape
+    // from createLayoutWrapper (D50: sibling slices at the root):
+    //   { wrapper_0: { ...wrapperState }, layout_0: { ...layoutState }, page: pageState }
     const wrapperState: any = {}
-    shell.forEach(({ comp, key }: any, i: number) => {
-      const compState: any = { ...(comp.initialState || {}) }
-      if (i === shell.length - 1) {
-        compState.page = initialState
-      }
-      wrapperState[key] = compState
-    })
+    shell.forEach(({ comp, key }: any) => { wrapperState[key] = { ...(comp.initialState || {}) } })
+    wrapperState.page = initialState
     pageViewContent += `<script>window.__VIKE_SYGNAL_STATE__=${JSON.stringify(wrapperState)}</script>`
   }
 
@@ -210,8 +249,12 @@ export function onRenderHtml(pageContext: PageContext) {
   const favicon = config.favicon || ''
   const lang = config.lang || 'en'
 
-  const titleTag = title ? `<title>${esc(title)}</title>` : ''
-  const descTag = description
+  const heads = [...shellHeads, ...pageHeads].filter(Boolean)
+  // with `head` statics, config.title / description are the defaults they override
+  const titleTag = heads.length
+    ? renderHead([{ title: title || undefined, meta: { description: description || undefined } }, ...heads])
+    : title ? `<title>${esc(title)}</title>` : ''
+  const descTag = description && !heads.length
     ? `<meta name="description" content="${esc(description)}">`
     : ''
   const faviconTag = favicon

package/src/vike/types.ts

@@ -1,8 +1,11 @@
 /**
- * TypeScript declarations for vike-sygnal custom config settings.
+ * TypeScript declarations for 'sygnal/config' (also 'sygnal/vike' and
+ * 'sygnal/vike/config'): the Vike extension config (default export), and the
+ * custom config settings, which augment Vike's Config interface so users get
+ * autocomplete and type checking in their +config.ts files.
  *
- * These augment Vike's Config interface so users get autocomplete
- * and type checking in their +config.ts files.
+ *   import vikeSygnal from 'sygnal/config'
+ *   export default { extends: [vikeSygnal] }
  */
 
 declare global {
@@ -24,10 +27,30 @@ declare global {
       lang?: string
       /** Additional Cycle.js drivers to pass to run() (e.g. WebSocket, HTTP). Client-only. */
       drivers?: Record<string, (sink: any) => any>
+      /**
+       * App-level error hook (PLAN-4 GS-11), passed to run() on the client and to renderToString
+       * on the server: called after a component's onError boundary, reporting only. (Vike's own
+       * `onError` is a different, server-only hook)
+       */
+      sygnalOnError?: (error: any, info: { componentName?: string; action?: string; phase: 'view' | 'reducer' | 'effect' | 'intent' | 'context' | 'declaration' | 'driver' | 'instantiate' | 'dispose' | 'widget'; driver?: string }) => void
       /** Enable/disable SSR for this page (default: true). Set false for SPA mode. */
       ssr?: boolean
     }
   }
 }
 
-export {}
+/**
+ * The Sygnal extension for Vike: put it in `extends` of your root +config.
+ * (Declared here; the value is the package's dist/vike/config/+config.js entry.)
+ */
+declare const vikeSygnal: {
+  name: 'sygnal'
+  clientRouting: boolean
+  hydrationCanBeAborted: boolean
+  onRenderHtml: string
+  onRenderClient: string
+  passToClient: string[]
+  meta: Record<string, any>
+}
+
+export default vikeSygnal

package/src/vite/globalthis-shim.ts

@@ -0,0 +1,18 @@
+/**
+ * Stand-in for the `globalthis` npm package (built to dist/shims/globalthis.cjs).
+ *
+ * xstream does `require('globalthis').getPolyfill()`, which pulls a polyfill
+ * chain (define-properties, get-intrinsic, object-keys, has-symbols, ...) into
+ * every app bundle (~4 KB gzip). Every browser and Node version Sygnal supports
+ * has a native `globalThis`, so `sygnal/vite` aliases `globalthis` to this
+ * module (opt out with `sygnal({ nativeGlobalThis: false })`).
+ *
+ * Same shape as the package's main export (the es-shim API): a function that
+ * returns the global object, with `getPolyfill`, `implementation` and `shim`.
+ */
+const getGlobal: any = () => globalThis
+getGlobal.getPolyfill = getGlobal
+getGlobal.implementation = globalThis
+getGlobal.shim = getGlobal
+
+export default getGlobal