@vizejs/vite-plugin 0.204.0 → 0.210.0

package/dist/index.d.mts

@@ -56,6 +56,10 @@ interface CompilerConfig {
    * Enable Vapor mode compilation
    */
   vapor?: boolean;
+  /**
+   * Default output mode for .jsx/.tsx components without a "use vue:*" directive
+   */
+  jsxMode?: "vdom" | "vapor";
   /**
    * Treat lowercase non-HTML tags as custom renderer elements
    */
@@ -730,6 +734,14 @@ interface VizeOptions {
    * @default false
    */
   vapor?: boolean;
+  /**
+   * Default output mode for `.jsx`/`.tsx` components without a `"use vue:*"`
+   * directive. Distinct from `vapor` (which targets `.vue` SFCs): a project can
+   * keep SFCs on VDOM while defaulting JSX to Vapor, or vice versa. A
+   * per-component `"use vue:vapor"` / `"use vue:vdom"` directive overrides it.
+   * @default "vdom"
+   */
+  jsxMode?: "vdom" | "vapor";
   /**
    * Treat lowercase non-HTML tags as custom renderer elements instead of Vue components.
    * Useful for TresJS and other custom renderers.

package/dist/index.mjs

@@ -94,6 +94,34 @@ function hasDelegatedStyles(compiled) {
 function supportsTemplateOnlyHmr(output) {
 	return /(?:^|\n)(?:_sfc_main|__sfc__)\.render\s*=\s*render\b/m.test(output);
 }
+/**
+* Prepend a runtime `<style>` injection for plain CSS to a module's output.
+*
+* This is the same inline-CSS path plain SFC `<style>` blocks use in
+* {@link generateOutput}: a guarded `document.createElement('style')` keyed by a
+* stable id so the rule is injected once and idempotently. `styleKey` seeds the
+* element id. Used for both SFC plain CSS and JSX `<style scoped>` CSS (#1495,
+* #1533), whose content is already scope-rewritten by the compiler.
+*/
+function prependInlineStyleInjection(output, css, styleKey) {
+	return `
+export const __vize_css__ = ${JSON.stringify(css)};
+const __vize_css_id__ = ${JSON.stringify(`vize-style-${styleKey}`)};
+(function() {
+  if (typeof document !== 'undefined') {
+    let style = document.getElementById(__vize_css_id__);
+    if (!style) {
+      style = document.createElement('style');
+      style.id = __vize_css_id__;
+      style.textContent = __vize_css__;
+      document.head.appendChild(style);
+    } else {
+      style.textContent = __vize_css__;
+    }
+  }
+})();
+${output}`;
+}
 function insertAfterStaticImports(output, imports) {
 	let insertAt = 0;
 	for (const match of output.matchAll(/^import\b[^\n]*(?:\r?\n|$)/gm)) insertAt = (match.index ?? 0) + match[0].length;
@@ -172,23 +200,7 @@ 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;`);
 		}
-	} 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() {
-  if (typeof document !== 'undefined') {
-    let style = document.getElementById(__vize_css_id__);
-    if (!style) {
-      style = document.createElement('style');
-      style.id = __vize_css_id__;
-      style.textContent = __vize_css__;
-      document.head.appendChild(style);
-    } else {
-      style.textContent = __vize_css__;
-    }
-  }
-})();
-${output}`;
+	} else if (!ssr && compiled.css && !(isProduction && extractCss)) output = prependInlineStyleInjection(output, compiled.css, compiled.scopeId);
 	if (!isProduction && isDev && hasExportDefault) {
 		const effectiveHmrUpdateType = hmrUpdateType === "template-only" && !supportsTemplateOnlyHmr(output) ? "full-reload" : hmrUpdateType ?? "full-reload";
 		output += generateHmrCode(compiled.scopeId, effectiveHmrUpdateType);
@@ -299,6 +311,9 @@ function buildCompileBatchOptions(options) {
 		ssr: options.ssr,
 		vapor: options.vapor,
 		customRenderer: options.customRenderer ?? false,
+		includeStyles: true,
+		includeMacroArtifacts: true,
+		includeHashes: true,
 		...options.mode === void 0 ? {} : { mode: options.mode },
 		...options.templateSyntax === void 0 ? {} : { templateSyntax: options.templateSyntax },
 		...options.runtimeModuleName === void 0 ? {} : { runtimeModuleName: options.runtimeModuleName },
@@ -309,6 +324,7 @@ function buildCompileBatchOptions(options) {
 //#endregion
 //#region src/compiler.ts
 const { compileSfc, compileSfcBatchWithResults } = native;
+const compileJsx = native.compileJsx;
 var VizeSfcCompileError = class extends Error {
 	filePath;
 	diagnostics;
@@ -402,6 +418,39 @@ function compileFile(filePath, cache, options, source) {
 	return compiled;
 }
 /**
+* Compile a `.jsx`/`.tsx` Vue component module to render code through Vize.
+*
+* Mirrors `compileFile` for SFCs but routes through the native `compileJsx`
+* binding. The returned `code` is a self-contained module (the runtime-helper
+* preamble is included, #1533), and `map` carries a v3 source map when
+* `sourceMap` is requested. A component's `<style scoped>` CSS is surfaced
+* (already scope-rewritten) and emitted through the same inline-injection path
+* plain SFC `<style>` blocks use (#1495, #1533).
+*/
+function compileJsxModule(filePath, source, options = {}) {
+	const result = compileJsx(source, {
+		filename: filePath,
+		lang: filePath.endsWith(".tsx") ? "tsx" : "jsx",
+		jsxMode: options.jsxMode,
+		vapor: options.vapor ?? false,
+		sourceMap: options.sourceMap ?? false
+	});
+	if (result.errors.length > 0) throw new VizeSfcCompileError(filePath, result.errors);
+	const css = (result.scopedStyles ?? []).map((style) => style.css).join("\n");
+	let code = result.code;
+	let map = result.map ?? null;
+	if (css && !options.ssr) {
+		const styleKey = result.scopedStyles[0].scopeId.replace(/^data-v-/, "");
+		code = prependInlineStyleInjection(code, css, styleKey);
+		map = null;
+	}
+	return {
+		code,
+		map,
+		warnings: result.warnings
+	};
+}
+/**
 * Batch compile multiple files in parallel using native Rust multithreading.
 * Returns per-file results with content hashes for HMR.
 */
@@ -1462,8 +1511,47 @@ function loadHook(state, id, loadOptions) {
 	}
 	return null;
 }
+function isJsxComponentPath(path) {
+	return path.endsWith(".jsx") || path.endsWith(".tsx");
+}
+function shouldTransformJsxRequest(state, request) {
+	if (!isJsxComponentPath(request.path)) return false;
+	if (request.querySuffix) {
+		const params = new URLSearchParams(request.querySuffix.slice(1));
+		if (params.has("raw") || params.has("url") || params.has("worker") || params.has("sharedworker")) return false;
+	}
+	if (state.mergedOptions.exclude && !state.filter(request.path)) return false;
+	return true;
+}
+/**
+* Route a raw `.jsx`/`.tsx` request through Vize's JSX compiler.
+*
+* Returns `undefined` when the request is not a JSX/TSX component (so the
+* caller falls through to the virtual-module pipeline), or a transform result
+* otherwise.
+*/
+function transformJsxRequest(state, code, id, options) {
+	const request = classifyVitePluginRequest(id);
+	if (!shouldTransformJsxRequest(state, request)) return;
+	const realPath = request.normalizedFsId ? classifyVitePluginRequest(request.normalizedFsId).path : request.path;
+	const ssr = options?.ssr ?? false;
+	const sourceMap = getCompileOptionsForRequest(state, ssr).sourceMap;
+	const { code: compiled, map, warnings } = compileJsxModule(realPath, code, {
+		jsxMode: state.mergedOptions.jsxMode,
+		vapor: state.mergedOptions.vapor ?? false,
+		ssr,
+		sourceMap
+	});
+	for (const warning of warnings) state.logger.warn(`Warning in ${realPath}: ${warning}`);
+	return {
+		code: compiled,
+		map: map ? JSON.parse(map) : null
+	};
+}
 async function transformHook(state, code, id, options) {
 	const pluginVisibleVirtualPath = fromPluginVisibleVirtualId(id);
+	const jsxResult = transformJsxRequest(state, code, id, { ssr: options?.ssr });
+	if (jsxResult !== void 0) return jsxResult;
 	if (!id.startsWith("\0") && !pluginVisibleVirtualPath) return null;
 	const request = classifyVitePluginRequest(id);
 	if (request.isVizeVirtual || request.isMacroVirtualId || pluginVisibleVirtualPath) {
@@ -2009,6 +2097,7 @@ function vize(options = {}) {
 					ssr: options.ssr ?? compilerConfig.ssr ?? false,
 					sourceMap: options.sourceMap ?? compilerConfig.sourceMap,
 					vapor: options.vapor ?? compilerConfig.vapor ?? false,
+					jsxMode: options.jsxMode ?? compilerConfig.jsxMode,
 					customRenderer: options.customRenderer ?? compilerConfig.customRenderer ?? false,
 					templateSyntax,
 					compatibility,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vizejs/vite-plugin",
-  "version": "0.204.0",
+  "version": "0.210.0",
   "description": "High-performance native Vite plugin for Vue SFC compilation powered by Vize",
   "keywords": [
     "compiler",
@@ -39,9 +39,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@vizejs/native": "0.204.0",
+    "@vizejs/native": "0.210.0",
     "tinyglobby": "0.2.16",
-    "vize": "0.204.0"
+    "vize": "0.210.0"
   },
   "devDependencies": {
     "@types/node": "25.9.2",