From aa4d1ae5da6e1e42261a8f241661f669edd7a322 Mon Sep 17 00:00:00 2001 From: fxy060608 Date: Mon, 20 Dec 2021 14:24:40 +0800 Subject: [PATCH] fix(h5): transform built-in components (#3088) --- .../src/vue/transforms/index.ts | 8 +++++++ .../__tests__/builtInComponents.spec.ts | 21 +++++++++++++++++ packages/uni-h5-vite/src/plugin/uni.ts | 23 +++++++++++-------- packages/uni-h5-vite/src/plugins/easycom.ts | 3 ++- packages/uni-h5-vite/src/utils/ssr.ts | 2 ++ packages/uni-shared/dist/uni-shared.cjs.js | 9 +++++--- packages/uni-shared/dist/uni-shared.d.ts | 2 ++ packages/uni-shared/dist/uni-shared.es.js | 10 ++++---- packages/uni-shared/src/tags.ts | 9 +++++--- 9 files changed, 67 insertions(+), 20 deletions(-) create mode 100644 packages/uni-h5-vite/__tests__/builtInComponents.spec.ts diff --git a/packages/uni-cli-shared/src/vue/transforms/index.ts b/packages/uni-cli-shared/src/vue/transforms/index.ts index a5b9fb51c..f0c67102f 100644 --- a/packages/uni-cli-shared/src/vue/transforms/index.ts +++ b/packages/uni-cli-shared/src/vue/transforms/index.ts @@ -1,3 +1,4 @@ +import { BUILT_IN_TAG_NAMES, COMPONENT_PREFIX } from '@dcloudio/uni-shared' import { createTransformTag } from './transformTag' import { createTransformEvent } from './transformEvent' import { createTransformComponentLink } from './transformComponent' @@ -20,6 +21,13 @@ export { defaultMatch as matchTransformModel, } from './vModel' +export const transformH5BuiltInComponents = createTransformTag( + BUILT_IN_TAG_NAMES.reduce>( + (tags, tag) => ((tags[tag] = COMPONENT_PREFIX + tag), tags), + {} + ) +) + export const transformMatchMedia = createTransformTag({ 'match-media': 'uni-match-media', }) diff --git a/packages/uni-h5-vite/__tests__/builtInComponents.spec.ts b/packages/uni-h5-vite/__tests__/builtInComponents.spec.ts new file mode 100644 index 000000000..4f7249a3e --- /dev/null +++ b/packages/uni-h5-vite/__tests__/builtInComponents.spec.ts @@ -0,0 +1,21 @@ +import { BindingTypes } from '@vue/compiler-core' +import { compileTemplate } from '@vue/compiler-sfc' +import { compilerOptions } from '../src/plugin/uni' +const filename = 'foo.vue' +describe('h5: compiler', () => { + test('builtInComponents', () => { + expect( + compileTemplate({ + source: ``, + filename, + id: filename, + compilerOptions: { + ...compilerOptions, + bindingMetadata: { + canvas: BindingTypes.SETUP_REF, + }, + }, + }).code + ).toContain(`_resolveComponent("v-uni-canvas")`) + }) +}) diff --git a/packages/uni-h5-vite/src/plugin/uni.ts b/packages/uni-h5-vite/src/plugin/uni.ts index 3de0f427f..0b896ac31 100644 --- a/packages/uni-h5-vite/src/plugin/uni.ts +++ b/packages/uni-h5-vite/src/plugin/uni.ts @@ -1,24 +1,29 @@ import { + transformH5BuiltInComponents, transformMatchMedia, transformPageHead, transformTapToClick, UniVitePlugin, } from '@dcloudio/uni-cli-shared' import { isH5NativeTag, isH5CustomElement } from '@dcloudio/uni-shared' +import { CompilerOptions } from '@vue/compiler-core' + +export const compilerOptions: CompilerOptions = { + isNativeTag: isH5NativeTag, + isCustomElement: isH5CustomElement, + nodeTransforms: [ + transformH5BuiltInComponents, + transformTapToClick, + transformMatchMedia, + transformPageHead, + ], +} export function createUni(): UniVitePlugin['uni'] { return { copyOptions: { assets: ['hybrid/html'], }, - compilerOptions: { - isNativeTag: isH5NativeTag, - isCustomElement: isH5CustomElement, - nodeTransforms: [ - transformTapToClick, - transformMatchMedia, - transformPageHead, - ], - }, + compilerOptions, } } diff --git a/packages/uni-h5-vite/src/plugins/easycom.ts b/packages/uni-h5-vite/src/plugins/easycom.ts index 0b7ee1475..04b105987 100644 --- a/packages/uni-h5-vite/src/plugins/easycom.ts +++ b/packages/uni-h5-vite/src/plugins/easycom.ts @@ -3,7 +3,7 @@ import type { Plugin } from 'vite' import { createFilter, FilterPattern } from '@rollup/pluginutils' import { camelize, capitalize } from '@vue/shared' -import { isBuiltInComponent } from '@dcloudio/uni-shared' +import { COMPONENT_PREFIX, isBuiltInComponent } from '@dcloudio/uni-shared' import { EXTNAME_VUE, H5_COMPONENTS_STYLE_PATH, @@ -82,6 +82,7 @@ export function uniEasycomPlugin(options: UniEasycomPluginOptions): Plugin { (str, name) => { if (name && !name.startsWith('_')) { if (isBuiltInComponent(name)) { + name = name.replace(COMPONENT_PREFIX, '') const local = `__syscom_${i++}` if (needCombineBuiltInCss) { // 发行模式下，应该将内置组件css输出到入口css中 diff --git a/packages/uni-h5-vite/src/utils/ssr.ts b/packages/uni-h5-vite/src/utils/ssr.ts index 91c2adc6f..171865e3a 100644 --- a/packages/uni-h5-vite/src/utils/ssr.ts +++ b/packages/uni-h5-vite/src/utils/ssr.ts @@ -12,6 +12,7 @@ import { getBuiltInPaths, transformMatchMedia, normalizePath, + transformH5BuiltInComponents, } from '@dcloudio/uni-cli-shared' import type { ConfigEnv, ResolvedConfig, UserConfig } from 'vite' import resolve from 'resolve' @@ -158,6 +159,7 @@ export function rewriteSsrNativeTag() { ) { transformPageHead(node, context) transformMatchMedia(node, context) + transformH5BuiltInComponents(node, context) return oldResolveComponentType(node, context, ssr) } compilerDom.resolveComponentType = newResolveComponentType diff --git a/packages/uni-shared/dist/uni-shared.cjs.js b/packages/uni-shared/dist/uni-shared.cjs.js index b14467fe2..10d887cb6 100644 --- a/packages/uni-shared/dist/uni-shared.cjs.js +++ b/packages/uni-shared/dist/uni-shared.cjs.js @@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true }); var shared = require('@vue/shared'); -const BUILT_IN_TAGS = [ +const BUILT_IN_TAG_NAMES = [ 'ad', 'ad-content-page', 'ad-draw', @@ -48,7 +48,8 @@ const BUILT_IN_TAGS = [ 'video', 'view', 'web-view', -].map((tag) => 'uni-' + tag); +]; +const BUILT_IN_TAGS = BUILT_IN_TAG_NAMES.map((tag) => 'uni-' + tag); const TAGS = [ 'app', 'layout', @@ -70,7 +71,8 @@ const TAGS = [ 'shadow-root', ].map((tag) => 'uni-' + tag); function isBuiltInComponent(tag) { - return BUILT_IN_TAGS.indexOf('uni-' + tag) !== -1; + // h5 平台会被转换为 v-uni- + return BUILT_IN_TAGS.indexOf('uni-' + tag.replace('v-uni-', '')) !== -1; } function isH5CustomElement(tag) { return TAGS.indexOf(tag) !== -1 || BUILT_IN_TAGS.indexOf(tag) !== -1; @@ -1223,6 +1225,7 @@ exports.ATTR_V_RENDERJS = ATTR_V_RENDERJS; exports.ATTR_V_SHOW = ATTR_V_SHOW; exports.BACKGROUND_COLOR = BACKGROUND_COLOR; exports.BUILT_IN_TAGS = BUILT_IN_TAGS; +exports.BUILT_IN_TAG_NAMES = BUILT_IN_TAG_NAMES; exports.COMPONENT_NAME_PREFIX = COMPONENT_NAME_PREFIX; exports.COMPONENT_PREFIX = COMPONENT_PREFIX; exports.COMPONENT_SELECTOR_PREFIX = COMPONENT_SELECTOR_PREFIX; diff --git a/packages/uni-shared/dist/uni-shared.d.ts b/packages/uni-shared/dist/uni-shared.d.ts index 5b13498cc..1124c8d09 100644 --- a/packages/uni-shared/dist/uni-shared.d.ts +++ b/packages/uni-shared/dist/uni-shared.d.ts @@ -79,6 +79,8 @@ export declare const ATTR_V_SHOW = ".vShow"; export declare const BACKGROUND_COLOR = "#f7f7f7"; +export declare const BUILT_IN_TAG_NAMES: string[]; + export declare const BUILT_IN_TAGS: string[]; export declare function cache(fn: (str: string) => T): (str: string) => T; diff --git a/packages/uni-shared/dist/uni-shared.es.js b/packages/uni-shared/dist/uni-shared.es.js index 58c52b184..e177e32ba 100644 --- a/packages/uni-shared/dist/uni-shared.es.js +++ b/packages/uni-shared/dist/uni-shared.es.js @@ -1,6 +1,6 @@ import { isHTMLTag, isSVGTag, hyphenate, camelize, extend, isString, isPlainObject, isArray, toTypeString, toRawType, capitalize } from '@vue/shared'; -const BUILT_IN_TAGS = [ +const BUILT_IN_TAG_NAMES = [ 'ad', 'ad-content-page', 'ad-draw', @@ -44,7 +44,8 @@ const BUILT_IN_TAGS = [ 'video', 'view', 'web-view', -].map((tag) => 'uni-' + tag); +]; +const BUILT_IN_TAGS = BUILT_IN_TAG_NAMES.map((tag) => 'uni-' + tag); const TAGS = [ 'app', 'layout', @@ -66,7 +67,8 @@ const TAGS = [ 'shadow-root', ].map((tag) => 'uni-' + tag); function isBuiltInComponent(tag) { - return BUILT_IN_TAGS.indexOf('uni-' + tag) !== -1; + // h5 平台会被转换为 v-uni- + return BUILT_IN_TAGS.indexOf('uni-' + tag.replace('v-uni-', '')) !== -1; } function isH5CustomElement(tag) { return TAGS.indexOf(tag) !== -1 || BUILT_IN_TAGS.indexOf(tag) !== -1; @@ -1196,4 +1198,4 @@ function getEnvLocale() { return (lang && lang.replace(/[.:].*/, '')) || 'en'; } -export { ACTION_TYPE_ADD_EVENT, ACTION_TYPE_ADD_WXS_EVENT, ACTION_TYPE_CREATE, ACTION_TYPE_EVENT, ACTION_TYPE_INSERT, ACTION_TYPE_PAGE_CREATE, ACTION_TYPE_PAGE_CREATED, ACTION_TYPE_PAGE_SCROLL, ACTION_TYPE_REMOVE, ACTION_TYPE_REMOVE_ATTRIBUTE, ACTION_TYPE_REMOVE_EVENT, ACTION_TYPE_SET_ATTRIBUTE, ACTION_TYPE_SET_TEXT, ATTR_CHANGE_PREFIX, ATTR_CLASS, ATTR_INNER_HTML, ATTR_STYLE, ATTR_TEXT_CONTENT, ATTR_V_OWNER_ID, ATTR_V_RENDERJS, ATTR_V_SHOW, BACKGROUND_COLOR, BUILT_IN_TAGS, COMPONENT_NAME_PREFIX, COMPONENT_PREFIX, COMPONENT_SELECTOR_PREFIX, DATA_RE, EventChannel, EventModifierFlags, I18N_JSON_DELIMITERS, JSON_PROTOCOL, LINEFEED, NAVBAR_HEIGHT, NODE_TYPE_COMMENT, NODE_TYPE_ELEMENT, NODE_TYPE_PAGE, NODE_TYPE_TEXT, NVueTextNode, ON_ADD_TO_FAVORITES, ON_APP_ENTER_BACKGROUND, ON_APP_ENTER_FOREGROUND, ON_BACK_PRESS, ON_ERROR, ON_HIDE, ON_KEYBOARD_HEIGHT_CHANGE, ON_LAUNCH, ON_LOAD, ON_NAVIGATION_BAR_BUTTON_TAP, ON_NAVIGATION_BAR_SEARCH_INPUT_CHANGED, ON_NAVIGATION_BAR_SEARCH_INPUT_CLICKED, ON_NAVIGATION_BAR_SEARCH_INPUT_CONFIRMED, ON_NAVIGATION_BAR_SEARCH_INPUT_FOCUS_CHANGED, ON_PAGE_NOT_FOUND, ON_PAGE_SCROLL, ON_PULL_DOWN_REFRESH, ON_REACH_BOTTOM, ON_REACH_BOTTOM_DISTANCE, ON_READY, ON_RESIZE, ON_SHARE_APP_MESSAGE, ON_SHARE_TIMELINE, ON_SHOW, ON_TAB_ITEM_TAP, ON_THEME_CHANGE, ON_UNHANDLE_REJECTION, ON_UNLOAD, ON_WEB_INVOKE_APP_SERVICE, ON_WXS_INVOKE_CALL_METHOD, PLUS_RE, PRIMARY_COLOR, RENDERJS_MODULES, RESPONSIVE_MIN_WIDTH, SCHEME_RE, SELECTED_COLOR, SLOT_DEFAULT_NAME, TABBAR_HEIGHT, TAGS, UNI_SSR, UNI_SSR_DATA, UNI_SSR_GLOBAL_DATA, UNI_SSR_STORE, UNI_SSR_TITLE, UNI_STORAGE_LOCALE, UniBaseNode, UniCommentNode, UniElement, UniEvent, UniInputElement, UniLifecycleHooks, UniNode, UniTextAreaElement, UniTextNode, WEB_INVOKE_APPSERVICE, WXS_MODULES, WXS_PROTOCOL, addFont, addLeadingSlash, cache, cacheStringFunction, callOptions, createIsCustomElement, createRpx2Unit, createUniEvent, debounce, decode, decodedQuery, defaultMiniProgramRpx2Unit, defaultRpx2Unit, dynamicSlotName, forcePatchProp, formatAppLog, formatDateTime, formatH5Log, formatLog, getCustomDataset, getEnvLocale, getLen, getValueByDataPath, initCustomDataset, invokeArrayFns, isAppNativeTag, isBuiltInComponent, isComponentTag, isH5CustomElement, isH5NativeTag, isMiniProgramNativeTag, isRootHook, normalizeDataset, normalizeEventType, normalizeTarget, once, parseEventName, parseQuery, parseUrl, passive, plusReady, removeLeadingSlash, resolveOwnerEl, resolveOwnerVm, sanitise, scrollTo, stringifyQuery, updateElementStyle }; +export { ACTION_TYPE_ADD_EVENT, ACTION_TYPE_ADD_WXS_EVENT, ACTION_TYPE_CREATE, ACTION_TYPE_EVENT, ACTION_TYPE_INSERT, ACTION_TYPE_PAGE_CREATE, ACTION_TYPE_PAGE_CREATED, ACTION_TYPE_PAGE_SCROLL, ACTION_TYPE_REMOVE, ACTION_TYPE_REMOVE_ATTRIBUTE, ACTION_TYPE_REMOVE_EVENT, ACTION_TYPE_SET_ATTRIBUTE, ACTION_TYPE_SET_TEXT, ATTR_CHANGE_PREFIX, ATTR_CLASS, ATTR_INNER_HTML, ATTR_STYLE, ATTR_TEXT_CONTENT, ATTR_V_OWNER_ID, ATTR_V_RENDERJS, ATTR_V_SHOW, BACKGROUND_COLOR, BUILT_IN_TAGS, BUILT_IN_TAG_NAMES, COMPONENT_NAME_PREFIX, COMPONENT_PREFIX, COMPONENT_SELECTOR_PREFIX, DATA_RE, EventChannel, EventModifierFlags, I18N_JSON_DELIMITERS, JSON_PROTOCOL, LINEFEED, NAVBAR_HEIGHT, NODE_TYPE_COMMENT, NODE_TYPE_ELEMENT, NODE_TYPE_PAGE, NODE_TYPE_TEXT, NVueTextNode, ON_ADD_TO_FAVORITES, ON_APP_ENTER_BACKGROUND, ON_APP_ENTER_FOREGROUND, ON_BACK_PRESS, ON_ERROR, ON_HIDE, ON_KEYBOARD_HEIGHT_CHANGE, ON_LAUNCH, ON_LOAD, ON_NAVIGATION_BAR_BUTTON_TAP, ON_NAVIGATION_BAR_SEARCH_INPUT_CHANGED, ON_NAVIGATION_BAR_SEARCH_INPUT_CLICKED, ON_NAVIGATION_BAR_SEARCH_INPUT_CONFIRMED, ON_NAVIGATION_BAR_SEARCH_INPUT_FOCUS_CHANGED, ON_PAGE_NOT_FOUND, ON_PAGE_SCROLL, ON_PULL_DOWN_REFRESH, ON_REACH_BOTTOM, ON_REACH_BOTTOM_DISTANCE, ON_READY, ON_RESIZE, ON_SHARE_APP_MESSAGE, ON_SHARE_TIMELINE, ON_SHOW, ON_TAB_ITEM_TAP, ON_THEME_CHANGE, ON_UNHANDLE_REJECTION, ON_UNLOAD, ON_WEB_INVOKE_APP_SERVICE, ON_WXS_INVOKE_CALL_METHOD, PLUS_RE, PRIMARY_COLOR, RENDERJS_MODULES, RESPONSIVE_MIN_WIDTH, SCHEME_RE, SELECTED_COLOR, SLOT_DEFAULT_NAME, TABBAR_HEIGHT, TAGS, UNI_SSR, UNI_SSR_DATA, UNI_SSR_GLOBAL_DATA, UNI_SSR_STORE, UNI_SSR_TITLE, UNI_STORAGE_LOCALE, UniBaseNode, UniCommentNode, UniElement, UniEvent, UniInputElement, UniLifecycleHooks, UniNode, UniTextAreaElement, UniTextNode, WEB_INVOKE_APPSERVICE, WXS_MODULES, WXS_PROTOCOL, addFont, addLeadingSlash, cache, cacheStringFunction, callOptions, createIsCustomElement, createRpx2Unit, createUniEvent, debounce, decode, decodedQuery, defaultMiniProgramRpx2Unit, defaultRpx2Unit, dynamicSlotName, forcePatchProp, formatAppLog, formatDateTime, formatH5Log, formatLog, getCustomDataset, getEnvLocale, getLen, getValueByDataPath, initCustomDataset, invokeArrayFns, isAppNativeTag, isBuiltInComponent, isComponentTag, isH5CustomElement, isH5NativeTag, isMiniProgramNativeTag, isRootHook, normalizeDataset, normalizeEventType, normalizeTarget, once, parseEventName, parseQuery, parseUrl, passive, plusReady, removeLeadingSlash, resolveOwnerEl, resolveOwnerVm, sanitise, scrollTo, stringifyQuery, updateElementStyle }; diff --git a/packages/uni-shared/src/tags.ts b/packages/uni-shared/src/tags.ts index ade99d047..f653e799b 100644 --- a/packages/uni-shared/src/tags.ts +++ b/packages/uni-shared/src/tags.ts @@ -1,6 +1,6 @@ import { isHTMLTag, isSVGTag } from '@vue/shared' -export const BUILT_IN_TAGS = [ +export const BUILT_IN_TAG_NAMES = [ 'ad', 'ad-content-page', 'ad-draw', @@ -44,7 +44,9 @@ export const BUILT_IN_TAGS = [ 'video', 'view', 'web-view', -].map((tag) => 'uni-' + tag) +] + +export const BUILT_IN_TAGS = BUILT_IN_TAG_NAMES.map((tag) => 'uni-' + tag) export const TAGS = [ 'app', @@ -68,7 +70,8 @@ export const TAGS = [ ].map((tag) => 'uni-' + tag) export function isBuiltInComponent(tag: string) { - return BUILT_IN_TAGS.indexOf('uni-' + tag) !== -1 + // h5 平台会被转换为 v-uni- + return BUILT_IN_TAGS.indexOf('uni-' + tag.replace('v-uni-', '')) !== -1 } export function isH5CustomElement(tag: string) { -- GitLab