vike 0.4.177 → 0.4.178

package/dist/cjs/utils/parseUrl.js

@@ -10,17 +10,9 @@ exports.isUriWithProtocol = exports.createUrlFromComponents = exports.assertUrlC
 const slice_js_1 = require("./slice.js");
 const assert_js_1 = require("./assert.js");
 const picocolors_1 = __importDefault(require("@brillout/picocolors"));
-const PROTOCOLS = [
-    'http://',
-    'https://',
-    // For [Tauri](https://tauri.app/)
-    'tauri://',
-    // For Electron: https://github.com/vikejs/vike/issues/1557
-    'file://'
-];
 function isParsable(url) {
     // `parseUrl()` works with these URLs
-    return (PROTOCOLS.some((p) => url.startsWith(p)) ||
+    return (isUrlWithProtocol(url) ||
         url.startsWith('/') ||
         url.startsWith('.') ||
         url.startsWith('?') ||
@@ -138,7 +130,8 @@ function getPathname(url, baseServer) {
     }
 }
 function parseOrigin(url) {
-    if (!PROTOCOLS.some((protocol) => url.startsWith(protocol))) {
+    if (!isUrlWithProtocol(url)) {
+        (0, assert_js_1.assert)(!isUriWithProtocol(url));
         return { pathname: url, origin: null };
     }
     else {
@@ -239,8 +232,20 @@ function createUrlFromComponents(origin, pathname, searchOriginal, hashOriginal)
     return urlRecreated;
 }
 exports.createUrlFromComponents = createUrlFromComponents;
-function isUriWithProtocol(uri) {
+function isUriWithProtocol(str) {
     // https://en.wikipedia.org/wiki/List_of_URI_schemes
-    return /^[a-z0-9][a-z0-9\.\+\-]*:/i.test(uri);
+    // https://www.rfc-editor.org/rfc/rfc7595
+    // https://github.com/vikejs/vike/commit/886a99ff21e86a8ca699a25cee7edc184aa058e4#r143308934
+    // Examples:
+    //   http://
+    //   https://
+    //   tauri:// # [Tauri](https://tauri.app)
+    //   file:// # [Electron](https://github.com/vikejs/vike/issues/1557)
+    //   capacitor:// # [Capacitor](https://github.com/vikejs/vike/issues/1706)
+    return /^[a-z][a-z0-9\+\-]*:/i.test(str);
 }
 exports.isUriWithProtocol = isUriWithProtocol;
+// Same as isUriWithProtocol() but with trailing :// which is needed for parseOrigin()
+function isUrlWithProtocol(str) {
+    return /^[a-z][a-z0-9\+\-]*:\/\//i.test(str);
+}

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.177';
+const PROJECT_VERSION = '0.4.178';
 exports.PROJECT_VERSION = PROJECT_VERSION;
 const projectInfo = {
     projectName: 'Vike',

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

@@ -19,6 +19,7 @@ import { isServerSideError } from '../../shared/misc/isServerSideError.js';
 const globalObject = getGlobalObject('router/getPageContext.ts', {});
 function getPageContextFromHooks_serialized() {
     const pageContextSerialized = getPageContextSerializedInHtml();
+    assertUsage(!('urlOriginal' in pageContextSerialized), "Adding 'urlOriginal' to passToClient is forbidden");
     processPageContextFromServer(pageContextSerialized);
     objectAssign(pageContextSerialized, {
         _hasPageContextFromServer: true

package/dist/esm/node/plugin/plugins/envVars.js

@@ -5,6 +5,11 @@ import { loadEnv } from 'vite';
 import { assert, assertPosixPath, assertUsage, assertWarning, escapeRegex, isArray, lowerFirst } from '../utils.js';
 import { sourceMapPassthrough } from '../shared/rollupSourceMap.js';
 import { getModuleFilePath } from '../shared/getFilePath.js';
+const PUBLIC_ENV_PREFIX = 'PUBLIC_ENV__';
+const PUBLIC_ENV_WHITELIST = [
+    // https://github.com/vikejs/vike/issues/1724
+    'STORYBOOK'
+];
 function envVarsPlugin() {
     let envsAll;
     let config;
@@ -37,14 +42,13 @@ function envVarsPlugin() {
                 // Security check
                 {
                     const envStatement = getEnvStatement(envName);
-                    const publicPrefix = 'PUBLIC_ENV__';
-                    const isPrivate = !envName.startsWith(publicPrefix);
+                    const isPrivate = !envName.startsWith(PUBLIC_ENV_PREFIX) && !PUBLIC_ENV_WHITELIST.includes(envName);
                     if (isPrivate && isClientSide) {
                         if (!code.includes(envStatement))
                             return;
                         const modulePath = getModuleFilePath(id, config);
                         const errMsgAddendum = isBuild ? '' : ' (Vike will prevent your app from building for production)';
-                        const keyPublic = `${publicPrefix}${envName}`;
+                        const keyPublic = `${PUBLIC_ENV_PREFIX}${envName}`;
                         const errMsg = `${envStatement} is used in client-side file ${modulePath} which means that the environment variable ${envName} will be included in client-side bundles and, therefore, ${envName} will be publicly exposed which can be a security leak${errMsgAddendum}. Use ${envStatement} only in server-side files, or rename ${envName} to ${keyPublic}, see https://vike.dev/env`;
                         if (isBuild) {
                             assertUsage(false, errMsg);

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

@@ -1,12 +1,14 @@
 export { crawlPlusFiles };
-import { assertPosixPath, assert, assertWarning, scriptFileExtensionList, scriptFileExtensions, humanizeTime, assertIsSingleModuleInstance, assertIsNotProductionRuntime, isVersionOrAbove } from '../../../../utils.js';
+import { assertPosixPath, assert, assertWarning, scriptFileExtensions, humanizeTime, assertIsSingleModuleInstance, assertIsNotProductionRuntime, isVersionOrAbove, isScriptFile } from '../../../../utils.js';
 import path from 'path';
+import fs from 'fs/promises';
 import glob from 'fast-glob';
 import { exec } from 'child_process';
 import { promisify } from 'util';
 import pc from '@brillout/picocolors';
 import { isTemporaryBuildFile } from './transpileAndExecuteFile.js';
 const execA = promisify(exec);
+const TOO_MANY_UNTRACKED_FILES = 5;
 assertIsNotProductionRuntime();
 assertIsSingleModuleInstance('crawlPlusFiles.ts');
 let gitIsNotUsable = false;
@@ -30,15 +32,17 @@ async function crawlPlusFiles(userRootDir, outDirAbsoluteFilesystem, isDev, craw
     let files = [];
     const res = crawlWithGit !== false && (await gitLsFiles(userRootDir, outDirRelativeFromUserRootDir));
     if (res &&
-        // Fallback to fast-glob for users that dynamically generate plus files. (Assuming all (generetad) plus files to be skipped because users usually included them in `.gitignore`.)
-        res.length > 0) {
-        files = res;
+        // Fallback to fast-glob for users that dynamically generate plus files. (Assuming that no plus file is found because of the user's .gitignore list.)
+        res.files.length > 0) {
+        files = res.files;
+        // We cannot find files inside symlink directories with `$ git ls-files` => we use fast-glob
+        files.push(...(await crawlSymlinkDirs(res.symlinkDirs, userRootDir, outDirRelativeFromUserRootDir)));
     }
     else {
         files = await fastGlob(userRootDir, outDirRelativeFromUserRootDir);
     }
     // Filter build files
-    files = files.filter((file) => !isTemporaryBuildFile(file));
+    files = files.filter((filePath) => !isTemporaryBuildFile(filePath));
     // Check performance
     {
         const timeAfter = new Date().getTime();
@@ -46,8 +50,8 @@ async function crawlPlusFiles(userRootDir, outDirAbsoluteFilesystem, isDev, craw
         if (isDev) {
             // We only warn in dev, because while building it's expected to take a long time as crawling is competing for resources with other tasks.
             // Although, in dev, it's also competing for resources e.g. with Vite's `optimizeDeps`.
-            assertWarning(timeSpent < 3 * 1000, `Crawling your ${pc.cyan('+')} files took an unexpected long time (${humanizeTime(timeSpent)}). If you repeatedly get this warning, then consider creating a new issue on Vike's GitHub.`, {
-                onlyOnce: 'slow-page-files-search'
+            assertWarning(timeSpent < 3 * 1000, `Crawling your ${pc.cyan('+')} files took an unexpected long time (${humanizeTime(timeSpent)}). If you consistently get this warning, then consider reaching out on GitHub.`, {
+                onlyOnce: 'slow-crawling'
             });
         }
     }
@@ -76,20 +80,27 @@ async function gitLsFiles(userRootDir, outDirRelativeFromUserRootDir) {
         'git',
         preserveUTF8,
         'ls-files',
-        ...scriptFileExtensionList.map((ext) => `"**/+*.${ext}"`),
+        // We don't filter because:
+        //  - It would skip symlink directories
+        //  - Performance gain seems negligible: https://github.com/vikejs/vike/pull/1688#issuecomment-2166206648
+        // ...scriptFileExtensionList.map((ext) => `"**/+*.${ext}"`),
+        // Performance gain is non-negligible.
+        //  - https://github.com/vikejs/vike/pull/1688#issuecomment-2166206648
+        //  - When node_modules/ is untracked the performance gain could be significant?
         ...ignoreAsPatterns.map((pattern) => `--exclude="${pattern}"`),
-        // --others lists untracked files only (but using .gitignore because --exclude-standard)
-        // --cached adds the tracked files to the output
-        '--others --cached --exclude-standard'
+        // --others --exclude-standard => list untracked files (--others) while using .gitignore (--exclude-standard)
+        // --cached => list tracked files
+        // --stage => get file modes which we use to find symlink directories
+        '--others --exclude-standard --cached --stage'
     ].join(' ');
-    let files;
+    let resultLines;
     let filesDeleted;
     try {
         ;
-        [files, filesDeleted] = await Promise.all([
+        [resultLines, filesDeleted] = await Promise.all([
             // Main command
             runCmd1(cmd, userRootDir),
-            // Get tracked by deleted files
+            // Get tracked but deleted files
             runCmd1('git ls-files --deleted', userRootDir)
         ]);
     }
@@ -100,11 +111,40 @@ async function gitLsFiles(userRootDir, outDirRelativeFromUserRootDir) {
         }
         throw err;
     }
-    files = files
-        // We have to repeat the same exclusion logic here because the `git ls-files` option --exclude only applies to untracked files. (We use --exclude only to speed up the command.)
-        .filter(ignoreAsFilterFn)
-        .filter((file) => !filesDeleted.includes(file));
-    return files;
+    const filePaths = resultLines.map(parseGitLsResultLine);
+    // If there are too many files without mode we fallback to fast-glob
+    if (filePaths.filter((f) => !f.mode).length > TOO_MANY_UNTRACKED_FILES)
+        return null;
+    const symlinkDirs = [];
+    const files = [];
+    for (const { filePath, mode } of filePaths) {
+        // Deleted?
+        if (filesDeleted.includes(filePath))
+            continue;
+        // We have to repeat the same exclusion logic here because the option --exclude of `$ git ls-files` only applies to untracked files. (We use --exclude only to speed up the `$ git ls-files` command.)
+        if (!ignoreAsFilterFn(filePath))
+            continue;
+        // Symlink directory?
+        {
+            const isSymlinkDir = await isSymlinkDirectory(mode, filePath, userRootDir);
+            if (isSymlinkDir) {
+                symlinkDirs.push(filePath);
+                continue;
+            }
+            // Skip deleted files and non-symlink directories
+            if (isSymlinkDir === null) {
+                continue;
+            }
+        }
+        // + file?
+        if (!path.posix.basename(filePath).startsWith('+'))
+            continue;
+        // JavaScript file?
+        if (!isScriptFile(filePath))
+            continue;
+        files.push(filePath);
+    }
+    return { files, symlinkDirs };
 }
 // Same as gitLsFiles() but using fast-glob
 async function fastGlob(userRootDir, outDirRelativeFromUserRootDir) {
@@ -115,7 +155,7 @@ async function fastGlob(userRootDir, outDirRelativeFromUserRootDir) {
     });
     return files;
 }
-// Same as getIgnoreFilter() but as glob pattern
+// Same as getIgnoreAsFilterFn() but as glob pattern
 function getIgnoreAsPatterns(outDirRelativeFromUserRootDir) {
     const ignoreAsPatterns = [
         '**/node_modules/**',
@@ -132,7 +172,7 @@ function getIgnoreAsPatterns(outDirRelativeFromUserRootDir) {
     }
     return ignoreAsPatterns;
 }
-// Same as getIgnorePatterns() but for Array.filter()
+// Same as getIgnoreAsPatterns() but for Array.filter()
 function getIgnoreAsFilterFn(outDirRelativeFromUserRootDir) {
     assert(outDirRelativeFromUserRootDir === null || !outDirRelativeFromUserRootDir.startsWith('/'));
     return (file) => !file.includes('node_modules/') &&
@@ -169,6 +209,77 @@ async function isGitNotUsable(userRootDir) {
         return false;
     }
 }
+async function crawlSymlinkDirs(symlinkDirs, userRootDir, outDirRelativeFromUserRootDir) {
+    const filesInSymlinkDirs = (await Promise.all(symlinkDirs.map(async (symlinkDir) => (await fastGlob(path.posix.join(userRootDir, symlinkDir), outDirRelativeFromUserRootDir)).map((filePath) => path.posix.join(symlinkDir, filePath))))).flat();
+    return filesInSymlinkDirs;
+}
+// Parse:
+// ```
+// some/not/tracked/path
+// 100644 f6928073402b241b468b199893ff6f4aed0b7195 0\tpages/index/+Page.tsx
+// ```
+function parseGitLsResultLine(resultLine) {
+    const [part1, part2, ...rest] = resultLine.split('\t');
+    assert(part1);
+    assert(rest.length === 0);
+    // Git doesn't provide the mode for untracked paths.
+    // `resultLine` is:
+    // ```
+    // some/not/tracked/path
+    // ```
+    if (part2 === undefined) {
+        return { filePath: part1, mode: null };
+    }
+    assert(part2);
+    // `resultLine` is:
+    // ```
+    // 100644 f6928073402b241b468b199893ff6f4aed0b7195 0\tpages/index/+Page.tsx
+    // ```
+    const [mode, _, __, ...rest2] = part1.split(' ');
+    assert(mode && _ && __ && rest2.length === 0);
+    return { filePath: part2, mode };
+}
+async function isSymlinkDirectory(mode, filePath, userRootDir) {
+    const filePathAbsolute = path.posix.join(userRootDir, filePath);
+    let stats = null;
+    let isSymlink = false;
+    if (mode === '120000') {
+        isSymlink = true;
+    }
+    else if (mode === null) {
+        // `$ git ls-files` doesn't provide the mode when Git doesn't track the path
+        stats = await getFileStats(filePathAbsolute);
+        if (stats === null)
+            return null;
+        isSymlink = stats.isSymbolicLink();
+        if (!isSymlink && stats.isDirectory())
+            return null;
+    }
+    else {
+        assert(mode);
+    }
+    if (!isSymlink)
+        return false;
+    if (!stats)
+        stats = await getFileStats(filePathAbsolute);
+    if (stats === null)
+        return null;
+    const isDirectory = stats.isDirectory();
+    return isDirectory;
+}
+async function getFileStats(filePathAbsolute) {
+    let stats;
+    try {
+        stats = await fs.lstat(filePathAbsolute);
+    }
+    catch (err) {
+        // File was deleted, usually a temporary file such as +config.js.build-j95xb988fpln.mjs
+        // ENOENT: no such file or directory
+        assert(err.code === 'ENOENT');
+        return null;
+    }
+    return stats;
+}
 async function runCmd1(cmd, cwd) {
     const { stdout } = await execA(cmd, { cwd });
     /* Not always true: https://github.com/vikejs/vike/issues/1440#issuecomment-1892831303

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

@@ -3,7 +3,7 @@ export type { HtmlTag };
 export type { PreloadFilter };
 export type { InjectFilterEntry };
 import type { PageContextInjectAssets } from '../injectAssets.js';
-import type { InjectToStream } from '../stream/react-streaming.js';
+import type { StreamFromReactStreamingPackage } from '../stream/react-streaming.js';
 import type { PageAsset } from '../../renderPage/getPageAssets.js';
 type PreloadFilter = null | ((assets: InjectFilterEntry[]) => InjectFilterEntry[]);
 type PreloadFilterInject = false | 'HTML_BEGIN' | 'HTML_END';
@@ -28,4 +28,4 @@ type HtmlTag = {
 };
 declare function getHtmlTags(pageContext: {
     _isStream: boolean;
-} & PageContextInjectAssets, injectToStream: null | InjectToStream, injectFilter: PreloadFilter): Promise<HtmlTag[]>;
+} & PageContextInjectAssets, streamFromReactStreamingPackage: null | StreamFromReactStreamingPackage, injectFilter: PreloadFilter, pageAssets: PageAsset[], viteDevScript: string): HtmlTag[];

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

@@ -3,16 +3,14 @@ import { assert, assertWarning, assertUsage, isObject, freezePartial } from '../
 import { serializePageContextClientSide } from '../serializePageContextClientSide.js';
 import { sanitizeJson } from './sanitizeJson.js';
 import { inferAssetTag, inferPreloadTag } from './inferHtmlTags.js';
-import { getViteDevScripts } from './getViteDevScripts.js';
 import { mergeScriptTags } from './mergeScriptTags.js';
 import { getGlobalContext } from '../../globalContext.js';
 import pc from '@brillout/picocolors';
 const stamp = '__injectFilterEntry';
-async function getHtmlTags(pageContext, injectToStream, injectFilter) {
+function getHtmlTags(pageContext, streamFromReactStreamingPackage, injectFilter, pageAssets, viteDevScript) {
     assert([true, false].includes(pageContext._isHtmlOnly));
     const isHtmlOnly = pageContext._isHtmlOnly;
     const { isProduction } = getGlobalContext();
-    const pageAssets = await pageContext.__getPageAssets();
     const injectFilterEntries = pageAssets
         .filter((asset) => {
         if (asset.isEntry && asset.assetType === 'script') {
@@ -85,11 +83,11 @@ async function getHtmlTags(pageContext, injectToStream, injectFilter) {
     // See https://github.com/vikejs/vike/pull/1271
     const positionJavaScriptEntry = (() => {
         if (pageContext._pageContextPromise) {
-            assertWarning(!injectToStream, "[getHtmlTags()] We recommend against using streaming and a pageContext promise at the same time, because progressive hydration won't work.", { onlyOnce: true });
+            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
             return 'HTML_END';
         }
-        if (injectToStream) {
+        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
             return 'STREAM';
         }
@@ -107,7 +105,7 @@ async function getHtmlTags(pageContext, injectToStream, injectFilter) {
         });
     }
     // The JavaScript entry <script> tag
-    const scriptEntry = await mergeScriptEntries(pageAssets);
+    const scriptEntry = mergeScriptEntries(pageAssets, viteDevScript);
     if (scriptEntry) {
         htmlTags.push({
             htmlTag: scriptEntry,
@@ -128,10 +126,9 @@ async function getHtmlTags(pageContext, injectToStream, injectFilter) {
     });
     return htmlTags;
 }
-async function mergeScriptEntries(pageAssets) {
+function mergeScriptEntries(pageAssets, viteDevScript) {
     const scriptEntries = pageAssets.filter((pageAsset) => pageAsset.isEntry && pageAsset.assetType === 'script');
-    const viteScripts = await getViteDevScripts();
-    const scriptTagsHtml = `${viteScripts}${scriptEntries.map((asset) => inferAssetTag(asset)).join('')}`;
+    const scriptTagsHtml = `${viteDevScript}${scriptEntries.map((asset) => inferAssetTag(asset)).join('')}`;
     const scriptTag = mergeScriptTags(scriptTagsHtml);
     return scriptTag;
 }

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

@@ -0,0 +1,2 @@
+export { getViteDevScript };
+declare function getViteDevScript(): Promise<string>;

package/dist/esm/node/runtime/html/injectAssets/{getViteDevScripts.js → getViteDevScript.js}

@@ -1,8 +1,8 @@
-export { getViteDevScripts };
+export { getViteDevScript };
 import { getGlobalContext } from '../../globalContext.js';
 import { assert, assertUsage, assertWarning } from '../../utils.js';
 import pc from '@brillout/picocolors';
-async function getViteDevScripts() {
+async function getViteDevScript() {
     const globalContext = getGlobalContext();
     if (globalContext.isProduction) {
         return '';
@@ -18,6 +18,6 @@ async function getViteDevScripts() {
     const viteInjection = fakeHtml.slice(fakeHtmlBegin.length, -1 * fakeHtmlEnd.length);
     assert(viteInjection.includes('script'));
     assertWarning(!viteInjection.includes('import('), 'Unexpected Vite HMR code. Reach out to a Vike maintainer on GitHub.', { onlyOnce: true });
-    const scriptTags = viteInjection;
-    return scriptTags;
+    const viteDevScript = viteInjection;
+    return viteDevScript;
 }

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

@@ -1,10 +1,13 @@
 export { injectHtmlTags };
+export { injectHtmlTagsUsingStream };
 export { createHtmlHeadIfMissing };
 export { injectAtOpeningTag };
 export { injectAtClosingTag };
+import type { StreamFromReactStreamingPackage } from '../stream/react-streaming.js';
 import type { HtmlTag } from './getHtmlTags.js';
-import type { InjectToStream } from '../stream/react-streaming.js';
-declare function injectHtmlTags(htmlString: string, htmlTags: HtmlTag[], injectToStream: null | InjectToStream): string;
+type Position = 'HTML_BEGIN' | 'HTML_END';
+declare function injectHtmlTags(htmlString: string, htmlTags: HtmlTag[], position: Position): string;
+declare function injectHtmlTagsUsingStream(htmlTags: HtmlTag[], streamFromReactStreamingPackage: null | StreamFromReactStreamingPackage): Promise<void>;
 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

@@ -1,24 +1,31 @@
 // Unit tests at ./injectHtmlTags.spec.ts
 export { injectHtmlTags };
+export { injectHtmlTagsUsingStream };
 export { createHtmlHeadIfMissing };
 // Only needed for unit tests
 export { injectAtOpeningTag };
 export { injectAtClosingTag };
 import { assert, assertUsage, slice } from '../../utils.js';
-const POSITIONS = ['HTML_BEGIN', 'HTML_END', 'STREAM'];
-function injectHtmlTags(htmlString, htmlTags, injectToStream) {
-    POSITIONS.forEach((position) => {
-        const htmlFragment = htmlTags
-            .filter((h) => h.position === position)
-            .map((h) => resolveHtmlTag(h.htmlTag))
-            .join('');
-        if (htmlFragment) {
-            htmlString = injectHtmlFragment(position, htmlFragment, htmlString, injectToStream);
-        }
-    });
+function injectHtmlTags(htmlString, htmlTags, position) {
+    const htmlFragment = joinHtmlTags(htmlTags.filter((h) => h.position === position));
+    if (htmlFragment) {
+        htmlString = injectHtmlFragment(position, htmlFragment, htmlString);
+    }
     return htmlString;
 }
-function injectHtmlFragment(position, htmlFragment, htmlString, injectToStream) {
+async function injectHtmlTagsUsingStream(htmlTags, streamFromReactStreamingPackage) {
+    const htmlFragment = joinHtmlTags(htmlTags.filter((h) => h.position === 'STREAM'));
+    if (htmlFragment) {
+        assert(streamFromReactStreamingPackage);
+        assert(!streamFromReactStreamingPackage.hasStreamEnded());
+        await streamFromReactStreamingPackage.injectToStream(htmlFragment, { flush: true });
+    }
+}
+function joinHtmlTags(htmlTags) {
+    const htmlFragment = htmlTags.map((h) => resolveHtmlTag(h.htmlTag)).join('');
+    return htmlFragment;
+}
+function injectHtmlFragment(position, htmlFragment, htmlString) {
     if (position === 'HTML_BEGIN') {
         {
             const res = injectAtPaceholder(htmlFragment, htmlString, true);
@@ -43,11 +50,6 @@ function injectHtmlFragment(position, htmlFragment, htmlString, injectToStream)
         }
         return htmlString + '\n' + htmlFragment;
     }
-    if (position === 'STREAM') {
-        assert(injectToStream);
-        injectToStream(htmlFragment, { flush: true });
-        return htmlString;
-    }
     assert(false);
 }
 function resolveHtmlTag(htmlTag) {

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

@@ -5,7 +5,7 @@ export type { PageContextPromise };
 import type { PageAsset } from '../renderPage/getPageAssets.js';
 import type { HtmlPart } from './renderHtml.js';
 import { type PreloadFilter } from './injectAssets/getHtmlTags.js';
-import type { InjectToStream } from './stream/react-streaming.js';
+import type { StreamFromReactStreamingPackage } from './stream/react-streaming.js';
 import type { PageConfigRuntime } from '../../../shared/page-configs/PageConfig.js';
 import type { PageContextSerialization } from './serializePageContextClientSide.js';
 type PageContextInjectAssets = {
@@ -27,7 +27,7 @@ declare function injectHtmlTagsToString(htmlParts: HtmlPart[], pageContext: Page
 }, injectFilter: PreloadFilter): Promise<string>;
 declare function injectHtmlTagsToStream(pageContext: PageContextInjectAssets & {
     _isStream: true;
-}, injectToStream: null | InjectToStream, injectFilter: PreloadFilter): {
+}, streamFromReactStreamingPackage: null | StreamFromReactStreamingPackage, injectFilter: PreloadFilter): {
     injectAtStreamBegin: (htmlPartsBegin: HtmlPart[]) => Promise<string>;
     injectAtStreamEnd: (htmlPartsEnd: HtmlPart[]) => Promise<string>;
 };

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

@@ -2,27 +2,32 @@ export { injectHtmlTagsToString };
 export { injectHtmlTagsToStream };
 import { assert, isCallable, isPromise } from '../utils.js';
 import { assertPageContextProvidedByUser } from '../../../shared/assertPageContextProvidedByUser.js';
-import { injectHtmlTags, createHtmlHeadIfMissing } from './injectAssets/injectHtmlTags.js';
+import { 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 htmlTags = await getHtmlTags(pageContext, null, injectFilter);
     const pageAssets = await pageContext.__getPageAssets();
+    const viteDevScript = await getViteDevScript();
+    const htmlTags = getHtmlTags(pageContext, null, injectFilter, pageAssets, viteDevScript);
     let htmlString = htmlPartsToString(htmlParts, pageAssets);
-    htmlString = injectToHtmlBegin(htmlString, htmlTags, null);
+    htmlString = injectToHtmlBegin(htmlString, htmlTags);
     htmlString = injectToHtmlEnd(htmlString, htmlTags);
+    assert(htmlTags.filter((snippet) => snippet.position === 'STREAM').length === 0);
     return htmlString;
 }
-function injectHtmlTagsToStream(pageContext, injectToStream, injectFilter) {
+function injectHtmlTagsToStream(pageContext, streamFromReactStreamingPackage, injectFilter) {
     let htmlTags;
     return {
         injectAtStreamBegin,
         injectAtStreamEnd
     };
     async function injectAtStreamBegin(htmlPartsBegin) {
-        htmlTags = await getHtmlTags(pageContext, injectToStream, injectFilter);
         const pageAssets = await pageContext.__getPageAssets();
+        const viteDevScript = await getViteDevScript();
+        htmlTags = getHtmlTags(pageContext, streamFromReactStreamingPackage, injectFilter, pageAssets, viteDevScript);
         let htmlBegin = htmlPartsToString(htmlPartsBegin, pageAssets);
-        htmlBegin = injectToHtmlBegin(htmlBegin, htmlTags, injectToStream);
+        htmlBegin = injectToHtmlBegin(htmlBegin, htmlTags);
+        await injectHtmlTagsUsingStream(htmlTags, streamFromReactStreamingPackage);
         return htmlBegin;
     }
     async function injectAtStreamEnd(htmlPartsEnd) {
@@ -34,16 +39,14 @@ function injectHtmlTagsToStream(pageContext, injectToStream, injectFilter) {
         return htmlEnd;
     }
 }
-function injectToHtmlBegin(htmlBegin, htmlTags, injectToStream) {
-    const htmlTagsAtBegin = htmlTags.filter((snippet) => snippet.position !== 'HTML_END');
+function injectToHtmlBegin(htmlBegin, htmlTags) {
     // Ensure existence of `<head>`
     htmlBegin = createHtmlHeadIfMissing(htmlBegin);
-    htmlBegin = injectHtmlTags(htmlBegin, htmlTagsAtBegin, injectToStream);
+    htmlBegin = injectHtmlTags(htmlBegin, htmlTags, 'HTML_BEGIN');
     return htmlBegin;
 }
 function injectToHtmlEnd(htmlEnd, htmlTags) {
-    const htmlTagsAtEnd = htmlTags.filter((snippet) => snippet.position === 'HTML_END');
-    htmlEnd = injectHtmlTags(htmlEnd, htmlTagsAtEnd, null);
+    htmlEnd = injectHtmlTags(htmlEnd, htmlTags, 'HTML_END');
     return htmlEnd;
 }
 async function resolvePageContextPromise(pageContext) {

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

@@ -6,7 +6,7 @@ export { getHtmlString };
 import { assert, assertUsage, assertWarning, checkType, escapeHtml, hasProp, isHtml, isPromise, objectAssign } from '../utils.js';
 import { injectHtmlTagsToString, injectHtmlTagsToStream } from './injectAssets.js';
 import { processStream, isStream, streamToString } from './stream.js';
-import { isStreamReactStreaming } from './stream/react-streaming.js';
+import { isStreamFromReactStreamingPackage } from './stream/react-streaming.js';
 import { getGlobalContext } from '../globalContext.js';
 import pc from '@brillout/picocolors';
 function isDocumentHtml(something) {
@@ -57,11 +57,11 @@ async function renderHtmlStream(streamOriginal, injectString, pageContext, onErr
         enableEagerStreaming: pageContext.enableEagerStreaming
     };
     if (injectString) {
-        let injectToStream = null;
-        if (isStreamReactStreaming(streamOriginal) && !streamOriginal.disabled) {
-            injectToStream = streamOriginal.injectToStream;
+        let streamFromReactStreamingPackage = null;
+        if (isStreamFromReactStreamingPackage(streamOriginal) && !streamOriginal.disabled) {
+            streamFromReactStreamingPackage = streamOriginal;
         }
-        const { injectAtStreamBegin, injectAtStreamEnd } = injectHtmlTagsToStream(pageContext, injectToStream, injectFilter);
+        const { injectAtStreamBegin, injectAtStreamEnd } = injectHtmlTagsToStream(pageContext, streamFromReactStreamingPackage, injectFilter);
         objectAssign(opts, {
             injectStringAtBegin: async () => {
                 return await injectAtStreamBegin(injectString.htmlPartsBegin);

package/dist/esm/node/runtime/html/stream/react-streaming.d.ts

@@ -1,25 +1,18 @@
-/// <reference types="node" resolution-mode="require"/>
-export { isStreamReactStreaming };
-export { streamReactStreamingToString };
-export { getStreamFromReactStreaming };
-export type { StreamReactStreaming };
-export type { InjectToStream };
+export { isStreamFromReactStreamingPackage };
+export { streamFromReactStreamingPackageToString };
+export { getStreamOfReactStreamingPackage };
+export type { StreamFromReactStreamingPackage };
+export type { StreamFromReactStreamingPackagePublic };
+import type { renderToStream } from 'react-streaming/server';
 import { StreamReadableWeb, StreamWritableNode } from '../stream.js';
-type InjectToStream = (chunk: unknown, options?: {
-    flush?: boolean;
-}) => void;
-type StreamReactStreaming = {
-    injectToStream: InjectToStream;
-    disabled?: boolean;
-} & ({
-    pipe: (writable: StreamWritableNode) => void;
-    readable: null;
-} | {
-    pipe: null;
-    readable: StreamReadableWeb;
-});
-declare function streamReactStreamingToString(stream: StreamReactStreaming): Promise<string>;
-declare function isStreamReactStreaming(thing: unknown): thing is StreamReactStreaming;
-declare function getStreamFromReactStreaming(stream: StreamReactStreaming): StreamReadableWeb | {
-    __streamPipeNode: (writable: import("stream").Writable) => void;
+type StreamFromReactStreamingPackagePublic = {
+    injectToStream: Function;
 };
+type StreamFromReactStreamingPackage = Awaited<ReturnType<typeof renderToStream>>;
+declare function streamFromReactStreamingPackageToString(stream: StreamFromReactStreamingPackage): Promise<string>;
+declare function isStreamFromReactStreamingPackage(thing: unknown): thing is StreamFromReactStreamingPackage;
+type Pipe = {
+    __streamPipeNode: (writable: StreamWritableNode) => void;
+};
+type Readable = StreamReadableWeb;
+declare function getStreamOfReactStreamingPackage(stream: StreamFromReactStreamingPackage): Pipe | Readable;