fix(h5): transform built-in components (#3088)

packages/uni-cli-shared/src/vue/transforms/index.ts

+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<Record<string, string>>(
+    (tags, tag) => ((tags[tag] = COMPONENT_PREFIX + tag), tags),
+    {}
+  )
+)
+
 export const transformMatchMedia = createTransformTag({
   'match-media': 'uni-match-media',
 })

packages/uni-h5-vite/__tests__/builtInComponents.spec.ts

+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: `<canvas/>`,
+        filename,
+        id: filename,
+        compilerOptions: {
+          ...compilerOptions,
+          bindingMetadata: {
+            canvas: BindingTypes.SETUP_REF,
+          },
+        },
+      }).code
+    ).toContain(`_resolveComponent("v-uni-canvas")`)
+  })
+})

packages/uni-h5-vite/src/plugin/uni.ts

 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,
   }
 }

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中

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

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;

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<T>(fn: (str: string) => T): (str: string) => T;

packages/uni-shared/dist/uni-shared.es.js

 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 };

packages/uni-shared/src/tags.ts

 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) {