diff --git a/packages/uni-app-vite/src/plugin/uni/index.ts b/packages/uni-app-vite/src/plugin/uni/index.ts index afbfee8efb7f2b5a15fdbeb6589aa450cb6cd17c..6bbfbd6fefe7c62f6ab8b70fc44e5700114076cf 100644 --- a/packages/uni-app-vite/src/plugin/uni/index.ts +++ b/packages/uni-app-vite/src/plugin/uni/index.ts @@ -4,6 +4,8 @@ import { UniVitePlugin, initI18nOptions, transformPageHead, + transformMatchMedia, + transformTapToClick, } from '@dcloudio/uni-cli-shared' export function uniOptions(): UniVitePlugin['uni'] { @@ -32,10 +34,11 @@ export function uniOptions(): UniVitePlugin['uni'] { compilerOptions: { isNativeTag, isCustomElement, - nodeTransforms: [transformPageHead], - }, - transformEvent: { - tap: 'click', + nodeTransforms: [ + transformTapToClick, + transformMatchMedia, + transformPageHead, + ], }, } } diff --git a/packages/uni-cli-shared/src/vite/index.ts b/packages/uni-cli-shared/src/vite/index.ts index ef8f157366ee5d7fddf9e19b2dc5933dff90ef90..6d5b5ddc331b2fe940d965364cde9861788111d8 100644 --- a/packages/uni-cli-shared/src/vite/index.ts +++ b/packages/uni-cli-shared/src/vite/index.ts @@ -23,7 +23,6 @@ interface UniVitePluginUniOptions { directiveTransforms?: CompilerOptions['directiveTransforms'] nodeTransforms?: CompilerOptions['nodeTransforms'] } - transformEvent?: Record copyOptions?: CopyOptions | (() => CopyOptions) } export interface UniVitePlugin extends Plugin { diff --git a/packages/uni-cli-shared/src/vue/transforms/index.ts b/packages/uni-cli-shared/src/vue/transforms/index.ts index a0bca40e19b6083b6c4eb2918a51883f67a95ce2..26b4ad4f97e9379995a5051a90c885c7e0a0cfd1 100644 --- a/packages/uni-cli-shared/src/vue/transforms/index.ts +++ b/packages/uni-cli-shared/src/vue/transforms/index.ts @@ -1,3 +1,21 @@ +import { createTransformTag } from './transformTag' +import { createTransformEvent } from './transformEvent' +import { createTransformComponentLink } from './transformComponent' +import { COMPONENT_BIND_LINK } from '../../mp/constants' + export * from './transformRef' export * from './transformPageHead' export * from './transformComponent' +export * from './transformEvent' +export * from './transformTag' + +export const transformMatchMedia = createTransformTag({ + 'match-media': 'uni-match-media', +}) + +export const transformTapToClick = createTransformEvent({ + tap: 'click', +}) + +export const transformComponentLink = + createTransformComponentLink(COMPONENT_BIND_LINK) diff --git a/packages/vite-plugin-uni/src/vue/transforms/transformEvent.ts b/packages/uni-cli-shared/src/vue/transforms/transformEvent.ts similarity index 66% rename from packages/vite-plugin-uni/src/vue/transforms/transformEvent.ts rename to packages/uni-cli-shared/src/vue/transforms/transformEvent.ts index 376400f7c3cdd203f0209f26aa0d9acbd9732242..c982b0c610a2aef31570479e00b8f6d0b24259ff 100644 --- a/packages/vite-plugin-uni/src/vue/transforms/transformEvent.ts +++ b/packages/uni-cli-shared/src/vue/transforms/transformEvent.ts @@ -1,8 +1,10 @@ import { DirectiveNode, NodeTransform } from '@vue/compiler-core' -import { isElementNode, isSimpleExpressionNode } from '../../utils' +import { isElementNode, isSimpleExpressionNode } from '../../vite/utils/ast' -export function createTransformEvent(options: Record) { - const transformEvent: NodeTransform = (node) => { +export function createTransformEvent( + options: Record +): NodeTransform { + return function transformEvent(node) { if (!isElementNode(node)) { return } @@ -17,5 +19,4 @@ export function createTransformEvent(options: Record) { } }) } - return transformEvent } diff --git a/packages/uni-cli-shared/src/vue/transforms/transformTag.ts b/packages/uni-cli-shared/src/vue/transforms/transformTag.ts new file mode 100644 index 0000000000000000000000000000000000000000..4e30512ebdcf3c252f0d19e4c6776f4844a65741 --- /dev/null +++ b/packages/uni-cli-shared/src/vue/transforms/transformTag.ts @@ -0,0 +1,48 @@ +import { CodegenContext, NodeTransform } from '@vue/compiler-core' +import { isElementNode } from '../../vite/utils/ast' + +export function createTransformTag( + opts: Record +): NodeTransform { + return function transformTag(node, context) { + if (!isElementNode(node)) { + return + } + const oldTag = node.tag + const newTag = opts[oldTag] + if (!newTag) { + return + } + node.tag = newTag + // SSR 时，已被提前添加到 components 中 + if (context.ssr && context.components.has(oldTag)) { + context.components.delete(oldTag) + context.components.add(newTag) + } + } +} + +const easycoms: Record = { + _component_uni_match_media: '_component_match_media', + _component_page_head_meta: '_component_head', +} +const easycomKeys = Object.keys(easycoms) + +export const onContextCreated: (context: CodegenContext) => void = ( + context +) => { + if (!context.ssr) { + return + } + // 替换生成的 easycom 变量名 + const push = context.push + context.push = (code, node) => { + if (code.includes('_resolveComponent(')) { + const name = easycomKeys.find((name) => code.includes(name)) + if (name) { + code = code.replace(name, easycoms[name]) + } + } + return push(code, node) + } +} diff --git a/packages/uni-cli-shared/src/vue/utils.ts b/packages/uni-cli-shared/src/vue/utils.ts index c814594e62266b05d8a8dcf74c1144b60ba9f68d..4361e0ef50895e75f26847723ff0ded74b7c585f 100644 --- a/packages/uni-cli-shared/src/vue/utils.ts +++ b/packages/uni-cli-shared/src/vue/utils.ts @@ -69,7 +69,7 @@ export function addStaticClass(node: ElementNode, clazz: string) { } } -function createDirectiveNode( +export function createDirectiveNode( name: string, arg: string, exp: string diff --git a/packages/uni-h5-vite/src/plugin/index.ts b/packages/uni-h5-vite/src/plugin/index.ts index 4577d6f124da5477b50bd404ef58ff258ee481ce..d3efc858594bd63e303c8ab3cfbbfd4ec7495ad7 100644 --- a/packages/uni-h5-vite/src/plugin/index.ts +++ b/packages/uni-h5-vite/src/plugin/index.ts @@ -4,6 +4,8 @@ import { isH5CustomElement, isH5NativeTag } from '@dcloudio/uni-shared' import { isInHBuilderX, resolveMainPathOnce, + transformMatchMedia, + transformTapToClick, UniVitePlugin, } from '@dcloudio/uni-cli-shared' import { createHandleHotUpdate } from './handleHotUpdate' @@ -21,13 +23,14 @@ export const UniH5Plugin: UniVitePlugin = { copyOptions: { assets: ['hybrid/html'], }, - transformEvent: { - tap: 'click', - }, compilerOptions: { isNativeTag: isH5NativeTag, isCustomElement: isH5CustomElement, - nodeTransforms: [transformPageHead], + nodeTransforms: [ + transformTapToClick, + transformMatchMedia, + transformPageHead, + ], }, }, config(config, env) { diff --git a/packages/uni-mp-alipay/__tests__/component.spec.ts b/packages/uni-mp-alipay/__tests__/component.spec.ts index 0d741df864346cb5ee703db5f61f000cd86acec5..39c40399bef95866297dd5a51992ff8ea6cedc78 100644 --- a/packages/uni-mp-alipay/__tests__/component.spec.ts +++ b/packages/uni-mp-alipay/__tests__/component.spec.ts @@ -9,6 +9,15 @@ describe('mp-alipay: transform component', () => { code, `(_ctx, _cache) => { return {} +}` + ) + }) + test(`match-media`, () => { + assert( + ``, + ``, + `(_ctx, _cache) => { + return {} }` ) }) diff --git a/packages/uni-mp-alipay/__tests__/testUtils.ts b/packages/uni-mp-alipay/__tests__/testUtils.ts index d06e2918a6e59bcfbe5ed5a0bf72ec459991fdfb..692f5d10a685ff2c2999de781e80915804e895d2 100644 --- a/packages/uni-mp-alipay/__tests__/testUtils.ts +++ b/packages/uni-mp-alipay/__tests__/testUtils.ts @@ -1,11 +1,6 @@ -import { isNativeTag } from '@dcloudio/uni-shared' import { compile, CompilerOptions } from '@dcloudio/uni-mp-compiler' -import { - isCustomElement, - miniProgram, - nodeTransforms, -} from '../src/compiler/options' +import { compilerOptions, miniProgram } from '../src/compiler/options' export function assert( template: string, @@ -18,12 +13,9 @@ export function assert( filename: 'foo.vue', prefixIdentifiers: true, inline: true, - isNativeTag, - isCustomElement, generatorOpts: { concise: true, }, - nodeTransforms, miniProgram: { ...miniProgram, emitFile({ source }) { @@ -34,6 +26,7 @@ export function assert( return '' }, }, + ...compilerOptions, ...options, }) if (!options.onError) { diff --git a/packages/uni-mp-alipay/dist/uni.compiler.js b/packages/uni-mp-alipay/dist/uni.compiler.js index c7c08308b1b65f3b19dec9cc24ad43d69c4c7d10..839b7064e7acd3bac1260deca18841762c048403 100644 --- a/packages/uni-mp-alipay/dist/uni.compiler.js +++ b/packages/uni-mp-alipay/dist/uni.compiler.js @@ -2,15 +2,70 @@ var initMiniProgramPlugin = require('@dcloudio/uni-mp-vite'); var path = require('path'); +var shared = require('@vue/shared'); var uniCliShared = require('@dcloudio/uni-cli-shared'); var compilerCore = require('@vue/compiler-core'); -var shared = require('@vue/shared'); function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } var initMiniProgramPlugin__default = /*#__PURE__*/_interopDefaultLegacy(initMiniProgramPlugin); var path__default = /*#__PURE__*/_interopDefaultLegacy(path); +const BUILT_IN_TAGS = [ + 'ad', + 'ad-content-page', + 'ad-draw', + 'audio', + 'button', + 'camera', + 'canvas', + 'checkbox', + 'checkbox-group', + 'cover-image', + 'cover-view', + 'editor', + 'form', + 'functional-page-navigator', + 'icon', + 'image', + 'input', + 'label', + 'live-player', + 'live-pusher', + 'map', + 'movable-area', + 'movable-view', + 'navigator', + 'official-account', + 'open-data', + 'picker', + 'picker-view', + 'picker-view-column', + 'progress', + 'radio', + 'radio-group', + 'rich-text', + 'scroll-view', + 'slider', + 'swiper', + 'swiper-item', + 'switch', + 'text', + 'textarea', + 'video', + 'view', + 'web-view', +].map((tag) => 'uni-' + tag); +function isBuiltInComponent(tag) { + return BUILT_IN_TAGS.indexOf('uni-' + tag) !== -1; +} +function isNativeTag(tag) { + return shared.isHTMLTag(tag) || shared.isSVGTag(tag) || isBuiltInComponent(tag); +} +function isCustomElement$1(_tag) { + return false; +} + var component2 = true; var enableAppxNg = true; var source = { @@ -137,12 +192,17 @@ const miniProgram = { }, directive: 'a:', }; -// TODO getPhoneNumber 等事件 const nodeTransforms = [ transformRef, transformOpenType, + uniCliShared.transformMatchMedia, uniCliShared.createTransformComponentLink(uniCliShared.COMPONENT_ON_LINK, 6 /* ATTRIBUTE */), ]; +const compilerOptions = { + isNativeTag, + isCustomElement, + nodeTransforms, +}; const tags = [ 'lifestyle', 'life-follow', @@ -157,7 +217,7 @@ const tags = [ 'mkt', ]; function isCustomElement(tag) { - return tags.includes(tag); + return tags.includes(tag) || isCustomElement$1(); } const options = { vite: { @@ -215,10 +275,7 @@ const options = { // 暂不处理，让开发者自己全部使用 src 引入 return ``; }, - }, extname: '.axml', compilerOptions: { - isCustomElement, - nodeTransforms, - } }), + }, extname: '.axml', compilerOptions }), style: { extname: '.acss', }, diff --git a/packages/uni-mp-alipay/src/compiler/options.ts b/packages/uni-mp-alipay/src/compiler/options.ts index ec1246d5101b84fd37409d3da0d8b6d0abe32545..b4e8a82051b24bdb34ec0e4ce2b954bdf3ff6427 100644 --- a/packages/uni-mp-alipay/src/compiler/options.ts +++ b/packages/uni-mp-alipay/src/compiler/options.ts @@ -1,9 +1,14 @@ import path from 'path' -import { NodeTypes } from '@vue/compiler-core' +import { CompilerOptions, NodeTypes } from '@vue/compiler-core' +import { + isNativeTag, + isCustomElement as baseIsCustomElement, +} from '@dcloudio/uni-shared' import { COMPONENT_ON_LINK, createTransformComponentLink, MiniProgramCompilerOptions, + transformMatchMedia, } from '@dcloudio/uni-cli-shared' import { UniMiniProgramPluginOptions } from '@dcloudio/uni-mp-vite' import source from './mini.project.json' @@ -25,12 +30,18 @@ export const miniProgram: MiniProgramCompilerOptions = { }, directive: 'a:', } -// TODO getPhoneNumber 等事件 -export const nodeTransforms = [ +const nodeTransforms = [ transformRef, transformOpenType, + transformMatchMedia, createTransformComponentLink(COMPONENT_ON_LINK, NodeTypes.ATTRIBUTE), ] +export const compilerOptions: CompilerOptions = { + isNativeTag, + isCustomElement, + nodeTransforms, +} + export const tags = [ 'lifestyle', 'life-follow', @@ -44,9 +55,11 @@ export const tags = [ 'ix-native-list', 'mkt', ] -export function isCustomElement(tag: string) { - return tags.includes(tag) + +function isCustomElement(tag: string) { + return tags.includes(tag) || baseIsCustomElement(tag) } + export const options: UniMiniProgramPluginOptions = { vite: { inject: { @@ -108,10 +121,7 @@ export const options: UniMiniProgramPluginOptions = { }, }, extname: '.axml', - compilerOptions: { - isCustomElement, - nodeTransforms, - }, + compilerOptions, }, style: { extname: '.acss', diff --git a/packages/uni-mp-baidu/__tests__/component.spec.ts b/packages/uni-mp-baidu/__tests__/component.spec.ts new file mode 100644 index 0000000000000000000000000000000000000000..7d33afda46551b2581a406a1015597e0819671bd --- /dev/null +++ b/packages/uni-mp-baidu/__tests__/component.spec.ts @@ -0,0 +1,13 @@ +import { assert } from './testUtils' + +describe('mp-baidu: transform component', () => { + test(`match-media`, () => { + assert( + ``, + ``, + `(_ctx, _cache) => { + return {} +}` + ) + }) +}) diff --git a/packages/uni-mp-baidu/__tests__/testUtils.ts b/packages/uni-mp-baidu/__tests__/testUtils.ts index 5d505c287959d014e55edf4a3989d7772da95c61..8358edc3027044a1dd9a831e9338588d7ebfe290 100644 --- a/packages/uni-mp-baidu/__tests__/testUtils.ts +++ b/packages/uni-mp-baidu/__tests__/testUtils.ts @@ -1,10 +1,6 @@ import { isCustomElement, isNativeTag } from '@dcloudio/uni-shared' import { compile, CompilerOptions } from '@dcloudio/uni-mp-compiler' -import { transformFor } from '../src/compiler/transforms/vFor' -import { transformOn } from '../src/compiler/transforms/vOn' -import { transformModel } from '../src/compiler/transforms/vModel' -import { miniProgram } from '../src/compiler/options' -import { transformRef } from '@dcloudio/uni-cli-shared' +import { miniProgram, compilerOptions } from '../src/compiler/options' export function assert( template: string, @@ -22,11 +18,6 @@ export function assert( generatorOpts: { concise: true, }, - nodeTransforms: [transformRef, transformFor], - directiveTransforms: { - on: transformOn, - model: transformModel, - }, miniProgram: { ...miniProgram, emitFile({ source }) { @@ -37,6 +28,7 @@ export function assert( return '' }, }, + ...compilerOptions, ...options, }) if (!options.onError) { diff --git a/packages/uni-mp-baidu/build.json b/packages/uni-mp-baidu/build.json index fb7b86e01f851a6cd2fcb86a000531591fa03ab7..b14b48d86e4bf5a5507ea1b10b52e24f9896e018 100644 --- a/packages/uni-mp-baidu/build.json +++ b/packages/uni-mp-baidu/build.json @@ -7,10 +7,11 @@ "format": "cjs" }, "external": [ + "@vue/compiler-core", + "@dcloudio/uni-shared", "@dcloudio/uni-cli-shared", - "@dcloudio/uni-mp-compiler", "@dcloudio/uni-mp-vite", - "@vue/compiler-core" + "@dcloudio/uni-mp-compiler" ] }, { diff --git a/packages/uni-mp-baidu/dist/uni.compiler.js b/packages/uni-mp-baidu/dist/uni.compiler.js index cb3ea2f6d0773d30437f52400d5c1cc03a8b0450..f666d449df43572b7fcf6ca71ca6cb44830962c8 100644 --- a/packages/uni-mp-baidu/dist/uni.compiler.js +++ b/packages/uni-mp-baidu/dist/uni.compiler.js @@ -2,6 +2,7 @@ var initMiniProgramPlugin = require('@dcloudio/uni-mp-vite'); var path = require('path'); +var uniShared = require('@dcloudio/uni-shared'); var uniCliShared = require('@dcloudio/uni-cli-shared'); var uniMpCompiler = require('@dcloudio/uni-mp-compiler'); var compilerCore = require('@vue/compiler-core'); @@ -144,6 +145,11 @@ const transformModel = (dir, node, context, augmentor) => { return res; }; +const nodeTransforms = [uniCliShared.transformRef, transformFor, uniCliShared.transformMatchMedia]; +const directiveTransforms = { + on: transformOn, + model: transformModel, +}; const miniProgram = { class: { array: true, @@ -153,6 +159,12 @@ const miniProgram = { }, directive: 's-', }; +const compilerOptions = { + isNativeTag: uniShared.isNativeTag, + isCustomElement: uniShared.isCustomElement, + nodeTransforms, + directiveTransforms, +}; const projectConfigFilename = 'project.swan.json'; const options = { vite: { @@ -186,13 +198,7 @@ const options = { ${filter.code} `; }, - }, extname: '.swan', compilerOptions: { - nodeTransforms: [uniCliShared.transformRef, transformFor], - directiveTransforms: { - on: transformOn, - model: transformModel, - }, - } }), + }, extname: '.swan', compilerOptions }), style: { extname: '.css', }, diff --git a/packages/uni-mp-baidu/src/compiler/options.ts b/packages/uni-mp-baidu/src/compiler/options.ts index 794494a09e35b5aba44d4d5b83e9cce30e92baab..8e643972c9ad0a9dfe6207e88917ac89160320f3 100644 --- a/packages/uni-mp-baidu/src/compiler/options.ts +++ b/packages/uni-mp-baidu/src/compiler/options.ts @@ -1,6 +1,9 @@ import path from 'path' +import type { CompilerOptions } from '@vue/compiler-core' +import { isCustomElement, isNativeTag } from '@dcloudio/uni-shared' import { MiniProgramCompilerOptions, + transformMatchMedia, transformRef, } from '@dcloudio/uni-cli-shared' import { UniMiniProgramPluginOptions } from '@dcloudio/uni-mp-vite' @@ -10,6 +13,11 @@ import { transformFor } from './transforms/vFor' import { transformOn } from './transforms/vOn' import { transformModel } from './transforms/vModel' +const nodeTransforms = [transformRef, transformFor, transformMatchMedia] +const directiveTransforms = { + on: transformOn, + model: transformModel, +} export const miniProgram: MiniProgramCompilerOptions = { class: { array: true, @@ -20,6 +28,13 @@ export const miniProgram: MiniProgramCompilerOptions = { directive: 's-', } +export const compilerOptions: CompilerOptions = { + isNativeTag, + isCustomElement, + nodeTransforms, + directiveTransforms, +} + const projectConfigFilename = 'project.swan.json' export const options: UniMiniProgramPluginOptions = { @@ -59,13 +74,7 @@ export const options: UniMiniProgramPluginOptions = { }, }, extname: '.swan', - compilerOptions: { - nodeTransforms: [transformRef, transformFor], - directiveTransforms: { - on: transformOn, - model: transformModel, - }, - }, + compilerOptions, }, style: { extname: '.css', diff --git a/packages/uni-mp-qq/__tests__/component.spec.ts b/packages/uni-mp-qq/__tests__/component.spec.ts new file mode 100644 index 0000000000000000000000000000000000000000..4d9f570eb3be0b37fc2583dd7e085dca63354d9e --- /dev/null +++ b/packages/uni-mp-qq/__tests__/component.spec.ts @@ -0,0 +1,13 @@ +import { assert } from './testUtils' + +describe('mp-baidu: transform component', () => { + test(`match-media`, () => { + assert( + ``, + ``, + `(_ctx, _cache) => { + return {} +}` + ) + }) +}) diff --git a/packages/uni-mp-qq/__tests__/testUtils.ts b/packages/uni-mp-qq/__tests__/testUtils.ts new file mode 100644 index 0000000000000000000000000000000000000000..4c250ca2ad7b65b61711944385d05af7a12c216c --- /dev/null +++ b/packages/uni-mp-qq/__tests__/testUtils.ts @@ -0,0 +1,37 @@ +import { isNativeTag } from '@dcloudio/uni-shared' +import { compile, CompilerOptions } from '@dcloudio/uni-mp-compiler' + +import { compilerOptions, miniProgram } from '../src/compiler/options' + +export function assert( + template: string, + templateCode: string, + renderCode: string, + options: CompilerOptions = {} +) { + const res = compile(template, { + mode: 'module', + filename: 'foo.vue', + prefixIdentifiers: true, + inline: true, + isNativeTag, + generatorOpts: { + concise: true, + }, + miniProgram: { + ...miniProgram, + emitFile({ source }) { + // console.log(source) + if (!options.onError) { + expect(source).toBe(templateCode) + } + return '' + }, + }, + ...compilerOptions, + ...options, + }) + if (!options.onError) { + expect(res.code).toBe(renderCode) + } +} diff --git a/packages/uni-mp-qq/build.json b/packages/uni-mp-qq/build.json index 506d0ccf01f23eee64923e9618e318adbbeb99f4..572f2a1b970edc1478734d7c5bb428fa3d274844 100644 --- a/packages/uni-mp-qq/build.json +++ b/packages/uni-mp-qq/build.json @@ -8,8 +8,11 @@ }, "external": [ "fs-extra", + "@vue/compiler-core", + "@dcloudio/uni-shared", "@dcloudio/uni-cli-shared", - "@dcloudio/uni-mp-vite" + "@dcloudio/uni-mp-vite", + "@dcloudio/uni-mp-compiler" ] }, { diff --git a/packages/uni-mp-qq/dist/uni.compiler.js b/packages/uni-mp-qq/dist/uni.compiler.js index f43e44c82bca8db1a6c7d2d7eb3c2f33c9ddb015..7ca1f13cf6dad771623eb60c267a241ec7234cb5 100644 --- a/packages/uni-mp-qq/dist/uni.compiler.js +++ b/packages/uni-mp-qq/dist/uni.compiler.js @@ -3,6 +3,7 @@ var initMiniProgramPlugin = require('@dcloudio/uni-mp-vite'); var path = require('path'); var fs = require('fs-extra'); +var uniShared = require('@dcloudio/uni-shared'); var uniCliShared = require('@dcloudio/uni-cli-shared'); function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } @@ -84,8 +85,23 @@ var source = { const nodeTransforms = [ uniCliShared.transformRef, - uniCliShared.createTransformComponentLink(uniCliShared.COMPONENT_BIND_LINK), + uniCliShared.transformMatchMedia, + uniCliShared.transformComponentLink, ]; +const compilerOptions = { + isNativeTag: uniShared.isNativeTag, + isCustomElement: uniShared.isCustomElement, + nodeTransforms, +}; +const miniProgram = { + class: { + array: true, + }, + slot: { + fallback: false, + }, + directive: 'qq:', +}; const options = { vite: { inject: { @@ -115,11 +131,7 @@ const options = { filename: 'project.config.json', source, }, - template: { - class: { - array: true, - }, - filter: { + template: Object.assign(Object.assign({}, miniProgram), { filter: { extname: '.qs', lang: 'wxs', generate(filter, filename) { @@ -130,16 +142,7 @@ const options = { ${filter.code} `; }, - }, - slot: { - fallback: false, - }, - extname: '.qml', - directive: 'qq:', - compilerOptions: { - nodeTransforms, - }, - }, + }, extname: '.qml', compilerOptions }), style: { extname: '.qss', }, diff --git a/packages/uni-mp-qq/src/compiler/options.ts b/packages/uni-mp-qq/src/compiler/options.ts index 5cb2d20d3935713f3cd563d674d570834048b3b4..7e581f1dc1ff87f2c914e032541a6b20b91e627b 100644 --- a/packages/uni-mp-qq/src/compiler/options.ts +++ b/packages/uni-mp-qq/src/compiler/options.ts @@ -1,18 +1,38 @@ import path from 'path' - +import type { CompilerOptions } from '@vue/compiler-core' +import { isCustomElement, isNativeTag } from '@dcloudio/uni-shared' import { - COMPONENT_BIND_LINK, - createTransformComponentLink, + MiniProgramCompilerOptions, + transformComponentLink, + transformMatchMedia, transformRef, } from '@dcloudio/uni-cli-shared' import { UniMiniProgramPluginOptions } from '@dcloudio/uni-mp-vite' import source from './project.config.json' -export const nodeTransforms = [ +const nodeTransforms = [ transformRef, - createTransformComponentLink(COMPONENT_BIND_LINK), + transformMatchMedia, + transformComponentLink, ] + +export const compilerOptions: CompilerOptions = { + isNativeTag, + isCustomElement, + nodeTransforms, +} + +export const miniProgram: MiniProgramCompilerOptions = { + class: { + array: true, + }, + slot: { + fallback: false, + }, + directive: 'qq:', +} + export const options: UniMiniProgramPluginOptions = { vite: { inject: { @@ -43,9 +63,8 @@ export const options: UniMiniProgramPluginOptions = { source, }, template: { - class: { - array: true, - }, + /* eslint-disable no-restricted-syntax */ + ...miniProgram, filter: { extname: '.qs', lang: 'wxs', @@ -58,14 +77,8 @@ export const options: UniMiniProgramPluginOptions = { ` }, }, - slot: { - fallback: false, - }, extname: '.qml', - directive: 'qq:', - compilerOptions: { - nodeTransforms, - }, + compilerOptions, }, style: { extname: '.qss', diff --git a/packages/uni-mp-toutiao/__tests__/component.spec.ts b/packages/uni-mp-toutiao/__tests__/component.spec.ts new file mode 100644 index 0000000000000000000000000000000000000000..4d9f570eb3be0b37fc2583dd7e085dca63354d9e --- /dev/null +++ b/packages/uni-mp-toutiao/__tests__/component.spec.ts @@ -0,0 +1,13 @@ +import { assert } from './testUtils' + +describe('mp-baidu: transform component', () => { + test(`match-media`, () => { + assert( + ``, + ``, + `(_ctx, _cache) => { + return {} +}` + ) + }) +}) diff --git a/packages/uni-mp-toutiao/__tests__/testUtils.ts b/packages/uni-mp-toutiao/__tests__/testUtils.ts index f546e2a9a34290896d4c89d61d87e40ed5633193..4f3c21d342934c21dbe8cdca5dbf97ebb4d71ae2 100644 --- a/packages/uni-mp-toutiao/__tests__/testUtils.ts +++ b/packages/uni-mp-toutiao/__tests__/testUtils.ts @@ -1,7 +1,6 @@ -import { isCustomElement, isNativeTag } from '@dcloudio/uni-shared' import { compile, CompilerOptions } from '@dcloudio/uni-mp-compiler' -import { miniProgram, nodeTransforms } from '../src/compiler/options' +import { miniProgram, compilerOptions } from '../src/compiler/options' export function assert( template: string, @@ -14,12 +13,9 @@ export function assert( filename: 'foo.vue', prefixIdentifiers: true, inline: true, - isNativeTag, - isCustomElement, generatorOpts: { concise: true, }, - nodeTransforms, miniProgram: { ...miniProgram, emitFile({ source }) { @@ -30,6 +26,7 @@ export function assert( return '' }, }, + ...compilerOptions, ...options, }) if (!options.onError) { diff --git a/packages/uni-mp-toutiao/build.json b/packages/uni-mp-toutiao/build.json index de2702e688340787be58fa91130ba4da799d661f..4f5bb73c57b2cf87221f63189973b42b850e32a6 100644 --- a/packages/uni-mp-toutiao/build.json +++ b/packages/uni-mp-toutiao/build.json @@ -8,6 +8,7 @@ }, "external": [ "@vue/compiler-core", + "@dcloudio/uni-shared", "@dcloudio/uni-cli-shared", "@dcloudio/uni-mp-vite", "@dcloudio/uni-mp-compiler" diff --git a/packages/uni-mp-toutiao/dist/uni.compiler.js b/packages/uni-mp-toutiao/dist/uni.compiler.js index 9fc405f1bb14d029dcfe3595ddcf8cda466e1f20..7d65a8c4b05a6a2ff4f7167030592dd464c1ca92 100644 --- a/packages/uni-mp-toutiao/dist/uni.compiler.js +++ b/packages/uni-mp-toutiao/dist/uni.compiler.js @@ -2,9 +2,6 @@ var initMiniProgramPlugin = require('@dcloudio/uni-mp-vite'); var path = require('path'); -var uniCliShared = require('@dcloudio/uni-cli-shared'); -var uniMpCompiler = require('@dcloudio/uni-mp-compiler'); -var compilerCore = require('@vue/compiler-core'); function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } @@ -32,42 +29,7 @@ var source = { condition: condition }; -function transformSwiper(node) { - if (node.type !== 1 /* ELEMENT */ || node.tag !== 'swiper') { - return; - } - const disableTouchProp = compilerCore.findProp(node, 'disable-touch', false, true); - if (!disableTouchProp) { - return; - } - const { props } = node; - if (disableTouchProp.type === 6 /* ATTRIBUTE */) { - // => - props.splice(props.indexOf(disableTouchProp), 1, uniCliShared.createBindDirectiveNode('touchable', 'false')); - } - else { - if (disableTouchProp.exp) { - // => - let touchable = ''; - if (disableTouchProp.exp.type === 4 /* SIMPLE_EXPRESSION */) { - if (disableTouchProp.exp.content === 'true') { - touchable = 'false'; - } - else if (disableTouchProp.exp.content === 'false') { - touchable = 'true'; - } - } - props.splice(props.indexOf(disableTouchProp), 1, uniCliShared.createBindDirectiveNode('touchable', touchable || `!(${uniMpCompiler.genExpr(disableTouchProp.exp)})`)); - } - } -} - const projectConfigFilename = 'project.config.json'; -const nodeTransforms = [ - uniCliShared.transformRef, - transformSwiper, - uniCliShared.createTransformComponentLink(uniCliShared.COMPONENT_BIND_LINK), -]; const miniProgram = { class: { array: false, @@ -109,9 +71,7 @@ const options = { ${filter.code} `; }, - }, extname: '.ttml', compilerOptions: { - nodeTransforms, - } }), + }, extname: '.ttml' }), style: { extname: '.ttss', }, diff --git a/packages/uni-mp-toutiao/src/compiler/options.ts b/packages/uni-mp-toutiao/src/compiler/options.ts index c360ce02c0145dcb45e5d04c68a81b5956febe38..837cff683f99fbc0229fa7ada62c576a12688ef8 100644 --- a/packages/uni-mp-toutiao/src/compiler/options.ts +++ b/packages/uni-mp-toutiao/src/compiler/options.ts @@ -1,8 +1,10 @@ import path from 'path' +import type { CompilerOptions } from '@vue/compiler-core' +import { isCustomElement, isNativeTag } from '@dcloudio/uni-shared' import { - COMPONENT_BIND_LINK, - createTransformComponentLink, MiniProgramCompilerOptions, + transformComponentLink, + transformMatchMedia, transformRef, } from '@dcloudio/uni-cli-shared' import { UniMiniProgramPluginOptions } from '@dcloudio/uni-mp-vite' @@ -12,11 +14,18 @@ import { transformSwiper } from './transforms/transformSwiper' const projectConfigFilename = 'project.config.json' -export const nodeTransforms = [ +const nodeTransforms = [ transformRef, transformSwiper, - createTransformComponentLink(COMPONENT_BIND_LINK), + transformMatchMedia, + transformComponentLink, ] + +export const compilerOptions: CompilerOptions = { + isNativeTag, + isCustomElement, + nodeTransforms, +} export const miniProgram: MiniProgramCompilerOptions = { class: { array: false, @@ -64,9 +73,6 @@ ${filter.code} }, }, extname: '.ttml', - compilerOptions: { - nodeTransforms, - }, }, style: { extname: '.ttss', diff --git a/packages/uni-mp-weixin/__tests__/component.spec.ts b/packages/uni-mp-weixin/__tests__/component.spec.ts new file mode 100644 index 0000000000000000000000000000000000000000..5b528dfded8e3f2ad7f11e8b85c0a466b0c8449d --- /dev/null +++ b/packages/uni-mp-weixin/__tests__/component.spec.ts @@ -0,0 +1,13 @@ +import { assert } from './testUtils' + +describe('mp-baidu: transform component', () => { + test(`match-media`, () => { + assert( + ``, + ``, + `(_ctx, _cache) => { + return {} +}` + ) + }) +}) diff --git a/packages/uni-mp-weixin/__tests__/testUtils.ts b/packages/uni-mp-weixin/__tests__/testUtils.ts new file mode 100644 index 0000000000000000000000000000000000000000..4c250ca2ad7b65b61711944385d05af7a12c216c --- /dev/null +++ b/packages/uni-mp-weixin/__tests__/testUtils.ts @@ -0,0 +1,37 @@ +import { isNativeTag } from '@dcloudio/uni-shared' +import { compile, CompilerOptions } from '@dcloudio/uni-mp-compiler' + +import { compilerOptions, miniProgram } from '../src/compiler/options' + +export function assert( + template: string, + templateCode: string, + renderCode: string, + options: CompilerOptions = {} +) { + const res = compile(template, { + mode: 'module', + filename: 'foo.vue', + prefixIdentifiers: true, + inline: true, + isNativeTag, + generatorOpts: { + concise: true, + }, + miniProgram: { + ...miniProgram, + emitFile({ source }) { + // console.log(source) + if (!options.onError) { + expect(source).toBe(templateCode) + } + return '' + }, + }, + ...compilerOptions, + ...options, + }) + if (!options.onError) { + expect(res.code).toBe(renderCode) + } +} diff --git a/packages/uni-mp-weixin/build.json b/packages/uni-mp-weixin/build.json index 99962d87cbbf03ee5ac06616a60a01de4f4e57d2..87191132ab26445db7909da85fc2cb6de683a6a5 100644 --- a/packages/uni-mp-weixin/build.json +++ b/packages/uni-mp-weixin/build.json @@ -6,7 +6,13 @@ "output": { "format": "cjs" }, - "external": ["@dcloudio/uni-cli-shared", "@dcloudio/uni-mp-vite"] + "external": [ + "@vue/compiler-core", + "@dcloudio/uni-shared", + "@dcloudio/uni-cli-shared", + "@dcloudio/uni-mp-vite", + "@dcloudio/uni-mp-compiler" + ] }, { "input": { diff --git a/packages/uni-mp-weixin/dist/uni.compiler.js b/packages/uni-mp-weixin/dist/uni.compiler.js index 84bcc68a69934513e84027ef28926cca72eb084e..b35a931a99f1fbf0a79071744406e12eba06c9c4 100644 --- a/packages/uni-mp-weixin/dist/uni.compiler.js +++ b/packages/uni-mp-weixin/dist/uni.compiler.js @@ -2,6 +2,7 @@ var initMiniProgramPlugin = require('@dcloudio/uni-mp-vite'); var path = require('path'); +var uniShared = require('@dcloudio/uni-shared'); var uniCliShared = require('@dcloudio/uni-cli-shared'); function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } @@ -58,6 +59,23 @@ var source = { condition: condition }; +const compilerOptions = { + isNativeTag: uniShared.isNativeTag, + isCustomElement: (tag) => { + return (['page-meta', 'navigation-bar', 'match-media'].includes(tag) || + uniShared.isCustomElement(tag)); + }, + nodeTransforms: [uniCliShared.transformRef, uniCliShared.transformComponentLink], +}; +const miniProgram = { + class: { + array: true, + }, + slot: { + fallback: false, + }, + directive: 'wx:', +}; const projectConfigFilename = 'project.config.json'; const options = { vite: { @@ -95,11 +113,7 @@ const options = { filename: projectConfigFilename, source, }, - template: { - class: { - array: true, - }, - filter: { + template: Object.assign(Object.assign({}, miniProgram), { filter: { extname: '.wxs', lang: 'wxs', generate(filter, filename) { @@ -110,22 +124,7 @@ const options = { ${filter.code} `; }, - }, - slot: { - fallback: false, - }, - extname: '.wxml', - directive: 'wx:', - compilerOptions: { - isCustomElement: (tag) => { - return ['page-meta', 'navigation-bar', 'match-media'].includes(tag); - }, - nodeTransforms: [ - uniCliShared.transformRef, - uniCliShared.createTransformComponentLink(uniCliShared.COMPONENT_BIND_LINK), - ], - }, - }, + }, extname: '.wxml', compilerOptions }), style: { extname: '.wxss', }, diff --git a/packages/uni-mp-weixin/src/compiler/options.ts b/packages/uni-mp-weixin/src/compiler/options.ts index 2d22158eabde195d8fa5fefbc351766338e94a3f..afd142760922d416ae9909a33848ea4b8aee9adc 100644 --- a/packages/uni-mp-weixin/src/compiler/options.ts +++ b/packages/uni-mp-weixin/src/compiler/options.ts @@ -1,14 +1,38 @@ import path from 'path' - +import type { CompilerOptions } from '@vue/compiler-core' +import { + isNativeTag, + isCustomElement as baseIsCustomElement, +} from '@dcloudio/uni-shared' import { - COMPONENT_BIND_LINK, - createTransformComponentLink, + MiniProgramCompilerOptions, + transformComponentLink, transformRef, } from '@dcloudio/uni-cli-shared' import { UniMiniProgramPluginOptions } from '@dcloudio/uni-mp-vite' import source from './project.config.json' +export const compilerOptions: CompilerOptions = { + isNativeTag, + isCustomElement: (tag) => { + return ( + ['page-meta', 'navigation-bar', 'match-media'].includes(tag) || + baseIsCustomElement(tag) + ) + }, + nodeTransforms: [transformRef, transformComponentLink], +} + +export const miniProgram: MiniProgramCompilerOptions = { + class: { + array: true, + }, + slot: { + fallback: false, + }, + directive: 'wx:', +} const projectConfigFilename = 'project.config.json' export const options: UniMiniProgramPluginOptions = { @@ -48,9 +72,8 @@ export const options: UniMiniProgramPluginOptions = { source, }, template: { - class: { - array: true, - }, + /* eslint-disable no-restricted-syntax */ + ...miniProgram, filter: { extname: '.wxs', lang: 'wxs', @@ -63,20 +86,8 @@ ${filter.code} ` }, }, - slot: { - fallback: false, - }, extname: '.wxml', - directive: 'wx:', - compilerOptions: { - isCustomElement: (tag) => { - return ['page-meta', 'navigation-bar', 'match-media'].includes(tag) - }, - nodeTransforms: [ - transformRef, - createTransformComponentLink(COMPONENT_BIND_LINK), - ], - }, + compilerOptions, }, style: { extname: '.wxss', diff --git a/packages/vite-plugin-uni/src/utils/plugin.ts b/packages/vite-plugin-uni/src/utils/plugin.ts index b6613ea20d4eba7eaf226ee88bc24cbdf68f2880..e3b53bc2610663c9839dc2de87983d254d8293c6 100644 --- a/packages/vite-plugin-uni/src/utils/plugin.ts +++ b/packages/vite-plugin-uni/src/utils/plugin.ts @@ -34,7 +34,6 @@ export function initPluginUniOptions(UniVitePlugins: UniVitePlugin[]) { compiler: pluginTemplateCompiler, copyOptions: pluginCopyOptions, compilerOptions: pluginCompilerOptions, - transformEvent: pluginTransformEvent, } = plugin.uni || {} if (pluginTemplateCompiler) { compiler = pluginTemplateCompiler @@ -42,9 +41,6 @@ export function initPluginUniOptions(UniVitePlugins: UniVitePlugin[]) { if (pluginCompilerOptions) { extend(compilerOptions, pluginCompilerOptions) } - if (pluginTransformEvent) { - extend(transformEvent, pluginTransformEvent) - } if (pluginCopyOptions) { let copyOptions = pluginCopyOptions as CopyOptions if (isFunction(pluginCopyOptions)) { diff --git a/packages/vite-plugin-uni/src/vue/options.ts b/packages/vite-plugin-uni/src/vue/options.ts index 123f8b36823e4e9afc4e93830e586fb44aaa503c..1dfa744e4b3dba72113b32b75c1a4862bb6be7ac 100644 --- a/packages/vite-plugin-uni/src/vue/options.ts +++ b/packages/vite-plugin-uni/src/vue/options.ts @@ -1,16 +1,14 @@ -import { extend, hasOwn, isArray, isPlainObject } from '@vue/shared' +import { hasOwn, isArray, isPlainObject } from '@vue/shared' import { TemplateCompiler } from '@vue/compiler-sfc' import { EXTNAME_VUE_RE, UniVitePlugin, uniPostcssScopedPlugin, createUniVueTransformAssetUrls, + onContextCreated, } from '@dcloudio/uni-cli-shared' import { VitePluginUniResolvedOptions } from '..' -import { transformMatchMedia } from './transforms/transformMatchMedia' -import { createTransformEvent } from './transforms/transformEvent' -// import { transformContext } from './transforms/transformContext' export function initPluginVueOptions( options: VitePluginUniResolvedOptions, @@ -64,11 +62,11 @@ export function initPluginVueOptions( } compilerOptions.isNativeTag = isNativeTag compilerOptions.isCustomElement = isCustomElement - if (directiveTransforms) { - compilerOptions.directiveTransforms = extend( - compilerOptions.directiveTransforms || {}, - directiveTransforms - ) + ;(compilerOptions as any).onContextCreated = onContextCreated + + compilerOptions.directiveTransforms = { + ...compilerOptions.directiveTransforms, + ...directiveTransforms, } if (!compilerOptions.nodeTransforms) { @@ -85,18 +83,6 @@ export function initPluginVueOptions( // compatConfig // ) - const eventOpts = UniVitePlugins.reduce>( - (eventOpts, UniVitePlugin) => { - return extend(eventOpts, UniVitePlugin.uni?.transformEvent) - }, - {} - ) - // compilerOptions.nodeTransforms.unshift(transformContext) - compilerOptions.nodeTransforms.unshift(createTransformEvent(eventOpts)) - if (options.platform !== 'mp-weixin') { - compilerOptions.nodeTransforms.unshift(transformMatchMedia) - } - // App,MP 平台不支持使用静态节点 compilerOptions.hoistStatic = false return vueOptions diff --git a/packages/vite-plugin-uni/src/vue/transforms/transformContext.ts b/packages/vite-plugin-uni/src/vue/transforms/transformContext.ts deleted file mode 100644 index 033414108a912e9bbb34a3a4338696018ecb6847..0000000000000000000000000000000000000000 --- a/packages/vite-plugin-uni/src/vue/transforms/transformContext.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { - // RESOLVE_DYNAMIC_COMPONENT, - NodeTypes, - NodeTransform, -} from '@vue/compiler-core' - -export const transformContext: NodeTransform = (node, context) => { - if (node.type === NodeTypes.ROOT) { - // 注入 resolveDynamicComponent，easycom 会使用 resolveDynamicComponent 替换 resolveComponent 来解决 warning 的问题 - // resolveComponent('custom-component') => resolveDynamicComponent('custom-component') - // context.helper(RESOLVE_DYNAMIC_COMPONENT) - } -} diff --git a/packages/vite-plugin-uni/src/vue/transforms/transformMatchMedia.ts b/packages/vite-plugin-uni/src/vue/transforms/transformMatchMedia.ts deleted file mode 100644 index cfb0cb6878395d5563fd7a4398292ef2185fe9db..0000000000000000000000000000000000000000 --- a/packages/vite-plugin-uni/src/vue/transforms/transformMatchMedia.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { ElementNode, NodeTransform } from '@vue/compiler-core' - -export const transformMatchMedia: NodeTransform = (node) => { - if ((node as ElementNode).tag === 'match-media') { - ;(node as ElementNode).tag = 'uni-match-media' - } -}