@nx/rspack 21.0.0-beta.0 → 21.0.0-beta.10

package/src/plugins/plugin.js

@@ -14,7 +14,14 @@ const resolve_user_defined_rspack_config_1 = require("../utils/resolve-user-defi
 const util_1 = require("@nx/js/src/plugins/typescript/util");
 const pmc = (0, devkit_1.getPackageManagerCommand)();
 function readTargetsCache(cachePath) {
-    return (0, fs_1.existsSync)(cachePath) ? (0, devkit_1.readJsonFile)(cachePath) : {};
+    try {
+        return process.env.NX_CACHE_PROJECT_GRAPH !== 'false'
+            ? (0, devkit_1.readJsonFile)(cachePath)
+            : {};
+    }
+    catch {
+        return {};
+    }
 }
 function writeTargetsToCache(cachePath, results) {
     (0, devkit_1.writeJsonFile)(cachePath, results);
@@ -52,16 +59,15 @@ async function createNodesInternal(configFilePath, options, context, targetsCach
         packageJson = (0, devkit_1.readJsonFile)((0, path_1.join)(context.workspaceRoot, projectRoot, 'package.json'));
     }
     const normalizedOptions = normalizeOptions(options);
-    // We do not want to alter how the hash is calculated, so appending the config file path to the hash
-    // to prevent vite/vitest files overwriting the target cache created by the other
+    const lockFileHash = (0, file_hasher_1.hashFile)((0, path_1.join)(context.workspaceRoot, (0, js_1.getLockFileName)((0, devkit_1.detectPackageManager)(context.workspaceRoot)))) ?? '';
     const nodeHash = (0, file_hasher_1.hashArray)([
-        ...[
-            (0, path_1.join)(context.workspaceRoot, configFilePath),
-            (0, path_1.join)(context.workspaceRoot, (0, js_1.getLockFileName)((0, devkit_1.detectPackageManager)(context.workspaceRoot))),
-        ].map(file_hasher_1.hashFile),
-        (0, file_hasher_1.hashObject)(options),
+        (0, file_hasher_1.hashFile)((0, path_1.join)(context.workspaceRoot, configFilePath)),
+        lockFileHash,
+        (0, file_hasher_1.hashObject)({ ...options, isTsSolutionSetup }),
         (0, file_hasher_1.hashObject)(packageJson),
     ]);
+    // We do not want to alter how the hash is calculated, so appending the config file path to the hash
+    // to prevent vite/vitest files overwriting the target cache created by the other
     const hash = `${nodeHash}_${configFilePath}`;
     targetsCache[hash] ??= await createRspackTargets(configFilePath, projectRoot, normalizedOptions, context, isTsSolutionSetup);
     const { targets, metadata } = targetsCache[hash];
@@ -86,9 +92,23 @@ async function createRspackTargets(configFilePath, projectRoot, options, context
         }
     }
     const targets = {};
+    const env = {};
+    const isTsConfig = ['.ts', '.cts', '.mts'].includes((0, path_1.extname)(configFilePath));
+    if (isTsConfig) {
+        // https://rspack.dev/config/#using-ts-node
+        env['TS_NODE_COMPILER_OPTIONS'] = JSON.stringify({
+            module: 'CommonJS',
+            moduleResolution: 'Node10',
+            customConditions: null,
+        });
+    }
     targets[options.buildTargetName] = {
         command: `rspack build`,
-        options: { cwd: projectRoot, args: ['--node-env=production'] },
+        options: {
+            cwd: projectRoot,
+            args: ['--node-env=production'],
+            env,
+        },
         cache: true,
         dependsOn: [`^${options.buildTargetName}`],
         inputs: 'production' in namedInputs
@@ -109,20 +129,25 @@ async function createRspackTargets(configFilePath, projectRoot, options, context
         outputs,
     };
     targets[options.serveTargetName] = {
+        continuous: true,
         command: `rspack serve`,
         options: {
             cwd: projectRoot,
             args: ['--node-env=development'],
+            env,
         },
     };
     targets[options.previewTargetName] = {
+        continuous: true,
         command: `rspack serve`,
         options: {
             cwd: projectRoot,
             args: ['--node-env=production'],
+            env,
         },
     };
     targets[options.serveStaticTargetName] = {
+        continuous: true,
         executor: '@nx/web:file-server',
         options: {
             buildTarget: options.buildTargetName,

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

@@ -13,6 +13,7 @@ const nx_tsconfig_paths_rspack_plugin_1 = require("./plugins/nx-tsconfig-paths-r
 const get_terser_ecma_version_1 = require("./get-terser-ecma-version");
 const nodeExternals = require("webpack-node-externals");
 const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
+const is_lib_buildable_1 = require("./is-lib-buildable");
 const IGNORED_RSPACK_WARNINGS = [
     /The comment file/i,
     /could not find any license/i,
@@ -42,7 +43,7 @@ function applyNxIndependentConfig(options, config) {
     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'
+        config.target === 'node' || config.target === 'async-node'
             ? 'none'
             : // Otherwise, make sure it matches `process.env.NODE_ENV`.
                 // When mode is development or production, rspack will automatically
@@ -59,13 +60,20 @@ function applyNxIndependentConfig(options, config) {
                         : '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.cache =
+        (options.target === 'node' || options.target === 'async-node') &&
+            options.watch
+            ? true
+            : undefined;
     config.devtool =
         options.sourceMap === true ? 'source-map' : options.sourceMap;
     config.output = {
         ...(config.output ?? {}),
-        libraryTarget: config.output?.libraryTarget ??
-            (options.target === 'node' ? 'commonjs' : undefined),
+        libraryTarget: options.target === 'node'
+            ? 'commonjs'
+            : options.target === 'async-node'
+                ? 'commonjs-module'
+                : undefined,
         path: config.output?.path ??
             (options.outputPath
                 ? // If path is relative, it is relative from project root (aka cwd).
@@ -81,7 +89,7 @@ function applyNxIndependentConfig(options, config) {
         hashFunction: config.output?.hashFunction ?? 'xxhash64',
         // Disabled for performance
         pathinfo: config.output?.pathinfo ?? false,
-        clean: options.deleteOutputPath,
+        clean: config.output?.clean ?? options.deleteOutputPath,
     };
     config.watch = options.watch;
     config.watchOptions = {
@@ -124,7 +132,6 @@ function applyNxIndependentConfig(options, config) {
                     },
                 }),
             ],
-            runtimeChunk: false,
             concatenateModules: true,
         };
     config.stats = {
@@ -177,15 +184,18 @@ function applyNxDependentConfig(options, config, { useNormalizedEntry } = {}) {
     if (options.useTsconfigPaths) {
         plugins.push(new nx_tsconfig_paths_rspack_plugin_1.NxTsconfigPathsRspackPlugin({ ...options, tsConfig }));
     }
-    // New TS Solution already has a typecheck target
-    if (!options?.skipTypeChecking && !isUsingTsSolution) {
-        const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
-        plugins.push(new ForkTsCheckerWebpackPlugin({
+    // New TS Solution already has a typecheck target but allow it to run during serve
+    if ((!options?.skipTypeChecking && !isUsingTsSolution) ||
+        (isUsingTsSolution &&
+            options?.skipTypeChecking === false &&
+            process.env['WEBPACK_SERVE'])) {
+        const { TsCheckerRspackPlugin } = require('ts-checker-rspack-plugin');
+        plugins.push(new TsCheckerRspackPlugin({
             typescript: {
                 configFile: path.isAbsolute(tsConfig)
                     ? tsConfig
                     : path.join(options.root, tsConfig),
-                memoryLimit: options.memoryLimit || 2018,
+                memoryLimit: options.memoryLimit || 8192, // default memory limit is 8192
             },
         }));
     }
@@ -263,9 +273,34 @@ function applyNxDependentConfig(options, config, { useNormalizedEntry } = {}) {
         plugins.push(new stats_json_plugin_1.StatsJsonPlugin());
     }
     const externals = [];
-    if (options.target === 'node' && options.externalDependencies === 'all') {
+    if ((options.target === 'node' || options.target === 'async-node') &&
+        options.externalDependencies === 'all') {
         const modulesDir = `${options.root}/node_modules`;
-        externals.push(nodeExternals({ modulesDir }));
+        const graph = options.projectGraph;
+        const projectName = options.projectName;
+        const deps = graph?.dependencies?.[projectName] ?? [];
+        // Collect non-buildable TS project references so that they are bundled
+        // in the final output. This is needed for projects that are not buildable
+        // but are referenced by buildable projects. This is needed for the new TS
+        // solution setup.
+        const nonBuildableWorkspaceLibs = isUsingTsSolution
+            ? deps
+                .filter((dep) => {
+                const node = graph.nodes?.[dep.target];
+                if (!node || node.type !== 'lib')
+                    return false;
+                const hasBuildTarget = 'build' in (node.data?.targets ?? {});
+                if (hasBuildTarget) {
+                    return false;
+                }
+                // If there is no build target we check the package exports to see if they reference
+                // source files
+                return !(0, is_lib_buildable_1.isBuildableLibrary)(node);
+            })
+                .map((dep) => graph.nodes?.[dep.target]?.data?.metadata?.js?.packageName)
+                .filter((name) => !!name)
+            : [];
+        externals.push(nodeExternals({ modulesDir, allowlist: nonBuildableWorkspaceLibs }));
     }
     else if (Array.isArray(options.externalDependencies)) {
         externals.push(function (ctx, callback) {
@@ -333,6 +368,8 @@ function applyNxDependentConfig(options, config, { useNormalizedEntry } = {}) {
                             tsx: true,
                         },
                         transform: {
+                            legacyDecorator: true,
+                            decoratorMetadata: true,
                             react: {
                                 runtime: 'automatic',
                                 pragma: 'React.createElement',

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.applyWebConfig = applyWebConfig;
 const core_1 = require("@rspack/core");
+const write_index_html_plugin_1 = require("../write-index-html-plugin");
 const instantiate_script_plugins_1 = require("./instantiate-script-plugins");
 const path_1 = require("path");
 const hash_format_1 = require("./hash-format");
@@ -32,14 +33,27 @@ function applyWebConfig(options, config = {}, { useNormalizedEntry, } = {}) {
         plugins.push(...(0, instantiate_script_plugins_1.instantiateScriptPlugins)(options));
     }
     if (options.index && options.generateIndexHtml) {
-        plugins.push(new core_1.HtmlRspackPlugin({
-            template: options.index,
-            sri: options.subresourceIntegrity ? 'sha256' : undefined,
-            ...(options.baseHref ? { base: { href: options.baseHref } } : {}),
-            ...(config.output?.scriptType === 'module'
-                ? { scriptLoading: 'module' }
-                : {}),
-        }));
+        if (options.useLegacyHtmlPlugin) {
+            plugins.push(new write_index_html_plugin_1.WriteIndexHtmlPlugin({
+                indexPath: options.index,
+                outputPath: 'index.html',
+                baseHref: typeof options.baseHref === 'string' ? options.baseHref : undefined,
+                sri: options.subresourceIntegrity,
+                scripts: options.scripts,
+                styles: options.styles,
+                crossOrigin: config.output?.scriptType === 'module' ? 'anonymous' : undefined,
+            }));
+        }
+        else {
+            plugins.push(new core_1.HtmlRspackPlugin({
+                template: options.index,
+                sri: options.subresourceIntegrity ? 'sha256' : undefined,
+                ...(options.baseHref ? { base: { href: options.baseHref } } : {}),
+                ...(config.output?.scriptType === 'module'
+                    ? { scriptLoading: 'module' }
+                    : {}),
+            }));
+        }
     }
     const minimizer = [];
     if (isProd && stylesOptimization) {
@@ -54,6 +68,8 @@ function applyWebConfig(options, config = {}, { useNormalizedEntry, } = {}) {
     const globalStylePaths = [];
     // Determine hashing format.
     const hashFormat = (0, hash_format_1.getOutputHashFormat)(options.outputHashing);
+    const sassOptions = options.stylePreprocessorOptions?.sassOptions;
+    const lessOptions = options.stylePreprocessorOptions?.lessOptions;
     const includePaths = [];
     if (options?.stylePreprocessorOptions?.includePaths?.length > 0) {
         options.stylePreprocessorOptions.includePaths.forEach((includePath) => includePaths.push((0, path_1.resolve)(options.root, includePath)));
@@ -88,11 +104,15 @@ function applyWebConfig(options, config = {}, { useNormalizedEntry, } = {}) {
                 {
                     loader: require.resolve('sass-loader'),
                     options: {
-                        implementation: require('sass'),
+                        implementation: options.sassImplementation === 'sass'
+                            ? require.resolve('sass')
+                            : require.resolve('sass-embedded'),
+                        api: 'modern-compiler',
                         sassOptions: {
                             fiber: false,
                             precision: 8,
                             includePaths,
+                            ...(sassOptions ?? {}),
                         },
                     },
                 },
@@ -108,6 +128,7 @@ function applyWebConfig(options, config = {}, { useNormalizedEntry, } = {}) {
                     options: {
                         lessOptions: {
                             paths: includePaths,
+                            ...(lessOptions ?? {}),
                         },
                     },
                 },
@@ -143,13 +164,17 @@ function applyWebConfig(options, config = {}, { useNormalizedEntry, } = {}) {
                 {
                     loader: require.resolve('sass-loader'),
                     options: {
-                        implementation: require('sass'),
+                        api: 'modern-compiler',
+                        implementation: options.sassImplementation === 'sass'
+                            ? require.resolve('sass')
+                            : require.resolve('sass-embedded'),
                         sourceMap: !!options.sourceMap,
                         sassOptions: {
                             fiber: false,
                             // bootstrap-sass requires a minimum precision of 8
                             precision: 8,
                             includePaths,
+                            ...(sassOptions ?? {}),
                         },
                     },
                 },
@@ -167,6 +192,7 @@ function applyWebConfig(options, config = {}, { useNormalizedEntry, } = {}) {
                         lessOptions: {
                             javascriptEnabled: true,
                             ...lessPathOptions,
+                            ...(lessOptions ?? {}),
                         },
                     },
                 },
@@ -203,13 +229,17 @@ function applyWebConfig(options, config = {}, { useNormalizedEntry, } = {}) {
                 {
                     loader: require.resolve('sass-loader'),
                     options: {
-                        implementation: require('sass'),
+                        api: 'modern-compiler',
+                        implementation: options.sassImplementation === 'sass'
+                            ? require.resolve('sass')
+                            : require.resolve('sass-embedded'),
                         sourceMap: !!options.sourceMap,
                         sassOptions: {
                             fiber: false,
                             // bootstrap-sass requires a minimum precision of 8
                             precision: 8,
                             includePaths,
+                            ...(sassOptions ?? {}),
                         },
                     },
                 },
@@ -227,6 +257,7 @@ function applyWebConfig(options, config = {}, { useNormalizedEntry, } = {}) {
                         lessOptions: {
                             javascriptEnabled: true,
                             ...lessPathOptions,
+                            ...(lessOptions ?? {}),
                         },
                     },
                 },

package/src/plugins/utils/is-lib-buildable.d.ts

@@ -0,0 +1,7 @@
+import { type ProjectGraphProjectNode } from '@nx/devkit';
+/**
+ * Check if the library is buildable.
+ * @param node from the project graph
+ * @returns boolean
+ */
+export declare function isBuildableLibrary(node: ProjectGraphProjectNode): boolean;

package/src/plugins/utils/is-lib-buildable.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isBuildableLibrary = isBuildableLibrary;
+function isSourceFile(path) {
+    return ['.ts', '.tsx', '.mts', '.cts'].some((ext) => path.endsWith(ext));
+}
+function isBuildableExportMap(packageExports) {
+    if (!packageExports || Object.keys(packageExports).length === 0) {
+        return false; // exports = {} → not buildable
+    }
+    const isCompiledExport = (value) => {
+        if (typeof value === 'string') {
+            return !isSourceFile(value);
+        }
+        if (typeof value === 'object' && value !== null) {
+            return Object.entries(value).some(([key, subValue]) => {
+                if (key === 'types' ||
+                    key === 'development' ||
+                    key === './package.json')
+                    return false;
+                return typeof subValue === 'string' && !isSourceFile(subValue);
+            });
+        }
+        return false;
+    };
+    if (packageExports['.']) {
+        return isCompiledExport(packageExports['.']);
+    }
+    return Object.entries(packageExports).some(([key, value]) => key !== '.' && isCompiledExport(value));
+}
+/**
+ * Check if the library is buildable.
+ * @param node from the project graph
+ * @returns boolean
+ */
+function isBuildableLibrary(node) {
+    if (!node.data.metadata?.js) {
+        return false;
+    }
+    const { packageExports, packageMain } = node.data.metadata.js;
+    // if we have exports only check this else fallback to packageMain
+    if (packageExports) {
+        return isBuildableExportMap(packageExports);
+    }
+    return (typeof packageMain === 'string' &&
+        packageMain !== '' &&
+        !isSourceFile(packageMain));
+}

package/src/plugins/utils/loaders/stylesheet-loaders.js

@@ -99,7 +99,7 @@ function postcssOptionsCreator(options, { includePaths, forCssModules = false, }
                 ? []
                 : [
                     (0, postcss_cli_resources_1.PostcssCliResources)({
-                        baseHref: options.baseHref,
+                        baseHref: options.baseHref ? options.baseHref : undefined,
                         deployUrl: options.deployUrl,
                         loader,
                         filename: `[name]${hashFormat.file}.[ext]`,

package/src/plugins/utils/models.d.ts

@@ -55,7 +55,7 @@ export interface NxAppRspackPluginOptions {
     /**
      * Set <base href> for the resulting index.html.
      */
-    baseHref?: string;
+    baseHref?: string | false;
     /**
      * Build the libraries from source. Default is `true`.
      */
@@ -63,6 +63,7 @@ export interface NxAppRspackPluginOptions {
     commonChunk?: boolean;
     /**
      * Delete the output path before building.
+     * @deprecated Use the `output.clean` option in Rspack. https://rspack.dev/config/output#outputclean
      */
     deleteOutputPath?: boolean;
     /**
@@ -148,6 +149,11 @@ export interface NxAppRspackPluginOptions {
      * Add an additional chunk for the rspack runtime. Defaults to `true` when `target === 'web'`.
      */
     runtimeChunk?: boolean;
+    /**
+     * The implementation of the SASS compiler to use. Can be either `sass` or `sass-embedded`. Defaults to `sass-embedded`.
+     * @deprecated Sass option will be removed in Nx 22. This option will also be removed in Nx 22 as it is no longer needed.
+     */
+    sassImplementation?: 'sass' | 'sass-embedded';
     /**
      * External scripts that will be included before the main application entry.
      */
@@ -183,7 +189,11 @@ export interface NxAppRspackPluginOptions {
     /**
      * Options for the style preprocessor. e.g. `{ "includePaths": [] }` for SASS.
      */
-    stylePreprocessorOptions?: any;
+    stylePreprocessorOptions?: {
+        includePaths?: string[];
+        sassOptions?: Record<string, any>;
+        lessOptions?: Record<string, any>;
+    };
     /**
      * External stylesheets that will be included with the application.
      */
@@ -224,6 +234,10 @@ export interface NxAppRspackPluginOptions {
      * Whether to rebase absolute path for assets in postcss cli resources.
      */
     rebaseRootRelative?: boolean;
+    /**
+     * Use the legacy WriteIndexHtmlPlugin instead of the built-in HtmlRspackPlugin.
+     */
+    useLegacyHtmlPlugin?: boolean;
 }
 export interface NormalizedNxAppRspackPluginOptions extends NxAppRspackPluginOptions {
     projectName: string;
@@ -235,4 +249,5 @@ export interface NormalizedNxAppRspackPluginOptions extends NxAppRspackPluginOpt
     projectGraph: ProjectGraph;
     outputFileName: string;
     assets: AssetGlobPattern[];
+    useLegacyHtmlPlugin: boolean;
 }

package/src/plugins/utils/plugins/normalize-options.js

@@ -65,6 +65,7 @@ function normalizeOptions(options) {
         extractCss: combinedPluginAndMaybeExecutorOptions.extractCss ?? true,
         fileReplacements: normalizeFileReplacements(devkit_1.workspaceRoot, combinedPluginAndMaybeExecutorOptions.fileReplacements),
         generateIndexHtml: combinedPluginAndMaybeExecutorOptions.generateIndexHtml ?? true,
+        useLegacyHtmlPlugin: combinedPluginAndMaybeExecutorOptions.useLegacyHtmlPlugin ?? false,
         main: combinedPluginAndMaybeExecutorOptions.main,
         namedChunks: combinedPluginAndMaybeExecutorOptions.namedChunks ?? !isProd,
         optimization: combinedPluginAndMaybeExecutorOptions.optimization ?? isProd,
@@ -77,6 +78,8 @@ function normalizeOptions(options) {
         projectRoot: projectNode.data.root,
         root: devkit_1.workspaceRoot,
         runtimeChunk: combinedPluginAndMaybeExecutorOptions.runtimeChunk ?? true,
+        sassImplementation: combinedPluginAndMaybeExecutorOptions.sassImplementation ??
+            'sass-embedded',
         scripts: combinedPluginAndMaybeExecutorOptions.scripts ?? [],
         sourceMap: combinedPluginAndMaybeExecutorOptions.sourceMap ?? !isProd,
         sourceRoot,

package/src/plugins/write-index-html-plugin.d.ts

@@ -0,0 +1,22 @@
+import { Compiler } from '@rspack/core';
+import { ExtraEntryPoint } from '../utils/model';
+export interface WriteIndexHtmlOptions {
+    indexPath: string;
+    outputPath: string;
+    baseHref?: string;
+    deployUrl?: string;
+    sri?: boolean;
+    scripts?: ExtraEntryPoint[];
+    styles?: ExtraEntryPoint[];
+    crossOrigin?: 'none' | 'anonymous' | 'use-credentials';
+}
+export declare class WriteIndexHtmlPlugin {
+    private readonly options;
+    constructor(options: WriteIndexHtmlOptions);
+    apply(compiler: Compiler): void;
+    private getEmittedFiles;
+    private stripBom;
+    private augmentIndexHtml;
+    private generateSriAttributes;
+    private filterAndMapBuildFiles;
+}