@nx/vite 23.3.0-beta.0 → 23.3.0-beta.2

package/dist/plugins/nx-tsconfig-paths.plugin.d.ts

@@ -15,7 +15,7 @@ export interface nxViteTsPathsOptions {
     mainFields?: (string | string[])[];
     /**
      * extensions to check when resolving files when package.json resolution fails
-     * @default ['.ts', '.tsx', '.js', '.jsx', '.json', '.mjs', '.cjs']
+     * @default ['.ts', '.tsx', '.js', '.jsx', '.json', '.mts', '.mjs', '.cts', '.cjs', '.css', '.scss', '.less']
      **/
     extensions?: string[];
     /**

package/dist/plugins/nx-tsconfig-paths.plugin.js

@@ -8,7 +8,7 @@ const node_fs_1 = require("node:fs");
 const node_path_1 = require("node:path");
 const tsconfig_paths_1 = require("tsconfig-paths");
 const deprecation_1 = require("../src/utils/deprecation");
-const nx_tsconfig_paths_find_file_1 = require("../src/utils/nx-tsconfig-paths-find-file");
+const nx_tsconfig_paths_load_file_1 = require("../src/utils/nx-tsconfig-paths-load-file");
 const options_utils_1 = require("../src/utils/options-utils");
 const nx_vite_build_coordination_plugin_1 = require("./nx-vite-build-coordination.plugin");
 /**
@@ -22,7 +22,9 @@ function nxViteTsPaths(options = {}) {
     (0, deprecation_1.warnNxViteTsPathsDeprecation)();
     let foundTsConfigPath;
     let matchTsPathEsm;
+    let matchTsPathEsmExact;
     let matchTsPathFallback;
+    let matchTsPathFallbackExact;
     let tsConfigPathsEsm;
     let tsConfigPathsFallback;
     options.extensions ??= [
@@ -94,14 +96,28 @@ function nxViteTsPaths(options = {}) {
             if (parsed.resultType === 'failed') {
                 throw new Error(`Failed loading tsconfig at ${foundTsConfigPath}`);
             }
-            tsConfigPathsEsm = parsed;
-            matchTsPathEsm = (0, tsconfig_paths_1.createMatchPath)((0, js_1.resolvePathsBaseUrl)(foundTsConfigPath), parsed.paths, options.mainFields);
+            // `loadConfig` derives `absoluteBaseUrl` from the leaf tsconfig, but
+            // `paths` resolve against the config that declared them.
+            const pathsBaseUrl = (0, js_1.resolvePathsBaseUrl)(foundTsConfigPath);
+            tsConfigPathsEsm = { ...parsed, absoluteBaseUrl: pathsBaseUrl };
+            matchTsPathEsm = (0, tsconfig_paths_1.createMatchPath)(pathsBaseUrl, parsed.paths, options.mainFields);
+            matchTsPathEsmExact = createExactMatchPath(pathsBaseUrl, parsed.paths, options.mainFields);
             const rootLevelTsConfig = getTsConfig((0, node_path_1.join)(devkit_1.workspaceRoot, 'tsconfig.base.json'));
-            const rootLevelParsed = (0, tsconfig_paths_1.loadConfig)(rootLevelTsConfig);
-            logIt('fallback parsed tsconfig: ', rootLevelParsed);
-            if (rootLevelParsed.resultType === 'success') {
-                tsConfigPathsFallback = rootLevelParsed;
-                matchTsPathFallback = (0, tsconfig_paths_1.createMatchPath)((0, js_1.resolvePathsBaseUrl)(rootLevelTsConfig), rootLevelParsed.paths, ['main', 'module']);
+            // A workspace may have no root-level tsconfig at all. Passing no path to
+            // `loadConfig` makes it search upwards from the cwd instead, which finds
+            // an unrelated tsconfig whose directory is not this workspace.
+            if (rootLevelTsConfig) {
+                const rootLevelParsed = (0, tsconfig_paths_1.loadConfig)(rootLevelTsConfig);
+                logIt('fallback parsed tsconfig: ', rootLevelParsed);
+                if (rootLevelParsed.resultType === 'success') {
+                    const rootLevelPathsBaseUrl = (0, js_1.resolvePathsBaseUrl)(rootLevelTsConfig);
+                    tsConfigPathsFallback = {
+                        ...rootLevelParsed,
+                        absoluteBaseUrl: rootLevelPathsBaseUrl,
+                    };
+                    matchTsPathFallback = (0, tsconfig_paths_1.createMatchPath)(rootLevelPathsBaseUrl, rootLevelParsed.paths, ['main', 'module']);
+                    matchTsPathFallbackExact = createExactMatchPath(rootLevelPathsBaseUrl, rootLevelParsed.paths, ['main', 'module']);
+                }
             }
         },
         resolveId(importPath) {
@@ -116,18 +132,27 @@ function nxViteTsPaths(options = {}) {
                 return null;
             let resolvedFile;
             try {
-                resolvedFile = matchTsPathEsm(importPath);
+                resolvedFile =
+                    matchTsPathEsmExact(importPath) ??
+                        loadFileFromExactAlias(tsConfigPathsEsm, importPath) ??
+                        matchTsPathEsm(importPath);
             }
             catch (e) {
                 logIt('Using fallback path matching.');
-                resolvedFile = matchTsPathFallback?.(importPath);
+                resolvedFile =
+                    matchTsPathFallbackExact?.(importPath) ??
+                        loadFileFromExactAlias(tsConfigPathsFallback, importPath) ??
+                        matchTsPathFallback?.(importPath);
             }
             if (!resolvedFile || !(0, node_fs_1.existsSync)(resolvedFile)) {
                 if (tsConfigPathsEsm || tsConfigPathsFallback) {
                     logIt(`Unable to resolve ${importPath} with tsconfig paths. Using fallback file matching.`);
+                    // The tsconfig the project builds with need not extend the
+                    // root-level one, so the second pass covers aliases only the
+                    // root-level config declares.
                     resolvedFile =
-                        loadFileFromPaths(tsConfigPathsEsm, importPath) ||
-                            loadFileFromPaths(tsConfigPathsFallback, importPath);
+                        loadFileFromPathsWithLogging(tsConfigPathsEsm, importPath) ||
+                            loadFileFromPathsWithLogging(tsConfigPathsFallback, importPath);
                 }
                 else {
                     logIt(`Unable to resolve ${importPath} with tsconfig paths`);
@@ -178,31 +203,42 @@ function nxViteTsPaths(options = {}) {
             console.debug('\n[Nx Vite TsPaths]', ...msg);
         }
     }
-    function loadFileFromPaths(tsconfig, importPath) {
-        logIt(`Trying to resolve file from config in ${tsconfig.configFileAbsolutePath}`);
-        let resolvedFile;
-        for (const alias in tsconfig.paths) {
-            const paths = tsconfig.paths[alias];
-            const normalizedImport = alias.replace(/\/\*$/, '');
-            if (importPath === normalizedImport ||
-                importPath.startsWith(normalizedImport + '/')) {
-                for (const path of paths) {
-                    const joinedPath = (0, devkit_1.joinPathFragments)(tsconfig.absoluteBaseUrl, path.replace(/\/\*$/, ''));
-                    resolvedFile = (0, nx_tsconfig_paths_find_file_1.findFile)(importPath.replace(normalizedImport, joinedPath), options.extensions);
-                    if (resolvedFile === undefined &&
-                        options.extensions.some((ext) => importPath.endsWith(ext))) {
-                        const foundExtension = options.extensions.find((ext) => importPath.endsWith(ext));
-                        const pathWithoutExtension = importPath
-                            .replace(normalizedImport, joinedPath)
-                            .slice(0, -foundExtension.length);
-                        resolvedFile = (0, nx_tsconfig_paths_find_file_1.findFile)(pathWithoutExtension, options.extensions);
-                    }
-                    if (resolvedFile !== undefined) {
-                        return resolvedFile;
-                    }
-                }
-            }
+    /**
+     * Resolves an import that names an alias exactly, through that alias alone.
+     *
+     * The matcher above already covers a mapped path that names a file or a
+     * package entry, so this is what finds an `index` or supplies the extension.
+     * Restricting it to the one alias keeps it from answering with a wildcard,
+     * which is the last resort's job.
+     */
+    function loadFileFromExactAlias(tsconfig, importPath) {
+        // An own-property check, because an import named after an `Object`
+        // prototype member (`constructor`, `toString`) would otherwise read the
+        // inherited value and hand a non-array on to the resolver.
+        if (!tsconfig || !Object.hasOwn(tsconfig.paths, importPath)) {
+            return undefined;
         }
-        return resolvedFile;
+        return (0, nx_tsconfig_paths_load_file_1.loadFileFromPaths)({ ...tsconfig, paths: { [importPath]: tsconfig.paths[importPath] } }, importPath, options.extensions);
     }
+    function loadFileFromPathsWithLogging(tsconfig, importPath) {
+        // The root-level tsconfig is optional: a workspace without one leaves
+        // `tsConfigPathsFallback` unset, and the import has to defer to Vite.
+        if (!tsconfig)
+            return undefined;
+        logIt(`Trying to resolve file from config in ${tsconfig.configFileAbsolutePath}`);
+        return (0, nx_tsconfig_paths_load_file_1.loadFileFromPaths)(tsconfig, importPath, options.extensions);
+    }
+}
+/**
+ * Matcher over the non-wildcard aliases alone, to run before the full one.
+ *
+ * `tsconfig-paths` ranks an alias by the length of the text before its `*`,
+ * counting one without a `*` as zero, so an exact alias sorts no higher than
+ * any wildcard. TypeScript matches an exact alias first.
+ */
+function createExactMatchPath(absoluteBaseUrl, paths, mainFields) {
+    const exactPaths = Object.fromEntries(Object.entries(paths).filter(([alias]) => !alias.includes('*')));
+    // The match-all `*` entry would resolve any import against `baseUrl` before
+    // the wildcard aliases of the full matcher get their turn.
+    return (0, tsconfig_paths_1.createMatchPath)(absoluteBaseUrl, exactPaths, mainFields, false);
 }

package/dist/src/plugins/plugin.js

@@ -95,24 +95,12 @@ async function buildViteTargets(configFilePath, projectRoot, options, tsConfigFi
     catch {
         // do nothing
     }
-    // Workaround for race condition with ESM-only Vite plugins (e.g. @vitejs/plugin-vue@6+)
-    // If vite.config.ts is compiled as CJS, then when both require('@vitejs/plugin-vue') and import('@vitejs/plugin-vue')
-    // are pending in the same process, Node will throw an error:
-    // Error [ERR_INTERNAL_ASSERTION]: Cannot require() ES Module @vitejs/plugin-vue/dist/index.js because it is not yet fully loaded.
-    // This may be caused by a race condition if the module is simultaneously dynamically import()-ed via Promise.all().
-    try {
-        const importVuePlugin = () => new Function('return import("@vitejs/plugin-vue")')();
-        await importVuePlugin();
-    }
-    catch {
-        // Plugin not installed or not needed, ignore
-    }
     const { resolveConfig } = await (0, executor_utils_1.loadViteDynamicImport)();
-    const viteBuildConfig = await resolveConfig({
+    const viteBuildConfig = await (0, internal_1.retryOnRequireEsmRace)(() => resolveConfig({
         configFile: absoluteConfigFilePath,
         mode: 'development',
         root: projectRoot,
-    }, 'build');
+    }, 'build'));
     const metadata = {};
     const { buildOutputs, isBuildable, hasServeConfig } = getOutputs(viteBuildConfig, projectRoot, context.workspaceRoot);
     const namedInputs = (0, internal_1.getNamedInputs)(projectRoot, context);
@@ -127,7 +115,7 @@ async function buildViteTargets(configFilePath, projectRoot, options, tsConfigFi
         targets[options.buildTargetName] = await buildTarget(options.buildTargetName, namedInputs, buildOutputs, projectRoot, isUsingTsSolutionSetup, pmc);
         // If running in library mode, then there is nothing to serve.
         if (!viteBuildConfig.build?.lib || hasServeConfig) {
-            const devTarget = serveTarget(projectRoot, isUsingTsSolutionSetup, pmc);
+            const devTarget = serveTarget(projectRoot, isUsingTsSolutionSetup, pmc, namedInputs);
             targets[options.serveTargetName] = {
                 ...devTarget,
                 metadata: {
@@ -136,8 +124,8 @@ async function buildViteTargets(configFilePath, projectRoot, options, tsConfigFi
                 },
             };
             targets[options.devTargetName] = devTarget;
-            targets[options.previewTargetName] = previewTarget(projectRoot, options.buildTargetName, pmc);
-            targets[options.serveStaticTargetName] = serveStaticTarget(options, isUsingTsSolutionSetup);
+            targets[options.previewTargetName] = previewTarget(projectRoot, options.buildTargetName, pmc, namedInputs);
+            targets[options.serveStaticTargetName] = serveStaticTarget(options, isUsingTsSolutionSetup, namedInputs);
         }
     }
     if (tsConfigFiles.length) {
@@ -200,14 +188,7 @@ async function buildTarget(buildTargetName, namedInputs, outputs, projectRoot, i
         options: { cwd: (0, devkit_1.joinPathFragments)(projectRoot) },
         cache: true,
         dependsOn: [`^${buildTargetName}`],
-        inputs: [
-            ...('production' in namedInputs
-                ? ['production', '^production']
-                : ['default', '^default']),
-            {
-                externalDependencies: ['vite'],
-            },
-        ],
+        inputs: buildInputs(namedInputs),
         outputs,
         metadata: {
             technologies: ['vite'],
@@ -228,9 +209,20 @@ async function buildTarget(buildTargetName, namedInputs, outputs, projectRoot, i
     }
     return buildTarget;
 }
-function serveTarget(projectRoot, isUsingTsSolutionSetup, pmc) {
+function buildInputs(namedInputs) {
+    return [
+        ...('production' in namedInputs
+            ? ['production', '^production']
+            : ['default', '^default']),
+        {
+            externalDependencies: ['vite'],
+        },
+    ];
+}
+function serveTarget(projectRoot, isUsingTsSolutionSetup, pmc, namedInputs) {
     const targetConfig = {
         continuous: true,
+        inputs: buildInputs(namedInputs),
         command: `vite`,
         options: {
             cwd: (0, devkit_1.joinPathFragments)(projectRoot),
@@ -253,9 +245,10 @@ function serveTarget(projectRoot, isUsingTsSolutionSetup, pmc) {
     }
     return targetConfig;
 }
-function previewTarget(projectRoot, buildTargetName, pmc) {
+function previewTarget(projectRoot, buildTargetName, pmc, namedInputs) {
     const targetConfig = {
         continuous: true,
+        inputs: buildInputs(namedInputs),
         command: `vite preview`,
         dependsOn: [buildTargetName],
         options: {
@@ -276,9 +269,10 @@ function previewTarget(projectRoot, buildTargetName, pmc) {
     };
     return targetConfig;
 }
-function serveStaticTarget(options, isUsingTsSolutionSetup) {
+function serveStaticTarget(options, isUsingTsSolutionSetup, namedInputs) {
     const targetConfig = {
         continuous: true,
+        inputs: buildInputs(namedInputs),
         executor: '@nx/web:file-server',
         options: {
             buildTarget: `${options.buildTargetName}`,

package/dist/src/utils/nx-tsconfig-paths-load-file.d.ts

@@ -0,0 +1,12 @@
+import { existsSync } from 'node:fs';
+import type { ConfigLoaderSuccessResult } from 'tsconfig-paths';
+/**
+ * Fallback resolver used when `tsconfig-paths` produces nothing that exists on
+ * disk, whether because no alias matched or because the match pointed at a
+ * missing file.
+ *
+ * A wildcard alias captures the suffix of the import and substitutes it into
+ * the `*` of each mapped path. The `*` is not always trailing, so the suffix
+ * cannot simply be appended.
+ */
+export declare function loadFileFromPaths(tsconfig: ConfigLoaderSuccessResult, importPath: string, extensions: string[], existsSyncImpl?: typeof existsSync): string;

package/dist/src/utils/nx-tsconfig-paths-load-file.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadFileFromPaths = loadFileFromPaths;
+const node_fs_1 = require("node:fs");
+const node_path_1 = require("node:path");
+const nx_tsconfig_paths_find_file_1 = require("./nx-tsconfig-paths-find-file");
+/**
+ * Fallback resolver used when `tsconfig-paths` produces nothing that exists on
+ * disk, whether because no alias matched or because the match pointed at a
+ * missing file.
+ *
+ * A wildcard alias captures the suffix of the import and substitutes it into
+ * the `*` of each mapped path. The `*` is not always trailing, so the suffix
+ * cannot simply be appended.
+ */
+function loadFileFromPaths(tsconfig, importPath, extensions, existsSyncImpl = node_fs_1.existsSync) {
+    let resolvedFile;
+    for (const alias of sortAliasesBySpecificity(Object.keys(tsconfig.paths), importPath)) {
+        const paths = tsconfig.paths[alias];
+        const isWildcard = alias.endsWith('/*');
+        const normalizedImport = alias.replace(/\/\*$/, '');
+        if (importPath === normalizedImport ||
+            importPath.startsWith(normalizedImport + '/')) {
+            const suffix = importPath.slice(normalizedImport.length + 1);
+            for (const path of paths) {
+                // The replacements go through a function because a string replacement
+                // would expand `$&` and friends as substitution patterns.
+                const joinedPath = (0, node_path_1.join)(tsconfig.absoluteBaseUrl, isWildcard
+                    ? path.replace('*', () => suffix)
+                    : path.replace(/\/\*$/, ''));
+                const candidate = isWildcard
+                    ? joinedPath
+                    : importPath.replace(normalizedImport, () => joinedPath);
+                resolvedFile = (0, nx_tsconfig_paths_find_file_1.findFile)(candidate, extensions, existsSyncImpl);
+                // The candidate ends with the import's own tail only when the wildcard
+                // is last. Anything the mapped path appends after the `*`
+                // (`packages/foo/*.ts`) is the tail instead, so dropping an extension
+                // from it would resolve a sibling the mapping never pointed at.
+                const endsWithImportTail = !isWildcard || path.endsWith('*');
+                if (resolvedFile === undefined && endsWithImportTail) {
+                    const foundExtension = extensions.find((ext) => importPath.endsWith(ext));
+                    if (foundExtension) {
+                        resolvedFile = (0, nx_tsconfig_paths_find_file_1.findFile)(candidate.slice(0, -foundExtension.length), extensions, existsSyncImpl);
+                    }
+                }
+                if (resolvedFile !== undefined) {
+                    return resolvedFile;
+                }
+            }
+        }
+    }
+    return resolvedFile;
+}
+/**
+ * TypeScript picks between competing aliases by specificity, never by
+ * declaration order: an exact hit on a non-wildcard alias first, then the
+ * longest wildcard prefix.
+ */
+function sortAliasesBySpecificity(aliases, importPath) {
+    const isWildcard = (alias) => alias.endsWith('/*');
+    const rank = (alias) => isWildcard(alias) ? 1 : importPath === alias ? 2 : 0;
+    const prefixLength = (alias) => alias.replace(/\/\*$/, '').length;
+    return [...aliases].sort((a, b) => {
+        const byRank = rank(b) - rank(a);
+        if (byRank !== 0)
+            return byRank;
+        // Prefix length only separates wildcards. Reordering two aliases
+        // TypeScript matches neither way would change resolution for no gain.
+        return isWildcard(a) ? prefixLength(b) - prefixLength(a) : 0;
+    });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/vite",
-  "version": "23.3.0-beta.0",
+  "version": "23.3.0-beta.2",
   "private": false,
   "type": "commonjs",
   "files": [
@@ -100,13 +100,13 @@
     "semver": "^7.6.3",
     "tslib": "^2.3.0",
     "ajv": "^8.0.0",
-    "@nx/devkit": "23.3.0-beta.0",
-    "@nx/js": "23.3.0-beta.0",
-    "@nx/vitest": "23.3.0-beta.0"
+    "@nx/devkit": "23.3.0-beta.2",
+    "@nx/js": "23.3.0-beta.2",
+    "@nx/vitest": "23.3.0-beta.2"
   },
   "devDependencies": {
-    "@nx/eslint": "23.3.0-beta.0",
-    "nx": "23.3.0-beta.0"
+    "@nx/eslint": "23.3.0-beta.2",
+    "nx": "23.3.0-beta.2"
   },
   "peerDependencies": {
     "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0"