sygnal 5.2.0 → 5.2.1

package/dist/vike/+config.cjs.js

@@ -14,12 +14,16 @@ var _config = {
     hydrationCanBeAborted: true,
     onRenderHtml: 'import:sygnal/vike/onRenderHtml:onRenderHtml',
     onRenderClient: 'import:sygnal/vike/onRenderClient:onRenderClient',
-    passToClient: ['data', 'routeParams'],
+    passToClient: ['data', 'routeParams', 'urlPathname'],
     meta: {
         Layout: {
             env: { server: true, client: true },
             cumulative: true,
         },
+        Wrapper: {
+            env: { server: true, client: true },
+            cumulative: true,
+        },
         Head: {
             env: { server: true },
         },

package/dist/vike/+config.js

@@ -12,12 +12,16 @@ var _config = {
     hydrationCanBeAborted: true,
     onRenderHtml: 'import:sygnal/vike/onRenderHtml:onRenderHtml',
     onRenderClient: 'import:sygnal/vike/onRenderClient:onRenderClient',
-    passToClient: ['data', 'routeParams'],
+    passToClient: ['data', 'routeParams', 'urlPathname'],
     meta: {
         Layout: {
             env: { server: true, client: true },
             cumulative: true,
         },
+        Wrapper: {
+            env: { server: true, client: true },
+            cumulative: true,
+        },
         Head: {
             env: { server: true },
         },

package/dist/vike/ClientOnly.cjs.js

@@ -0,0 +1,34 @@
+'use strict';
+
+var h_js = require('snabbdom/build/h.js');
+require('snabbdom/build/init.js');
+require('snabbdom/build/tovnode.js');
+require('snabbdom/build/vnode.js');
+var jsx_js = require('snabbdom/build/jsx.js');
+require('snabbdom/build/modules/class.js');
+require('snabbdom/build/modules/props.js');
+require('snabbdom/build/modules/attributes.js');
+require('snabbdom/build/modules/dataset.js');
+
+/**
+ * Local snabbdom re-export barrel.
+ *
+ * Imports from specific snabbdom subpaths instead of the main barrel to avoid
+ * triggering the broken `styleModule` top-level `window` reference in
+ * snabbdom 3.6.3 (which causes ReferenceError in Node.js environments).
+ *
+ * The styleModule is provided separately by ./styleModule.ts with a fixed
+ * window guard.
+ */
+// Core
+// Tag Fragment so we can identify it even after minification mangles Function.name
+jsx_js.Fragment.__sygnalFragment = true;
+
+const ClientOnly = (props) => {
+    const { children, ...sanitizedProps } = props;
+    return h_js.h('clientonly', { props: sanitizedProps }, children);
+};
+ClientOnly.label = 'clientonly';
+ClientOnly.preventInstantiation = true;
+
+exports.ClientOnly = ClientOnly;

package/dist/vike/ClientOnly.mjs

@@ -0,0 +1,32 @@
+import { h } from 'snabbdom/build/h.js';
+import 'snabbdom/build/init.js';
+import 'snabbdom/build/tovnode.js';
+import 'snabbdom/build/vnode.js';
+import { Fragment } from 'snabbdom/build/jsx.js';
+import 'snabbdom/build/modules/class.js';
+import 'snabbdom/build/modules/props.js';
+import 'snabbdom/build/modules/attributes.js';
+import 'snabbdom/build/modules/dataset.js';
+
+/**
+ * Local snabbdom re-export barrel.
+ *
+ * Imports from specific snabbdom subpaths instead of the main barrel to avoid
+ * triggering the broken `styleModule` top-level `window` reference in
+ * snabbdom 3.6.3 (which causes ReferenceError in Node.js environments).
+ *
+ * The styleModule is provided separately by ./styleModule.ts with a fixed
+ * window guard.
+ */
+// Core
+// Tag Fragment so we can identify it even after minification mangles Function.name
+Fragment.__sygnalFragment = true;
+
+const ClientOnly = (props) => {
+    const { children, ...sanitizedProps } = props;
+    return h('clientonly', { props: sanitizedProps }, children);
+};
+ClientOnly.label = 'clientonly';
+ClientOnly.preventInstantiation = true;
+
+export { ClientOnly };

package/dist/vike/onRenderClient.cjs.js

@@ -8,53 +8,310 @@ var sygnal = require('sygnal');
  * On first page load (hydration): reads server-serialized state and
  * boots the Sygnal app via run().
  *
- * On client-side navigation: disposes the previous app and boots
- * a fresh one for the new page.
+ * On client-side navigation with a Layout/Wrapper: the Layout and Wrapper
+ * stay mounted and only the Page sub-component is hot-swapped. Layout and
+ * Wrapper state persists across navigations. Without either, the app is
+ * disposed and recreated.
  *
- * Layout is rendered outside #page-view by onRenderHtml, so it persists
- * across navigations without being destroyed by Sygnal's DOM driver.
+ * Nesting order: Wrapper > Layout > Page
+ * - Wrappers are outermost (context providers, state management)
+ * - Layouts are inside wrappers (visual structure, navigation chrome)
+ * - Page is innermost (route-specific content, swapped on navigation)
  */
 // Import from the package entry so rollup externalizes it
 // @ts-ignore — resolved at runtime via package exports
 /** Track the running Sygnal app for disposal on navigation */
 let currentApp = null;
+/**
+ * Mutable references read by the wrapper's view function.
+ * Updated on navigation to swap the Page without disposing the Layout.
+ */
+let currentPage = null;
+let currentPageName = '';
+let currentPageData = {};
+let currentRouteParams = {};
+let currentUrlPathname = '';
+let pageNavCounter = 0;
+/**
+ * Build a component vnode that matches what the JSX pragma produces.
+ */
+function componentVNode(comp, stateField, children, compInitialState) {
+    const name = comp.componentName || comp.name || 'FUNCTION_COMPONENT';
+    return {
+        sel: name,
+        data: {
+            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,
+                },
+            },
+        },
+        children,
+        text: undefined,
+        elm: undefined,
+        key: '__vike_' + stateField + '__',
+    };
+}
+/**
+ * Build a vnode for the current Page as a child of the Layout.
+ * Reads from mutable `currentPage` / `currentPageName` so the wrapper
+ * view picks up the new Page component on navigation without being recreated.
+ */
+function pageChildVNode(pageState) {
+    // Include pageNavCounter in sel so instantiateSubComponents detects a
+    // component swap even when both pages have the same function name (e.g. 'Page').
+    const sel = currentPageName + '__nav' + pageNavCounter;
+    return {
+        sel,
+        data: {
+            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,
+                },
+            },
+        },
+        children: [],
+        text: undefined,
+        elm: undefined,
+        key: '__vike_page__',
+    };
+}
+/**
+ * Create a synthetic wrapper component that nests Page inside Layout(s)
+ * inside Wrapper(s).
+ *
+ * Nesting order: Wrapper(s) > Layout(s) > Page
+ *
+ * The wrapper's view reads `currentPage` from the mutable closure, so
+ * on client-side navigation only the Page sub-component changes while
+ * the Layout and Wrapper stay mounted with their state preserved.
+ */
+function createLayoutWrapper(wrappers, layouts, Page) {
+    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, i) => ({ comp: w, key: 'wrapper_' + i })),
+        ...layouts.map((l, i) => ({ comp: l, key: 'layout_' + i })),
+    ];
+    function LayoutWrapperView({ state }) {
+        if (shell.length === 0) {
+            // No wrappers or layouts — render Page directly
+            return pageChildVNode(state.page);
+        }
+        const lastIdx = shell.length - 1;
+        const innermostState = state[shell[lastIdx].key] || {};
+        let inner = componentVNode(shell[lastIdx].comp, shell[lastIdx].key, [pageChildVNode(innermostState.page)], innermostState);
+        // 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]);
+        }
+        // Wrap in a plain div so the view returns a regular DOM vnode.
+        // Sub-component vnodes at the root position are not processed correctly
+        // by the rendering pipeline — they must be children of a DOM element.
+        return {
+            sel: 'div',
+            data: { attrs: { id: 'vike-shell' } },
+            children: [inner],
+            text: undefined,
+            elm: undefined,
+            key: '__vike_shell__',
+        };
+    }
+    LayoutWrapperView.componentName = 'VikeLayoutWrapper';
+    // 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 = {};
+    shell.forEach(({ comp, key }, i) => {
+        const sliceState = { ...(comp.initialState || {}) };
+        if (i === shell.length - 1) {
+            sliceState.page = Page.initialState || {};
+        }
+        wrapperInitialState[key] = sliceState;
+    });
+    LayoutWrapperView.initialState = wrapperInitialState;
+    // Context uses mutable references so navigation updates are picked up.
+    // Wrapper and Layout contexts are merged once; page-level context
+    // (pageData, routeParams, urlPathname) reads from mutable variables
+    // updated on each navigation.
+    const shellContext = {};
+    shell.forEach(({ comp }) => {
+        if (comp.context) {
+            Object.assign(shellContext, comp.context);
+        }
+    });
+    LayoutWrapperView.context = {
+        ...shellContext,
+        ...(Page.context || {}),
+        pageData: () => currentPageData,
+        routeParams: () => currentRouteParams,
+        urlPathname: () => currentUrlPathname,
+    };
+    return LayoutWrapperView;
+}
+/**
+ * Normalize a cumulative config value into an array of functions.
+ */
+function toComponentArray(val) {
+    if (!val)
+        return [];
+    return (Array.isArray(val) ? val : [val]).filter((c) => typeof c === 'function');
+}
 function onRenderClient(pageContext) {
     const { Page, config } = pageContext;
     const data = pageContext.data || {};
-    // Dispose previous app on client-side navigation
-    if (currentApp) {
-        currentApp.dispose();
-        currentApp = null;
-    }
-    // On first load with SSR, pick up server-serialized state.
-    // On client navigation (or SPA mode), merge data into initialState.
-    let initialState;
-    if (typeof window !== 'undefined' && window.__VIKE_SYGNAL_STATE__ !== undefined) {
-        initialState = window.__VIKE_SYGNAL_STATE__;
-        // Clear the global after reading to avoid stale state on soft navigation
-        delete window.__VIKE_SYGNAL_STATE__;
+    const wrappers = toComponentArray(config.Wrapper);
+    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((_, i) => 'wrapper_' + i),
+        ...layouts.map((_, i) => 'layout_' + i),
+    ];
+    const innermostKey = shell.length > 0 ? shell[shell.length - 1] : null;
+    // Update mutable context references (used by the wrapper's context functions)
+    currentPageData = data;
+    currentRouteParams = pageContext.routeParams || {};
+    currentUrlPathname = pageContext.urlPathname || '';
+    // --- Shell path: hot-swap Page, keep Layout/Wrapper alive ---
+    if (hasShell) {
+        if (currentApp) {
+            // Client-side navigation: swap the Page without disposing the shell.
+            currentPage = Page;
+            currentPageName = Page.componentName || Page.name || 'VikePageComponent';
+            pageNavCounter++;
+            const newPageState = { ...(Page.initialState || {}), ...data };
+            if (currentApp.sinks?.STATE?.shamefullySendNext) {
+                currentApp.sinks.STATE.shamefullySendNext((state) => {
+                    const shellState = state[innermostKey] || {};
+                    return {
+                        ...state,
+                        [innermostKey]: { ...shellState, page: newPageState },
+                    };
+                });
+            }
+        }
+        else {
+            // First load: read hydrated state or build from initialState
+            let initialState;
+            if (typeof window !== 'undefined' && window.__VIKE_SYGNAL_STATE__ !== undefined) {
+                initialState = window.__VIKE_SYGNAL_STATE__;
+                delete window.__VIKE_SYGNAL_STATE__;
+            }
+            else {
+                initialState = null;
+            }
+            if (initialState && innermostKey && initialState[innermostKey] !== undefined) {
+                // Hydrated combined state — distribute slices to each shell component
+                const allShellComps = [...wrappers, ...layouts];
+                shell.forEach((key, i) => {
+                    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];
+                        }
+                    }
+                });
+            }
+            else {
+                // SPA mode or client-side first navigation
+                Page.initialState = { ...(Page.initialState || {}), ...data };
+            }
+            // Inject page-level context into Page (for SSR renderToString compat)
+            Page.context = {
+                ...Page.context,
+                pageData: () => currentPageData,
+                routeParams: () => currentRouteParams,
+                urlPathname: () => currentUrlPathname,
+            };
+            const Component = createLayoutWrapper(wrappers, layouts, Page);
+            try {
+                currentApp = sygnal.run(Component, {}, { mountPoint: '#page-view' });
+            }
+            catch (err) {
+                console.error('[sygnal/vike] Client render error:', err);
+                const container = document.getElementById('page-view');
+                if (container) {
+                    container.innerHTML = `<div data-sygnal-error style="padding:2rem;color:#e74c3c;font-family:monospace">
+            <h2>Render Error</h2>
+            <pre>${String(err.message || err)}</pre>
+          </div>`;
+                }
+            }
+        }
+        // --- No shell path: dispose and recreate ---
     }
     else {
-        initialState = {
-            ...(Page.initialState || {}),
-            ...data,
+        if (currentApp) {
+            currentApp.dispose();
+            currentApp = null;
+        }
+        let initialState;
+        if (typeof window !== 'undefined' && window.__VIKE_SYGNAL_STATE__ !== undefined) {
+            initialState = window.__VIKE_SYGNAL_STATE__;
+            delete window.__VIKE_SYGNAL_STATE__;
+        }
+        else {
+            initialState = { ...(Page.initialState || {}), ...data };
+        }
+        Page.initialState = initialState;
+        Page.context = {
+            ...Page.context,
+            pageData: () => currentPageData,
+            routeParams: () => currentRouteParams,
+            urlPathname: () => currentUrlPathname,
         };
-    }
-    // Set the initial state on the component before running
-    Page.initialState = initialState;
-    // Boot the Sygnal app into #page-view
-    // Layout HTML lives outside #page-view, so it won't be destroyed
-    try {
-        currentApp = sygnal.run(Page, {}, { mountPoint: '#page-view' });
-    }
-    catch (err) {
-        console.error('[sygnal/vike] Client render error:', err);
-        const container = document.getElementById('page-view');
-        if (container) {
-            container.innerHTML = `<div data-sygnal-error style="padding:2rem;color:#e74c3c;font-family:monospace">
-        <h2>Render Error</h2>
-        <pre>${String(err.message || err)}</pre>
-      </div>`;
+        try {
+            currentApp = sygnal.run(Page, {}, { mountPoint: '#page-view' });
+        }
+        catch (err) {
+            console.error('[sygnal/vike] Client render error:', err);
+            const container = document.getElementById('page-view');
+            if (container) {
+                container.innerHTML = `<div data-sygnal-error style="padding:2rem;color:#e74c3c;font-family:monospace">
+          <h2>Render Error</h2>
+          <pre>${String(err.message || err)}</pre>
+        </div>`;
+            }
         }
     }
     // Update document title on client navigation