Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add extensions option to vue-jsx plugin
Browse files Browse the repository at this point in the history
Jokcy committed Feb 9, 2021

Verified

This commit was signed with the committer’s verified signature. The key has expired.
danielleadams Danielle Adams
1 parent 0f692ce commit 079b446
Showing 5 changed files with 32 additions and 4 deletions.
9 changes: 9 additions & 0 deletions packages/playground/vue-jsx/OtherExt.tesx
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { defineComponent } from 'vue'

const Default = defineComponent(() => {
return () => (
<p class="other-ext">Other Ext</p>
)
})

export default Default
1 change: 1 addition & 0 deletions packages/playground/vue-jsx/__tests__/vue-jsx.spec.ts
Original file line number Diff line number Diff line change
@@ -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 () => {
2 changes: 2 additions & 0 deletions packages/playground/vue-jsx/main.jsx
Original file line number Diff line number Diff line change
@@ -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 />
</>
)
}
6 changes: 5 additions & 1 deletion packages/playground/vue-jsx/vite.config.js
Original file line number Diff line number Diff line change
@@ -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
18 changes: 15 additions & 3 deletions packages/plugin-vue-jsx/index.js
Original file line number Diff line number Diff line change
@@ -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'),

0 comments on commit 079b446

Please sign in to comment.