vike 0.4.179 → 0.4.180

package/dist/esm/client/client-routing-runtime/getPageContextFromHooks.js

@@ -27,30 +27,26 @@ function getPageContextFromHooks_serialized() {
     return pageContextSerialized;
 }
 async function getPageContextFromHooks_isHydration(pageContext) {
-    const pageContextFromHooks = {
+    objectAssign(pageContext, {
         isHydration: true,
         _hasPageContextFromClient: false,
         _hasPageContextFromServer: true
-    };
+    });
     for (const hookName of ['data', 'onBeforeRender']) {
-        const pageContextForHook = {};
-        objectAssign(pageContextForHook, pageContext);
-        objectAssign(pageContextForHook, pageContextFromHooks);
-        if (hookClientOnlyExists(hookName, pageContextForHook)) {
-            const pageContextFromHook = await executeHookClientSide(hookName, pageContextForHook);
-            Object.assign(pageContextFromHooks, pageContextFromHook);
+        if (hookClientOnlyExists(hookName, pageContext)) {
+            const pageContextFromHook = await executeHookClientSide(hookName, pageContext);
+            if (pageContextFromHook)
+                assert(!('urlOriginal' in pageContextFromHook));
+            Object.assign(pageContext, pageContextFromHook);
         }
     }
-    return pageContextFromHooks;
+    return pageContext;
 }
 async function getPageContextFromHooks_isNotHydration(pageContext, isErrorPage) {
-    const pageContextFromHooks = {
+    objectAssign(pageContext, {
         isHydration: false,
         _hasPageContextFromClient: false
-    };
-    const pageContextForCondition = {};
-    objectAssign(pageContextForCondition, pageContext);
-    objectAssign(pageContextForCondition, pageContextFromHooks);
+    });
     let hasPageContextFromServer = false;
     // If pageContextInit has some client data or if one of the hooks guard(), data() or onBeforeRender() is server-side
     // only, then we need to fetch pageContext from the server.
@@ -59,7 +55,7 @@ async function getPageContextFromHooks_isNotHydration(pageContext, isErrorPage)
     // For the error page, we cannot fetch pageContext from the server because the pageContext JSON request is based on the URL
     !isErrorPage &&
         // true if pageContextInit has some client data or at least one of the data() and onBeforeRender() hooks is server-side only:
-        (await hasPageContextServer(pageContextForCondition))) {
+        (await hasPageContextServer(pageContext))) {
         const res = await fetchPageContextFromServer(pageContext);
         if ('is404ServerSideRouted' in res)
             return { is404ServerSideRouted: true };
@@ -68,43 +64,42 @@ async function getPageContextFromHooks_isNotHydration(pageContext, isErrorPage)
         // Already handled
         assert(!(isServerSideError in pageContextFromServer));
         assert(!('serverSideError' in pageContextFromServer));
-        objectAssign(pageContextFromHooks, pageContextFromServer);
+        objectAssign(pageContext, pageContextFromServer);
     }
+    objectAssign(pageContext, { _hasPageContextFromServer: hasPageContextFromServer });
     // At this point, we need to call the client-side guard(), data() and onBeforeRender() hooks, if they exist on client
     // env. However if we have fetched pageContext from the server, some of them might have run already on the
     // server-side, so we run only the client-only ones in this case.
     // Note: for the error page, we also execute the client-side data() and onBeforeRender() hooks, but maybe we
     // shouldn't? The server-side does it as well (but maybe it shouldn't).
     for (const hookName of ['guard', 'data', 'onBeforeRender']) {
-        const pageContextForHook = {};
-        objectAssign(pageContextForHook, { _hasPageContextFromServer: hasPageContextFromServer });
-        objectAssign(pageContextForHook, pageContext);
-        objectAssign(pageContextForHook, pageContextFromHooks);
         if (hookName === 'guard') {
             if (!isErrorPage &&
                 // We don't need to call guard() on the client-side if we fetch pageContext from the server side. (Because the `${url}.pageContext.json` HTTP request will already trigger the routing and guard() hook on the server-side.)
                 !hasPageContextFromServer) {
                 // Should we really call the guard() hook on the client-side? Shouldn't we make the guard() hook a server-side
                 // only hook? Or maybe make its env configurable like data() and onBeforeRender()?
-                await executeGuardHook(pageContextForHook, (pageContext) => preparePageContextForUserConsumptionClientSide(pageContext, true));
+                await executeGuardHook(pageContext, (pageContext) => preparePageContextForUserConsumptionClientSide(pageContext, true));
             }
         }
         else {
             assert(hookName === 'data' || hookName === 'onBeforeRender');
-            if (hookClientOnlyExists(hookName, pageContextForHook) || !hasPageContextFromServer) {
+            if (hookClientOnlyExists(hookName, pageContext) || !hasPageContextFromServer) {
                 // This won't do anything if no hook has been defined or if the hook's env.client is false.
-                const pageContextFromHook = await executeHookClientSide(hookName, pageContextForHook);
-                objectAssign(pageContextFromHooks, pageContextFromHook);
+                const pageContextFromHook = await executeHookClientSide(hookName, pageContext);
+                if (pageContextFromHook)
+                    assert(!('urlOriginal' in pageContextFromHook));
+                Object.assign(pageContext, pageContextFromHook);
             }
             else {
                 assert(hasPageContextFromServer);
             }
         }
     }
-    objectAssign(pageContextFromHooks, {
+    objectAssign(pageContext, {
         _hasPageContextFromServer: hasPageContextFromServer
     });
-    return { pageContextFromHooks };
+    return { pageContextAugmented: pageContext };
 }
 async function executeHookClientSide(hookName, pageContext) {
     const hook = getHook(pageContext, hookName);
@@ -226,7 +221,7 @@ async function fetchPageContextFromServer(pageContext) {
     }
     // Is there a reason for having two different properties? Can't we use only one property? I guess/think the isServerSideError property was an attempt (a bad idea really) for rendering the error page even though an error occured on the server-side (which is a bad idea because the added complexity is non-negligible while the added value is minuscule since the error page usually doesn't have any (meaningful / server-side) hooks).
     if ('serverSideError' in pageContextFromServer || isServerSideError in pageContextFromServer) {
-        throw getProjectError(`pageContext couldn't be fetched from server: an error occurred on the server-side (see your server logs)`);
+        throw getProjectError(`pageContext couldn't be fetched because an error occurred on the server-side`);
     }
     assert(hasProp(pageContextFromServer, '_pageId', 'string'));
     processPageContextFromServer(pageContextFromServer);

package/dist/esm/client/client-routing-runtime/renderPageClientSide.js

@@ -1,7 +1,7 @@
 export { renderPageClientSide };
 export { getRenderCount };
 export { disableClientRouting };
-import { assert, getCurrentUrl, isSameErrorMessage, objectAssign, serverSideRouteTo, getGlobalObject, executeHook, hasProp } from './utils.js';
+import { assert, getCurrentUrl, isSameErrorMessage, objectAssign, serverSideRouteTo, getGlobalObject, executeHook, hasProp, augmentType } from './utils.js';
 import { getPageContextFromHooks_isHydration, getPageContextFromHooks_isNotHydration, getPageContextFromHooks_serialized } from './getPageContextFromHooks.js';
 import { createPageContext } from './createPageContext.js';
 import { addLinkPrefetchHandlers } from './prefetch.js';
@@ -132,9 +132,9 @@ async function renderPageClientSide(renderArgs) {
         // Get pageContext from hooks (fetched from server, and/or directly called on the client-side)
         if (isHydrationRender) {
             assert(hasProp(pageContext, '_hasPageContextFromServer', 'true'));
-            let pageContextFromHooks;
+            let pageContextAugmented;
             try {
-                pageContextFromHooks = await getPageContextFromHooks_isHydration(pageContext);
+                pageContextAugmented = await getPageContextFromHooks_isHydration(pageContext);
             }
             catch (err) {
                 await onError(err);
@@ -142,8 +142,7 @@ async function renderPageClientSide(renderArgs) {
             }
             if (isRenderOutdated())
                 return;
-            assert(!('urlOriginal' in pageContextFromHooks));
-            objectAssign(pageContext, pageContextFromHooks);
+            augmentType(pageContext, pageContextAugmented);
             // Render page view
             await renderPageView(pageContext);
         }
@@ -160,9 +159,7 @@ async function renderPageClientSide(renderArgs) {
                 return;
             if ('is404ServerSideRouted' in res)
                 return;
-            const pageContextFromHooks = res.pageContextFromHooks;
-            assert(!('urlOriginal' in pageContextFromHooks));
-            objectAssign(pageContext, pageContextFromHooks);
+            augmentType(pageContext, res.pageContextAugmented);
             // Render page view
             await renderPageView(pageContext);
         }
@@ -295,10 +292,7 @@ async function renderPageClientSide(renderArgs) {
             return;
         if ('is404ServerSideRouted' in res)
             return;
-        const pageContextFromHooks = res.pageContextFromHooks;
-        assert(pageContextFromHooks);
-        assert(!('urlOriginal' in pageContextFromHooks));
-        objectAssign(pageContext, pageContextFromHooks);
+        augmentType(pageContext, res.pageContextAugmented);
         await renderPageView(pageContext, args);
     }
     async function renderPageView(pageContext, isErrorPage) {

package/dist/esm/client/client-routing-runtime/utils.d.ts

@@ -22,3 +22,4 @@ export * from '../../utils/throttle.js';
 export * from '../../utils/assertRoutingType.js';
 export * from '../../utils/onPageVisibilityChange.js';
 export * from '../../utils/isExternalLink.js';
+export * from '../../utils/augmentType.js';

package/dist/esm/client/client-routing-runtime/utils.js

@@ -28,3 +28,4 @@ export * from '../../utils/throttle.js';
 export * from '../../utils/assertRoutingType.js';
 export * from '../../utils/onPageVisibilityChange.js';
 export * from '../../utils/isExternalLink.js';
+export * from '../../utils/augmentType.js';

package/dist/esm/client/shared/getPageContextProxyForUser.js

@@ -14,7 +14,7 @@ function getPageContextProxyForUser(pageContext) {
         get(_, prop) {
             const val = pageContext[prop];
             const propName = getPropAccessNotation(prop);
-            assertUsage(val !== notSerializable, `pageContext${propName} couldn't be serialized and, therefore, is missing on the client-side. Check the server logs for more information.`);
+            assertUsage(val !== notSerializable, `Can't access pageContext${propName} on the client side. Because it can't be serialized, see server logs.`);
             passToClientHint(pageContext, prop, propName);
             return val;
         }

package/dist/esm/node/plugin/plugins/importUserCode/v1-design/getVikeConfig/configDefinitionsBuiltIn.js

@@ -104,6 +104,9 @@ const configDefinitionsBuiltIn = {
     cacheControl: {
         env: { server: true }
     },
+    injectScriptsAt: {
+        env: { server: true }
+    },
     name: {
         env: { config: true }
     },

package/dist/esm/node/runtime/html/injectAssets/getHtmlTags.d.ts

@@ -22,10 +22,11 @@ type InjectFilterEntry = {
     isEntry: boolean;
     inject: PreloadFilterInject;
 };
+type Position = 'HTML_BEGIN' | 'HTML_END' | 'STREAM';
 type HtmlTag = {
     htmlTag: string | (() => string);
-    position: 'HTML_BEGIN' | 'HTML_END' | 'STREAM';
+    position: Position;
 };
 declare function getHtmlTags(pageContext: {
     _isStream: boolean;
-} & PageContextInjectAssets, streamFromReactStreamingPackage: null | StreamFromReactStreamingPackage, injectFilter: PreloadFilter, pageAssets: PageAsset[], viteDevScript: string): HtmlTag[];
+} & PageContextInjectAssets, streamFromReactStreamingPackage: null | StreamFromReactStreamingPackage, injectFilter: PreloadFilter, pageAssets: PageAsset[], viteDevScript: string, isStream: boolean): HtmlTag[];

package/dist/esm/node/runtime/html/injectAssets/getHtmlTags.js

@@ -4,13 +4,17 @@ import { serializePageContextClientSide } from '../serializePageContextClientSid
 import { sanitizeJson } from './sanitizeJson.js';
 import { inferAssetTag, inferPreloadTag } from './inferHtmlTags.js';
 import { mergeScriptTags } from './mergeScriptTags.js';
+import { getPageConfig } from '../../../../shared/page-configs/helpers.js';
+import { getConfigValueRuntime } from '../../../../shared/page-configs/getConfigValue.js';
 import { getGlobalContext } from '../../globalContext.js';
 import pc from '@brillout/picocolors';
+import { getConfigDefinedAt } from '../../../../shared/page-configs/getConfigDefinedAt.js';
 const stamp = '__injectFilterEntry';
-function getHtmlTags(pageContext, streamFromReactStreamingPackage, injectFilter, pageAssets, viteDevScript) {
+function getHtmlTags(pageContext, streamFromReactStreamingPackage, injectFilter, pageAssets, viteDevScript, isStream) {
     assert([true, false].includes(pageContext._isHtmlOnly));
     const isHtmlOnly = pageContext._isHtmlOnly;
     const { isProduction } = getGlobalContext();
+    const injectScriptsAt = getInjectScriptsAt(pageContext._pageId, pageContext._pageConfigs);
     const injectFilterEntries = pageAssets
         .filter((asset) => {
         if (asset.isEntry && asset.assetType === 'script') {
@@ -73,28 +77,39 @@ function getHtmlTags(pageContext, streamFromReactStreamingPackage, injectFilter,
     // ==========
     // JavaScript
     // ==========
-    // In order to avoid the race-condition depicted in https://github.com/vikejs/vike/issues/567
-    // 1. <script id="vike_pageContext" type="application/json"> must appear before the entry <script> (which loads Vike's client runtime).
-    // 2. <script id="vike_pageContext" type="application/json"> can't be async nor defer.
-    // Additionally:
-    // 3. the entry <script> can't be defer, otherwise progressive hydration while SSR streaming won't work.
-    // 4. the entry <script> should be towards the end of the HTML as performance-wise it's more interesting to parse
-    //    <div id="page-view"> before running the entry <script> which initiates the hydration.
-    // See https://github.com/vikejs/vike/pull/1271
+    // - The pageContext JSON should be fully sent before Vike's client runtime starts executing.
+    //   - Otherwise, race condition "SyntaxError: Unterminated string in JSON": https://github.com/vikejs/vike/issues/567
+    //   - <script id="vike_pageContext" type="application/json"> must appear before the entry <script> (which loads Vike's client runtime).
+    //   - <script id="vike_pageContext" type="application/json"> can't be async nor defer.
+    // - The entry <script> can't be defer, otherwise progressive hydration while SSR streaming won't work.
+    // - The entry <script> should be towards the end of the HTML as performance-wise it's more interesting to parse <div id="page-view"> before running the entry <script> which initiates the hydration.
+    //   - But with HTML streaming, in order to support [Progressive Rendering](https://vike.dev/streaming#progressive-rendering), the entry <script> should be injected early instead.
     const positionJavaScriptEntry = (() => {
+        if (injectScriptsAt !== null) {
+            if (pageContext._pageContextPromise) {
+                assertWarning(injectScriptsAt === 'HTML_END' || !isStream, `You're setting injectScriptsAt to ${pc.code(JSON.stringify(injectScriptsAt))} while using HTML streaming with a pageContext promise (https://vike.dev/streaming#initial-data-after-stream-end) which is contradictory: the pageContext promise is skipped.`, { onlyOnce: true });
+            }
+            return injectScriptsAt;
+        }
         if (pageContext._pageContextPromise) {
-            assertWarning(!streamFromReactStreamingPackage, "[getHtmlTags()] We recommend against using streaming and a pageContext promise at the same time, because progressive hydration won't work.", { onlyOnce: true });
-            // If there is a pageContext._pageContextPromise (which is resolved after the stream has ended) then the pageContext JSON data needs to await for it: https://vike.dev/streaming#initial-data-after-stream-end
+            // - If there is a pageContext._pageContextPromise then <script id="vike_pageContext" type="application/json"> needs to await for it.
+            // - pageContext._pageContextPromise is typically resolved only after the page's components are rendered and the stream ended.
+            // - https://vike.dev/streaming#initial-data-after-stream-end
             return 'HTML_END';
         }
         if (streamFromReactStreamingPackage && !streamFromReactStreamingPackage.hasStreamEnded()) {
-            // If there is a stream then, in order to support progressive hydration, inject the JavaScript during the stream after React(/Vue/Solid/...) resolved the first suspense boundary
+            // If there is a stream then, in order to support progressive hydration, inject the JavaScript during the stream after React(/Vue/Solid/...) resolved the first suspense boundary.
             return 'STREAM';
         }
-        else {
-            return 'HTML_END';
-        }
+        return 'HTML_END';
     })();
+    if (pageContext._pageContextPromise && streamFromReactStreamingPackage) {
+        // - Should we show this warning for Solid as well? Solid seems to also support progressive rendering.
+        //   - https://github.com/vikejs/vike-solid/issues/95
+        // - Vue doesn't seem to support progressive rendering yet.
+        //   - https://github.com/vikejs/vike-vue/issues/85
+        assertWarning(false, "We recommend against using HTML streaming and a pageContext promise (https://vike.dev/streaming#initial-data-after-stream-end) at the same time, because progressive hydration (https://vike.dev/streaming#progressive-rendering) won't work.", { onlyOnce: true });
+    }
     // <script id="vike_pageContext" type="application/json">
     if (!isHtmlOnly) {
         htmlTags.push({
@@ -189,3 +204,19 @@ function checkForWarnings(injectFilterEntries) {
         }
     });
 }
+function getInjectScriptsAt(pageId, pageConfigs) {
+    if (pageConfigs.length === 0)
+        return null; // only support V1 design
+    const pageConfig = getPageConfig(pageId, pageConfigs);
+    const configValue = getConfigValueRuntime(pageConfig, 'injectScriptsAt');
+    if (!configValue)
+        return null;
+    const injectScriptsAt = configValue.value;
+    assert(configValue.definedAtData);
+    const configDefinedAt = getConfigDefinedAt('Config', 'injectScriptsAt', configValue.definedAtData);
+    assertUsage(injectScriptsAt === null ||
+        injectScriptsAt === 'HTML_BEGIN' ||
+        injectScriptsAt === 'HTML_END' ||
+        injectScriptsAt === 'STREAM', `${configDefinedAt} has an invalid value`);
+    return injectScriptsAt;
+}

package/dist/esm/node/runtime/html/injectAssets/injectHtmlTags.d.ts

@@ -1,13 +1,15 @@
 export { injectHtmlTags };
 export { injectHtmlTagsUsingStream };
 export { createHtmlHeadIfMissing };
+export { joinHtmlTags };
 export { injectAtOpeningTag };
 export { injectAtClosingTag };
 import type { StreamFromReactStreamingPackage } from '../stream/react-streaming.js';
 import type { HtmlTag } from './getHtmlTags.js';
 type Position = 'HTML_BEGIN' | 'HTML_END';
 declare function injectHtmlTags(htmlString: string, htmlTags: HtmlTag[], position: Position): string;
-declare function injectHtmlTagsUsingStream(htmlTags: HtmlTag[], streamFromReactStreamingPackage: null | StreamFromReactStreamingPackage): void;
+declare function injectHtmlTagsUsingStream(htmlTags: HtmlTag[], streamFromReactStreamingPackage: StreamFromReactStreamingPackage): void;
+declare function joinHtmlTags(htmlTags: HtmlTag[]): string;
 declare function injectAtOpeningTag(tag: 'head' | 'html' | '!doctype', htmlString: string, htmlFragment: string): string;
 declare function injectAtClosingTag(tag: 'body' | 'html', htmlString: string, htmlFragment: string): string;
 declare function createHtmlHeadIfMissing(htmlString: string): string;

package/dist/esm/node/runtime/html/injectAssets/injectHtmlTags.js

@@ -2,6 +2,7 @@
 export { injectHtmlTags };
 export { injectHtmlTagsUsingStream };
 export { createHtmlHeadIfMissing };
+export { joinHtmlTags };
 // Only needed for unit tests
 export { injectAtOpeningTag };
 export { injectAtClosingTag };
@@ -13,10 +14,10 @@ function injectHtmlTags(htmlString, htmlTags, position) {
     }
     return htmlString;
 }
+// Is it worth it? Should we remove this? https://github.com/vikejs/vike/pull/1740#issuecomment-2230540892
 function injectHtmlTagsUsingStream(htmlTags, streamFromReactStreamingPackage) {
     const htmlFragment = joinHtmlTags(htmlTags.filter((h) => h.position === 'STREAM'));
     if (htmlFragment) {
-        assert(streamFromReactStreamingPackage);
         assert(!streamFromReactStreamingPackage.hasStreamEnded());
         streamFromReactStreamingPackage.injectToStream(htmlFragment, { flush: true });
     }

package/dist/esm/node/runtime/html/injectAssets.d.ts

@@ -29,6 +29,7 @@ declare function injectHtmlTagsToStream(pageContext: PageContextInjectAssets & {
     _isStream: true;
 }, streamFromReactStreamingPackage: null | StreamFromReactStreamingPackage, injectFilter: PreloadFilter): {
     injectAtStreamBegin: (htmlPartsBegin: HtmlPart[]) => Promise<string>;
+    injectAtStreamAfterFirstChunk: () => null | string;
     injectAtStreamEnd: (htmlPartsEnd: HtmlPart[]) => Promise<string>;
 };
 type PageContextPromise = null | Promise<unknown> | (() => void | Promise<unknown>);

package/dist/esm/node/runtime/html/injectAssets.js

@@ -2,13 +2,13 @@ export { injectHtmlTagsToString };
 export { injectHtmlTagsToStream };
 import { assert, isCallable, isPromise } from '../utils.js';
 import { assertPageContextProvidedByUser } from '../../../shared/assertPageContextProvidedByUser.js';
-import { injectHtmlTags, createHtmlHeadIfMissing, injectHtmlTagsUsingStream } from './injectAssets/injectHtmlTags.js';
+import { joinHtmlTags, injectHtmlTags, createHtmlHeadIfMissing, injectHtmlTagsUsingStream } from './injectAssets/injectHtmlTags.js';
 import { getHtmlTags } from './injectAssets/getHtmlTags.js';
 import { getViteDevScript } from './injectAssets/getViteDevScript.js';
 async function injectHtmlTagsToString(htmlParts, pageContext, injectFilter) {
     const pageAssets = await pageContext.__getPageAssets();
     const viteDevScript = await getViteDevScript();
-    const htmlTags = getHtmlTags(pageContext, null, injectFilter, pageAssets, viteDevScript);
+    const htmlTags = getHtmlTags(pageContext, null, injectFilter, pageAssets, viteDevScript, false);
     let htmlString = htmlPartsToString(htmlParts, pageAssets);
     htmlString = injectToHtmlBegin(htmlString, htmlTags);
     htmlString = injectToHtmlEnd(htmlString, htmlTags);
@@ -19,17 +19,32 @@ function injectHtmlTagsToStream(pageContext, streamFromReactStreamingPackage, in
     let htmlTags;
     return {
         injectAtStreamBegin,
+        injectAtStreamAfterFirstChunk,
         injectAtStreamEnd
     };
     async function injectAtStreamBegin(htmlPartsBegin) {
         const pageAssets = await pageContext.__getPageAssets();
         const viteDevScript = await getViteDevScript();
-        htmlTags = getHtmlTags(pageContext, streamFromReactStreamingPackage, injectFilter, pageAssets, viteDevScript);
+        htmlTags = getHtmlTags(pageContext, streamFromReactStreamingPackage, injectFilter, pageAssets, viteDevScript, true);
         let htmlBegin = htmlPartsToString(htmlPartsBegin, pageAssets);
         htmlBegin = injectToHtmlBegin(htmlBegin, htmlTags);
-        injectHtmlTagsUsingStream(htmlTags, streamFromReactStreamingPackage);
+        if (streamFromReactStreamingPackage) {
+            injectHtmlTagsUsingStream(htmlTags, streamFromReactStreamingPackage);
+        }
         return htmlBegin;
     }
+    // Is it worth it? Should we remove this? https://github.com/vikejs/vike/pull/1740#issuecomment-2230540892
+    function injectAtStreamAfterFirstChunk() {
+        // React has its own stream injection mechanism, see injectHtmlTagsUsingStream()
+        if (streamFromReactStreamingPackage)
+            return null;
+        assert(htmlTags);
+        const tags = htmlTags.filter((h) => h.position === 'STREAM');
+        if (tags.length === 0)
+            return null;
+        const htmlFragment = joinHtmlTags(tags);
+        return htmlFragment;
+    }
     async function injectAtStreamEnd(htmlPartsEnd) {
         assert(htmlTags);
         await resolvePageContextPromise(pageContext);

package/dist/esm/node/runtime/html/renderHtml.js

@@ -52,7 +52,7 @@ async function renderDocumentHtml(documentHtml, pageContext, onErrorWhileStreami
     assert(false);
 }
 async function renderHtmlStream(streamOriginal, injectString, pageContext, onErrorWhileStreaming, injectFilter) {
-    const opts = {
+    const processStreamOptions = {
         onErrorWhileStreaming,
         enableEagerStreaming: pageContext.enableEagerStreaming
     };
@@ -61,17 +61,18 @@ async function renderHtmlStream(streamOriginal, injectString, pageContext, onErr
         if (isStreamFromReactStreamingPackage(streamOriginal) && !streamOriginal.disabled) {
             streamFromReactStreamingPackage = streamOriginal;
         }
-        const { injectAtStreamBegin, injectAtStreamEnd } = injectHtmlTagsToStream(pageContext, streamFromReactStreamingPackage, injectFilter);
-        objectAssign(opts, {
-            injectStringAtBegin: async () => {
-                return await injectAtStreamBegin(injectString.htmlPartsBegin);
-            },
-            injectStringAtEnd: async () => {
-                return await injectAtStreamEnd(injectString.htmlPartsEnd);
-            }
-        });
+        const { injectAtStreamBegin, injectAtStreamAfterFirstChunk, injectAtStreamEnd } = injectHtmlTagsToStream(pageContext, streamFromReactStreamingPackage, injectFilter);
+        processStreamOptions.injectStringAtBegin = async () => {
+            return await injectAtStreamBegin(injectString.htmlPartsBegin);
+        };
+        processStreamOptions.injectStringAtEnd = async () => {
+            return await injectAtStreamEnd(injectString.htmlPartsEnd);
+        };
+        processStreamOptions.injectStringAfterFirstChunk = () => {
+            return injectAtStreamAfterFirstChunk();
+        };
     }
-    const streamWrapper = await processStream(streamOriginal, opts);
+    const streamWrapper = await processStream(streamOriginal, processStreamOptions);
     return streamWrapper;
 }
 function isTemplateWrapped(something) {

package/dist/esm/node/runtime/html/serializePageContextClientSide.js

@@ -1,7 +1,7 @@
 export { serializePageContextClientSide };
 export { serializePageContextAbort };
 import { stringify, isJsonSerializerError } from '@brillout/json-serializer/stringify';
-import { assert, assertWarning, hasProp, unique } from '../utils.js';
+import { assert, assertUsage, assertWarning, getPropAccessNotation, hasProp, unique } from '../utils.js';
 import { isErrorPage } from '../../../shared/error-page.js';
 import { addIs404ToPageProps } from '../../../shared/addIs404ToPageProps.js';
 import pc from '@brillout/picocolors';
@@ -42,17 +42,27 @@ function serializePageContextClientSide(pageContext) {
         let hasWarned = false;
         const propsNonSerializable = [];
         passToClient.forEach((prop) => {
-            const propName = JSON.stringify(prop);
-            const varName = h(`pageContext[${propName}]`);
+            const propName1 = getPropAccessNotation(prop);
+            const propName2 = JSON.stringify(prop);
+            const varName = `pageContext${propName1}`;
             try {
                 serialize(pageContext[prop], varName);
             }
             catch (err) {
                 hasWarned = true;
                 propsNonSerializable.push(prop);
+                // useConfig() wrong usage
+                if (prop === '_configFromHook') {
+                    let pathString = '';
+                    if (isJsonSerializerError(err)) {
+                        pathString = err.pathString;
+                    }
+                    assertUsage(false, `Cannot serialize config ${h(pathString)} set by useConfig(), see https://vike.dev/useConfig#serialization-error`);
+                }
+                // Non-serializable pageContext set by the user
                 let msg = [
-                    `${varName} cannot be serialized and, therefore, cannot be passed to the client.`,
-                    `Make sure that ${varName} is serializable, or remove ${h(propName)} from ${h('passToClient')}.`
+                    `${h(varName)} can't be serialized and, therefore, can't be passed to the client side.`,
+                    `Make sure ${h(varName)} is serializable, or remove ${h(propName2)} from ${h('passToClient')}.`
                 ].join(' ');
                 if (isJsonSerializerError(err)) {
                     msg = `${msg} Serialization error: ${err.messageCore}.`;

package/dist/esm/node/runtime/html/stream.d.ts

@@ -51,8 +51,9 @@ declare function getStreamReadableNode(htmlRender: HtmlRender): Promise<null | S
 declare function getStreamReadableWeb(htmlRender: HtmlRender): null | StreamReadableWeb;
 declare function pipeToStreamWritableWeb(htmlRender: HtmlRender, writable: StreamWritableWeb): boolean;
 declare function pipeToStreamWritableNode(htmlRender: HtmlRender, writable: StreamWritableNode): boolean;
-declare function processStream(streamOriginal: StreamProviderAny, { injectStringAtBegin, injectStringAtEnd, onErrorWhileStreaming, enableEagerStreaming }: {
+declare function processStream(streamOriginal: StreamProviderAny, { injectStringAtBegin, injectStringAfterFirstChunk, injectStringAtEnd, onErrorWhileStreaming, enableEagerStreaming }: {
     injectStringAtBegin?: () => Promise<string>;
+    injectStringAfterFirstChunk?: () => string | null;
     injectStringAtEnd?: () => Promise<string>;
     onErrorWhileStreaming: (err: unknown) => void;
     enableEagerStreaming?: boolean;

package/dist/esm/node/runtime/html/stream.js

@@ -203,7 +203,7 @@ function pipeToStreamWritableNode(htmlRender, writable) {
     checkType(htmlRender);
     assert(false);
 }
-async function processStream(streamOriginal, { injectStringAtBegin, injectStringAtEnd, onErrorWhileStreaming, enableEagerStreaming }) {
+async function processStream(streamOriginal, { injectStringAtBegin, injectStringAfterFirstChunk, injectStringAtEnd, onErrorWhileStreaming, enableEagerStreaming }) {
     const buffer = [];
     let streamOriginalHasStartedEmitting = false;
     let streamOriginalEnded = false;
@@ -215,6 +215,7 @@ async function processStream(streamOriginal, { injectStringAtBegin, injectString
     let resolve;
     let reject;
     let promiseHasResolved = false;
+    let injectStringAfterFirstChunk_done = false;
     const streamWrapperPromise = new Promise((resolve_, reject_) => {
         resolve = (streamWrapper) => {
             promiseHasResolved = true;
@@ -228,8 +229,8 @@ async function processStream(streamOriginal, { injectStringAtBegin, injectString
     let resolveReadyToWrite;
     const promiseReadyToWrite = new Promise((r) => (resolveReadyToWrite = r));
     if (injectStringAtBegin) {
-        const injectionBegin = await injectStringAtBegin();
-        writeStream(injectionBegin); // Adds injectionBegin to buffer
+        const injectedChunk = await injectStringAtBegin();
+        writeStream(injectedChunk); // Adds injectedChunk to buffer
         flushStream(); // Sets shouldFlushStream to true
     }
     // We call onStreamEvent() also when the stream ends in order to properly handle the situation when the stream didn't emit any data
@@ -259,6 +260,12 @@ async function processStream(streamOriginal, { injectStringAtBegin, injectString
         onData(chunk) {
             onStreamDataOrEnd(() => {
                 writeStream(chunk);
+                if (injectStringAfterFirstChunk && !injectStringAfterFirstChunk_done) {
+                    const injectedChunk = injectStringAfterFirstChunk();
+                    if (injectedChunk !== null)
+                        writeStream(injectedChunk);
+                    injectStringAfterFirstChunk_done = true;
+                }
             });
         },
         async onEnd(
@@ -273,8 +280,8 @@ async function processStream(streamOriginal, { injectStringAtBegin, injectString
                     streamOriginalEnded = true;
                 });
                 if (injectStringAtEnd) {
-                    const injectEnd = await injectStringAtEnd();
-                    writeStream(injectEnd);
+                    const injectedChunk = await injectStringAtEnd();
+                    writeStream(injectedChunk);
                 }
                 await promiseReadyToWrite; // E.g. if the user calls the pipe wrapper after the original writable has ended
                 assert(isReady());

package/dist/esm/node/runtime/renderPage/executeOnRenderHtmlHook.js

@@ -23,7 +23,7 @@ async function executeOnRenderHtmlHook(pageContext) {
     const onErrorWhileStreaming = (err) => {
         // Should the stream inject the following?
         // ```
-        // <script>console.error("An error occurred on the server while streaming the app to HTML. Check the server logs for more information.")</script>
+        // <script>console.error("An error occurred on the server side while streaming the page to HTML, see server logs.")</script>
         // ```
         logRuntimeError(err, pageContext._httpRequestId);
         if (!pageContext.errorWhileRendering) {