feat: vue-jsx support

packages/playground/tsconfig.json

@@ -5,6 +5,7 @@
     "outDir": "dist",
     "allowJs": true,
     "esModuleInterop": true,
-    "baseUrl": "."
+    "baseUrl": ".",
+    "jsx": "preserve"
   }
 }

packages/playground/vue-jsx/Comp.tsx

@@ -0,0 +1,14 @@
+import { defineComponent, ref } from 'vue'
+
+const Default = defineComponent(() => {
+  const count = ref(3)
+  const inc = () => count.value++
+
+  return () => (
+    <button class="default-tsx" onClick={inc}>
+      default tsx {count.value}
+    </button>
+  )
+})
+
+export default Default

packages/playground/vue-jsx/Comps.jsx

@@ -0,0 +1,35 @@
+import { defineComponent, ref } from 'vue'
+
+export const Named = defineComponent(() => {
+  const count = ref(0)
+  const inc = () => count.value++
+
+  return () => (
+    <button class="named" onClick={inc}>
+      named {count.value}
+    </button>
+  )
+})
+
+const NamedSpec = defineComponent(() => {
+  const count = ref(1)
+  const inc = () => count.value++
+
+  return () => (
+    <button class="named-specifier" onClick={inc}>
+      named specifier {count.value}
+    </button>
+  )
+})
+export { NamedSpec }
+
+export default defineComponent(() => {
+  const count = ref(2)
+  const inc = () => count.value++
+
+  return () => (
+    <button class="default" onClick={inc}>
+      default {count.value}
+    </button>
+  )
+})

packages/playground/vue-jsx/__tests__/vue-jsx.spec.ts

@@ -0,0 +1,74 @@
+import { editFile, isBuild, untilUpdated } from '../../testUtils'
+
+test('should render', async () => {
+  expect(await page.textContent('.named')).toMatch('0')
+  expect(await page.textContent('.named-specifier')).toMatch('1')
+  expect(await page.textContent('.default')).toMatch('2')
+  expect(await page.textContent('.default-tsx')).toMatch('3')
+})
+
+test('should update', async () => {
+  await page.click('.named')
+  expect(await page.textContent('.named')).toMatch('1')
+  await page.click('.named-specifier')
+  expect(await page.textContent('.named-specifier')).toMatch('2')
+  await page.click('.default')
+  expect(await page.textContent('.default')).toMatch('3')
+  await page.click('.default-tsx')
+  expect(await page.textContent('.default-tsx')).toMatch('4')
+})
+
+if (!isBuild) {
+  test('hmr: named export', async () => {
+    editFile('Comps.jsx', (code) =>
+      code.replace('named {count', 'named updated {count')
+    )
+    await untilUpdated(() => page.textContent('.named'), 'named updated 0')
+
+    // should not affect other components on the page
+    expect(await page.textContent('.named-specifier')).toMatch('2')
+    expect(await page.textContent('.default')).toMatch('3')
+    expect(await page.textContent('.default-tsx')).toMatch('4')
+  })
+
+  test('hmr: named export via specifier', async () => {
+    editFile('Comps.jsx', (code) =>
+      code.replace('named specifier {count', 'named specifier updated {count')
+    )
+    await untilUpdated(
+      () => page.textContent('.named-specifier'),
+      'named specifier updated 1'
+    )
+
+    // should not affect other components on the page
+    expect(await page.textContent('.default')).toMatch('3')
+    expect(await page.textContent('.default-tsx')).toMatch('4')
+  })
+
+  test('hmr: default export', async () => {
+    editFile('Comps.jsx', (code) =>
+      code.replace('default {count', 'default updated {count')
+    )
+    await untilUpdated(() => page.textContent('.default'), 'default updated 2')
+
+    // should not affect other components on the page
+    expect(await page.textContent('.default-tsx')).toMatch('4')
+  })
+
+  test('hmr: named export via specifier', async () => {
+    // update another component
+    await page.click('.named')
+    expect(await page.textContent('.named')).toMatch('1')
+
+    editFile('Comp.tsx', (code) =>
+      code.replace('default tsx {count', 'default tsx updated {count')
+    )
+    await untilUpdated(
+      () => page.textContent('.default-tsx'),
+      'default tsx updated 3'
+    )
+
+    // should not affect other components on the page
+    expect(await page.textContent('.named')).toMatch('1')
+  })
+}

packages/playground/vue-jsx/index.html

@@ -0,0 +1,2 @@
+<div id="app"></div>
+<script type="module" src="./main.jsx"></script>

packages/playground/vue-jsx/main.jsx

@@ -0,0 +1,16 @@
+import { createApp } from 'vue'
+import { Named, NamedSpec, default as Default } from './Comps'
+import { default as TsxDefault } from './Comp'
+
+function App() {
+  return (
+    <>
+      <Named />
+      <NamedSpec />
+      <Default />
+      <TsxDefault />
+    </>
+  )
+}
+
+createApp(App).mount('#app')

packages/playground/vue-jsx/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "test-vue-jsx",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "debug": "node --inspect-brk ../../vite/bin/vite"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue-jsx": "^1.0.0"
+  }
+}

packages/playground/vue-jsx/vite.config.js

@@ -0,0 +1,8 @@
+const vueJsxPlugin = require('@vitejs/plugin-vue-jsx')
+
+/**
+ * @type {import('vite').UserConfig}
+ */
+module.exports = {
+  plugins: [vueJsxPlugin()]
+}

packages/plugin-react-refresh/index.d.ts

@@ -1,5 +1,5 @@
 import { Plugin } from 'vite'
 
-declare function reactRefresh(): Plugin
+declare function createPlugin(): Plugin
 
-export = reactRefresh
+export = createPlugin

packages/plugin-react-refresh/index.js

@@ -24,7 +24,7 @@ export default exports
 /**
  * Transform plugin for transforming and injecting per-file refresh code.
  *
- * @type { () => import('vite').Plugin }
+ * @returns {import('vite').Plugin}
  */
 module.exports = function reactRefreshPlugin() {
   let shouldSkip = false

packages/plugin-vue-jsx/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019-present, Yuxi (Evan) You and Vite contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/plugin-vue-jsx/README.md

@@ -0,0 +1,14 @@
+# @vitejs/plugin-vue-jsx
+
+Provides optimized Vue 3 JSX support via [@vue/babel-plugin-jsx](https://github.com/vuejs/jsx-next).
+
+```js
+// vite.config.js
+import vueJsx from '@vitejs/plugin-vue-jsx'
+
+export default {
+  plugins: [vueJsx({
+    // options are passed on to @vue/babel-plugin-jsx
+  })]
+}
+```

packages/plugin-vue-jsx/index.d.ts

@@ -0,0 +1,13 @@
+import { Plugin } from 'vite'
+
+// https://github.com/vuejs/jsx-next/tree/dev/packages/babel-plugin-jsx#options
+export interface Options {
+  transformOn?: boolean
+  optimize?: boolean
+  isCustomElement?: (tag: string) => boolean
+  mergeProps?: boolean
+}
+
+declare function createPlugin(options?: Options): Plugin
+
+export default createPlugin