@nx/angular 0.0.0-pr-29771-01aa6b4 → 0.0.0-pr-29860-43e1fcb

package/generators.json

@@ -38,6 +38,11 @@
       "schema": "./src/generators/convert-to-application-executor/schema.json",
       "description": "Converts projects to use the `@nx/angular:application` executor or the `@angular-devkit/build-angular:application` builder."
     },
+    "convert-to-rspack": {
+      "factory": "./src/generators/convert-to-rspack/convert-to-rspack",
+      "schema": "./src/generators/convert-to-rspack/schema.json",
+      "description": "Converts Angular Webpack projects to use Rspack."
+    },
     "directive": {
       "factory": "./src/generators/directive/directive",
       "schema": "./src/generators/directive/schema.json",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/angular",
-  "version": "0.0.0-pr-29771-01aa6b4",
+  "version": "0.0.0-pr-29860-43e1fcb",
   "private": false,
   "description": "The Nx Plugin for Angular contains executors, generators, and utilities for managing Angular applications and libraries within an Nx workspace. It provides: \n\n- Integration with libraries such as Storybook, Jest, ESLint, Tailwind CSS, Playwright and Cypress. \n\n- Generators to help scaffold code quickly (like: Micro Frontends, Libraries, both internal to your codebase and publishable to npm) \n\n- Single Component Application Modules (SCAMs) \n\n- NgRx helpers. \n\n- Utilities for automatic workspace refactoring.",
   "repository": {
@@ -71,13 +71,14 @@
     "semver": "^7.5.3",
     "tslib": "^2.3.0",
     "webpack-merge": "^5.8.0",
-    "@nx/devkit": "0.0.0-pr-29771-01aa6b4",
-    "@nx/js": "0.0.0-pr-29771-01aa6b4",
-    "@nx/eslint": "0.0.0-pr-29771-01aa6b4",
-    "@nx/webpack": "0.0.0-pr-29771-01aa6b4",
-    "@nx/module-federation": "0.0.0-pr-29771-01aa6b4",
-    "@nx/web": "0.0.0-pr-29771-01aa6b4",
-    "@nx/workspace": "0.0.0-pr-29771-01aa6b4",
+    "@nx/devkit": "0.0.0-pr-29860-43e1fcb",
+    "@nx/js": "0.0.0-pr-29860-43e1fcb",
+    "@nx/eslint": "0.0.0-pr-29860-43e1fcb",
+    "@nx/webpack": "0.0.0-pr-29860-43e1fcb",
+    "@nx/rspack": "0.0.0-pr-29860-43e1fcb",
+    "@nx/module-federation": "0.0.0-pr-29860-43e1fcb",
+    "@nx/web": "0.0.0-pr-29860-43e1fcb",
+    "@nx/workspace": "0.0.0-pr-29860-43e1fcb",
     "piscina": "^4.4.0"
   },
   "peerDependencies": {

package/src/generators/convert-to-rspack/convert-to-rspack.d.ts

@@ -0,0 +1,4 @@
+import { type Tree, GeneratorCallback } from '@nx/devkit';
+import type { ConvertToRspackSchema } from './schema';
+export declare function convertToRspack(tree: Tree, schema: ConvertToRspackSchema): Promise<GeneratorCallback>;
+export default convertToRspack;

package/src/generators/convert-to-rspack/convert-to-rspack.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertToRspack = convertToRspack;
+const devkit_1 = require("@nx/devkit");
+const versions_1 = require("../../utils/versions");
+const create_config_1 = require("./lib/create-config");
+async function convertToRspack(tree, schema) {
+    const { project: projectName } = schema;
+    const project = (0, devkit_1.readProjectConfiguration)(tree, projectName);
+    const tasks = [];
+    const createConfigOptions = {
+        root: project.root,
+    };
+    const buildAndServeTargetNames = [];
+    for (const [targetName, target] of Object.entries(project.targets)) {
+        if (target.executor === '@angular-devkit/build-angular:browser' ||
+            target.executor === '@nx/angular:webpack-browser') {
+            createConfigOptions.browser = target.options.main;
+            createConfigOptions.index = target.options.index;
+            createConfigOptions.assets = target.options.assets.map((asset) => {
+                if (typeof asset === 'string') {
+                    return asset;
+                }
+                return asset.input;
+            });
+            createConfigOptions.styles = target.options.styles;
+            createConfigOptions.scripts = target.options.scripts;
+            createConfigOptions.polyfills = target.options.polyfills;
+            createConfigOptions.tsconfigPath = target.options.tsConfig;
+            createConfigOptions.jit =
+                target.options.aot === undefined ? false : !target.options.aot;
+            createConfigOptions.inlineStylesExtension =
+                target.options.inlineStyleLanguage === undefined
+                    ? 'css'
+                    : target.options.inlineStyleLanguage;
+            // TODO: Add more options that can be correctly mapped
+            buildAndServeTargetNames.push(targetName);
+        }
+        else if (target.executor === '@angular-devkit/build-angular:dev-server' ||
+            target.executor === '@nx/angular:dev-server') {
+            buildAndServeTargetNames.push(targetName);
+        }
+    }
+    (0, create_config_1.createConfig)(tree, createConfigOptions);
+    for (const targetName of buildAndServeTargetNames) {
+        delete project.targets[targetName];
+    }
+    (0, devkit_1.updateProjectConfiguration)(tree, projectName, project);
+    const { rspackInitGenerator } = (0, devkit_1.ensurePackage)('@nx/rspack', versions_1.nxVersion);
+    await rspackInitGenerator(tree, {
+        addPlugin: true,
+    });
+    // TODO: Add skipInstall flag
+    const installTask = (0, devkit_1.addDependenciesToPackageJson)(tree, {}, {
+        '@ng-rspack/build': versions_1.ngRspackVersion,
+    });
+    tasks.push(installTask);
+    // TODO: Add skipFormatting flag
+    await (0, devkit_1.formatFiles)(tree);
+    return (0, devkit_1.runTasksInSerial)(...tasks);
+}
+exports.default = convertToRspack;

package/src/generators/convert-to-rspack/lib/create-config.d.ts

@@ -0,0 +1,17 @@
+import { type Tree } from '@nx/devkit';
+export interface CreateConfigOptions {
+    root: string;
+    index: string;
+    browser: string;
+    server?: string;
+    ssrEntry?: string;
+    polyfills: string[];
+    tsconfigPath: string;
+    assets: string[];
+    styles: string[];
+    scripts: string[];
+    jit?: boolean;
+    inlineStylesExtension?: string;
+    fileReplacements?: string[];
+}
+export declare function createConfig(tree: Tree, opts: Partial<CreateConfigOptions>): void;

package/src/generators/convert-to-rspack/lib/create-config.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createConfig = createConfig;
+const devkit_1 = require("@nx/devkit");
+function createConfig(tree, opts) {
+    const configContents = `const { createConfig } = require('@ng-rspack/build');
+  
+  module.exports = createConfig({
+    root: __dirname,
+    index: '${normalizeFromProjectRoot(opts.index, opts.root)}',
+    browser: '${normalizeFromProjectRoot(opts.browser, opts.root)}',
+    ${opts.server
+        ? `server: '${normalizeFromProjectRoot(opts.server, opts.root)}',`
+        : ''}
+    ${opts.ssrEntry
+        ? `ssrEntry: '${normalizeFromProjectRoot(opts.ssrEntry, opts.root)}',`
+        : ''}
+    tsconfigPath: '${normalizeFromProjectRoot(opts.tsconfigPath, opts.root)}',
+    polyfills: ${JSON.stringify(opts.polyfills)},
+    assets: ${JSON.stringify(opts.assets.map((a) => normalizeFromProjectRoot(a, opts.root)))},
+    styles: ${JSON.stringify(opts.styles.map((s) => normalizeFromProjectRoot(s, opts.root)))},
+    scripts: ${JSON.stringify(opts.scripts.map((s) => normalizeFromProjectRoot(s, opts.root)))},
+    jit: ${opts.jit},
+    ${opts.inlineStylesExtension
+        ? `inlineStylesExtension: '${opts.inlineStylesExtension}'`
+        : ''},
+    fileReplacements: ${JSON.stringify(opts.fileReplacements ?? [])},
+    hasServer: ${opts.server || opts.ssrEntry ? true : false},
+    skipTypeChecking: false,
+  });
+  `;
+    tree.write((0, devkit_1.joinPathFragments)(opts.root, 'rspack.config.ts'), configContents);
+}
+function normalizeFromProjectRoot(path, projectRoot) {
+    if (projectRoot === '.') {
+        if (!path.startsWith('./')) {
+            return `./${path}`;
+        }
+        else {
+            return path;
+        }
+    }
+    else if (path.startsWith(projectRoot)) {
+        return path.replace(projectRoot, '.');
+    }
+    else if (!path.startsWith('./')) {
+        return `./${path}`;
+    }
+    return path;
+}

package/src/generators/convert-to-rspack/schema.d.ts

@@ -0,0 +1,3 @@
+export interface ConvertToRspackSchema {
+  project: string;
+}

package/src/generators/convert-to-rspack/schema.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://json-schema.org/schema",
+  "$id": "GeneratorNxApp",
+  "title": "Creates an Angular application.",
+  "description": "Creates an Angular application.",
+  "type": "object",
+  "cli": "nx",
+  "properties": {
+    "project": {
+      "type": "string",
+      "aliases": ["name", "projectName"],
+      "description": "Project for which to convert to rspack.",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
+      "x-prompt": "Which project do you want to convert to rspack?",
+      "x-dropdown": "projects",
+      "x-priority": "important"
+    }
+  }
+}

package/src/generators/utils/storybook-ast/component-info.js

@@ -144,7 +144,7 @@ function getComponentInfoFromDir(tree, entryPoint, dir, componentName, moduleFol
     let componentFileName = null;
     const componentImportPathChildren = [];
     (0, devkit_1.visitNotIgnoredFiles)(tree, dir, (filePath) => {
-        componentImportPathChildren.push(filePath);
+        componentImportPathChildren.push((0, devkit_1.normalizePath)(filePath));
     });
     for (const candidateFile of componentImportPathChildren) {
         if (candidateFile.endsWith('.ts')) {

package/src/utils/backward-compatible-versions.js

@@ -6,6 +6,7 @@ exports.backwardCompatibleVersions = {
         angularVersion: '~17.3.0',
         angularDevkitVersion: '~17.3.0',
         ngPackagrVersion: '~17.3.0',
+        ngRspackVersion: '~19.0.0-alpha.26',
         ngrxVersion: '~17.0.0',
         rxjsVersion: '~7.8.0',
         zoneJsVersion: '~0.14.3',
@@ -33,6 +34,7 @@ exports.backwardCompatibleVersions = {
         angularVersion: '~18.2.0',
         angularDevkitVersion: '~18.2.0',
         ngPackagrVersion: '~18.2.0',
+        ngRspackVersion: '~19.0.0-alpha.26',
         ngrxVersion: '~18.0.2',
         rxjsVersion: '~7.8.0',
         zoneJsVersion: '~0.14.3',

package/src/utils/versions.d.ts

@@ -2,6 +2,7 @@ export declare const nxVersion: any;
 export declare const angularVersion = "~19.1.0";
 export declare const angularDevkitVersion = "~19.1.0";
 export declare const ngPackagrVersion = "~19.1.0";
+export declare const ngRspackVersion = "~19.0.0-alpha.26";
 export declare const ngrxVersion = "^19.0.0";
 export declare const rxjsVersion = "~7.8.0";
 export declare const zoneJsVersion = "~0.15.0";

package/src/utils/versions.js

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.jsoncEslintParserVersion = exports.jasmineMarblesVersion = exports.typesNodeVersion = exports.jestPresetAngularVersion = exports.tsNodeVersion = exports.autoprefixerVersion = exports.postcssUrlVersion = exports.postcssVersion = exports.tailwindVersion = exports.typescriptEslintVersion = exports.angularEslintVersion = exports.moduleFederationEnhancedVersion = exports.moduleFederationNodeVersion = exports.browserSyncVersion = exports.typesExpressVersion = exports.expressVersion = exports.typesCorsVersion = exports.corsVersion = exports.tsLibVersion = exports.angularJsVersion = exports.zoneJsVersion = exports.rxjsVersion = exports.ngrxVersion = exports.ngPackagrVersion = exports.angularDevkitVersion = exports.angularVersion = exports.nxVersion = void 0;
+exports.jsoncEslintParserVersion = exports.jasmineMarblesVersion = exports.typesNodeVersion = exports.jestPresetAngularVersion = exports.tsNodeVersion = exports.autoprefixerVersion = exports.postcssUrlVersion = exports.postcssVersion = exports.tailwindVersion = exports.typescriptEslintVersion = exports.angularEslintVersion = exports.moduleFederationEnhancedVersion = exports.moduleFederationNodeVersion = exports.browserSyncVersion = exports.typesExpressVersion = exports.expressVersion = exports.typesCorsVersion = exports.corsVersion = exports.tsLibVersion = exports.angularJsVersion = exports.zoneJsVersion = exports.rxjsVersion = exports.ngrxVersion = exports.ngRspackVersion = exports.ngPackagrVersion = exports.angularDevkitVersion = exports.angularVersion = exports.nxVersion = void 0;
 exports.nxVersion = require('../../package.json').version;
 exports.angularVersion = '~19.1.0';
 exports.angularDevkitVersion = '~19.1.0';
 exports.ngPackagrVersion = '~19.1.0';
+exports.ngRspackVersion = '~19.0.0-alpha.26';
 exports.ngrxVersion = '^19.0.0';
 exports.rxjsVersion = '~7.8.0';
 exports.zoneJsVersion = '~0.15.0';