vike 0.4.159 → 0.4.160-commit-30d535e

package/dist/cjs/node/plugin/plugins/importUserCode/v1-design/{replaceImportStatements.js → getVikeConfig/transformFileImports.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.transformFileImports = 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 utils_js_1 = require("../../../../utils.js");
 const picocolors_1 = __importDefault(require("@brillout/picocolors"));
-function replaceImportStatements(code, filePathToShowToUser) {
+function transformFileImports(code, filePathToShowToUser2, 
+// For ./transformFileImports.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 => transformFileImports() => esbuild for bundling.
+        //   - Or we use an esbuild plugin to apply transformFileImports(). 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 works well with TypeScript: it doesn't complain upon `with { type: 'unknown-to-typescript' }` and go-to-definition & types are preserved: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-5-3.html#import-attributes
+        //   - 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 transformFileImports()?
+        // - 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.transformFileImports = transformFileImports;
 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 → getVikeConfig/transpileAndExecuteFile.js}

@@ -9,58 +9,68 @@ const fs_1 = __importDefault(require("fs"));
 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 getVikeConfig_js_1 = require("./getVikeConfig.js");
+const utils_js_1 = require("../../../../utils.js");
+const transformFileImports_js_1 = require("./transformFileImports.js");
+const getVikeConfig_js_1 = require("../getVikeConfig.js");
 require("source-map-support/register.js");
-const assertExports_js_1 = require("../../../../../shared/page-configs/assertExports.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);
-    return { fileExports };
+async function transpileAndExecuteFile(filePath, transformImports, userRootDir, doNotTranspile = false) {
+    if (doNotTranspile) {
+        (0, utils_js_1.assert)(!transformImports);
+        const fileExports = await executeFile(filePath.filePathAbsoluteFilesystem, filePath);
+        if (isHeaderFile(filePath.filePathAbsoluteFilesystem)) {
+            const filePathToShowToUser2 = getFilePathToShowToUser2(filePath);
+            (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 });
+        }
+        return { fileExports };
+    }
+    else {
+        const { code, fileImportsTransformed } = await transpileFile(filePath, transformImports, userRootDir);
+        const fileExports = await executeTranspiledFile(filePath, code, fileImportsTransformed);
+        return { fileExports };
+    }
 }
 exports.transpileAndExecuteFile = transpileAndExecuteFile;
-async function transpileFile(filePath, isValueFile, userRootDir) {
+async function transpileFile(filePath, transformImports, userRootDir) {
     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);
+    let code = await transpileWithEsbuild(filePath, userRootDir, transformImports);
+    let fileImportsTransformed = null;
+    if (transformImports) {
+        const res = transformFileImports_(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)) {
+            (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 });
+        }
     }
-    (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 transformFileImports_(codeOriginal, filePath) {
+    const { filePathAbsoluteFilesystem } = filePath;
+    const filePathToShowToUser2 = getFilePathToShowToUser2(filePath);
+    // Replace import statements with import strings
+    const res = (0, transformFileImports_js_1.transformFileImports)(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, transformImports) {
     const entryFilePath = filePath.filePathAbsoluteFilesystem;
     const entryFileDir = path_1.default.posix.dirname(entryFilePath);
     const options = {
@@ -76,22 +86,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: !transformImports,
+        // We cannot bundle imports that are meant to be transformed
+        bundle: !transformImports
     };
-    if (bundle) {
-        options.bundle = true;
+    // Track dependencies
+    if (!transformImports) {
         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 +122,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 +130,8 @@ async function transpileWithEsbuild(filePath, bundle, userRootDir) {
         await formatBuildErr(err, filePath);
         throw err;
     }
-    if (bundle) {
+    // Track dependencies
+    if (!transformImports) {
         (0, utils_js_1.assert)(result.metafile);
         Object.keys(result.metafile.inputs).forEach((filePathRelative) => {
             filePathRelative = (0, utils_js_1.toPosixPath)(filePathRelative);
@@ -134,7 +144,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 executeTranspiledFile(filePath, code, fileImportsTransformed) {
     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
@@ -143,28 +153,35 @@ async function executeFile(filePath, code, fileImports, isValueFile) {
     const clean = () => fs_1.default.unlinkSync(filePathTmp);
     let fileExports = {};
     try {
-        fileExports = await (0, import_1.import_)(filePathTmp);
+        fileExports = await executeFile(filePathTmp, filePath);
+    }
+    finally {
+        clean();
+    }
+    if (fileImportsTransformed) {
+        (0, utils_js_1.assert)(filePathRelativeToUserRootDir !== undefined);
+        const filePathToShowToUser2 = getFilePathToShowToUser2(filePath);
+        assertImportsAreReExported(fileImportsTransformed, fileExports, filePathToShowToUser2);
+    }
+    return fileExports;
+}
+async function executeFile(filePathToExecuteAbsoluteFilesystem, filePathSourceFile) {
+    let fileExports = {};
+    try {
+        fileExports = await (0, import_1.import_)(filePathToExecuteAbsoluteFilesystem);
     }
     catch (err) {
         triggerPrepareStackTrace(err);
-        const errIntroMsg = getErrIntroMsg('execute', filePath);
+        const errIntroMsg = getErrIntroMsg('execute', filePathSourceFile);
         (0, utils_js_1.assert)((0, utils_js_1.isObject)(err));
         execErrIntroMsg.set(err, errIntroMsg);
         throw err;
     }
-    finally {
-        clean();
-    }
-    // Return a plain JavaScript object
+    // Return a plain JavaScript object:
     //  - import() returns `[Module: null prototype] { default: { onRenderClient: '...' }}`
-    //  - We don't need this special object
+    //  - We don't need this special object.
     fileExports = { ...fileExports };
-    if (fileImports && !isValueFile) {
-        (0, utils_js_1.assert)(filePathRelativeToUserRootDir !== undefined);
-        const filePathToShowToUser = filePathRelativeToUserRootDir ?? filePathAbsoluteFilesystem;
-        assertImportsAreReExported(fileImports, fileExports, filePathToShowToUser);
-    }
-    return { fileExports };
+    return fileExports;
 }
 const formatted = '_formatted';
 function getConfigBuildErrorFormatted(err) {
@@ -196,10 +213,10 @@ function getConfigExecutionErrorIntroMsg(err) {
 }
 exports.getConfigExecutionErrorIntroMsg = getConfigExecutionErrorIntroMsg;
 const tmpPrefix = `[build-`;
-function getFilePathTmp(filePath) {
-    (0, utils_js_1.assertPosixPath)(filePath);
-    const dirname = path_1.default.posix.dirname(filePath);
-    const filename = path_1.default.posix.basename(filePath);
+function getFilePathTmp(filePathAbsoluteFilesystem) {
+    (0, utils_js_1.assertPosixPath)(filePathAbsoluteFilesystem);
+    const dirname = path_1.default.posix.dirname(filePathAbsoluteFilesystem);
+    const filename = path_1.default.posix.basename(filePathAbsoluteFilesystem);
     // Syntax with semicolon `[build:${/*...*/}]` doesn't work on Windows: https://github.com/vikejs/vike/issues/800#issuecomment-1517329455
     const tag = `${tmpPrefix}${(0, utils_js_1.getRandomId)(12)}]`;
     const filePathTmp = path_1.default.posix.join(dirname, `${tag}${filename}.mjs`);
@@ -211,29 +228,29 @@ function isTmpFile(filePath) {
     return fileName.startsWith(tmpPrefix);
 }
 exports.isTmpFile = isTmpFile;
-function assertImportsAreReExported(fileImports, fileExports, filePathToShowToUser) {
-    (0, assertExports_js_1.assertExportsOfConfigFile)(fileExports, filePathToShowToUser);
-    const exportedStrings = getExportedStrings(fileExports.default);
+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, transformFileImports_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 +272,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 +293,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;
+}