@nx/vite 24.0.0-beta.3 → 24.0.0-beta.4

package/dist/plugins/nx-ready-signal.plugin.d.ts

@@ -0,0 +1,8 @@
+import type { AddressInfo } from 'net';
+import type { Plugin } from 'vite';
+/**
+ * Reports the dev or preview server's address to an Nx task whose readyWhen
+ * is `signal`, once the server listens. Does nothing outside such a task.
+ */
+export declare function nxReadySignal(): Plugin;
+export declare function getServerUrl(address: AddressInfo | string | null, https: boolean): string | undefined;

package/dist/plugins/nx-ready-signal.plugin.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.nxReadySignal = nxReadySignal;
+exports.getServerUrl = getServerUrl;
+/**
+ * Reports the dev or preview server's address to an Nx task whose readyWhen
+ * is `signal`, once the server listens. Does nothing outside such a task.
+ */
+function nxReadySignal() {
+    return {
+        // No `apply`, so inference finds it in the config Vite resolves for a
+        // build. Its hooks only run for the dev and preview servers.
+        name: 'nx-ready-signal',
+        configureServer(server) {
+            report(server.httpServer, !!server.config.server.https);
+        },
+        configurePreviewServer(server) {
+            report(server.httpServer, !!server.config.preview.https);
+        },
+    };
+}
+function report(httpServer, https) {
+    if (!httpServer || !process.env.NX_READY_SIGNAL_SOCKET) {
+        return;
+    }
+    const { signalTaskReady } = require('@nx/devkit');
+    httpServer.once('listening', () => {
+        signalTaskReady({ url: getServerUrl(httpServer.address(), https) });
+    });
+}
+function getServerUrl(address, https) {
+    if (!address || typeof address === 'string') {
+        return undefined;
+    }
+    const host = address.address === '::' || address.address === '0.0.0.0'
+        ? 'localhost'
+        : address.family === 'IPv6'
+            ? `[${address.address}]`
+            : address.address;
+    return `${https ? 'https' : 'http'}://${host}:${address.port}/`;
+}

package/dist/ready-check.d.ts

@@ -0,0 +1 @@
+export declare function waitForDevServer(configPath: string, command: 'serve' | 'preview'): Promise<void>;

package/dist/ready-check.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.waitForDevServer = waitForDevServer;
+const dev_server_ready_check_1 = require("./src/utils/dev-server-ready-check");
+async function waitForDevServer(configPath, command) {
+    await (0, dev_server_ready_check_1.waitForViteServer)(configPath, command);
+    // Config hooks can leave handles open, such as vite-plugin-checker's workers
+    process.exit(0);
+}

package/dist/src/generators/configuration/lib/convert-non-vite.js

@@ -6,6 +6,7 @@ const find_vite_config_1 = require("../../../utils/find-vite-config");
 const generator_utils_1 = require("../../../utils/generator-utils");
 const internal_1 = require("@nx/js/internal");
 async function convertNonVite(tree, schema, projectRoot, _projectType, targets) {
+    (0, generator_utils_1.assertNoRemovedExecutorTargets)(schema.project, targets);
     // Check if it has vite
     const hasViteConfig = (0, find_vite_config_1.findViteConfig)(tree, projectRoot);
     const hasIndexHtmlAtRoot = tree.exists((0, devkit_1.joinPathFragments)(projectRoot, 'index.html'));

package/dist/src/plugins/plugin.js

@@ -108,7 +108,8 @@ 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, namedInputs);
+            const signals = !!viteBuildConfig.plugins?.some((p) => p.name === 'nx-ready-signal');
+            const devTarget = serveTarget(projectRoot, configFilePath, signals, isUsingTsSolutionSetup, pmc, namedInputs);
             targets[options.serveTargetName] = {
                 ...devTarget,
                 metadata: {
@@ -117,7 +118,7 @@ async function buildViteTargets(configFilePath, projectRoot, options, tsConfigFi
                 },
             };
             targets[options.devTargetName] = devTarget;
-            targets[options.previewTargetName] = previewTarget(projectRoot, options.buildTargetName, pmc, namedInputs);
+            targets[options.previewTargetName] = previewTarget(projectRoot, configFilePath, signals, options.buildTargetName, pmc, namedInputs);
             targets[options.serveStaticTargetName] = serveStaticTarget(options, isUsingTsSolutionSetup, namedInputs);
         }
     }
@@ -201,7 +202,7 @@ function buildInputs(namedInputs) {
         },
     ];
 }
-function serveTarget(projectRoot, isUsingTsSolutionSetup, pmc, namedInputs) {
+function serveTarget(projectRoot, configFilePath, signals, isUsingTsSolutionSetup, pmc, namedInputs) {
     const targetConfig = {
         continuous: true,
         inputs: buildInputs(namedInputs),
@@ -209,6 +210,7 @@ function serveTarget(projectRoot, isUsingTsSolutionSetup, pmc, namedInputs) {
         options: {
             cwd: (0, devkit_1.joinPathFragments)(projectRoot),
         },
+        readyWhen: getServerReadyWhen(configFilePath, 'serve', signals),
         metadata: {
             technologies: ['vite'],
             description: `Starts Vite dev server`,
@@ -227,7 +229,7 @@ function serveTarget(projectRoot, isUsingTsSolutionSetup, pmc, namedInputs) {
     }
     return targetConfig;
 }
-function previewTarget(projectRoot, buildTargetName, pmc, namedInputs) {
+function previewTarget(projectRoot, configFilePath, signals, buildTargetName, pmc, namedInputs) {
     const targetConfig = {
         continuous: true,
         inputs: buildInputs(namedInputs),
@@ -236,6 +238,7 @@ function previewTarget(projectRoot, buildTargetName, pmc, namedInputs) {
         options: {
             cwd: (0, devkit_1.joinPathFragments)(projectRoot),
         },
+        readyWhen: getServerReadyWhen(configFilePath, 'preview', signals),
         metadata: {
             technologies: ['vite'],
             description: `Locally preview Vite production build`,
@@ -260,12 +263,27 @@ function serveStaticTarget(options, isUsingTsSolutionSetup, namedInputs) {
             buildTarget: `${options.buildTargetName}`,
             spa: true,
         },
+        readyWhen: { port: '{options.port}', host: '{options.host ?? localhost}' },
     };
     if (isUsingTsSolutionSetup) {
         targetConfig.syncGenerators = ['@nx/js:typescript-sync'];
     }
     return targetConfig;
 }
+// A config that loads nxReadySignal() reports when the server listens.
+// Otherwise the check resolves the config when the task runs, with the task's
+// env and options, and waits for the server's port.
+function getServerReadyWhen(configFilePath, command, signals) {
+    return signals
+        ? { signal: true }
+        : {
+            // Unquoted: the plugin's glob fixes the file name. Quote it if it ever
+            // becomes user-chosen, since the shell expands $, backticks and %.
+            command: `node -e "require('@nx/vite/ready-check').waitForDevServer(process.argv[1], '${command}')" ${(0, node_path_1.basename)(configFilePath)}`,
+            // Each attempt resolves the config
+            interval: 1000,
+        };
+}
 function getOutputs(viteBuildConfig, projectRoot, workspaceRoot) {
     // TODO(jack): Remove this cast when @nx/vite switches to moduleResolution:
     // "nodenext". Vite 8's rolldown types are ESM-only (.d.mts) and not

package/dist/src/utils/dev-server-ready-check.d.ts

@@ -0,0 +1,27 @@
+export interface ViteFlags {
+    port?: string;
+    host?: string | boolean;
+    mode?: string;
+    config?: string;
+    root?: string;
+}
+/**
+ * The flags `vite` and `vite preview` get from the target's options, in the
+ * order run-commands passes them: named options, `args`, then overrides.
+ */
+export declare function parseViteFlags(options: Record<string, unknown>, command: 'serve' | 'preview'): ViteFlags;
+export type ServerAddress = {
+    port: number;
+    host?: string;
+};
+export declare function getViteServerAddress(server: {
+    port?: unknown;
+    host?: unknown;
+} | undefined, flags: ViteFlags, command: 'serve' | 'preview'): ServerAddress | null;
+/**
+ * The readyWhen of the inferred serve and preview targets when the config
+ * doesn't load the signal plugin. Runs in the env and with the options of the
+ * task, resolves the config the way `vite` does, and waits for the server's
+ * port.
+ */
+export declare function waitForViteServer(configPath: string, command: 'serve' | 'preview'): Promise<void>;

package/dist/src/utils/dev-server-ready-check.js

@@ -0,0 +1,174 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseViteFlags = parseViteFlags;
+exports.getViteServerAddress = getViteServerAddress;
+exports.waitForViteServer = waitForViteServer;
+const internal_1 = require("@nx/devkit/internal");
+const net_1 = require("net");
+const path_1 = require("path");
+const executor_utils_1 = require("./executor-utils");
+// Vite's boolean options: the arg after one is positional, not its value
+const GLOBAL_BOOLEAN_OPTIONS = ['clearScreen', 'h', 'help', 'v', 'version'];
+const BOOLEAN_OPTIONS = {
+    serve: [
+        ...GLOBAL_BOOLEAN_OPTIONS,
+        'cors',
+        'strictPort',
+        'force',
+        'experimentalBundle',
+    ],
+    preview: [...GLOBAL_BOOLEAN_OPTIONS, 'strictPort'],
+};
+/**
+ * The flags `vite` and `vite preview` get from the target's options, in the
+ * order run-commands passes them: named options, `args`, then overrides.
+ */
+function parseViteFlags(options, command) {
+    const args = Array.isArray(options.args)
+        ? options.args.join(' ')
+        : typeof options.args === 'string'
+            ? options.args
+            : '';
+    const unparsed = Array.isArray(options.__unparsed__)
+        ? options.__unparsed__.map(String)
+        : [];
+    // run-commands skips a named option the overrides set, or that args set to
+    // another value, parsing both with nx's yargs-parser
+    const yargsParser = require(require.resolve('yargs-parser', {
+        paths: [(0, path_1.dirname)(require.resolve('nx/package.json'))],
+    }));
+    const overrides = yargsParser(unparsed, {
+        configuration: {
+            'parse-numbers': false,
+            'parse-positional-numbers': false,
+            'dot-notation': false,
+            'camel-case-expansion': false,
+        },
+    });
+    const fromArgs = args
+        ? yargsParser(args.replace(/(^"|"$)/g, ''), {
+            configuration: { 'camel-case-expansion': true },
+        })
+        : {};
+    const named = Object.keys(options)
+        .filter((k) => ['port', 'host', 'mode', 'm', 'config', 'c'].includes(k) &&
+        typeof options[k] !== 'object' &&
+        overrides[k] === undefined &&
+        (!Object.hasOwn(fromArgs, k) || fromArgs[k] === options[k]))
+        .map((k) => `--${k}=${options[k]}`);
+    const { values, positionals } = parseArgv([...named, ...(0, internal_1.splitShellArgs)(args), ...unparsed], BOOLEAN_OPTIONS[command]);
+    // Vite keeps the values of whichever spelling of an option comes first
+    const last = (...names) => values.get([...values.keys()].find((k) => names.includes(k)))?.at(-1);
+    const asString = (value) => typeof value === 'string' ? value : undefined;
+    return {
+        port: asString(last('port')),
+        host: last('host'),
+        mode: asString(last('m', 'mode')),
+        config: asString(last('c', 'config')),
+        root: positionals[0],
+    };
+}
+// A port of the mri parser Vite's CLI uses, keeping each option's values
+function parseArgv(argv, booleans) {
+    const values = new Map();
+    const positionals = [];
+    const add = (name, value) => values.set(name, [...(values.get(name) ?? []), value]);
+    for (let i = 0; i < argv.length; i++) {
+        const arg = argv[i];
+        if (arg === '--')
+            break;
+        const dashes = arg.match(/^-*/)[0].length;
+        if (dashes === 0) {
+            positionals.push(arg);
+            continue;
+        }
+        if (arg.startsWith('no-', dashes)) {
+            add(arg.slice(dashes + 3), false);
+            continue;
+        }
+        const eq = arg.indexOf('=', dashes + 1);
+        const name = arg.slice(dashes, eq === -1 ? undefined : eq);
+        const value = (eq === -1 ? '' : arg.slice(eq + 1)) ||
+            i + 1 === argv.length ||
+            argv[i + 1].startsWith('-') ||
+            argv[++i];
+        // `-abc` sets a, b and c, and the value goes to c
+        const names = dashes === 2 ? [name] : [...name];
+        names.forEach((n, j) => {
+            const v = j === names.length - 1 ? value : true;
+            if (typeof v === 'string' && booleans.includes(n)) {
+                if (v !== 'true' && v !== 'false')
+                    positionals.push(v);
+                add(n, v !== 'false');
+            }
+            else {
+                add(n, v);
+            }
+        });
+    }
+    return { values, positionals };
+}
+// Vite's default ports: https://vite.dev/config/server-options#server-port
+const DEFAULT_PORT = { serve: 5173, preview: 4173 };
+function getViteServerAddress(server, flags, command) {
+    const port = Number(flags.port ?? server?.port ?? DEFAULT_PORT[command]);
+    if (!Number.isInteger(port) || port <= 0)
+        return null;
+    const host = flags.host ?? server?.host;
+    // `true` and the wildcards listen on every address, loopback included
+    return typeof host === 'string' &&
+        !['localhost', '0.0.0.0', '::'].includes(host)
+        ? { port, host }
+        : { port };
+}
+/**
+ * The readyWhen of the inferred serve and preview targets when the config
+ * doesn't load the signal plugin. Runs in the env and with the options of the
+ * task, resolves the config the way `vite` does, and waits for the server's
+ * port.
+ */
+async function waitForViteServer(configPath, command) {
+    let options = {};
+    try {
+        options = JSON.parse(process.env.NX_TASK_OPTIONS ?? '{}');
+    }
+    catch { }
+    const flags = parseViteFlags(options, command);
+    process.chdir((0, path_1.resolve)(options.cwd ?? '.'));
+    const { resolveConfig } = await (0, executor_utils_1.loadViteDynamicImport)();
+    const inlineConfig = {
+        root: flags.root,
+        // With --root and no --config, Vite finds the config in the root, not in
+        // the task's cwd
+        configFile: flags.config ?? (flags.root ? undefined : configPath),
+        mode: flags.mode,
+    };
+    // The mode and NODE_ENV defaults of `vite` and `vite preview`
+    const config = command === 'preview'
+        ? await resolveConfig(inlineConfig, 'serve', 'production', 'production', true)
+        : await resolveConfig(inlineConfig, 'serve');
+    const address = getViteServerAddress(command === 'preview'
+        ? { ...config.preview, host: config.preview.host ?? config.server.host }
+        : config.server, flags, command);
+    if (address)
+        await waitForAddress(address);
+}
+async function waitForAddress({ port, host }) {
+    const hosts = host ? [host] : ['127.0.0.1', '::1'];
+    while (!(await Promise.any(hosts.map((h) => connects(port, h))).catch(() => false))) {
+        await new Promise((r) => setTimeout(r, 250));
+    }
+}
+function connects(port, host) {
+    return new Promise((resolve, reject) => {
+        const socket = (0, net_1.createConnection)({ port, host });
+        socket.once('connect', () => {
+            socket.destroy();
+            resolve(true);
+        });
+        socket.once('error', (e) => {
+            socket.destroy();
+            reject(e);
+        });
+    });
+}

package/dist/src/utils/generator-utils.d.ts

@@ -10,6 +10,7 @@ export declare function findExistingJsBuildTargetInProject(targets: {
     supported?: string;
     unsupported?: string;
 };
+export declare function assertNoRemovedExecutorTargets(projectName: string, targets: Record<string, TargetConfiguration> | undefined): void;
 export declare function editTsConfig(tree: Tree, options: ViteConfigurationGeneratorSchema): void;
 export declare function deleteWebpackConfig(tree: Tree, projectRoot: string, webpackConfigFilePath?: string): void;
 export declare function moveAndEditIndexHtml(tree: Tree, options: ViteConfigurationGeneratorSchema): void;

package/dist/src/utils/generator-utils.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.findExistingJsBuildTargetInProject = findExistingJsBuildTargetInProject;
+exports.assertNoRemovedExecutorTargets = assertNoRemovedExecutorTargets;
 exports.editTsConfig = editTsConfig;
 exports.deleteWebpackConfig = deleteWebpackConfig;
 exports.moveAndEditIndexHtml = moveAndEditIndexHtml;
@@ -18,7 +19,7 @@ const versions_1 = require("./versions");
 function findExistingJsBuildTargetInProject(targets) {
     const output = {};
     const supportedExecutors = {
-        build: ['@nx/js:babel', '@nx/js:swc', '@nx/rollup:rollup'],
+        build: ['@nx/js:swc'],
     };
     const unsupportedExecutors = [
         '@nx/angular:ng-packagr-lite',
@@ -62,6 +63,24 @@ function findExistingJsBuildTargetInProject(targets) {
     }
     return output;
 }
+// A leftover target on one of these can't run, and it shadows the inferred
+// target with the same name, so converting around it leaves a broken project.
+const removedConvertibleExecutors = [
+    '@nx/rollup:rollup',
+    '@nx/vite:build',
+    '@nx/vite:dev-server',
+    '@nx/vite:preview-server',
+    '@nx/webpack:dev-server',
+    '@nx/webpack:webpack',
+];
+function assertNoRemovedExecutorTargets(projectName, targets) {
+    const removedTargets = Object.entries(targets ?? {})
+        .filter(([, target]) => removedConvertibleExecutors.includes(target.executor))
+        .map(([targetName, target]) => `${targetName} (${target.executor})`);
+    if (removedTargets.length) {
+        throw new Error(`The project ${projectName} has targets using removed executors: ${removedTargets.join(', ')}. Convert them to inferred targets first, for example with "nx g @nx/workspace:infer-targets --project=${projectName}".`);
+    }
+}
 function editTsConfig(tree, options) {
     const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, options.project);
     let tsconfigPath = (0, devkit_1.joinPathFragments)(projectConfig.root, 'tsconfig.json');
@@ -224,6 +243,11 @@ function createOrEditViteConfig(tree, options, onlyVitest, projectAlreadyHasVite
     if (!onlyVitest && options.includeLib) {
         plugins.push(`dts({ entryRoot: 'src', tsconfigPath: path.join(import.meta.dirname, 'tsconfig.lib.json')${!isTsSolutionSetup ? ', pathsToAliases: false' : ''} })`);
     }
+    // Lets the inferred serve and preview targets know when the server is up
+    if (!onlyVitest && !options.includeLib) {
+        imports.push(`import { nxReadySignal } from '@nx/vite/plugins/nx-ready-signal.plugin'`);
+        plugins.push('nxReadySignal()');
+    }
     const reportsDirectory = isTsSolutionSetup
         ? './test-output/vitest/coverage'
         : projectRoot === '.'
@@ -313,16 +337,10 @@ function normalizeViteConfigFilePathWithTree(tree, projectRoot, configFile) {
                     : undefined;
 }
 function getViteConfigPathForProject(tree, projectName, target) {
-    let viteConfigPath;
     const { targets, root } = (0, devkit_1.readProjectConfiguration)(tree, projectName);
-    if (target) {
-        viteConfigPath = targets?.[target]?.options?.configFile;
-    }
-    else {
-        const config = Object.values(targets).find((config) => config.executor === '@nrwl/nx:build' ||
-            config.executor === '@nrwl/vite:build');
-        viteConfigPath = config?.options?.configFile;
-    }
+    const viteConfigPath = target
+        ? targets?.[target]?.options?.configFile
+        : undefined;
     return normalizeViteConfigFilePathWithTree(tree, root, viteConfigPath);
 }
 async function handleUnsupportedUserProvidedTargets(userProvidedTargetIsUnsupported, userProvidedTargetName, validFoundTargetName) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/vite",
-  "version": "24.0.0-beta.3",
+  "version": "24.0.0-beta.4",
   "private": false,
   "type": "commonjs",
   "files": [
@@ -36,11 +36,17 @@
       "plugins/nx-copy-assets.plugin": [
         "dist/plugins/nx-copy-assets.plugin.d.ts"
       ],
+      "plugins/nx-ready-signal.plugin": [
+        "dist/plugins/nx-ready-signal.plugin.d.ts"
+      ],
       "plugins/nx-tsconfig-paths.plugin": [
         "dist/plugins/nx-tsconfig-paths.plugin.d.ts"
       ],
       "plugins/rollup-replace-files.plugin": [
         "dist/plugins/rollup-replace-files.plugin.d.ts"
+      ],
+      "ready-check": [
+        "dist/ready-check.d.ts"
       ]
     }
   },
@@ -59,6 +65,11 @@
       "types": "./dist/plugin.d.ts",
       "default": "./dist/plugin.js"
     },
+    "./ready-check": {
+      "@nx/nx-source": "./ready-check.ts",
+      "types": "./dist/ready-check.d.ts",
+      "default": "./dist/ready-check.js"
+    },
     "./executors": {
       "@nx/nx-source": "./executors.ts",
       "types": "./dist/executors.d.ts",
@@ -69,6 +80,11 @@
       "types": "./dist/plugins/nx-copy-assets.plugin.d.ts",
       "default": "./dist/plugins/nx-copy-assets.plugin.js"
     },
+    "./plugins/nx-ready-signal.plugin": {
+      "@nx/nx-source": "./plugins/nx-ready-signal.plugin.ts",
+      "types": "./dist/plugins/nx-ready-signal.plugin.d.ts",
+      "default": "./dist/plugins/nx-ready-signal.plugin.js"
+    },
     "./plugins/nx-tsconfig-paths.plugin": {
       "@nx/nx-source": "./plugins/nx-tsconfig-paths.plugin.ts",
       "types": "./dist/plugins/nx-tsconfig-paths.plugin.d.ts",
@@ -94,18 +110,18 @@
     "supportsOptionalMigrations": true
   },
   "dependencies": {
-    "@nx/devkit": "24.0.0-beta.3",
+    "@nx/devkit": "24.0.0-beta.4",
     "@phenomnomnominal/tsquery": "~6.2.0",
-    "@nx/js": "24.0.0-beta.3",
-    "@nx/vitest": "24.0.0-beta.3",
+    "@nx/js": "24.0.0-beta.4",
+    "@nx/vitest": "24.0.0-beta.4",
     "picomatch": "4.0.4",
     "semver": "^7.6.3",
     "tslib": "^2.3.0",
     "ajv": "^8.0.0"
   },
   "devDependencies": {
-    "@nx/eslint": "24.0.0-beta.3",
-    "nx": "24.0.0-beta.3"
+    "@nx/eslint": "24.0.0-beta.4",
+    "nx": "24.0.0-beta.4"
   },
   "peerDependencies": {
     "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0"