diff --git a/packages/uni-app-vite/src/plugins/easycom.ts b/packages/uni-app-vite/src/plugins/easycom.ts index 907b0fca02788eca6c624848be6511f4b95627ad..9fe3774bdf5f309c9dda7ee332b95235e94ea9c8 100644 --- a/packages/uni-app-vite/src/plugins/easycom.ts +++ b/packages/uni-app-vite/src/plugins/easycom.ts @@ -3,11 +3,11 @@ import { Plugin } from 'vite' import { createFilter, FilterPattern } from '@rollup/pluginutils' import { - EXTNAME_VUE, parseVueRequest, matchEasycom, addImportDeclaration, genResolveEasycomCode, + EXTNAME_VUE_TEMPLATE, } from '@dcloudio/uni-cli-shared' interface UniEasycomPluginOptions { @@ -26,7 +26,7 @@ export function uniEasycomPlugin(options: UniEasycomPluginOptions): Plugin { const { filename, query } = parseVueRequest(id) if ( query.type !== 'template' && - (query.vue || !EXTNAME_VUE.includes(path.extname(filename))) + (query.vue || !EXTNAME_VUE_TEMPLATE.includes(path.extname(filename))) ) { return } diff --git a/packages/uni-cli-shared/package.json b/packages/uni-cli-shared/package.json index 75afef457abafe6e9b6abc901190aaca5017e79d..a5c606b64a42572f15b201c7f49dd4b6a571cad7 100644 --- a/packages/uni-cli-shared/package.json +++ b/packages/uni-cli-shared/package.json @@ -18,6 +18,7 @@ "url": "https://github.com/dcloudio/uni-app/issues" }, "dependencies": { + "@babel/core": "^7.16.5", "@babel/parser": "^7.16.4", "@babel/types": "^7.16.0", "@dcloudio/uni-i18n": "3.0.0-alpha-3030420211227001", diff --git a/packages/uni-cli-shared/src/constants.ts b/packages/uni-cli-shared/src/constants.ts index 4aef7f33be9b9093a9a1e43122f07829d2c66caa..4393f2c748cfde5a38e16d05535b5df712b31f89 100644 --- a/packages/uni-cli-shared/src/constants.ts +++ b/packages/uni-cli-shared/src/constants.ts @@ -2,6 +2,7 @@ export const PUBLIC_DIR = 'static' export const EXTNAME_JS = ['.js', '.ts', '.jsx', '.tsx'] export const EXTNAME_TS = ['.ts', '.tsx'] export const EXTNAME_VUE = ['.vue', '.nvue'] +export const EXTNAME_VUE_TEMPLATE = ['.vue', '.nvue', '.jsx', '.tsx'] export const EXTNAME_VUE_RE = /\.(vue|nvue)$/ export const EXTNAME_JS_RE = /\.[jt]sx?$/ export const EXTNAME_TS_RE = /\.tsx?$/ diff --git a/packages/uni-cli-shared/src/easycom.ts b/packages/uni-cli-shared/src/easycom.ts index 487dd6b82e849a82749aa9773fd5d7fc9c212d36..e18db343499e100ba6d77af7134c331ae51744af 100644 --- a/packages/uni-cli-shared/src/easycom.ts +++ b/packages/uni-cli-shared/src/easycom.ts @@ -70,7 +70,10 @@ export function initEasycoms( const res = { options, filter: createFilter( - ['components/*/*.vue', 'uni_modules/*/components/*/*.vue'], + [ + 'components/*/*.(vue|jsx|tsx)', + 'uni_modules/*/components/*/*.(vue|jsx|tsx)', + ], [], { resolve: inputDir, @@ -110,7 +113,7 @@ function initEasycom({ dirs, rootDir, custom, - extensions = ['.vue'], + extensions = ['.vue', '.jsx', '.tsx'], }: EasycomOption) { clearEasycom() const easycomsObj = Object.create(null) diff --git a/packages/uni-cli-shared/src/vite/index.ts b/packages/uni-cli-shared/src/vite/index.ts index 8686fbd2e162cc92a4ba8e49f0c5d263528cf914..8d8497fbd17e2471763faea32ff48fac7ab762ed 100644 --- a/packages/uni-cli-shared/src/vite/index.ts +++ b/packages/uni-cli-shared/src/vite/index.ts @@ -24,6 +24,9 @@ interface UniVitePluginUniOptions { directiveTransforms?: CompilerOptions['directiveTransforms'] nodeTransforms?: CompilerOptions['nodeTransforms'] } + jsxOptions?: { + babelPlugins?: any[] + } copyOptions?: CopyOptions | (() => CopyOptions) } export interface UniVitePlugin extends Plugin { diff --git a/packages/uni-cli-shared/src/vue/babel.ts b/packages/uni-cli-shared/src/vue/babel.ts new file mode 100644 index 0000000000000000000000000000000000000000..ef73bf4bba31bbf446224a39d193d00fb9a28eca --- /dev/null +++ b/packages/uni-cli-shared/src/vue/babel.ts @@ -0,0 +1,16 @@ +import * as BabelCore from '@babel/core' +import type { PluginObj } from '@babel/core' +import { isBuiltInComponent } from '@dcloudio/uni-shared' + +export function transformUniH5Jsx({ types }: typeof BabelCore): PluginObj { + return { + name: 'babel-plugin-uni-h5-jsx', + visitor: { + JSXOpeningElement({ node: { name } }) { + if (types.isJSXIdentifier(name) && isBuiltInComponent(name.name)) { + name.name = 'v-uni-' + name.name + } + }, + }, + } +} diff --git a/packages/uni-cli-shared/src/vue/index.ts b/packages/uni-cli-shared/src/vue/index.ts index ac69f183c8457094689cb07c40a7df41972c4f67..216aa3a1b7dd5bfd93e083e8cc411b3439f35c5c 100644 --- a/packages/uni-cli-shared/src/vue/index.ts +++ b/packages/uni-cli-shared/src/vue/index.ts @@ -1,3 +1,4 @@ export * from './transforms' export * from './utils' +export { transformUniH5Jsx } from './babel' export { isExternalUrl } from './transforms/templateUtils' diff --git a/packages/uni-h5-vite/src/plugin/uni.ts b/packages/uni-h5-vite/src/plugin/uni.ts index 0b896ac3102721dce9cbf07205d0651ff5325b4c..15e4f348d8324634aa6d83ecd5e2e51e3142f1a2 100644 --- a/packages/uni-h5-vite/src/plugin/uni.ts +++ b/packages/uni-h5-vite/src/plugin/uni.ts @@ -3,6 +3,7 @@ import { transformMatchMedia, transformPageHead, transformTapToClick, + transformUniH5Jsx, UniVitePlugin, } from '@dcloudio/uni-cli-shared' import { isH5NativeTag, isH5CustomElement } from '@dcloudio/uni-shared' @@ -25,5 +26,8 @@ export function createUni(): UniVitePlugin['uni'] { assets: ['hybrid/html'], }, compilerOptions, + jsxOptions: { + babelPlugins: [transformUniH5Jsx], + }, } } diff --git a/packages/uni-h5-vite/src/plugins/easycom.ts b/packages/uni-h5-vite/src/plugins/easycom.ts index 04b10598740d88c92c1ca064807b7f890c9fabd3..587c06dd52969f4eb5027a5fe40115b811e4d196 100644 --- a/packages/uni-h5-vite/src/plugins/easycom.ts +++ b/packages/uni-h5-vite/src/plugins/easycom.ts @@ -5,7 +5,6 @@ import { camelize, capitalize } from '@vue/shared' import { COMPONENT_PREFIX, isBuiltInComponent } from '@dcloudio/uni-shared' import { - EXTNAME_VUE, H5_COMPONENTS_STYLE_PATH, BASE_COMPONENTS_STYLE_PATH, COMPONENT_DEPS_CSS, @@ -15,6 +14,7 @@ import { matchEasycom, addImportDeclaration, genResolveEasycomCode, + EXTNAME_VUE_TEMPLATE, } from '@dcloudio/uni-cli-shared' const H5_COMPONENTS_PATH = '@dcloudio/uni-h5' @@ -71,7 +71,7 @@ export function uniEasycomPlugin(options: UniEasycomPluginOptions): Plugin { const { filename, query } = parseVueRequest(id) if ( query.type !== 'template' && - (query.vue || !EXTNAME_VUE.includes(path.extname(filename))) + (query.vue || !EXTNAME_VUE_TEMPLATE.includes(path.extname(filename))) ) { return } diff --git a/packages/vite-plugin-uni/src/index.ts b/packages/vite-plugin-uni/src/index.ts index b588ee9a80f2dc3b6f650065c13f139c02c07f85..53220d77eddc118d14e1a42c2f6860905f297021 100644 --- a/packages/vite-plugin-uni/src/index.ts +++ b/packages/vite-plugin-uni/src/index.ts @@ -46,7 +46,7 @@ export interface VitePluginUniOptions { inputDir?: string outputDir?: string vueOptions?: VueOptions - vueJsxOptions?: VueJSXPluginOptions | boolean + vueJsxOptions?: (VueJSXPluginOptions & { babelPlugins?: any[] }) | boolean viteLegacyOptions?: ViteLegacyOptions | false } export interface VitePluginUniResolvedOptions extends VitePluginUniOptions { @@ -104,7 +104,11 @@ export default function uniPlugin( if (options.vueJsxOptions) { plugins.push( vueJsxPlugin( - initPluginVueJsxOptions(options, uniPluginOptions.compilerOptions) + initPluginVueJsxOptions( + options, + uniPluginOptions.compilerOptions, + uniPluginOptions.jsxOptions + ) ) ) } diff --git a/packages/vite-plugin-uni/src/utils/plugin.ts b/packages/vite-plugin-uni/src/utils/plugin.ts index 7ce7c5ce19a558107a2444cdf6da13165cd38d6e..024ed7f6c8f92116eb0b5c570ebe07771d4341db 100644 --- a/packages/vite-plugin-uni/src/utils/plugin.ts +++ b/packages/vite-plugin-uni/src/utils/plugin.ts @@ -24,12 +24,14 @@ export function initPluginUniOptions(UniVitePlugins: UniVitePlugin[]) { const targets: UniViteCopyPluginTarget[] = [] const transformEvent: Record = Object.create(null) const compilerOptions: Required['uni']['compilerOptions'] = {} + const jsxOptions: Required['uni']['jsxOptions'] = {} let compiler: TemplateCompiler | undefined UniVitePlugins.forEach((plugin) => { const { compiler: pluginTemplateCompiler, copyOptions: pluginCopyOptions, compilerOptions: pluginCompilerOptions, + jsxOptions: pluginJsxOptions, } = plugin.uni || {} if (pluginTemplateCompiler) { compiler = pluginTemplateCompiler @@ -37,6 +39,9 @@ export function initPluginUniOptions(UniVitePlugins: UniVitePlugin[]) { if (pluginCompilerOptions) { extend(compilerOptions, pluginCompilerOptions) } + if (pluginJsxOptions) { + extend(jsxOptions, pluginJsxOptions) + } if (pluginCopyOptions) { let copyOptions = pluginCopyOptions as CopyOptions if (isFunction(pluginCopyOptions)) { @@ -58,6 +63,7 @@ export function initPluginUniOptions(UniVitePlugins: UniVitePlugin[]) { }, transformEvent, compilerOptions, + jsxOptions, } } diff --git a/packages/vite-plugin-uni/src/vue/options.ts b/packages/vite-plugin-uni/src/vue/options.ts index 18b1c4d1b5d3c740f787dd778d24df7043b10ae9..0b8bcb9180e3886e12e77e1d938ac5576b293036 100644 --- a/packages/vite-plugin-uni/src/vue/options.ts +++ b/packages/vite-plugin-uni/src/vue/options.ts @@ -106,7 +106,8 @@ export function initPluginVueJsxOptions( options: VitePluginUniResolvedOptions, { isCustomElement, - }: Required['uni']>['compilerOptions'] + }: Required['uni']>['compilerOptions'], + jsxOptions: Required['uni']>['jsxOptions'] ) { const vueJsxOptions = isPlainObject(options.vueJsxOptions) ? options.vueJsxOptions @@ -115,6 +116,13 @@ export function initPluginVueJsxOptions( vueJsxOptions.optimize = true } vueJsxOptions.isCustomElement = isCustomElement as (tag: string) => boolean + if (!vueJsxOptions.babelPlugins) { + vueJsxOptions.babelPlugins = [] + } + if (isArray(jsxOptions.babelPlugins)) { + vueJsxOptions.babelPlugins.push(...jsxOptions.babelPlugins) + } + return vueJsxOptions } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7f4a6566e6540083c49ad58312445d1259431155..daa8507ae9b0c47946b585a1619e6bdc43a5051e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -353,6 +353,7 @@ importers: packages/uni-cli-shared: specifiers: + '@babel/core': ^7.16.5 '@babel/parser': ^7.16.4 '@babel/types': ^7.16.0 '@dcloudio/uni-i18n': 3.0.0-alpha-3030420211227001 @@ -395,7 +396,8 @@ importers: tapable: ^2.2.0 xregexp: 3.1.0 dependencies: - '@babel/parser': 7.16.4 + '@babel/core': 7.16.5 + '@babel/parser': 7.16.6 '@babel/types': 7.16.0 '@dcloudio/uni-i18n': link:../uni-i18n '@dcloudio/uni-shared': link:../uni-shared @@ -3242,7 +3244,7 @@ packages: /@vue/compiler-core/3.2.26: resolution: {integrity: sha512-N5XNBobZbaASdzY9Lga2D9Lul5vdCIOXvUMd6ThcN8zgqQhPKfCV+wfAJNNJKQkSHudnYRO2gEB+lp0iN3g2Tw==} dependencies: - '@babel/parser': 7.16.4 + '@babel/parser': 7.16.6 '@vue/shared': 3.2.26 estree-walker: 2.0.2 source-map: 0.6.1 @@ -3256,7 +3258,7 @@ packages: /@vue/compiler-sfc/3.2.26: resolution: {integrity: sha512-ePpnfktV90UcLdsDQUh2JdiTuhV0Skv2iYXxfNMOK/F3Q+2BO0AulcVcfoksOpTJGmhhfosWfMyEaEf0UaWpIw==} dependencies: - '@babel/parser': 7.16.4 + '@babel/parser': 7.16.6 '@vue/compiler-core': 3.2.26 '@vue/compiler-dom': 3.2.26 '@vue/compiler-ssr': 3.2.26 @@ -3279,7 +3281,7 @@ packages: /@vue/reactivity-transform/3.2.26: resolution: {integrity: sha512-XKMyuCmzNA7nvFlYhdKwD78rcnmPb7q46uoR00zkX6yZrUmcCQ5OikiwUEVbvNhL5hBJuvbSO95jB5zkUon+eQ==} dependencies: - '@babel/parser': 7.16.4 + '@babel/parser': 7.16.6 '@vue/compiler-core': 3.2.26 '@vue/shared': 3.2.26 estree-walker: 2.0.2