refactor(@angular/build): move Vite middlewares into separate files

As the number of middlewares has increased over time, this commit enhances code health by relocating them into individual files.

(cherry picked from commit b5af8b5)

Author: alan-agius4

packages/angular/build/src/builders/dev-server/vite-server.ts

@@ -572,7 +572,6 @@ export async function setupServer(
         outputFiles,
         assets,
         ssr,
-        extraHeaders: serverOptions.headers,
         external: externalMetadata.explicit,
         indexHtmlTransformer,
         extensionMiddleware,

packages/angular/build/src/tools/vite/angular-memory-plugin.ts

@@ -7,28 +7,30 @@
  */
 
 import remapping, { SourceMapInput } from '@ampproject/remapping';
-import { lookup as lookupMimeType } from 'mrmime';
 import assert from 'node:assert';
 import { readFile } from 'node:fs/promises';
-import { ServerResponse } from 'node:http';
-import { dirname, extname, join, relative } from 'node:path';
+import { dirname, join, relative } from 'node:path';
 import type { Connect, Plugin } from 'vite';
-import { renderPage } from '../../utils/server-rendering/render-page';
+import {
+  angularHtmlFallbackMiddleware,
+  createAngularAssetsMiddleware,
+  createAngularIndexHtmlMiddleware,
+  createAngularSSRMiddleware,
+} from './middlewares';
+import { AngularMemoryOutputFiles } from './utils';
 
 export interface AngularMemoryPluginOptions {
   workspaceRoot: string;
   virtualProjectRoot: string;
-  outputFiles: Map<string, { contents: Uint8Array; servable: boolean }>;
+  outputFiles: AngularMemoryOutputFiles;
   assets: Map<string, string>;
   ssr: boolean;
   external?: string[];
   extensionMiddleware?: Connect.NextHandleFunction[];
-  extraHeaders?: Record<string, string>;
   indexHtmlTransformer?: (content: string) => Promise<string>;
   normalizePath: (path: string) => string;
 }
 
-// eslint-disable-next-line max-lines-per-function
 export function createAngularMemoryPlugin(options: AngularMemoryPluginOptions): Plugin {
   const {
     workspaceRoot,
@@ -38,7 +40,6 @@ export function createAngularMemoryPlugin(options: AngularMemoryPluginOptions):
     external,
     ssr,
     extensionMiddleware,
-    extraHeaders,
     indexHtmlTransformer,
     normalizePath,
   } = options;
@@ -112,84 +113,7 @@ export function createAngularMemoryPlugin(options: AngularMemoryPluginOptions):
       };
 
       // Assets and resources get handled first
-      server.middlewares.use(function angularAssetsMiddleware(req, res, next) {
-        if (req.url === undefined || res.writableEnded) {
-          return;
-        }
-
-        // Parse the incoming request.
-        // The base of the URL is unused but required to parse the URL.
-        const pathname = pathnameWithoutBasePath(req.url, server.config.base);
-        const extension = extname(pathname);
-        const pathnameHasTrailingSlash = pathname[pathname.length - 1] === '/';
-
-        // Rewrite all build assets to a vite raw fs URL
-        const assetSourcePath = assets.get(pathname);
-        if (assetSourcePath !== undefined) {
-          // Workaround to disable Vite transformer middleware.
-          // See: https://github.com/vitejs/vite/blob/746a1daab0395f98f0afbdee8f364cb6cf2f3b3f/packages/vite/src/node/server/middlewares/transform.ts#L201 and
-          // https://github.com/vitejs/vite/blob/746a1daab0395f98f0afbdee8f364cb6cf2f3b3f/packages/vite/src/node/server/transformRequest.ts#L204-L206
-          req.headers.accept = 'text/html';
-
-          // The encoding needs to match what happens in the vite static middleware.
-          // ref: https://github.com/vitejs/vite/blob/d4f13bd81468961c8c926438e815ab6b1c82735e/packages/vite/src/node/server/middlewares/static.ts#L163
-          req.url = `${server.config.base}@fs/${encodeURI(assetSourcePath)}`;
-          next();
-
-          return;
-        }
-
-        // HTML fallbacking
-        // This matches what happens in the vite html fallback middleware.
-        // ref: https://github.com/vitejs/vite/blob/main/packages/vite/src/node/server/middlewares/htmlFallback.ts#L9
-        const htmlAssetSourcePath = pathnameHasTrailingSlash
-          ? // Trailing slash check for `index.html`.
-            assets.get(pathname + 'index.html')
-          : // Non-trailing slash check for fallback `.html`
-            assets.get(pathname + '.html');
-
-        if (htmlAssetSourcePath) {
-          req.url = `${server.config.base}@fs/${encodeURI(htmlAssetSourcePath)}`;
-          next();
-
-          return;
-        }
-
-        // Resource files are handled directly.
-        // Global stylesheets (CSS files) are currently considered resources to workaround
-        // dev server sourcemap issues with stylesheets.
-        if (extension !== '.js' && extension !== '.html') {
-          const outputFile = outputFiles.get(pathname);
-          if (outputFile?.servable) {
-            const mimeType = lookupMimeType(extension);
-            if (mimeType) {
-              res.setHeader('Content-Type', mimeType);
-            }
-            res.setHeader('Cache-Control', 'no-cache');
-            if (extraHeaders) {
-              Object.entries(extraHeaders).forEach(([name, value]) => res.setHeader(name, value));
-            }
-            res.end(outputFile.contents);
-
-            return;
-          }
-        }
-
-        // If the path has no trailing slash and it matches a servable directory redirect to the same path with slash.
-        // This matches the default express static behaviour.
-        // See: https://github.com/expressjs/serve-static/blob/89fc94567fae632718a2157206c52654680e9d01/index.js#L182
-        if (!pathnameHasTrailingSlash) {
-          for (const assetPath of assets.keys()) {
-            if (pathname === assetPath.substring(0, assetPath.lastIndexOf('/'))) {
-              redirect(res, req.url + '/');
-
-              return;
-            }
-          }
-        }
-
-        next();
-      });
+      server.middlewares.use(createAngularAssetsMiddleware(server, assets, outputFiles));
 
       if (extensionMiddleware?.length) {
         extensionMiddleware.forEach((middleware) => server.middlewares.use(middleware));
@@ -200,111 +124,16 @@ export function createAngularMemoryPlugin(options: AngularMemoryPluginOptions):
       return () => {
         server.middlewares.use(angularHtmlFallbackMiddleware);
 
-        function angularSSRMiddleware(
-          req: Connect.IncomingMessage,
-          res: ServerResponse,
-          next: Connect.NextFunction,
-        ) {
-          const url = req.originalUrl;
-          if (
-            !req.url ||
-            // Skip if path is not defined.
-            !url ||
-            // Skip if path is like a file.
-            // NOTE: We use a mime type lookup to mitigate against matching requests like: /browse/pl.0ef59752c0cd457dbf1391f08cbd936f
-            lookupMimeTypeFromRequest(url)
-          ) {
-            next();
-
-            return;
-          }
-
-          const rawHtml = outputFiles.get('/index.server.html')?.contents;
-          if (!rawHtml) {
-            next();
-
-            return;
-          }
-
-          transformIndexHtmlAndAddHeaders(req.url, rawHtml, res, next, async (html) => {
-            const resolvedUrls = server.resolvedUrls;
-            const baseUrl = resolvedUrls?.local[0] ?? resolvedUrls?.network[0];
-
-            const { content } = await renderPage({
-              document: html,
-              route: new URL(req.originalUrl ?? '/', baseUrl).toString(),
-              serverContext: 'ssr',
-              loadBundle: (uri: string) =>
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                server.ssrLoadModule(uri.slice(1)) as any,
-              // Files here are only needed for critical CSS inlining.
-              outputFiles: {},
-              // TODO: add support for critical css inlining.
-              inlineCriticalCss: false,
-            });
-
-            return indexHtmlTransformer && content ? await indexHtmlTransformer(content) : content;
-          });
-        }
-
         if (ssr) {
-          server.middlewares.use(angularSSRMiddleware);
+          server.middlewares.use(
+            createAngularSSRMiddleware(server, outputFiles, indexHtmlTransformer),
+          );
         }
 
-        server.middlewares.use(function angularIndexMiddleware(req, res, next) {
-          if (!req.url) {
-            next();
-
-            return;
-          }
-
-          // Parse the incoming request.
-          // The base of the URL is unused but required to parse the URL.
-          const pathname = pathnameWithoutBasePath(req.url, server.config.base);
-
-          if (pathname === '/' || pathname === `/index.html`) {
-            const rawHtml = outputFiles.get('/index.html')?.contents;
-            if (rawHtml) {
-              transformIndexHtmlAndAddHeaders(req.url, rawHtml, res, next, indexHtmlTransformer);
-
-              return;
-            }
-          }
-
-          next();
-        });
+        server.middlewares.use(
+          createAngularIndexHtmlMiddleware(server, outputFiles, indexHtmlTransformer),
+        );
       };
-
-      function transformIndexHtmlAndAddHeaders(
-        url: string,
-        rawHtml: Uint8Array,
-        res: ServerResponse<import('http').IncomingMessage>,
-        next: Connect.NextFunction,
-        additionalTransformer?: (html: string) => Promise<string | undefined>,
-      ) {
-        server
-          .transformIndexHtml(url, Buffer.from(rawHtml).toString('utf-8'))
-          .then(async (processedHtml) => {
-            if (additionalTransformer) {
-              const content = await additionalTransformer(processedHtml);
-              if (!content) {
-                next();
-
-                return;
-              }
-
-              processedHtml = content;
-            }
-
-            res.setHeader('Content-Type', 'text/html');
-            res.setHeader('Cache-Control', 'no-cache');
-            if (extraHeaders) {
-              Object.entries(extraHeaders).forEach(([name, value]) => res.setHeader(name, value));
-            }
-            res.end(processedHtml);
-          })
-          .catch((error) => next(error));
-      }
     },
   };
 }
@@ -334,61 +163,3 @@ async function loadViteClientCode(file: string): Promise<string> {
 
   return updatedContents;
 }
-
-function pathnameWithoutBasePath(url: string, basePath: string): string {
-  const parsedUrl = new URL(url, 'http://localhost');
-  const pathname = decodeURIComponent(parsedUrl.pathname);
-
-  // slice(basePath.length - 1) to retain the trailing slash
-  return basePath !== '/' && pathname.startsWith(basePath)
-    ? pathname.slice(basePath.length - 1)
-    : pathname;
-}
-
-function angularHtmlFallbackMiddleware(
-  req: Connect.IncomingMessage,
-  res: ServerResponse,
-  next: Connect.NextFunction,
-): void {
-  // Similar to how it is handled in vite
-  // https://github.com/vitejs/vite/blob/main/packages/vite/src/node/server/middlewares/htmlFallback.ts#L15C19-L15C45
-  if (
-    (req.method === 'GET' || req.method === 'HEAD') &&
-    (!req.url || !lookupMimeTypeFromRequest(req.url)) &&
-    (!req.headers.accept ||
-      req.headers.accept.includes('text/html') ||
-      req.headers.accept.includes('text/*') ||
-      req.headers.accept.includes('*/*'))
-  ) {
-    req.url = '/index.html';
-  }
-
-  next();
-}
-
-function lookupMimeTypeFromRequest(url: string): string | undefined {
-  const extension = extname(url.split('?')[0]);
-
-  if (extension === '.ico') {
-    return 'image/x-icon';
-  }
-
-  return extension && lookupMimeType(extension);
-}
-
-function redirect(res: ServerResponse, location: string): void {
-  res.statusCode = 301;
-  res.setHeader('Content-Type', 'text/html');
-  res.setHeader('Location', location);
-  res.end(`
-  <!DOCTYPE html>
-  <html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <title>Redirecting</title>
-  </head>
-  <body>
-    <pre>Redirecting to <a href="${location}">${location}</a></pre>
-  </body>
-  </html>`);
-}