feat: include/exclude options for vue-jsx plugin (#1953)

Author: Jokcy

packages/playground/vue-jsx/OtherExt.tesx

@@ -0,0 +1,9 @@
+import { defineComponent } from 'vue'
+
+const Default = defineComponent(() => {
+  return () => (
+    <p class="other-ext">Other Ext</p>
+  )
+})
+
+export default Default

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

@@ -5,6 +5,7 @@ test('should render', async () => {
   expect(await page.textContent('.named-specifier')).toMatch('1')
   expect(await page.textContent('.default')).toMatch('2')
   expect(await page.textContent('.default-tsx')).toMatch('3')
+  expect(await page.textContent('.other-ext')).toMatch('Other Ext')
 })
 
 test('should update', async () => {

packages/playground/vue-jsx/main.jsx

@@ -1,6 +1,7 @@
 import { createApp } from 'vue'
 import { Named, NamedSpec, default as Default } from './Comps'
 import { default as TsxDefault } from './Comp'
+import OtherExt from './OtherExt.tesx'
 
 function App() {
   return (
@@ -9,6 +10,7 @@ function App() {
       <NamedSpec />
       <Default />
       <TsxDefault />
+      <OtherExt />
     </>
   )
 }

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

@@ -4,7 +4,11 @@ const vueJsxPlugin = require('@vitejs/plugin-vue-jsx')
  * @type {import('vite').UserConfig}
  */
 module.exports = {
-  plugins: [vueJsxPlugin()],
+  plugins: [
+    vueJsxPlugin({
+      include: [/\.tesx$/, /\.[jt]sx$/]
+    })
+  ],
   build: {
     // to make tests faster
     minify: false

packages/plugin-vue-jsx/index.js

@@ -2,6 +2,7 @@
 const babel = require('@babel/core')
 const jsx = require('@vue/babel-plugin-jsx')
 const importMeta = require('@babel/plugin-syntax-import-meta')
+const { createFilter } = require('@rollup/pluginutils')
 const hash = require('hash-sum')
 
 const ssrRegisterHelperId = '/__vue-jsx-ssr-register-helper'
@@ -28,7 +29,13 @@ function ssrRegisterHelper(comp, filename) {
 }
 
 /**
- * @param {import('@vue/babel-plugin-jsx').VueJSXPluginOptions} options
+ * @typedef { import('@rollup/pluginutils').FilterPattern} FilterPattern
+ * @typedef { { include?: FilterPattern, exclude?: FilterPattern } } CommonOtions
+ */
+
+/**
+ *
+ * @param {import('@vue/babel-plugin-jsx').VueJSXPluginOptions & CommonOtions} options
  * @returns {import('vite').Plugin}
  */
 function vueJsxPlugin(options = {}) {
@@ -71,8 +78,12 @@ function vueJsxPlugin(options = {}) {
     },
 
     transform(code, id, ssr) {
-      if (/\.[jt]sx$/.test(id)) {
-        const plugins = [importMeta, [jsx, options]]
+      const { include, exclude, ...babelPluginOptions } = options
+
+      const filter = createFilter(include || /\.[jt]sx$/, exclude)
+
+      if (filter(id)) {
+        const plugins = [importMeta, [jsx, babelPluginOptions]]
         if (id.endsWith('.tsx')) {
           plugins.push([
             require('@babel/plugin-transform-typescript'),

packages/plugin-vue-jsx/package.json

@@ -29,6 +29,7 @@
     "@babel/core": "^7.12.10",
     "@babel/plugin-syntax-import-meta": "^7.10.4",
     "@babel/plugin-transform-typescript": "^7.12.1",
+    "@rollup/pluginutils": "^4.1.0",
     "@vue/babel-plugin-jsx": "^1.0.3",
     "hash-sum": "^2.0.0"
   }