@vizejs/vite-plugin 0.22.0 → 0.23.0

package/dist/index.js

@@ -8,6 +8,13 @@ import { transformWithOxc } from "vite";
 import { createRequire } from "node:module";
 
 //#region src/hmr.ts
+function didHashChange(prevHash, nextHash) {
+	return prevHash !== nextHash;
+}
+function hasHmrChanges(prev, next) {
+	if (!prev) return true;
+	return didHashChange(prev.scriptHash, next.scriptHash) || didHashChange(prev.templateHash, next.templateHash) || didHashChange(prev.styleHash, next.styleHash);
+}
 /**
 * Detect the type of HMR update needed based on content hash changes.
 *
@@ -17,10 +24,10 @@ import { createRequire } from "node:module";
 */
 function detectHmrUpdateType(prev, next) {
 	if (!prev) return "full-reload";
-	const scriptChanged = prev.scriptHash !== next.scriptHash;
+	const scriptChanged = didHashChange(prev.scriptHash, next.scriptHash);
 	if (scriptChanged) return "full-reload";
-	const templateChanged = prev.templateHash !== next.templateHash;
-	const styleChanged = prev.styleHash !== next.styleHash;
+	const templateChanged = didHashChange(prev.templateHash, next.templateHash);
+	const styleChanged = didHashChange(prev.styleHash, next.styleHash);
 	if (styleChanged && !templateChanged) return "style-only";
 	if (templateChanged) return "template-only";
 	return "full-reload";
@@ -158,6 +165,9 @@ function hasDelegatedStyles(compiled) {
 	if (!compiled.styles) return false;
 	return compiled.styles.some((s) => needsPreprocessor(s) || isCssModule(s));
 }
+function supportsTemplateOnlyHmr(output) {
+	return /(?:^|\n)(?:_sfc_main|__sfc__)\.render\s*=\s*render\b/m.test(output);
+}
 function generateScopeId(filename) {
 	const hash = createHash("sha256").update(filename).digest("hex");
 	return hash.slice(0, 8);
@@ -176,6 +186,7 @@ function generateOutput(compiled, options) {
 	let output = compiled.code;
 	const exportDefaultRegex = /^export default /m;
 	const hasExportDefault = exportDefaultRegex.test(output);
+	const hasNamedRenderExport = /^export function render\b/m.test(output);
 	const hasSfcMainDefined = /\bconst\s+_sfc_main\s*=/.test(output);
 	if (hasExportDefault && !hasSfcMainDefined) {
 		output = output.replace(exportDefaultRegex, "const _sfc_main = ");
@@ -183,6 +194,11 @@ function generateOutput(compiled, options) {
 		output += "\nexport default _sfc_main;";
 	} else if (hasExportDefault && hasSfcMainDefined) {
 		if (compiled.hasScoped && compiled.scopeId) output = output.replace(/^export default _sfc_main/m, `_sfc_main.__scopeId = "data-v-${compiled.scopeId}";\nexport default _sfc_main`);
+	} else if (!hasExportDefault && !hasSfcMainDefined && hasNamedRenderExport) {
+		output += "\nconst _sfc_main = {};";
+		if (compiled.hasScoped && compiled.scopeId) output += `\n_sfc_main.__scopeId = "data-v-${compiled.scopeId}";`;
+		output += "\n_sfc_main.render = render;";
+		output += "\nexport default _sfc_main;";
 	}
 	const useDelegatedStyles = hasDelegatedStyles(compiled) && filePath;
 	if (useDelegatedStyles) {
@@ -241,7 +257,10 @@ const __vize_css_id__ = ${cssId};
 })();
 ${output}`;
 	}
-	if (!isProduction && isDev && hasExportDefault) output += generateHmrCode(compiled.scopeId, hmrUpdateType ?? "full-reload");
+	if (!isProduction && isDev && hasExportDefault) {
+		const effectiveHmrUpdateType = hmrUpdateType === "template-only" && !supportsTemplateOnlyHmr(output) ? "full-reload" : hmrUpdateType ?? "full-reload";
+		output += generateHmrCode(compiled.scopeId, effectiveHmrUpdateType);
+	}
 	return output;
 }
 
@@ -491,6 +510,9 @@ function compileFile(filePath, cache, options, source) {
 		css: result.css,
 		scopeId,
 		hasScoped,
+		templateHash: result.templateHash,
+		styleHash: result.styleHash,
+		scriptHash: result.scriptHash,
 		styles
 	};
 	cache.set(filePath, compiled);
@@ -533,6 +555,23 @@ function compileBatch(files, cache, options) {
 
 //#endregion
 //#region src/plugin/state.ts
+function hasFileMetadataChanged(previous, next) {
+	return previous === void 0 || previous.mtimeMs !== next.mtimeMs || previous.size !== next.size;
+}
+function diffPrecompileFiles(files, currentMetadata, previousMetadata) {
+	const changedFiles = [];
+	const seenFiles = new Set(files);
+	for (const file of files) {
+		const metadata = currentMetadata.get(file);
+		if (!metadata || hasFileMetadataChanged(previousMetadata.get(file), metadata)) changedFiles.push(file);
+	}
+	const deletedFiles = [];
+	for (const file of previousMetadata.keys()) if (!seenFiles.has(file)) deletedFiles.push(file);
+	return {
+		changedFiles,
+		deletedFiles
+	};
+}
 /**
 * Pre-compile all Vue files matching scan patterns.
 */
@@ -543,9 +582,32 @@ async function compileAll(state) {
 		ignore: state.ignorePatterns,
 		absolute: true
 	});
-	state.logger.info(`Pre-compiling ${files.length} Vue files...`);
-	const fileContents = [];
+	const currentMetadata = new Map();
 	for (const file of files) try {
+		const stat = fs.statSync(file);
+		currentMetadata.set(file, {
+			mtimeMs: stat.mtimeMs,
+			size: stat.size
+		});
+	} catch (e) {
+		state.logger.error(`Failed to stat ${file}:`, e);
+	}
+	const { changedFiles, deletedFiles } = diffPrecompileFiles(files, currentMetadata, state.precompileMetadata);
+	const cachedFileCount = files.length - changedFiles.length;
+	for (const file of deletedFiles) {
+		state.cache.delete(file);
+		state.collectedCss.delete(file);
+		state.precompileMetadata.delete(file);
+		state.pendingHmrUpdateTypes.delete(file);
+	}
+	state.logger.info(`Pre-compiling ${files.length} Vue files... (${changedFiles.length} changed, ${cachedFileCount} cached, ${deletedFiles.length} removed)`);
+	if (changedFiles.length === 0) {
+		const elapsed$1 = (performance.now() - startTime).toFixed(2);
+		state.logger.info(`Pre-compilation complete: cache reused (${elapsed$1}ms)`);
+		return;
+	}
+	const fileContents = [];
+	for (const file of changedFiles) try {
 		const source = fs.readFileSync(file, "utf-8");
 		fileContents.push({
 			path: file,
@@ -555,21 +617,26 @@ async function compileAll(state) {
 		state.logger.error(`Failed to read ${file}:`, e);
 	}
 	const result = compileBatch(fileContents, state.cache, { ssr: state.mergedOptions.ssr ?? false });
-	if (state.isProduction) {
-		for (const fileResult of result.results) if (fileResult.css) {
+	for (const file of changedFiles) {
+		state.collectedCss.delete(file);
+		state.pendingHmrUpdateTypes.delete(file);
+	}
+	for (const fileResult of result.results) {
+		const metadata = currentMetadata.get(fileResult.path);
+		if (fileResult.errors.length > 0) {
+			state.cache.delete(fileResult.path);
+			state.collectedCss.delete(fileResult.path);
+			state.precompileMetadata.delete(fileResult.path);
+			continue;
+		}
+		if (metadata) state.precompileMetadata.set(fileResult.path, metadata);
+		if (state.isProduction && fileResult.css) {
 			const cached = state.cache.get(fileResult.path);
-			const hasDelegated = cached?.styles?.some((s) => s.lang !== null && [
-				"scss",
-				"sass",
-				"less",
-				"stylus",
-				"styl"
-			].includes(s.lang) || s.module !== false);
-			if (!hasDelegated) state.collectedCss.set(fileResult.path, resolveCssImports(fileResult.css, fileResult.path, state.cssAliasRules, false));
+			if (cached && !hasDelegatedStyles(cached)) state.collectedCss.set(fileResult.path, resolveCssImports(fileResult.css, fileResult.path, state.cssAliasRules, false));
 		}
 	}
 	const elapsed = (performance.now() - startTime).toFixed(2);
-	state.logger.info(`Pre-compilation complete: ${result.successCount} succeeded, ${result.failedCount} failed (${elapsed}ms, native batch: ${result.timeMs.toFixed(2)}ms)`);
+	state.logger.info(`Pre-compilation complete: ${result.successCount} recompiled, ${cachedFileCount} reused, ${result.failedCount} failed (${elapsed}ms, native batch: ${result.timeMs.toFixed(2)}ms)`);
 }
 
 //#endregion
@@ -741,6 +808,24 @@ async function resolveIdHook(ctx, state, id, importer) {
 
 //#endregion
 //#region src/plugin/load.ts
+const SERVER_PLACEHOLDER_CODE = `import { createElementBlock, defineComponent } from "vue";
+export default defineComponent({
+  name: "ServerPlaceholder",
+  render() {
+    return createElementBlock("div");
+  }
+});
+`;
+function getBoundaryPlaceholderCode(realPath, ssr) {
+	if (ssr && realPath.endsWith(".client.vue")) return SERVER_PLACEHOLDER_CODE;
+	if (!ssr && realPath.endsWith(".server.vue")) return SERVER_PLACEHOLDER_CODE;
+	return null;
+}
+function getOxcDumpPath(root, realPath) {
+	const dumpDir = path.resolve(root || process.cwd(), "__agent_only", "oxc-dumps");
+	fs.mkdirSync(dumpDir, { recursive: true });
+	return path.join(dumpDir, `vize-oxc-error-${path.basename(realPath)}.ts`);
+}
 function loadHook(state, id, loadOptions) {
 	const currentBase = loadOptions?.ssr ? state.serverViteBase : state.clientViteBase;
 	if (id === RESOLVED_CSS_MODULE) {
@@ -807,6 +892,14 @@ function loadHook(state, id, loadOptions) {
 			state.logger.log(`load: skipping non-vue virtual module ${realPath}`);
 			return null;
 		}
+		const placeholderCode = getBoundaryPlaceholderCode(realPath, !!loadOptions?.ssr);
+		if (placeholderCode) {
+			state.logger.log(`load: using boundary placeholder for ${realPath}`);
+			return {
+				code: placeholderCode,
+				map: null
+			};
+		}
 		let compiled = state.cache.get(realPath);
 		if (!compiled && fs.existsSync(realPath)) {
 			state.logger.log(`load: on-demand compiling ${realPath}`);
@@ -816,13 +909,8 @@ function loadHook(state, id, loadOptions) {
 			});
 		}
 		if (compiled) {
-			const hasDelegated = compiled.styles?.some((s) => s.lang !== null && [
-				"scss",
-				"sass",
-				"less",
-				"stylus",
-				"styl"
-			].includes(s.lang) || s.module !== false);
+			const hasDelegated = hasDelegatedStyles(compiled);
+			const pendingHmrUpdateType = loadOptions?.ssr ? void 0 : state.pendingHmrUpdateTypes.get(realPath);
 			if (compiled.css && !hasDelegated) compiled = {
 				...compiled,
 				css: resolveCssImports(compiled.css, realPath, state.cssAliasRules, state.server !== null, currentBase)
@@ -830,9 +918,11 @@ function loadHook(state, id, loadOptions) {
 			const output = rewriteStaticAssetUrls(rewriteDynamicTemplateImports(generateOutput(compiled, {
 				isProduction: state.isProduction,
 				isDev: state.server !== null,
+				hmrUpdateType: pendingHmrUpdateType,
 				extractCss: state.extractCss,
 				filePath: realPath
 			}), state.dynamicImportAliasRules), state.dynamicImportAliasRules);
+			if (!loadOptions?.ssr) state.pendingHmrUpdateTypes.delete(realPath);
 			return {
 				code: output,
 				map: null
@@ -868,7 +958,7 @@ async function transformHook(state, code, id, options) {
 			};
 		} catch (e) {
 			state.logger.error(`transformWithOxc failed for ${realPath}:`, e);
-			const dumpPath = `/tmp/vize-oxc-error-${path.basename(realPath)}.ts`;
+			const dumpPath = getOxcDumpPath(state.root, realPath);
 			fs.writeFileSync(dumpPath, code, "utf-8");
 			state.logger.error(`Dumped failing code to ${dumpPath}`);
 			return {
@@ -892,17 +982,25 @@ async function handleHotUpdateHook(state, ctx) {
 			ssr: state.mergedOptions?.ssr ?? false
 		}, source);
 		const newCompiled = state.cache.get(file);
+		try {
+			const stat = fs.statSync(file);
+			state.precompileMetadata.set(file, {
+				mtimeMs: stat.mtimeMs,
+				size: stat.size
+			});
+		} catch {
+			state.precompileMetadata.delete(file);
+		}
+		if (!hasHmrChanges(prevCompiled, newCompiled)) {
+			state.pendingHmrUpdateTypes.delete(file);
+			state.logger.log(`Re-compiled: ${path.relative(state.root, file)} (no-op)`);
+			return [];
+		}
 		const updateType = detectHmrUpdateType(prevCompiled, newCompiled);
 		state.logger.log(`Re-compiled: ${path.relative(state.root, file)} (${updateType})`);
 		const virtualId = toVirtualId(file);
 		const modules = server.moduleGraph.getModulesByFile(virtualId) ?? server.moduleGraph.getModulesByFile(file);
-		const hasDelegated = newCompiled.styles?.some((s) => s.lang !== null && [
-			"scss",
-			"sass",
-			"less",
-			"stylus",
-			"styl"
-		].includes(s.lang) || s.module !== false);
+		const hasDelegated = hasDelegatedStyles(newCompiled);
 		if (hasDelegated && updateType === "style-only") {
 			const affectedModules = new Set();
 			for (const block of newCompiled.styles ?? []) {
@@ -917,10 +1015,12 @@ async function handleHotUpdateHook(state, ctx) {
 				const styleMods = server.moduleGraph.getModulesByFile(styleId);
 				if (styleMods) for (const mod of styleMods) affectedModules.add(mod);
 			}
-			if (modules) for (const mod of modules) affectedModules.add(mod);
 			if (affectedModules.size > 0) return [...affectedModules];
+			if (modules) return [...modules];
+			return [];
 		}
 		if (updateType === "style-only" && newCompiled.css && !hasDelegated) {
+			state.pendingHmrUpdateTypes.delete(file);
 			server.ws.send({
 				type: "custom",
 				event: "vize:update",
@@ -932,7 +1032,11 @@ async function handleHotUpdateHook(state, ctx) {
 			});
 			return [];
 		}
-		if (modules) return [...modules];
+		if (modules) {
+			state.pendingHmrUpdateTypes.set(file, updateType);
+			return [...modules];
+		}
+		state.pendingHmrUpdateTypes.delete(file);
 	} catch (e) {
 		state.logger.error(`Re-compilation failed for ${file}:`, e);
 	}
@@ -1019,6 +1123,8 @@ function vize(options = {}) {
 	const state = {
 		cache: new Map(),
 		collectedCss: new Map(),
+		precompileMetadata: new Map(),
+		pendingHmrUpdateTypes: new Map(),
 		isProduction: false,
 		root: "",
 		clientViteBase: "/",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vizejs/vite-plugin",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "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.22.0"
+    "@vizejs/native": "0.23.0"
   },
   "scripts": {
     "build": "tsdown",