@analogjs/vite-plugin-angular 2.0.0-alpha.2 → 2.0.0-alpha.20

package/src/lib/angular-vite-plugin.js

@@ -1,8 +1,9 @@
-import { dirname, relative, resolve } from 'node:path';
+import { basename, dirname, isAbsolute, relative, resolve } from 'node:path';
+import { mkdirSync, writeFileSync } from 'node:fs';
 import * as compilerCli from '@angular/compiler-cli';
-import * as ts from 'typescript';
 import { createRequire } from 'node:module';
-import { normalizePath, preprocessCSS, } from 'vite';
+import { normalizePath, preprocessCSS, defaultClientConditions, } from 'vite';
+import * as ngCompiler from '@angular/compiler';
 import { createCompilerPlugin } from './compiler-plugin.js';
 import { StyleUrlsResolver, TemplateUrlsResolver, } from './component-resolvers.js';
 import { augmentHostWithCaching, augmentHostWithResources, augmentProgramWithVersioning, mergeTransformers, } from './host.js';
@@ -12,17 +13,16 @@ import { createJitResourceTransformer, SourceFileCache, angularMajor, } from './
 import { angularVitestPlugins } from './angular-vitest-plugin.js';
 import { angularStorybookPlugin } from './angular-storybook-plugin.js';
 const require = createRequire(import.meta.url);
-import { getFrontmatterMetadata } from './authoring/frontmatter.js';
-import { defaultMarkdownTemplateTransforms, } from './authoring/markdown-transform.js';
 import { routerPlugin } from './router-plugin.js';
 import { pendingTasksPlugin } from './angular-pending-tasks.plugin.js';
+import { liveReloadPlugin } from './live-reload-plugin.js';
+import { nxFolderPlugin } from './nx-folder-plugin.js';
 /**
  * TypeScript file extension regex
  * Match .(c or m)ts, .ts extensions with an optional ? for query params
  * Ignore .tsx extensions
  */
 const TS_EXT_REGEX = /\.[cm]?(ts|analog|ag)[^x]?\??/;
-const ANGULAR_COMPONENT_PREFIX = '/@ng/component';
 const classNames = new Map();
 export function angular(options) {
     /**
@@ -30,10 +30,7 @@ export function angular(options) {
      * are used for values not provided.
      */
     const pluginOptions = {
-        tsconfig: options?.tsconfig ??
-            (process.env['NODE_ENV'] === 'test'
-                ? './tsconfig.spec.json'
-                : './tsconfig.app.json'),
+        tsconfig: options?.tsconfig || '',
         workspaceRoot: options?.workspaceRoot ?? process.cwd(),
         inlineStylesExtension: options?.inlineStylesExtension ?? 'css',
         advanced: {
@@ -44,29 +41,22 @@ export function angular(options) {
             },
         },
         supportedBrowsers: options?.supportedBrowsers ?? ['safari 15'],
-        jit: options?.experimental?.supportAnalogFormat ? false : options?.jit,
-        supportAnalogFormat: options?.experimental?.supportAnalogFormat ?? false,
-        markdownTemplateTransforms: options?.experimental
-            ?.markdownTemplateTransforms?.length
-            ? options.experimental.markdownTemplateTransforms
-            : defaultMarkdownTemplateTransforms,
+        jit: options?.jit,
         include: options?.include ?? [],
         additionalContentDirs: options?.additionalContentDirs ?? [],
         liveReload: options?.liveReload ?? false,
+        disableTypeChecking: options?.disableTypeChecking ?? true,
     };
-    // The file emitter created during `onStart` that will be used during the build in `onLoad` callbacks for TS files
-    let fileEmitter;
-    let compilerOptions = {};
-    const ts = require('typescript');
     let resolvedConfig;
-    let rootNames;
-    let host;
     let nextProgram;
     let builderProgram;
     let watchMode = false;
-    let testWatchMode = false;
+    let testWatchMode = isTestWatchMode();
+    let inlineComponentStyles;
+    let externalComponentStyles;
     const sourceFileCache = new SourceFileCache();
     const isTest = process.env['NODE_ENV'] === 'test' || !!process.env['VITEST'];
+    const isVitestVscode = !!process.env['VITEST_VSCODE'];
     const isStackBlitz = !!process.versions['webcontainer'];
     const isAstroIntegration = process.env['ANALOG_ASTRO'] === 'true';
     const isStorybook = process.env['npm_lifecycle_script']?.includes('storybook') ||
@@ -75,9 +65,16 @@ export function angular(options) {
         process.env['ANALOG_STORYBOOK'] === 'true';
     const jit = typeof pluginOptions?.jit !== 'undefined' ? pluginOptions.jit : isTest;
     let viteServer;
-    let styleTransform;
     const styleUrlsResolver = new StyleUrlsResolver();
     const templateUrlsResolver = new TemplateUrlsResolver();
+    let outputFile;
+    const outputFiles = new Map();
+    const fileEmitter = (file) => {
+        outputFile?.(file);
+        return outputFiles.get(normalizePath(file));
+    };
+    let initialCompilation = false;
+    const declarationFiles = [];
     function angularPlugin() {
         let isProd = false;
         if (angularMajor < 19 || isTest) {
@@ -85,21 +82,12 @@ export function angular(options) {
         }
         return {
             name: '@analogjs/vite-plugin-angular',
-            async watchChange() {
-                if (isTest) {
-                    await buildAndAnalyze();
-                }
-            },
             async config(config, { command }) {
                 watchMode = command === 'serve';
                 isProd =
                     config.mode === 'production' ||
                         process.env['NODE_ENV'] === 'production';
-                pluginOptions.tsconfig =
-                    options?.tsconfig ??
-                        resolve(config.root || '.', process.env['NODE_ENV'] === 'test'
-                            ? './tsconfig.spec.json'
-                            : './tsconfig.app.json');
+                pluginOptions.tsconfig = getTsConfigPath(config.root || '.', pluginOptions, isProd, isTest, !!config?.build?.lib);
                 return {
                     esbuild: config.esbuild ?? false,
                     optimizeDeps: {
@@ -123,80 +111,60 @@ export function angular(options) {
                         },
                     },
                     resolve: {
-                        conditions: ['style'],
+                        conditions: ['style', ...defaultClientConditions],
                     },
                 };
             },
             configResolved(config) {
                 resolvedConfig = config;
-                // set test watch mode
-                // - vite override from vitest-angular
-                // - @nx/vite executor set server.watch explicitly to undefined (watch)/null (watch=false)
-                // - vite config for test.watch variable
-                testWatchMode =
-                    !(config.server.watch === null) ||
-                        config.test?.watch === true;
+                if (isTest) {
+                    // set test watch mode
+                    // - vite override from vitest-angular
+                    // - @nx/vite executor set server.watch explicitly to undefined (watch)/null (watch=false)
+                    // - vite config for test.watch variable
+                    // - vitest watch mode detected from the command line
+                    testWatchMode =
+                        !(config.server.watch === null) ||
+                            config.test?.watch === true ||
+                            testWatchMode;
+                }
             },
             configureServer(server) {
                 viteServer = server;
                 server.watcher.on('add', async () => {
-                    setupCompilation(resolvedConfig);
-                    await buildAndAnalyze();
+                    await performCompilation(resolvedConfig);
                 });
                 server.watcher.on('unlink', async () => {
-                    setupCompilation(resolvedConfig);
-                    await buildAndAnalyze();
+                    await performCompilation(resolvedConfig);
                 });
-                if (pluginOptions.liveReload) {
-                    const angularComponentMiddleware = async (req, res, next) => {
-                        if (req.url === undefined || res.writableEnded) {
-                            return;
-                        }
-                        if (!req.url.startsWith(ANGULAR_COMPONENT_PREFIX)) {
-                            next();
-                            return;
-                        }
-                        const requestUrl = new URL(req.url, 'http://localhost');
-                        const componentId = requestUrl.searchParams.get('c');
-                        if (!componentId) {
-                            res.statusCode = 400;
-                            res.end();
-                            return;
-                        }
-                        const [fileId] = decodeURIComponent(componentId).split('@');
-                        const result = await fileEmitter?.(resolve(process.cwd(), fileId));
-                        res.setHeader('Content-Type', 'text/javascript');
-                        res.setHeader('Cache-Control', 'no-cache');
-                        res.end(`${result?.hmrUpdateCode || ''}`);
-                    };
-                    viteServer.middlewares.use(angularComponentMiddleware);
-                }
             },
             async buildStart() {
-                setupCompilation(resolvedConfig);
-                // Only store cache if in watch mode
-                if (watchMode) {
-                    augmentHostWithCaching(host, sourceFileCache);
+                // Defer the first compilation in test mode
+                if (!isVitestVscode) {
+                    const { host } = await performCompilation(resolvedConfig);
+                    initialCompilation = true;
+                    // Only store cache if in watch mode
+                    if (watchMode) {
+                        augmentHostWithCaching(host, sourceFileCache);
+                    }
                 }
-                await buildAndAnalyze();
             },
             async handleHotUpdate(ctx) {
-                // The `handleHotUpdate` hook may be called before the `buildStart`,
-                // which sets the compilation. As a result, the `host` may not be available
-                // yet for use, leading to build errors such as "cannot read properties of undefined"
-                // (because `host` is undefined).
-                if (!host) {
-                    return;
-                }
                 if (TS_EXT_REGEX.test(ctx.file)) {
-                    const fileId = ctx.file.split('?')[0] +
-                        (pluginOptions.supportAnalogFormat ? '.ts' : '');
-                    sourceFileCache.invalidate([fileId]);
-                    await buildAndAnalyze();
-                    if (pluginOptions.liveReload && classNames.get(fileId)) {
+                    let [fileId] = ctx.file.split('?');
+                    await performCompilation(resolvedConfig, [fileId]);
+                    const result = fileEmitter(fileId);
+                    if (pluginOptions.liveReload &&
+                        result?.hmrEligible &&
+                        classNames.get(fileId)) {
                         const relativeFileId = `${relative(process.cwd(), fileId)}@${classNames.get(fileId)}`;
                         sendHMRComponentUpdate(ctx.server, relativeFileId);
-                        return [];
+                        return ctx.modules.map((mod) => {
+                            if (mod.id === ctx.file) {
+                                return markModuleSelfAccepting(mod);
+                            }
+                            return mod;
+                        });
                     }
                 }
                 if (/\.(html|htm|css|less|sass|scss)$/.test(ctx.file)) {
@@ -205,7 +173,42 @@ export function angular(options) {
                      * for an external resource (styles, html).
                      */
                     const isDirect = ctx.modules.find((mod) => ctx.file === mod.file && mod.id?.includes('?direct'));
-                    if (isDirect) {
+                    const isInline = ctx.modules.find((mod) => ctx.file === mod.file && mod.id?.includes('?inline'));
+                    if (isDirect || isInline) {
+                        if (pluginOptions.liveReload && isDirect?.id && isDirect.file) {
+                            const isComponentStyle = isDirect.type === 'css' && isComponentStyleSheet(isDirect.id);
+                            if (isComponentStyle) {
+                                const { encapsulation } = getComponentStyleSheetMeta(isDirect.id);
+                                // Track if the component uses ShadowDOM encapsulation
+                                // Shadow DOM components currently require a full reload.
+                                // Vite's CSS hot replacement does not support shadow root searching.
+                                if (encapsulation !== 'shadow') {
+                                    ctx.server.ws.send({
+                                        type: 'update',
+                                        updates: [
+                                            {
+                                                type: 'css-update',
+                                                timestamp: Date.now(),
+                                                path: isDirect.url,
+                                                acceptedPath: isDirect.file,
+                                            },
+                                        ],
+                                    });
+                                    return ctx.modules
+                                        .filter((mod) => {
+                                        // Component stylesheets will have 2 modules (*.component.scss and *.component.scss?direct&ngcomp=xyz&e=x)
+                                        // We remove the module with the query params to prevent vite double logging the stylesheet name "hmr update *.component.scss, *.component.scss?direct&ngcomp=xyz&e=x"
+                                        return mod.file !== ctx.file || mod.id !== isDirect.id;
+                                    })
+                                        .map((mod) => {
+                                        if (mod.file === ctx.file) {
+                                            return markModuleSelfAccepting(mod);
+                                        }
+                                        return mod;
+                                    });
+                                }
+                            }
+                        }
                         return ctx.modules;
                     }
                     const mods = [];
@@ -222,16 +225,26 @@ export function angular(options) {
                             }
                         });
                     });
-                    await buildAndAnalyze();
+                    await performCompilation(resolvedConfig, [
+                        ...mods.map((mod) => mod.id),
+                        ...updates,
+                    ]);
                     if (updates.length > 0) {
                         updates.forEach((updateId) => {
                             const impRelativeFileId = `${relative(process.cwd(), updateId)}@${classNames.get(updateId)}`;
                             sendHMRComponentUpdate(ctx.server, impRelativeFileId);
                         });
-                        return ctx.modules;
+                        return ctx.modules.map((mod) => {
+                            if (mod.id === ctx.file) {
+                                return markModuleSelfAccepting(mod);
+                            }
+                            return mod;
+                        });
                     }
                     return mods;
                 }
+                // clear HMR updates with a full reload
+                classNames.clear();
                 return ctx.modules;
             },
             resolveId(id, importer) {
@@ -239,19 +252,22 @@ export function angular(options) {
                     const path = id.split(';')[1];
                     return `${normalizePath(resolve(dirname(importer), path))}?raw`;
                 }
+                // Map angular external styleUrls to the source file
+                if (isComponentStyleSheet(id)) {
+                    const componentStyles = externalComponentStyles?.get(getFilenameFromPath(id));
+                    if (componentStyles) {
+                        return componentStyles + new URL(id, 'http://localhost').search;
+                    }
+                }
                 return undefined;
             },
-            async load(id, options) {
-                if (pluginOptions.liveReload &&
-                    options?.ssr &&
-                    id.startsWith(ANGULAR_COMPONENT_PREFIX)) {
-                    const requestUrl = new URL(id.slice(1), 'http://localhost');
-                    const componentId = requestUrl.searchParams.get('c');
-                    if (!componentId) {
-                        return;
+            async load(id) {
+                // Map angular inline styles to the source text
+                if (isComponentStyleSheet(id)) {
+                    const componentStyles = inlineComponentStyles?.get(getFilenameFromPath(id));
+                    if (componentStyles) {
+                        return componentStyles;
                     }
-                    const result = await fileEmitter?.(resolve(process.cwd(), decodeURIComponent(componentId).split('@')[0]));
-                    return result?.hmrUpdateCode || '';
                 }
                 return;
             },
@@ -284,6 +300,19 @@ export function angular(options) {
                 if (id.includes('analog-content-')) {
                     return;
                 }
+                /**
+                 * Encapsulate component stylesheets that use emulated encapsulation
+                 */
+                if (pluginOptions.liveReload && isComponentStyleSheet(id)) {
+                    const { encapsulation, componentId } = getComponentStyleSheetMeta(id);
+                    if (encapsulation === 'emulated' && componentId) {
+                        const encapsulated = ngCompiler.encapsulateStyle(code, componentId);
+                        return {
+                            code: encapsulated,
+                            map: null,
+                        };
+                    }
+                }
                 if (TS_EXT_REGEX.test(id)) {
                     if (id.includes('.ts?')) {
                         // Strip the query string off the ID
@@ -295,11 +324,17 @@ export function angular(options) {
                      * for test(Vitest)
                      */
                     if (isTest) {
+                        if (isVitestVscode && !initialCompilation) {
+                            // Do full initial compilation
+                            await performCompilation(resolvedConfig);
+                            initialCompilation = true;
+                        }
                         const tsMod = viteServer?.moduleGraph.getModuleById(id);
                         if (tsMod) {
-                            sourceFileCache.invalidate([id]);
-                            if (testWatchMode) {
-                                await buildAndAnalyze();
+                            const invalidated = tsMod.lastInvalidationTimestamp;
+                            if (testWatchMode && invalidated) {
+                                sourceFileCache.invalidate([id]);
+                                await performCompilation(resolvedConfig, [id]);
                             }
                         }
                     }
@@ -314,7 +349,7 @@ export function angular(options) {
                             this.addWatchFile(absoluteFileUrl);
                         }
                     }
-                    const typescriptResult = await fileEmitter?.(id);
+                    const typescriptResult = fileEmitter(id);
                     if (typescriptResult?.warnings &&
                         typescriptResult?.warnings.length > 0) {
                         this.warn(`${typescriptResult.warnings.join('\n')}`);
@@ -335,25 +370,6 @@ export function angular(options) {
                             data = data.replace(`angular:jit:style:file;${styleFile}`, `${resolvedStyleUrl}?inline`);
                         });
                     }
-                    if (jit) {
-                        return {
-                            code: data,
-                            map: null,
-                        };
-                    }
-                    if ((id.endsWith('.analog') ||
-                        id.endsWith('.agx') ||
-                        id.endsWith('.ag')) &&
-                        pluginOptions.supportAnalogFormat &&
-                        fileEmitter) {
-                        sourceFileCache.invalidate([`${id}.ts`]);
-                        const ngFileResult = await fileEmitter(`${id}.ts`);
-                        data = ngFileResult?.content || '';
-                        if (id.includes('.agx')) {
-                            const metadata = await getFrontmatterMetadata(code, id, pluginOptions.markdownTemplateTransforms || []);
-                            data += metadata;
-                        }
-                    }
                     return {
                         code: data,
                         map: null,
@@ -361,10 +377,17 @@ export function angular(options) {
                 }
                 return undefined;
             },
+            closeBundle() {
+                declarationFiles.forEach(({ declarationFileDir, declarationPath, data }) => {
+                    mkdirSync(declarationFileDir, { recursive: true });
+                    writeFileSync(declarationPath, data, 'utf-8');
+                });
+            },
         };
     }
     return [
         angularPlugin(),
+        pluginOptions.liveReload && liveReloadPlugin({ classNames, fileEmitter }),
         ...(isTest && !isStackBlitz ? angularVitestPlugins() : []),
         (jit &&
             jitPlugin({
@@ -374,36 +397,12 @@ export function angular(options) {
             supportedBrowsers: pluginOptions.supportedBrowsers,
             jit,
         }),
-        (isStorybook && angularStorybookPlugin()),
+        (isStorybook &&
+            angularStorybookPlugin(pluginOptions.workspaceRoot)),
         routerPlugin(),
         pendingTasksPlugin(),
+        nxFolderPlugin(),
     ].filter(Boolean);
-    function findAnalogFiles(config) {
-        const analogConfig = pluginOptions.supportAnalogFormat;
-        if (!analogConfig) {
-            return [];
-        }
-        let extraGlobs = [];
-        if (typeof analogConfig === 'object') {
-            if (analogConfig.include) {
-                extraGlobs = analogConfig.include;
-            }
-        }
-        const fg = require('fast-glob');
-        const appRoot = normalizePath(resolve(pluginOptions.workspaceRoot, config.root || '.'));
-        const workspaceRoot = normalizePath(resolve(pluginOptions.workspaceRoot));
-        const globs = [
-            `${appRoot}/**/*.{analog,agx,ag}`,
-            ...extraGlobs.map((glob) => `${workspaceRoot}${glob}.{analog,agx,ag}`),
-            ...(pluginOptions.additionalContentDirs || [])?.map((glob) => `${workspaceRoot}${glob}/**/*.agx`),
-            ...pluginOptions.include.map((glob) => `${workspaceRoot}${glob}`.replace(/\.ts$/, '.analog')),
-        ];
-        return fg
-            .sync(globs, {
-            dot: true,
-        })
-            .map((file) => `${file}.ts`);
-    }
     function findIncludes() {
         const fg = require('fast-glob');
         const workspaceRoot = normalizePath(resolve(pluginOptions.workspaceRoot));
@@ -414,11 +413,28 @@ export function angular(options) {
             dot: true,
         });
     }
-    function setupCompilation(config, context) {
+    function getTsConfigPath(root, options, isProd, isTest, isLib) {
+        if (options.tsconfig && isAbsolute(options.tsconfig)) {
+            return options.tsconfig;
+        }
+        let tsconfigFilePath = './tsconfig.app.json';
+        if (isLib) {
+            tsconfigFilePath = isProd
+                ? './tsconfig.lib.prod.json'
+                : './tsconfig.lib.json';
+        }
+        if (isTest) {
+            tsconfigFilePath = './tsconfig.spec.json';
+        }
+        if (options.tsconfig) {
+            tsconfigFilePath = options.tsconfig;
+        }
+        return resolve(root, tsconfigFilePath);
+    }
+    async function performCompilation(config, ids) {
         const isProd = config.mode === 'production';
-        const analogFiles = findAnalogFiles(config);
         const includeFiles = findIncludes();
-        const { options: tsCompilerOptions, rootNames: rn } = compilerCli.readConfiguration(pluginOptions.tsconfig, {
+        let { options: tsCompilerOptions, rootNames } = compilerCli.readConfiguration(pluginOptions.tsconfig, {
             suppressOutputPathCheck: true,
             outDir: undefined,
             sourceMap: false,
@@ -435,73 +451,149 @@ export function angular(options) {
             supportTestBed: false,
             supportJitMode: false,
         });
-        if (pluginOptions.supportAnalogFormat) {
-            // Experimental Local Compilation is necessary
-            // for the Angular compiler to work with
-            // AOT and virtually compiled .analog files.
-            tsCompilerOptions.compilationMode = 'experimental-local';
-        }
-        if (pluginOptions.liveReload) {
+        if (pluginOptions.liveReload && watchMode) {
             tsCompilerOptions['_enableHmr'] = true;
+            tsCompilerOptions['externalRuntimeStyles'] = true;
+            // Workaround for https://github.com/angular/angular/issues/59310
+            // Force extra instructions to be generated for HMR w/defer
+            tsCompilerOptions['supportTestBed'] = true;
+        }
+        if (tsCompilerOptions.compilationMode === 'partial') {
+            // These options can't be false in partial mode
+            tsCompilerOptions['supportTestBed'] = true;
+            tsCompilerOptions['supportJitMode'] = true;
+        }
+        if (!isTest && config.build?.lib) {
+            tsCompilerOptions['declaration'] = true;
+            tsCompilerOptions['declarationMap'] = watchMode;
+            tsCompilerOptions['inlineSources'] = true;
         }
-        rootNames = rn.concat(analogFiles, includeFiles);
-        compilerOptions = tsCompilerOptions;
-        host = ts.createIncrementalCompilerHost(compilerOptions);
-        styleTransform = (code, filename) => preprocessCSS(code, filename, config);
+        rootNames = rootNames.concat(includeFiles);
+        const ts = require('typescript');
+        const host = ts.createIncrementalCompilerHost(tsCompilerOptions);
         if (!jit) {
+            const styleTransform = (code, filename) => preprocessCSS(code, filename, config);
+            inlineComponentStyles = tsCompilerOptions['externalRuntimeStyles']
+                ? new Map()
+                : undefined;
+            externalComponentStyles = tsCompilerOptions['externalRuntimeStyles']
+                ? new Map()
+                : undefined;
             augmentHostWithResources(host, styleTransform, {
                 inlineStylesExtension: pluginOptions.inlineStylesExtension,
-                supportAnalogFormat: pluginOptions.supportAnalogFormat,
                 isProd,
-                markdownTemplateTransforms: pluginOptions.markdownTemplateTransforms,
+                inlineComponentStyles,
+                externalComponentStyles,
             });
         }
-    }
-    /**
-     * Creates a new NgtscProgram to analyze/re-analyze
-     * the source files and create a file emitter.
-     * This is shared between an initial build and a hot update.
-     */
-    async function buildAndAnalyze() {
+        /**
+         * Creates a new NgtscProgram to analyze/re-analyze
+         * the source files and create a file emitter.
+         * This is shared between an initial build and a hot update.
+         */
         let builder;
         let typeScriptProgram;
         let angularCompiler;
         if (!jit) {
             // Create the Angular specific program that contains the Angular compiler
-            const angularProgram = new compilerCli.NgtscProgram(rootNames, compilerOptions, host, nextProgram);
+            const angularProgram = new compilerCli.NgtscProgram(rootNames, tsCompilerOptions, host, nextProgram);
             angularCompiler = angularProgram.compiler;
             typeScriptProgram = angularProgram.getTsProgram();
             augmentProgramWithVersioning(typeScriptProgram);
-            builder = builderProgram =
-                ts.createEmitAndSemanticDiagnosticsBuilderProgram(typeScriptProgram, host, builderProgram);
+            builder = ts.createEmitAndSemanticDiagnosticsBuilderProgram(typeScriptProgram, host, builderProgram);
             await angularCompiler.analyzeAsync();
             nextProgram = angularProgram;
+            builderProgram =
+                builder;
         }
         else {
-            builder = builderProgram =
-                ts.createEmitAndSemanticDiagnosticsBuilderProgram(rootNames, compilerOptions, host, nextProgram);
+            builder = ts.createEmitAndSemanticDiagnosticsBuilderProgram(rootNames, tsCompilerOptions, host, nextProgram);
             typeScriptProgram = builder.getProgram();
-            nextProgram = builderProgram;
         }
         if (!watchMode) {
             // When not in watch mode, the startup cost of the incremental analysis can be avoided by
             // using an abstract builder that only wraps a TypeScript program.
             builder = ts.createAbstractBuilder(typeScriptProgram, host);
         }
-        const getTypeChecker = () => builder.getProgram().getTypeChecker();
-        fileEmitter = createFileEmitter(builder, mergeTransformers({
-            before: [
-                ...(jit
-                    ? [
-                        compilerCli.constructorParametersDownlevelTransform(builder.getProgram()),
-                        createJitResourceTransformer(getTypeChecker),
-                    ]
-                    : []),
-                ...pluginOptions.advanced.tsTransformers.before,
-            ],
-            after: pluginOptions.advanced.tsTransformers.after,
-            afterDeclarations: pluginOptions.advanced.tsTransformers.afterDeclarations,
-        }, jit ? {} : angularCompiler.prepareEmit().transformers), () => [], angularCompiler, pluginOptions.liveReload);
+        const beforeTransformers = jit
+            ? [
+                compilerCli.constructorParametersDownlevelTransform(builder.getProgram()),
+                createJitResourceTransformer(() => builder.getProgram().getTypeChecker()),
+            ]
+            : [];
+        const transformers = mergeTransformers({ before: beforeTransformers }, jit ? {} : angularCompiler.prepareEmit().transformers);
+        const fileMetadata = getFileMetadata(builder, angularCompiler, pluginOptions.liveReload, pluginOptions.disableTypeChecking);
+        const writeFileCallback = (_filename, content, _a, _b, sourceFiles) => {
+            if (!sourceFiles?.length) {
+                return;
+            }
+            const filename = normalizePath(sourceFiles[0].fileName);
+            if (filename.includes('ngtypecheck.ts') || filename.includes('.d.')) {
+                return;
+            }
+            const metadata = watchMode ? fileMetadata(filename) : {};
+            outputFiles.set(filename, {
+                content,
+                dependencies: [],
+                errors: metadata.errors,
+                warnings: metadata.warnings,
+                hmrUpdateCode: metadata.hmrUpdateCode,
+                hmrEligible: metadata.hmrEligible,
+            });
+        };
+        const writeOutputFile = (id) => {
+            const sourceFile = builder.getSourceFile(id);
+            if (!sourceFile) {
+                return;
+            }
+            let content = '';
+            builder.emit(sourceFile, (filename, data) => {
+                if (/\.[cm]?js$/.test(filename)) {
+                    content = data;
+                }
+                if (!watchMode &&
+                    !isTest &&
+                    /\.d\.ts/.test(filename) &&
+                    !filename.includes('.ngtypecheck.')) {
+                    // output to library root instead /src
+                    const declarationPath = resolve(config.root, config.build.outDir, relative(config.root, filename)).replace('/src/', '/');
+                    const declarationFileDir = declarationPath
+                        .replace(basename(filename), '')
+                        .replace('/src/', '/');
+                    declarationFiles.push({
+                        declarationFileDir,
+                        declarationPath,
+                        data,
+                    });
+                }
+            }, undefined /* cancellationToken */, undefined /* emitOnlyDtsFiles */, transformers);
+            writeFileCallback(id, content, false, undefined, [sourceFile]);
+        };
+        if (watchMode) {
+            if (ids && ids.length > 0) {
+                ids.forEach((id) => writeOutputFile(id));
+            }
+            else {
+                /**
+                 * Only block the server from starting up
+                 * during testing.
+                 */
+                if (isTest) {
+                    // TypeScript will loop until there are no more affected files in the program
+                    while (builder.emitNextAffectedFile(writeFileCallback, undefined, undefined, transformers)) {
+                        /* empty */
+                    }
+                }
+            }
+        }
+        if (!isTest) {
+            /**
+             * Perf: Output files on demand so the dev server
+             * isn't blocked when emitting files.
+             */
+            outputFile = writeOutputFile;
+        }
+        return { host };
     }
 }
 function sendHMRComponentUpdate(server, id) {
@@ -511,38 +603,114 @@ function sendHMRComponentUpdate(server, id) {
     });
     classNames.delete(id);
 }
-export function createFileEmitter(program, transformers = {}, onAfterEmit, angularCompiler, liveReload) {
-    return async (file) => {
+export function getFileMetadata(program, angularCompiler, liveReload, disableTypeChecking) {
+    const ts = require('typescript');
+    return (file) => {
         const sourceFile = program.getSourceFile(file);
         if (!sourceFile) {
-            return undefined;
+            return {};
         }
-        const diagnostics = angularCompiler
-            ? angularCompiler.getDiagnosticsForFile(sourceFile, 1)
-            : [];
+        const diagnostics = getDiagnosticsForSourceFile(sourceFile, !!disableTypeChecking, program, angularCompiler);
         const errors = diagnostics
             .filter((d) => d.category === ts.DiagnosticCategory?.Error)
-            .map((d) => d.messageText);
+            .map((d) => typeof d.messageText === 'object'
+            ? d.messageText.messageText
+            : d.messageText);
         const warnings = diagnostics
             .filter((d) => d.category === ts.DiagnosticCategory?.Warning)
             .map((d) => d.messageText);
         let hmrUpdateCode = undefined;
+        let hmrEligible = false;
         if (liveReload) {
             for (const node of sourceFile.statements) {
                 if (ts.isClassDeclaration(node) && node.name != null) {
                     hmrUpdateCode = angularCompiler?.emitHmrUpdateModule(node);
-                    classNames.set(file, node.name.getText());
+                    if (!!hmrUpdateCode) {
+                        classNames.set(file, node.name.getText());
+                        hmrEligible = true;
+                    }
                 }
             }
         }
-        let content;
-        program.emit(sourceFile, (filename, data) => {
-            if (/\.[cm]?js$/.test(filename)) {
-                content = data;
-            }
-        }, undefined /* cancellationToken */, undefined /* emitOnlyDtsFiles */, transformers);
-        onAfterEmit?.(sourceFile);
-        return { content, dependencies: [], errors, warnings, hmrUpdateCode };
+        return { errors, warnings, hmrUpdateCode, hmrEligible };
     };
 }
+function getDiagnosticsForSourceFile(sourceFile, disableTypeChecking, program, angularCompiler) {
+    const syntacticDiagnostics = program.getSyntacticDiagnostics(sourceFile);
+    if (disableTypeChecking) {
+        // Syntax errors are cheap to compute and the app will not run if there are any
+        // So always show these types of errors regardless if type checking is disabled
+        return syntacticDiagnostics;
+    }
+    const semanticDiagnostics = program.getSemanticDiagnostics(sourceFile);
+    const angularDiagnostics = angularCompiler
+        ? angularCompiler.getDiagnosticsForFile(sourceFile, 1)
+        : [];
+    return [
+        ...syntacticDiagnostics,
+        ...semanticDiagnostics,
+        ...angularDiagnostics,
+    ];
+}
+function markModuleSelfAccepting(mod) {
+    // support Vite 6
+    if ('_clientModule' in mod) {
+        mod['_clientModule'].isSelfAccepting = true;
+    }
+    return {
+        ...mod,
+        isSelfAccepting: true,
+    };
+}
+function isComponentStyleSheet(id) {
+    return id.includes('ngcomp=');
+}
+function getComponentStyleSheetMeta(id) {
+    const params = new URL(id, 'http://localhost').searchParams;
+    const encapsulationMapping = {
+        '0': 'emulated',
+        '2': 'none',
+        '3': 'shadow',
+    };
+    return {
+        componentId: params.get('ngcomp'),
+        encapsulation: encapsulationMapping[params.get('e')],
+    };
+}
+/**
+ * Removes leading / and query string from a url path
+ * e.g. /foo.scss?direct&ngcomp=ng-c3153525609&e=0 returns foo.scss
+ * @param id
+ */
+function getFilenameFromPath(id) {
+    return new URL(id, 'http://localhost').pathname.replace(/^\//, '');
+}
+/**
+ * Checks for vitest run from the command line
+ * @returns boolean
+ */
+export function isTestWatchMode(args = process.argv) {
+    // vitest --run
+    const hasRun = args.find((arg) => arg.includes('--run'));
+    if (hasRun) {
+        return false;
+    }
+    // vitest --no-run
+    const hasNoRun = args.find((arg) => arg.includes('--no-run'));
+    if (hasNoRun) {
+        return true;
+    }
+    // check for --watch=false or --no-watch
+    const hasWatch = args.find((arg) => arg.includes('watch'));
+    if (hasWatch && ['false', 'no'].some((neg) => hasWatch.includes(neg))) {
+        return false;
+    }
+    // check for --watch false
+    const watchIndex = args.findIndex((arg) => arg.includes('watch'));
+    const watchArg = args[watchIndex + 1];
+    if (watchArg && watchArg === 'false') {
+        return false;
+    }
+    return true;
+}
 //# sourceMappingURL=angular-vite-plugin.js.map