@analogjs/vite-plugin-angular 2.5.0-beta.3 → 2.5.0-beta.31

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

@@ -1,4 +1,4 @@
-import { existsSync, mkdirSync, writeFileSync, promises as fsPromises, } from 'node:fs';
+import { mkdirSync, writeFileSync, promises as fsPromises } from 'node:fs';
 import { basename, dirname, isAbsolute, join, relative, resolve, } from 'node:path';
 import * as vite from 'vite';
 import * as compilerCli from '@angular/compiler-cli';
@@ -8,7 +8,6 @@ import { globSync } from 'tinyglobby';
 import { defaultClientConditions, normalizePath, preprocessCSS, } from 'vite';
 import { buildOptimizerPlugin } from './angular-build-optimizer-plugin.js';
 import { jitPlugin } from './angular-jit-plugin.js';
-import { createCompilerPlugin, createRolldownCompilerPlugin, } from './compiler-plugin.js';
 import { StyleUrlsResolver, TemplateUrlsResolver, } from './component-resolvers.js';
 import { augmentHostWithCaching, augmentHostWithResources, augmentProgramWithVersioning, mergeTransformers, } from './host.js';
 import { angularVitestPlugins } from './angular-vitest-plugin.js';
@@ -20,7 +19,8 @@ import { nxFolderPlugin } from './nx-folder-plugin.js';
 import { replaceFiles, } from './plugins/file-replacements.plugin.js';
 import { routerPlugin } from './router-plugin.js';
 import { createHash } from 'node:crypto';
-import { compile as analogCompile, scanFile as analogScanFile, scanPackageDts as analogScanPackageDts, collectImportedPackages as analogCollectImportedPackages, jitTransform as analogJitTransform, inlineResourceUrls, extractInlineStyles as extractInlineStylesOxc, generateHmrCode, } from '@analogjs/angular-compiler';
+import { analogCompilerPlugin } from './analog-compiler-plugin.js';
+import { TS_EXT_REGEX, createTsConfigGetter, getTsConfigPath, createDepOptimizerConfig, } from './utils/plugin-config.js';
 export var DiagnosticModes;
 (function (DiagnosticModes) {
     DiagnosticModes[DiagnosticModes["None"] = 0] = "None";
@@ -29,12 +29,6 @@ export var DiagnosticModes;
     DiagnosticModes[DiagnosticModes["Semantic"] = 4] = "Semantic";
     DiagnosticModes[DiagnosticModes["All"] = 7] = "All";
 })(DiagnosticModes || (DiagnosticModes = {}));
-/**
- * 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)[^x]?\??/;
 const classNames = new Map();
 export function angular(options) {
     /**
@@ -61,9 +55,9 @@ export function angular(options) {
         fileReplacements: options?.fileReplacements ?? [],
         useAngularCompilationAPI: options?.experimental?.useAngularCompilationAPI ?? false,
         useAnalogCompiler: options?.experimental?.useAnalogCompiler ?? false,
+        analogCompilationMode: options?.experimental?.analogCompilationMode ?? 'full',
     };
     let resolvedConfig;
-    // Store config context needed for getTsConfigPath resolution
     let tsConfigResolutionContext = null;
     const ts = require('typescript');
     let builder;
@@ -113,126 +107,6 @@ export function angular(options) {
     // Previously the compilation was recreated on every pass, which meant Angular
     // never had prior state and could never produce HMR payloads.
     let angularCompilation;
-    // Analog compiler state (used when experimental.useAnalogCompiler is true)
-    const analogRegistry = new Map();
-    const analogResourceToSource = new Map();
-    /** Tracks which npm packages have already had their .d.ts files scanned. */
-    const scannedDtsPackages = new Set();
-    let analogProjectRoot = '';
-    async function initAnalogCompiler() {
-        if (jit)
-            return; // JIT: no registry scan needed
-        // Scan all source files to build the registry
-        analogRegistry.clear();
-        scannedDtsPackages.clear();
-        const resolvedTsConfigPath = resolveTsConfigPath();
-        analogProjectRoot = dirname(resolvedTsConfigPath);
-        const config = compilerCli.readConfiguration(resolvedTsConfigPath);
-        const results = await Promise.all(config.rootNames.map(async (file) => {
-            try {
-                const code = await fsPromises.readFile(file, 'utf-8');
-                return analogScanFile(code, file);
-            }
-            catch {
-                return []; // Skip unreadable files
-            }
-        }));
-        for (const entries of results) {
-            for (const entry of entries) {
-                analogRegistry.set(entry.className, entry);
-            }
-        }
-    }
-    /**
-     * Lazily scan .d.ts files for external packages imported by the given source.
-     * Each package is scanned at most once and the results are cached in the registry.
-     */
-    function ensureDtsRegistryForSource(code, id) {
-        for (const pkg of analogCollectImportedPackages(code, id)) {
-            if (scannedDtsPackages.has(pkg))
-                continue;
-            scannedDtsPackages.add(pkg);
-            try {
-                const dtsEntries = analogScanPackageDts(pkg, analogProjectRoot);
-                for (const entry of dtsEntries) {
-                    if (!analogRegistry.has(entry.className)) {
-                        analogRegistry.set(entry.className, entry);
-                    }
-                }
-            }
-            catch {
-                // Package may not have .d.ts files or may not be Angular
-            }
-        }
-    }
-    async function handleAnalogCompilerTransform(code, id) {
-        if (!/(Component|Directive|Pipe|Injectable|NgModule)\(/.test(code)) {
-            return undefined;
-        }
-        // JIT mode
-        if (jit) {
-            const result = analogJitTransform(code, id);
-            return { code: result.code, map: result.map };
-        }
-        // Inline external templateUrl/styleUrl(s) into the source before compilation
-        // using OXC parser for precise AST-based rewriting.
-        code = inlineResourceUrls(code, id);
-        // Pre-resolve inline styles that need preprocessing (SCSS/Sass/Less)
-        let resolvedStyles;
-        let resolvedInlineStyles;
-        if (pluginOptions.inlineStylesExtension !== 'css') {
-            const styleStrings = extractInlineStylesOxc(code, id);
-            if (styleStrings.length > 0) {
-                resolvedInlineStyles = new Map();
-                for (let i = 0; i < styleStrings.length; i++) {
-                    try {
-                        const fakePath = id.replace(/\.ts$/, `.inline-${i}.${pluginOptions.inlineStylesExtension}`);
-                        const processed = await preprocessCSS(styleStrings[i], fakePath, resolvedConfig);
-                        resolvedInlineStyles.set(i, processed.code);
-                    }
-                    catch {
-                        // Skip styles that can't be preprocessed
-                    }
-                }
-                if (resolvedInlineStyles.size === 0)
-                    resolvedInlineStyles = undefined;
-            }
-        }
-        // Lazily scan .d.ts files for any external packages this file imports,
-        // so pre-compiled directives (e.g. RouterLinkActive) are in the registry
-        // before template compilation needs them.
-        ensureDtsRegistryForSource(code, id);
-        const result = analogCompile(code, id, {
-            registry: analogRegistry,
-            resolvedStyles,
-            resolvedInlineStyles,
-        });
-        // Track resource dependencies for HMR
-        for (const dep of result.resourceDependencies) {
-            analogResourceToSource.set(dep, id);
-        }
-        // Strip TypeScript-only syntax that the analog compiler preserves.
-        // Use OXC to reliably strip all TS syntax (type annotations, generics,
-        // interfaces, etc.) so the output is valid JavaScript for both client
-        // and SSR environments.
-        const stripped = await vite.transformWithOxc(result.code, id, {
-            lang: 'ts',
-            sourcemap: false,
-            decorator: { legacy: false, emitDecoratorMetadata: false },
-        });
-        let outputCode = stripped.code;
-        // Append HMR code in dev mode
-        if (watchMode && pluginOptions.liveReload) {
-            const fileDeclarations = [...analogRegistry.values()].filter((e) => e.fileName === id);
-            if (fileDeclarations.length > 0) {
-                // Local deps: other Angular classes in the same file that components
-                // may reference as template dependencies.
-                const localDepClassNames = fileDeclarations.map((e) => e.className);
-                outputCode += generateHmrCode(fileDeclarations, localDepClassNames);
-            }
-        }
-        return { code: outputCode, map: result.map };
-    }
     function angularPlugin() {
         let isProd = false;
         if (angularFullVersion < 190000 || isTest) {
@@ -254,7 +128,6 @@ export function angular(options) {
         }
         return {
             name: '@analogjs/vite-plugin-angular',
-            ...(pluginOptions.useAnalogCompiler ? { enforce: 'pre' } : {}),
             async config(config, { command }) {
                 watchMode = command === 'serve';
                 isProd =
@@ -268,62 +141,26 @@ export function angular(options) {
                 };
                 // Do a preliminary resolution for esbuild plugin (before configResolved)
                 const preliminaryTsConfigPath = resolveTsConfigPath();
-                // When useAnalogCompiler is true, configure the built-in OXC transform
-                // to strip TypeScript but NOT lower decorators. The analog compiler
-                // handles decorator processing in its transform hook. This avoids the
-                // ordering conflict where lowered decorators can't be found by the
-                // compiler, while still ensuring all .ts files get TypeScript stripped
-                // (including those excluded from the analog compiler's transform filter).
                 const esbuild = pluginOptions.useAngularCompilationAPI
                     ? undefined
-                    : pluginOptions.useAnalogCompiler
-                        ? false
-                        : (config.esbuild ?? false);
+                    : (config.esbuild ?? false);
                 const oxc = pluginOptions.useAngularCompilationAPI
                     ? undefined
-                    : pluginOptions.useAnalogCompiler
-                        ? {}
-                        : (config.oxc ?? false);
-                const defineOptions = {
-                    ngJitMode: 'false',
-                    ngI18nClosureMode: 'false',
-                    ...(watchMode ? {} : { ngDevMode: 'false' }),
-                };
-                const rolldownOptions = {
-                    plugins: [
-                        createRolldownCompilerPlugin({
-                            tsconfig: preliminaryTsConfigPath,
-                            sourcemap: !isProd,
-                            advancedOptimizations: isProd,
-                            jit,
-                            incremental: watchMode,
-                        }),
-                    ],
-                };
-                const esbuildOptions = {
-                    plugins: [
-                        createCompilerPlugin({
-                            tsconfig: preliminaryTsConfigPath,
-                            sourcemap: !isProd,
-                            advancedOptimizations: isProd,
-                            jit,
-                            incremental: watchMode,
-                        }, isTest, !isAstroIntegration),
-                    ],
-                    define: defineOptions,
-                };
+                    : (config.oxc ?? false);
+                const depOptimizer = createDepOptimizerConfig({
+                    tsconfig: preliminaryTsConfigPath,
+                    isProd,
+                    jit,
+                    watchMode,
+                    isTest,
+                    isAstroIntegration,
+                });
                 return {
                     ...(vite.rolldownVersion ? { oxc } : { esbuild }),
-                    optimizeDeps: {
-                        include: ['rxjs/operators', 'rxjs'],
-                        exclude: ['@angular/platform-server'],
-                        ...(vite.rolldownVersion
-                            ? { rolldownOptions }
-                            : { esbuildOptions }),
-                    },
+                    ...depOptimizer,
                     resolve: {
                         conditions: [
-                            'style',
+                            ...depOptimizer.resolve.conditions,
                             ...(config.resolve?.conditions || defaultClientConditions),
                         ],
                     },
@@ -352,26 +189,6 @@ export function angular(options) {
             },
             configureServer(server) {
                 viteServer = server;
-                if (pluginOptions.useAnalogCompiler) {
-                    // Watch for new .ts files and scan them into the registry
-                    server.watcher.on('add', (filePath) => {
-                        if (filePath.endsWith('.ts') &&
-                            !filePath.endsWith('.spec.ts') &&
-                            !filePath.endsWith('.d.ts')) {
-                            try {
-                                const code = require('fs').readFileSync(filePath, 'utf-8');
-                                const entries = analogScanFile(code, filePath);
-                                for (const entry of entries) {
-                                    analogRegistry.set(entry.className, entry);
-                                }
-                            }
-                            catch {
-                                // Skip unreadable files
-                            }
-                        }
-                    });
-                    return;
-                }
                 // Add/unlink changes the TypeScript program shape, not just file
                 // contents, so we need to invalidate both include discovery and the
                 // cached tsconfig root names before recompiling.
@@ -385,10 +202,6 @@ export function angular(options) {
                 });
             },
             async buildStart() {
-                if (pluginOptions.useAnalogCompiler) {
-                    await initAnalogCompiler();
-                    return;
-                }
                 // Defer the first compilation in test mode
                 if (!isVitestVscode) {
                     await performCompilation(resolvedConfig);
@@ -397,35 +210,6 @@ export function angular(options) {
                 }
             },
             async handleHotUpdate(ctx) {
-                // Analog compiler HMR path
-                if (pluginOptions.useAnalogCompiler) {
-                    // Resource file changes → invalidate parent .ts module
-                    if (analogResourceToSource.has(ctx.file)) {
-                        const parentSource = analogResourceToSource.get(ctx.file);
-                        const parentModule = ctx.server.moduleGraph.getModuleById(parentSource);
-                        if (parentModule) {
-                            return [parentModule];
-                        }
-                    }
-                    if (TS_EXT_REGEX.test(ctx.file)) {
-                        const [fileId] = ctx.file.split('?');
-                        const code = require('fs').readFileSync(fileId, 'utf-8');
-                        // Remove old entries from this file
-                        const oldEntries = [...analogRegistry.entries()]
-                            .filter(([_, v]) => v.fileName === fileId)
-                            .map(([k]) => k);
-                        for (const key of oldEntries) {
-                            analogRegistry.delete(key);
-                        }
-                        // Rescan the changed file
-                        const newEntries = analogScanFile(code, fileId);
-                        for (const entry of newEntries) {
-                            analogRegistry.set(entry.className, entry);
-                        }
-                    }
-                    // Let Vite handle the rest — the transform hook will recompile
-                    return ctx.modules;
-                }
                 if (TS_EXT_REGEX.test(ctx.file)) {
                     let [fileId] = ctx.file.split('?');
                     pendingCompilation = performCompilation(resolvedConfig, [fileId]);
@@ -533,7 +317,36 @@ export function angular(options) {
             resolveId(id, importer) {
                 if (jit && id.startsWith('angular:jit:')) {
                     const path = id.split(';')[1];
-                    return `${normalizePath(resolve(dirname(importer), path))}?${id.includes(':style') ? 'inline' : 'raw'}`;
+                    return `${normalizePath(resolve(dirname(importer), path))}?${id.includes(':style') ? 'analog-inline' : 'analog-raw'}`;
+                }
+                // Intercept .html?raw imports to bypass Vite 7.3.2+ server.fs restrictions
+                // These are generated by JIT template transforms and would otherwise be
+                // blocked by Vite's stricter ?raw query parameter security checks
+                if (id.includes('.html?raw')) {
+                    const filePath = id.split('?')[0];
+                    const resolved = isAbsolute(filePath)
+                        ? normalizePath(filePath)
+                        : importer
+                            ? normalizePath(resolve(dirname(importer), filePath))
+                            : undefined;
+                    if (resolved) {
+                        return resolved + '?analog-raw';
+                    }
+                }
+                // Intercept style ?inline imports to bypass Vite 8.0.5+ server.fs
+                // restrictions. Vite's security check matches /[?&]inline\b/ so we
+                // use ?analog-inline which avoids the regex while we handle CSS
+                // preprocessing and inline export ourselves in the load hook.
+                if (/\.(css|scss|sass|less)\?inline$/.test(id)) {
+                    const filePath = id.split('?')[0];
+                    const resolved = isAbsolute(filePath)
+                        ? normalizePath(filePath)
+                        : importer
+                            ? normalizePath(resolve(dirname(importer), filePath))
+                            : undefined;
+                    if (resolved) {
+                        return resolved + '?analog-inline';
+                    }
                 }
                 // Map angular external styleUrls to the source file
                 if (isComponentStyleSheet(id)) {
@@ -545,6 +358,31 @@ export function angular(options) {
                 return undefined;
             },
             async load(id) {
+                // Handle Angular template raw imports directly to bypass Vite server.fs
+                // restrictions on ?raw query parameters (Vite 7.3.2+)
+                if (id.endsWith('?analog-raw')) {
+                    const filePath = id.slice(0, -'?analog-raw'.length);
+                    const content = await fsPromises.readFile(filePath, 'utf-8');
+                    return `export default ${JSON.stringify(content)}`;
+                }
+                // Handle Angular style imports directly, bypassing Vite 8.0.5+
+                // server.fs security check which blocks IDs matching /[?&]inline\b/.
+                // Compile via preprocessCSS and return as inline string export.
+                //
+                // We accept both ?analog-inline (rewritten by resolveId for the
+                // browser dev-server path) and ?inline (the original query) because
+                // Vitest's fetchModule path calls moduleGraph.ensureEntryFromUrl
+                // before transformRequest, which means pluginContainer.resolveId is
+                // never invoked for module-runner imports — so the resolveId-based
+                // rewrite never runs in the test path. Handling ?inline here covers
+                // both paths.
+                if (id.includes('?analog-inline') ||
+                    /\.(css|scss|sass|less)\?inline$/.test(id)) {
+                    const filePath = id.split('?')[0];
+                    const code = await fsPromises.readFile(filePath, 'utf-8');
+                    const result = await preprocessCSS(code, filePath, resolvedConfig);
+                    return `export default ${JSON.stringify(result.code)}`;
+                }
                 // Map angular inline styles to the source text
                 if (isComponentStyleSheet(id)) {
                     const componentStyles = inlineComponentStyles?.get(getFilenameFromPath(id));
@@ -569,13 +407,6 @@ export function angular(options) {
                         !(options?.transformFilter(code, id) ?? true)) {
                         return;
                     }
-                    // Analog compiler transform path
-                    if (pluginOptions.useAnalogCompiler) {
-                        if (id.includes('.ts?')) {
-                            id = id.replace(/\?(.*)/, '');
-                        }
-                        return handleAnalogCompilerTransform(code, id);
-                    }
                     if (pluginOptions.useAngularCompilationAPI) {
                         const isAngular = /(Component|Directive|Pipe|Injectable|NgModule)\(/.test(code);
                         if (!isAngular) {
@@ -646,24 +477,52 @@ export function angular(options) {
                         pendingCompilation = null;
                     }
                     const typescriptResult = fileEmitter(id);
-                    if (typescriptResult?.warnings &&
-                        typescriptResult?.warnings.length > 0) {
+                    // File not in the Angular program — skip and let other plugins
+                    // or Vite's built-in transform handle it. Warn if it looks like
+                    // an Angular file that should have been compiled.
+                    if (!typescriptResult) {
+                        const isAngular = !id.includes('@ng/component') &&
+                            /(Component|Directive|Pipe|Injectable|NgModule)\(/.test(code);
+                        if (isAngular) {
+                            this.warn(`[@analogjs/vite-plugin-angular]: "${id}" contains Angular decorators but is not in the TypeScript program. ` +
+                                `Ensure it is included in your tsconfig.`);
+                        }
+                        return;
+                    }
+                    if (typescriptResult.warnings &&
+                        typescriptResult.warnings.length > 0) {
                         this.warn(`${typescriptResult.warnings.join('\n')}`);
                     }
-                    if (typescriptResult?.errors && typescriptResult?.errors.length > 0) {
+                    if (typescriptResult.errors && typescriptResult.errors.length > 0) {
                         this.error(`${typescriptResult.errors.join('\n')}`);
                     }
-                    // return fileEmitter
-                    let data = typescriptResult?.content ?? '';
+                    let data = typescriptResult.content ?? '';
                     if (jit && data.includes('angular:jit:')) {
                         data = data.replace(/angular:jit:style:inline;/g, 'virtual:angular:jit:style:inline;');
+                        // Emit ?analog-raw and ?analog-inline directly (instead of
+                        // ?raw / ?inline) so the import ids in the compiled JS never
+                        // match Vite 8.0.5+'s [?&](raw|inline)\b security regex during
+                        // loadAndTransform.
+                        //
+                        // Why this matters: Vite's Denied ID check fires for any id
+                        // matching that regex whose path is outside server.fs.allow,
+                        // and it runs *before* pluginContainer.load. Vitest's worker
+                        // fetchModule path also bypasses pluginContainer.resolveId
+                        // (it calls moduleGraph.ensureEntryFromUrl first, which makes
+                        // the resolveId chain a no-op for the module-runner). So
+                        // neither the resolveId-based ?inline -> ?analog-inline rewrite
+                        // nor the load-hook fallback (added in 2.4.4) gets a chance to
+                        // run for cross-library imports — the security check has
+                        // already thrown by then. Emitting the safe query directly in
+                        // the transform output is the only place we can guarantee Vite
+                        // never sees the dangerous form. (#2263)
                         templateUrls.forEach((templateUrlSet) => {
                             const [templateFile, resolvedTemplateUrl] = templateUrlSet.split('|');
-                            data = data.replace(`angular:jit:template:file;${templateFile}`, `${resolvedTemplateUrl}?raw`);
+                            data = data.replace(`angular:jit:template:file;${templateFile}`, `${resolvedTemplateUrl}?analog-raw`);
                         });
                         styleUrls.forEach((styleUrlSet) => {
                             const [styleFile, resolvedStyleUrl] = styleUrlSet.split('|');
-                            data = data.replace(`angular:jit:style:file;${styleFile}`, `${resolvedStyleUrl}?inline`);
+                            data = data.replace(`angular:jit:style:file;${styleFile}`, `${resolvedStyleUrl}?analog-inline`);
                         });
                     }
                     return {
@@ -684,10 +543,26 @@ export function angular(options) {
             },
         };
     }
+    const compilationPlugin = pluginOptions.useAnalogCompiler
+        ? analogCompilerPlugin({
+            tsconfigGetter: pluginOptions.tsconfigGetter,
+            workspaceRoot: pluginOptions.workspaceRoot,
+            inlineStylesExtension: pluginOptions.inlineStylesExtension,
+            jit,
+            liveReload: pluginOptions.liveReload,
+            supportedBrowsers: pluginOptions.supportedBrowsers,
+            transformFilter: options?.transformFilter,
+            isTest,
+            isAstroIntegration,
+            analogCompilationMode: pluginOptions.analogCompilationMode,
+        })
+        : angularPlugin();
     return [
         replaceFiles(pluginOptions.fileReplacements, pluginOptions.workspaceRoot),
-        angularPlugin(),
-        pluginOptions.liveReload && liveReloadPlugin({ classNames, fileEmitter }),
+        compilationPlugin,
+        !pluginOptions.useAnalogCompiler &&
+            pluginOptions.liveReload &&
+            liveReloadPlugin({ classNames, fileEmitter }),
         ...(isTest && !isStackBlitz ? angularVitestPlugins() : []),
         (jit &&
             jitPlugin({
@@ -713,37 +588,6 @@ export function angular(options) {
             absolute: true,
         });
     }
-    function createTsConfigGetter(tsconfigOrGetter) {
-        if (typeof tsconfigOrGetter === 'function') {
-            return tsconfigOrGetter;
-        }
-        return () => tsconfigOrGetter || '';
-    }
-    function getTsConfigPath(root, tsconfig, isProd, isTest, isLib) {
-        if (tsconfig && isAbsolute(tsconfig)) {
-            if (!existsSync(tsconfig)) {
-                console.error(`[@analogjs/vite-plugin-angular]: Unable to resolve tsconfig at ${tsconfig}. This causes compilation issues. Check the path or set the "tsconfig" property with an absolute path.`);
-            }
-            return tsconfig;
-        }
-        let tsconfigFilePath = './tsconfig.app.json';
-        if (isLib) {
-            tsconfigFilePath = isProd
-                ? './tsconfig.lib.prod.json'
-                : './tsconfig.lib.json';
-        }
-        if (isTest) {
-            tsconfigFilePath = './tsconfig.spec.json';
-        }
-        if (tsconfig) {
-            tsconfigFilePath = tsconfig;
-        }
-        const resolvedPath = resolve(root, tsconfigFilePath);
-        if (!existsSync(resolvedPath)) {
-            console.error(`[@analogjs/vite-plugin-angular]: Unable to resolve tsconfig at ${resolvedPath}. This causes compilation issues. Check the path or set the "tsconfig" property with an absolute path.`);
-        }
-        return resolvedPath;
-    }
     function resolveTsConfigPath() {
         const tsconfigValue = pluginOptions.tsconfigGetter();
         return getTsConfigPath(tsConfigResolutionContext.root, tsconfigValue, tsConfigResolutionContext.isProd, isTest, tsConfigResolutionContext.isLib);