@vizejs/vite-plugin 0.0.1-alpha.101 → 0.0.1-alpha.102

package/dist/index.d.ts

@@ -459,6 +459,14 @@ interface VizeOptions {
    * Custom config file path (overrides automatic search)
    */
   configFile?: string;
+  /**
+   * Handle .vue files in node_modules (on-demand compilation).
+   * When true, vize will compile .vue files from node_modules that other plugins
+   * (like vite-plugin-vue-inspector) may import directly.
+   * Set to false if another Vue plugin (e.g. Nuxt) handles node_modules .vue files.
+   * @default true
+   */
+  handleNodeModulesVue?: boolean;
   /**
    * Enable debug logging
    * @default false
@@ -492,7 +500,22 @@ declare function loadConfig(root: string, options?: LoadConfigOptions): Promise<
  * Used by musea() and other plugins to access the unified config.
  */
 declare const vizeConfigStore: Map<string, VizeConfig>;
-declare function vize(options?: VizeOptions): Plugin;
+interface DynamicImportAliasRule {
+  fromPrefix: string;
+  toPrefix: string;
+}
+/**
+ * Rewrite static asset URLs in compiled template output.
+ *
+ * Transforms property values like `src: "@/assets/logo.svg"` into import
+ * statements hoisted to the top of the module, so Vite's module resolution
+ * pipeline handles alias expansion and asset hashing in both dev and build.
+ */
+declare function rewriteStaticAssetUrls(code: string, aliasRules: DynamicImportAliasRule[]): string;
+declare const __internal: {
+  rewriteStaticAssetUrls: typeof rewriteStaticAssetUrls;
+};
+declare function vize(options?: VizeOptions): Plugin[];
 
 //#endregion
-export { CompiledModule, LoadConfigOptions, VizeConfig, VizeOptions, vize as default, defineConfig, loadConfig, vize, vizeConfigStore };
+export { CompiledModule, LoadConfigOptions, VizeConfig, VizeOptions, __internal, vize as default, defineConfig, loadConfig, vize, vizeConfigStore };

package/dist/index.js

@@ -1,6 +1,8 @@
 import { transformWithOxc } from "vite";
 import path from "node:path";
 import fs from "node:fs";
+import { createRequire } from "node:module";
+import { pathToFileURL } from "node:url";
 import { glob } from "tinyglobby";
 import * as native from "@vizejs/native";
 import { createHash } from "node:crypto";
@@ -250,9 +252,69 @@ async function loadConfigFile(configPath, env) {
 * Used by musea() and other plugins to access the unified config.
 */
 const vizeConfigStore = new Map();
-const VIRTUAL_PREFIX = "\0vize:";
+const LEGACY_VIZE_PREFIX = "\0vize:";
 const VIRTUAL_CSS_MODULE = "virtual:vize-styles";
 const RESOLVED_CSS_MODULE = "\0vize:all-styles.css";
+/** Check if a module ID is a vize-compiled virtual module */
+function isVizeVirtual(id) {
+	return id.startsWith("\0") && id.endsWith(".vue.ts");
+}
+/** Create a virtual module ID from a real .vue file path */
+function toVirtualId(realPath) {
+	return "\0" + realPath + ".ts";
+}
+/** Extract the real .vue file path from a virtual module ID */
+function fromVirtualId(virtualId) {
+	return virtualId.slice(1, -3);
+}
+function escapeRegExp(value) {
+	return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function toBrowserImportPrefix(replacement) {
+	const normalized = replacement.replace(/\\/g, "/");
+	if (normalized.startsWith("/@fs/")) return normalized;
+	if (path.isAbsolute(replacement) && fs.existsSync(replacement)) return `/@fs${normalized}`;
+	return normalized;
+}
+function normalizeFsIdForBuild(id) {
+	const [pathPart, queryPart] = id.split("?");
+	if (!pathPart.startsWith("/@fs/")) return id;
+	const normalizedPath = pathPart.slice(4);
+	return queryPart ? `${normalizedPath}?${queryPart}` : normalizedPath;
+}
+function rewriteDynamicTemplateImports(code, aliasRules) {
+	let rewritten = code;
+	for (const rule of aliasRules) {
+		const pattern = new RegExp(`\\bimport\\s*\\(\\s*\`${escapeRegExp(rule.fromPrefix)}`, "g");
+		rewritten = rewritten.replace(pattern, `import(/* @vite-ignore */ \`${rule.toPrefix}`);
+	}
+	rewritten = rewritten.replace(/\bimport\s*\(\s*`/g, "import(/* @vite-ignore */ `");
+	return rewritten;
+}
+/**
+* Rewrite static asset URLs in compiled template output.
+*
+* Transforms property values like `src: "@/assets/logo.svg"` into import
+* statements hoisted to the top of the module, so Vite's module resolution
+* pipeline handles alias expansion and asset hashing in both dev and build.
+*/
+function rewriteStaticAssetUrls(code, aliasRules) {
+	let rewritten = code;
+	const imports = [];
+	let counter = 0;
+	for (const rule of aliasRules) {
+		const pattern = new RegExp(`("?src"?\\s*:\\s*)(?:"(${escapeRegExp(rule.fromPrefix)}[^"]+)"|'(${escapeRegExp(rule.fromPrefix)}[^']+)')`, "g");
+		rewritten = rewritten.replace(pattern, (_match, prefix, dqPath, sqPath) => {
+			const fullPath = dqPath || sqPath;
+			const varName = `__vize_static_${counter++}`;
+			imports.push(`import ${varName} from ${JSON.stringify(fullPath)};`);
+			return `${prefix}${varName}`;
+		});
+	}
+	if (imports.length > 0) rewritten = imports.join("\n") + "\n" + rewritten;
+	return rewritten;
+}
+const __internal = { rewriteStaticAssetUrls };
 function createLogger(debug) {
 	return {
 		log: (...args) => debug && console.log("[vize]", ...args),
@@ -263,7 +325,6 @@ function createLogger(debug) {
 }
 function vize(options = {}) {
 	const cache = new Map();
-	const virtualToReal = new Map();
 	const collectedCss = new Map();
 	let isProduction;
 	let root;
@@ -272,6 +333,7 @@ function vize(options = {}) {
 	let scanPatterns;
 	let ignorePatterns;
 	let mergedOptions;
+	let dynamicImportAliasRules = [];
 	let extractCss = false;
 	const logger = createLogger(options.debug ?? false);
 	async function compileAll() {
@@ -305,31 +367,37 @@ function vize(options = {}) {
 		else if (id.startsWith("/") && !fs.existsSync(id)) resolved = path.resolve(root, id.slice(1));
 		else if (path.isAbsolute(id)) resolved = id;
 		else if (importer) {
-			let realImporter = importer.startsWith(VIRTUAL_PREFIX) ? virtualToReal.get(importer) ?? importer.slice(VIRTUAL_PREFIX.length) : importer;
-			if (realImporter.endsWith(".vue.ts")) realImporter = realImporter.slice(0, -3);
+			const realImporter = isVizeVirtual(importer) ? fromVirtualId(importer) : importer;
 			resolved = path.resolve(path.dirname(realImporter), id);
 		} else resolved = path.resolve(root, id);
 		if (!path.isAbsolute(resolved)) resolved = path.resolve(root, resolved);
 		return path.normalize(resolved);
 	}
-	return {
+	const mainPlugin = {
 		name: "vite-plugin-vize",
 		enforce: "pre",
-		config() {
-			return { optimizeDeps: {
-				include: ["vue"],
-				exclude: ["virtual:vize-styles"],
-				esbuildOptions: { plugins: [{
-					name: "vize-externalize-vue",
-					setup(build) {
-						build.onResolve({ filter: /\.vue$/ }, (args) => ({
-							path: args.path,
-							external: true
-						}));
-					}
-				}] },
-				rolldownOptions: { external: [/\.vue$/] }
-			} };
+		config(_, env) {
+			return {
+				define: {
+					__VUE_OPTIONS_API__: true,
+					__VUE_PROD_DEVTOOLS__: env.command === "serve",
+					__VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false
+				},
+				optimizeDeps: {
+					include: ["vue"],
+					exclude: ["virtual:vize-styles"],
+					esbuildOptions: { plugins: [{
+						name: "vize-externalize-vue",
+						setup(build) {
+							build.onResolve({ filter: /\.vue$/ }, (args) => ({
+								path: args.path,
+								external: true
+							}));
+						}
+					}] },
+					rolldownOptions: { external: [/\.vue$/] }
+				}
+			};
 		},
 		async configResolved(resolvedConfig) {
 			root = options.root ?? resolvedConfig.root;
@@ -364,6 +432,18 @@ function vize(options = {}) {
 				scanPatterns: options.scanPatterns ?? viteConfig.scanPatterns,
 				ignorePatterns: options.ignorePatterns ?? viteConfig.ignorePatterns
 			};
+			dynamicImportAliasRules = [];
+			for (const alias of resolvedConfig.resolve.alias) {
+				if (typeof alias.find !== "string" || typeof alias.replacement !== "string") continue;
+				const fromPrefix = alias.find.endsWith("/") ? alias.find : `${alias.find}/`;
+				const replacement = toBrowserImportPrefix(alias.replacement);
+				const toPrefix = replacement.endsWith("/") ? replacement : `${replacement}/`;
+				dynamicImportAliasRules.push({
+					fromPrefix,
+					toPrefix
+				});
+			}
+			dynamicImportAliasRules.sort((a, b) => b.fromPrefix.length - a.fromPrefix.length);
 			filter = createFilter(mergedOptions.include, mergedOptions.exclude);
 			scanPatterns = mergedOptions.scanPatterns ?? ["**/*.vue"];
 			ignorePatterns = mergedOptions.ignorePatterns ?? [
@@ -374,79 +454,152 @@ function vize(options = {}) {
 		},
 		configureServer(devServer) {
 			server = devServer;
+			devServer.middlewares.use((req, _res, next) => {
+				if (req.url && req.url.includes("__x00__")) {
+					const [urlPath, queryPart] = req.url.split("?");
+					let cleanedPath = urlPath.replace(/__x00__/g, "");
+					cleanedPath = cleanedPath.replace(/^\/@id\/\//, "/@fs/");
+					if (cleanedPath.startsWith("/@fs/")) {
+						const fsPath = cleanedPath.slice(4);
+						if (fsPath.startsWith("/") && fs.existsSync(fsPath) && fs.statSync(fsPath).isFile() && !fsPath.endsWith(".vue.ts")) {
+							const cleaned = queryPart ? `${cleanedPath}?${queryPart}` : cleanedPath;
+							if (cleaned !== req.url) {
+								logger.log(`middleware: rewriting ${req.url} → ${cleaned}`);
+								req.url = cleaned;
+							}
+						}
+					}
+				}
+				next();
+			});
 		},
 		async buildStart() {
 			await compileAll();
 			logger.log("Cache keys:", [...cache.keys()].slice(0, 3));
 		},
 		async resolveId(id, importer) {
-			if (id.startsWith("\0")) return null;
+			const isBuild = server === null;
+			if (id.startsWith("\0")) {
+				if (isVizeVirtual(id)) return null;
+				if (id.startsWith(LEGACY_VIZE_PREFIX)) {
+					const rawPath = id.slice(LEGACY_VIZE_PREFIX.length);
+					const cleanPath$1 = rawPath.endsWith(".ts") ? rawPath.slice(0, -3) : rawPath;
+					if (!cleanPath$1.endsWith(".vue")) {
+						logger.log(`resolveId: redirecting legacy virtual ID to ${cleanPath$1}`);
+						return cleanPath$1;
+					}
+				}
+				const cleanPath = id.slice(1);
+				if (cleanPath.startsWith("/") && !cleanPath.endsWith(".vue.ts")) {
+					const [pathPart, queryPart] = cleanPath.split("?");
+					const querySuffix = queryPart ? `?${queryPart}` : "";
+					logger.log(`resolveId: redirecting \0-prefixed non-vue ID to ${pathPart}${querySuffix}`);
+					const redirected = pathPart + querySuffix;
+					return isBuild ? normalizeFsIdForBuild(redirected) : redirected;
+				}
+				return null;
+			}
 			if (id.startsWith("vize:")) {
 				let realPath = id.slice(5);
 				if (realPath.endsWith(".ts")) realPath = realPath.slice(0, -3);
 				logger.log(`resolveId: redirecting stale vize: ID to ${realPath}`);
-				if (realPath.includes("node_modules")) return this.resolve(realPath, importer, { skipSelf: true });
-				return this.resolve(realPath, importer, { skipSelf: true });
+				const resolved = await this.resolve(realPath, importer, { skipSelf: true });
+				if (resolved && isBuild && resolved.id.startsWith("/@fs/")) return {
+					...resolved,
+					id: normalizeFsIdForBuild(resolved.id)
+				};
+				return resolved;
 			}
 			if (id === VIRTUAL_CSS_MODULE) return RESOLVED_CSS_MODULE;
+			if (isBuild && id.startsWith("/@fs/")) return normalizeFsIdForBuild(id);
 			if (id.includes("?vue&type=style")) return id;
-			if (importer?.startsWith(VIRTUAL_PREFIX)) {
-				const realImporter = virtualToReal.get(importer) ?? importer.slice(VIRTUAL_PREFIX.length);
-				const cleanImporter = realImporter.endsWith(".ts") ? realImporter.slice(0, -3) : realImporter;
+			if (importer && isVizeVirtual(importer)) {
+				const cleanImporter = fromVirtualId(importer);
 				logger.log(`resolveId from virtual: id=${id}, cleanImporter=${cleanImporter}`);
 				if (id.startsWith("#")) try {
 					return await this.resolve(id, cleanImporter, { skipSelf: true });
 				} catch {
 					return null;
 				}
-				if (!id.endsWith(".vue")) if (id.startsWith("./") || id.startsWith("../")) {
-					const [pathPart, queryPart] = id.split("?");
-					const querySuffix = queryPart ? `?${queryPart}` : "";
-					const resolved = path.resolve(path.dirname(cleanImporter), pathPart);
-					for (const ext of [
-						"",
-						".ts",
-						".tsx",
-						".js",
-						".jsx",
-						".json"
-					]) if (fs.existsSync(resolved + ext)) {
-						const finalPath = resolved + ext + querySuffix;
-						logger.log(`resolveId: resolved relative ${id} to ${finalPath}`);
-						return finalPath;
-					}
-				} else {
-					if (id.includes("/dist/") || id.includes("/lib/") || id.includes("/es/")) {
-						logger.log(`resolveId: skipping already-resolved path ${id}`);
-						return null;
+				if (!id.endsWith(".vue")) {
+					if (id.includes("/dist/") || id.includes("/lib/") || id.includes("/es/")) return null;
+					try {
+						const resolved = await this.resolve(id, cleanImporter, { skipSelf: true });
+						if (resolved) {
+							logger.log(`resolveId: resolved ${id} to ${resolved.id} via Vite resolver`);
+							if (isBuild && resolved.id.startsWith("/@fs/")) return {
+								...resolved,
+								id: normalizeFsIdForBuild(resolved.id)
+							};
+							return resolved;
+						}
+					} catch {}
+					if (id.startsWith("./") || id.startsWith("../")) {
+						const [pathPart, queryPart] = id.split("?");
+						const querySuffix = queryPart ? `?${queryPart}` : "";
+						const resolved = path.resolve(path.dirname(cleanImporter), pathPart);
+						for (const ext of [
+							"",
+							".ts",
+							".tsx",
+							".js",
+							".jsx",
+							".json"
+						]) {
+							const candidate = resolved + ext;
+							if (fs.existsSync(candidate) && fs.statSync(candidate).isFile()) {
+								const finalPath = candidate + querySuffix;
+								logger.log(`resolveId: resolved relative ${id} to ${finalPath}`);
+								return finalPath;
+							}
+						}
+						if (fs.existsSync(resolved) && fs.statSync(resolved).isDirectory()) for (const indexFile of [
+							"/index.ts",
+							"/index.tsx",
+							"/index.js",
+							"/index.jsx"
+						]) {
+							const candidate = resolved + indexFile;
+							if (fs.existsSync(candidate)) {
+								const finalPath = candidate + querySuffix;
+								logger.log(`resolveId: resolved directory ${id} to ${finalPath}`);
+								return finalPath;
+							}
+						}
 					}
-					logger.log(`resolveId: resolving external ${id} from ${cleanImporter}`);
-					const resolved = await this.resolve(id, cleanImporter, { skipSelf: true });
-					logger.log(`resolveId: resolved external ${id} to`, resolved?.id ?? "null");
-					return resolved;
+					return null;
 				}
 			}
 			if (id.endsWith(".vue")) {
-				if (id.includes("node_modules")) {
+				const handleNodeModules = mergedOptions.handleNodeModulesVue ?? true;
+				if (!handleNodeModules && id.includes("node_modules")) {
 					logger.log(`resolveId: skipping node_modules import ${id}`);
 					return null;
 				}
 				const resolved = resolveVuePath(id, importer);
-				if (resolved.includes("node_modules")) {
+				const isNodeModulesPath = resolved.includes("node_modules");
+				if (!handleNodeModules && isNodeModulesPath) {
 					logger.log(`resolveId: skipping node_modules path ${resolved}`);
 					return null;
 				}
-				if (!filter(resolved)) {
+				if (!isNodeModulesPath && !filter(resolved)) {
 					logger.log(`resolveId: skipping filtered path ${resolved}`);
 					return null;
 				}
 				const hasCache = cache.has(resolved);
 				const fileExists = fs.existsSync(resolved);
 				logger.log(`resolveId: id=${id}, resolved=${resolved}, hasCache=${hasCache}, fileExists=${fileExists}, importer=${importer ?? "none"}`);
-				if (hasCache || fileExists) {
-					const virtualId = VIRTUAL_PREFIX + resolved + ".ts";
-					virtualToReal.set(virtualId, resolved);
-					return virtualId;
+				if (hasCache || fileExists) return toVirtualId(resolved);
+				if (!fileExists && !path.isAbsolute(id)) {
+					const viteResolved = await this.resolve(id, importer, { skipSelf: true });
+					if (viteResolved && viteResolved.id.endsWith(".vue")) {
+						const realPath = viteResolved.id;
+						const isResolvedNodeModules = realPath.includes("node_modules");
+						if ((isResolvedNodeModules ? handleNodeModules : filter(realPath)) && (cache.has(realPath) || fs.existsSync(realPath))) {
+							logger.log(`resolveId: resolved via Vite fallback ${id} to ${realPath}`);
+							return toVirtualId(realPath);
+						}
+					}
 				}
 			}
 			return null;
@@ -458,36 +611,70 @@ function vize(options = {}) {
 			}
 			if (id.includes("?vue&type=style")) {
 				const [filename] = id.split("?");
-				const realPath = filename.startsWith(VIRTUAL_PREFIX) ? virtualToReal.get(filename) ?? filename.slice(VIRTUAL_PREFIX.length) : filename;
+				const realPath = isVizeVirtual(filename) ? fromVirtualId(filename) : filename;
 				const compiled = cache.get(realPath);
 				if (compiled?.css) return compiled.css;
 				return "";
 			}
-			if (id.startsWith(VIRTUAL_PREFIX)) {
-				const lookupId = id.endsWith(".ts") ? id.slice(0, -3) : id;
-				const realPath = virtualToReal.get(id) ?? lookupId.slice(VIRTUAL_PREFIX.length);
-				const compiled = cache.get(realPath);
+			if (isVizeVirtual(id)) {
+				const realPath = fromVirtualId(id);
+				if (!realPath.endsWith(".vue")) {
+					logger.log(`load: skipping non-vue virtual module ${realPath}`);
+					return null;
+				}
+				let compiled = cache.get(realPath);
+				if (!compiled && fs.existsSync(realPath)) {
+					logger.log(`load: on-demand compiling ${realPath}`);
+					compiled = compileFile(realPath, cache, {
+						sourceMap: mergedOptions.sourceMap ?? !isProduction,
+						ssr: mergedOptions.ssr ?? false
+					});
+				}
 				if (compiled) {
-					const output = generateOutput(compiled, {
+					const output = rewriteStaticAssetUrls(rewriteDynamicTemplateImports(generateOutput(compiled, {
 						isProduction,
 						isDev: server !== null,
 						extractCss
-					});
+					}), dynamicImportAliasRules), dynamicImportAliasRules);
 					return {
 						code: output,
 						map: null
 					};
 				}
 			}
+			if (id.startsWith("\0")) {
+				const afterPrefix = id.startsWith(LEGACY_VIZE_PREFIX) ? id.slice(LEGACY_VIZE_PREFIX.length) : id.slice(1);
+				if (afterPrefix.includes("?commonjs-")) return null;
+				const [pathPart, queryPart] = afterPrefix.split("?");
+				const querySuffix = queryPart ? `?${queryPart}` : "";
+				const fsPath = pathPart.startsWith("/@fs/") ? pathPart.slice(4) : pathPart;
+				if (fsPath.startsWith("/") && fs.existsSync(fsPath) && fs.statSync(fsPath).isFile()) {
+					const importPath = server === null ? `${pathToFileURL(fsPath).href}${querySuffix}` : "/@fs" + fsPath + querySuffix;
+					logger.log(`load: proxying \0-prefixed file ${id} → re-export from ${importPath}`);
+					return `export { default } from ${JSON.stringify(importPath)};\nexport * from ${JSON.stringify(importPath)};`;
+				}
+			}
 			return null;
 		},
 		async transform(code, id) {
-			if (id.startsWith(VIRTUAL_PREFIX) && id.endsWith(".ts")) {
-				const result = await transformWithOxc(code, id.slice(VIRTUAL_PREFIX.length), { lang: "ts" });
-				return {
-					code: result.code,
-					map: result.map
-				};
+			if (isVizeVirtual(id)) {
+				const realPath = fromVirtualId(id);
+				try {
+					const result = await transformWithOxc(code, realPath, { lang: "ts" });
+					return {
+						code: result.code,
+						map: result.map
+					};
+				} catch (e) {
+					logger.error(`transformWithOxc failed for ${realPath}:`, e);
+					const dumpPath = `/tmp/vize-oxc-error-${path.basename(realPath)}.ts`;
+					fs.writeFileSync(dumpPath, code, "utf-8");
+					logger.error(`Dumped failing code to ${dumpPath}`);
+					return {
+						code: "export default {}",
+						map: null
+					};
+				}
 			}
 			return null;
 		},
@@ -503,7 +690,7 @@ function vize(options = {}) {
 				const newCompiled = cache.get(file);
 				const updateType = detectHmrUpdateType(prevCompiled, newCompiled);
 				logger.log(`Re-compiled: ${path.relative(root, file)} (${updateType})`);
-				const virtualId = VIRTUAL_PREFIX + file + ".ts";
+				const virtualId = toVirtualId(file);
 				const modules = server$1.moduleGraph.getModulesByFile(virtualId) ?? server$1.moduleGraph.getModulesByFile(file);
 				if (updateType === "style-only" && newCompiled.css) {
 					server$1.ws.send({
@@ -535,8 +722,33 @@ function vize(options = {}) {
 			}
 		}
 	};
+	let compilerSfc = null;
+	const loadCompilerSfc = () => {
+		if (!compilerSfc) try {
+			const require = createRequire(import.meta.url);
+			compilerSfc = require("@vue/compiler-sfc");
+		} catch {
+			compilerSfc = { parse: () => ({
+				descriptor: {},
+				errors: []
+			}) };
+		}
+		return compilerSfc;
+	};
+	const vueCompatPlugin = {
+		name: "vite:vue",
+		api: { get options() {
+			return {
+				compiler: loadCompilerSfc(),
+				isProduction: isProduction ?? false,
+				root: root ?? process.cwd(),
+				template: {}
+			};
+		} }
+	};
+	return [vueCompatPlugin, mainPlugin];
 }
 var src_default = vize;
 
 //#endregion
-export { src_default as default, defineConfig, loadConfig, vize, vizeConfigStore };
+export { __internal, src_default as default, defineConfig, loadConfig, vize, vizeConfigStore };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vizejs/vite-plugin",
-  "version": "0.0.1-alpha.101",
+  "version": "0.0.1-alpha.102",
   "description": "High-performance native Vite plugin for Vue SFC compilation powered by Vize",
   "publishConfig": {
     "access": "public"
@@ -43,7 +43,7 @@
   },
   "dependencies": {
     "tinyglobby": "^0.2.0",
-    "@vizejs/native": "0.0.1-alpha.101"
+    "@vizejs/native": "0.0.1-alpha.102"
   },
   "scripts": {
     "build": "tsdown",