piral-ng 1.12.3 → 1.12.4-beta.36dc2ff

package/README.md

@@ -482,6 +482,39 @@ For AoT (i.e. `jitMode: false`) to work correctly the `compilationMode: 'partial
 For AoT to work correctly the Angular sources need to be bundled. This is not the case in scenarios where you installed `piral-ng` as a plugin in your shell or distribute the Angular packages as shared dependencies from your app shell.
 :::
 
+Alternatively, if you want to use Rspack instead of Webpack you can use the convenience `extend-rspack` module.
+
+This is how your *rspack.config.js* can look like:
+
+```js
+const extendRspack = require('piral-ng/extend-rspack');
+
+module.exports = extendRspack();
+```
+
+For using `piral-ng/extend-rspack` you must have installed:
+
+- `@rspack/core`
+- `sass-loader` (only required if you use `.scss`/`.sass` component styles)
+- `piral-cli-rspack`
+
+You can do that via:
+
+```sh
+npm i @rspack/core sass-loader piral-cli-rspack --save-dev
+```
+
+The available options for `piral-ng/extend-rspack` are:
+
+- `ngOptions` (currently only `jitMode`, which must stay at its default of `true`)
+- `patterns` (providing input to the Rspack `CopyRspackPlugin`)
+
+`piral-ng/extend-rspack` relies on Rspack's built-in CSS support (`css/auto`) for regular stylesheets, its built-in `asset/source` module type to inline component templates and component-scoped styles as raw strings, and its built-in `builtin:swc-loader` (configured for legacy decorators and decorator metadata) to compile TypeScript.
+
+::: failure: AoT is not supported with Rspack
+Angular's AoT compiler (`@ngtools/webpack`'s `AngularWebpackPlugin`) depends on Webpack-only compiler internals and does not work with Rspack. `piral-ng/extend-rspack` therefore only supports JIT builds (`jitMode: true`, the default) and throws if `jitMode: false` is requested. If you need an AoT production build with Rspack, use a dedicated Angular/Rspack builder such as [`@nx/angular-rspack`](https://www.npmjs.com/package/@nx/angular-rspack) instead.
+:::
+
 If you have set up the build process then you need to make sure that your application has an entry point (*index.ts*). That entry point has to be a valid pilet entry module. It may look as follows:
 
 ```ts

package/angular-resource-loader.js

@@ -0,0 +1,21 @@
+// Rewrites `templateUrl`/`styleUrls`/`styleUrl` in `@Component()` metadata to inline
+// `require()` calls, since Angular's JIT compiler needs the actual template/styles at
+// class-decoration time - it does not fetch `templateUrl`/`styleUrls` over the network
+// unless `resolveComponentResources()` was run, which we don't wire up here.
+const templateUrlRegex = /templateUrl\s*:\s*(['"`])((?:\\.|(?!\1).)*)\1/g;
+const styleUrlRegex = /styleUrl\s*:\s*(['"`])((?:\\.|(?!\1).)*)\1/g;
+const styleUrlsRegex = /styleUrls\s*:\s*\[([^\]]*)\]/g;
+const stringLiteralRegex = /(['"`])((?:\\.|(?!\1).)*)\1/g;
+
+module.exports = function angularResourceLoader(source) {
+  source = source.replace(templateUrlRegex, (_, quote, url) => `template: require(${quote}${url}${quote})`);
+
+  source = source.replace(styleUrlRegex, (_, quote, url) => `styles: [require(${quote}${url}${quote})]`);
+
+  source = source.replace(styleUrlsRegex, (_, urls) => {
+    const requires = [...urls.matchAll(stringLiteralRegex)].map(([, quote, url]) => `require(${quote}${url}${quote})`);
+    return `styles: [${requires.join(', ')}]`;
+  });
+
+  return source;
+};

package/extend-rspack.js

@@ -0,0 +1,143 @@
+const { CopyRspackPlugin } = require('@rspack/core');
+
+const { resolve } = require('path');
+
+const sassLoader = require.resolve('sass-loader');
+const angularResourceLoader = require.resolve('./angular-resource-loader');
+
+module.exports =
+  (options = {}) =>
+  (config) => {
+    const {
+      patterns = [{ from: resolve(process.cwd(), 'src/assets'), noErrorOnMissing: true }],
+      ngOptions = {},
+    } = options;
+    const jitMode = ngOptions.jitMode ?? true;
+
+    if (!jitMode) {
+      // Angular AOT relies on @ngtools/webpack's AngularWebpackPlugin, which reaches into
+      // webpack-only compiler internals (e.g. resolverFactory) that Rspack does not provide.
+      // There is no drop-in AOT compiler for Rspack yet, so only JIT builds are supported here.
+      // For AOT with Rspack use a dedicated Angular/Rspack builder, e.g. `@nx/angular-rspack`.
+      throw new Error('piral-ng/extend-rspack only supports jitMode: true (AOT is not supported with Rspack).');
+    }
+
+    // piral-cli-rspack nests all its rules in a single top-level `oneOf` array, with separate
+    // (non-merged) entries for `.ts` and `.tsx` - not a combined `/\.tsx?$/` pattern
+    const oneOf = config.module.rules.find((rule) => Array.isArray(rule.oneOf))?.oneOf;
+
+    if (!oneOf) {
+      throw new Error(
+        'piral-ng/extend-rspack could not find the expected module.rules[].oneOf array - is this an unsupported Rspack config?',
+      );
+    }
+
+    oneOf.forEach((rule) => {
+      const test = rule.test?.toString();
+
+      // exclude component-scoped styles from the regular (global) stylesheet handling,
+      // they are inlined into the component as raw text below instead
+      if (test === /\.css$/i.toString()) {
+        rule.exclude = /\.component.css$/i;
+      } else if (test === /\.s[ac]ss$/i.toString()) {
+        rule.exclude = /\.component.s[ac]ss$/i;
+      } else if (test === /\.ts$/.toString() || test === /\.tsx$/.toString()) {
+        // Angular's JIT mode only needs TypeScript's decorator/metadata transform - no
+        // Angular-specific compiler is required, so Rspack's native SWC loader handles it
+        delete rule.loader;
+        delete rule.options;
+        rule.use = [
+          {
+            loader: 'builtin:swc-loader',
+            options: {
+              jsc: {
+                parser: {
+                  syntax: 'typescript',
+                  tsx: test === /\.tsx$/.toString(),
+                  decorators: true,
+                  // Angular puts decorators before `export`, e.g. `@Component() export class`
+                  decoratorsBeforeExport: true,
+                },
+                transform: {
+                  legacyDecorator: true,
+                  decoratorMetadata: true,
+                  useDefineForClassFields: false,
+                },
+              },
+            },
+          },
+          // loaders run right-to-left, so this rewrites templateUrl/styleUrls to require()
+          // calls before the SWC loader compiles the result
+          angularResourceLoader,
+        ];
+      }
+    });
+
+    // Angular templates/styles are consumed as plain strings - Rspack's built-in asset/source
+    // type exports the raw content without any loader; unshifted so it runs before the catch-all rule
+    oneOf.unshift(
+      {
+        test: /\.component.html$/i,
+        type: 'asset/source',
+      },
+      {
+        test: /\.component.css$/i,
+        type: 'asset/source',
+      },
+      {
+        // sass-loader compiles to CSS first, asset/source then exports the result as a string
+        test: /\.component.s[ac]ss$/i,
+        use: [sassLoader],
+        type: 'asset/source',
+      },
+    );
+
+    // The job of this plugin is
+    // (1)
+    // to make @angular/core depend on @angular/compiler - this way @angular/compiler
+    // does not need to be loaded separately and @angular/compiler is present *before*
+    // @angular/core; this is only required in jit mode - as otherwise everything should
+    // be pre-compiled.
+    // (2)
+    // to introduce a dynamic version of the window.ng global, which supports running
+    // with multiple versions of Angular.
+    config.plugins.push({
+      apply(compiler) {
+        const { entry } = compiler.options;
+        const coreEntry = entry['angular-core'];
+        const compilerEntry = entry['angular-compiler'];
+
+        if (typeof coreEntry !== 'undefined') {
+          const compilerDependency = resolve(__dirname, 'core-dynamic.js');
+          coreEntry.import = [compilerDependency, ...coreEntry.import];
+        }
+
+        if (typeof compilerEntry !== 'undefined') {
+          const compilerDependency = resolve(__dirname, 'compiler-dynamic.js');
+          compilerEntry.import = [compilerDependency, ...compilerEntry.import];
+        }
+
+        // if @angular/core / @angular/compiler aren't split into their own shared-dependency
+        // entries (e.g. a plain pilet build), make sure @angular/compiler still loads before
+        // any Angular code runs - otherwise JIT compilation fails at runtime
+        if (typeof coreEntry === 'undefined' && typeof compilerEntry === 'undefined') {
+          const compilerDependency = resolve(__dirname, 'core-dynamic.js');
+
+          Object.values(entry).forEach((e) => {
+            if (e && Array.isArray(e.import)) {
+              e.import = [compilerDependency, ...e.import];
+            }
+          });
+        }
+      },
+    });
+
+    config.plugins.push(
+      new CopyRspackPlugin({
+        patterns,
+      }),
+    );
+
+    return config;
+  };
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "piral-ng",
-  "version": "1.12.3",
+  "version": "1.12.4-beta.36dc2ff",
   "description": "Plugin for integrating Angular components in Piral.",
   "keywords": [
     "piral",
@@ -25,6 +25,7 @@
     "./compiler-dynamic": "./compiler-dynamic.js",
     "./convert": "./convert.js",
     "./core-dynamic": "./core-dynamic.js",
+    "./extend-rspack": "./extend-rspack.js",
     "./extend-webpack": "./extend-webpack.js",
     "./standalone": "./lib/standalone.js",
     "./lib/*": {
@@ -37,12 +38,14 @@
   "files": [
     "lib",
     "src",
+    "angular-resource-loader.js",
     "common.d.ts",
     "common.js",
     "compiler-dynamic.js",
     "convert.d.ts",
     "convert.js",
     "core-dynamic.js",
+    "extend-rspack.js",
     "extend-webpack.js"
   ],
   "repository": {
@@ -71,7 +74,7 @@
     "@angular/platform-browser": "^16.0.0",
     "@angular/platform-browser-dynamic": "^16.0.0",
     "@angular/router": "^16.0.0",
-    "piral-core": "^1.12.3",
+    "piral-core": "^1.12.4-beta.36dc2ff",
     "piral-ng-common": "^16.0.0",
     "rxjs": "^7.3.0"
   }