@nx/rspack 20.1.0 → 20.2.0-beta.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nx/rspack",
   "description": "The Nx Plugin for Rspack contains executors and generators that support building applications using Rspack.",
-  "version": "20.1.0",
+  "version": "20.2.0-beta.0",
   "type": "commonjs",
   "repository": {
     "type": "git",
@@ -24,31 +24,33 @@
   "generators": "./generators.json",
   "executors": "./executors.json",
   "dependencies": {
-    "@nx/js": "20.1.0",
-    "@nx/devkit": "20.1.0",
-    "@nx/web": "20.1.0",
+    "@nx/js": "20.2.0-beta.0",
+    "@nx/devkit": "20.2.0-beta.0",
+    "@nx/web": "20.2.0-beta.0",
     "@phenomnomnominal/tsquery": "~5.0.1",
     "@rspack/core": "^1.0.4",
     "@rspack/dev-server": "^1.0.4",
     "@rspack/plugin-react-refresh": "^1.0.0",
     "autoprefixer": "^10.4.9",
+    "browserslist": "^4.21.4",
     "chalk": "~4.1.0",
     "css-loader": "^6.4.0",
     "enquirer": "~2.3.6",
     "express": "^4.19.2",
+    "fork-ts-checker-webpack-plugin": "7.2.13",
     "http-proxy-middleware": "^3.0.3",
     "less-loader": "11.1.0",
     "license-webpack-plugin": "^4.0.2",
     "loader-utils": "^2.0.3",
     "sass": "^1.42.1",
     "sass-loader": "^12.2.0",
+    "source-map-loader": "^5.0.0",
     "style-loader": "^3.3.0",
     "postcss-import": "~14.1.0",
     "postcss-loader": "^8.1.1",
     "postcss": "^8.4.38",
-    "tsconfig-paths": "^4.1.2",
     "tslib": "^2.3.0",
-    "webpack-subresource-integrity": "^5.1.0"
+    "webpack-node-externals": "^3.0.0"
   },
   "peerDependencies": {
     "@module-federation/enhanced": "~0.6.0",

package/src/executors/dev-server/dev-server.impl.js

@@ -7,6 +7,7 @@ const dev_server_1 = require("@rspack/dev-server");
 const create_compiler_1 = require("../../utils/create-compiler");
 const mode_utils_1 = require("../../utils/mode-utils");
 const get_dev_server_config_1 = require("./lib/get-dev-server-config");
+const normalize_options_1 = require("../rspack/lib/normalize-options");
 async function* runExecutor(options, context) {
     process.env.NODE_ENV ??= options.mode ?? 'development';
     if ((0, mode_utils_1.isMode)(process.env.NODE_ENV)) {
@@ -14,8 +15,17 @@ async function* runExecutor(options, context) {
     }
     const buildTarget = (0, devkit_1.parseTargetString)(options.buildTarget, context.projectGraph);
     const buildOptions = (0, devkit_1.readTargetOptions)(buildTarget, context);
-    let devServerConfig = (0, get_dev_server_config_1.getDevServerOptions)(context.root, options, buildOptions);
-    const compiler = await (0, create_compiler_1.createCompiler)({ ...buildOptions, devServer: devServerConfig, mode: options.mode }, context);
+    process.env.NX_BUILD_LIBS_FROM_SOURCE = `${buildOptions.buildLibsFromSource}`;
+    process.env.NX_BUILD_TARGET = options.buildTarget;
+    const metadata = context.projectsConfigurations.projects[context.projectName];
+    const sourceRoot = metadata.sourceRoot;
+    const normalizedBuildOptions = (0, normalize_options_1.normalizeOptions)(buildOptions, context.root, metadata.root, sourceRoot);
+    let devServerConfig = (0, get_dev_server_config_1.getDevServerOptions)(context.root, options, normalizedBuildOptions);
+    const compiler = await (0, create_compiler_1.createCompiler)({
+        ...normalizedBuildOptions,
+        devServer: devServerConfig,
+        mode: options.mode,
+    }, context);
     // Use the first one if it's MultiCompiler
     // https://webpack.js.org/configuration/dev-server/#root:~:text=Be%20aware%20that%20when%20exporting%20multiple%20configurations%20only%20the%20devServer%20options%20for%20the%20first%20configuration%20will%20be%20taken%20into%20account%20and%20used%20for%20all%20the%20configurations%20in%20the%20array.
     const firstCompiler = (0, create_compiler_1.isMultiCompiler)(compiler)

package/src/executors/dev-server/lib/get-dev-server-config.js

@@ -22,7 +22,7 @@ function getDevServerOptions(root, serveOptions, buildOptions) {
     }
     const config = {
         host: serveOptions.host,
-        port: serveOptions.port,
+        port: serveOptions.port ?? 4200,
         headers: { 'Access-Control-Allow-Origin': '*' },
         historyApiFallback: {
             index: buildOptions.index &&

package/src/executors/rspack/lib/normalize-options.d.ts

@@ -0,0 +1,3 @@
+import type { RspackExecutorSchema, NormalizedRspackExecutorSchema } from '../schema';
+export declare function normalizeOptions(options: RspackExecutorSchema, root: string, projectRoot: string, sourceRoot: string): NormalizedRspackExecutorSchema;
+export declare function normalizePluginPath(pluginPath: void | string, root: string): string;

package/src/executors/rspack/lib/normalize-options.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeOptions = normalizeOptions;
+exports.normalizePluginPath = normalizePluginPath;
+const path_1 = require("path");
+const normalize_options_1 = require("../../../plugins/utils/plugins/normalize-options");
+function normalizeOptions(options, root, projectRoot, sourceRoot) {
+    const normalizedOptions = {
+        ...options,
+        root,
+        projectRoot,
+        sourceRoot,
+        target: options.target ?? 'web',
+        outputFileName: options.outputFileName ?? 'main.js',
+        rspackConfig: normalizePluginPath(options.rspackConfig, root),
+        fileReplacements: (0, normalize_options_1.normalizeFileReplacements)(root, options.fileReplacements),
+        optimization: typeof options.optimization !== 'object'
+            ? {
+                scripts: options.optimization,
+                styles: options.optimization,
+            }
+            : options.optimization,
+    };
+    if (options.assets) {
+        normalizedOptions.assets = (0, normalize_options_1.normalizeAssets)(options.assets, root, sourceRoot, projectRoot, false // executor assets are relative to workspace root for consistency
+        );
+    }
+    return normalizedOptions;
+}
+function normalizePluginPath(pluginPath, root) {
+    if (!pluginPath) {
+        return '';
+    }
+    try {
+        return require.resolve(pluginPath);
+    }
+    catch {
+        return (0, path_1.resolve)(root, pluginPath);
+    }
+}

package/src/executors/rspack/rspack.impl.js

@@ -9,6 +9,7 @@ const fs_1 = require("fs");
 const path = tslib_1.__importStar(require("path"));
 const create_compiler_1 = require("../../utils/create-compiler");
 const mode_utils_1 = require("../../utils/mode-utils");
+const normalize_options_1 = require("./lib/normalize-options");
 async function* runExecutor(options, context) {
     process.env.NODE_ENV ??= options.mode ?? 'production';
     options.target ??= 'web';
@@ -23,7 +24,10 @@ async function* runExecutor(options, context) {
         force: true,
         recursive: true,
     });
-    const compiler = await (0, create_compiler_1.createCompiler)(options, context);
+    const metadata = context.projectsConfigurations.projects[context.projectName];
+    const sourceRoot = metadata.sourceRoot;
+    const normalizedOptions = (0, normalize_options_1.normalizeOptions)(options, context.root, metadata.root, sourceRoot);
+    const compiler = await (0, create_compiler_1.createCompiler)(normalizedOptions, context);
     const iterable = (0, async_iterable_1.createAsyncIterable)(async ({ next, done }) => {
         if (options.watch) {
             const watcher = compiler.watch({}, async (err, stats) => {
@@ -45,7 +49,7 @@ async function* runExecutor(options, context) {
                 }
                 next({
                     success: !stats.hasErrors(),
-                    outfile: path.resolve(context.root, options.outputPath, 'main.js'),
+                    outfile: path.resolve(context.root, normalizedOptions.outputPath, 'main.js'),
                 });
             });
             registerCleanupCallback(() => {
@@ -75,7 +79,7 @@ async function* runExecutor(options, context) {
                     }
                     next({
                         success: !stats.hasErrors(),
-                        outfile: path.resolve(context.root, options.outputPath, 'main.js'),
+                        outfile: path.resolve(context.root, normalizedOptions.outputPath, 'main.js'),
                     });
                     done();
                 });

package/src/plugins/utils/apply-base-config.d.ts

@@ -0,0 +1,5 @@
+import { Configuration, RspackOptionsNormalized } from '@rspack/core';
+import { NormalizedNxAppRspackPluginOptions } from './models';
+export declare function applyBaseConfig(options: NormalizedNxAppRspackPluginOptions, config?: Partial<RspackOptionsNormalized | Configuration>, { useNormalizedEntry, }?: {
+    useNormalizedEntry?: boolean;
+}): void;

package/src/plugins/utils/apply-base-config.js

@@ -0,0 +1,348 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.applyBaseConfig = applyBaseConfig;
+const tslib_1 = require("tslib");
+const path = tslib_1.__importStar(require("path"));
+const license_webpack_plugin_1 = require("license-webpack-plugin");
+const core_1 = require("@rspack/core");
+const js_1 = require("@nx/js");
+const stats_json_plugin_1 = require("./plugins/stats-json-plugin");
+const generate_package_json_plugin_1 = require("./plugins/generate-package-json-plugin");
+const hash_format_1 = require("./hash-format");
+const nx_tsconfig_paths_rspack_plugin_1 = require("./plugins/nx-tsconfig-paths-rspack-plugin");
+const get_terser_ecma_version_1 = require("./get-terser-ecma-version");
+const nodeExternals = require("webpack-node-externals");
+const IGNORED_RSPACK_WARNINGS = [
+    /The comment file/i,
+    /could not find any license/i,
+];
+const extensions = ['...', '.ts', '.tsx', '.mjs', '.js', '.jsx'];
+const mainFields = ['module', 'main'];
+function applyBaseConfig(options, config = {}, { useNormalizedEntry, } = {}) {
+    // Defaults that was applied from executor schema previously.
+    options.deleteOutputPath ??= true;
+    options.externalDependencies ??= 'all';
+    options.fileReplacements ??= [];
+    options.memoryLimit ??= 2048;
+    options.transformers ??= [];
+    options.progress ??= true;
+    applyNxIndependentConfig(options, config);
+    // Some of the options only work during actual tasks, not when reading the rspack config during CreateNodes.
+    if (global.NX_GRAPH_CREATION)
+        return;
+    applyNxDependentConfig(options, config, { useNormalizedEntry });
+}
+function applyNxIndependentConfig(options, config) {
+    const isProd = process.env.NODE_ENV === 'production' || options.mode === 'production';
+    const hashFormat = (0, hash_format_1.getOutputHashFormat)(options.outputHashing);
+    config.context = path.join(options.root, options.projectRoot);
+    config.target ??= options.target;
+    config.node = false;
+    config.mode =
+        // When the target is Node avoid any optimizations, such as replacing `process.env.NODE_ENV` with build time value.
+        config.target === 'node'
+            ? 'none'
+            : // Otherwise, make sure it matches `process.env.NODE_ENV`.
+                // When mode is development or production, rspack will automatically
+                // configure DefinePlugin to replace `process.env.NODE_ENV` with the
+                // build-time value. Thus, we need to make sure it's the same value to
+                // avoid conflicts.
+                //
+                // When the NODE_ENV is something else (e.g. test), then set it to none
+                // to prevent extra behavior from rspack.
+                options.mode ??
+                    (process.env.NODE_ENV === 'development' ||
+                        process.env.NODE_ENV === 'production'
+                        ? process.env.NODE_ENV
+                        : 'none');
+    // When target is Node, the Webpack mode will be set to 'none' which disables in memory caching and causes a full rebuild on every change.
+    // So to mitigate this we enable in memory caching when target is Node and in watch mode.
+    config.cache = options.target === 'node' && options.watch ? true : undefined;
+    config.devtool =
+        options.sourceMap === 'hidden'
+            ? 'hidden-source-map'
+            : options.sourceMap
+                ? 'source-map'
+                : false;
+    config.output = {
+        ...(config.output ?? {}),
+        libraryTarget: config.output?.libraryTarget ??
+            (options.target === 'node' ? 'commonjs' : undefined),
+        path: config.output?.path ??
+            (options.outputPath
+                ? // If path is relative, it is relative from project root (aka cwd).
+                    // Otherwise, it is relative to workspace root (legacy behavior).
+                    options.outputPath.startsWith('.')
+                        ? path.join(options.root, options.projectRoot, options.outputPath)
+                        : path.join(options.root, options.outputPath)
+                : undefined),
+        filename: config.output?.filename ??
+            (options.outputHashing ? `[name]${hashFormat.script}.js` : '[name].js'),
+        chunkFilename: config.output?.chunkFilename ??
+            (options.outputHashing ? `[name]${hashFormat.chunk}.js` : '[name].js'),
+        hashFunction: config.output?.hashFunction ?? 'xxhash64',
+        // Disabled for performance
+        pathinfo: config.output?.pathinfo ?? false,
+    };
+    config.watch = options.watch;
+    config.watchOptions = {
+        poll: options.poll,
+    };
+    config.profile = options.statsJson;
+    config.performance = {
+        ...config.performance,
+        hints: false,
+    };
+    config.ignoreWarnings = [
+        (x) => IGNORED_RSPACK_WARNINGS.some((r) => typeof x === 'string' ? r.test(x) : r.test(x.message)),
+    ];
+    config.optimization = !isProd
+        ? undefined
+        : {
+            ...(config.optimization ?? {}),
+            sideEffects: true,
+            minimize: typeof options.optimization === 'object'
+                ? !!options.optimization.scripts
+                : !!options.optimization,
+            minimizer: [
+                new core_1.SwcJsMinimizerRspackPlugin({
+                    extractComments: false,
+                    minimizerOptions: {
+                        // this needs to be false to allow toplevel variables to be used in the global scope
+                        // important especially for module-federation which operates as such
+                        module: false,
+                        mangle: {
+                            keep_classnames: true,
+                        },
+                        format: {
+                            ecma: (0, get_terser_ecma_version_1.getTerserEcmaVersion)(path.join(options.root, options.projectRoot)),
+                            ascii_only: true,
+                            comments: false,
+                            webkit: true,
+                            safari10: true,
+                        },
+                    },
+                }),
+            ],
+            runtimeChunk: false,
+            concatenateModules: true,
+        };
+    config.stats = {
+        hash: true,
+        timings: false,
+        cached: false,
+        cachedAssets: false,
+        modules: false,
+        warnings: true,
+        errors: true,
+        colors: !options.verbose && !options.statsJson,
+        chunks: !options.verbose,
+        assets: !!options.verbose,
+        chunkOrigins: !!options.verbose,
+        chunkModules: !!options.verbose,
+        children: !!options.verbose,
+        reasons: !!options.verbose,
+        version: !!options.verbose,
+        errorDetails: !!options.verbose,
+        moduleTrace: !!options.verbose,
+        usedExports: !!options.verbose,
+    };
+    /**
+     * Initialize properties that get set when rspack is used during task execution.
+     * These properties may be used by consumers who expect them to not be undefined.
+     *
+     * When @nx/rspack/plugin resolves the config, it is not during a task, and therefore
+     * these values are not set, which can lead to errors being thrown when reading
+     * the rspack options from the resolved file.
+     */
+    config.entry ??= {};
+    config.resolve ??= {};
+    config.module ??= {};
+    config.plugins ??= [];
+    config.externals ??= [];
+}
+function applyNxDependentConfig(options, config, { useNormalizedEntry } = {}) {
+    const tsConfig = options.tsConfig ?? (0, js_1.getRootTsConfigPath)();
+    const plugins = [];
+    const executorContext = {
+        projectName: options.projectName,
+        targetName: options.targetName,
+        projectGraph: options.projectGraph,
+        configurationName: options.configurationName,
+        root: options.root,
+    };
+    plugins.push(new nx_tsconfig_paths_rspack_plugin_1.NxTsconfigPathsRspackPlugin({ ...options, tsConfig }));
+    if (!options?.skipTypeChecking) {
+        const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+        plugins.push(new ForkTsCheckerWebpackPlugin({
+            typescript: {
+                configFile: path.isAbsolute(tsConfig)
+                    ? tsConfig
+                    : path.join(options.root, tsConfig),
+                memoryLimit: options.memoryLimit || 2018,
+            },
+        }));
+    }
+    const entries = [];
+    if (options.main) {
+        const mainEntry = options.outputFileName
+            ? path.parse(options.outputFileName).name
+            : 'main';
+        entries.push({
+            name: mainEntry,
+            import: [path.resolve(options.root, options.main)],
+        });
+    }
+    if (options.additionalEntryPoints) {
+        for (const { entryName, entryPath } of options.additionalEntryPoints) {
+            entries.push({
+                name: entryName,
+                import: [path.resolve(options.root, entryPath)],
+            });
+        }
+    }
+    if (options.polyfills) {
+        entries.push({
+            name: 'polyfills',
+            import: [path.resolve(options.root, options.polyfills)],
+        });
+    }
+    config.entry ??= {};
+    entries.forEach((entry) => {
+        if (useNormalizedEntry) {
+            config.entry[entry.name] = { import: entry.import };
+        }
+        else {
+            config.entry[entry.name] = entry.import;
+        }
+    });
+    if (options.progress) {
+        plugins.push(new core_1.ProgressPlugin({ profile: options.verbose }));
+    }
+    if (options.extractLicenses) {
+        plugins.push(new license_webpack_plugin_1.LicenseWebpackPlugin({
+            stats: {
+                warnings: false,
+                errors: false,
+            },
+            perChunkOutput: false,
+            outputFilename: `3rdpartylicenses.txt`,
+        }));
+    }
+    if (Array.isArray(options.assets) && options.assets.length > 0) {
+        plugins.push(new core_1.CopyRspackPlugin({
+            patterns: options.assets.map((asset) => {
+                return {
+                    context: asset.input,
+                    // Now we remove starting slash to make Webpack place it from the output root.
+                    to: asset.output,
+                    from: asset.glob,
+                    globOptions: {
+                        ignore: [
+                            '.gitkeep',
+                            '**/.DS_Store',
+                            '**/Thumbs.db',
+                            ...(asset.ignore ?? []),
+                        ],
+                        dot: true,
+                    },
+                };
+            }),
+        }));
+    }
+    if (options.generatePackageJson && executorContext) {
+        plugins.push(new generate_package_json_plugin_1.GeneratePackageJsonPlugin({ ...options, tsConfig }));
+    }
+    if (options.statsJson) {
+        plugins.push(new stats_json_plugin_1.StatsJsonPlugin());
+    }
+    const externals = [];
+    if (options.target === 'node' && options.externalDependencies === 'all') {
+        const modulesDir = `${options.root}/node_modules`;
+        externals.push(nodeExternals({ modulesDir }));
+    }
+    else if (Array.isArray(options.externalDependencies)) {
+        externals.push(function (ctx, callback) {
+            if (options.externalDependencies.includes(ctx.request)) {
+                // not bundled
+                return callback(null, `commonjs ${ctx.request}`);
+            }
+            // bundled
+            callback();
+        });
+    }
+    config.resolve = {
+        ...config.resolve,
+        extensions: [...(config?.resolve?.extensions ?? []), ...extensions],
+        alias: {
+            ...(config.resolve?.alias ?? {}),
+            ...(options.fileReplacements?.reduce((aliases, replacement) => ({
+                ...aliases,
+                [replacement.replace]: replacement.with,
+            }), {}) ?? {}),
+        },
+        mainFields: config.resolve?.mainFields ?? mainFields,
+    };
+    config.externals = externals;
+    // Enabled for performance
+    config.cache = true;
+    config.module = {
+        ...config.module,
+        rules: [
+            ...(config?.module?.rules ?? []),
+            options.sourceMap && {
+                test: /\.js$/,
+                enforce: 'pre',
+                loader: require.resolve('source-map-loader'),
+            },
+            {
+                // There's an issue resolving paths without fully specified extensions
+                // See: https://github.com/graphql/graphql-js/issues/2721
+                // TODO(jack): Add a flag to turn this option on like Next.js does via experimental flag.
+                // See: https://github.com/vercel/next.js/pull/29880
+                test: /\.m?jsx?$/,
+                resolve: {
+                    fullySpecified: false,
+                },
+            },
+            // There's an issue when using buildable libs and .js files (instead of .ts files),
+            // where the wrong type is used (commonjs vs esm) resulting in export-imports throwing errors.
+            // See: https://github.com/nrwl/nx/issues/10990
+            {
+                test: /\.js$/,
+                type: 'javascript/auto',
+            },
+            // Rspack's docs only suggest swc for TS compilation
+            //https://rspack.dev/guide/tech/typescript
+            {
+                test: /\.([jt])sx?$/,
+                loader: 'builtin:swc-loader',
+                exclude: /node_modules/,
+                type: 'javascript/auto',
+                options: {
+                    jsc: {
+                        parser: {
+                            syntax: 'typescript',
+                            decorators: true,
+                            tsx: true,
+                        },
+                        transform: {
+                            react: {
+                                runtime: 'automatic',
+                                pragma: 'React.createElement',
+                                pragmaFrag: 'React.Fragment',
+                                throwIfNamespace: true,
+                                // Config.mode is already set based on options.mode and `process.env.NODE_ENV`
+                                development: config.mode === 'development',
+                                refresh: config.mode === 'development',
+                                useBuiltins: false,
+                            },
+                        },
+                    },
+                },
+            },
+        ].filter((r) => !!r),
+    };
+    config.plugins ??= [];
+    config.plugins.push(...plugins);
+}

package/src/plugins/utils/apply-react-config.d.ts

@@ -0,0 +1,5 @@
+import { Configuration, RspackOptionsNormalized } from '@rspack/core';
+import { SvgrOptions } from './models';
+export declare function applyReactConfig(options: {
+    svgr?: boolean | SvgrOptions;
+}, config?: Partial<RspackOptionsNormalized | Configuration>): void;

package/src/plugins/utils/apply-react-config.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.applyReactConfig = applyReactConfig;
+function applyReactConfig(options, config = {}) {
+    if (global.NX_GRAPH_CREATION)
+        return;
+    addHotReload(config);
+    if (options.svgr !== false || typeof options.svgr === 'object') {
+        removeSvgLoaderIfPresent(config);
+        const defaultSvgrOptions = {
+            svgo: false,
+            titleProp: true,
+            ref: true,
+        };
+        const svgrOptions = typeof options.svgr === 'object' ? options.svgr : defaultSvgrOptions;
+        config.module.rules.push({
+            test: /\.svg$/i,
+            type: 'asset',
+            resourceQuery: /react/, // *.svg?react
+        }, {
+            test: /\.svg$/i,
+            issuer: /\.[jt]sx?$/,
+            resourceQuery: { not: [/react/] }, // exclude react component if *.svg?react
+            use: [{ loader: '@svgr/webpack', options: svgrOptions }],
+        });
+    }
+    // enable rspack node api
+    config.node = {
+        __dirname: true,
+        __filename: true,
+    };
+}
+function removeSvgLoaderIfPresent(config) {
+    const svgLoaderIdx = config.module.rules.findIndex((rule) => typeof rule === 'object' && rule.test.toString().includes('svg'));
+    if (svgLoaderIdx === -1)
+        return;
+    config.module.rules.splice(svgLoaderIdx, 1);
+}
+function addHotReload(config) {
+    const ReactRefreshPlugin = require('@rspack/plugin-react-refresh');
+    const isDev = process.env.NODE_ENV === 'development' || config.mode === 'development';
+    if (isDev) {
+        config.plugins.push(new ReactRefreshPlugin({ overlay: false }));
+    }
+}