feat: add extensions option to vue-jsx plugin

vitejs · Feb 9, 2021 · 079b446 · 079b446
1 parent 0f692ce
commit 079b446
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 4 deletions.
diff --git a/packages/playground/vue-jsx/OtherExt.tesx b/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
diff --git a/packages/playground/vue-jsx/__tests__/vue-jsx.spec.ts b/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 () => {

diff --git a/packages/playground/vue-jsx/main.jsx b/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 />
     </>
   )
 }

diff --git a/packages/playground/vue-jsx/vite.config.js b/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({
+      extensions: ['.jsx', '.tsx', '.tesx']
+    })
+  ],
   build: {
     // to make tests faster
     minify: false

diff --git a/packages/plugin-vue-jsx/index.js b/packages/plugin-vue-jsx/index.js
@@ -4,14 +4,26 @@ const jsx = require('@vue/babel-plugin-jsx')
 const importMeta = require('@babel/plugin-syntax-import-meta')
 const hash = require('hash-sum')
 
+const defaultExtensions = ['.jsx', '.tsx']
+
+const regExpCharactersRegExp = /[\\^$.*+?()[\]{}|]/g
+const escapeRegExpCharacters = (str) =>
+  str.replace(regExpCharactersRegExp, '\\$&')
+
 /**
- * @param {import('@vue/babel-plugin-jsx').VueJSXPluginOptions} options
+ * @param {import('@vue/babel-plugin-jsx').VueJSXPluginOptions & {extensions?: string[]}} options
  * @returns {import('vite').Plugin}
  */
 function vueJsxPlugin(options = {}) {
   let needHmr = false
   let needSourceMap = true
 
+  const { extensions = defaultExtensions, ...babelPluginOptions } = options
+
+  const extensionReg = new RegExp(
+    `(${extensions.map(escapeRegExpCharacters).join('|')})$`
+  )
+
   return {
     name: 'vue-jsx',
 
@@ -36,8 +48,8 @@ function vueJsxPlugin(options = {}) {
     },
 
     transform(code, id, ssr) {
-      if (/\.[jt]sx$/.test(id)) {
-        const plugins = [importMeta, [jsx, options]]
+      if (extensionReg.test(id)) {
+        const plugins = [importMeta, [jsx, babelPluginOptions]]
         if (id.endsWith('.tsx')) {
           plugins.push([
             require('@babel/plugin-transform-typescript'),