fix(plugin-vue-jsx): support ssr

close #1939
vitejs · Feb 8, 2021 · 30e92a1 · 30e92a1
1 parent 9066f27
commit 30e92a1
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 5 deletions.
diff --git a/packages/playground/ssr-vue/__tests__/ssr-vue.spec.ts b/packages/playground/ssr-vue/__tests__/ssr-vue.spec.ts
@@ -80,6 +80,10 @@ test('asset', async () => {
   )
 })
 
+test('jsx', async () => {
+  expect(await page.textContent('.jsx')).toMatch('from JSX')
+})
+
 test('hydration', async () => {
   expect(await page.textContent('button')).toMatch('0')
   await page.click('button')

diff --git a/packages/playground/ssr-vue/src/components/Foo.jsx b/packages/playground/ssr-vue/src/components/Foo.jsx
@@ -0,0 +1,9 @@
+import { defineComponent } from 'vue'
+
+// named exports w/ variable declaration: ok
+export const Foo = defineComponent({
+  name: 'foo',
+  setup() {
+    return () => <div class="jsx">from JSX</div>
+  }
+})
diff --git a/packages/playground/ssr-vue/src/pages/Home.vue b/packages/playground/ssr-vue/src/pages/Home.vue
@@ -1,13 +1,15 @@
 <template>
   <h1>Home</h1>
   <p>
-    <img src="../assets/logo.png" alt="logo">
+    <img src="../assets/logo.png" alt="logo" />
   </p>
   <button @click="state.count++">count is: {{ state.count }}</button>
+  <Foo/>
 </template>
 
 <script setup>
 import { reactive } from 'vue'
+import { Foo } from '../components/Foo'
 
 const state = reactive({ count: 0 })
 </script>

diff --git a/packages/playground/ssr-vue/vite.config.js b/packages/playground/ssr-vue/vite.config.js
@@ -1,10 +1,11 @@
 const vuePlugin = require('@vitejs/plugin-vue')
+const vueJsx = require('@vitejs/plugin-vue-jsx')
 
 /**
  * @type {import('vite').UserConfig}
  */
 module.exports = {
-  plugins: [vuePlugin()],
+  plugins: [vuePlugin(), vueJsx()],
   build: {
     minify: false
   }

diff --git a/packages/plugin-vue-jsx/index.js b/packages/plugin-vue-jsx/index.js
@@ -5,7 +5,7 @@ const importMeta = require('@babel/plugin-syntax-import-meta')
 const hash = require('hash-sum')
 
 /**
- * @param {import('.').Options} options
+ * @param {import('@vue/babel-plugin-jsx').VueJSXPluginOptions} options
  * @returns {import('vite').Plugin}
  */
 function vueJsxPlugin(options = {}) {
@@ -35,7 +35,7 @@ function vueJsxPlugin(options = {}) {
       needSourceMap = config.command === 'serve' || !!config.build.sourcemap
     },
 
-    transform(code, id) {
+    transform(code, id, ssr) {
       if (/\.[jt]sx$/.test(id)) {
         const plugins = [importMeta, [jsx, options]]
         if (id.endsWith('.tsx')) {
@@ -53,7 +53,7 @@ function vueJsxPlugin(options = {}) {
           sourceFileName: id
         })
 
-        if (!needHmr) {
+        if (ssr || !needHmr) {
           return {
             code: result.code,
             map: result.map