vike 0.4.179-commit-9384166 → 0.4.179-commit-9822036

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

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

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

@@ -9,13 +9,17 @@ const serializePageContextClientSide_js_1 = require("../serializePageContextClie
 const sanitizeJson_js_1 = require("./sanitizeJson.js");
 const inferHtmlTags_js_1 = require("./inferHtmlTags.js");
 const mergeScriptTags_js_1 = require("./mergeScriptTags.js");
+const helpers_js_1 = require("../../../../shared/page-configs/helpers.js");
+const getConfigValue_js_1 = require("../../../../shared/page-configs/getConfigValue.js");
 const globalContext_js_1 = require("../../globalContext.js");
 const picocolors_1 = __importDefault(require("@brillout/picocolors"));
+const getConfigDefinedAt_js_1 = require("../../../../shared/page-configs/getConfigDefinedAt.js");
 const stamp = '__injectFilterEntry';
-function getHtmlTags(pageContext, streamFromReactStreamingPackage, injectFilter, pageAssets, viteDevScript) {
+function getHtmlTags(pageContext, streamFromReactStreamingPackage, injectFilter, pageAssets, viteDevScript, isStream) {
     (0, utils_js_1.assert)([true, false].includes(pageContext._isHtmlOnly));
     const isHtmlOnly = pageContext._isHtmlOnly;
     const { isProduction } = (0, globalContext_js_1.getGlobalContext)();
+    const injectScriptsAt = getInjectScriptsAt(pageContext._pageId, pageContext._pageConfigs);
     const injectFilterEntries = pageAssets
         .filter((asset) => {
         if (asset.isEntry && asset.assetType === 'script') {
@@ -78,28 +82,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) {
+                (0, utils_js_1.assertWarning)(injectScriptsAt === 'HTML_END' || !isStream, `You're setting injectScriptsAt to ${picocolors_1.default.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) {
-            (0, utils_js_1.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
+        (0, utils_js_1.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({
@@ -195,3 +210,19 @@ function checkForWarnings(injectFilterEntries) {
         }
     });
 }
+function getInjectScriptsAt(pageId, pageConfigs) {
+    if (pageConfigs.length === 0)
+        return null; // only support V1 design
+    const pageConfig = (0, helpers_js_1.getPageConfig)(pageId, pageConfigs);
+    const configValue = (0, getConfigValue_js_1.getConfigValueRuntime)(pageConfig, 'injectScriptsAt');
+    if (!configValue)
+        return null;
+    const injectScriptsAt = configValue.value;
+    (0, utils_js_1.assert)(configValue.definedAtData);
+    const configDefinedAt = (0, getConfigDefinedAt_js_1.getConfigDefinedAt)('Config', 'injectScriptsAt', configValue.definedAtData);
+    (0, utils_js_1.assertUsage)(injectScriptsAt === null ||
+        injectScriptsAt === 'HTML_BEGIN' ||
+        injectScriptsAt === 'HTML_END' ||
+        injectScriptsAt === 'STREAM', `${configDefinedAt} has an invalid value`);
+    return injectScriptsAt;
+}

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

@@ -1,7 +1,7 @@
 "use strict";
 // Unit tests at ./injectHtmlTags.spec.ts
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.injectAtClosingTag = exports.injectAtOpeningTag = exports.createHtmlHeadIfMissing = exports.injectHtmlTagsUsingStream = exports.injectHtmlTags = void 0;
+exports.injectAtClosingTag = exports.injectAtOpeningTag = exports.joinHtmlTags = exports.createHtmlHeadIfMissing = exports.injectHtmlTagsUsingStream = exports.injectHtmlTags = void 0;
 const utils_js_1 = require("../../utils.js");
 function injectHtmlTags(htmlString, htmlTags, position) {
     const htmlFragment = joinHtmlTags(htmlTags.filter((h) => h.position === position));
@@ -14,7 +14,6 @@ exports.injectHtmlTags = injectHtmlTags;
 function injectHtmlTagsUsingStream(htmlTags, streamFromReactStreamingPackage) {
     const htmlFragment = joinHtmlTags(htmlTags.filter((h) => h.position === 'STREAM'));
     if (htmlFragment) {
-        (0, utils_js_1.assert)(streamFromReactStreamingPackage);
         (0, utils_js_1.assert)(!streamFromReactStreamingPackage.hasStreamEnded());
         streamFromReactStreamingPackage.injectToStream(htmlFragment, { flush: true });
     }
@@ -24,6 +23,7 @@ function joinHtmlTags(htmlTags) {
     const htmlFragment = htmlTags.map((h) => resolveHtmlTag(h.htmlTag)).join('');
     return htmlFragment;
 }
+exports.joinHtmlTags = joinHtmlTags;
 function injectHtmlFragment(position, htmlFragment, htmlString) {
     if (position === 'HTML_BEGIN') {
         {

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

@@ -9,7 +9,7 @@ const getViteDevScript_js_1 = require("./injectAssets/getViteDevScript.js");
 async function injectHtmlTagsToString(htmlParts, pageContext, injectFilter) {
     const pageAssets = await pageContext.__getPageAssets();
     const viteDevScript = await (0, getViteDevScript_js_1.getViteDevScript)();
-    const htmlTags = (0, getHtmlTags_js_1.getHtmlTags)(pageContext, null, injectFilter, pageAssets, viteDevScript);
+    const htmlTags = (0, getHtmlTags_js_1.getHtmlTags)(pageContext, null, injectFilter, pageAssets, viteDevScript, false);
     let htmlString = htmlPartsToString(htmlParts, pageAssets);
     htmlString = injectToHtmlBegin(htmlString, htmlTags);
     htmlString = injectToHtmlEnd(htmlString, htmlTags);
@@ -21,17 +21,31 @@ function injectHtmlTagsToStream(pageContext, streamFromReactStreamingPackage, in
     let htmlTags;
     return {
         injectAtStreamBegin,
+        injectAtStreamAfterFirstChunk,
         injectAtStreamEnd
     };
     async function injectAtStreamBegin(htmlPartsBegin) {
         const pageAssets = await pageContext.__getPageAssets();
         const viteDevScript = await (0, getViteDevScript_js_1.getViteDevScript)();
-        htmlTags = (0, getHtmlTags_js_1.getHtmlTags)(pageContext, streamFromReactStreamingPackage, injectFilter, pageAssets, viteDevScript);
+        htmlTags = (0, getHtmlTags_js_1.getHtmlTags)(pageContext, streamFromReactStreamingPackage, injectFilter, pageAssets, viteDevScript, true);
         let htmlBegin = htmlPartsToString(htmlPartsBegin, pageAssets);
         htmlBegin = injectToHtmlBegin(htmlBegin, htmlTags);
-        (0, injectHtmlTags_js_1.injectHtmlTagsUsingStream)(htmlTags, streamFromReactStreamingPackage);
+        if (streamFromReactStreamingPackage) {
+            (0, injectHtmlTags_js_1.injectHtmlTagsUsingStream)(htmlTags, streamFromReactStreamingPackage);
+        }
         return htmlBegin;
     }
+    function injectAtStreamAfterFirstChunk() {
+        // React has its own stream injection mechanism, see injectHtmlTagsUsingStream()
+        if (streamFromReactStreamingPackage)
+            return null;
+        (0, utils_js_1.assert)(htmlTags);
+        const tags = htmlTags.filter((h) => h.position === 'STREAM');
+        if (tags.length === 0)
+            return null;
+        const htmlFragment = (0, injectHtmlTags_js_1.joinHtmlTags)(tags);
+        return htmlFragment;
+    }
     async function injectAtStreamEnd(htmlPartsEnd) {
         (0, utils_js_1.assert)(htmlTags);
         await resolvePageContextPromise(pageContext);

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

@@ -55,7 +55,7 @@ async function renderDocumentHtml(documentHtml, pageContext, onErrorWhileStreami
 }
 exports.renderDocumentHtml = renderDocumentHtml;
 async function renderHtmlStream(streamOriginal, injectString, pageContext, onErrorWhileStreaming, injectFilter) {
-    const opts = {
+    const processStreamOptions = {
         onErrorWhileStreaming,
         enableEagerStreaming: pageContext.enableEagerStreaming
     };
@@ -64,17 +64,18 @@ async function renderHtmlStream(streamOriginal, injectString, pageContext, onErr
         if ((0, react_streaming_js_1.isStreamFromReactStreamingPackage)(streamOriginal) && !streamOriginal.disabled) {
             streamFromReactStreamingPackage = streamOriginal;
         }
-        const { injectAtStreamBegin, injectAtStreamEnd } = (0, injectAssets_js_1.injectHtmlTagsToStream)(pageContext, streamFromReactStreamingPackage, injectFilter);
-        (0, utils_js_1.objectAssign)(opts, {
-            injectStringAtBegin: async () => {
-                return await injectAtStreamBegin(injectString.htmlPartsBegin);
-            },
-            injectStringAtEnd: async () => {
-                return await injectAtStreamEnd(injectString.htmlPartsEnd);
-            }
-        });
+        const { injectAtStreamBegin, injectAtStreamAfterFirstChunk, injectAtStreamEnd } = (0, injectAssets_js_1.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 (0, stream_js_1.processStream)(streamOriginal, opts);
+    const streamWrapper = await (0, stream_js_1.processStream)(streamOriginal, processStreamOptions);
     return streamWrapper;
 }
 function isTemplateWrapped(something) {

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

@@ -198,7 +198,7 @@ function pipeToStreamWritableNode(htmlRender, writable) {
     (0, utils_js_1.assert)(false);
 }
 exports.pipeToStreamWritableNode = pipeToStreamWritableNode;
-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;
@@ -210,6 +210,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;
@@ -223,8 +224,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
@@ -254,6 +255,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(
@@ -268,8 +275,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
                 (0, utils_js_1.assert)(isReady());

package/dist/cjs/shared/page-configs/serialize/serializeConfigValues.js

@@ -157,6 +157,10 @@ function valueToJson(value, configName, definedAtData, importStatements) {
         configValueSerialized = (0, stringify_1.stringify)(value, {
             valueName,
             forbidReactElements: true,
+            // Replace import strings with import variables.
+            // - We don't need this anymore and could remove it.
+            //   - We temporarily needed it for nested document configs (`config.document.{title,description,favicon}`), but we finally decided to go for flat document configs instead (`config.{title,description,favicon}`).
+            //   - https://github.com/vikejs/vike-react/pull/113
             replacer(_, value) {
                 if (typeof value === 'string') {
                     const importData = (0, transformFileImports_js_1.parsePointerImportData)(value);

package/dist/cjs/utils/projectInfo.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PROJECT_VERSION = exports.projectInfo = void 0;
-const PROJECT_VERSION = '0.4.179-commit-9384166';
+const PROJECT_VERSION = '0.4.179-commit-9822036';
 exports.PROJECT_VERSION = PROJECT_VERSION;
 const projectInfo = {
     projectName: 'Vike',

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 };
@@ -16,7 +17,6 @@ function injectHtmlTags(htmlString, htmlTags, position) {
 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,31 @@ 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;
     }
+    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/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/shared/page-configs/Config.d.ts

@@ -354,6 +354,11 @@ type ConfigBuiltIn = {
      * https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control
      */
     cacheControl?: string;
+    /** Where scripts are injected in the HTML.
+     *
+     * https://vike.dev/injectScriptsAt
+     */
+    injectScriptsAt?: 'HTML_BEGIN' | 'HTML_END' | 'STREAM' | null;
     /** Used by Vike extensions to set their name.
      *
      * https://vike.dev/extends

package/dist/esm/shared/page-configs/serialize/serializeConfigValues.js

@@ -151,6 +151,10 @@ function valueToJson(value, configName, definedAtData, importStatements) {
         configValueSerialized = stringify(value, {
             valueName,
             forbidReactElements: true,
+            // Replace import strings with import variables.
+            // - We don't need this anymore and could remove it.
+            //   - We temporarily needed it for nested document configs (`config.document.{title,description,favicon}`), but we finally decided to go for flat document configs instead (`config.{title,description,favicon}`).
+            //   - https://github.com/vikejs/vike-react/pull/113
             replacer(_, value) {
                 if (typeof value === 'string') {
                     const importData = parsePointerImportData(value);

package/dist/esm/utils/projectInfo.d.ts

@@ -1,7 +1,7 @@
 export { projectInfo };
 export { PROJECT_VERSION };
-declare const PROJECT_VERSION: "0.4.179-commit-9384166";
+declare const PROJECT_VERSION: "0.4.179-commit-9822036";
 declare const projectInfo: {
     projectName: "Vike";
-    projectVersion: "0.4.179-commit-9384166";
+    projectVersion: "0.4.179-commit-9822036";
 };

package/dist/esm/utils/projectInfo.js

@@ -1,6 +1,6 @@
 export { projectInfo };
 export { PROJECT_VERSION };
-const PROJECT_VERSION = '0.4.179-commit-9384166';
+const PROJECT_VERSION = '0.4.179-commit-9822036';
 const projectInfo = {
     projectName: 'Vike',
     projectVersion: PROJECT_VERSION

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vike",
-  "version": "0.4.179-commit-9384166",
+  "version": "0.4.179-commit-9822036",
   "scripts": {
     "dev": "tsc --watch",
     "build": "rimraf dist/ && pnpm run build:esm && pnpm run build:cjs",