feat(angular-rspack): Add "zoneless" option to enable Angular's provideZonelessChangeDetection() usage (#115)

* feat(angular-rspack): add "zoneless" option to disable zone.js initialization within PrerenderPlugin

* test: add e2e fixture for zoneless CSR with CSS spec

* test: add e2e fixture for zoneless CSR (i18n) with CSS spec

* test: add e2e fixture for zoneless SSG with CSS spec

* test: add e2e fixture for zoneless SSR with CSS spec

* fix: update import format

* fix: replace zoneless property, inferring zone.js polyfill presence instead

* fix: update pnpm-lock.yaml

---------

Co-authored-by: Jakub Chlebowicz <[email protected]>

Author: Chlebamaticon

e2e/fixtures/rspack-zoneless-csr-css/eslint.next.config.js

@@ -0,0 +1,18 @@
+const baseConfig = require('../../../eslint.config');
+
+module.exports = [
+  ...baseConfig,
+  {
+    files: ['**/*.ts'],
+    languageOptions: {
+      parserOptions: {
+        projectService: true,
+        tsconfigRootDir: __dirname,
+      },
+    },
+  },
+  {
+    files: ['**/*'],
+    rules: {},
+  },
+];

e2e/fixtures/rspack-zoneless-csr-css/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "rspack-zoneless-csr-css",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {},
+  "dependencies": {
+    "@nx/angular-rspack": "workspace:*"
+  },
+  "nx": {
+    "targets": {
+      "serve-api": {
+        "continuous": true,
+        "command": "node ./src/api.mjs",
+        "options": {
+          "cwd": "e2e/fixtures/rspack-zoneless-csr-css"
+        }
+      },
+      "serve": {
+        "dependsOn": [
+          "serve-api"
+        ]
+      }
+    }
+  }
+}

e2e/fixtures/rspack-zoneless-csr-css/proxy.conf.json

@@ -0,0 +1,7 @@
+{
+  "/api": {
+    "target": "http://localhost:3000",
+    "secure": false,
+    "changeOrigin": true
+  }
+}

e2e/fixtures/rspack-zoneless-csr-css/public/favicon.ico

@@ -0,0 +1,101 @@
+module.exports = () => {
+  if (global.NX_GRAPH_CREATION === undefined) {
+    const { createConfig } = require('@nx/angular-rspack');
+    return createConfig(
+      {
+        options: {
+          root: __dirname,
+          index: './src/index.html',
+          assets: [
+            {
+              input: '../shared/assets/src/assets',
+              glob: '**/*',
+              output: 'assets',
+            },
+            { glob: '**/*', input: 'public' },
+          ],
+          styles: [
+            {
+              input: '../shared/styles/src/index.scss',
+              bundleName: 'shared-styles',
+            },
+            './src/styles.css',
+          ],
+          scripts: [
+            './scripts/script1.js',
+            { input: './scripts/script2.js', bundleName: 'scripts' },
+            {
+              input: './scripts/internal-shared-script.js',
+              bundleName: 'shared-scripts',
+            },
+            {
+              input: '../shared/scripts/shared-script.js',
+              bundleName: 'shared-scripts',
+            },
+            {
+              input: './scripts/non-initial-script.js',
+              bundleName: 'non-initial-script',
+              inject: false,
+            },
+          ],
+          polyfills: [],
+          browser: './src/main.ts',
+          outputPath: {
+            base: './dist',
+            browser: './static',
+          },
+          sourceMap: {
+            scripts: true,
+            styles: true,
+          },
+          tsConfig: './tsconfig.app.json',
+          skipTypeChecking: false,
+          devServer: {
+            host: '127.0.0.1',
+            port: 8080,
+            proxyConfig: './proxy.conf.json',
+            hmr: true,
+            liveReload: false,
+            open: false, // Set to true when testing open option
+          },
+          define: {
+            nxAngularRspack: '"20.6.2"',
+          },
+          baseHref: '/foo',
+          subresourceIntegrity: true,
+          crossOrigin: 'anonymous',
+          watch: false, // Set to true when testing watch mode
+        },
+      },
+      {
+        development: {
+          options: {
+            extractLicenses: false,
+            optimization: false,
+            outputHashing: 'none',
+            namedChunks: true,
+            vendorChunk: true,
+          },
+        },
+        production: {
+          options: {
+            budgets: [
+              {
+                type: 'initial',
+                maximumWarning: '500kB',
+                maximumError: '1MB',
+              },
+              {
+                type: 'anyComponentStyle',
+                maximumWarning: '4kB',
+                maximumError: '8kB',
+              },
+            ],
+            outputHashing: 'all',
+          },
+        },
+      }
+    );
+  }
+  return {};
+};

e2e/fixtures/rspack-zoneless-csr-css/rspack.config.js

@@ -0,0 +1 @@
+console.log('internal-shared-script');

e2e/fixtures/rspack-zoneless-csr-css/scripts/internal-shared-script.js

@@ -0,0 +1 @@
+console.log('non-initial-script');

e2e/fixtures/rspack-zoneless-csr-css/scripts/non-initial-script.js

@@ -0,0 +1 @@
+console.log('script1');

e2e/fixtures/rspack-zoneless-csr-css/scripts/script1.js

@@ -0,0 +1 @@
+console.log('script2');

e2e/fixtures/rspack-zoneless-csr-css/scripts/script2.js

@@ -0,0 +1,15 @@
+import http from 'node:http';
+
+const server = http.createServer((req, res) => {
+  const name = req.url?.split('/api/')[1] || 'stranger';
+
+  res.writeHead(200, {
+    'Content-Type': 'application/json',
+    'Access-Control-Allow-Origin': '*',
+  });
+  res.end(JSON.stringify({ message: `Hello ${name}!` }));
+});
+
+server.listen(3000, () => {
+  console.log('Server running at http://localhost:3000');
+});