@analogjs/vite-plugin-angular 3.0.0-alpha.44 → 3.0.0-alpha.45

package/README.md

@@ -1,5 +1,7 @@
 # @analogjs/vite-plugin-angular
 
+[![Vite Plugin Registry](https://img.shields.io/badge/vite-plugin--registry-blue?logo=vite)](https://registry.vite.dev/plugin/@analogjs/vite-plugin-angular)
+
 A Vite plugin for building Angular applications
 
 ## Install

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@analogjs/vite-plugin-angular",
-  "version": "3.0.0-alpha.44",
+  "version": "3.0.0-alpha.45",
   "description": "Vite Plugin for Angular",
   "type": "module",
   "keywords": [
@@ -33,8 +33,24 @@
     },
     "@angular/build": {
       "optional": true
+    },
+    "vite": {
+      "optional": true
     }
   },
+  "compatiblePackages": {
+    "vite": [
+      "^6.0.0",
+      "^7.0.0",
+      "^8.0.0"
+    ],
+    "rollup": [
+      "^4.0.0"
+    ],
+    "rolldown": [
+      "^1.0.0"
+    ]
+  },
   "dependencies": {
     "es-toolkit": "^1.45.1",
     "magic-string": "^0.30.21",

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

@@ -1,6 +1,5 @@
 import { debugStyles } from "./utils/debug.js";
 import { isTailwindReferenceError } from "./utils/tailwind-reference.js";
-import { shouldPreprocessTestCss } from "./utils/virtual-resources.js";
 import { preprocessCSS } from "vite";
 import { createHash } from "node:crypto";
 //#region packages/vite-plugin-angular/src/lib/angular-jit-plugin.ts
@@ -20,8 +19,6 @@ function jitPlugin({ inlineStylesExtension }) {
 				const styleIdHash = createHash("sha256").update(styleId).digest("hex").slice(0, 16);
 				const decodedStyles = Buffer.from(decodeURIComponent(styleId), "base64").toString();
 				let styles = "";
-				const inlineStyleId = `${styleIdHash}.${inlineStylesExtension}`;
-				if (!shouldPreprocessTestCss(config, inlineStyleId)) return `export default \`\``;
 				try {
 					styles = (await preprocessCSS(decodedStyles, `${styleIdHash}.${inlineStylesExtension}?direct`, config))?.code;
 				} catch (e) {

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';\nimport { debugStyles } from './utils/debug.js';\nimport { isTailwindReferenceError } from './utils/tailwind-reference.js';\n\nimport { shouldPreprocessTestCss } from './utils/virtual-resources.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        // In tests, mirror Vitest's `test.css` rules — defaults to no\n        // preprocessing (matches Vite's CSS pipeline behavior). Inline\n        // component styles have no real file path to match include/exclude\n        // patterns against, so only `test.css: true` opts them in. (#2297)\n        const inlineStyleId = `${styleIdHash}.${inlineStylesExtension}`;\n        if (!shouldPreprocessTestCss(config, inlineStyleId)) {\n          return `export default \\`\\``;\n        }\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          if (isTailwindReferenceError(e)) {\n            throw e;\n          }\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":";;;;;;AAOA,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;IAMjC,MAAM,gBAAgB,GAAG,YAAY,GAAG;AACxC,QAAI,CAAC,wBAAwB,QAAQ,cAAc,CACjD,QAAO;AAGT,QAAI;AAMF,eALiB,MAAM,cACrB,eACA,GAAG,YAAY,GAAG,sBAAsB,UACxC,OACD,GACkB;aACZ,GAAG;AACV,SAAI,yBAAyB,EAAE,CAC7B,OAAM;KAER,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"}
+{"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';\nimport { isTailwindReferenceError } from './utils/tailwind-reference.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          if (isTailwindReferenceError(e)) {\n            throw e;\n          }\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":";;;;;AAKA,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,SAAI,yBAAyB,EAAE,CAC7B,OAAM;KAER,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.js

@@ -2,7 +2,6 @@ import { angularFullVersion, cjt, sourceFileCache } from "./utils/devkit.js";
 import { getJsTransformConfigKey, isRolldown } from "./utils/rolldown.js";
 import { buildOptimizerPlugin } from "./angular-build-optimizer-plugin.js";
 import { activateDeferredDebug, applyDebugOption, debugCompiler, debugCompilerV, debugEmit, debugEmitV, debugHmr, debugHmrV, debugStyles, debugStylesV } from "./utils/debug.js";
-import { toVirtualRawId, toVirtualStyleId } from "./utils/virtual-ids.js";
 import { jitPlugin } from "./angular-jit-plugin.js";
 import { createCompilerPlugin, createRolldownCompilerPlugin } from "./compiler-plugin.js";
 import { StyleUrlsResolver, TemplateUrlsResolver, getAngularComponentMetadata } from "./component-resolvers.js";
@@ -11,9 +10,12 @@ import { augmentHostWithCaching, augmentHostWithResources, augmentProgramWithVer
 import { TS_EXT_REGEX, createTsConfigGetter, getTsConfigPath } from "./utils/plugin-config.js";
 import { TsconfigResolver } from "./utils/tsconfig-resolver.js";
 import { configureStylePipelineRegistry } from "./style-pipeline.js";
-import { describeStylesheetContent, injectViteIgnoreForHmrMetadata, isIgnoredHmrFile, isTestWatchMode, refreshStylesheetRegistryForFile } from "./utils/compilation-shared.js";
+import { describeStylesheetContent, injectViteIgnoreForHmrMetadata, isIgnoredHmrFile, isTestWatchMode } from "./utils/compilation-shared.js";
 import { compilationAPIPlugin } from "./compilation-api/compilation-api-plugin.js";
 import "./compilation-api/index.js";
+import { toVirtualRawId } from "./utils/virtual-ids.js";
+import { loadVirtualRawModule, rewriteHtmlRawImport } from "./utils/virtual-resources.js";
+import { markStylePathSafe } from "./utils/safe-module-paths.js";
 import { fastCompilePlugin } from "./fast-compile-plugin.js";
 import { removeActiveGraphMetadata, removeStyleOwnerMetadata, templateClassBindingGuardPlugin } from "./template-class-binding-guard-plugin.js";
 import { buildStylePreprocessor, tailwindReferencePlugin, validateTailwindConfig } from "./tailwind-plugin.js";
@@ -26,8 +28,8 @@ import { nxFolderPlugin } from "./nx-folder-plugin.js";
 import { replaceFiles } from "./plugins/file-replacements.plugin.js";
 import { routerPlugin } from "./router-plugin.js";
 import { union } from "es-toolkit";
-import { existsSync, mkdirSync, readFileSync, statSync, writeFileSync } from "node:fs";
-import { basename, dirname, join, relative, resolve } from "node:path";
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import { basename, dirname, isAbsolute, join, relative, resolve } from "node:path";
 import * as compilerCli from "@angular/compiler-cli";
 import { createRequire } from "node:module";
 import { defaultClientConditions, normalizePath, preprocessCSS } from "vite";
@@ -351,32 +353,6 @@ function angular(options) {
 				if (/\.(html|htm|css|less|sass|scss)$/.test(ctx.file)) {
 					debugHmr("resource file changed", { file: ctx.file });
 					fileTransformMap.delete(ctx.file.split("?")[0]);
-					if (/\.(css|less|sass|scss)$/.test(ctx.file)) refreshStylesheetRegistryForFile(ctx.file, stylesheetRegistry, pluginOptions.stylePreprocessor);
-					if (/\.(css|less|sass|scss)$/.test(ctx.file) && existsSync(ctx.file)) try {
-						const rawResource = readFileSync(ctx.file, "utf-8");
-						debugHmrV("resource source snapshot", {
-							file: ctx.file,
-							mtimeMs: safeStatMtimeMs(ctx.file),
-							...describeStylesheetContent(rawResource)
-						});
-					} catch (error) {
-						debugHmrV("resource source snapshot failed", {
-							file: ctx.file,
-							error: String(error)
-						});
-					}
-					const fileModules = await getModulesForChangedFile(ctx.server, ctx.file, ctx.modules, stylesheetRegistry);
-					debugHmrV("resource modules resolved", {
-						file: ctx.file,
-						eventModuleCount: ctx.modules.length,
-						fileModuleCount: fileModules.length,
-						modules: fileModules.map((mod) => ({
-							id: mod.id,
-							file: mod.file,
-							type: mod.type,
-							url: mod.url
-						}))
-					});
 					/**
 					* Check to see if this was a direct request
 					* for an external resource (styles, html).
@@ -591,7 +567,24 @@ function angular(options) {
 				classNames.clear();
 				return ctx.modules;
 			},
-			resolveId(id) {
+			resolveId(id, importer) {
+				if (id.startsWith("virtual:@analogjs/vite-plugin-angular:raw:")) return `\0${id}`;
+				if (jit && id.startsWith("angular:jit:")) {
+					const filePath = normalizePath(resolve(dirname(importer), id.split(";")[1]));
+					if (id.includes(":style")) {
+						markStylePathSafe(resolvedConfig, filePath);
+						return filePath + "?inline";
+					}
+					return toVirtualRawId(filePath);
+				}
+				const rawRewrite = rewriteHtmlRawImport(id, importer);
+				if (rawRewrite) return rawRewrite;
+				if (/\.(css|scss|sass|less)\?inline$/.test(id) && importer) {
+					const filePath = id.split("?")[0];
+					const resolved = isAbsolute(filePath) ? normalizePath(filePath) : normalizePath(resolve(dirname(importer), filePath));
+					markStylePathSafe(resolvedConfig, resolved);
+					return resolved + "?inline";
+				}
 				if (isComponentStyleSheet(id)) {
 					const filename = getFilenameFromPath(id);
 					if (stylesheetRegistry?.hasServed(filename)) {
@@ -614,6 +607,9 @@ function angular(options) {
 				}
 			},
 			async load(id) {
+				const rawModule = await loadVirtualRawModule(this, id);
+				if (rawModule !== void 0) return rawModule;
+				if (/\.(css|scss|sass|less)\?inline$/.test(id)) markStylePathSafe(resolvedConfig, id.split("?")[0]);
 				if (isComponentStyleSheet(id)) {
 					const filename = getFilenameFromPath(id);
 					const componentStyles = stylesheetRegistry?.getServedContent(filename);
@@ -718,7 +714,8 @@ function angular(options) {
 						});
 						styleUrls.forEach((styleUrlSet) => {
 							const [styleFile, resolvedStyleUrl] = styleUrlSet.split("|");
-							data = data.replace(`angular:jit:style:file;${styleFile}`, toVirtualStyleId(resolvedStyleUrl));
+							markStylePathSafe(resolvedConfig, resolvedStyleUrl);
+							data = data.replace(`angular:jit:style:file;${styleFile}`, resolvedStyleUrl + "?inline");
 						});
 					}
 					if (data.includes("HmrLoad")) {
@@ -972,48 +969,6 @@ function createFsWatcherCacheInvalidator(invalidateFsCaches, invalidateTsconfigC
 		await performCompilation();
 	};
 }
-/**
-* 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
-*/
-async function getModulesForChangedFile(server, file, eventModules = [], stylesheetRegistry) {
-	const normalizedFile = normalizePath(file.split("?")[0]);
-	const modules = /* @__PURE__ */ new Map();
-	for (const mod of eventModules) if (mod.id) modules.set(mod.id, mod);
-	server.moduleGraph.getModulesByFile(normalizedFile)?.forEach((mod) => {
-		if (mod.id) modules.set(mod.id, mod);
-	});
-	const stylesheetRequestIds = stylesheetRegistry?.getRequestIdsForSource(normalizedFile) ?? [];
-	const requestIdHits = [];
-	for (const requestId of stylesheetRequestIds) {
-		const candidates = [requestId, requestId.startsWith("/") ? requestId : `/${requestId}`];
-		for (const candidate of candidates) {
-			const mod = await server.moduleGraph.getModuleByUrl(candidate) ?? server.moduleGraph.getModuleById(candidate);
-			requestIdHits.push({
-				requestId,
-				candidate,
-				via: mod?.url === candidate ? "url" : "id",
-				moduleId: mod?.id
-			});
-			if (mod?.id) modules.set(mod.id, mod);
-		}
-	}
-	debugHmrV("getModulesForChangedFile registry lookup", {
-		file: normalizedFile,
-		stylesheetRequestIds,
-		requestIdHits,
-		resolvedModuleIds: [...modules.keys()]
-	});
-	return [...modules.values()];
-}
 function isModuleForChangedResource(mod, changedFile, stylesheetRegistry) {
 	const normalizedChangedFile = normalizePath(changedFile.split("?")[0]);
 	if (normalizePath((mod.file ?? "").split("?")[0]) === normalizedChangedFile) return true;
@@ -1021,13 +976,6 @@ function isModuleForChangedResource(mod, changedFile, stylesheetRegistry) {
 	const requestPath = getFilenameFromPath(mod.id);
 	return normalizePath((stylesheetRegistry?.resolveExternalSource(requestPath) ?? stylesheetRegistry?.resolveExternalSource(requestPath.replace(/^\//, "")) ?? "").split("?")[0]) === normalizedChangedFile;
 }
-function safeStatMtimeMs(file) {
-	try {
-		return statSync(file).mtimeMs;
-	} catch {
-		return;
-	}
-}
 function diagnoseComponentStylesheetPipeline(changedFile, directModule, stylesheetRegistry, wrapperModules, stylePreprocessor) {
 	const normalizedFile = normalizePath(changedFile.split("?")[0]);
 	const sourceExists = existsSync(normalizedFile);