@nx/rspack 20.1.0 → 20.2.0-beta.0

package/src/plugins/utils/plugins/rspack-nx-build-coordination-plugin.js

@@ -0,0 +1,94 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RspackNxBuildCoordinationPlugin = void 0;
+const child_process_1 = require("child_process");
+const client_1 = require("nx/src/daemon/client/client");
+const watch_1 = require("nx/src/command-line/watch/watch");
+const output_1 = require("nx/src/utils/output");
+class RspackNxBuildCoordinationPlugin {
+    constructor(buildCmd, skipInitialBuild) {
+        this.buildCmd = buildCmd;
+        this.currentlyRunning = 'none';
+        this.buildCmdProcess = null;
+        if (!skipInitialBuild) {
+            this.buildChangedProjects();
+        }
+        if ((0, client_1.isDaemonEnabled)()) {
+            this.startWatchingBuildableLibs();
+        }
+        else {
+            output_1.output.warn({
+                title: 'Nx Daemon is not enabled. Buildable libs will not be rebuilt on file changes.',
+            });
+        }
+    }
+    apply(compiler) {
+        compiler.hooks.beforeCompile.tapPromise('IncrementalDevServerPlugin', async () => {
+            while (this.currentlyRunning === 'nx-build') {
+                await sleep(50);
+            }
+            this.currentlyRunning = 'rspack-build';
+        });
+        compiler.hooks.done.tapPromise('IncrementalDevServerPlugin', async () => {
+            this.currentlyRunning = 'none';
+        });
+    }
+    async startWatchingBuildableLibs() {
+        const unregisterFileWatcher = await this.createFileWatcher();
+        process.on('exit', () => {
+            unregisterFileWatcher();
+        });
+    }
+    async buildChangedProjects() {
+        while (this.currentlyRunning === 'rspack-build') {
+            await sleep(50);
+        }
+        this.currentlyRunning = 'nx-build';
+        try {
+            return await new Promise((res) => {
+                this.buildCmdProcess = (0, child_process_1.exec)(this.buildCmd, {
+                    windowsHide: false,
+                });
+                this.buildCmdProcess.stdout.pipe(process.stdout);
+                this.buildCmdProcess.stderr.pipe(process.stderr);
+                this.buildCmdProcess.on('exit', () => {
+                    res();
+                });
+                this.buildCmdProcess.on('error', () => {
+                    res();
+                });
+            });
+        }
+        finally {
+            this.currentlyRunning = 'none';
+            this.buildCmdProcess = null;
+        }
+    }
+    createFileWatcher() {
+        const runner = new watch_1.BatchFunctionRunner(() => this.buildChangedProjects());
+        return client_1.daemonClient.registerFileWatcher({
+            watchProjects: 'all',
+        }, (err, { changedProjects, changedFiles }) => {
+            if (err === 'closed') {
+                output_1.output.error({
+                    title: 'Watch connection closed',
+                    bodyLines: [
+                        'The daemon has closed the connection to this watch process.',
+                        'Please restart your watch command.',
+                    ],
+                });
+                process.exit(1);
+            }
+            if (this.buildCmdProcess) {
+                this.buildCmdProcess.kill(2);
+                this.buildCmdProcess = null;
+            }
+            // Queue a build
+            runner.enqueue(changedProjects, changedFiles);
+        });
+    }
+}
+exports.RspackNxBuildCoordinationPlugin = RspackNxBuildCoordinationPlugin;
+function sleep(time) {
+    return new Promise((resolve) => setTimeout(resolve, time));
+}

package/src/plugins/utils/plugins/stats-json-plugin.d.ts

@@ -0,0 +1,4 @@
+import { Compiler } from '@rspack/core';
+export declare class StatsJsonPlugin {
+    apply(compiler: Compiler): void;
+}

package/src/plugins/utils/plugins/stats-json-plugin.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatsJsonPlugin = void 0;
+const core_1 = require("@rspack/core");
+class StatsJsonPlugin {
+    apply(compiler) {
+        compiler.hooks.emit.tap('StatsJsonPlugin', (compilation) => {
+            const data = JSON.stringify(compilation.getStats().toJson('verbose'));
+            compilation.assets[`stats.json`] = new core_1.sources.RawSource(data);
+        });
+    }
+}
+exports.StatsJsonPlugin = StatsJsonPlugin;

package/src/utils/config.js

@@ -14,10 +14,10 @@ function composePlugins(...plugins) {
     return Object.assign(async function combined(config, ctx) {
         // Rspack may be calling us as a standard config function.
         // Build up Nx context from environment variables.
-        // This is to enable `@nx/webpack/plugin` to work with existing projects.
+        // This is to enable `@nx/rspack/plugin` to work with existing projects.
         if (ctx['env']) {
             ensureNxRspackExecutionContext(ctx);
-            // Build this from scratch since what webpack passes us is the env, not config,
+            // Build this from scratch since what rspack passes us is the env, not config,
             // and `withNX()` creates a new config object anyway.
             config = {};
         }
@@ -53,6 +53,7 @@ function ensureNxRspackExecutionContext(ctx) {
         // These aren't actually needed since NxRspackPlugin and withNx both support them being undefined.
         assets: undefined,
         outputFileName: undefined,
+        outputPath: undefined,
         rspackConfig: undefined,
     };
     ctx.context ??= {

package/src/utils/create-compiler.js

@@ -1,19 +1,40 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createCompiler = createCompiler;
 exports.isMultiCompiler = isMultiCompiler;
-const tslib_1 = require("tslib");
 const core_1 = require("@rspack/core");
-const path = tslib_1.__importStar(require("path"));
 const resolve_user_defined_rspack_config_1 = require("./resolve-user-defined-rspack-config");
 async function createCompiler(options, context) {
-    const pathToConfig = path.join(context.root, options.rspackConfig);
+    const pathToConfig = options.rspackConfig;
     let userDefinedConfig = {};
     if (options.tsConfig) {
         userDefinedConfig = (0, resolve_user_defined_rspack_config_1.resolveUserDefinedRspackConfig)(pathToConfig, options.tsConfig);
     }
     else {
-        userDefinedConfig = await Promise.resolve(`${pathToConfig}`).then(s => tslib_1.__importStar(require(s))).then((x) => x.default || x);
+        userDefinedConfig = await Promise.resolve(`${pathToConfig}`).then(s => __importStar(require(s))).then((x) => x.default || x);
     }
     if (typeof userDefinedConfig.then === 'function') {
         userDefinedConfig = await userDefinedConfig;

package/src/utils/get-copy-patterns.js

@@ -5,7 +5,7 @@ function getCopyPatterns(assets) {
     return assets.map((asset) => {
         return {
             context: asset.input,
-            // Now we remove starting slash to make Webpack place it from the output root.
+            // Now we remove starting slash to make rspack place it from the output root.
             to: asset.output,
             from: asset.glob,
             globOptions: {

package/src/utils/module-federation/share.js

@@ -54,7 +54,7 @@ function shareWorkspaceLibraries(workspaceLibs, tsConfigPath = process.env.NX_TS
     return {
         getAliases: () => pathMappings.reduce((aliases, library) => ({
             ...aliases,
-            // If the library path ends in a wildcard, remove it as webpack can't handle this in resolve.alias
+            // If the library path ends in a wildcard, remove it as rspack can't handle this in resolve.alias
             // e.g. path/to/my/lib/* -> path/to/my/lib
             [library.name]: library.path.replace(/\/\*$/, ''),
         }), {}),
@@ -108,7 +108,7 @@ function shareWorkspaceLibraries(workspaceLibs, tsConfigPath = process.env.NX_TS
                            * library.path is usually in the form of "/Users/username/path/to/Workspace/path/to/library"
                            *
                            * When a wildcard is used in the TS path mappings, we want to get everything after the import to
-                           * re-route the request correctly inline with the webpack resolve.alias
+                           * re-route the request correctly inline with the rspack resolve.alias
                            */
                             (0, path_1.join)(library.name, req.request.split(library.path.replace(devkit_1.workspaceRoot, '').replace('/*', ''))[1])
                         : library.name;

package/src/utils/module-federation/with-module-federation/utils.js

@@ -28,7 +28,7 @@ function getFunctionDeterminateRemoteUrl(isServer = false) {
         const serveTarget = remoteConfiguration?.targets?.[target];
         if (!serveTarget) {
             throw new Error(`Cannot automatically determine URL of remote (${remote}). Looked for property "host" in the project's "${serveTarget}" target.\n
-      You can also use the tuple syntax in your webpack config to configure your remotes. e.g. \`remotes: [['remote1', 'http://localhost:4201']]\``);
+      You can also use the tuple syntax in your rspack config to configure your remotes. e.g. \`remotes: [['remote1', 'http://localhost:4201']]\``);
         }
         const host = serveTarget.options?.host ??
             `http${serveTarget.options.ssl ? 's' : ''}://localhost`;

package/src/utils/normalize-assets.js

@@ -34,7 +34,7 @@ function normalizeAssets(assets, root, sourceRoot) {
             return {
                 ...asset,
                 input: resolvedAssetPath,
-                // Now we remove starting slash to make Webpack place it from the output root.
+                // Now we remove starting slash to make rspack place it from the output root.
                 output: asset.output.replace(/^\//, ''),
             };
         }

package/src/utils/with-nx.d.ts

@@ -1,3 +1,8 @@
-import { Configuration } from '@rspack/core';
-import { NxRspackExecutionContext } from './config';
-export declare function withNx(_opts?: {}): (config: Configuration, { options, context }: NxRspackExecutionContext) => Configuration;
+import { NxAppRspackPluginOptions } from '../plugins/utils/models';
+import { NxComposableRspackPlugin } from './config';
+export type WithNxOptions = Partial<NxAppRspackPluginOptions>;
+/**
+ * @param {WithNxOptions} pluginOptions
+ * @returns {NxComposableRspackPlugin}
+ */
+export declare function withNx(pluginOptions?: WithNxOptions): NxComposableRspackPlugin;

package/src/utils/with-nx.js

@@ -1,191 +1,33 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.withNx = withNx;
-const tslib_1 = require("tslib");
-const core_1 = require("@rspack/core");
-const fs_1 = require("fs");
-const license_webpack_plugin_1 = require("license-webpack-plugin");
-const path = tslib_1.__importStar(require("path"));
-const path_1 = require("path");
-const generate_package_json_plugin_1 = require("../plugins/generate-package-json-plugin");
-const get_copy_patterns_1 = require("./get-copy-patterns");
 const normalize_assets_1 = require("./normalize-assets");
-function withNx(_opts = {}) {
+const apply_base_config_1 = require("../plugins/utils/apply-base-config");
+const processed = new Set();
+/**
+ * @param {WithNxOptions} pluginOptions
+ * @returns {NxComposableRspackPlugin}
+ */
+function withNx(pluginOptions = {}) {
     return function makeConfig(config, { options, context }) {
-        const isProd = process.env.NODE_ENV === 'production' || options.mode === 'production';
-        const project = context.projectGraph.nodes[context.projectName];
-        const sourceRoot = path.join(context.root, project.data.sourceRoot);
-        // eslint-disable-next-line @typescript-eslint/no-var-requires
-        const tsconfigPaths = require('tsconfig-paths');
-        const { paths } = tsconfigPaths.loadConfig(options.tsConfig);
-        const alias = Object.keys(paths).reduce((acc, k) => {
-            acc[k] = path.join(context.root, paths[k][0]);
-            return acc;
-        }, {});
-        const plugins = config.plugins ?? [];
-        if (options.extractLicenses) {
-            /**
-             * Needed to prevent an issue with Rspack and Workspaces where the
-             * workspace's root package.json file is added to the dependency tree
-             */
-            let rootPackageJsonName;
-            const pathToRootPackageJson = (0, path_1.join)(context.root, 'package.json');
-            if ((0, fs_1.existsSync)(pathToRootPackageJson)) {
-                try {
-                    const rootPackageJson = JSON.parse((0, fs_1.readFileSync)(pathToRootPackageJson, 'utf-8'));
-                    rootPackageJsonName = rootPackageJson.name;
-                }
-                catch {
-                    // do nothing
-                }
-            }
-            plugins.push(new license_webpack_plugin_1.LicenseWebpackPlugin({
-                stats: {
-                    warnings: false,
-                    errors: false,
-                },
-                outputFilename: `3rdpartylicenses.txt`,
-                /**
-                 * Needed to prevent an issue with Rspack and Workspaces where the
-                 * workspace's root package.json file is added to the dependency tree
-                 */
-                excludedPackageTest: (packageName) => {
-                    if (!rootPackageJsonName) {
-                        return false;
-                    }
-                    return packageName === rootPackageJsonName;
-                },
-            }));
-        }
-        if (options.generatePackageJson) {
-            const mainOutputFile = options.main.split('/').pop().split('.')[0] + '.js';
-            plugins.push(new generate_package_json_plugin_1.GeneratePackageJsonPlugin({
-                tsConfig: options.tsConfig,
-                outputFileName: options.outputFileName ?? mainOutputFile,
-            }, context));
-        }
-        plugins.push(new core_1.rspack.CopyRspackPlugin({
-            patterns: (0, get_copy_patterns_1.getCopyPatterns)((0, normalize_assets_1.normalizeAssets)(options.assets, context.root, sourceRoot)),
-        }));
-        plugins.push(new core_1.rspack.ProgressPlugin());
-        options.fileReplacements.forEach((item) => {
-            alias[item.replace] = item.with;
-        });
-        const externals = {};
-        let externalsType;
-        if (options.target === 'node') {
-            const projectDeps = context.projectGraph.dependencies[context.projectName];
-            for (const dep of Object.values(projectDeps)) {
-                const externalNode = context.projectGraph.externalNodes[dep.target];
-                if (externalNode) {
-                    externals[externalNode.data.packageName] =
-                        externalNode.data.packageName;
-                }
-            }
-            externalsType = 'commonjs';
-        }
-        const updated = {
-            ...config,
-            target: options.target,
-            mode: options.mode,
-            entry: {},
-            context: (0, path_1.join)(context.root, context.projectGraph.nodes[context.projectName].data.root),
-            devtool: options.sourceMap === 'hidden'
-                ? 'hidden-source-map'
-                : options.sourceMap
-                    ? 'source-map'
-                    : false,
-            output: {
-                path: path.join(context.root, options.outputPath),
-                publicPath: '/',
-                filename: isProd && options.target !== 'node'
-                    ? '[name].[contenthash:8].js'
-                    : '[name].js',
-                chunkFilename: isProd && options.target !== 'node'
-                    ? '[name].[contenthash:8].js'
-                    : '[name].js',
-                cssFilename: isProd && options.target !== 'node'
-                    ? '[name].[contenthash:8].css'
-                    : '[name].css',
-                cssChunkFilename: isProd && options.target !== 'node'
-                    ? '[name].[contenthash:8].css'
-                    : '[name].css',
-                assetModuleFilename: isProd && options.target !== 'node'
-                    ? '[name].[contenthash:8][ext]'
-                    : '[name][ext]',
-            },
-            devServer: {
-                ...(config.devServer ?? {}),
-                port: config.devServer?.port ?? 4200,
-                hot: config.devServer?.hot ?? true,
-                devMiddleware: {
-                    ...(config.devServer?.devMiddleware ?? {}),
-                    stats: true,
-                },
-            },
-            module: {
-                rules: [
-                    {
-                        test: /\.js$/,
-                        loader: 'builtin:swc-loader',
-                        exclude: /node_modules/,
-                        options: {
-                            jsc: {
-                                parser: {
-                                    syntax: 'ecmascript',
-                                },
-                                externalHelpers: true,
-                            },
-                        },
-                        type: 'javascript/auto',
-                    },
-                    {
-                        test: /\.ts$/,
-                        loader: 'builtin:swc-loader',
-                        exclude: /node_modules/,
-                        options: {
-                            jsc: {
-                                parser: {
-                                    syntax: 'typescript',
-                                    decorators: true,
-                                },
-                                transform: {
-                                    legacyDecorator: true,
-                                    decoratorMetadata: true,
-                                },
-                                externalHelpers: true,
-                            },
-                        },
-                        type: 'javascript/auto',
-                    },
-                ],
-            },
-            plugins: plugins,
-            resolve: {
-                // There are some issues resolving workspace libs in a monorepo.
-                // It looks to be an issue with rspack itself, but will check back after Nx 16 release
-                // once I can reproduce a small example repo with rspack only.
-                alias,
-                // We need to define the extensions that rspack can resolve
-                extensions: ['...', '.ts', '.tsx', '.jsx'],
-                // tsConfigPath: path.join(context.root, options.tsConfig),
-            },
-            infrastructureLogging: {
-                debug: false,
-            },
-            externals,
-            externalsType,
-            stats: {
-                colors: true,
-                preset: 'normal',
-            },
-        };
-        const mainEntry = options.main
-            ? options.outputFileName
-                ? path.parse(options.outputFileName).name
-                : 'main'
-            : 'main';
-        updated.entry[mainEntry] = path.resolve(context.root, options.main);
-        return updated;
+        if (processed.has(config))
+            return config;
+        (0, apply_base_config_1.applyBaseConfig)({
+            ...options,
+            ...pluginOptions,
+            target: options.target ?? 'web',
+            assets: options.assets
+                ? options.assets
+                : pluginOptions.assets
+                    ? (0, normalize_assets_1.normalizeAssets)(pluginOptions.assets, options.root, options.sourceRoot)
+                    : [],
+            root: context.root,
+            projectName: context.projectName,
+            targetName: context.targetName,
+            configurationName: context.configurationName,
+            projectGraph: context.projectGraph,
+        }, config);
+        processed.add(config);
+        return config;
     };
 }

package/src/utils/with-react.d.ts

@@ -1,3 +1,8 @@
 import { Configuration } from '@rspack/core';
 import { NxRspackExecutionContext } from './config';
-export declare function withReact(opts?: {}): (config: Configuration, { options, context }: NxRspackExecutionContext) => Configuration;
+import { WithWebOptions } from './with-web';
+import { SvgrOptions } from '../plugins/utils/models';
+export interface WithReactOptions extends WithWebOptions {
+    svgr?: boolean | SvgrOptions;
+}
+export declare function withReact(opts?: WithReactOptions): (config: Configuration, { options, context }: NxRspackExecutionContext) => Configuration;

package/src/utils/with-react.js

@@ -2,68 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.withReact = withReact;
 const with_web_1 = require("./with-web");
+const apply_react_config_1 = require("../plugins/utils/apply-react-config");
 function withReact(opts = {}) {
     return function makeConfig(config, { options, context }) {
-        const isDev = process.env.NODE_ENV === 'development' || options.mode === 'development';
         config = (0, with_web_1.withWeb)({ ...opts, cssModules: true })(config, {
             options,
             context,
         });
-        // eslint-disable-next-line @typescript-eslint/no-var-requires
-        const ReactRefreshPlugin = require('@rspack/plugin-react-refresh');
-        const react = {
-            runtime: 'automatic',
-            development: isDev,
-            refresh: isDev,
-        };
-        return {
-            ...config,
-            plugins: [
-                ...(config.plugins || []),
-                isDev && new ReactRefreshPlugin(),
-            ].filter(Boolean),
-            module: {
-                ...config.module,
-                rules: [
-                    ...(config.module.rules || []),
-                    {
-                        test: /\.jsx$/,
-                        loader: 'builtin:swc-loader',
-                        exclude: /node_modules/,
-                        options: {
-                            jsc: {
-                                parser: {
-                                    syntax: 'ecmascript',
-                                    jsx: true,
-                                },
-                                transform: {
-                                    react,
-                                },
-                                externalHelpers: true,
-                            },
-                        },
-                        type: 'javascript/auto',
-                    },
-                    {
-                        test: /\.tsx$/,
-                        loader: 'builtin:swc-loader',
-                        exclude: /node_modules/,
-                        options: {
-                            jsc: {
-                                parser: {
-                                    syntax: 'typescript',
-                                    tsx: true,
-                                },
-                                transform: {
-                                    react,
-                                },
-                                externalHelpers: true,
-                            },
-                        },
-                        type: 'javascript/auto',
-                    },
-                ],
-            },
-        };
+        (0, apply_react_config_1.applyReactConfig)(opts, config);
+        return config;
     };
 }

package/src/utils/with-web.d.ts

@@ -10,7 +10,6 @@ export interface WithWebOptions {
     postcssConfig?: string;
     scripts?: Array<ExtraEntryPointClass | string>;
     styles?: Array<ExtraEntryPointClass | string>;
-    subresourceIntegrity?: boolean;
     stylePreprocessorOptions?: {
         includePaths?: string[];
     };

package/src/utils/with-web.js

@@ -23,7 +23,7 @@ function withWeb(pluginOptions = {}) {
 }
 function getClientEnvironment(mode) {
     // Grab NODE_ENV and NX_PUBLIC_* environment variables and prepare them to be
-    // injected into the application via DefinePlugin in webpack configuration.
+    // injected into the application via DefinePlugin in rspack configuration.
     const nxPublicKeyRegex = /^NX_PUBLIC_/i;
     const raw = Object.keys(process.env)
         .filter((key) => nxPublicKeyRegex.test(key))
@@ -31,7 +31,7 @@ function getClientEnvironment(mode) {
         env[key] = process.env[key];
         return env;
     }, {});
-    // Stringify all values so we can feed into webpack DefinePlugin
+    // Stringify all values so we can feed into rspack DefinePlugin
     const stringified = {
         'process.env': Object.keys(raw).reduce((env, key) => {
             env[key] = JSON.stringify(raw[key]);