@nx/rspack 21.4.0 → 21.5.0-beta.1

package/generators.json

@@ -29,7 +29,7 @@
       "x-deprecated": "This generator will be removed in Nx 22. Please use the equivalent generator for your application type instead."
     },
     "convert-webpack": {
-      "alias": "convert-to-rspack",
+      "aliases": ["convert-to-rspack"],
       "factory": "./src/generators/convert-webpack/convert-webpack",
       "schema": "./src/generators/convert-webpack/schema.json",
       "description": "Convert a webpack application to use rspack."

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": "21.4.0",
+  "version": "21.5.0-beta.1",
   "type": "commonjs",
   "repository": {
     "type": "git",
@@ -24,10 +24,10 @@
   "generators": "./generators.json",
   "executors": "./executors.json",
   "dependencies": {
-    "@nx/js": "21.4.0",
-    "@nx/devkit": "21.4.0",
-    "@nx/web": "21.4.0",
-    "@nx/module-federation": "21.4.0",
+    "@nx/js": "21.5.0-beta.1",
+    "@nx/devkit": "21.5.0-beta.1",
+    "@nx/web": "21.5.0-beta.1",
+    "@nx/module-federation": "21.5.0-beta.1",
     "@phenomnomnominal/tsquery": "~5.0.1",
     "@rspack/core": "^1.3.8",
     "@rspack/dev-server": "^1.1.1",
@@ -53,11 +53,12 @@
     "postcss-loader": "^8.1.1",
     "postcss": "^8.4.38",
     "tslib": "^2.3.0",
-    "webpack": "^5.80.0",
+    "webpack": "^5.101.3",
     "webpack-node-externals": "^3.0.0"
   },
   "devDependencies": {
-    "nx": "21.4.0"
+    "nx": "21.5.0-beta.1",
+    "@nx/nest": "21.5.0-beta.1"
   },
   "peerDependencies": {
     "@module-federation/enhanced": "^0.18.0",

package/src/generators/convert-webpack/convert-webpack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"convert-webpack.d.ts","sourceRoot":"","sources":["../../../../../../packages/rspack/src/generators/convert-webpack/convert-webpack.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,IAAI,EAGV,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAQlC,yBAA+B,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,mDA8GzD"}
+{"version":3,"file":"convert-webpack.d.ts","sourceRoot":"","sources":["../../../../../../packages/rspack/src/generators/convert-webpack/convert-webpack.ts"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,IAAI,EAGV,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AASlC,yBAA+B,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,mDAwJzD"}

package/src/generators/convert-webpack/convert-webpack.js

@@ -5,13 +5,15 @@ const devkit_1 = require("@nx/devkit");
 const versions_1 = require("../../utils/versions");
 const transform_esm_1 = require("./lib/transform-esm");
 const transform_cjs_1 = require("./lib/transform-cjs");
+const transform_plugin_config_1 = require("./lib/transform-plugin-config");
 async function default_1(tree, options) {
     const projects = (0, devkit_1.getProjects)(tree);
     if (!projects.has(options.project)) {
         throw new Error(`Could not find project '${options.project}'. Ensure you have specified the project you'd like to convert correctly.`);
     }
     const project = projects.get(options.project);
-    const webpackConfigsToConvert = [];
+    const webpackConfigsWithHelpersToConvert = [];
+    const webpackConfigsWithPluginsToConvert = [];
     for (const [targetName, target] of Object.entries(project.targets)) {
         if (target.executor === '@nx/webpack:webpack') {
             target.executor = '@nx/rspack:rspack';
@@ -23,7 +25,10 @@ async function default_1(tree, options) {
                     return;
                 }
                 const rspackConfigPath = options.webpackConfig.replace(/webpack(?!.*webpack)/, 'rspack');
-                webpackConfigsToConvert.push([options.webpackConfig, rspackConfigPath]);
+                webpackConfigsWithHelpersToConvert.push([
+                    options.webpackConfig,
+                    rspackConfigPath,
+                ]);
                 options.rspackConfig = rspackConfigPath;
                 delete options.webpackConfig;
             };
@@ -36,6 +41,22 @@ async function default_1(tree, options) {
                 }
             }
         }
+        else if ((target.executor === 'nx:run-commands' && target.options.command) ||
+            target.command === 'webpack-cli build') {
+            if (target.options?.command) {
+                target.options.command = 'rspack build';
+            }
+            else if (target.command) {
+                target.command = 'rspack build';
+            }
+            const webpackConfigPath = findWebpackConfigPath(tree, project.root);
+            if (webpackConfigPath) {
+                webpackConfigsWithPluginsToConvert.push([
+                    webpackConfigPath,
+                    webpackConfigPath.replace(/webpack(?!.*webpack)/, 'rspack'),
+                ]);
+            }
+        }
         else if (target.executor === '@nx/webpack:dev-server') {
             target.executor = '@nx/rspack:dev-server';
         }
@@ -52,9 +73,18 @@ async function default_1(tree, options) {
             target.executor = '@nx/rspack:module-federation-static-server';
         }
     }
-    for (const [webpackConfigPath, rspackConfigPath] of webpackConfigsToConvert) {
+    if (webpackConfigsWithHelpersToConvert.length === 0 &&
+        webpackConfigsWithPluginsToConvert.length === 0) {
+        console.error(`Project '${options.project}' does not have any webpack targets to convert.`);
+        return;
+    }
+    for (const [webpackConfigPath, rspackConfigPath,] of webpackConfigsWithHelpersToConvert) {
         tree.rename(webpackConfigPath, rspackConfigPath);
-        transformConfigFile(tree, rspackConfigPath);
+        transformConfigFileWithHelpers(tree, rspackConfigPath);
+    }
+    for (const [webpackConfigPath, rspackConfigPath,] of webpackConfigsWithPluginsToConvert) {
+        tree.rename(webpackConfigPath, rspackConfigPath);
+        transformConfigFileWithPlugins(tree, rspackConfigPath);
     }
     (0, devkit_1.updateProjectConfiguration)(tree, options.project, project);
     const nxJson = (0, devkit_1.readNxJson)(tree);
@@ -89,7 +119,10 @@ async function default_1(tree, options) {
     }
     return installTask;
 }
-function transformConfigFile(tree, configPath) {
+function transformConfigFileWithPlugins(tree, configPath) {
+    (0, transform_plugin_config_1.transformPluginConfig)(tree, configPath);
+}
+function transformConfigFileWithHelpers(tree, configPath) {
     (0, transform_esm_1.transformEsmConfigFile)(tree, configPath);
     (0, transform_cjs_1.transformCjsConfigFile)(tree, configPath);
     cleanupEmptyImports(tree, configPath);
@@ -109,3 +142,19 @@ function cleanupEmptyImports(tree, configPath) {
     newContents = newContents.replace(emptyConstRequires, '');
     tree.write(configPath, newContents);
 }
+function findWebpackConfigPath(tree, projectRoot) {
+    const possibleConfigPaths = [
+        'webpack.config.js',
+        'webpack.config.mjs',
+        'webpack.config.cjs',
+        'webpack.config.ts',
+        'webpack.config.mts',
+        'webpack.config.cts',
+    ];
+    for (const configPath of possibleConfigPaths) {
+        const possiblePath = (0, devkit_1.joinPathFragments)(projectRoot, configPath);
+        if (tree.exists(possiblePath)) {
+            return possiblePath;
+        }
+    }
+}

package/src/generators/convert-webpack/lib/transform-plugin-config.d.ts

@@ -0,0 +1,3 @@
+import { type Tree } from '@nx/devkit';
+export declare function transformPluginConfig(tree: Tree, webpackConfigPath: string): void;
+//# sourceMappingURL=transform-plugin-config.d.ts.map

package/src/generators/convert-webpack/lib/transform-plugin-config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"transform-plugin-config.d.ts","sourceRoot":"","sources":["../../../../../../../packages/rspack/src/generators/convert-webpack/lib/transform-plugin-config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,EAAE,MAAM,YAAY,CAAC;AAIvC,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,IAAI,EAAE,iBAAiB,EAAE,MAAM,QAU1E"}

package/src/generators/convert-webpack/lib/transform-plugin-config.js

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.transformPluginConfig = transformPluginConfig;
+const tsquery_1 = require("@phenomnomnominal/tsquery");
+function transformPluginConfig(tree, webpackConfigPath) {
+    const webpackConfigContents = tree.read(webpackConfigPath, 'utf-8');
+    const ast = tsquery_1.tsquery.ast(webpackConfigContents);
+    let newConfigContents = webpackConfigContents;
+    if (webpackConfigContents.includes("require('@nx/webpack/app-plugin')")) {
+        newConfigContents = transformCjsConfig(tree, webpackConfigContents, ast);
+    }
+    else {
+        newConfigContents = transformEsmConfig(tree, webpackConfigContents, ast);
+    }
+    tree.write(webpackConfigPath, newConfigContents);
+}
+function transformCjsConfig(tree, webpackConfigContents, ast) {
+    // Convert require('@nx/webpack/app-plugin') to require('@nx/rspack/app-plugin')
+    const WEBPACK_APP_PLUGIN_REQUIRE_SELECTOR = 'CallExpression:has(Identifier[name=require]) > StringLiteral[value=@nx/webpack/app-plugin]';
+    let nodes = (0, tsquery_1.tsquery)(ast, WEBPACK_APP_PLUGIN_REQUIRE_SELECTOR, {
+        visitAllChildren: true,
+    });
+    if (nodes.length === 0) {
+        return webpackConfigContents;
+    }
+    const requireNode = nodes[0];
+    webpackConfigContents = `${webpackConfigContents.slice(0, requireNode.getStart())}'@nx/rspack/app-plugin'${webpackConfigContents.slice(requireNode.getEnd())}`;
+    // Convert const { NxAppWebpackPlugin } to const { NxAppRspackPlugin }
+    ast = tsquery_1.tsquery.ast(webpackConfigContents);
+    const WEBPACK_APP_BINDING_ELEMENT_SELECTOR = 'BindingElement:has(Identifier[name=NxAppWebpackPlugin])';
+    nodes = (0, tsquery_1.tsquery)(ast, WEBPACK_APP_BINDING_ELEMENT_SELECTOR, {
+        visitAllChildren: true,
+    });
+    if (nodes.length === 0) {
+        return webpackConfigContents;
+    }
+    const bindingElement = nodes[0];
+    webpackConfigContents = `${webpackConfigContents.slice(0, bindingElement.getStart())}NxAppRspackPlugin${webpackConfigContents.slice(bindingElement.getEnd())}`;
+    // Convert new NxAppWebpackPlugin() to new NxAppRspackPlugin()
+    ast = tsquery_1.tsquery.ast(webpackConfigContents);
+    const WEBPACK_APP_INSTANTIATION_SELECTOR = 'NewExpression > Identifier[name=NxAppWebpackPlugin]';
+    nodes = (0, tsquery_1.tsquery)(ast, WEBPACK_APP_INSTANTIATION_SELECTOR, {
+        visitAllChildren: true,
+    });
+    if (nodes.length === 0) {
+        return webpackConfigContents;
+    }
+    const instantiation = nodes[0];
+    webpackConfigContents = `${webpackConfigContents.slice(0, instantiation.getStart())}NxAppRspackPlugin${webpackConfigContents.slice(instantiation.getEnd())}`;
+    return webpackConfigContents;
+}
+function transformEsmConfig(tree, webpackConfigContents, ast) {
+    // Convert from '@nx/webpack/app-plugin' to from '@nx/rspack/app-plugin'
+    const WEBPACK_APP_PLUGIN_IMPORT_SELECTOR = 'ImportClause ~ StringLiteral[value=@nx/webpack/app-plugin]';
+    let nodes = (0, tsquery_1.tsquery)(ast, WEBPACK_APP_PLUGIN_IMPORT_SELECTOR, {
+        visitAllChildren: true,
+    });
+    if (nodes.length === 0) {
+        return webpackConfigContents;
+    }
+    const importNode = nodes[0];
+    webpackConfigContents = `${webpackConfigContents.slice(0, importNode.getStart())}'@nx/rspack/app-plugin'${webpackConfigContents.slice(importNode.getEnd())}`;
+    // Convert import { NxAppWebpackPlugin } to import { NxAppRspackPlugin }
+    ast = tsquery_1.tsquery.ast(webpackConfigContents);
+    const WEBPACK_APP_IMPORT_SPECIFIER_SELECTOR = 'ImportSpecifier > Identifier[name=NxAppWebpackPlugin]';
+    nodes = (0, tsquery_1.tsquery)(ast, WEBPACK_APP_IMPORT_SPECIFIER_SELECTOR, {
+        visitAllChildren: true,
+    });
+    if (nodes.length === 0) {
+        return webpackConfigContents;
+    }
+    const importSpecifier = nodes[0];
+    webpackConfigContents = `${webpackConfigContents.slice(0, importSpecifier.getStart())}NxAppRspackPlugin${webpackConfigContents.slice(importSpecifier.getEnd())}`;
+    // Convert new NxAppWebpackPlugin() to new NxAppRspackPlugin()
+    ast = tsquery_1.tsquery.ast(webpackConfigContents);
+    const WEBPACK_APP_INSTANTIATION_SELECTOR = 'NewExpression > Identifier[name=NxAppWebpackPlugin]';
+    nodes = (0, tsquery_1.tsquery)(ast, WEBPACK_APP_INSTANTIATION_SELECTOR, {
+        visitAllChildren: true,
+    });
+    if (nodes.length === 0) {
+        return webpackConfigContents;
+    }
+    const instantiation = nodes[0];
+    webpackConfigContents = `${webpackConfigContents.slice(0, instantiation.getStart())}NxAppRspackPlugin${webpackConfigContents.slice(instantiation.getEnd())}`;
+    return webpackConfigContents;
+}

package/src/plugins/utils/plugins/postcss-cli-resources.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"postcss-cli-resources.d.ts","sourceRoot":"","sources":["../../../../../../../packages/rspack/src/plugins/utils/plugins/postcss-cli-resources.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAalD,MAAM,WAAW,0BAA0B;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,UAAU,EAAE,MAAM,CAAC;CACpB;AAgBD,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,0BAA0B;;;EA4JtE"}
+{"version":3,"file":"postcss-cli-resources.d.ts","sourceRoot":"","sources":["../../../../../../../packages/rspack/src/plugins/utils/plugins/postcss-cli-resources.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAalD,MAAM,WAAW,0BAA0B;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,UAAU,EAAE,MAAM,CAAC;CACpB;AAgBD,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,0BAA0B;;;EA8JtE"}

package/src/plugins/utils/plugins/postcss-cli-resources.js

@@ -4,7 +4,6 @@ exports.PostcssCliResources = PostcssCliResources;
 const tslib_1 = require("tslib");
 const loader_utils_1 = require("loader-utils");
 const path = tslib_1.__importStar(require("path"));
-const url = tslib_1.__importStar(require("node:url"));
 function wrapUrl(url) {
     let wrappedUrl;
     const hasSingleQuotes = url.indexOf("'") >= 0;
@@ -68,7 +67,9 @@ function PostcssCliResources(options) {
             resourceCache.set(cacheKey, outputUrl);
             return outputUrl;
         }
-        const { pathname, hash, search } = url.parse(inputUrl.replace(/\\/g, '/'));
+        const normalizedUrl = inputUrl.replace(/\\/g, '/');
+        const parsedUrl = new URL(normalizedUrl, 'file:///');
+        const { pathname, hash, search } = parsedUrl;
         const resolver = (file, base) => new Promise((resolve, reject) => {
             loader.resolve(base, decodeURI(file), (err, result) => {
                 if (err) {
@@ -93,11 +94,11 @@ function PostcssCliResources(options) {
                 loader.emitFile(outputPath, content, undefined);
                 let outputUrl = outputPath.replace(/\\/g, '/');
                 if (hash || search) {
-                    outputUrl = url.format({ pathname: outputUrl, hash, search });
+                    outputUrl = outputUrl + (search || '') + (hash || '');
                 }
                 const loaderOptions = loader.loaders[loader.loaderIndex].options;
                 if (deployUrl && loaderOptions.ident !== 'extracted') {
-                    outputUrl = url.resolve(deployUrl, outputUrl);
+                    outputUrl = new URL(outputUrl, deployUrl).href;
                 }
                 resourceCache.set(cacheKey, outputUrl);
                 resolve(outputUrl);