@analogjs/vite-plugin-angular 3.0.0-alpha.24 → 3.0.0-alpha.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@analogjs/vite-plugin-angular",
-  "version": "3.0.0-alpha.24",
+  "version": "3.0.0-alpha.25",
   "description": "Vite Plugin for Angular",
   "type": "module",
   "keywords": [

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

@@ -1,5 +1,6 @@
-import { preprocessCSS } from "vite";
+import { debugStyles } from "./utils/debug.js";
 import { createHash } from "node:crypto";
+import { preprocessCSS } from "vite";
 //#region packages/vite-plugin-angular/src/lib/angular-jit-plugin.ts
 function jitPlugin({ inlineStylesExtension }) {
 	let config;
@@ -20,7 +21,12 @@ function jitPlugin({ inlineStylesExtension }) {
 				try {
 					styles = (await preprocessCSS(decodedStyles, `${styleIdHash}.${inlineStylesExtension}?direct`, config))?.code;
 				} catch (e) {
-					console.error(`${e}`);
+					const errorMessage = e instanceof Error ? e.message : String(e);
+					debugStyles("jit css compilation error", {
+						styleIdHash,
+						error: errorMessage
+					});
+					console.warn("[@analogjs/vite-plugin-angular]: Failed to preprocess inline JIT stylesheet %s. Returning an empty stylesheet instead. %s", styleIdHash, errorMessage);
 				}
 				return `export default \`${styles}\``;
 			}

package/src/lib/angular-jit-plugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"angular-jit-plugin.js","names":[],"sources":["../../../src/lib/angular-jit-plugin.ts"],"sourcesContent":["import { createHash } from 'node:crypto';\nimport { Plugin, ResolvedConfig, preprocessCSS } from 'vite';\n\nexport function jitPlugin({\n  inlineStylesExtension,\n}: {\n  inlineStylesExtension: string;\n}): Plugin {\n  let config: ResolvedConfig;\n\n  return {\n    name: '@analogjs/vite-plugin-angular-jit',\n    configResolved(_config) {\n      config = _config;\n    },\n    resolveId(id: string) {\n      if (id.startsWith('virtual:angular')) {\n        return `\\0${id}`;\n      }\n\n      return;\n    },\n    async load(id: string) {\n      if (id.includes('virtual:angular:jit:style:inline;')) {\n        const styleId = id.split('style:inline;')[1];\n        // styleId may exceed 255 bytes of base64-encoded content, limit to 16\n        const styleIdHash = createHash('sha256')\n          .update(styleId)\n          .digest('hex')\n          .slice(0, 16);\n\n        const decodedStyles = Buffer.from(\n          decodeURIComponent(styleId),\n          'base64',\n        ).toString();\n\n        let styles: string | undefined = '';\n\n        try {\n          const compiled = await preprocessCSS(\n            decodedStyles,\n            `${styleIdHash}.${inlineStylesExtension}?direct`,\n            config,\n          );\n          styles = compiled?.code;\n        } catch (e) {\n          console.error(`${e}`);\n        }\n\n        return `export default \\`${styles}\\``;\n      }\n\n      return;\n    },\n  };\n}\n"],"mappings":";;;AAGA,SAAgB,UAAU,EACxB,yBAGS;CACT,IAAI;AAEJ,QAAO;EACL,MAAM;EACN,eAAe,SAAS;AACtB,YAAS;;EAEX,UAAU,IAAY;AACpB,OAAI,GAAG,WAAW,kBAAkB,CAClC,QAAO,KAAK;;EAKhB,MAAM,KAAK,IAAY;AACrB,OAAI,GAAG,SAAS,oCAAoC,EAAE;IACpD,MAAM,UAAU,GAAG,MAAM,gBAAgB,CAAC;IAE1C,MAAM,cAAc,WAAW,SAAS,CACrC,OAAO,QAAQ,CACf,OAAO,MAAM,CACb,MAAM,GAAG,GAAG;IAEf,MAAM,gBAAgB,OAAO,KAC3B,mBAAmB,QAAQ,EAC3B,SACD,CAAC,UAAU;IAEZ,IAAI,SAA6B;AAEjC,QAAI;AAMF,eALiB,MAAM,cACrB,eACA,GAAG,YAAY,GAAG,sBAAsB,UACxC,OACD,GACkB;aACZ,GAAG;AACV,aAAQ,MAAM,GAAG,IAAI;;AAGvB,WAAO,oBAAoB,OAAO;;;EAKvC"}
+{"version":3,"file":"angular-jit-plugin.js","names":[],"sources":["../../../src/lib/angular-jit-plugin.ts"],"sourcesContent":["import { createHash } from 'node:crypto';\nimport { Plugin, ResolvedConfig, preprocessCSS } from 'vite';\nimport { debugStyles } from './utils/debug.js';\n\nexport function jitPlugin({\n  inlineStylesExtension,\n}: {\n  inlineStylesExtension: string;\n}): Plugin {\n  let config: ResolvedConfig;\n\n  return {\n    name: '@analogjs/vite-plugin-angular-jit',\n    configResolved(_config) {\n      config = _config;\n    },\n    resolveId(id: string) {\n      if (id.startsWith('virtual:angular')) {\n        return `\\0${id}`;\n      }\n\n      return;\n    },\n    async load(id: string) {\n      if (id.includes('virtual:angular:jit:style:inline;')) {\n        const styleId = id.split('style:inline;')[1];\n        // styleId may exceed 255 bytes of base64-encoded content, limit to 16\n        const styleIdHash = createHash('sha256')\n          .update(styleId)\n          .digest('hex')\n          .slice(0, 16);\n\n        const decodedStyles = Buffer.from(\n          decodeURIComponent(styleId),\n          'base64',\n        ).toString();\n\n        let styles: string | undefined = '';\n\n        try {\n          const compiled = await preprocessCSS(\n            decodedStyles,\n            `${styleIdHash}.${inlineStylesExtension}?direct`,\n            config,\n          );\n          styles = compiled?.code;\n        } catch (e) {\n          const errorMessage = e instanceof Error ? e.message : String(e);\n          debugStyles('jit css compilation error', {\n            styleIdHash,\n            error: errorMessage,\n          });\n          console.warn(\n            '[@analogjs/vite-plugin-angular]: Failed to preprocess inline JIT stylesheet %s. Returning an empty stylesheet instead. %s',\n            styleIdHash,\n            errorMessage,\n          );\n        }\n\n        return `export default \\`${styles}\\``;\n      }\n\n      return;\n    },\n  };\n}\n"],"mappings":";;;;AAIA,SAAgB,UAAU,EACxB,yBAGS;CACT,IAAI;AAEJ,QAAO;EACL,MAAM;EACN,eAAe,SAAS;AACtB,YAAS;;EAEX,UAAU,IAAY;AACpB,OAAI,GAAG,WAAW,kBAAkB,CAClC,QAAO,KAAK;;EAKhB,MAAM,KAAK,IAAY;AACrB,OAAI,GAAG,SAAS,oCAAoC,EAAE;IACpD,MAAM,UAAU,GAAG,MAAM,gBAAgB,CAAC;IAE1C,MAAM,cAAc,WAAW,SAAS,CACrC,OAAO,QAAQ,CACf,OAAO,MAAM,CACb,MAAM,GAAG,GAAG;IAEf,MAAM,gBAAgB,OAAO,KAC3B,mBAAmB,QAAQ,EAC3B,SACD,CAAC,UAAU;IAEZ,IAAI,SAA6B;AAEjC,QAAI;AAMF,eALiB,MAAM,cACrB,eACA,GAAG,YAAY,GAAG,sBAAsB,UACxC,OACD,GACkB;aACZ,GAAG;KACV,MAAM,eAAe,aAAa,QAAQ,EAAE,UAAU,OAAO,EAAE;AAC/D,iBAAY,6BAA6B;MACvC;MACA,OAAO;MACR,CAAC;AACF,aAAQ,KACN,6HACA,aACA,aACD;;AAGH,WAAO,oBAAoB,OAAO;;;EAKvC"}

package/src/lib/angular-vite-plugin.d.ts

@@ -1,9 +1,10 @@
 import { NgtscProgram } from "@angular/compiler-cli";
 import * as ts from "typescript";
-import { Plugin } from "vite";
+import { ModuleNode, Plugin, ViteDevServer } from "vite";
 import type { StylePreprocessor } from "./style-preprocessor.js";
 import { type DebugOption } from "./utils/debug.js";
 import { FileReplacement } from "./plugins/file-replacements.plugin.js";
+import { AnalogStylesheetRegistry } from "./stylesheet-registry.js";
 export declare enum DiagnosticModes {
 	None = 0,
 	Option = 1,
@@ -29,6 +30,16 @@ export interface PluginOptions {
 	*/
 	include?: string[];
 	additionalContentDirs?: string[];
+	/**
+	* Enables Angular's HMR during development/watch mode.
+	*
+	* Defaults to `true` for watch mode. Set to `false` to disable HMR while
+	* keeping other stylesheet externalization behavior available when needed.
+	*/
+	hmr?: boolean;
+	/**
+	* @deprecated Use `hmr` instead. Kept as a compatibility alias.
+	*/
 	liveReload?: boolean;
 	disableTypeChecking?: boolean;
 	fileReplacements?: FileReplacement[];
@@ -39,7 +50,7 @@ export interface PluginOptions {
 	* Enable debug logging for specific scopes.
 	*
 	* - `true` → enables all `analog:angular:*` scopes
-	* - `string[]` → enables listed namespaces (e.g. `['analog:angular:compiler']`)
+	* - `string[]` → enables listed namespaces (e.g. `['analog:angular:tailwind']`)
 	* - `{ scopes?, mode? }` → object form with optional `mode: 'build' | 'dev'`
 	*   to restrict output to a specific Vite command (omit for both)
 	*
@@ -124,6 +135,15 @@ export interface PluginOptions {
 		prefixes?: string[];
 	};
 }
+export declare function normalizeIncludeGlob(workspaceRoot: string, glob: string): string;
+export declare function evictDeletedFileMetadata(file: string, { removeActiveGraphMetadata, removeStyleOwnerMetadata, classNamesMap, fileTransformMap }: {
+	removeActiveGraphMetadata: (file: string) => void;
+	removeStyleOwnerMetadata: (file: string) => void;
+	classNamesMap: Map<string, string>;
+	fileTransformMap: Map<string, string>;
+}): void;
+export declare function injectViteIgnoreForHmrMetadata(code: string): string;
+export declare function isIgnoredHmrFile(file: string): boolean;
 export declare function angular(options?: PluginOptions): Plugin[];
 export declare function createFsWatcherCacheInvalidator(invalidateFsCaches: () => void, invalidateTsconfigCaches: () => void, performCompilation: () => Promise<void>): () => Promise<void>;
 /**
@@ -153,7 +173,43 @@ export declare function mapTemplateUpdatesToFiles(templateUpdates: ReadonlyMap<s
 	className: string;
 	code: string;
 }>;
-export declare function getFileMetadata(program: ts.BuilderProgram, angularCompiler?: NgtscProgram["compiler"], liveReload?: boolean, disableTypeChecking?: boolean): (file: string) => {
+/**
+* Returns every live Vite module that can legitimately represent a changed
+* Angular resource file.
+*
+* For normal files, `getModulesByFile()` is enough. For Angular component
+* stylesheets, it is not: the browser often holds virtual hashed requests
+* (`/abc123.css?direct&ngcomp=...` and `/abc123.css?ngcomp=...`) that are no
+* longer discoverable from the original source path alone. We therefore merge:
+* - watcher event modules
+* - module-graph modules by source file
+* - registry-tracked live request ids resolved back through the module graph
+*/
+export declare function getModulesForChangedFile(server: ViteDevServer, file: string, eventModules?: readonly ModuleNode[], stylesheetRegistry?: AnalogStylesheetRegistry): Promise<ModuleNode[]>;
+export declare function isModuleForChangedResource(mod: ModuleNode, changedFile: string, stylesheetRegistry?: AnalogStylesheetRegistry): boolean;
+/**
+* Refreshes any already-served stylesheet records that map back to a changed
+* source file.
+*
+* This is the critical bridge for externalized Angular component styles during
+* HMR. Angular's resource watcher can notice that `/src/...component.css`
+* changed before Angular recompilation has had a chance to repopulate the
+* stylesheet registry. If we emit a CSS update against the existing virtual
+* stylesheet id without first refreshing the registry content, the browser gets
+* a hot update containing stale CSS. By rewriting the existing served records
+* from disk up front, HMR always pushes the latest source content.
+*/
+export declare function refreshStylesheetRegistryForFile(file: string, stylesheetRegistry?: AnalogStylesheetRegistry, stylePreprocessor?: StylePreprocessor): void;
+export declare function findComponentStylesheetWrapperModules(server: ViteDevServer, changedFile: string, directModule: ModuleNode, fileModules: ModuleNode[], stylesheetRegistry?: AnalogStylesheetRegistry): Promise<ModuleNode[]>;
+interface TemplateClassBindingIssue {
+	line: number;
+	column: number;
+	snippet: string;
+}
+export declare function findStaticClassAndBoundClassConflicts(template: string): TemplateClassBindingIssue[];
+export declare function findBoundClassAndNgClassConflicts(template: string): TemplateClassBindingIssue[];
+export declare function findTemplateOwnerModules(server: ViteDevServer, resourceFile: string): ModuleNode[];
+export declare function getFileMetadata(program: ts.BuilderProgram, angularCompiler?: NgtscProgram["compiler"], hmrEnabled?: boolean, disableTypeChecking?: boolean): (file: string) => {
 	errors?: string[];
 	warnings?: (string | ts.DiagnosticMessageChain)[];
 	hmrUpdateCode?: string | null;
@@ -164,3 +220,4 @@ export declare function getFileMetadata(program: ts.BuilderProgram, angularCompi
 * @returns boolean
 */
 export declare function isTestWatchMode(args?: string[]): boolean;
+export {};