vike 0.4.148-commit-70e7518 → 0.4.149-commit-041ee42

package/dist/cjs/node/plugin/plugins/devConfig/index.js

@@ -24,22 +24,33 @@ function devConfig() {
             config() {
                 return {
                     appType: 'custom',
+                    // TODO:v1-release: remove (AFAICT we only need to use config.optimizeDeps for the old design)
                     optimizeDeps: {
                         exclude: [
-                            // We exclude the vike client to be able to use `import.meta.glob()`
+                            // We exclude Vike's client runtime to be able to use Vite's import.meta.glob()
                             'vike/client',
                             'vike/client/router',
                             'vike/routing',
-                            // - We also exclude @brillout/json-serializer and @brillout/picocolors to avoid:
-                            //   ```
-                            //   9:28:58 AM [vite] ✨ new dependencies optimized: @brillout/json-serializer/parse
-                            //   9:28:58 AM [vite] ✨ optimized dependencies changed. reloading
-                            //   ```
-                            // - Previously, we had to exclude @brillout/json-serializer and @brillout/picocolors because of pnpm, but this doesn't seem to be the case anymore.
-                            //   - Actually, this should be still the case? How can Vite resolve @brillout/json-serializer when using pnpm?
+                            // We exclude @brillout/json-serializer and @brillout/picocolors to avoid:
+                            // ```
+                            // 9:28:58 AM [vite] ✨ new dependencies optimized: @brillout/json-serializer/parse
+                            // 9:28:58 AM [vite] ✨ optimized dependencies changed. reloading
+                            // ```
                             '@brillout/json-serializer/parse',
                             '@brillout/json-serializer/stringify',
-                            '@brillout/picocolors'
+                            '@brillout/picocolors',
+                            // We exclude all packages that depend on any optimizeDeps.exclude entry because, otherwise, the entry cannot be resolved when using pnpm. For example:
+                            // ```
+                            // Failed to resolve import "@brillout/json-serializer/parse" from "../../packages/vike-react-query/dist/renderer/VikeReactQueryWrapper.js". Does the file exist?
+                            // 343|  // ../../node_modules/.pnpm/react-streaming@0.3.16_react-dom@18.2.0_react@18.2.0/node_modules/react-streaming/dist/esm/client/useAsync.js
+                            // 344|  import { parse as parse2 } from "@brillout/json-serializer/parse";
+                            // ```
+                            // The source map is confusing, the import actually lives at node_modules/.vite/deps/vike-react-query_renderer_VikeReactQueryWrapper.js which contains:
+                            // ```js
+                            // // ../../node_modules/.pnpm/react-streaming@0.3.16_react-dom@18.2.0_react@18.2.0/node_modules/react-streaming/dist/esm/client/useAsync.js
+                            // import { parse as parse2 } from "@brillout/json-serializer/parse";
+                            // ```
+                            'react-streaming'
                         ]
                     }
                 };

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

@@ -56,18 +56,8 @@ async function crawlPlusFiles(userRootDir, outDirAbsoluteFilesystem, isDev) {
 exports.crawlPlusFiles = crawlPlusFiles;
 // Same as fastGlob() but using `$ git ls-files`
 async function gitLsFiles(userRootDir, outDirRelativeFromUserRootDir) {
-    // Test whether Git is installed and whether userRootDir is inside a Git repository
-    {
-        let stdout;
-        try {
-            const res = await execA('git rev-parse --is-inside-work-tree', { cwd: userRootDir });
-            stdout = res.stdout;
-        }
-        catch {
-            return null;
-        }
-        (0, utils_js_1.assert)(stdout.trim() === 'true');
-    }
+    if (!(await isUsingGit(userRootDir)))
+        return null;
     const cmd = [
         'git ls-files',
         ...utils_js_1.scriptFileExtensionList.map((ext) => `"**/+*.${ext}"`),
@@ -76,20 +66,13 @@ async function gitLsFiles(userRootDir, outDirRelativeFromUserRootDir) {
         // --cached adds the tracked files to the output
         '--others --cached --exclude-standard'
     ].join(' ');
-    let stdout;
-    try {
-        const res = await execA(cmd, { cwd: userRootDir });
-        stdout = res.stdout;
-    }
-    catch (err) {
-        if (err.message.includes('not a git repository'))
-            return null;
-        throw err;
-    }
-    let files = stdout.split('\n').filter(Boolean);
+    let files = await runCmd(cmd, userRootDir);
     files = files.filter(
     // 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.)
     (file) => getIgnoreFilter(file, outDirRelativeFromUserRootDir));
+    // Remove tracked but deleted files
+    const filesIgnore = await runCmd('git ls-files --deleted', userRootDir);
+    files = files.filter((file) => !filesIgnore.includes(file));
     return files;
 }
 // Same as gitLsFiles() but using fast-glob
@@ -126,3 +109,22 @@ function getIgnoreFilter(file, outDirRelativeFromUserRootDir) {
         !file.includes('.telefunc.') &&
         (!outDirRelativeFromUserRootDir || !file.startsWith(`${outDirRelativeFromUserRootDir}/`)));
 }
+// Whether Git is installed and whether userRootDir is inside a Git repository
+async function isUsingGit(userRootDir) {
+    let res;
+    try {
+        res = await execA('git rev-parse --is-inside-work-tree', { cwd: userRootDir });
+    }
+    catch {
+        return false;
+    }
+    const { stdout, stderr } = res;
+    (0, utils_js_1.assert)(stderr.toString().trim() === '');
+    (0, utils_js_1.assert)(stdout.toString().trim() === 'true');
+    return true;
+}
+async function runCmd(cmd, cwd) {
+    const res = await execA(cmd, { cwd });
+    (0, utils_js_1.assert)(res.stderr === '');
+    return res.stdout.toString().trim().split('\n');
+}

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

@@ -12,39 +12,37 @@ const getViteDevScripts_js_1 = require("./getViteDevScripts.js");
 const mergeScriptTags_js_1 = require("./mergeScriptTags.js");
 const globalContext_js_1 = require("../../globalContext.js");
 const picocolors_1 = __importDefault(require("@brillout/picocolors"));
+const stamp = '__injectFilterEntry';
 async function getHtmlTags(pageContext, injectToStream, injectFilter) {
     (0, utils_js_1.assert)([true, false].includes(pageContext._isHtmlOnly));
     const isHtmlOnly = pageContext._isHtmlOnly;
-    const globalContext = (0, globalContext_js_1.getGlobalContext)();
-    const { isProduction } = globalContext;
-    const injectJavaScriptDuringStream = !pageContext._pageContextPromise && !!injectToStream;
+    const { isProduction } = (0, globalContext_js_1.getGlobalContext)();
     const pageAssets = await pageContext.__getPageAssets();
-    const stamp = Symbol('injectFilterEntryStamp');
-    const getInject = (asset) => {
-        if (!isProduction) {
-            return 'HTML_BEGIN';
-        }
-        if (asset.assetType === 'style' || asset.assetType === 'font') {
-            return 'HTML_BEGIN';
-        }
-        if (asset.assetType === 'script') {
-            return 'HTML_END';
-        }
-        return false;
-    };
     const injectFilterEntries = pageAssets
         .filter((asset) => {
         if (asset.isEntry && asset.assetType === 'script') {
-            // We could in principle allow the user to change the position of <script> but we don't because of `getMergedScriptTag()`
-            return false;
-        }
-        if (isHtmlOnly && asset.assetType === 'script') {
+            // We could allow the user to change the position of <script> but we currently don't:
+            //  - Because of mergeScriptEntries()
+            //  - We would need to add STREAM to to PreloadFilterInject
+            // To suppor this, we should add the JavaScript entry to injectFilterEntries (with an `src` value of `null`)
             return false;
         }
         return true;
     })
         .map((asset) => {
-        const inject = getInject(asset);
+        const inject = (() => {
+            if (!isProduction) {
+                // In development, we should always load assets as soon as possible, in order to eagerly process assets (e.g. applying the transform() hooks of Vite plugins) which are lazily discovered.
+                return 'HTML_BEGIN';
+            }
+            if (asset.assetType === 'style' || asset.assetType === 'font') {
+                return 'HTML_BEGIN';
+            }
+            if (asset.assetType === 'script') {
+                return 'HTML_END';
+            }
+            return false;
+        })();
         const entry = {
             ...asset,
             inject,
@@ -53,92 +51,104 @@ async function getHtmlTags(pageContext, injectToStream, injectFilter) {
         };
         return entry;
     });
-    assertInjectFilterEntries(injectFilterEntries, stamp);
+    assertInjectFilterEntries(injectFilterEntries);
+    // ==============
+    // injectFilter()
+    // ==============
     if (injectFilter && isProduction) {
         Object.seal(injectFilterEntries); // `Object.seal()` instead of `Object.freeze()` to allow the user to `assets.sort()`
         Object.values(injectFilterEntries).forEach((entry) => (0, utils_js_1.freezePartial)(entry, { inject: (val) => val === false || val === 'HTML_BEGIN' || val === 'HTML_END' }));
+        // Call the user's injectFilter() hook https://vike.dev/injectFilter
         const res = injectFilter(injectFilterEntries);
-        (0, utils_js_1.assertUsage)(res === undefined, 'Wrong injectFilter() usage, see https://vike.dev/injectFilter');
-        assertInjectFilterUsage(injectFilterEntries, stamp);
-        injectFilterEntries.forEach((a) => {
-            /*
-            if (a.assetType === 'script' && a.isEntry) {
-              assertUsage(a.inject, `[injectFilter()] ${a.src} needs to be injected`)
-            }
-            */
-            if (a.assetType === 'style' && a.isEntry) {
-                // In development, Vite automatically inject styles, but we still inject `<link rel="stylesheet" type="text/css" href="${src}">` tags in order to avoid FOUC (flash of unstyled content).
-                //  - https://github.com/vitejs/vite/issues/2282
-                //  - https://github.com/vikejs/vike/issues/261
-                (0, utils_js_1.assertWarning)(a.inject, `[injectFilter()] We recommend against not injecting ${a.src}`, {
-                    onlyOnce: true
-                });
-            }
-            if (!isHtmlOnly && a.assetType === 'script') {
-                (0, utils_js_1.assertWarning)(a.inject, `[injectFilter()] We recommend against not preloading JavaScript (${a.src})`, {
-                    onlyOnce: true
-                });
-            }
-        });
+        (0, utils_js_1.assertUsage)(res === undefined, `injectFilter() should return ${picocolors_1.default.cyan('undefined')}, see https://vike.dev/injectFilter`);
+        assertInjectFilterUsage(injectFilterEntries);
     }
     const htmlTags = [];
+    // ==============
     // Non-JavaScript
-    for (const asset of injectFilterEntries) {
-        if (asset.assetType !== 'script' && asset.inject) {
-            const htmlTag = asset.isEntry ? (0, inferHtmlTags_js_1.inferAssetTag)(asset) : (0, inferHtmlTags_js_1.inferPreloadTag)(asset);
-            htmlTags.push({ htmlTag, position: asset.inject });
-        }
-    }
+    // ==============
+    injectFilterEntries
+        .filter((asset) => asset.assetType !== 'script' && asset.inject)
+        .forEach((asset) => {
+        if (!asset.inject)
+            return;
+        const htmlTag = asset.isEntry ? (0, inferHtmlTags_js_1.inferAssetTag)(asset) : (0, inferHtmlTags_js_1.inferPreloadTag)(asset);
+        htmlTags.push({ htmlTag, position: asset.inject });
+    });
+    // ==========
     // JavaScript
-    const positionProd = injectJavaScriptDuringStream ? 'STREAM' : 'HTML_END';
-    const positionScript = !isProduction ? 'HTML_BEGIN' : positionProd;
-    const positionJsonData = !isProduction && !pageContext._pageContextPromise && !pageContext._isStream ? 'HTML_BEGIN' : positionProd;
-    const jsScript = await getMergedScriptTag(pageAssets, isProduction);
-    if (jsScript) {
+    // ==========
+    // 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
+    const positionJavaScriptEntry = (() => {
+        if (pageContext._pageContextPromise) {
+            (0, utils_js_1.assertWarning)(!injectToStream, "[getHtmlTags()] We recommend against using streaming and a pageContext promise at the same time as partial 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/stream#initial-data-after-stream-end
+            return 'HTML_END';
+        }
+        if (injectToStream) {
+            // If there is a stream then, in order to support partial hydration, inject the JavaScript during the stream after React(/Vue/Solid/...) resolved the first suspense boundary
+            return 'STREAM';
+        }
+        else {
+            return 'HTML_END';
+        }
+    })();
+    // <script id="vike_pageContext" type="application/json">
+    if (!isHtmlOnly) {
         htmlTags.push({
-            htmlTag: jsScript,
-            position: positionScript
+            htmlTag: () => 
+            // Needs to be called after resolvePageContextPromise()
+            getPageContextJsonScriptTag(pageContext),
+            position: positionJavaScriptEntry
         });
     }
-    for (const asset of injectFilterEntries) {
-        if (asset.assetType === 'script' && asset.inject) {
-            const htmlTag = asset.isEntry ? (0, inferHtmlTags_js_1.inferAssetTag)(asset) : (0, inferHtmlTags_js_1.inferPreloadTag)(asset);
-            const position = asset.inject === 'HTML_END' ? positionScript : asset.inject;
-            htmlTags.push({ htmlTag, position });
-        }
-    }
-    // `pageContext` JSON data
-    if (!isHtmlOnly) {
-        // Don't allow the user to manipulate with injectFilter(): injecting <script type="application/json"> before the stream can break the app when:
-        //  - using https://vike.dev/stream#initial-data-after-stream-end
-        //  - `pageContext` is modified during the stream, e.g. https://github.com/brillout/vike-with-pinia which uses https://vuejs.org/api/composition-api-lifecycle.html#onserverprefetch
-        // The <script> tags are handled separately by vike down below.
+    // The JavaScript entry <script> tag
+    const scriptEntry = await mergeScriptEntries(pageAssets, isProduction);
+    if (scriptEntry) {
         htmlTags.push({
-            // Needs to be called after `resolvePageContextPromise()`
-            htmlTag: () => getPageContextTag(pageContext),
-            position: positionJsonData
+            htmlTag: scriptEntry,
+            position: positionJavaScriptEntry
         });
     }
+    // Preload tags
+    injectFilterEntries
+        .filter((asset) => asset.assetType === 'script')
+        .forEach((asset) => {
+        (0, utils_js_1.assert)(!asset.isEntry); // Users cannot re-order JavaScript entries, see creation of injectFilterEntries
+        const htmlTag = (0, inferHtmlTags_js_1.inferPreloadTag)(asset);
+        if (!asset.inject)
+            return;
+        // Ideally, instead of this conditional ternary operator, we should add STREAM to PreloadFilterInject (or a better fitting name such as HTML_STREAM)
+        const position = asset.inject === 'HTML_END' ? positionJavaScriptEntry : asset.inject;
+        htmlTags.push({ htmlTag, position });
+    });
     return htmlTags;
 }
 exports.getHtmlTags = getHtmlTags;
-async function getMergedScriptTag(pageAssets, isProduction) {
-    const scriptAssets = pageAssets.filter((pageAsset) => pageAsset.isEntry && pageAsset.assetType === 'script');
+async function mergeScriptEntries(pageAssets, isProduction) {
+    const scriptEntries = pageAssets.filter((pageAsset) => pageAsset.isEntry && pageAsset.assetType === 'script');
     const viteScripts = await (0, getViteDevScripts_js_1.getViteDevScripts)();
-    const scriptTagsHtml = `${viteScripts}${scriptAssets.map((asset) => (0, inferHtmlTags_js_1.inferAssetTag)(asset)).join('')}`;
+    const scriptTagsHtml = `${viteScripts}${scriptEntries.map((asset) => (0, inferHtmlTags_js_1.inferAssetTag)(asset)).join('')}`;
     const scriptTag = (0, mergeScriptTags_js_1.mergeScriptTags)(scriptTagsHtml, isProduction);
     return scriptTag;
 }
-function getPageContextTag(pageContext) {
+function getPageContextJsonScriptTag(pageContext) {
     const pageContextSerialized = (0, sanitizeJson_js_1.sanitizeJson)((0, serializePageContextClientSide_js_1.serializePageContextClientSide)(pageContext));
     const htmlTag = `<script id="vike_pageContext" type="application/json">${pageContextSerialized}</script>`;
     // @ts-expect-error
     pageContext._pageContextHtmlTag = htmlTag;
     return htmlTag;
 }
-function assertInjectFilterEntries(injectFilterEntries, stamp) {
+function assertInjectFilterEntries(injectFilterEntries) {
     try {
-        assertInjectFilterUsage(injectFilterEntries, stamp);
+        checkForWrongUsage(injectFilterEntries);
     }
     catch (err) {
         if (err?.message.includes('[Wrong Usage]')) {
@@ -147,7 +157,11 @@ function assertInjectFilterEntries(injectFilterEntries, stamp) {
         throw err;
     }
 }
-function assertInjectFilterUsage(injectFilterEntries, stamp) {
+function assertInjectFilterUsage(injectFilterEntries) {
+    checkForWrongUsage(injectFilterEntries);
+    checkForWarnings(injectFilterEntries);
+}
+function checkForWrongUsage(injectFilterEntries) {
     injectFilterEntries.forEach((entry, i) => {
         (0, utils_js_1.assertUsage)((0, utils_js_1.isObject)(entry), `[injectFilter()] Entry ${i} isn't an object`);
         (0, utils_js_1.assertUsage)(typeof entry.src === 'string', `[injectFilter()] Entry ${i} is missing property ${picocolors_1.default.cyan('src')}`);
@@ -156,6 +170,28 @@ function assertInjectFilterUsage(injectFilterEntries, stamp) {
         (0, utils_js_1.assert)(entry.assetType === null || typeof entry.assetType === 'string');
         (0, utils_js_1.assert)(entry.mediaType === null || typeof entry.mediaType === 'string');
         (0, utils_js_1.assert)(typeof entry.isEntry === 'boolean');
-        (0, utils_js_1.assert)(Object.keys(entry).length === 5);
+        (0, utils_js_1.assert)(Object.keys(entry).length === 6);
+    });
+}
+function checkForWarnings(injectFilterEntries) {
+    injectFilterEntries.forEach((a) => {
+        /*
+        if (a.assetType === 'script' && a.isEntry) {
+          assertUsage(a.inject, `[injectFilter()] ${a.src} needs to be injected`)
+        }
+        */
+        if (a.assetType === 'style' && a.isEntry) {
+            // In development, Vite automatically inject styles, but we still inject `<link rel="stylesheet" type="text/css" href="${src}">` tags in order to avoid FOUC (flash of unstyled content).
+            //  - https://github.com/vitejs/vite/issues/2282
+            //  - https://github.com/vikejs/vike/issues/261
+            (0, utils_js_1.assertWarning)(a.inject, `[injectFilter()] We recommend against not injecting ${a.src}`, {
+                onlyOnce: true
+            });
+        }
+        if (a.assetType === 'script') {
+            (0, utils_js_1.assertWarning)(a.inject, `[injectFilter()] We recommend against not preloading JavaScript (${a.src})`, {
+                onlyOnce: true
+            });
+        }
     });
 }

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

@@ -1,7 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.inferEarlyHintLink = exports.inferPreloadTag = exports.inferAssetTag = void 0;
+exports.scriptAttrs = exports.inferEarlyHintLink = exports.inferPreloadTag = exports.inferAssetTag = void 0;
 const utils_js_1 = require("../../utils.js");
+// We can't use `defer` here. With `defer`, the entry script won't start before `</body>` has been parsed, preventing partial hydration during SSR streaming, see https://github.com/vikejs/vike/pull/1271
+const scriptAttrs = 'type="module" async';
+exports.scriptAttrs = scriptAttrs;
 function inferPreloadTag(pageAsset) {
     const { src, assetType, mediaType } = pageAsset;
     const rel = getRel(pageAsset);
@@ -22,10 +25,7 @@ function inferAssetTag(pageAsset) {
     const { src, assetType, mediaType } = pageAsset;
     if (assetType === 'script') {
         (0, utils_js_1.assert)(mediaType === 'text/javascript');
-        // Using <script async> seems problematic:
-        //  - in dev: https://github.com/vikejs/vike/issues/524
-        //  - in prod: https://github.com/vikejs/vike/issues/567
-        return `<script type="module" src="${src}" defer></script>`;
+        return `<script src="${src}" ${scriptAttrs}></script>`;
     }
     if (assetType === 'style') {
         return `<link rel="stylesheet" type="text/css" href="${src}">`;

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.mergeScriptTags = void 0;
 const utils_js_1 = require("../../utils.js");
+const inferHtmlTags_js_1 = require("./inferHtmlTags.js");
 const scriptRE = /(<script\b(?:\s[^>]*>|>))(.*?)<\/script>/gims;
 const srcRE = /\bsrc\s*=\s*(?:"([^"]+)"|'([^']+)'|([^\s'">]+))/im;
 const typeRE = /\btype\s*=\s*(?:"([^"]+)"|'([^']+)'|([^\s'">]+))/im;
@@ -34,7 +35,7 @@ function mergeScriptTags(scriptTagsHtml, isProduction) {
                 }
             });
             if (contents.length > 0) {
-                scriptTag += `<script type="module" defer>\n${contents.join('\n')}\n</script>`;
+                scriptTag += `<script ${inferHtmlTags_js_1.scriptAttrs}>\n${contents.join('\n')}\n</script>`;
             }
         }
     }

package/dist/cjs/node/runtime/renderPage/getPageAssets/retrieveAssetsProd.js

@@ -14,8 +14,7 @@ function retrieveAssetsProd(clientDependencies, clientManifest, includeAssetsImp
         if (onlyAssets) {
             if (!includeAssetsImportedByServer)
                 return;
-            // We assume that all npm packages have already built their Vike page files.
-            //  - Bundlers (Rollup, esbuild, tsup, ...) extract the CSS out of JavaScript => we can assume JavaScript to not import any CSS/assets
+            // We assume that all npm packages have already built their files: bundlers (Rollup, esbuild, tsup, ...) extract the CSS out of JavaScript => we can assume JavaScript to not import any CSS/assets.
             if ((0, utils_js_1.isNpmPackageImport)(id))
                 return;
             if (id.includes('.page.server.')) {
@@ -52,7 +51,7 @@ function collectAssets(manifestKey, assetUrls, visistedAssets, manifest, onlyCol
         assetUrls.add(`/${asset}`);
     }
 }
-// Support `config.build.cssCodeSplit: false`, https://github.com/vikejs/vike/issues/644
+// Support `config.build.cssCodeSplit: false`, see https://github.com/vikejs/vike/issues/644
 function collectSingleStyle(assetUrls, manifest) {
     const style = manifest['style.css'];
     if (style && Object.values(manifest).filter((asset) => asset.file.endsWith('.css')).length === 1) {

package/dist/cjs/node/runtime/renderPage/getPageAssets/sortPageAssetsForEarlyHintsHeader.js

@@ -22,6 +22,12 @@ function sortPageAssetsForEarlyHintsHeader(pageAssets) {
         if (assetType === 'image')
             return priority;
         priority--;
+        if (assetType === 'video')
+            return priority;
+        priority--;
+        if (assetType === 'audio')
+            return priority;
+        priority--;
         // Others
         if (assetType !== 'script')
             return priority;

package/dist/cjs/node/runtime/renderPage/inferMediaType.js

@@ -36,6 +36,44 @@ function inferMediaType(href) {
     if (href.endsWith('.woff2')) {
         return { assetType: 'font', mediaType: 'font/woff2' };
     }
+    // Videos
+    if (href.endsWith('.mp4')) {
+        return { assetType: 'video', mediaType: 'video/mp4' };
+    }
+    if (href.endsWith('.webm')) {
+        return { assetType: 'video', mediaType: 'video/webm' };
+    }
+    if (href.endsWith('.ogv')) {
+        return { assetType: 'video', mediaType: 'video/ogg' };
+    }
+    if (href.endsWith('.mpeg') || href.endsWith('.mpg')) {
+        return { assetType: 'video', mediaType: 'video/mpeg' };
+    }
+    if (href.endsWith('.avi')) {
+        return { assetType: 'video', mediaType: 'video/x-msvideo' };
+    }
+    if (href.endsWith('.mov') || href.endsWith('.qt')) {
+        return { assetType: 'video', mediaType: 'video/quicktime' };
+    }
+    // Audios
+    if (href.endsWith('.mp3')) {
+        return { assetType: 'audio', mediaType: 'audio/mpeg' };
+    }
+    if (href.endsWith('.wav')) {
+        return { assetType: 'audio', mediaType: 'audio/wav' };
+    }
+    if (href.endsWith('.ogg')) {
+        return { assetType: 'audio', mediaType: 'audio/ogg' };
+    }
+    if (href.endsWith('.m4a')) {
+        return { assetType: 'audio', mediaType: 'audio/aac' };
+    }
+    if (href.endsWith('midi') || href.endsWith('.mid')) {
+        return { assetType: 'audio', mediaType: 'audio/midi' };
+    }
+    if (href.endsWith('.flac')) {
+        return { assetType: 'audio', mediaType: 'audio/flac' };
+    }
     return null;
 }
 exports.inferMediaType = inferMediaType;

package/dist/cjs/shared/page-configs/assertExports.js

@@ -34,13 +34,20 @@ function assertExports(fileExports, filePathToShowToUser, configName) {
         if (exportsRelevant.length === 1) {
             return;
         }
-        else {
-            (0, utils_js_1.assert)(exportsRelevant.length === 0);
-            let errMsg = `${filePathToShowToUser} doesn't export any value, but it should have a ${picocolors_1.default.cyan('export default')}`;
+        const exportDefault = picocolors_1.default.cyan('export default');
+        const exportConfigName = picocolors_1.default.cyan(`export { ${configName} }`);
+        if (exportsRelevant.length === 0) {
+            let errMsg = `${filePathToShowToUser} doesn't export any value, but it should have a ${exportDefault}`;
             if (configName)
-                errMsg += ` or ${picocolors_1.default.cyan(`export { ${configName} }`)}`;
+                errMsg += ` or ${exportConfigName}`;
             (0, utils_js_1.assertUsage)(false, errMsg);
         }
+        else {
+            (0, utils_js_1.assert)(exportsRelevant.length === 2);
+            (0, utils_js_1.assertWarning)(false, `${filePathToShowToUser} remove ${exportConfigName} or ${exportDefault}`, {
+                onlyOnce: true
+            });
+        }
     }
     else {
         // !configName => isConfigFile

package/dist/cjs/utils/projectInfo.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PROJECT_VERSION = exports.projectInfo = void 0;
 const assertSingleInstance_js_1 = require("./assertSingleInstance.js");
-const PROJECT_VERSION = '0.4.148-commit-70e7518';
+const PROJECT_VERSION = '0.4.149-commit-041ee42';
 exports.PROJECT_VERSION = PROJECT_VERSION;
 const projectInfo = {
     projectName: 'Vike',

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

@@ -2,9 +2,15 @@ import { parse } from '@brillout/json-serializer/parse';
 import { hasProp, assert, assertUsage, objectAssign } from '../server-routing-runtime/utils.js';
 export { getPageContextSerializedInHtml };
 function getPageContextSerializedInHtml() {
+    // elem should exist because:
+    // 1. <script id="vike_pageContext" type="application/json"> appears before the <script> that loads Vike's client runtime (which includes this file)
+    // 2. <script id="vike_pageContext" type="application/json"> is neither async nor defer
+    // See https://github.com/vikejs/vike/pull/1271
     const id = 'vike_pageContext';
     const elem = document.getElementById(id);
-    assertUsage(elem, `The element #${id} (which Vike automatically injects into the HTML) is missing from the DOM. This may happen if your HTML is malformed. Make sure your HTML isn't malformed, and make sure you don't remove #${id} from the HTML nor from the DOM.`);
+    assertUsage(elem, 
+    // It seems like it can be missing because of malformed HTML: https://github.com/vikejs/vike/issues/913
+    `Couldn't find #${id} (which Vike automatically injects in the HTML): make sure it exists (i.e. don't remove it and make sure your HTML isn't malformed)`);
     const pageContextJson = elem.textContent;
     assert(pageContextJson);
     const pageContextSerializedInHtml = parse(pageContextJson);

package/dist/esm/node/plugin/plugins/devConfig/index.js

@@ -22,22 +22,33 @@ function devConfig() {
             config() {
                 return {
                     appType: 'custom',
+                    // TODO:v1-release: remove (AFAICT we only need to use config.optimizeDeps for the old design)
                     optimizeDeps: {
                         exclude: [
-                            // We exclude the vike client to be able to use `import.meta.glob()`
+                            // We exclude Vike's client runtime to be able to use Vite's import.meta.glob()
                             'vike/client',
                             'vike/client/router',
                             'vike/routing',
-                            // - We also exclude @brillout/json-serializer and @brillout/picocolors to avoid:
-                            //   ```
-                            //   9:28:58 AM [vite] ✨ new dependencies optimized: @brillout/json-serializer/parse
-                            //   9:28:58 AM [vite] ✨ optimized dependencies changed. reloading
-                            //   ```
-                            // - Previously, we had to exclude @brillout/json-serializer and @brillout/picocolors because of pnpm, but this doesn't seem to be the case anymore.
-                            //   - Actually, this should be still the case? How can Vite resolve @brillout/json-serializer when using pnpm?
+                            // We exclude @brillout/json-serializer and @brillout/picocolors to avoid:
+                            // ```
+                            // 9:28:58 AM [vite] ✨ new dependencies optimized: @brillout/json-serializer/parse
+                            // 9:28:58 AM [vite] ✨ optimized dependencies changed. reloading
+                            // ```
                             '@brillout/json-serializer/parse',
                             '@brillout/json-serializer/stringify',
-                            '@brillout/picocolors'
+                            '@brillout/picocolors',
+                            // We exclude all packages that depend on any optimizeDeps.exclude entry because, otherwise, the entry cannot be resolved when using pnpm. For example:
+                            // ```
+                            // Failed to resolve import "@brillout/json-serializer/parse" from "../../packages/vike-react-query/dist/renderer/VikeReactQueryWrapper.js". Does the file exist?
+                            // 343|  // ../../node_modules/.pnpm/react-streaming@0.3.16_react-dom@18.2.0_react@18.2.0/node_modules/react-streaming/dist/esm/client/useAsync.js
+                            // 344|  import { parse as parse2 } from "@brillout/json-serializer/parse";
+                            // ```
+                            // The source map is confusing, the import actually lives at node_modules/.vite/deps/vike-react-query_renderer_VikeReactQueryWrapper.js which contains:
+                            // ```js
+                            // // ../../node_modules/.pnpm/react-streaming@0.3.16_react-dom@18.2.0_react@18.2.0/node_modules/react-streaming/dist/esm/client/useAsync.js
+                            // import { parse as parse2 } from "@brillout/json-serializer/parse";
+                            // ```
+                            'react-streaming'
                         ]
                     }
                 };

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

@@ -50,18 +50,8 @@ async function crawlPlusFiles(userRootDir, outDirAbsoluteFilesystem, isDev) {
 }
 // Same as fastGlob() but using `$ git ls-files`
 async function gitLsFiles(userRootDir, outDirRelativeFromUserRootDir) {
-    // Test whether Git is installed and whether userRootDir is inside a Git repository
-    {
-        let stdout;
-        try {
-            const res = await execA('git rev-parse --is-inside-work-tree', { cwd: userRootDir });
-            stdout = res.stdout;
-        }
-        catch {
-            return null;
-        }
-        assert(stdout.trim() === 'true');
-    }
+    if (!(await isUsingGit(userRootDir)))
+        return null;
     const cmd = [
         'git ls-files',
         ...scriptFileExtensionList.map((ext) => `"**/+*.${ext}"`),
@@ -70,20 +60,13 @@ async function gitLsFiles(userRootDir, outDirRelativeFromUserRootDir) {
         // --cached adds the tracked files to the output
         '--others --cached --exclude-standard'
     ].join(' ');
-    let stdout;
-    try {
-        const res = await execA(cmd, { cwd: userRootDir });
-        stdout = res.stdout;
-    }
-    catch (err) {
-        if (err.message.includes('not a git repository'))
-            return null;
-        throw err;
-    }
-    let files = stdout.split('\n').filter(Boolean);
+    let files = await runCmd(cmd, userRootDir);
     files = files.filter(
     // 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.)
     (file) => getIgnoreFilter(file, outDirRelativeFromUserRootDir));
+    // Remove tracked but deleted files
+    const filesIgnore = await runCmd('git ls-files --deleted', userRootDir);
+    files = files.filter((file) => !filesIgnore.includes(file));
     return files;
 }
 // Same as gitLsFiles() but using fast-glob
@@ -120,3 +103,22 @@ function getIgnoreFilter(file, outDirRelativeFromUserRootDir) {
         !file.includes('.telefunc.') &&
         (!outDirRelativeFromUserRootDir || !file.startsWith(`${outDirRelativeFromUserRootDir}/`)));
 }
+// Whether Git is installed and whether userRootDir is inside a Git repository
+async function isUsingGit(userRootDir) {
+    let res;
+    try {
+        res = await execA('git rev-parse --is-inside-work-tree', { cwd: userRootDir });
+    }
+    catch {
+        return false;
+    }
+    const { stdout, stderr } = res;
+    assert(stderr.toString().trim() === '');
+    assert(stdout.toString().trim() === 'true');
+    return true;
+}
+async function runCmd(cmd, cwd) {
+    const res = await execA(cmd, { cwd });
+    assert(res.stderr === '');
+    return res.stdout.toString().trim().split('\n');
+}

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

@@ -15,6 +15,10 @@ type InjectFilterEntry = {
     src: string;
     assetType: null | PageAsset['assetType'];
     mediaType: null | PageAsset['mediaType'];
+    /** Whether src is a root in the dependency graph.
+     *  - For JavaScript this means whether src is imported by a dynamic import() statement.
+     *  - All CSS files have `isEntry: true`
+     */
     isEntry: boolean;
     inject: PreloadFilterInject;
 };

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

@@ -7,39 +7,37 @@ 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) {
     assert([true, false].includes(pageContext._isHtmlOnly));
     const isHtmlOnly = pageContext._isHtmlOnly;
-    const globalContext = getGlobalContext();
-    const { isProduction } = globalContext;
-    const injectJavaScriptDuringStream = !pageContext._pageContextPromise && !!injectToStream;
+    const { isProduction } = getGlobalContext();
     const pageAssets = await pageContext.__getPageAssets();
-    const stamp = Symbol('injectFilterEntryStamp');
-    const getInject = (asset) => {
-        if (!isProduction) {
-            return 'HTML_BEGIN';
-        }
-        if (asset.assetType === 'style' || asset.assetType === 'font') {
-            return 'HTML_BEGIN';
-        }
-        if (asset.assetType === 'script') {
-            return 'HTML_END';
-        }
-        return false;
-    };
     const injectFilterEntries = pageAssets
         .filter((asset) => {
         if (asset.isEntry && asset.assetType === 'script') {
-            // We could in principle allow the user to change the position of <script> but we don't because of `getMergedScriptTag()`
-            return false;
-        }
-        if (isHtmlOnly && asset.assetType === 'script') {
+            // We could allow the user to change the position of <script> but we currently don't:
+            //  - Because of mergeScriptEntries()
+            //  - We would need to add STREAM to to PreloadFilterInject
+            // To suppor this, we should add the JavaScript entry to injectFilterEntries (with an `src` value of `null`)
             return false;
         }
         return true;
     })
         .map((asset) => {
-        const inject = getInject(asset);
+        const inject = (() => {
+            if (!isProduction) {
+                // In development, we should always load assets as soon as possible, in order to eagerly process assets (e.g. applying the transform() hooks of Vite plugins) which are lazily discovered.
+                return 'HTML_BEGIN';
+            }
+            if (asset.assetType === 'style' || asset.assetType === 'font') {
+                return 'HTML_BEGIN';
+            }
+            if (asset.assetType === 'script') {
+                return 'HTML_END';
+            }
+            return false;
+        })();
         const entry = {
             ...asset,
             inject,
@@ -48,91 +46,103 @@ async function getHtmlTags(pageContext, injectToStream, injectFilter) {
         };
         return entry;
     });
-    assertInjectFilterEntries(injectFilterEntries, stamp);
+    assertInjectFilterEntries(injectFilterEntries);
+    // ==============
+    // injectFilter()
+    // ==============
     if (injectFilter && isProduction) {
         Object.seal(injectFilterEntries); // `Object.seal()` instead of `Object.freeze()` to allow the user to `assets.sort()`
         Object.values(injectFilterEntries).forEach((entry) => freezePartial(entry, { inject: (val) => val === false || val === 'HTML_BEGIN' || val === 'HTML_END' }));
+        // Call the user's injectFilter() hook https://vike.dev/injectFilter
         const res = injectFilter(injectFilterEntries);
-        assertUsage(res === undefined, 'Wrong injectFilter() usage, see https://vike.dev/injectFilter');
-        assertInjectFilterUsage(injectFilterEntries, stamp);
-        injectFilterEntries.forEach((a) => {
-            /*
-            if (a.assetType === 'script' && a.isEntry) {
-              assertUsage(a.inject, `[injectFilter()] ${a.src} needs to be injected`)
-            }
-            */
-            if (a.assetType === 'style' && a.isEntry) {
-                // In development, Vite automatically inject styles, but we still inject `<link rel="stylesheet" type="text/css" href="${src}">` tags in order to avoid FOUC (flash of unstyled content).
-                //  - https://github.com/vitejs/vite/issues/2282
-                //  - https://github.com/vikejs/vike/issues/261
-                assertWarning(a.inject, `[injectFilter()] We recommend against not injecting ${a.src}`, {
-                    onlyOnce: true
-                });
-            }
-            if (!isHtmlOnly && a.assetType === 'script') {
-                assertWarning(a.inject, `[injectFilter()] We recommend against not preloading JavaScript (${a.src})`, {
-                    onlyOnce: true
-                });
-            }
-        });
+        assertUsage(res === undefined, `injectFilter() should return ${pc.cyan('undefined')}, see https://vike.dev/injectFilter`);
+        assertInjectFilterUsage(injectFilterEntries);
     }
     const htmlTags = [];
+    // ==============
     // Non-JavaScript
-    for (const asset of injectFilterEntries) {
-        if (asset.assetType !== 'script' && asset.inject) {
-            const htmlTag = asset.isEntry ? inferAssetTag(asset) : inferPreloadTag(asset);
-            htmlTags.push({ htmlTag, position: asset.inject });
-        }
-    }
+    // ==============
+    injectFilterEntries
+        .filter((asset) => asset.assetType !== 'script' && asset.inject)
+        .forEach((asset) => {
+        if (!asset.inject)
+            return;
+        const htmlTag = asset.isEntry ? inferAssetTag(asset) : inferPreloadTag(asset);
+        htmlTags.push({ htmlTag, position: asset.inject });
+    });
+    // ==========
     // JavaScript
-    const positionProd = injectJavaScriptDuringStream ? 'STREAM' : 'HTML_END';
-    const positionScript = !isProduction ? 'HTML_BEGIN' : positionProd;
-    const positionJsonData = !isProduction && !pageContext._pageContextPromise && !pageContext._isStream ? 'HTML_BEGIN' : positionProd;
-    const jsScript = await getMergedScriptTag(pageAssets, isProduction);
-    if (jsScript) {
+    // ==========
+    // 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
+    const positionJavaScriptEntry = (() => {
+        if (pageContext._pageContextPromise) {
+            assertWarning(!injectToStream, "[getHtmlTags()] We recommend against using streaming and a pageContext promise at the same time as partial 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/stream#initial-data-after-stream-end
+            return 'HTML_END';
+        }
+        if (injectToStream) {
+            // If there is a stream then, in order to support partial hydration, inject the JavaScript during the stream after React(/Vue/Solid/...) resolved the first suspense boundary
+            return 'STREAM';
+        }
+        else {
+            return 'HTML_END';
+        }
+    })();
+    // <script id="vike_pageContext" type="application/json">
+    if (!isHtmlOnly) {
         htmlTags.push({
-            htmlTag: jsScript,
-            position: positionScript
+            htmlTag: () => 
+            // Needs to be called after resolvePageContextPromise()
+            getPageContextJsonScriptTag(pageContext),
+            position: positionJavaScriptEntry
         });
     }
-    for (const asset of injectFilterEntries) {
-        if (asset.assetType === 'script' && asset.inject) {
-            const htmlTag = asset.isEntry ? inferAssetTag(asset) : inferPreloadTag(asset);
-            const position = asset.inject === 'HTML_END' ? positionScript : asset.inject;
-            htmlTags.push({ htmlTag, position });
-        }
-    }
-    // `pageContext` JSON data
-    if (!isHtmlOnly) {
-        // Don't allow the user to manipulate with injectFilter(): injecting <script type="application/json"> before the stream can break the app when:
-        //  - using https://vike.dev/stream#initial-data-after-stream-end
-        //  - `pageContext` is modified during the stream, e.g. https://github.com/brillout/vike-with-pinia which uses https://vuejs.org/api/composition-api-lifecycle.html#onserverprefetch
-        // The <script> tags are handled separately by vike down below.
+    // The JavaScript entry <script> tag
+    const scriptEntry = await mergeScriptEntries(pageAssets, isProduction);
+    if (scriptEntry) {
         htmlTags.push({
-            // Needs to be called after `resolvePageContextPromise()`
-            htmlTag: () => getPageContextTag(pageContext),
-            position: positionJsonData
+            htmlTag: scriptEntry,
+            position: positionJavaScriptEntry
         });
     }
+    // Preload tags
+    injectFilterEntries
+        .filter((asset) => asset.assetType === 'script')
+        .forEach((asset) => {
+        assert(!asset.isEntry); // Users cannot re-order JavaScript entries, see creation of injectFilterEntries
+        const htmlTag = inferPreloadTag(asset);
+        if (!asset.inject)
+            return;
+        // Ideally, instead of this conditional ternary operator, we should add STREAM to PreloadFilterInject (or a better fitting name such as HTML_STREAM)
+        const position = asset.inject === 'HTML_END' ? positionJavaScriptEntry : asset.inject;
+        htmlTags.push({ htmlTag, position });
+    });
     return htmlTags;
 }
-async function getMergedScriptTag(pageAssets, isProduction) {
-    const scriptAssets = pageAssets.filter((pageAsset) => pageAsset.isEntry && pageAsset.assetType === 'script');
+async function mergeScriptEntries(pageAssets, isProduction) {
+    const scriptEntries = pageAssets.filter((pageAsset) => pageAsset.isEntry && pageAsset.assetType === 'script');
     const viteScripts = await getViteDevScripts();
-    const scriptTagsHtml = `${viteScripts}${scriptAssets.map((asset) => inferAssetTag(asset)).join('')}`;
+    const scriptTagsHtml = `${viteScripts}${scriptEntries.map((asset) => inferAssetTag(asset)).join('')}`;
     const scriptTag = mergeScriptTags(scriptTagsHtml, isProduction);
     return scriptTag;
 }
-function getPageContextTag(pageContext) {
+function getPageContextJsonScriptTag(pageContext) {
     const pageContextSerialized = sanitizeJson(serializePageContextClientSide(pageContext));
     const htmlTag = `<script id="vike_pageContext" type="application/json">${pageContextSerialized}</script>`;
     // @ts-expect-error
     pageContext._pageContextHtmlTag = htmlTag;
     return htmlTag;
 }
-function assertInjectFilterEntries(injectFilterEntries, stamp) {
+function assertInjectFilterEntries(injectFilterEntries) {
     try {
-        assertInjectFilterUsage(injectFilterEntries, stamp);
+        checkForWrongUsage(injectFilterEntries);
     }
     catch (err) {
         if (err?.message.includes('[Wrong Usage]')) {
@@ -141,7 +151,11 @@ function assertInjectFilterEntries(injectFilterEntries, stamp) {
         throw err;
     }
 }
-function assertInjectFilterUsage(injectFilterEntries, stamp) {
+function assertInjectFilterUsage(injectFilterEntries) {
+    checkForWrongUsage(injectFilterEntries);
+    checkForWarnings(injectFilterEntries);
+}
+function checkForWrongUsage(injectFilterEntries) {
     injectFilterEntries.forEach((entry, i) => {
         assertUsage(isObject(entry), `[injectFilter()] Entry ${i} isn't an object`);
         assertUsage(typeof entry.src === 'string', `[injectFilter()] Entry ${i} is missing property ${pc.cyan('src')}`);
@@ -150,6 +164,28 @@ function assertInjectFilterUsage(injectFilterEntries, stamp) {
         assert(entry.assetType === null || typeof entry.assetType === 'string');
         assert(entry.mediaType === null || typeof entry.mediaType === 'string');
         assert(typeof entry.isEntry === 'boolean');
-        assert(Object.keys(entry).length === 5);
+        assert(Object.keys(entry).length === 6);
+    });
+}
+function checkForWarnings(injectFilterEntries) {
+    injectFilterEntries.forEach((a) => {
+        /*
+        if (a.assetType === 'script' && a.isEntry) {
+          assertUsage(a.inject, `[injectFilter()] ${a.src} needs to be injected`)
+        }
+        */
+        if (a.assetType === 'style' && a.isEntry) {
+            // In development, Vite automatically inject styles, but we still inject `<link rel="stylesheet" type="text/css" href="${src}">` tags in order to avoid FOUC (flash of unstyled content).
+            //  - https://github.com/vitejs/vite/issues/2282
+            //  - https://github.com/vikejs/vike/issues/261
+            assertWarning(a.inject, `[injectFilter()] We recommend against not injecting ${a.src}`, {
+                onlyOnce: true
+            });
+        }
+        if (a.assetType === 'script') {
+            assertWarning(a.inject, `[injectFilter()] We recommend against not preloading JavaScript (${a.src})`, {
+                onlyOnce: true
+            });
+        }
     });
 }

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

@@ -1,7 +1,9 @@
 export { inferAssetTag };
 export { inferPreloadTag };
 export { inferEarlyHintLink };
+export { scriptAttrs };
 import type { PageAsset } from '../../renderPage/getPageAssets.js';
+declare const scriptAttrs = "type=\"module\" async";
 declare function inferPreloadTag(pageAsset: PageAsset): string;
 declare function inferAssetTag(pageAsset: PageAsset): string;
 declare function inferEarlyHintLink(pageAsset: PageAsset): string;

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

@@ -1,7 +1,10 @@
 export { inferAssetTag };
 export { inferPreloadTag };
 export { inferEarlyHintLink };
+export { scriptAttrs };
 import { assert } from '../../utils.js';
+// We can't use `defer` here. With `defer`, the entry script won't start before `</body>` has been parsed, preventing partial hydration during SSR streaming, see https://github.com/vikejs/vike/pull/1271
+const scriptAttrs = 'type="module" async';
 function inferPreloadTag(pageAsset) {
     const { src, assetType, mediaType } = pageAsset;
     const rel = getRel(pageAsset);
@@ -21,10 +24,7 @@ function inferAssetTag(pageAsset) {
     const { src, assetType, mediaType } = pageAsset;
     if (assetType === 'script') {
         assert(mediaType === 'text/javascript');
-        // Using <script async> seems problematic:
-        //  - in dev: https://github.com/vikejs/vike/issues/524
-        //  - in prod: https://github.com/vikejs/vike/issues/567
-        return `<script type="module" src="${src}" defer></script>`;
+        return `<script src="${src}" ${scriptAttrs}></script>`;
     }
     if (assetType === 'style') {
         return `<link rel="stylesheet" type="text/css" href="${src}">`;

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

@@ -1,5 +1,6 @@
 export { mergeScriptTags };
 import { assert } from '../../utils.js';
+import { scriptAttrs } from './inferHtmlTags.js';
 const scriptRE = /(<script\b(?:\s[^>]*>|>))(.*?)<\/script>/gims;
 const srcRE = /\bsrc\s*=\s*(?:"([^"]+)"|'([^']+)'|([^\s'">]+))/im;
 const typeRE = /\btype\s*=\s*(?:"([^"]+)"|'([^']+)'|([^\s'">]+))/im;
@@ -32,7 +33,7 @@ function mergeScriptTags(scriptTagsHtml, isProduction) {
                 }
             });
             if (contents.length > 0) {
-                scriptTag += `<script type="module" defer>\n${contents.join('\n')}\n</script>`;
+                scriptTag += `<script ${scriptAttrs}>\n${contents.join('\n')}\n</script>`;
             }
         }
     }

package/dist/esm/node/runtime/renderPage/getPageAssets/retrieveAssetsProd.js

@@ -12,8 +12,7 @@ function retrieveAssetsProd(clientDependencies, clientManifest, includeAssetsImp
         if (onlyAssets) {
             if (!includeAssetsImportedByServer)
                 return;
-            // We assume that all npm packages have already built their Vike page files.
-            //  - Bundlers (Rollup, esbuild, tsup, ...) extract the CSS out of JavaScript => we can assume JavaScript to not import any CSS/assets
+            // We assume that all npm packages have already built their files: bundlers (Rollup, esbuild, tsup, ...) extract the CSS out of JavaScript => we can assume JavaScript to not import any CSS/assets.
             if (isNpmPackageImport(id))
                 return;
             if (id.includes('.page.server.')) {
@@ -49,7 +48,7 @@ function collectAssets(manifestKey, assetUrls, visistedAssets, manifest, onlyCol
         assetUrls.add(`/${asset}`);
     }
 }
-// Support `config.build.cssCodeSplit: false`, https://github.com/vikejs/vike/issues/644
+// Support `config.build.cssCodeSplit: false`, see https://github.com/vikejs/vike/issues/644
 function collectSingleStyle(assetUrls, manifest) {
     const style = manifest['style.css'];
     if (style && Object.values(manifest).filter((asset) => asset.file.endsWith('.css')).length === 1) {

package/dist/esm/node/runtime/renderPage/getPageAssets/sortPageAssetsForEarlyHintsHeader.js

@@ -20,6 +20,12 @@ function sortPageAssetsForEarlyHintsHeader(pageAssets) {
         if (assetType === 'image')
             return priority;
         priority--;
+        if (assetType === 'video')
+            return priority;
+        priority--;
+        if (assetType === 'audio')
+            return priority;
+        priority--;
         // Others
         if (assetType !== 'script')
             return priority;

package/dist/esm/node/runtime/renderPage/inferMediaType.d.ts

@@ -1,7 +1,7 @@
 export { inferMediaType };
 export type { MediaType };
 type MediaType = null | {
-    assetType: 'image' | 'script' | 'font' | 'style';
-    mediaType: 'text/javascript' | 'text/css' | 'image/jpeg' | 'image/png' | 'image/webp' | 'image/gif' | 'image/svg+xml' | 'font/ttf' | 'font/woff' | 'font/woff2';
+    assetType: 'image' | 'script' | 'font' | 'style' | 'audio' | 'video' | 'document' | 'fetch' | 'track' | 'worker' | 'embed' | 'object';
+    mediaType: 'text/javascript' | 'text/css' | 'image/jpeg' | 'image/png' | 'image/webp' | 'image/gif' | 'image/svg+xml' | 'font/ttf' | 'font/woff' | 'font/woff2' | 'video/mp4' | 'video/webm' | 'video/ogg' | 'video/mpeg' | 'video/x-msvideo' | 'video/quicktime' | 'audio/mpeg' | 'audio/wav' | 'audio/ogg' | 'audio/aac' | 'audio/midi' | 'audio/flac';
 };
 declare function inferMediaType(href: string): MediaType;

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

@@ -34,5 +34,43 @@ function inferMediaType(href) {
     if (href.endsWith('.woff2')) {
         return { assetType: 'font', mediaType: 'font/woff2' };
     }
+    // Videos
+    if (href.endsWith('.mp4')) {
+        return { assetType: 'video', mediaType: 'video/mp4' };
+    }
+    if (href.endsWith('.webm')) {
+        return { assetType: 'video', mediaType: 'video/webm' };
+    }
+    if (href.endsWith('.ogv')) {
+        return { assetType: 'video', mediaType: 'video/ogg' };
+    }
+    if (href.endsWith('.mpeg') || href.endsWith('.mpg')) {
+        return { assetType: 'video', mediaType: 'video/mpeg' };
+    }
+    if (href.endsWith('.avi')) {
+        return { assetType: 'video', mediaType: 'video/x-msvideo' };
+    }
+    if (href.endsWith('.mov') || href.endsWith('.qt')) {
+        return { assetType: 'video', mediaType: 'video/quicktime' };
+    }
+    // Audios
+    if (href.endsWith('.mp3')) {
+        return { assetType: 'audio', mediaType: 'audio/mpeg' };
+    }
+    if (href.endsWith('.wav')) {
+        return { assetType: 'audio', mediaType: 'audio/wav' };
+    }
+    if (href.endsWith('.ogg')) {
+        return { assetType: 'audio', mediaType: 'audio/ogg' };
+    }
+    if (href.endsWith('.m4a')) {
+        return { assetType: 'audio', mediaType: 'audio/aac' };
+    }
+    if (href.endsWith('midi') || href.endsWith('.mid')) {
+        return { assetType: 'audio', mediaType: 'audio/midi' };
+    }
+    if (href.endsWith('.flac')) {
+        return { assetType: 'audio', mediaType: 'audio/flac' };
+    }
     return null;
 }

package/dist/esm/shared/page-configs/assertExports.js

@@ -28,13 +28,20 @@ function assertExports(fileExports, filePathToShowToUser, configName) {
         if (exportsRelevant.length === 1) {
             return;
         }
-        else {
-            assert(exportsRelevant.length === 0);
-            let errMsg = `${filePathToShowToUser} doesn't export any value, but it should have a ${pc.cyan('export default')}`;
+        const exportDefault = pc.cyan('export default');
+        const exportConfigName = pc.cyan(`export { ${configName} }`);
+        if (exportsRelevant.length === 0) {
+            let errMsg = `${filePathToShowToUser} doesn't export any value, but it should have a ${exportDefault}`;
             if (configName)
-                errMsg += ` or ${pc.cyan(`export { ${configName} }`)}`;
+                errMsg += ` or ${exportConfigName}`;
             assertUsage(false, errMsg);
         }
+        else {
+            assert(exportsRelevant.length === 2);
+            assertWarning(false, `${filePathToShowToUser} remove ${exportConfigName} or ${exportDefault}`, {
+                onlyOnce: true
+            });
+        }
     }
     else {
         // !configName => isConfigFile

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

@@ -1,13 +1,13 @@
 export { projectInfo };
 export type { ProjectTag };
 export { PROJECT_VERSION };
-declare const PROJECT_VERSION: "0.4.148-commit-70e7518";
+declare const PROJECT_VERSION: "0.4.149-commit-041ee42";
 type PackageName = typeof projectInfo.npmPackageName;
 type ProjectVersion = typeof projectInfo.projectVersion;
 type ProjectTag = `[${PackageName}]` | `[${PackageName}@${ProjectVersion}]`;
 declare const projectInfo: {
     projectName: "Vike";
-    projectVersion: "0.4.148-commit-70e7518";
+    projectVersion: "0.4.149-commit-041ee42";
     npmPackageName: "vike";
     githubRepository: "https://github.com/vikejs/vike";
 };

package/dist/esm/utils/projectInfo.js

@@ -1,7 +1,7 @@
 export { projectInfo };
 export { PROJECT_VERSION };
 import { onProjectInfo } from './assertSingleInstance.js';
-const PROJECT_VERSION = '0.4.148-commit-70e7518';
+const PROJECT_VERSION = '0.4.149-commit-041ee42';
 const projectInfo = {
     projectName: 'Vike',
     projectVersion: PROJECT_VERSION,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vike",
-  "version": "0.4.148-commit-70e7518",
+  "version": "0.4.149-commit-041ee42",
   "scripts": {
     "dev": "tsc --watch",
     "build": "rimraf dist/ && pnpm run build:esm && pnpm run build:cjs",
@@ -162,7 +162,7 @@
     "vike": "./node/cli/bin-entry.js"
   },
   "devDependencies": {
-    "@brillout/release-me": "^0.1.10",
+    "@brillout/release-me": "^0.1.11",
     "@types/estree": "^1.0.0",
     "@types/jest": "^27.4.1",
     "@types/node": "^20.1.0",