@vizejs/vite-plugin 0.59.0 → 0.60.0

package/README.md

@@ -12,15 +12,10 @@ High-performance native Vite plugin for Vue SFC compilation powered by [Vize](ht
 
 ## Installation
 
-```bash
-# npm
-npm install @vizejs/vite-plugin vize
-
-# pnpm
-pnpm add @vizejs/vite-plugin vize
+Install `vp` once from the [Vite+ install guide](https://viteplus.dev/guide/install), then add the packages:
 
-# yarn
-yarn add @vizejs/vite-plugin vize
+```bash
+vp install -D @vizejs/vite-plugin vize
 ```
 
 ## Usage

package/dist/index.d.mts

@@ -16,6 +16,12 @@ interface CompilerConfig {
    * @default false
    */
   vapor?: boolean;
+  /**
+   * Treat lowercase non-HTML tags as custom renderer elements instead of Vue components.
+   * Useful for TresJS and other custom renderers.
+   * @default false
+   */
+  customRenderer?: boolean;
   /**
    * Enable SSR mode
    * @default false
@@ -529,6 +535,12 @@ interface VizeOptions {
    * @default false
    */
   vapor?: boolean;
+  /**
+   * Treat lowercase non-HTML tags as custom renderer elements instead of Vue components.
+   * Useful for TresJS and other custom renderers.
+   * @default false
+   */
+  customRenderer?: boolean;
   /**
    * Root directory to scan for .vue files
    * @default Vite's root

package/dist/index.mjs

@@ -176,7 +176,7 @@ function createFilter(include, exclude) {
 	};
 }
 function generateOutput(compiled, options) {
-	const { isProduction, isDev, hmrUpdateType, extractCss, filePath } = options;
+	const { isProduction, isDev, ssr, hmrUpdateType, extractCss, filePath } = options;
 	let output = compiled.code;
 	const exportDefaultRegex = /^export default /m;
 	const hasExportDefault = exportDefaultRegex.test(output);
@@ -233,9 +233,9 @@ function generateOutput(compiled, options) {
 				});
 			}
 			const cssModuleSetup = moduleBindings.map((m) => `_sfc_main.__cssModules = _sfc_main.__cssModules || {};\n_sfc_main.__cssModules[${JSON.stringify(m.name)}] = ${m.bindingName};`).join("\n");
-			output = output.replace(/^export default _sfc_main;/m, `${cssModuleSetup}\nexport default _sfc_main;`);
+			output = output.replace(/^export default _sfc_main;?$/m, `${cssModuleSetup}\nexport default _sfc_main;`);
 		}
-	} else if (compiled.css && !(isProduction && extractCss)) output = `
+	} else if (!ssr && compiled.css && !(isProduction && extractCss)) output = `
 export const __vize_css__ = ${JSON.stringify(compiled.css)};
 const __vize_css_id__ = ${JSON.stringify(`vize-style-${compiled.scopeId}`)};
 (function() {
@@ -262,8 +262,10 @@ const VIZE_SSR_PREFIX = "\0vize-ssr:";
 const RESOLVED_CSS_MODULE = "\0vize:all-styles.css";
 /** Check if a module ID is a vize-compiled virtual module */
 function isVizeVirtual(id) {
-	const pathPart = id.startsWith("\0vize-ssr:") ? id.slice(10) : id.slice(1);
-	return id.startsWith("\0") && pathPart.endsWith(".vue.ts");
+	return isVizeVirtualVueModuleId(id);
+}
+function isVizeVirtualVueModuleId(id) {
+	return id.startsWith("\0") && /\.vue\.ts(?:\?|$)/.test(id);
 }
 function isVizeSsrVirtual(id) {
 	return id.startsWith(VIZE_SSR_PREFIX);
@@ -274,8 +276,11 @@ function toVirtualId(realPath, ssr = false) {
 }
 /** Extract the real .vue file path from a virtual module ID */
 function fromVirtualId(virtualId) {
-	const prefix = isVizeSsrVirtual(virtualId) ? 10 : 1;
-	return virtualId.slice(prefix, -3);
+	return normalizeVizeVirtualVueModuleId(virtualId).split("?")[0];
+}
+function normalizeVizeVirtualVueModuleId(id) {
+	const prefix = isVizeSsrVirtual(id) ? 10 : 1;
+	return id.slice(prefix).replace(/\.ts(?=\?|$)/, "");
 }
 function escapeRegExp(value) {
 	return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
@@ -396,13 +401,15 @@ function buildCompileFileOptions(filePath, source, options) {
 		sourceMap: options.sourceMap,
 		ssr: options.ssr,
 		vapor: options.vapor,
+		customRenderer: options.customRenderer ?? false,
 		scopeId
 	};
 }
 function buildCompileBatchOptions(options) {
 	return {
 		ssr: options.ssr,
-		vapor: options.vapor
+		vapor: options.vapor,
+		customRenderer: options.customRenderer ?? false
 	};
 }
 //#endregion
@@ -520,9 +527,15 @@ function getCompileOptionsForRequest(state, ssr) {
 	return {
 		sourceMap: state.mergedOptions?.sourceMap ?? !state.isProduction,
 		ssr,
-		vapor: !ssr && (state.mergedOptions?.vapor ?? false)
+		vapor: !ssr && (state.mergedOptions?.vapor ?? false),
+		customRenderer: state.mergedOptions?.customRenderer ?? false
 	};
 }
+function syncCollectedCssForFile(state, filePath, compiled) {
+	if (!compiled || !state.isProduction) return;
+	if (compiled.css && !hasDelegatedStyles(compiled)) state.collectedCss.set(filePath, resolveCssImports(compiled.css, filePath, state.cssAliasRules, false));
+	else state.collectedCss.delete(filePath);
+}
 /**
 * Pre-compile all Vue files matching scan patterns.
 */
@@ -570,7 +583,8 @@ async function compileAll(state) {
 	}
 	const result = compileBatch(fileContents, state.cache, {
 		ssr: false,
-		vapor: state.mergedOptions.vapor ?? false
+		vapor: state.mergedOptions.vapor ?? false,
+		customRenderer: state.mergedOptions.customRenderer ?? false
 	});
 	for (const file of changedFiles) {
 		state.collectedCss.delete(file);
@@ -585,10 +599,7 @@ async function compileAll(state) {
 			continue;
 		}
 		if (metadata) state.precompileMetadata.set(fileResult.path, metadata);
-		if (state.isProduction && fileResult.css) {
-			const cached = state.cache.get(fileResult.path);
-			if (cached && !hasDelegatedStyles(cached)) state.collectedCss.set(fileResult.path, resolveCssImports(fileResult.css, fileResult.path, state.cssAliasRules, false));
-		}
+		syncCollectedCssForFile(state, fileResult.path, state.cache.get(fileResult.path));
 	}
 	const elapsed = (performance.now() - startTime).toFixed(2);
 	state.logger.info(`Pre-compilation complete: ${result.successCount} recompiled, ${cachedFileCount} reused, ${result.failedCount} failed (${elapsed}ms, native batch: ${result.timeMs.toFixed(2)}ms)`);
@@ -881,6 +892,7 @@ function loadHook(state, id, loadOptions) {
 		if (!compiled && fs.existsSync(realPath)) {
 			state.logger.log(`load: on-demand compiling ${realPath}`);
 			compiled = compileFile(realPath, cache, getCompileOptionsForRequest(state, isSsr));
+			syncCollectedCssForFile(state, realPath, compiled);
 		}
 		if (compiled) {
 			const hasDelegated = hasDelegatedStyles(compiled);
@@ -892,6 +904,7 @@ function loadHook(state, id, loadOptions) {
 			const output = rewriteStaticAssetUrls(rewriteDynamicTemplateImports(generateOutput(compiled, {
 				isProduction: state.isProduction,
 				isDev: state.server !== null && !isSsr,
+				ssr: isSsr,
 				hmrUpdateType: pendingHmrUpdateType,
 				extractCss: state.extractCss,
 				filePath: realPath
@@ -1060,9 +1073,12 @@ function createPostTransformPlugin(state) {
 				state.logger.log(`post-transform: compiling virtual SFC content from ${id}`);
 				try {
 					const isSsr = !!transformOptions?.ssr;
-					const result = await transformWithOxc(generateOutput(compileFile(id, getEnvironmentCache(state, isSsr), getCompileOptionsForRequest(state, isSsr), code), {
+					const compiled = compileFile(id, getEnvironmentCache(state, isSsr), getCompileOptionsForRequest(state, isSsr), code);
+					syncCollectedCssForFile(state, id, compiled);
+					const result = await transformWithOxc(generateOutput(compiled, {
 						isProduction: state.isProduction,
 						isDev: state.server !== null,
+						ssr: isSsr,
 						extractCss: state.extractCss,
 						filePath: id
 					}), id, { lang: "ts" });
@@ -1082,6 +1098,39 @@ function createPostTransformPlugin(state) {
 	};
 }
 //#endregion
+//#region src/plugin/unocss.ts
+const bridgePatched = Symbol("vize.unocssBridgePatched");
+const plainSsrPrefix = VIZE_SSR_PREFIX.slice(1);
+function stripBridgePrefix(id) {
+	if (id.startsWith("\0vize-ssr:")) return id.slice(10);
+	if (id.startsWith(plainSsrPrefix)) return id.slice(plainSsrPrefix.length);
+	if (id.startsWith("\0")) return id.slice(1);
+	return id;
+}
+function isUnoCssBridgeModuleId(id) {
+	return /\.vue\.ts(?:\?|$)/.test(stripBridgePrefix(id));
+}
+function normalizeUnoCssBridgeModuleId(id) {
+	return stripBridgePrefix(id).replace(/\.ts(?=\?|$)/, "");
+}
+function patchUnoCssBridge(plugins) {
+	for (const plugin of plugins) {
+		if (!plugin.name?.startsWith("unocss:") || typeof plugin.transform !== "function" || plugin[bridgePatched]) continue;
+		const originalTransform = plugin.transform;
+		const isExtractionOnly = plugin.name.startsWith("unocss:global");
+		plugin.transform = function(code, id, ...args) {
+			if (!isUnoCssBridgeModuleId(id)) return originalTransform.call(this, code, id, ...args);
+			const normalizedId = normalizeUnoCssBridgeModuleId(id);
+			let effectiveCode = code;
+			if (isExtractionOnly) try {
+				effectiveCode = `${code}\n${fs.readFileSync(normalizedId.split("?")[0], "utf-8")}`;
+			} catch {}
+			return originalTransform.call(this, effectiveCode, normalizedId, ...args);
+		};
+		plugin[bridgePatched] = true;
+	}
+}
+//#endregion
 //#region src/plugin/index.ts
 function vize(options = {}) {
 	const state = {
@@ -1177,6 +1226,7 @@ function vize(options = {}) {
 					ssr: options.ssr ?? compilerConfig.ssr ?? false,
 					sourceMap: options.sourceMap ?? compilerConfig.sourceMap,
 					vapor: options.vapor ?? compilerConfig.vapor ?? false,
+					customRenderer: options.customRenderer ?? compilerConfig.customRenderer ?? false,
 					include: options.include ?? viteConfig.include,
 					exclude: options.exclude ?? viteConfig.exclude,
 					scanPatterns: options.scanPatterns ?? viteConfig.scanPatterns,
@@ -1210,6 +1260,7 @@ function vize(options = {}) {
 					"dist/**",
 					".git/**"
 				];
+				patchUnoCssBridge(resolvedConfig.plugins);
 				state.initialized = true;
 			},
 			configureServer(devServer) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vizejs/vite-plugin",
-  "version": "0.59.0",
+  "version": "0.60.0",
   "description": "High-performance native Vite plugin for Vue SFC compilation powered by Vize",
   "keywords": [
     "compiler",
@@ -33,9 +33,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@vizejs/native": "0.59.0",
+    "@vizejs/native": "0.60.0",
     "tinyglobby": "0.2.16",
-    "vize": "0.59.0"
+    "vize": "0.60.0"
   },
   "devDependencies": {
     "@types/node": "25.6.0",
@@ -52,6 +52,6 @@
     "check": "vp check src vite.config.ts",
     "check:fix": "vp check --fix src vite.config.ts",
     "fmt": "vp fmt --write src vite.config.ts",
-    "test": "node src/test.ts"
+    "test": "pnpm --dir ../vize-native build:debug && node src/test.ts"
   }
 }