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

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";
@@ -116,6 +118,69 @@ ${output}`;
 	if (!isProduction && isDev && hasExportDefault) output += generateHmrCode(compiled.scopeId, hmrUpdateType ?? "full-reload");
 	return output;
 }
+/**
+* Resolve CSS @import statements by inlining the imported files,
+* then resolve @custom-media definitions within the combined CSS.
+*
+* This is necessary because Vize embeds CSS as a JS string via
+* document.createElement('style'), bypassing Vite's CSS pipeline.
+*/
+function resolveCssImports(css, importer, aliasRules, isDev, devUrlBase) {
+	const customMedia = new Map();
+	const importRegex = /^@import\s+(?:"([^"]+)"|'([^']+)');?\s*$/gm;
+	let result = css;
+	result = result.replace(importRegex, (_match, dqPath, sqPath) => {
+		const importPath = dqPath || sqPath;
+		if (!importPath) return _match;
+		const resolved = resolveCssPath(importPath, importer, aliasRules);
+		if (!resolved || !fs.existsSync(resolved)) return _match;
+		try {
+			const content = fs.readFileSync(resolved, "utf-8");
+			parseCustomMedia(content, customMedia);
+			return content;
+		} catch {
+			return _match;
+		}
+	});
+	parseCustomMedia(result, customMedia);
+	result = result.replace(/^@custom-media\s+[^;]+;\s*$/gm, "");
+	if (customMedia.size > 0) for (const [name, query] of customMedia) {
+		const escaped = name.replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&");
+		result = result.replace(new RegExp(`\\(${escaped}\\)`, "g"), query);
+	}
+	if (isDev) result = result.replace(/url\(\s*(["']?)([^"')]+)\1\s*\)/g, (_match, quote, urlPath) => {
+		const trimmed = urlPath.trim();
+		if (trimmed.startsWith("data:") || trimmed.startsWith("http://") || trimmed.startsWith("https://") || trimmed.startsWith("/@fs/")) return _match;
+		const resolved = resolveCssPath(trimmed, importer, aliasRules);
+		if (resolved && fs.existsSync(resolved)) {
+			const normalized = resolved.replace(/\\/g, "/");
+			const base = devUrlBase ?? "/";
+			const prefix = base.endsWith("/") ? base : base + "/";
+			return `url("${prefix}@fs${normalized}")`;
+		}
+		return _match;
+	});
+	result = result.replace(/:deep\(([^()]*(?:\([^()]*\))*[^()]*)\)/g, "$1");
+	result = result.replace(/\n{3,}/g, "\n\n");
+	return result;
+}
+function parseCustomMedia(css, map) {
+	const re = /@custom-media\s+(--[\w-]+)\s+(.+?)\s*;/g;
+	let m;
+	while ((m = re.exec(css)) !== null) map.set(m[1], m[2]);
+}
+function resolveCssPath(importPath, importer, aliasRules) {
+	for (const rule of aliasRules) if (importPath.startsWith(rule.find)) {
+		const resolved = importPath.replace(rule.find, rule.replacement);
+		return path.resolve(resolved);
+	}
+	if (importPath.startsWith(".")) {
+		const dir = path.dirname(importer);
+		return path.resolve(dir, importPath);
+	}
+	if (path.isAbsolute(importPath)) return importPath;
+	return null;
+}
 
 //#endregion
 //#region src/compiler.ts
@@ -250,9 +315,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),
@@ -261,18 +386,61 @@ function createLogger(debug) {
 		error: (...args) => console.error("[vize]", ...args)
 	};
 }
+/**
+* Built-in Vite/Vue/Nuxt define keys that are handled by Vite's own transform pipeline.
+* These must NOT be replaced by the vize plugin because:
+* 1. Nuxt runs both client and server Vite builds, each with different values
+*    (e.g., import.meta.server = true on server, false on client).
+* 2. Vite's import.meta transform already handles these correctly per-environment.
+*/
+const BUILTIN_DEFINE_PREFIXES = [
+	"import.meta.server",
+	"import.meta.client",
+	"import.meta.dev",
+	"import.meta.test",
+	"import.meta.prerender",
+	"import.meta.env",
+	"import.meta.hot",
+	"__VUE_",
+	"__NUXT_",
+	"process.env"
+];
+function isBuiltinDefine(key) {
+	return BUILTIN_DEFINE_PREFIXES.some((prefix) => key === prefix || key.startsWith(prefix + ".") || key.startsWith(prefix + "_"));
+}
+/**
+* Apply Vite define replacements to code.
+* Replaces keys like `import.meta.vfFeatures.photoSection` with their values.
+* Uses word-boundary-aware matching to avoid replacing inside strings or partial matches.
+*/
+function applyDefineReplacements(code, defines) {
+	const sortedKeys = Object.keys(defines).sort((a, b) => b.length - a.length);
+	let result = code;
+	for (const key of sortedKeys) {
+		if (!result.includes(key)) continue;
+		const escaped = key.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+		const re = new RegExp(escaped + "(?![\\w$.])", "g");
+		result = result.replace(re, defines[key]);
+	}
+	return result;
+}
 function vize(options = {}) {
 	const cache = new Map();
-	const virtualToReal = new Map();
 	const collectedCss = new Map();
 	let isProduction;
 	let root;
+	let clientViteBase = "/";
+	let serverViteBase = "/";
 	let server = null;
 	let filter;
 	let scanPatterns;
 	let ignorePatterns;
 	let mergedOptions;
+	let dynamicImportAliasRules = [];
+	let cssAliasRules = [];
 	let extractCss = false;
+	let clientViteDefine = {};
+	let serverViteDefine = {};
 	const logger = createLogger(options.debug ?? false);
 	async function compileAll() {
 		const startTime = performance.now();
@@ -294,7 +462,7 @@ function vize(options = {}) {
 		}
 		const result = compileBatch(fileContents, cache, { ssr: mergedOptions.ssr ?? false });
 		if (isProduction) {
-			for (const fileResult of result.results) if (fileResult.css) collectedCss.set(fileResult.path, fileResult.css);
+			for (const fileResult of result.results) if (fileResult.css) collectedCss.set(fileResult.path, resolveCssImports(fileResult.css, fileResult.path, cssAliasRules, false));
 		}
 		const elapsed = (performance.now() - startTime).toFixed(2);
 		logger.info(`Pre-compilation complete: ${result.successCount} succeeded, ${result.failedCount} failed (${elapsed}ms, native batch: ${result.timeMs.toFixed(2)}ms)`);
@@ -305,36 +473,45 @@ 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"],
+					rolldownOptions: { external: [/\.vue$/] }
+				}
+			};
 		},
 		async configResolved(resolvedConfig) {
 			root = options.root ?? resolvedConfig.root;
 			isProduction = options.isProduction ?? resolvedConfig.isProduction;
+			const isSsrBuild = !!resolvedConfig.build?.ssr;
+			if (isSsrBuild) serverViteBase = resolvedConfig.base ?? "/";
+			else clientViteBase = resolvedConfig.base ?? "/";
 			extractCss = isProduction;
+			const isSsr = !!resolvedConfig.build?.ssr;
+			const envDefine = {};
+			if (resolvedConfig.define) for (const [key, value] of Object.entries(resolvedConfig.define)) {
+				if (isBuiltinDefine(key)) continue;
+				if (typeof value === "string") envDefine[key] = value;
+				else envDefine[key] = JSON.stringify(value);
+			}
+			if (isSsr) serverViteDefine = envDefine;
+			else clientViteDefine = envDefine;
 			const configEnv = {
 				mode: resolvedConfig.mode,
 				command: resolvedConfig.command === "build" ? "build" : "serve",
@@ -364,6 +541,27 @@ 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);
+			cssAliasRules = [];
+			for (const alias of resolvedConfig.resolve.alias) {
+				if (typeof alias.find !== "string" || typeof alias.replacement !== "string") continue;
+				cssAliasRules.push({
+					find: alias.find,
+					replacement: alias.replacement
+				});
+			}
+			cssAliasRules.sort((a, b) => b.find.length - a.find.length);
 			filter = createFilter(mergedOptions.include, mergedOptions.exclude);
 			scanPatterns = mergedOptions.scanPatterns ?? ["**/*.vue"];
 			ignorePatterns = mergedOptions.ignorePatterns ?? [
@@ -374,120 +572,235 @@ 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;
 		},
-		load(id) {
+		load(id, loadOptions) {
+			const currentBase = loadOptions?.ssr ? serverViteBase : clientViteBase;
 			if (id === RESOLVED_CSS_MODULE) {
 				const allCss = Array.from(collectedCss.values()).join("\n\n");
 				return allCss;
 			}
 			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;
+				if (compiled?.css) return resolveCssImports(compiled.css, realPath, cssAliasRules, server !== null, currentBase);
 				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, {
+					if (compiled.css) compiled = {
+						...compiled,
+						css: resolveCssImports(compiled.css, realPath, cssAliasRules, server !== null, currentBase)
+					};
+					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
-				};
+		async transform(code, id, options$1) {
+			if (isVizeVirtual(id)) {
+				const realPath = fromVirtualId(id);
+				try {
+					const result = await transformWithOxc(code, realPath, { lang: "ts" });
+					const defines = options$1?.ssr ? serverViteDefine : clientViteDefine;
+					let transformed = result.code;
+					if (Object.keys(defines).length > 0) transformed = applyDefineReplacements(transformed, defines);
+					return {
+						code: transformed,
+						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 +816,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({
@@ -512,7 +825,7 @@ function vize(options = {}) {
 						data: {
 							id: newCompiled.scopeId,
 							type: "style-only",
-							css: newCompiled.css
+							css: resolveCssImports(newCompiled.css, file, cssAliasRules, true, clientViteBase)
 						}
 					});
 					return [];
@@ -535,8 +848,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.103",
   "description": "High-performance native Vite plugin for Vue SFC compilation powered by Vize",
   "publishConfig": {
     "access": "public"
@@ -42,8 +42,8 @@
     "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-beta.0"
   },
   "dependencies": {
-    "tinyglobby": "^0.2.0",
-    "@vizejs/native": "0.0.1-alpha.101"
+    "@vizejs/native": "file:../vize-native",
+    "tinyglobby": "^0.2.0"
   },
   "scripts": {
     "build": "tsdown",