@nx/angular-rspack 19.0.0-alpha.30

package/dist/lib/plugins/loaders/angular-transform.loader.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = loader;
+const path_1 = require("path");
+const models_1 = require("../../models");
+const angular_rspack_compiler_1 = require("@nx/angular-rspack-compiler");
+const styleUrlsResolver = new angular_rspack_compiler_1.StyleUrlsResolver();
+const templateUrlsResolver = new angular_rspack_compiler_1.TemplateUrlsResolver();
+function loader(content) {
+    const callback = this.async();
+    if (this._compilation[models_1.NG_RSPACK_SYMBOL_NAME] ===
+        undefined) {
+        callback(null, content);
+    }
+    else {
+        const { typescriptFileCache } = this._compilation[models_1.NG_RSPACK_SYMBOL_NAME]();
+        const request = this.resourcePath;
+        const normalizedRequest = (0, path_1.normalize)(request);
+        const templateUrls = templateUrlsResolver.resolve(content, normalizedRequest);
+        const styleUrls = styleUrlsResolver.resolve(content, normalizedRequest);
+        for (const urlSet of [...templateUrls, ...styleUrls]) {
+            // `urlSet` is a string where a relative path is joined with an
+            // absolute path using the `|` symbol.
+            // For example: `./app.component.html|/home/projects/analog/src/app/app.component.html`.
+            const [, absoluteFileUrl] = urlSet.split('|');
+            this.addDependency(absoluteFileUrl);
+        }
+        const contents = typescriptFileCache.get(normalizedRequest);
+        if (contents === undefined) {
+            callback(null, content);
+        }
+        else if (typeof contents === 'string') {
+            callback(null, contents);
+        }
+        else {
+            callback(null, Buffer.from(contents));
+        }
+    }
+}

package/dist/lib/plugins/ng-rspack.d.ts

@@ -0,0 +1,8 @@
+import { Compiler, RspackPluginInstance } from '@rspack/core';
+import { NormalizedAngularRspackPluginOptions } from '../models';
+export declare class NgRspackPlugin implements RspackPluginInstance {
+    pluginOptions: NormalizedAngularRspackPluginOptions;
+    constructor(options: NormalizedAngularRspackPluginOptions);
+    apply(compiler: Compiler): void;
+}
+//# sourceMappingURL=ng-rspack.d.ts.map

package/dist/lib/plugins/ng-rspack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ng-rspack.d.ts","sourceRoot":"","sources":["../../../src/lib/plugins/ng-rspack.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EAMR,oBAAoB,EACrB,MAAM,cAAc,CAAC;AAItB,OAAO,EAAE,oCAAoC,EAAc,MAAM,WAAW,CAAC;AAG7E,qBAAa,cAAe,YAAW,oBAAoB;IACzD,aAAa,EAAE,oCAAoC,CAAC;gBAExC,OAAO,EAAE,oCAAoC;IAIzD,KAAK,CAAC,QAAQ,EAAE,QAAQ;CAkHzB"}

package/dist/lib/plugins/ng-rspack.js

@@ -0,0 +1,114 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NgRspackPlugin = void 0;
+const core_1 = require("@rspack/core");
+const node_path_1 = require("node:path");
+const rxjs_esm_resolution_1 = require("./rxjs-esm-resolution");
+const angular_rspack_plugin_1 = require("./angular-rspack-plugin");
+const angular_ssr_dev_server_1 = require("./angular-ssr-dev-server");
+class NgRspackPlugin {
+    pluginOptions;
+    constructor(options) {
+        this.pluginOptions = options;
+    }
+    apply(compiler) {
+        const root = this.pluginOptions.root;
+        const isProduction = process.env['NODE_ENV'] === 'production';
+        const isDevServer = process.env['WEBPACK_SERVE'];
+        const polyfills = this.pluginOptions.polyfills ?? [];
+        if (polyfills.length > 0) {
+            compiler.hooks.entryOption.tap('NgRspackPlugin', (context, entry) => {
+                const keys = Object.keys(entry);
+                for (const key of keys) {
+                    const entryValue = entry[key];
+                    entryValue.import = [...polyfills, ...entryValue.import];
+                }
+            });
+        }
+        if (!this.pluginOptions.hasServer) {
+            // @TODO: properly handle global styles and scripts
+            const styles = this.pluginOptions.globalStyles ?? [];
+            for (const style of styles) {
+                for (const file of style.files) {
+                    new core_1.EntryPlugin(compiler.context, file, {
+                        name: isProduction ? style.name : undefined,
+                    }).apply(compiler);
+                }
+            }
+            const scripts = this.pluginOptions.globalScripts ?? [];
+            for (const script of scripts) {
+                for (const file of script.files) {
+                    new core_1.EntryPlugin(compiler.context, file, {
+                        name: isProduction ? script.name : undefined,
+                    }).apply(compiler);
+                }
+            }
+            if (this.pluginOptions.index) {
+                new core_1.HtmlRspackPlugin({
+                    minify: false,
+                    inject: 'body',
+                    scriptLoading: 'module',
+                    template: this.pluginOptions.index.input,
+                    chunks: this.pluginOptions.index.insertionOrder.map(([name]) => name),
+                }).apply(compiler);
+            }
+            if (this.pluginOptions.ssr &&
+                typeof this.pluginOptions.ssr === 'object' &&
+                this.pluginOptions.ssr.entry !== undefined) {
+                new angular_ssr_dev_server_1.AngularSsrDevServer(this.pluginOptions.outputPath).apply(compiler);
+            }
+        }
+        if (!isDevServer) {
+            new core_1.ProgressPlugin().apply(compiler);
+        }
+        new core_1.DefinePlugin({
+            ngDevMode: isProduction ? 'false' : {},
+            ngJitMode: this.pluginOptions.aot ? undefined : 'true',
+            ngServerMode: this.pluginOptions.hasServer,
+        }).apply(compiler);
+        if (this.pluginOptions.assets) {
+            new core_1.CopyRspackPlugin({
+                patterns: (this.pluginOptions.assets ?? []).map((asset) => {
+                    let { input, output = '' } = asset;
+                    input = (0, node_path_1.resolve)(root, input).replace(/\\/g, '/');
+                    input = input.endsWith('/') ? input : input + '/';
+                    output = output.endsWith('/') ? output : output + '/';
+                    if (output.startsWith('..')) {
+                        throw new Error('An asset cannot be written to a location outside of the output path.');
+                    }
+                    return {
+                        context: input,
+                        to: output.replace(/^\//, ''),
+                        from: asset.glob,
+                        noErrorOnMissing: true,
+                        force: true,
+                        globOptions: {
+                            dot: true,
+                            ignore: [
+                                '.gitkeep',
+                                '**/.DS_Store',
+                                '**/Thumbs.db',
+                                ...(asset.ignore ?? []),
+                            ],
+                        },
+                    };
+                }),
+            }).apply(compiler);
+        }
+        if (this.pluginOptions.extractLicenses) {
+            const { LicenseWebpackPlugin } = require('license-webpack-plugin');
+            new LicenseWebpackPlugin({
+                stats: {
+                    warnings: false,
+                    errors: false,
+                },
+                perChunkOutput: false,
+                outputFilename: node_path_1.posix.join((0, node_path_1.relative)(this.pluginOptions.outputPath.browser, this.pluginOptions.outputPath.base), '3rdpartylicenses.txt'),
+                skipChildCompilers: true,
+            }).apply(compiler);
+        }
+        new rxjs_esm_resolution_1.RxjsEsmResolutionPlugin().apply(compiler);
+        new angular_rspack_plugin_1.AngularRspackPlugin(this.pluginOptions).apply(compiler);
+    }
+}
+exports.NgRspackPlugin = NgRspackPlugin;

package/dist/lib/plugins/rxjs-esm-resolution.d.ts

@@ -0,0 +1,5 @@
+import { Compiler, RspackPluginInstance } from '@rspack/core';
+export declare class RxjsEsmResolutionPlugin implements RspackPluginInstance {
+    apply(compiler: Compiler): void;
+}
+//# sourceMappingURL=rxjs-esm-resolution.d.ts.map

package/dist/lib/plugins/rxjs-esm-resolution.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rxjs-esm-resolution.d.ts","sourceRoot":"","sources":["../../../src/lib/plugins/rxjs-esm-resolution.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAE9D,qBAAa,uBAAwB,YAAW,oBAAoB;IAClE,KAAK,CAAC,QAAQ,EAAE,QAAQ;CAezB"}

package/dist/lib/plugins/rxjs-esm-resolution.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RxjsEsmResolutionPlugin = void 0;
+class RxjsEsmResolutionPlugin {
+    apply(compiler) {
+        compiler.hooks.normalModuleFactory.tap('RxJSEsmResolution', (normalModuleFactory) => {
+            normalModuleFactory.hooks.resolve.tap('RxJSEsmResolution', (data) => {
+                if (data.request.startsWith('rxjs')) {
+                    data.request = data.request.replace(/([\\/]dist[\\/])cjs([\\/])/, '$1esm$2');
+                }
+            });
+        });
+    }
+}
+exports.RxjsEsmResolutionPlugin = RxjsEsmResolutionPlugin;

package/dist/lib/plugins/server/ssr-reload-server.d.ts

@@ -0,0 +1,6 @@
+export declare class SsrReloadServer {
+    #private;
+    constructor();
+    sendReload(): void;
+}
+//# sourceMappingURL=ssr-reload-server.d.ts.map

package/dist/lib/plugins/server/ssr-reload-server.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ssr-reload-server.d.ts","sourceRoot":"","sources":["../../../../src/lib/plugins/server/ssr-reload-server.ts"],"names":[],"mappings":"AAEA,qBAAa,eAAe;;;IAS1B,UAAU;CAKX"}

package/dist/lib/plugins/server/ssr-reload-server.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SsrReloadServer = void 0;
+const ws_1 = require("ws");
+class SsrReloadServer {
+    #server;
+    constructor() {
+        this.#server = new ws_1.WebSocket.Server({ port: 60_000 });
+        process.on('SIGTERM', () => this.#server.close());
+        process.on('exit', () => this.#server.close());
+    }
+    sendReload() {
+        this.#server.clients.forEach((client) => {
+            client.send('ssr-reload');
+        });
+    }
+}
+exports.SsrReloadServer = SsrReloadServer;

package/dist/lib/plugins/tools/dev-tools-ignore-plugin.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+import { Compiler, RspackPluginInstance } from '@rspack/core';
+/**
+ * This plugin adds a field to source maps that identifies which sources are
+ * vendored or runtime-injected (aka third-party) sources. These are consumed by
+ * Chrome DevTools to automatically ignore-list sources.
+ */
+export declare class DevToolsIgnorePlugin implements RspackPluginInstance {
+    apply(compiler: Compiler): void;
+}
+//# sourceMappingURL=dev-tools-ignore-plugin.d.ts.map

package/dist/lib/plugins/tools/dev-tools-ignore-plugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dev-tools-ignore-plugin.d.ts","sourceRoot":"","sources":["../../../../src/lib/plugins/tools/dev-tools-ignore-plugin.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAe,QAAQ,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAa3E;;;;GAIG;AACH,qBAAa,oBAAqB,YAAW,oBAAoB;IAC/D,KAAK,CAAC,QAAQ,EAAE,QAAQ;CA4CzB"}

package/dist/lib/plugins/tools/dev-tools-ignore-plugin.js

@@ -0,0 +1,57 @@
+"use strict";
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DevToolsIgnorePlugin = void 0;
+const core_1 = require("@rspack/core");
+// Following the naming conventions from
+// https://sourcemaps.info/spec.html#h.ghqpj1ytqjbm
+const IGNORE_LIST = 'x_google_ignoreList';
+const PLUGIN_NAME = 'devtools-ignore-plugin';
+/**
+ * This plugin adds a field to source maps that identifies which sources are
+ * vendored or runtime-injected (aka third-party) sources. These are consumed by
+ * Chrome DevTools to automatically ignore-list sources.
+ */
+class DevToolsIgnorePlugin {
+    apply(compiler) {
+        const { RawSource } = compiler.rspack.sources;
+        compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
+            compilation.hooks.processAssets.tap({
+                name: PLUGIN_NAME,
+                stage: core_1.Compilation.PROCESS_ASSETS_STAGE_DEV_TOOLING,
+            }, (assets) => {
+                for (const [name, asset] of Object.entries(assets)) {
+                    // Instead of using `asset.map()` to fetch the source maps from
+                    // SourceMapSource assets, process them directly as a RawSource.
+                    // This is because `.map()` is slow and can take several seconds.
+                    if (!name.endsWith('.map')) {
+                        // Ignore non source map files.
+                        continue;
+                    }
+                    const mapContent = asset.source().toString();
+                    if (!mapContent) {
+                        continue;
+                    }
+                    const map = JSON.parse(mapContent);
+                    const ignoreList = [];
+                    for (const [index, path] of map.sources.entries()) {
+                        if (path.includes('/node_modules/') ||
+                            path.startsWith('webpack/') ||
+                            path.startsWith('rspack/')) {
+                            ignoreList.push(index);
+                        }
+                    }
+                    map[IGNORE_LIST] = ignoreList;
+                    compilation.updateAsset(name, new RawSource(JSON.stringify(map)));
+                }
+            });
+        });
+    }
+}
+exports.DevToolsIgnorePlugin = DevToolsIgnorePlugin;

package/dist/lib/ssr/server.d.ts

@@ -0,0 +1,13 @@
+import express from 'express';
+interface RspackAngularServer {
+    app: express.Express;
+    listen: (port?: number) => void;
+}
+export interface RspackAngularServerOptions {
+    serverDistFolder?: string;
+    browserDistFolder?: string;
+    indexHtml?: string;
+}
+export declare function createServer(bootstrap: any, opts?: RspackAngularServerOptions): RspackAngularServer;
+export {};
+//# sourceMappingURL=server.d.ts.map

package/dist/lib/ssr/server.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../../../src/lib/ssr/server.ts"],"names":[],"mappings":"AAEA,OAAO,OAAO,MAAM,SAAS,CAAC;AAG9B,UAAU,mBAAmB;IAC3B,GAAG,EAAE,OAAO,CAAC,OAAO,CAAC;IACrB,MAAM,EAAE,CAAC,IAAI,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAED,MAAM,WAAW,0BAA0B;IACzC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,YAAY,CAC1B,SAAS,EAAE,GAAG,EACd,IAAI,CAAC,EAAE,0BAA0B,GAChC,mBAAmB,CAmDrB"}

package/dist/lib/ssr/server.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createServer = createServer;
+const tslib_1 = require("tslib");
+const common_1 = require("@angular/common");
+const node_1 = require("@angular/ssr/node");
+const express_1 = tslib_1.__importDefault(require("express"));
+const node_path_1 = require("node:path");
+function createServer(bootstrap, opts) {
+    const serverDistFolder = opts?.serverDistFolder ?? (0, node_path_1.dirname)(__filename);
+    const browserDistFolder = opts?.browserDistFolder ?? (0, node_path_1.resolve)(serverDistFolder, '../browser');
+    const indexHtml = opts?.indexHtml ?? (0, node_path_1.join)(browserDistFolder, 'index.html');
+    const app = (0, express_1.default)();
+    const commonEngine = new node_1.CommonEngine();
+    app.get('**', express_1.default.static(browserDistFolder, {
+        maxAge: '1y',
+        index: false,
+    }));
+    /**
+     * Handle all other requests by rendering the Angular application.
+     */
+    app.get('**', async (req, res, next) => {
+        const { protocol, originalUrl, baseUrl, headers } = req;
+        commonEngine
+            .render({
+            bootstrap,
+            documentFilePath: indexHtml,
+            url: `${protocol}://${headers.host}${originalUrl}`,
+            publicPath: browserDistFolder,
+            providers: [{ provide: common_1.APP_BASE_HREF, useValue: baseUrl }],
+        })
+            .then((html) => {
+            res.send(html);
+        })
+            .catch((err) => next(err));
+    });
+    return {
+        app,
+        listen: (port = process.env['PORT']
+            ? Number.parseInt(process.env['PORT'], 10)
+            : 4000) => {
+            app.listen(port, () => {
+                console.log(`Node Express server listening on http://localhost:${port}`);
+            });
+        },
+    };
+}

package/eslint.next.config.js

@@ -0,0 +1,42 @@
+const baseConfig = require('../../eslint.config.js');
+
+module.exports = [
+  ...baseConfig,
+  {
+    files: ['**/*.ts'],
+    languageOptions: {
+      parserOptions: {
+        projectService: true,
+        tsconfigRootDir: __dirname,
+      },
+    },
+  },
+  {
+    files: ['**/*.json'],
+    rules: {
+      '@nx/dependency-checks': [
+        'error',
+        {
+          ignoredFiles: [
+            '{projectRoot}/eslint.config.{js,cjs,mjs}',
+            '{projectRoot}/vite.config.{js,ts,mjs,mts}',
+            '{projectRoot}/vitest*.config.{js,ts,mjs,mts}',
+          ],
+          ignoredDependencies: [
+            'nx',
+            'css-loader',
+            'less-loader',
+            'sass-loader',
+            'sass-embedded',
+            '@angular/core',
+            'rxjs',
+            '@ng-rspack/build',
+          ],
+        },
+      ],
+    },
+    languageOptions: {
+      parser: require('jsonc-eslint-parser'),
+    },
+  },
+];

package/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "@nx/angular-rspack",
+  "version": "19.0.0-alpha.30",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "Rspack Plugin and Loaders for building Angular.",
+  "author": "Colum Ferry",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/nrwl/angular-rspack/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nrwl/angular-rspack.git",
+    "directory": "packages/angular-rspack"
+  },
+  "keywords": [
+    "Monorepo",
+    "Angular",
+    "Rspack"
+  ],
+  "type": "commonjs",
+  "main": "./dist/lib/index.js",
+  "types": "./dist/lib/index.d.ts",
+  "typings": "./dist/lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/lib/index.d.ts",
+      "default": "./dist/lib/index.js"
+    },
+    "./loaders/angular-partial-transform-loader": {
+      "types": "./dist/lib/plugins/loaders/angular-partial-transform.loader.d.ts",
+      "default": "./dist/lib/plugins/loaders/angular-partial-transform.loader.js"
+    },
+    "./loaders/angular-loader": {
+      "types": "./dist/lib/plugins/loaders/angular-transform.loader.d.ts",
+      "default": "./dist/lib/plugins/loaders/angular-transform.loader.js"
+    },
+    "./ssr": {
+      "types": "./dist/lib/ssr/server.d.ts",
+      "default": "./dist/lib/ssr/server.js"
+    }
+  },
+  "dependencies": {
+    "@nx/devkit": "^20.0.0",
+    "express": "4.21.1",
+    "source-map-loader": "^5.0.0",
+    "jsonc-parser": "^3.3.1",
+    "less-loader": "^12.2.0",
+    "license-webpack-plugin": "^4.0.2",
+    "sass-embedded": "^1.79.3",
+    "sass-loader": "^16.0.2",
+    "css-loader": "^7.1.2",
+    "tslib": "^2.3.0",
+    "webpack-merge": "^6.0.1",
+    "ws": "^8.18.0",
+    "@nx/angular-rspack-compiler": "19.0.0-alpha.30"
+  },
+  "devDependencies": {
+    "@ng-rspack/testing-setup": "0.0.1"
+  },
+  "peerDependencies": {
+    "@rspack/core": ">=1.0.5 <2.0.0",
+    "@angular/common": ">=19.0.0 <20.0.0",
+    "@angular/ssr": ">=19.0.0 <20.0.0"
+  },
+  "nx": {
+    "name": "angular-rspack",
+    "sourceRoot": "packages/angular-rspack/src",
+    "projectType": "library",
+    "targets": {
+      "code-pushup": {},
+      "unit-test": {
+        "dependsOn": [
+          "build"
+        ]
+      }
+    }
+  },
+  "scripts": {}
+}

package/vitest.config.mts

@@ -0,0 +1,21 @@
+import { defineConfig } from 'vitest/config';
+import { EXCLUDED_FILES_TEST } from '@ng-rspack/testing-setup';
+
+export default defineConfig({
+  cacheDir: '../../node_modules/.vite/ng-rspack-build/unit',
+  root: __dirname,
+  test: {
+    watch: false,
+    globals: true,
+    environment: 'node',
+    include: ['src/**/*.unit.test.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'lcov'],
+      reportsDirectory: '../../coverage/build/unit',
+      exclude: [...EXCLUDED_FILES_TEST],
+    },
+    reporters: ['default'],
+    passWithNoTests: true,
+  },
+});

package/vitest.integration.config.mts

@@ -0,0 +1,28 @@
+import { defineConfig } from 'vitest/config';
+import { resolve } from 'path';
+import { EXCLUDED_FILES_TEST } from '@ng-rspack/testing-setup';
+
+export default defineConfig({
+  root: __dirname,
+  cacheDir: '../../node_modules/.vite/build/integration',
+  plugins: [],
+  resolve: {
+    alias: {
+      '@ng-rspack/testing-utils': resolve(__dirname, '../../testing/utils/src'),
+    },
+  },
+  test: {
+    watch: false,
+    globals: true,
+    environment: 'node',
+    include: ['src/**/*.integration.test.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    passWithNoTests: true,
+    reporters: ['default'],
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'lcov'],
+      reportsDirectory: '../../coverage/build/integration',
+      exclude: [...EXCLUDED_FILES_TEST],
+    },
+  },
+});