Support Vue JSX (#4897)

Co-authored-by: Dan Jutan <danjutan@gmail.com>

1 files changed, 35 insertions, 4 deletions

diff --git a/packages/integrations/vue/src/index.ts b/packages/integrations/vue/src/index.ts
index 24df127d0..6ab63562e 100644
--- a/packages/integrations/vue/src/index.ts
+++ b/packages/integrations/vue/src/index.ts
@@ -1,8 +1,13 @@
-import type { Options } from '@vitejs/plugin-vue';
+import type { Options as VueOptions } from '@vitejs/plugin-vue';
+import type { Options as VueJsxOptions } from '@vitejs/plugin-vue-jsx';
 import vue from '@vitejs/plugin-vue';
 import type { AstroIntegration, AstroRenderer } from 'astro';
 import type { UserConfig } from 'vite';
 
+interface Options extends VueOptions {
+	jsx?: boolean | VueJsxOptions;
+}
+
 function getRenderer(): AstroRenderer {
 	return {
 		name: '@astrojs/vue',
@@ -11,8 +16,23 @@ function getRenderer(): AstroRenderer {
 	};
 }
 
-function getViteConfiguration(options?: Options): UserConfig {
+function getJsxRenderer(): AstroRenderer {
 	return {
+		name: '@astrojs/vue (jsx)',
+		clientEntrypoint: '@astrojs/vue/client.js',
+		serverEntrypoint: '@astrojs/vue/server.js',
+		jsxImportSource: 'vue',
+		jsxTransformOptions: async () => {
+			const jsxPlugin = (await import('@vue/babel-plugin-jsx')).default;
+			return {
+				plugins: [jsxPlugin],
+			};
+		},
+	};
+}
+
+async function getViteConfiguration(options?: Options): Promise<UserConfig> {
+	const config: UserConfig = {
 		optimizeDeps: {
 			include: ['@astrojs/vue/client.js', 'vue'],
 			exclude: ['@astrojs/vue/server.js'],
@@ -23,15 +43,26 @@ function getViteConfiguration(options?: Options): UserConfig {
 			noExternal: ['vueperslides'],
 		},
 	};
+
+	if (options?.jsx) {
+		const vueJsx = (await import('@vitejs/plugin-vue-jsx')).default;
+		const jsxOptions = typeof options.jsx === 'object' ? options.jsx : undefined;
+		config.plugins?.push(vueJsx(jsxOptions));
+	}
+
+	return config;
 }
 
 export default function (options?: Options): AstroIntegration {
 	return {
 		name: '@astrojs/vue',
 		hooks: {
-			'astro:config:setup': ({ addRenderer, updateConfig }) => {
+			'astro:config:setup': async ({ addRenderer, updateConfig }) => {
 				addRenderer(getRenderer());
-				updateConfig({ vite: getViteConfiguration(options) });
+				if (options?.jsx) {
+					addRenderer(getJsxRenderer());
+				}
+				updateConfig({ vite: await getViteConfiguration(options) });
 			},
 		},
 	};