ed95a92 refactor(@angular-devkit/build-angular): move Angular memory Vite plugin into separate file

Author: Angular Builds

package.json

@@ -1,15 +1,15 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "17.1.0+sha-85ac2f3",
+  "version": "17.1.0+sha-ed95a92",
   "description": "Angular Webpack Build Facade",
   "main": "src/index.js",
   "typings": "src/index.d.ts",
   "builders": "builders.json",
   "dependencies": {
     "@ampproject/remapping": "2.2.1",
-    "@angular-devkit/architect": "github:angular/angular-devkit-architect-builds#85ac2f3",
-    "@angular-devkit/build-webpack": "github:angular/angular-devkit-build-webpack-builds#85ac2f3",
-    "@angular-devkit/core": "github:angular/angular-devkit-core-builds#85ac2f3",
+    "@angular-devkit/architect": "github:angular/angular-devkit-architect-builds#ed95a92",
+    "@angular-devkit/build-webpack": "github:angular/angular-devkit-build-webpack-builds#ed95a92",
+    "@angular-devkit/core": "github:angular/angular-devkit-core-builds#ed95a92",
     "@babel/core": "7.23.7",
     "@babel/generator": "7.23.6",
     "@babel/helper-annotate-as-pure": "7.22.5",
@@ -20,7 +20,7 @@
     "@babel/preset-env": "7.23.7",
     "@babel/runtime": "7.23.7",
     "@discoveryjs/json-ext": "0.5.7",
-    "@ngtools/webpack": "github:angular/ngtools-webpack-builds#85ac2f3",
+    "@ngtools/webpack": "github:angular/ngtools-webpack-builds#ed95a92",
     "@vitejs/plugin-basic-ssl": "1.0.2",
     "ansi-colors": "4.1.3",
     "autoprefixer": "10.4.16",

src/builders/dev-server/vite-server.js

@@ -34,19 +34,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.setupServer = exports.serveWithVite = void 0;
-const remapping_1 = __importDefault(require("@ampproject/remapping"));
-const mrmime_1 = require("mrmime");
 const node_assert_1 = __importDefault(require("node:assert"));
 const promises_1 = require("node:fs/promises");
 const node_path_1 = require("node:path");
 const bundler_context_1 = require("../../tools/esbuild/bundler-context");
 const javascript_transformer_1 = require("../../tools/esbuild/javascript-transformer");
 const rxjs_esm_resolution_plugin_1 = require("../../tools/esbuild/rxjs-esm-resolution-plugin");
 const utils_1 = require("../../tools/esbuild/utils");
+const angular_memory_plugin_1 = require("../../tools/vite/angular-memory-plugin");
 const i18n_locale_plugin_1 = require("../../tools/vite/i18n-locale-plugin");
 const utils_2 = require("../../utils");
 const load_esm_1 = require("../../utils/load-esm");
-const render_page_1 = require("../../utils/server-rendering/render-page");
 const supported_browsers_1 = require("../../utils/supported-browsers");
 const webpack_browser_config_1 = require("../../utils/webpack-browser-config");
 const application_1 = require("../application");
@@ -324,7 +322,6 @@ function analyzeResultFiles(normalizePath, htmlIndexPath, resultFiles, generated
         }
     }
 }
-// eslint-disable-next-line max-lines-per-function
 async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks, externalMetadata, ssr, prebundleTransformer, target, prebundleLoaderExtensions, extensionMiddleware, indexHtmlTransformer, thirdPartySourcemaps = false) {
     const proxy = await (0, utils_2.loadProxyConfiguration)(serverOptions.workspaceRoot, serverOptions.proxyConfig, true);
     // dynamically import Vite for ESM compatibility
@@ -409,189 +406,18 @@ async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks,
         },
         plugins: [
             (0, i18n_locale_plugin_1.createAngularLocaleDataPlugin)(),
-            {
-                name: 'vite:angular-memory',
-                // Ensures plugin hooks run before built-in Vite hooks
-                enforce: 'pre',
-                async resolveId(source, importer) {
-                    // Prevent vite from resolving an explicit external dependency (`externalDependencies` option)
-                    if (externalMetadata.explicit.includes(source)) {
-                        // This is still not ideal since Vite will still transform the import specifier to
-                        // `/@id/${source}` but is currently closer to a raw external than a resolved file path.
-                        return source;
-                    }
-                    if (importer && source[0] === '.' && importer.startsWith(virtualProjectRoot)) {
-                        // Remove query if present
-                        const [importerFile] = importer.split('?', 1);
-                        source =
-                            '/' +
-                                normalizePath((0, node_path_1.join)((0, node_path_1.dirname)((0, node_path_1.relative)(virtualProjectRoot, importerFile)), source));
-                    }
-                    const [file] = source.split('?', 1);
-                    if (outputFiles.has(file)) {
-                        return (0, node_path_1.join)(virtualProjectRoot, source);
-                    }
-                },
-                load(id) {
-                    const [file] = id.split('?', 1);
-                    const relativeFile = '/' + normalizePath((0, node_path_1.relative)(virtualProjectRoot, file));
-                    const codeContents = outputFiles.get(relativeFile)?.contents;
-                    if (codeContents === undefined) {
-                        if (relativeFile.endsWith('/node_modules/vite/dist/client/client.mjs')) {
-                            return loadViteClientCode(file);
-                        }
-                        return;
-                    }
-                    const code = Buffer.from(codeContents).toString('utf-8');
-                    const mapContents = outputFiles.get(relativeFile + '.map')?.contents;
-                    return {
-                        // Remove source map URL comments from the code if a sourcemap is present.
-                        // Vite will inline and add an additional sourcemap URL for the sourcemap.
-                        code: mapContents ? code.replace(/^\/\/# sourceMappingURL=[^\r\n]*/gm, '') : code,
-                        map: mapContents && Buffer.from(mapContents).toString('utf-8'),
-                    };
-                },
-                configureServer(server) {
-                    const originalssrTransform = server.ssrTransform;
-                    server.ssrTransform = async (code, map, url, originalCode) => {
-                        const result = await originalssrTransform(code, null, url, originalCode);
-                        if (!result || !result.map || !map) {
-                            return result;
-                        }
-                        const remappedMap = (0, remapping_1.default)([result.map, map], () => null);
-                        // Set the sourcemap root to the workspace root. This is needed since we set a virtual path as root.
-                        remappedMap.sourceRoot = normalizePath(serverOptions.workspaceRoot) + '/';
-                        return {
-                            ...result,
-                            map: remappedMap,
-                        };
-                    };
-                    // 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 = (0, node_path_1.extname)(pathname);
-                        // 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;
-                        }
-                        // 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 = (0, mrmime_1.lookup)(extension);
-                                if (mimeType) {
-                                    res.setHeader('Content-Type', mimeType);
-                                }
-                                res.setHeader('Cache-Control', 'no-cache');
-                                if (serverOptions.headers) {
-                                    Object.entries(serverOptions.headers).forEach(([name, value]) => res.setHeader(name, value));
-                                }
-                                res.end(outputFile.contents);
-                                return;
-                            }
-                        }
-                        next();
-                    });
-                    if (extensionMiddleware?.length) {
-                        extensionMiddleware.forEach((middleware) => server.middlewares.use(middleware));
-                    }
-                    // Returning a function, installs middleware after the main transform middleware but
-                    // before the built-in HTML middleware
-                    return () => {
-                        function angularSSRMiddleware(req, res, next) {
-                            const url = req.originalUrl;
-                            if (
-                            // Skip if path is not defined.
-                            !url ||
-                                // Skip if path is like a file.
-                                // NOTE: We use a regexp to mitigate against matching requests like: /browse/pl.0ef59752c0cd457dbf1391f08cbd936f
-                                /^\.[a-z]{2,4}$/i.test((0, node_path_1.extname)(url.split('?')[0]))) {
-                                next();
-                                return;
-                            }
-                            const rawHtml = outputFiles.get('/index.server.html')?.contents;
-                            if (!rawHtml) {
-                                next();
-                                return;
-                            }
-                            transformIndexHtmlAndAddHeaders(url, rawHtml, res, next, async (html) => {
-                                const { content } = await (0, render_page_1.renderPage)({
-                                    document: html,
-                                    route: new URL(req.originalUrl ?? '/', server.resolvedUrls?.local[0]).toString(),
-                                    serverContext: 'ssr',
-                                    loadBundle: (uri) => 
-                                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                                    server.ssrLoadModule(uri.slice(1)),
-                                    // 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(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();
-                        });
-                    };
-                    function transformIndexHtmlAndAddHeaders(url, rawHtml, res, next, additionalTransformer) {
-                        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 (serverOptions.headers) {
-                                Object.entries(serverOptions.headers).forEach(([name, value]) => res.setHeader(name, value));
-                            }
-                            res.end(processedHtml);
-                        })
-                            .catch((error) => next(error));
-                    }
-                },
-            },
+            (0, angular_memory_plugin_1.createAngularMemoryPlugin)({
+                workspaceRoot: serverOptions.workspaceRoot,
+                virtualProjectRoot,
+                outputFiles,
+                assets,
+                ssr,
+                external: externalMetadata.explicit,
+                indexHtmlTransformer,
+                extensionMiddleware,
+                extraHeaders: serverOptions.headers,
+                normalizePath,
+            }),
         ],
         // Browser only optimizeDeps. (This does not run for SSR dependencies).
         optimizeDeps: getDepOptimizationConfig({
@@ -627,31 +453,6 @@ async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks,
     return configuration;
 }
 exports.setupServer = setupServer;
-/**
- * Reads the resolved Vite client code from disk and updates the content to remove
- * an unactionable suggestion to update the Vite configuration file to disable the
- * error overlay. The Vite configuration file is not present when used in the Angular
- * CLI.
- * @param file The absolute path to the Vite client code.
- * @returns
- */
-async function loadViteClientCode(file) {
-    const originalContents = await (0, promises_1.readFile)(file, 'utf-8');
-    let contents = originalContents.replace('You can also disable this overlay by setting', '');
-    contents = contents.replace(
-    // eslint-disable-next-line max-len
-    '<code part="config-option-name">server.hmr.overlay</code> to <code part="config-option-value">false</code> in <code part="config-file-name">vite.config.js.</code>', '');
-    (0, node_assert_1.default)(originalContents !== contents, 'Failed to update Vite client error overlay text.');
-    return contents;
-}
-function pathnameWithoutBasePath(url, basePath) {
-    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 getDepOptimizationConfig({ disabled, exclude, include, target, prebundleTransformer, ssr, loader, thirdPartySourcemaps, }) {
     const plugins = [
         {

src/tools/vite/angular-memory-plugin.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @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.io/license
+ */
+import type { Connect, Plugin } from 'vite';
+export interface AngularMemoryPluginOptions {
+    workspaceRoot: string;
+    virtualProjectRoot: string;
+    outputFiles: Map<string, {
+        contents: Uint8Array;
+        servable: boolean;
+    }>;
+    assets: Map<string, string>;
+    ssr: boolean;
+    external?: string[];
+    extensionMiddleware?: Connect.NextHandleFunction[];
+    extraHeaders?: Record<string, string>;
+    indexHtmlTransformer?: (content: string) => Promise<string>;
+    normalizePath: (path: string) => string;
+}
+export declare function createAngularMemoryPlugin(options: AngularMemoryPluginOptions): Plugin;