@nx/rspack 20.4.0-beta.1 → 20.4.0-beta.2

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.4.0-beta.1",
+  "version": "20.4.0-beta.2",
   "type": "commonjs",
   "repository": {
     "type": "git",
@@ -24,17 +24,16 @@
   "generators": "./generators.json",
   "executors": "./executors.json",
   "dependencies": {
-    "@nx/js": "20.4.0-beta.1",
-    "@nx/devkit": "20.4.0-beta.1",
-    "@nx/web": "20.4.0-beta.1",
-    "@nx/module-federation": "20.4.0-beta.1",
+    "@nx/js": "20.4.0-beta.2",
+    "@nx/devkit": "20.4.0-beta.2",
+    "@nx/web": "20.4.0-beta.2",
+    "@nx/module-federation": "20.4.0-beta.2",
     "@phenomnomnominal/tsquery": "~5.0.1",
     "@rspack/core": "^1.1.5",
     "@rspack/dev-server": "^1.0.9",
     "@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",
@@ -47,6 +46,7 @@
     "sass-loader": "^12.2.0",
     "source-map-loader": "^5.0.0",
     "style-loader": "^3.3.0",
+    "picocolors": "^1.1.0",
     "postcss-import": "~14.1.0",
     "postcss-loader": "^8.1.1",
     "postcss": "^8.4.38",

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

@@ -4,7 +4,7 @@ exports.ssrDevServerExecutor = ssrDevServerExecutor;
 const tslib_1 = require("tslib");
 const devkit_1 = require("@nx/devkit");
 const async_iterable_1 = require("@nx/devkit/src/utils/async-iterable");
-const chalk = tslib_1.__importStar(require("chalk"));
+const pc = tslib_1.__importStar(require("picocolors"));
 const wait_until_server_is_listening_1 = require("./lib/wait-until-server-is-listening");
 async function* ssrDevServerExecutor(options, context) {
     const browserTarget = (0, devkit_1.parseTargetString)(options.browserTarget, context.projectGraph);
@@ -27,7 +27,7 @@ async function* ssrDevServerExecutor(options, context) {
         }
         if (nodeStarted && browserBuilt) {
             await (0, wait_until_server_is_listening_1.waitUntilServerIsListening)(options.port);
-            console.log(`[ ${chalk.green('ready')} ] on http://localhost:${options.port}`);
+            console.log(`[ ${pc.green('ready')} ] on http://localhost:${options.port}`);
             yield {
                 ...output,
                 baseUrl: `http://localhost:${options.port}`,

package/src/generators/configuration/configuration.js

@@ -6,6 +6,7 @@ const devkit_1 = require("@nx/devkit");
 const generator_utils_1 = require("../../utils/generator-utils");
 const create_ts_config_1 = require("../application/lib/create-ts-config");
 const init_1 = tslib_1.__importDefault(require("../init/init"));
+const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
 async function configurationGenerator(tree, options) {
     const task = await (0, init_1.default)(tree, {
         ...options,
@@ -34,7 +35,7 @@ async function configurationGenerator(tree, options) {
         projectAlreadyHasRspackTargets = alreadyHasNxRspackTargets;
         if (alreadyHasNxRspackTargets.build &&
             (alreadyHasNxRspackTargets.serve ||
-                projectType === 'library' ||
+                (0, ts_solution_setup_1.getProjectType)(tree, options.project, projectType) === 'library' ||
                 options.framework === 'nest')) {
             throw new Error(`The project ${options.project} is already configured to use the @nx/rspack executors.
         Please try a different project, or remove the existing targets

package/src/plugins/plugin.js

@@ -68,7 +68,12 @@ async function createRspackTargets(configFilePath, projectRoot, options, context
     const namedInputs = (0, get_named_inputs_1.getNamedInputs)(projectRoot, context);
     const rspackConfig = (0, resolve_user_defined_rspack_config_1.resolveUserDefinedRspackConfig)((0, path_1.join)(context.workspaceRoot, configFilePath), (0, js_1.getRootTsConfigPath)(), true);
     const rspackOptions = await (0, read_rspack_options_1.readRspackOptions)(rspackConfig);
-    const outputPath = normalizeOutputPath(rspackOptions.output?.path, projectRoot);
+    const outputs = [];
+    for (const config of rspackOptions) {
+        if (config.output?.path) {
+            outputs.push(normalizeOutputPath(config.output.path, projectRoot));
+        }
+    }
     const targets = {};
     targets[options.buildTargetName] = {
         command: `rspack build`,
@@ -90,7 +95,7 @@ async function createRspackTargets(configFilePath, projectRoot, options, context
                     externalDependencies: ['@rspack/cli'],
                 },
             ],
-        outputs: [outputPath],
+        outputs,
     };
     targets[options.serveTargetName] = {
         command: `rspack serve`,

package/src/utils/generator-utils.js

@@ -184,7 +184,10 @@ function createConfig(tree, options) {
     const project = (0, devkit_1.readProjectConfiguration)(tree, options.project);
     const buildOptions = createBuildOptions(tree, options, project);
     const defaultConfig = generateDefaultConfig(project, buildOptions);
-    if (isWebFramework(options)) {
+    if (options.framework === 'react') {
+        return generateReactConfig(options);
+    }
+    else if (isWebFramework(options)) {
         return generateWebConfig(tree, options, defaultConfig);
     }
     else if (options.framework === 'nest') {
@@ -242,6 +245,21 @@ module.exports = composePlugins(withNx(), withWeb(${options.stylePreprocessorOpt
   });
 `;
 }
+function generateReactConfig({ stylePreprocessorOptions, }) {
+    return `
+const { composePlugins, withNx, withReact } = require('@nx/rspack');
+
+module.exports = composePlugins(withNx(), withReact(${stylePreprocessorOptions
+        ? `
+  {
+    stylePreprocessorOptions: ${JSON.stringify(stylePreprocessorOptions)},
+  }
+  `
+        : ''}), (config) => {
+  return config;
+});
+    `;
+}
 function generateNestConfig(tree, options, project, buildOptions) {
     if ((0, has_plugin_1.hasPlugin)(tree)) {
         return `

package/src/utils/read-rspack-options.d.ts

@@ -1,10 +1,11 @@
 import { Configuration } from '@rspack/core';
 /**
  * Reads the Rspack options from a give Rspack configuration. The configuration can be:
- * 1. A standard config object
- * 2. A standard function that returns a config object
- * 3. A Nx-specific composable function that takes Nx context, rspack config, and returns the config object.
+ * 1. A single standard config object
+ * 2. A standard function that returns a config object (standard Rspack)
+ * 3. An array of standard config objects (multi-configuration mode)
+ * 4. A Nx-specific composable function that takes Nx context, rspack config, and returns the config object.
  *
  * @param rspackConfig
  */
-export declare function readRspackOptions(rspackConfig: unknown): Promise<Configuration>;
+export declare function readRspackOptions(rspackConfig: unknown): Promise<Configuration[]>;

package/src/utils/read-rspack-options.js

@@ -6,47 +6,76 @@ const config_1 = require("./config");
 const devkit_internals_1 = require("nx/src/devkit-internals");
 /**
  * Reads the Rspack options from a give Rspack configuration. The configuration can be:
- * 1. A standard config object
- * 2. A standard function that returns a config object
- * 3. A Nx-specific composable function that takes Nx context, rspack config, and returns the config object.
+ * 1. A single standard config object
+ * 2. A standard function that returns a config object (standard Rspack)
+ * 3. An array of standard config objects (multi-configuration mode)
+ * 4. A Nx-specific composable function that takes Nx context, rspack config, and returns the config object.
  *
  * @param rspackConfig
  */
 async function readRspackOptions(rspackConfig) {
-    let config;
-    if ((0, config_1.isNxRspackComposablePlugin)(rspackConfig)) {
-        config = await rspackConfig({}, {
-            // These values are only used during build-time, so passing stubs here just to read out
-            // the returned config object.
-            options: {
-                root: devkit_1.workspaceRoot,
-                projectRoot: '',
-                sourceRoot: '',
-                outputFileName: '',
-                assets: [],
-                main: '',
-                tsConfig: '',
-                outputPath: '',
-                rspackConfig: '',
-                useTsconfigPaths: undefined,
-            },
-            context: {
-                root: devkit_1.workspaceRoot,
-                cwd: undefined,
-                isVerbose: false,
-                nxJsonConfiguration: (0, devkit_internals_1.readNxJsonFromDisk)(devkit_1.workspaceRoot),
-                projectGraph: null,
-                projectsConfigurations: null,
-            },
-        });
-    }
-    else if (typeof rspackConfig === 'function') {
-        config = await rspackConfig({
-            production: true, // we want the production build options
-        }, {});
+    const configs = [];
+    const resolveConfig = async (config) => {
+        let resolvedConfig;
+        if ((0, config_1.isNxRspackComposablePlugin)(config)) {
+            resolvedConfig = await config({}, {
+                // These values are only used during build-time, so passing stubs here just to read out
+                // the returned config object.
+                options: {
+                    root: devkit_1.workspaceRoot,
+                    projectRoot: '',
+                    sourceRoot: '',
+                    outputFileName: '',
+                    assets: [],
+                    main: '',
+                    tsConfig: '',
+                    outputPath: '',
+                    rspackConfig: '',
+                    useTsconfigPaths: undefined,
+                },
+                context: {
+                    root: devkit_1.workspaceRoot,
+                    cwd: undefined,
+                    isVerbose: false,
+                    nxJsonConfiguration: (0, devkit_internals_1.readNxJsonFromDisk)(devkit_1.workspaceRoot),
+                    projectGraph: null,
+                    projectsConfigurations: null,
+                },
+            });
+        }
+        else if (typeof config === 'function') {
+            const resolved = await config({
+                production: true, // we want the production build options
+            }, {});
+            // If the resolved configuration is an array, resolve each configuration
+            return Array.isArray(resolved)
+                ? await Promise.all(resolved.map(resolveConfig))
+                : resolved;
+        }
+        else if (Array.isArray(config)) {
+            // If the config passed is an array, resolve each configuration
+            const resolvedConfigs = await Promise.all(config.map(resolveConfig));
+            return resolvedConfigs.flat();
+        }
+        else {
+            return config;
+        }
+    };
+    // Since configs can have nested arrays, we need to flatten them
+    const flattenConfigs = (resolvedConfigs) => {
+        return Array.isArray(resolvedConfigs)
+            ? resolvedConfigs.flatMap((cfg) => flattenConfigs(cfg))
+            : [resolvedConfigs];
+    };
+    if (Array.isArray(rspackConfig)) {
+        for (const config of rspackConfig) {
+            const resolved = await resolveConfig(config);
+            configs.push(...flattenConfigs(resolved));
+        }
     }
     else {
-        config = rspackConfig;
+        const resolved = await resolveConfig(rspackConfig);
+        configs.push(...flattenConfigs(resolved));
     }
-    return config;
+    return configs;
 }