Support Vue JSX (#4897)

Co-authored-by: Dan Jutan <danjutan@gmail.com>
withastro · Sep 29, 2022 · fd9d323 · fd9d323
1 parent 24bad5a
commit fd9d323
Show file tree

Hide file tree

Showing 12 changed files with 329 additions and 5 deletions.
diff --git a/.changeset/honest-melons-walk.md b/.changeset/honest-melons-walk.md
@@ -0,0 +1,6 @@
+---
+'@astrojs/vue': minor
+'astro': patch
+---
+
+Support Vue JSX
diff --git a/packages/astro/src/runtime/server/render/component.ts b/packages/astro/src/runtime/server/render/component.ts
@@ -27,7 +27,7 @@ function guessRenderers(componentUrl?: string): string[] {
 			return ['@astrojs/vue'];
 		case 'jsx':
 		case 'tsx':
-			return ['@astrojs/react', '@astrojs/preact'];
+			return ['@astrojs/react', '@astrojs/preact', '@astrojs/vue (jsx)'];
 		default:
 			return ['@astrojs/react', '@astrojs/preact', '@astrojs/vue', '@astrojs/svelte'];
 	}

diff --git a/packages/astro/test/fixtures/vue-jsx/astro.config.mjs b/packages/astro/test/fixtures/vue-jsx/astro.config.mjs
@@ -0,0 +1,7 @@
+import { defineConfig } from 'astro/config';
+import vue from '@astrojs/vue';
+
+// https://astro.build/config
+export default defineConfig({
+	integrations: [vue({ jsx: true })],
+});
diff --git a/packages/astro/test/fixtures/vue-jsx/package.json b/packages/astro/test/fixtures/vue-jsx/package.json
@@ -0,0 +1,10 @@
+{
+  "name": "@test/vue-jsx",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@astrojs/vue": "workspace:*",
+    "astro": "workspace:*",
+    "vue": "^3.2.39"
+  }
+}
diff --git a/packages/astro/test/fixtures/vue-jsx/src/components/Counter.jsx b/packages/astro/test/fixtures/vue-jsx/src/components/Counter.jsx
@@ -0,0 +1,28 @@
+import { defineComponent, ref } from 'vue';
+
+export default defineComponent({
+  props: {
+    start: {
+      type: String,
+      required: true
+    },
+    stepSize: {
+      type: String,
+      default: "1"
+    }
+  },
+  setup(props) {
+    const count = ref(parseInt(props.start))
+    const stepSize = ref(parseInt(props.stepSize))
+    const add = () => (count.value = count.value + stepSize.value);
+    const subtract = () => (count.value = count.value - stepSize.value);
+    return () => (
+      <div class="counter">
+        <h1><slot /></h1>
+        <button onClick={subtract}>-</button>
+        <pre>{count.value}</pre>
+        <button onClick={add}>+</button>
+      </div>
+    )
+  },
+})
diff --git a/packages/astro/test/fixtures/vue-jsx/src/components/Result.vue b/packages/astro/test/fixtures/vue-jsx/src/components/Result.vue
@@ -0,0 +1,15 @@
+<template>
+  <pre>{{ value }}</pre>
+</template>
+
+<script>
+
+export default {
+  props: {
+    value: {
+      type: Number,
+      required: true
+    }
+  }
+}
+</script>
diff --git a/packages/astro/test/fixtures/vue-jsx/src/pages/index.astro b/packages/astro/test/fixtures/vue-jsx/src/pages/index.astro
@@ -0,0 +1,35 @@
+---
+import Counter from '../components/Counter.jsx'
+import Result from '../components/Result.vue'
+---
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width"
+    />
+    <title>Vue component</title>
+    <style>
+      :global(:root) {
+        font-family: system-ui;
+        padding: 1em;
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <Result value={2345}></Result>
+      <Counter start="0">SSR Rendered, No Client</Counter>
+      <Counter start="1" client:load>SSR Rendered, client:load</Counter>
+      <!-- Test island deduplication, i.e. same UID as the component above. -->
+      <Counter start="1" client:load>SSR Rendered, client:load</Counter>
+      <!-- Test island deduplication account for non-render affecting props. -->
+      <Counter start="1" step-size="2" client:load>SSR Rendered, client:load</Counter>
+      <Counter start="10" client:idle>SSR Rendered, client:idle</Counter>
+      <!-- Test that two client:visibles have unique uids -->
+      <Counter start="100" client:visible>SSR Rendered, client:visible</Counter>
+      <Counter start="1000" client:visible>SSR Rendered, client:visible</Counter>
+    </main>
+  </body>
+</html>
diff --git a/packages/astro/test/vue-jsx.test.js b/packages/astro/test/vue-jsx.test.js
@@ -0,0 +1,30 @@
+import { expect } from 'chai';
+import * as cheerio from 'cheerio';
+import { loadFixture } from './test-utils.js';
+
+describe('Vue JSX', () => {
+	let fixture;
+
+	before(async () => {
+		fixture = await loadFixture({
+			root: './fixtures/vue-jsx/',
+		});
+	});
+
+	describe('build', () => {
+		before(async () => {
+			await fixture.build();
+		});
+
+		it('Can load Vue JSX', async () => {
+			const html = await fixture.readFile('/index.html');
+			const $ = cheerio.load(html);
+
+			const allPreValues = $('pre')
+				.toArray()
+				.map((el) => $(el).text());
+
+			expect(allPreValues).to.deep.equal(['2345', '0', '1', '1', '1', '10', '100', '1000']);
+		});
+	});
+});
diff --git a/packages/integrations/vue/README.md b/packages/integrations/vue/README.md
@@ -94,3 +94,40 @@ export default {
   })],
 }
 ```
+
+### jsx
+
+You can use Vue JSX by setting `jsx: true`.
+
+__`astro.config.mjs`__
+
+```js
+import { defineConfig } from 'astro/config';
+import vue from '@astrojs/vue';
+
+export default defineConfig({
+  integrations: [
+    vue({ jsx: true })
+  ],
+});
+```
+
+This will enable rendering for both Vue and Vue JSX components. To customize the Vue JSX compiler, pass an options object instead of a boolean. See the `@vitejs/plugin-vue-jsx` [docs](https://github.com/vitejs/vite/tree/main/packages/plugin-vue-jsx) for more details.
+
+__`astro.config.mjs`__
+
+```js
+import { defineConfig } from 'astro/config';
+import vue from '@astrojs/vue';
+
+export default defineConfig({
+  integrations: [
+    vue({
+      jsx: {
+        // treat any tag that starts with ion- as custom elements
+        isCustomElement: tag => tag.startsWith('ion-')
+      }
+    })
+  ],
+});
+```
diff --git a/packages/integrations/vue/package.json b/packages/integrations/vue/package.json
@@ -34,6 +34,8 @@
   },
   "dependencies": {
     "@vitejs/plugin-vue": "^3.0.0",
+    "@vitejs/plugin-vue-jsx": "^2.0.1",
+    "@vue/babel-plugin-jsx": "^1.1.1",
     "@vue/compiler-sfc": "^3.2.39"
   },
   "devDependencies": {

diff --git 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) });
 			},
 		},
 	};