vike 0.4.159-commit-6bcb2fd → 0.4.159-commit-0424983

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

@@ -9,7 +9,7 @@ const path_1 = __importDefault(require("path"));
 const configDefinitionsBuiltIn_js_1 = require("./getVikeConfig/configDefinitionsBuiltIn.js");
 const filesystemRouting_js_1 = require("./getVikeConfig/filesystemRouting.js");
 const transpileAndExecuteFile_js_1 = require("./transpileAndExecuteFile.js");
-const replaceImportStatements_js_1 = require("./replaceImportStatements.js");
+const transformImports_js_1 = require("./transformImports.js");
 const isConfigInvalid_js_1 = require("../../../../runtime/renderPage/isConfigInvalid.js");
 const globalContext_js_1 = require("../../../../runtime/globalContext.js");
 const loggerNotProd_js_1 = require("../../../shared/loggerNotProd.js");
@@ -90,7 +90,7 @@ async function loadInterfaceFiles(userRootDir, outDirRoot, isDev, extensions) {
     let interfaceFilesByLocationId = {};
     // Config files
     await Promise.all(configFiles.map(async (filePath) => {
-        const { configFile, extendsConfigs } = await loadConfigFile(filePath, userRootDir, []);
+        const { configFile, extendsConfigs } = await loadConfigFile(filePath, userRootDir, [], false);
         const interfaceFile = getInterfaceFileFromConfigFile(configFile, false);
         const locationId = (0, filesystemRouting_js_1.getLocationId)(filePath.filePathAbsoluteVite);
         interfaceFilesByLocationId[locationId] = interfaceFilesByLocationId[locationId] ?? [];
@@ -582,7 +582,7 @@ function isDefiningPageConfig(configName) {
 function resolveImport(configValue, importerFilePath, userRootDir, configEnv, configName) {
     if (typeof configValue !== 'string')
         return null;
-    const importData = (0, replaceImportStatements_js_1.parseImportData)(configValue);
+    const importData = (0, transformImports_js_1.parseImportData)(configValue);
     if (!importData)
         return null;
     const { importPath, exportName } = importData;
@@ -845,10 +845,10 @@ function getConfigName(filePath) {
         return configName;
     }
 }
-async function loadConfigFile(configFilePath, userRootDir, visited) {
+async function loadConfigFile(configFilePath, userRootDir, visited, isConfigOfExtension) {
     const { filePathAbsoluteFilesystem } = configFilePath;
     assertNoInfiniteLoop(visited, filePathAbsoluteFilesystem);
-    const { fileExports } = await (0, transpileAndExecuteFile_js_1.transpileAndExecuteFile)(configFilePath, false, userRootDir);
+    const { fileExports } = await (0, transpileAndExecuteFile_js_1.transpileAndExecuteFile)(configFilePath, false, userRootDir, isConfigOfExtension);
     const { extendsConfigs, extendsFilePaths } = await loadExtendsConfigs(fileExports, configFilePath, userRootDir, [
         ...visited,
         filePathAbsoluteFilesystem
@@ -890,7 +890,7 @@ async function loadExtendsConfigs(configFileExports, configFilePath, userRootDir
     });
     const extendsConfigs = [];
     await Promise.all(extendsConfigFiles.map(async (configFilePath) => {
-        const result = await loadConfigFile(configFilePath, userRootDir, visited);
+        const result = await loadConfigFile(configFilePath, userRootDir, visited, true);
         extendsConfigs.push(result.configFile);
         extendsConfigs.push(...result.extendsConfigs);
     }));
@@ -941,7 +941,7 @@ function getExtendsImportData(configFileExports, configFilePath) {
         (0, utils_js_1.assertUsage)(false, wrongUsage);
     }
     const extendsImportData = extendList.map((importDataSerialized) => {
-        const importData = (0, replaceImportStatements_js_1.parseImportData)(importDataSerialized);
+        const importData = (0, transformImports_js_1.parseImportData)(importDataSerialized);
         (0, utils_js_1.assertUsage)(importData, wrongUsage);
         return importData;
     });

package/dist/cjs/node/plugin/plugins/importUserCode/v1-design/{replaceImportStatements.js → transformImports.js}

@@ -3,22 +3,51 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isImportData = exports.parseImportData = exports.replaceImportStatements = void 0;
+exports.isImportData = exports.parseImportData = exports.transformImports = void 0;
 // Playground: https://github.com/brillout/acorn-playground
+// Import attributes support: https://github.com/acornjs/acorn/issues/983
+//  - Isn't stage 4 yet: https://github.com/tc39/proposal-import-attributes
 const acorn_1 = require("acorn");
 const utils_js_1 = require("../../../utils.js");
 const picocolors_1 = __importDefault(require("@brillout/picocolors"));
-function replaceImportStatements(code, filePathToShowToUser) {
+function transformImports(code, filePathToShowToUser2, 
+// For ./transformImports.spec.ts
+skipWarnings) {
     const spliceOperations = [];
-    const fileImports = [];
+    const fileImportsTransformed = [];
+    // Performance trick
+    if (!code.includes('import'))
+        return { noTransformation: true };
     const imports = getImports(code);
     if (imports.length === 0)
-        return { noImportStatement: true };
+        return { noTransformation: true };
     imports.forEach((node) => {
         if (node.type !== 'ImportDeclaration')
             return;
         const importPath = node.source.value;
         (0, utils_js_1.assert)(typeof importPath === 'string');
+        // - This doesn't work, to make it work we would need to run esbuild twice: esbuild for TypeScript to JavaScript => transformImports() => esbuild for bundling.
+        //   - Or we use an esbuild plugin to apply transformImports(). Maybe we can completely skip the need for acorn?
+        // - ?real breaks TypeScript, and TypeScript isn't working on supporting query params: https://github.com/microsoft/TypeScript/issues/10988#issuecomment-867135453
+        // - Import attributes would be the best.
+        //   - But it only works with Node.js >=21: https://nodejs.org/api/esm.html#import-attributes
+        //     - But it's probably ok to tell users "to use real imports you need Node.js 21 or above".
+        //   - It seems to work well with the latest TypeScript versions: TypeScript doesn't complain upon `with { type: 'unknown-to-typescript' }` and go-to-definition & types are preserved.
+        //   - Esbuid seems to support it: https://esbuild.github.io/plugins/#on-load-arguments:~:text=This%20contains%20a%20map%20of%20the%20import%20attributes%20that
+        //   - acorn supports it over an acorn plugin: https://github.com/acornjs/acorn/issues/983
+        //     - Maybe we can use an esbuild plugin instead of acorn to apply transformImports()?
+        // - Using a magic comment `// @vike-real-import` is tricky:
+        //   - Esbuild removes comments: https://github.com/evanw/esbuild/issues/1439#issuecomment-877656182
+        //   - Using source maps to track these magic comments is brittle (source maps can easily break)
+        if (importPath.endsWith('?real')) {
+            const { start, end } = node.source;
+            spliceOperations.push({
+                start,
+                end,
+                replacement: importPath.slice(0, -1 * '?real'.length)
+            });
+            return;
+        }
         const { start, end } = node;
         const importStatementCode = code.slice(start, end);
         // No variable imported
@@ -32,13 +61,15 @@ function replaceImportStatements(code, filePathToShowToUser) {
                 quote = picocolors_1.default.bold(picocolors_1.default.red(quote));
             }
             const errMsg = [
-                `As explained in https://vike.dev/header-file the following import in ${filePathToShowToUser} has no effect:`,
+                `As explained in https://vike.dev/header-file the following import in ${filePathToShowToUser2} has no effect:`,
                 quote
             ].join('\n');
-            if (!isWarning) {
-                (0, utils_js_1.assertUsage)(false, errMsg);
+            if (!skipWarnings) {
+                if (!isWarning) {
+                    (0, utils_js_1.assertUsage)(false, errMsg);
+                }
+                (0, utils_js_1.assertWarning)(false, errMsg, { onlyOnce: true });
             }
-            (0, utils_js_1.assertWarning)(false, errMsg, { onlyOnce: true });
         }
         let replacement = '';
         node.specifiers.forEach((specifier) => {
@@ -60,7 +91,7 @@ function replaceImportStatements(code, filePathToShowToUser) {
             })();
             const importString = serializeImportData({ importPath, exportName, importStringWasGenerated: true });
             replacement += `const ${importLocalName} = '${importString}';`;
-            fileImports.push({
+            fileImportsTransformed.push({
                 importStatementCode,
                 importString,
                 importLocalName
@@ -73,9 +104,9 @@ function replaceImportStatements(code, filePathToShowToUser) {
         });
     });
     const codeMod = spliceMany(code, spliceOperations);
-    return { code: codeMod, fileImports, noImportStatement: false };
+    return { code: codeMod, fileImportsTransformed, noTransformation: false };
 }
-exports.replaceImportStatements = replaceImportStatements;
+exports.transformImports = transformImports;
 function getImports(code) {
     const { body } = (0, acorn_1.parse)(code, {
         ecmaVersion: 'latest',
@@ -143,7 +174,7 @@ function spliceMany(str, operations) {
                     .join('');
         endPrev = end;
     });
-    strMod += str.slice(endPrev, str.length - 1);
+    strMod += str.slice(endPrev, str.length);
     return strMod;
 }
 function indent(str) {

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

@@ -10,57 +10,66 @@ const path_1 = __importDefault(require("path"));
 const picocolors_1 = __importDefault(require("@brillout/picocolors"));
 const import_1 = require("@brillout/import");
 const utils_js_1 = require("../../../utils.js");
-const replaceImportStatements_js_1 = require("./replaceImportStatements.js");
+const transformImports_js_1 = require("./transformImports.js");
 const getVikeConfig_js_1 = require("./getVikeConfig.js");
 require("source-map-support/register.js");
 const getConfigFileExport_js_1 = require("./getConfigFileExport.js");
 (0, utils_js_1.assertIsNotProductionRuntime)();
-async function transpileAndExecuteFile(filePath, isValueFile, userRootDir) {
-    const { code, fileImports } = await transpileFile(filePath, isValueFile, userRootDir);
-    const { fileExports } = await executeFile(filePath, code, fileImports, isValueFile);
+async function transpileAndExecuteFile(filePath, isValueFile, userRootDir, isConfigOfExtension = false) {
+    const { code, fileImportsTransformed } = await transpileFile(filePath, isValueFile, userRootDir, isConfigOfExtension);
+    const { fileExports } = await executeFile(filePath, code, fileImportsTransformed, isValueFile);
     return { fileExports };
 }
 exports.transpileAndExecuteFile = transpileAndExecuteFile;
-async function transpileFile(filePath, isValueFile, userRootDir) {
+async function transpileFile(filePath, isValueFile, userRootDir, isConfigOfExtension) {
     const { filePathAbsoluteFilesystem } = filePath;
+    const filePathToShowToUser2 = getFilePathToShowToUser2(filePath);
     (0, utils_js_1.assertPosixPath)(filePathAbsoluteFilesystem);
     getVikeConfig_js_1.vikeConfigDependencies.add(filePathAbsoluteFilesystem);
-    let code = await transpileWithEsbuild(filePath, isValueFile, userRootDir);
-    let fileImports = null;
-    {
-        const res = transpileImports(code, filePath, isValueFile);
+    const importsAreTransformed = !isConfigOfExtension && !isValueFile;
+    let code = await transpileWithEsbuild(filePath, userRootDir, importsAreTransformed, isValueFile);
+    let fileImportsTransformed = null;
+    if (importsAreTransformed) {
+        const res = transformImports_(code, filePath);
         if (res) {
             code = res.code;
-            fileImports = res.fileImports;
+            fileImportsTransformed = res.fileImportsTransformed;
         }
     }
-    return { code, fileImports };
-}
-function transpileImports(codeOriginal, filePath, isValueFile) {
-    // Do we need to remove the imports?
-    const { filePathAbsoluteFilesystem, filePathToShowToUser } = filePath;
-    (0, utils_js_1.assertPosixPath)(filePathAbsoluteFilesystem);
-    const isHeader = isHeaderFile(filePathAbsoluteFilesystem);
-    const isPageConfigFile = !isValueFile;
-    if (!isHeader && !isPageConfigFile) {
-        return null;
+    else {
+        if (isHeaderFile(filePathAbsoluteFilesystem)) {
+            if (isValueFile) {
+                (0, utils_js_1.assertWarning)(false, `${filePathToShowToUser2} is a JavaScript header file (.h.js), but JavaScript header files only apply to +config.h.js, see https://vike.dev/header-file`, { onlyOnce: true });
+            }
+            else if (isConfigOfExtension) {
+                (0, utils_js_1.assertWarning)(false, `${filePathToShowToUser2} is a JavaScript header file (.h.js), but JavaScript header files don't apply to the config files of extensions`, { onlyOnce: true });
+            }
+            else {
+                (0, utils_js_1.assert)(false);
+            }
+        }
     }
-    (0, utils_js_1.assertWarning)(isPageConfigFile, `${filePathToShowToUser} is a JavaScript header file (.h.js), but JavaScript header files should only be used for +config.h.js, see https://vike.dev/header-file`, { onlyOnce: true });
-    // Remove the imports
-    const res = (0, replaceImportStatements_js_1.replaceImportStatements)(codeOriginal, filePathToShowToUser);
-    if (res.noImportStatement) {
+    return { code, fileImportsTransformed };
+}
+function transformImports_(codeOriginal, filePath) {
+    const { filePathAbsoluteFilesystem } = filePath;
+    const filePathToShowToUser2 = getFilePathToShowToUser2(filePath);
+    // Replace import statements with import strings
+    const res = (0, transformImports_js_1.transformImports)(codeOriginal, filePathToShowToUser2);
+    if (res.noTransformation) {
         return null;
     }
-    const { code, fileImports } = res;
-    if (!isHeader) {
-        const filePathCorrect = appendHeaderFileExtension(filePathToShowToUser);
-        (0, utils_js_1.assertWarning)(false, `Rename ${filePathToShowToUser} to ${filePathCorrect}, see https://vike.dev/header-file`, {
+    const { code, fileImportsTransformed } = res;
+    if (!isHeaderFile(filePathAbsoluteFilesystem)) {
+        const filePathCorrect = appendHeaderFileExtension(filePathToShowToUser2);
+        (0, utils_js_1.assertWarning)(false, `Rename ${filePathToShowToUser2} to ${filePathCorrect}, see https://vike.dev/header-file`, {
             onlyOnce: true
         });
     }
-    return { code, fileImports };
+    return { code, fileImportsTransformed };
 }
-async function transpileWithEsbuild(filePath, bundle, userRootDir) {
+async function transpileWithEsbuild(filePath, userRootDir, importsAreTransformed, isValueFile) {
+    const isConfigFile = !isValueFile;
     const entryFilePath = filePath.filePathAbsoluteFilesystem;
     const entryFileDir = path_1.default.posix.dirname(entryFilePath);
     const options = {
@@ -76,22 +85,26 @@ async function transpileWithEsbuild(filePath, bundle, userRootDir) {
         'NEVER_EMITTED.js'),
         logLevel: 'silent',
         format: 'esm',
-        bundle,
+        absWorkingDir: userRootDir,
+        // Disable tree-shaking to avoid dead-code elimination, so that unused imports aren't removed.
+        // Esbuild still sometimes removes unused imports because of TypeScript: https://github.com/evanw/esbuild/issues/3034
+        treeShaking: false,
         minify: false,
-        metafile: bundle,
-        absWorkingDir: userRootDir
+        metafile: isConfigFile,
+        // We cannot bundle imports that are meant to be transformed
+        bundle: !importsAreTransformed
     };
-    if (bundle) {
-        options.bundle = true;
+    // Track dependencies
+    if (isConfigFile) {
         options.packages = 'external';
         options.plugins = [
             {
-                name: 'vike:import-hook',
+                name: 'vike:dependency-tracker',
                 setup(b) {
                     b.onLoad({ filter: /./ }, (args) => {
+                        // We collect the dependency `args.path` in case the bulid fails (upon build error => error is thrown => no metafile)
                         let { path } = args;
                         path = (0, utils_js_1.toPosixPath)(path);
-                        // We collect the dependency args.path in case it fails to build (upon build error => error is thrown => no metafile)
                         getVikeConfig_js_1.vikeConfigDependencies.add(path);
                         return undefined;
                     });
@@ -108,11 +121,6 @@ async function transpileWithEsbuild(filePath, bundle, userRootDir) {
             }
         ];
     }
-    else {
-        // Avoid dead-code elimination to ensure unused imports aren't removed.
-        // Esbuild still sometimes removes unused imports because of TypeScript: https://github.com/evanw/esbuild/issues/3034
-        options.treeShaking = false;
-    }
     let result;
     try {
         result = await (0, esbuild_1.build)(options);
@@ -121,7 +129,8 @@ async function transpileWithEsbuild(filePath, bundle, userRootDir) {
         await formatBuildErr(err, filePath);
         throw err;
     }
-    if (bundle) {
+    // Track dependencies
+    if (isConfigFile) {
         (0, utils_js_1.assert)(result.metafile);
         Object.keys(result.metafile.inputs).forEach((filePathRelative) => {
             filePathRelative = (0, utils_js_1.toPosixPath)(filePathRelative);
@@ -134,7 +143,7 @@ async function transpileWithEsbuild(filePath, bundle, userRootDir) {
     (0, utils_js_1.assert)(typeof code === 'string');
     return code;
 }
-async function executeFile(filePath, code, fileImports, isValueFile) {
+async function executeFile(filePath, code, fileImportsTransformed, isValueFile) {
     const { filePathAbsoluteFilesystem, filePathRelativeToUserRootDir } = filePath;
     // Alternative to using a temporary file: https://github.com/vitejs/vite/pull/13269
     //  - But seems to break source maps, so I don't think it's worth it
@@ -159,10 +168,10 @@ async function executeFile(filePath, code, fileImports, isValueFile) {
     //  - import() returns `[Module: null prototype] { default: { onRenderClient: '...' }}`
     //  - We don't need this special object
     fileExports = { ...fileExports };
-    if (fileImports && !isValueFile) {
+    if (fileImportsTransformed && !isValueFile) {
         (0, utils_js_1.assert)(filePathRelativeToUserRootDir !== undefined);
-        const filePathToShowToUser = filePathRelativeToUserRootDir ?? filePathAbsoluteFilesystem;
-        assertImportsAreReExported(fileImports, fileExports, filePathToShowToUser);
+        const filePathToShowToUser2 = getFilePathToShowToUser2(filePath);
+        assertImportsAreReExported(fileImportsTransformed, fileExports, filePathToShowToUser2);
     }
     return { fileExports };
 }
@@ -211,29 +220,29 @@ function isTmpFile(filePath) {
     return fileName.startsWith(tmpPrefix);
 }
 exports.isTmpFile = isTmpFile;
-function assertImportsAreReExported(fileImports, fileExports, filePathToShowToUser) {
-    const fileExport = (0, getConfigFileExport_js_1.getConfigFileExport)(fileExports, filePathToShowToUser);
+function assertImportsAreReExported(fileImportsTransformed, fileExports, filePathToShowToUser2) {
+    const fileExport = (0, getConfigFileExport_js_1.getConfigFileExport)(fileExports, filePathToShowToUser2);
     const exportedStrings = getExportedStrings(fileExport);
     Object.values(exportedStrings).forEach((exportVal) => {
         if (typeof exportVal !== 'string')
             return;
-        if (!(0, replaceImportStatements_js_1.isImportData)(exportVal))
+        if (!(0, transformImports_js_1.isImportData)(exportVal))
             return;
         const importString = exportVal;
-        fileImports.forEach((fileImport) => {
+        fileImportsTransformed.forEach((fileImport) => {
             if (fileImport.importString === importString) {
                 fileImport.isReExported = true;
             }
         });
     });
-    const fileImportsUnused = fileImports.filter((fi) => !fi.isReExported);
-    if (fileImportsUnused.length === 0)
+    const fileImportsTransformedUnused = fileImportsTransformed.filter((fi) => !fi.isReExported);
+    if (fileImportsTransformedUnused.length === 0)
         return;
-    const importStatements = (0, utils_js_1.unique)(fileImportsUnused.map((fi) => fi.importStatementCode));
-    const importNamesUnused = fileImportsUnused.map((fi) => picocolors_1.default.cyan(fi.importLocalName)).join(', ');
-    const singular = fileImportsUnused.length === 1;
-    (0, utils_js_1.assertWarning)(fileImportsUnused.length === 0, [
-        `${filePathToShowToUser} imports the following:`,
+    const importStatements = (0, utils_js_1.unique)(fileImportsTransformedUnused.map((fi) => fi.importStatementCode));
+    const importNamesUnused = fileImportsTransformedUnused.map((fi) => picocolors_1.default.cyan(fi.importLocalName)).join(', ');
+    const singular = fileImportsTransformedUnused.length === 1;
+    (0, utils_js_1.assertWarning)(fileImportsTransformedUnused.length === 0, [
+        `${filePathToShowToUser2} imports the following:`,
         ...importStatements.map((s) => picocolors_1.default.cyan(`  ${s}`)),
         `But the import${singular ? '' : 's'} ${importNamesUnused} ${singular ? "isn't" : "aren't"} re-exported at ${picocolors_1.default.cyan('export default { ... }')} and therefore ${singular ? 'has' : 'have'} no effect, see explanation at https://vike.dev/header-file`
     ].join('\n'), { onlyOnce: true });
@@ -255,6 +264,7 @@ function getExportedStrings(obj) {
     return exportedStrings;
 }
 function isHeaderFile(filePath) {
+    (0, utils_js_1.assertPosixPath)(filePath);
     const basenameParts = path_1.default.posix.basename(filePath).split('.');
     return basenameParts.includes('h');
 }
@@ -275,10 +285,19 @@ function triggerPrepareStackTrace(err) {
     }
 }
 function getErrIntroMsg(operation, filePath) {
+    const filePathToShowToUser2 = getFilePathToShowToUser2(filePath);
     const msg = [
+        // prettier ignore
         picocolors_1.default.red(`Failed to ${operation}`),
-        picocolors_1.default.bold(picocolors_1.default.red(filePath.filePathToShowToUser)),
+        picocolors_1.default.bold(picocolors_1.default.red(filePathToShowToUser2)),
         picocolors_1.default.red(`because:`)
     ].join(' ');
     return msg;
 }
+/** `filePath.filePathToShowToUser` may show the import path of a package, use `filePathToShowToUser2` instead always show a file path instead. */
+function getFilePathToShowToUser2(filePath) {
+    const { filePathAbsoluteFilesystem, filePathRelativeToUserRootDir } = filePath;
+    const filePathToShowToUser2 = filePathRelativeToUserRootDir || filePathAbsoluteFilesystem;
+    (0, utils_js_1.assert)(filePathToShowToUser2);
+    return filePathToShowToUser2;
+}

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.159-commit-6bcb2fd';
+const PROJECT_VERSION = '0.4.159-commit-0424983';
 exports.PROJECT_VERSION = PROJECT_VERSION;
 const projectInfo = {
     projectName: 'Vike',

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

@@ -7,7 +7,7 @@ import path from 'path';
 import { configDefinitionsBuiltIn, configDefinitionsBuiltInGlobal } from './getVikeConfig/configDefinitionsBuiltIn.js';
 import { getLocationId, getFilesystemRouteString, getFilesystemRouteDefinedBy, isInherited, sortAfterInheritanceOrder, isGlobalLocation, applyFilesystemRoutingRootEffect } from './getVikeConfig/filesystemRouting.js';
 import { isTmpFile, transpileAndExecuteFile } from './transpileAndExecuteFile.js';
-import { parseImportData } from './replaceImportStatements.js';
+import { parseImportData } from './transformImports.js';
 import { isConfigInvalid, isConfigInvalid_set } from '../../../../runtime/renderPage/isConfigInvalid.js';
 import { getViteDevServer } from '../../../../runtime/globalContext.js';
 import { logConfigError, logConfigErrorRecover } from '../../../shared/loggerNotProd.js';
@@ -85,7 +85,7 @@ async function loadInterfaceFiles(userRootDir, outDirRoot, isDev, extensions) {
     let interfaceFilesByLocationId = {};
     // Config files
     await Promise.all(configFiles.map(async (filePath) => {
-        const { configFile, extendsConfigs } = await loadConfigFile(filePath, userRootDir, []);
+        const { configFile, extendsConfigs } = await loadConfigFile(filePath, userRootDir, [], false);
         const interfaceFile = getInterfaceFileFromConfigFile(configFile, false);
         const locationId = getLocationId(filePath.filePathAbsoluteVite);
         interfaceFilesByLocationId[locationId] = interfaceFilesByLocationId[locationId] ?? [];
@@ -840,10 +840,10 @@ function getConfigName(filePath) {
         return configName;
     }
 }
-async function loadConfigFile(configFilePath, userRootDir, visited) {
+async function loadConfigFile(configFilePath, userRootDir, visited, isConfigOfExtension) {
     const { filePathAbsoluteFilesystem } = configFilePath;
     assertNoInfiniteLoop(visited, filePathAbsoluteFilesystem);
-    const { fileExports } = await transpileAndExecuteFile(configFilePath, false, userRootDir);
+    const { fileExports } = await transpileAndExecuteFile(configFilePath, false, userRootDir, isConfigOfExtension);
     const { extendsConfigs, extendsFilePaths } = await loadExtendsConfigs(fileExports, configFilePath, userRootDir, [
         ...visited,
         filePathAbsoluteFilesystem
@@ -885,7 +885,7 @@ async function loadExtendsConfigs(configFileExports, configFilePath, userRootDir
     });
     const extendsConfigs = [];
     await Promise.all(extendsConfigFiles.map(async (configFilePath) => {
-        const result = await loadConfigFile(configFilePath, userRootDir, visited);
+        const result = await loadConfigFile(configFilePath, userRootDir, visited, true);
         extendsConfigs.push(result.configFile);
         extendsConfigs.push(...result.extendsConfigs);
     }));

package/dist/esm/node/plugin/plugins/importUserCode/v1-design/{replaceImportStatements.d.ts → transformImports.d.ts}

@@ -1,4 +1,4 @@
-export { replaceImportStatements };
+export { transformImports };
 export { parseImportData };
 export { isImportData };
 export type { FileImport };
@@ -8,12 +8,12 @@ type FileImport = {
     importString: string;
     importLocalName: string;
 };
-declare function replaceImportStatements(code: string, filePathToShowToUser: string): {
-    noImportStatement: true;
+declare function transformImports(code: string, filePathToShowToUser2: string, skipWarnings?: true): {
+    noTransformation: true;
 } | {
-    noImportStatement: false;
+    noTransformation: false;
     code: string;
-    fileImports: FileImport[];
+    fileImportsTransformed: FileImport[];
 };
 /**
  * Data Structure holding info about import statement:

package/dist/esm/node/plugin/plugins/importUserCode/v1-design/{replaceImportStatements.js → transformImports.js}

@@ -1,21 +1,50 @@
-export { replaceImportStatements };
+export { transformImports };
 export { parseImportData };
 export { isImportData };
 // Playground: https://github.com/brillout/acorn-playground
+// Import attributes support: https://github.com/acornjs/acorn/issues/983
+//  - Isn't stage 4 yet: https://github.com/tc39/proposal-import-attributes
 import { parse } from 'acorn';
 import { assert, assertUsage, assertWarning, styleFileRE } from '../../../utils.js';
 import pc from '@brillout/picocolors';
-function replaceImportStatements(code, filePathToShowToUser) {
+function transformImports(code, filePathToShowToUser2, 
+// For ./transformImports.spec.ts
+skipWarnings) {
     const spliceOperations = [];
-    const fileImports = [];
+    const fileImportsTransformed = [];
+    // Performance trick
+    if (!code.includes('import'))
+        return { noTransformation: true };
     const imports = getImports(code);
     if (imports.length === 0)
-        return { noImportStatement: true };
+        return { noTransformation: true };
     imports.forEach((node) => {
         if (node.type !== 'ImportDeclaration')
             return;
         const importPath = node.source.value;
         assert(typeof importPath === 'string');
+        // - This doesn't work, to make it work we would need to run esbuild twice: esbuild for TypeScript to JavaScript => transformImports() => esbuild for bundling.
+        //   - Or we use an esbuild plugin to apply transformImports(). Maybe we can completely skip the need for acorn?
+        // - ?real breaks TypeScript, and TypeScript isn't working on supporting query params: https://github.com/microsoft/TypeScript/issues/10988#issuecomment-867135453
+        // - Import attributes would be the best.
+        //   - But it only works with Node.js >=21: https://nodejs.org/api/esm.html#import-attributes
+        //     - But it's probably ok to tell users "to use real imports you need Node.js 21 or above".
+        //   - It seems to work well with the latest TypeScript versions: TypeScript doesn't complain upon `with { type: 'unknown-to-typescript' }` and go-to-definition & types are preserved.
+        //   - Esbuid seems to support it: https://esbuild.github.io/plugins/#on-load-arguments:~:text=This%20contains%20a%20map%20of%20the%20import%20attributes%20that
+        //   - acorn supports it over an acorn plugin: https://github.com/acornjs/acorn/issues/983
+        //     - Maybe we can use an esbuild plugin instead of acorn to apply transformImports()?
+        // - Using a magic comment `// @vike-real-import` is tricky:
+        //   - Esbuild removes comments: https://github.com/evanw/esbuild/issues/1439#issuecomment-877656182
+        //   - Using source maps to track these magic comments is brittle (source maps can easily break)
+        if (importPath.endsWith('?real')) {
+            const { start, end } = node.source;
+            spliceOperations.push({
+                start,
+                end,
+                replacement: importPath.slice(0, -1 * '?real'.length)
+            });
+            return;
+        }
         const { start, end } = node;
         const importStatementCode = code.slice(start, end);
         // No variable imported
@@ -29,13 +58,15 @@ function replaceImportStatements(code, filePathToShowToUser) {
                 quote = pc.bold(pc.red(quote));
             }
             const errMsg = [
-                `As explained in https://vike.dev/header-file the following import in ${filePathToShowToUser} has no effect:`,
+                `As explained in https://vike.dev/header-file the following import in ${filePathToShowToUser2} has no effect:`,
                 quote
             ].join('\n');
-            if (!isWarning) {
-                assertUsage(false, errMsg);
+            if (!skipWarnings) {
+                if (!isWarning) {
+                    assertUsage(false, errMsg);
+                }
+                assertWarning(false, errMsg, { onlyOnce: true });
             }
-            assertWarning(false, errMsg, { onlyOnce: true });
         }
         let replacement = '';
         node.specifiers.forEach((specifier) => {
@@ -57,7 +88,7 @@ function replaceImportStatements(code, filePathToShowToUser) {
             })();
             const importString = serializeImportData({ importPath, exportName, importStringWasGenerated: true });
             replacement += `const ${importLocalName} = '${importString}';`;
-            fileImports.push({
+            fileImportsTransformed.push({
                 importStatementCode,
                 importString,
                 importLocalName
@@ -70,7 +101,7 @@ function replaceImportStatements(code, filePathToShowToUser) {
         });
     });
     const codeMod = spliceMany(code, spliceOperations);
-    return { code: codeMod, fileImports, noImportStatement: false };
+    return { code: codeMod, fileImportsTransformed, noTransformation: false };
 }
 function getImports(code) {
     const { body } = parse(code, {
@@ -137,7 +168,7 @@ function spliceMany(str, operations) {
                     .join('');
         endPrev = end;
     });
-    strMod += str.slice(endPrev, str.length - 1);
+    strMod += str.slice(endPrev, str.length);
     return strMod;
 }
 function indent(str) {

package/dist/esm/node/plugin/plugins/importUserCode/v1-design/transpileAndExecuteFile.d.ts

@@ -4,7 +4,7 @@ export { getConfigExecutionErrorIntroMsg as getConfigExecutionErrorIntroMsg };
 export { isTmpFile };
 import 'source-map-support/register.js';
 import type { FilePathResolved } from '../../../../../shared/page-configs/PageConfig.js';
-declare function transpileAndExecuteFile(filePath: FilePathResolved, isValueFile: boolean, userRootDir: string): Promise<{
+declare function transpileAndExecuteFile(filePath: FilePathResolved, isValueFile: boolean, userRootDir: string, isConfigOfExtension?: boolean): Promise<{
     fileExports: Record<string, unknown>;
 }>;
 declare function getConfigBuildErrorFormatted(err: unknown): null | string;

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

@@ -8,56 +8,65 @@ import path from 'path';
 import pc from '@brillout/picocolors';
 import { import_ } from '@brillout/import';
 import { assertPosixPath, getRandomId, assertIsNotProductionRuntime, assert, unique, assertWarning, isObject, toPosixPath } from '../../../utils.js';
-import { isImportData, replaceImportStatements } from './replaceImportStatements.js';
+import { isImportData, transformImports } from './transformImports.js';
 import { vikeConfigDependencies } from './getVikeConfig.js';
 import 'source-map-support/register.js';
 import { getConfigFileExport } from './getConfigFileExport.js';
 assertIsNotProductionRuntime();
-async function transpileAndExecuteFile(filePath, isValueFile, userRootDir) {
-    const { code, fileImports } = await transpileFile(filePath, isValueFile, userRootDir);
-    const { fileExports } = await executeFile(filePath, code, fileImports, isValueFile);
+async function transpileAndExecuteFile(filePath, isValueFile, userRootDir, isConfigOfExtension = false) {
+    const { code, fileImportsTransformed } = await transpileFile(filePath, isValueFile, userRootDir, isConfigOfExtension);
+    const { fileExports } = await executeFile(filePath, code, fileImportsTransformed, isValueFile);
     return { fileExports };
 }
-async function transpileFile(filePath, isValueFile, userRootDir) {
+async function transpileFile(filePath, isValueFile, userRootDir, isConfigOfExtension) {
     const { filePathAbsoluteFilesystem } = filePath;
+    const filePathToShowToUser2 = getFilePathToShowToUser2(filePath);
     assertPosixPath(filePathAbsoluteFilesystem);
     vikeConfigDependencies.add(filePathAbsoluteFilesystem);
-    let code = await transpileWithEsbuild(filePath, isValueFile, userRootDir);
-    let fileImports = null;
-    {
-        const res = transpileImports(code, filePath, isValueFile);
+    const importsAreTransformed = !isConfigOfExtension && !isValueFile;
+    let code = await transpileWithEsbuild(filePath, userRootDir, importsAreTransformed, isValueFile);
+    let fileImportsTransformed = null;
+    if (importsAreTransformed) {
+        const res = transformImports_(code, filePath);
         if (res) {
             code = res.code;
-            fileImports = res.fileImports;
+            fileImportsTransformed = res.fileImportsTransformed;
         }
     }
-    return { code, fileImports };
-}
-function transpileImports(codeOriginal, filePath, isValueFile) {
-    // Do we need to remove the imports?
-    const { filePathAbsoluteFilesystem, filePathToShowToUser } = filePath;
-    assertPosixPath(filePathAbsoluteFilesystem);
-    const isHeader = isHeaderFile(filePathAbsoluteFilesystem);
-    const isPageConfigFile = !isValueFile;
-    if (!isHeader && !isPageConfigFile) {
-        return null;
+    else {
+        if (isHeaderFile(filePathAbsoluteFilesystem)) {
+            if (isValueFile) {
+                assertWarning(false, `${filePathToShowToUser2} is a JavaScript header file (.h.js), but JavaScript header files only apply to +config.h.js, see https://vike.dev/header-file`, { onlyOnce: true });
+            }
+            else if (isConfigOfExtension) {
+                assertWarning(false, `${filePathToShowToUser2} is a JavaScript header file (.h.js), but JavaScript header files don't apply to the config files of extensions`, { onlyOnce: true });
+            }
+            else {
+                assert(false);
+            }
+        }
     }
-    assertWarning(isPageConfigFile, `${filePathToShowToUser} is a JavaScript header file (.h.js), but JavaScript header files should only be used for +config.h.js, see https://vike.dev/header-file`, { onlyOnce: true });
-    // Remove the imports
-    const res = replaceImportStatements(codeOriginal, filePathToShowToUser);
-    if (res.noImportStatement) {
+    return { code, fileImportsTransformed };
+}
+function transformImports_(codeOriginal, filePath) {
+    const { filePathAbsoluteFilesystem } = filePath;
+    const filePathToShowToUser2 = getFilePathToShowToUser2(filePath);
+    // Replace import statements with import strings
+    const res = transformImports(codeOriginal, filePathToShowToUser2);
+    if (res.noTransformation) {
         return null;
     }
-    const { code, fileImports } = res;
-    if (!isHeader) {
-        const filePathCorrect = appendHeaderFileExtension(filePathToShowToUser);
-        assertWarning(false, `Rename ${filePathToShowToUser} to ${filePathCorrect}, see https://vike.dev/header-file`, {
+    const { code, fileImportsTransformed } = res;
+    if (!isHeaderFile(filePathAbsoluteFilesystem)) {
+        const filePathCorrect = appendHeaderFileExtension(filePathToShowToUser2);
+        assertWarning(false, `Rename ${filePathToShowToUser2} to ${filePathCorrect}, see https://vike.dev/header-file`, {
             onlyOnce: true
         });
     }
-    return { code, fileImports };
+    return { code, fileImportsTransformed };
 }
-async function transpileWithEsbuild(filePath, bundle, userRootDir) {
+async function transpileWithEsbuild(filePath, userRootDir, importsAreTransformed, isValueFile) {
+    const isConfigFile = !isValueFile;
     const entryFilePath = filePath.filePathAbsoluteFilesystem;
     const entryFileDir = path.posix.dirname(entryFilePath);
     const options = {
@@ -73,22 +82,26 @@ async function transpileWithEsbuild(filePath, bundle, userRootDir) {
         'NEVER_EMITTED.js'),
         logLevel: 'silent',
         format: 'esm',
-        bundle,
+        absWorkingDir: userRootDir,
+        // Disable tree-shaking to avoid dead-code elimination, so that unused imports aren't removed.
+        // Esbuild still sometimes removes unused imports because of TypeScript: https://github.com/evanw/esbuild/issues/3034
+        treeShaking: false,
         minify: false,
-        metafile: bundle,
-        absWorkingDir: userRootDir
+        metafile: isConfigFile,
+        // We cannot bundle imports that are meant to be transformed
+        bundle: !importsAreTransformed
     };
-    if (bundle) {
-        options.bundle = true;
+    // Track dependencies
+    if (isConfigFile) {
         options.packages = 'external';
         options.plugins = [
             {
-                name: 'vike:import-hook',
+                name: 'vike:dependency-tracker',
                 setup(b) {
                     b.onLoad({ filter: /./ }, (args) => {
+                        // We collect the dependency `args.path` in case the bulid fails (upon build error => error is thrown => no metafile)
                         let { path } = args;
                         path = toPosixPath(path);
-                        // We collect the dependency args.path in case it fails to build (upon build error => error is thrown => no metafile)
                         vikeConfigDependencies.add(path);
                         return undefined;
                     });
@@ -105,11 +118,6 @@ async function transpileWithEsbuild(filePath, bundle, userRootDir) {
             }
         ];
     }
-    else {
-        // Avoid dead-code elimination to ensure unused imports aren't removed.
-        // Esbuild still sometimes removes unused imports because of TypeScript: https://github.com/evanw/esbuild/issues/3034
-        options.treeShaking = false;
-    }
     let result;
     try {
         result = await build(options);
@@ -118,7 +126,8 @@ async function transpileWithEsbuild(filePath, bundle, userRootDir) {
         await formatBuildErr(err, filePath);
         throw err;
     }
-    if (bundle) {
+    // Track dependencies
+    if (isConfigFile) {
         assert(result.metafile);
         Object.keys(result.metafile.inputs).forEach((filePathRelative) => {
             filePathRelative = toPosixPath(filePathRelative);
@@ -131,7 +140,7 @@ async function transpileWithEsbuild(filePath, bundle, userRootDir) {
     assert(typeof code === 'string');
     return code;
 }
-async function executeFile(filePath, code, fileImports, isValueFile) {
+async function executeFile(filePath, code, fileImportsTransformed, isValueFile) {
     const { filePathAbsoluteFilesystem, filePathRelativeToUserRootDir } = filePath;
     // Alternative to using a temporary file: https://github.com/vitejs/vite/pull/13269
     //  - But seems to break source maps, so I don't think it's worth it
@@ -156,10 +165,10 @@ async function executeFile(filePath, code, fileImports, isValueFile) {
     //  - import() returns `[Module: null prototype] { default: { onRenderClient: '...' }}`
     //  - We don't need this special object
     fileExports = { ...fileExports };
-    if (fileImports && !isValueFile) {
+    if (fileImportsTransformed && !isValueFile) {
         assert(filePathRelativeToUserRootDir !== undefined);
-        const filePathToShowToUser = filePathRelativeToUserRootDir ?? filePathAbsoluteFilesystem;
-        assertImportsAreReExported(fileImports, fileExports, filePathToShowToUser);
+        const filePathToShowToUser2 = getFilePathToShowToUser2(filePath);
+        assertImportsAreReExported(fileImportsTransformed, fileExports, filePathToShowToUser2);
     }
     return { fileExports };
 }
@@ -205,8 +214,8 @@ function isTmpFile(filePath) {
     const fileName = path.posix.basename(filePath);
     return fileName.startsWith(tmpPrefix);
 }
-function assertImportsAreReExported(fileImports, fileExports, filePathToShowToUser) {
-    const fileExport = getConfigFileExport(fileExports, filePathToShowToUser);
+function assertImportsAreReExported(fileImportsTransformed, fileExports, filePathToShowToUser2) {
+    const fileExport = getConfigFileExport(fileExports, filePathToShowToUser2);
     const exportedStrings = getExportedStrings(fileExport);
     Object.values(exportedStrings).forEach((exportVal) => {
         if (typeof exportVal !== 'string')
@@ -214,20 +223,20 @@ function assertImportsAreReExported(fileImports, fileExports, filePathToShowToUs
         if (!isImportData(exportVal))
             return;
         const importString = exportVal;
-        fileImports.forEach((fileImport) => {
+        fileImportsTransformed.forEach((fileImport) => {
             if (fileImport.importString === importString) {
                 fileImport.isReExported = true;
             }
         });
     });
-    const fileImportsUnused = fileImports.filter((fi) => !fi.isReExported);
-    if (fileImportsUnused.length === 0)
+    const fileImportsTransformedUnused = fileImportsTransformed.filter((fi) => !fi.isReExported);
+    if (fileImportsTransformedUnused.length === 0)
         return;
-    const importStatements = unique(fileImportsUnused.map((fi) => fi.importStatementCode));
-    const importNamesUnused = fileImportsUnused.map((fi) => pc.cyan(fi.importLocalName)).join(', ');
-    const singular = fileImportsUnused.length === 1;
-    assertWarning(fileImportsUnused.length === 0, [
-        `${filePathToShowToUser} imports the following:`,
+    const importStatements = unique(fileImportsTransformedUnused.map((fi) => fi.importStatementCode));
+    const importNamesUnused = fileImportsTransformedUnused.map((fi) => pc.cyan(fi.importLocalName)).join(', ');
+    const singular = fileImportsTransformedUnused.length === 1;
+    assertWarning(fileImportsTransformedUnused.length === 0, [
+        `${filePathToShowToUser2} imports the following:`,
         ...importStatements.map((s) => pc.cyan(`  ${s}`)),
         `But the import${singular ? '' : 's'} ${importNamesUnused} ${singular ? "isn't" : "aren't"} re-exported at ${pc.cyan('export default { ... }')} and therefore ${singular ? 'has' : 'have'} no effect, see explanation at https://vike.dev/header-file`
     ].join('\n'), { onlyOnce: true });
@@ -249,6 +258,7 @@ function getExportedStrings(obj) {
     return exportedStrings;
 }
 function isHeaderFile(filePath) {
+    assertPosixPath(filePath);
     const basenameParts = path.posix.basename(filePath).split('.');
     return basenameParts.includes('h');
 }
@@ -269,10 +279,19 @@ function triggerPrepareStackTrace(err) {
     }
 }
 function getErrIntroMsg(operation, filePath) {
+    const filePathToShowToUser2 = getFilePathToShowToUser2(filePath);
     const msg = [
+        // prettier ignore
         pc.red(`Failed to ${operation}`),
-        pc.bold(pc.red(filePath.filePathToShowToUser)),
+        pc.bold(pc.red(filePathToShowToUser2)),
         pc.red(`because:`)
     ].join(' ');
     return msg;
 }
+/** `filePath.filePathToShowToUser` may show the import path of a package, use `filePathToShowToUser2` instead always show a file path instead. */
+function getFilePathToShowToUser2(filePath) {
+    const { filePathAbsoluteFilesystem, filePathRelativeToUserRootDir } = filePath;
+    const filePathToShowToUser2 = filePathRelativeToUserRootDir || filePathAbsoluteFilesystem;
+    assert(filePathToShowToUser2);
+    return filePathToShowToUser2;
+}

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

@@ -1,7 +1,7 @@
 export { projectInfo };
 export { PROJECT_VERSION };
-declare const PROJECT_VERSION: "0.4.159-commit-6bcb2fd";
+declare const PROJECT_VERSION: "0.4.159-commit-0424983";
 declare const projectInfo: {
     projectName: "Vike";
-    projectVersion: "0.4.159-commit-6bcb2fd";
+    projectVersion: "0.4.159-commit-0424983";
 };

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.159-commit-6bcb2fd';
+const PROJECT_VERSION = '0.4.159-commit-0424983';
 const projectInfo = {
     projectName: 'Vike',
     projectVersion: PROJECT_VERSION

package/package.json

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