fix(angular-rspack): ssg should not run on serve (#75)

Author: Coly010

e2e/fixtures/rspack-ssg-css/src/app/app.component.ts

@@ -10,5 +10,5 @@ import { FooComponent } from './foo.component';
   styleUrl: './app.component.css',
 })
 export class AppComponent {
-  title = 'rspack-ssr-css';
+  title = 'rspack-ssg-css';
 }

packages/angular-rspack/src/lib/config/config-utils/browser-config.ts

@@ -17,14 +17,10 @@ export async function getBrowserConfig(
   defaultConfig: Configuration
 ): Promise<Configuration> {
   const isProduction = process.env['NODE_ENV'] === 'production';
-  const isDevServer = !!process.env['WEBPACK_SERVE'];
 
   return {
     ...defaultConfig,
     name: 'browser',
-    ...(normalizedOptions.hasServer && isDevServer
-      ? { dependencies: ['server'] }
-      : {}),
     target: 'web',
     entry: {
       main: {

packages/angular-rspack/src/lib/config/config-utils/server-config.ts

@@ -16,10 +16,12 @@ export async function getServerConfig(
   i18n: I18nOptions,
   defaultConfig: Configuration
 ): Promise<Configuration> {
+  const isDevServer = !!process.env['WEBPACK_SERVE'];
   const { root } = normalizedOptions;
 
   return {
     ...defaultConfig,
+    dependencies: ['browser'],
     name: 'server',
     target: 'node',
     entry: {
@@ -86,7 +88,7 @@ export async function getServerConfig(
         i18nOptions: i18n,
         platform: 'server',
       }),
-      ...(normalizedOptions.prerender
+      ...(normalizedOptions.prerender && !isDevServer
         ? [new PrerenderPlugin(normalizedOptions, i18n)]
         : []),
     ],

packages/angular-rspack/src/lib/plugins/angular-ssr-dev-server.ts

@@ -1,53 +1,88 @@
-import { Compiler, RspackPluginInstance } from '@rspack/core';
+import {
+  Compilation,
+  Compiler,
+  RspackPluginInstance,
+  sources,
+} from '@rspack/core';
 import { ChildProcess, fork } from 'child_process';
 import { SsrReloadServer } from './server/ssr-reload-server';
-import { OutputPath } from '../models';
+import { NormalizedAngularRspackPluginOptions } from '../models';
 import { join } from 'node:path';
-import { existsSync } from 'node:fs';
+import { existsSync, readFileSync } from 'node:fs';
+import { getIndexOutputFile } from '../utils/index-file/get-index-output-file';
+import { addBodyScript } from '../utils/index-file/add-body-script';
 
 const PLUGIN_NAME = 'AngularSsrDevServer';
+
 export class AngularSsrDevServer implements RspackPluginInstance {
   #devServerProcess: ChildProcess | undefined;
   #wsServer: SsrReloadServer;
-  #outputPath: OutputPath;
+  #options: NormalizedAngularRspackPluginOptions;
 
-  constructor(outputPath: OutputPath) {
-    this.#outputPath = outputPath;
+  constructor(options: NormalizedAngularRspackPluginOptions) {
     this.#wsServer = new SsrReloadServer();
+    this.#options = options;
   }
 
   apply(compiler: Compiler) {
     compiler.hooks.entryOption.tap(PLUGIN_NAME, (context, entry) => {
       const keys = Object.keys(entry);
       for (const key of keys) {
         const entryValue = entry[key];
-        entryValue.import = [
-          ...entryValue.import,
-          require.resolve(`${__dirname}/client/ssr-reload-client.js`),
-        ];
+        entryValue.import = [...entryValue.import];
       }
     });
     compiler.hooks.watchRun.tapAsync(
       PLUGIN_NAME,
       async (compiler, callback) => {
-        compiler.hooks.afterEmit.tapAsync(PLUGIN_NAME, async (_, callback) => {
-          const serverPath = join(this.#outputPath.server, 'server.js');
-          if (this.#devServerProcess) {
-            this.#devServerProcess.kill();
-            this.#devServerProcess = undefined;
-            await new Promise<void>((res) => setTimeout(res, 50));
-          }
-          if (!existsSync(serverPath)) {
-            await new Promise<void>((res) => setTimeout(res, 50));
+        compiler.hooks.afterEmit.tapAsync(
+          PLUGIN_NAME,
+          async (compilation, callback) => {
+            await this.#attachSSRReloadClient(compilation);
+
+            const serverPath = join(
+              this.#options.outputPath.server,
+              'server.js'
+            );
+            if (this.#devServerProcess) {
+              this.#devServerProcess.kill();
+              this.#devServerProcess = undefined;
+              await new Promise<void>((res) => setTimeout(res, 50));
+            }
+            if (!existsSync(serverPath)) {
+              await new Promise<void>((res) => setTimeout(res, 50));
+            }
+            this.#devServerProcess = fork(serverPath);
+            this.#devServerProcess.on('spawn', () => {
+              this.#wsServer.sendReload();
+            });
+            callback();
           }
-          this.#devServerProcess = fork(serverPath);
-          this.#devServerProcess.on('spawn', () => {
-            this.#wsServer.sendReload();
-          });
-          callback();
-        });
+        );
         callback();
       }
     );
   }
+
+  async #attachSSRReloadClient(compilation: Compilation) {
+    const clientPath = require.resolve(
+      `${__dirname}/client/ssr-reload-client.js`
+    );
+    const pathToIndex = join(
+      this.#options.outputPath.browser,
+      getIndexOutputFile(this.#options.index)
+    );
+    const html = readFileSync(pathToIndex, 'utf-8');
+    const updatedHtml = await addBodyScript(
+      html,
+      readFileSync(clientPath, 'utf-8')
+    );
+    const source = new sources.RawSource(updatedHtml);
+
+    const relativePathToIndex = pathToIndex.replace(
+      this.#options.outputPath.browser,
+      ''
+    );
+    compilation.emitAsset(relativePathToIndex, source);
+  }
 }

packages/angular-rspack/src/lib/plugins/ng-rspack.ts

@@ -10,7 +10,6 @@ import { getEntryPoints } from '../config/config-utils/entry-points';
 import type {
   I18nOptions,
   NormalizedAngularRspackPluginOptions,
-  OutputPath,
 } from '../models';
 import { AngularRspackPlugin } from './angular-rspack-plugin';
 import { AngularSsrDevServer } from './angular-ssr-dev-server';
@@ -39,15 +38,13 @@ export class NgRspackPlugin implements RspackPluginInstance {
     const root = this.pluginOptions.root;
     const isDevServer = process.env['WEBPACK_SERVE'];
 
-    if (!this.isPlatformServer && isDevServer) {
+    if (this.isPlatformServer && isDevServer) {
       if (
         this.pluginOptions.ssr &&
         typeof this.pluginOptions.ssr === 'object' &&
         this.pluginOptions.ssr.entry !== undefined
       ) {
-        new AngularSsrDevServer(
-          this.pluginOptions.outputPath as OutputPath
-        ).apply(compiler);
+        new AngularSsrDevServer(this.pluginOptions).apply(compiler);
       }
     }
     if (!isDevServer) {

packages/angular-rspack/src/lib/utils/index-file/add-body-script.ts

@@ -0,0 +1,20 @@
+import { htmlRewritingStream } from './html-rewriting-stream';
+
+export async function addBodyScript(
+  html: string,
+  bodyScriptContents: string
+): Promise<string> {
+  const { rewriter, transformedContent } = await htmlRewritingStream(html);
+
+  const bodyScript = `<script type="text/javascript">${bodyScriptContents}</script>`;
+
+  rewriter.on('startTag', (tag) => {
+    rewriter.emitStartTag(tag);
+
+    if (tag.tagName === 'body') {
+      rewriter.emitRaw(bodyScript);
+    }
+  });
+
+  return transformedContent();
+}