feat: add defineBuiltInComponent,defineSystemComponent

packages/uni-cli-shared/src/json/pages.ts

@@ -124,6 +124,7 @@ function normalizeNavigationBar(
   pageStyle: Record<string, any>
 ): UniApp.PageNavigationBar {
   const navigationBar = Object.create(null) as UniApp.PageNavigationBar
+
   Object.keys(navigationBarMaps).forEach((name) => {
     if (hasOwn(pageStyle, name)) {
       // @ts-ignore

packages/uni-components/src/components/button/index.tsx

-import { defineComponent, inject } from 'vue'
+import { inject } from 'vue'
 import { useI18n, initI18nButtonMsgsOnce } from '@dcloudio/uni-core'
+import { defineBuiltInComponent } from '../../helpers/component'
 import { useHover } from '../../helpers/useHover'
 import { useBooleanAttr } from '../../helpers/useBooleanAttr'
 import { UniFormCtx, uniFormKey } from '../form'
 
-export default /*#__PURE__*/ defineComponent({
+export default /*#__PURE__*/ defineBuiltInComponent({
   name: 'Button',
   props: {
     id: {

packages/uni-components/src/components/checkbox-group/index.tsx

-import { defineComponent, inject, provide, ref } from 'vue'
+import { inject, provide, ref } from 'vue'
 import type { Ref, ExtractPropTypes, ComputedRef } from 'vue'
 import { PolySymbol } from '@dcloudio/uni-core'
 import { UniFormCtx, uniFormKey } from '../form'
@@ -7,6 +7,7 @@ import {
   useCustomEvent,
   EmitEvent,
 } from '../../helpers/useEvent'
+import { defineBuiltInComponent } from '../../helpers/component'
 
 export const uniCheckGroupKey = PolySymbol(__DEV__ ? 'uniCheckGroup' : 'ucg')
 
@@ -30,7 +31,7 @@ const props = {
 
 type CheckBoxGroupProps = ExtractPropTypes<typeof props>
 
-export default /*#__PURE__*/ defineComponent({
+export default /*#__PURE__*/ defineBuiltInComponent({
   name: 'CheckboxGroup',
   props,
   emits: ['change'],

packages/uni-components/src/components/checkbox/index.tsx

-import {
-  defineComponent,
-  onBeforeUnmount,
-  watch,
-  inject,
-  ref,
-  computed,
-} from 'vue'
+import { onBeforeUnmount, watch, inject, ref, computed } from 'vue'
 import type { Ref } from 'vue'
+import { defineBuiltInComponent } from '../../helpers/component'
 import { useListeners } from '../../helpers/useListeners'
 import { useBooleanAttr } from '../../helpers/useBooleanAttr'
 import { UniCheckGroupCtx, uniCheckGroupKey } from '../checkbox-group'
@@ -40,7 +34,7 @@ const props = {
   },
 }
 
-export default /*#__PURE__*/ defineComponent({
+export default /*#__PURE__*/ defineBuiltInComponent({
   name: 'Checkbox',
   props,
   setup(props, { slots }) {

packages/uni-components/src/components/editor/index.tsx

-import { defineComponent, onMounted, Ref, ref, watch } from 'vue'
+import { onMounted, Ref, ref, watch } from 'vue'
 import QuillClass, {
   QuillOptionsStatic,
   EventEmitter,
@@ -7,6 +7,7 @@ import QuillClass, {
 } from 'quill'
 import { useSubscribe } from '@dcloudio/uni-components'
 import { getRealPath } from '@dcloudio/uni-platform'
+import { defineBuiltInComponent } from '../../helpers/component'
 import { CustomEventTrigger, useCustomEvent } from '../../helpers/useEvent'
 import {
   props as keyboardProps,
@@ -441,7 +442,7 @@ const props = /*#__PURE__*/ Object.assign({}, keyboardProps, {
   },
 })
 
-export default /*#__PURE__*/ defineComponent({
+export default /*#__PURE__*/ defineBuiltInComponent({
   name: 'Editor',
   props,
   emit: ['ready', 'focus', 'blur', 'input', 'statuschange', ...keyboardEmit],

packages/uni-components/src/components/form/index.tsx

 import { PolySymbol } from '@dcloudio/uni-core'
-import { defineComponent, provide, SetupContext } from 'vue'
+import { provide, SetupContext } from 'vue'
+import { defineBuiltInComponent } from '../../helpers/component'
 
 export const uniFormKey = PolySymbol(__DEV__ ? 'uniForm' : 'uf')
 
@@ -15,7 +16,7 @@ interface UniFormFieldCtx {
   reset?: () => void
 }
 
-export default /*#__PURE__*/ defineComponent({
+export default /*#__PURE__*/ defineBuiltInComponent({
   name: 'Form',
   setup(_props, { slots, emit }) {
     provideForm(emit)

packages/uni-components/src/components/icon/index.tsx

-import { computed, defineComponent } from 'vue'
+import { computed } from 'vue'
 
 import { PRIMARY_COLOR } from '@dcloudio/uni-shared'
 import {
@@ -15,6 +15,8 @@ import {
   ICON_PATH_SUCCESS_NO_CIRCLE,
 } from '@dcloudio/uni-core'
 
+import { defineBuiltInComponent } from '../../helpers/component'
+
 const INFO_COLOR = '#10aeff'
 const WARN_COLOR = '#f76260'
 const GREY_COLOR = '#b2b2b2'
@@ -59,7 +61,7 @@ const ICONS = {
   },
 }
 
-export default /*#__PURE__*/ defineComponent({
+export default /*#__PURE__*/ defineBuiltInComponent({
   name: 'Icon',
   props: {
     type: {

packages/uni-components/src/components/image/index.tsx

@@ -6,10 +6,10 @@ import {
   reactive,
   onMounted,
   onBeforeUnmount,
-  defineComponent,
   ExtractPropTypes,
 } from 'vue'
 import { getRealPath } from '@dcloudio/uni-platform'
+import { defineBuiltInComponent } from '../../helpers/component'
 import { CustomEventTrigger, useCustomEvent } from '../../helpers/useEvent'
 import ResizeSensor from '../resize-sensor/index'
 
@@ -56,7 +56,7 @@ const IMAGE_MODES = {
   'bottom right': ['right bottom'],
 }
 
-export default /*#__PURE__*/ defineComponent({
+export default /*#__PURE__*/ defineBuiltInComponent({
   name: 'Image',
   props,
   setup(props, { emit }) {

packages/uni-components/src/components/input/index.tsx

-import { defineComponent, Ref, ref, computed } from 'vue'
+import { Ref, ref, computed } from 'vue'
+import { defineBuiltInComponent } from '../../helpers/component'
 import {
   props as fieldProps,
   emit as fieldEmit,
-  emit,
   useField,
 } from '../../helpers/useField'
 
@@ -13,7 +13,7 @@ const props = /*#__PURE__*/ Object.assign({}, fieldProps, {
   },
 })
 
-export default /*#__PURE__*/ defineComponent({
+export default /*#__PURE__*/ defineBuiltInComponent({
   name: 'Input',
   props,
   emit: ['confirm', ...fieldEmit],

packages/uni-components/src/components/label/index.tsx

-import { defineComponent, provide, computed } from 'vue'
+import { provide, computed } from 'vue'
 import { PolySymbol, useCurrentPageId } from '@dcloudio/uni-core'
-import { withWebEvent } from '@dcloudio/uni-components'
-
+import { withWebEvent } from '../../helpers/useEvent'
+import { defineBuiltInComponent } from '../../helpers/component'
 export const uniLabelKey = PolySymbol(__DEV__ ? 'uniLabel' : 'ul')
 const props = {
   for: {
@@ -10,7 +10,7 @@ const props = {
   },
 }
 
-export default /*#__PURE__*/ defineComponent({
+export default /*#__PURE__*/ defineBuiltInComponent({
   name: 'Label',
   props,
   setup(props, { emit, slots }) {

packages/uni-components/src/components/movable-area/index.tsx

 import {
   ref,
-  defineComponent,
   ExtractPropTypes,
   reactive,
   Ref,
@@ -9,7 +8,9 @@ import {
   markRaw,
   provide,
 } from 'vue'
-import { useAttrs, withWebEvent } from '@dcloudio/uni-components'
+import { defineBuiltInComponent } from '../../helpers/component'
+import { withWebEvent } from '../../helpers/useEvent'
+import { useAttrs } from '../../helpers/useAttrs'
 import { initScrollBounce, disableScrollBounce } from '../../helpers/scroll'
 import ResizeSensor from '../resize-sensor/index'
 import { flatVNode } from '../../helpers/flatVNode'
@@ -31,7 +32,7 @@ export interface MovableViewContext {
 export type AddMovableViewContext = (context: MovableViewContext) => void
 export type RemoveMovableViewContext = (context: MovableViewContext) => void
 
-export default /*#__PURE__*/ defineComponent({
+export default /*#__PURE__*/ defineBuiltInComponent({
   inheritAttrs: false,
   name: 'MovableArea',
   props,

packages/uni-components/src/components/movable-view/index.tsx

 import {
   ref,
-  defineComponent,
   ExtractPropTypes,
   Ref,
   onMounted,
@@ -9,6 +8,7 @@ import {
   watch,
   onUnmounted,
 } from 'vue'
+import { defineBuiltInComponent } from '../../helpers/component'
 import { initScrollBounce, disableScrollBounce } from '../../helpers/scroll'
 import { useTouchtrack, TouchtrackEvent } from '../../helpers/useTouchtrack'
 import ResizeSensor from '../resize-sensor/index'
@@ -82,7 +82,7 @@ const props = {
 type Props = ExtractPropTypes<typeof props>
 type RootRef = Ref<HTMLElement | null>
 
-export default /*#__PURE__*/ defineComponent({
+export default /*#__PURE__*/ defineBuiltInComponent({
   name: 'MovableView',
   props,
   emits: ['change', 'scale'],

packages/uni-components/src/components/picker-view-column/index.tsx

 import {
-  defineComponent,
   Ref,
   ref,
   watch,
@@ -11,6 +10,7 @@ import {
   ComponentInternalInstance,
   nextTick,
 } from 'vue'
+import { defineBuiltInComponent } from '../../helpers/component'
 import { useScroller } from '../../helpers/scroller'
 import { Friction } from '../../helpers/scroller/Friction'
 import { Spring } from '../../helpers/scroller/Spring'
@@ -86,7 +86,7 @@ function useCustomClick(dom: HTMLElement) {
   })
 }
 
-export default /*#__PURE__*/ defineComponent({
+export default /*#__PURE__*/ defineBuiltInComponent({
   name: 'PickerViewColumn',
   setup(props, { slots, emit }) {
     const rootRef: Ref<HTMLElement | null> = ref(null)

packages/uni-components/src/components/picker-view/index.tsx

 import {
-  defineComponent,
   Ref,
   ref,
   watch,
@@ -12,6 +11,7 @@ import {
   PropType,
   ComponentInternalInstance,
 } from 'vue'
+import { defineBuiltInComponent } from '../../helpers/component'
 import { flatVNode } from '../../helpers/flatVNode'
 import ResizeSensor from '../resize-sensor/index'
 import { useCustomEvent } from '../../helpers/useEvent'
@@ -83,7 +83,7 @@ export type GetPickerViewColumn = (
   columnInstance: ComponentInternalInstance
 ) => ComputedRef<number>
 
-export default /*#__PURE__*/ defineComponent({
+export default /*#__PURE__*/ defineBuiltInComponent({
   name: 'PickerView',
   props,
   emits: ['change', 'pickstart', 'pickend', 'update:value'],

packages/uni-components/src/components/progress/index.tsx

-import {
-  defineComponent,
-  ref,
-  reactive,
-  watch,
-  computed,
-  ExtractPropTypes,
-} from 'vue'
+import { PRIMARY_COLOR } from '@dcloudio/uni-shared'
+import { ref, reactive, watch, computed, ExtractPropTypes } from 'vue'
+
+import { defineBuiltInComponent } from '../../helpers/component'
 
 const VALUES = {
-  activeColor: '#007AFF',
+  activeColor: PRIMARY_COLOR,
   backgroundColor: '#EBEBEB',
   activeMode: 'backwards',
 }
@@ -64,7 +60,7 @@ const props = {
 type ProgressProps = ExtractPropTypes<typeof props>
 type ProgerssState = ReturnType<typeof useProgressState>
 
-export default /*#__PURE__*/ defineComponent({
+export default /*#__PURE__*/ defineBuiltInComponent({
   name: 'Progress',
   props,
   setup(props) {

packages/uni-components/src/components/radio-group/index.tsx

-import { defineComponent, inject, provide, ref, onMounted } from 'vue'
+import { inject, provide, ref, onMounted } from 'vue'
 import type { Ref, ExtractPropTypes, WritableComputedRef } from 'vue'
 import { PolySymbol } from '@dcloudio/uni-core'
 import { UniFormCtx, uniFormKey } from '../form'
+import { defineBuiltInComponent } from '../../helpers/component'
 import { CustomEventTrigger, useCustomEvent } from '../../helpers/useEvent'
 
 export const uniRadioGroupKey = PolySymbol(__DEV__ ? 'uniCheckGroup' : 'ucg')
@@ -26,7 +27,7 @@ const props = {
 
 type RadioGroupProps = ExtractPropTypes<typeof props>
 
-export default /*#__PURE__*/ defineComponent({
+export default /*#__PURE__*/ defineBuiltInComponent({
   name: 'RadioGroup',
   props,
   // emits: ['change'],

packages/uni-components/src/components/radio/index.tsx

-import {
-  defineComponent,
-  onBeforeUnmount,
-  watch,
-  inject,
-  ref,
-  computed,
-} from 'vue'
+import { onBeforeUnmount, watch, inject, ref, computed } from 'vue'
 import type { Ref } from 'vue'
+import { defineBuiltInComponent } from '../../helpers/component'
 import { useListeners } from '../../helpers/useListeners'
 import { useBooleanAttr } from '../../helpers/useBooleanAttr'
 import { UniRadioGroupCtx, uniRadioGroupKey } from '../radio-group'
@@ -40,7 +34,7 @@ const props = {
   },
 }
 
-export default /*#__PURE__*/ defineComponent({
+export default /*#__PURE__*/ defineBuiltInComponent({
   name: 'Radio',
   props,
   setup(props, { slots }) {

packages/uni-components/src/components/resize-sensor/index.tsx

@@ -6,12 +6,12 @@ import {
   nextTick,
   onMounted,
   onActivated,
-  defineComponent,
   SetupContext,
 } from 'vue'
 import { extend } from '@vue/shared'
+import { defineBuiltInComponent } from '../../helpers/component'
 
-export default /*#__PURE__*/ defineComponent({
+export default /*#__PURE__*/ defineBuiltInComponent({
   name: 'ResizeSensor',
   props: {
     initial: {

packages/uni-components/src/components/slider/index.tsx

-import {
-  computed,
-  defineComponent,
-  inject,
-  onMounted,
-  onBeforeUnmount,
-  ref,
-} from 'vue'
+import { computed, inject, onMounted, onBeforeUnmount, ref } from 'vue'
 import type { ExtractPropTypes, Ref } from 'vue'
+import { defineBuiltInComponent } from '../../helpers/component'
 import { useTouchtrack, TouchtrackEvent } from '../../helpers/useTouchtrack'
 import {
   CustomEventTrigger,
@@ -73,7 +67,7 @@ const props = {
 type SliderProps = ExtractPropTypes<typeof props>
 type HTMLRef = Ref<HTMLElement | null>
 
-export default /*#__PURE__*/ defineComponent({
+export default /*#__PURE__*/ defineBuiltInComponent({
   name: 'Slider',
   props,
   emits: ['changing', 'change'],

packages/uni-components/src/components/swiper-item/index.tsx

-import { defineComponent, Ref, ref, onMounted, onUnmounted, inject } from 'vue'
+import { Ref, ref, onMounted, onUnmounted, inject } from 'vue'
 import { AddSwiperContext, SwiperContext, RemoveSwiperContext } from '../swiper'
+import { defineBuiltInComponent } from '../../helpers/component'
 
 const props = {
   itemId: {
@@ -8,7 +9,7 @@ const props = {
   },
 }
 
-export default /*#__PURE__*/ defineComponent({
+export default /*#__PURE__*/ defineBuiltInComponent({
   name: 'SwiperItem',
   props,
   setup(props, { slots }) {

packages/uni-components/src/components/swiper/index.tsx

 import {
-  defineComponent,
   Ref,
   ref,
   watch,
@@ -14,6 +13,7 @@ import {
   SetupContext,
 } from 'vue'
 import { upx2px } from '@dcloudio/uni-api'
+import { defineBuiltInComponent } from '../../helpers/component'
 import { useCustomEvent, CustomEventTrigger } from '../../helpers/useEvent'
 import { useTouchtrack } from '../../helpers/useTouchtrack'
 import { flatVNode } from '../../helpers/flatVNode'
@@ -610,7 +610,7 @@ function useLayout(
   }
 }
 
-export default /*#__PURE__*/ defineComponent({
+export default /*#__PURE__*/ defineBuiltInComponent({
   name: 'Swiper',
   props,
   emits: [

packages/uni-components/src/components/switch/index.tsx

 import {
-  defineComponent,
   ref,
   onBeforeUnmount,
   watch,
@@ -8,7 +7,9 @@ import {
   ExtractPropTypes,
   Ref,
 } from 'vue'
-import { useCustomEvent, EmitEvent } from '@dcloudio/uni-components'
+import { defineBuiltInComponent } from '../../helpers/component'
+import { useCustomEvent, EmitEvent } from '../../helpers/useEvent'
+
 import { UniFormCtx, uniFormKey } from '../form'
 import { UniLabelCtx, uniLabelKey } from '../label'
 import { useListeners } from '../../helpers/useListeners'
@@ -47,7 +48,7 @@ const props = {
 
 type SwitchProps = ExtractPropTypes<typeof props>
 
-export default /*#__PURE__*/ defineComponent({
+export default /*#__PURE__*/ defineBuiltInComponent({
   name: 'Switch',
   props,
   emits: ['change'],

packages/uni-components/src/components/text/index.tsx

-import {
-  defineComponent,
-  VNode,
-  Component,
-  createTextVNode,
-  createVNode,
-} from 'vue'
+import { VNode, Component, createTextVNode, createVNode } from 'vue'
+import { defineBuiltInComponent } from '../../helpers/component'
 
 const SPACE_UNICODE = {
   ensp: '\u2002',
@@ -34,7 +29,7 @@ function normalizeText(text: string, { space, decode }: DecodeOptions) {
     .replace(/'/g, "'")
 }
 
-export default /*#__PURE__*/ defineComponent({
+export default /*#__PURE__*/ defineBuiltInComponent({
   name: 'Text',
   props: {
     selectable: {

packages/uni-components/src/components/textarea/index.tsx

-import { defineComponent, Ref, ref, computed, watch } from 'vue'
+import { Ref, ref, computed, watch } from 'vue'
+import { extend } from '@vue/shared'
+import { defineBuiltInComponent } from '../../helpers/component'
 import {
   props as fieldProps,
   emit as fieldEmit,
@@ -6,7 +8,7 @@ import {
 } from '../../helpers/useField'
 import ResizeSensor from '../resize-sensor/index'
 
-const props = /*#__PURE__*/ Object.assign({}, fieldProps, {
+const props = /*#__PURE__*/ extend({}, fieldProps, {
   placeholderClass: {
     type: String,
     default: 'input-placeholder',
@@ -21,7 +23,7 @@ const props = /*#__PURE__*/ Object.assign({}, fieldProps, {
   },
 })
 
-export default /*#__PURE__*/ defineComponent({
+export default /*#__PURE__*/ defineBuiltInComponent({
   name: 'Textarea',
   props,
   emit: ['confirm', 'linechange', ...fieldEmit],

packages/uni-components/src/components/view/index.tsx

 import { extend } from '@vue/shared'
-import { defineComponent } from 'vue'
 
+import { defineBuiltInComponent } from '../../helpers/component'
 import { hoverProps, useHover } from '../../helpers/useHover'
 
-export default /*#__PURE__*/ defineComponent({
+export default /*#__PURE__*/ defineBuiltInComponent({
   name: 'View',
   props: extend({}, hoverProps),
   setup(props, { slots }) {

packages/uni-components/src/helpers/component.ts

+import { ComponentOptions, defineComponent } from 'vue'
+/**
+ * 内置组件（对外，比如view）
+ * @param options
+ * @returns
+ */
+export const defineBuiltInComponent: typeof defineComponent = (
+  options: any
+) => {
+  // TODO 可能会补充特殊标记
+  return defineSystemComponent(options)
+}
+/**
+ * 系统组件（不对外，比如App,Page等）
+ * @param options
+ * @returns
+ */
+export const defineSystemComponent: typeof defineComponent = (options: any) => {
+  ;(options as ComponentOptions).compatConfig = {
+    MODE: 3, // 标记为vue3
+  }
+  return defineComponent(options)
+}

packages/uni-components/src/index.ts

@@ -15,3 +15,7 @@ export { useUserAction } from './helpers/useUserAction'
 export { useAttrs } from './helpers/useAttrs'
 export { useBooleanAttr } from './helpers/useBooleanAttr'
 export { useTouchtrack } from './helpers/useTouchtrack'
+export {
+  defineBuiltInComponent,
+  defineSystemComponent,
+} from './helpers/component'

packages/uni-core/src/view/plugin/componentInstance.ts

@@ -50,19 +50,9 @@ export function createNativeEvent(evt: Event | TouchEvent) {
   if (__PLATFORM__ === 'h5') {
     extend(event, {
       preventDefault() {
-        if (__DEV__) {
-          console.warn(
-            'preventDefault is only supported in h5, use `.prevent` instead.'
-          )
-        }
         return evt.preventDefault()
       },
       stopPropagation() {
-        if (__DEV__) {
-          console.warn(
-            'stopPropagation is only supported in h5, use `.stop` instead.'
-          )
-        }
         return evt.stopPropagation()
       },
     })

packages/uni-h5/src/framework/components/async-error/index.tsx

-import { defineComponent } from 'vue'
+import { defineSystemComponent } from '@dcloudio/uni-components'
 import { useI18n, initI18nAsyncMsgsOnce } from '@dcloudio/uni-core'
 
 function reload() {
   window.location.reload()
 }
 
-export default /*#__PURE__*/ defineComponent({
+export default /*#__PURE__*/ defineSystemComponent({
   name: 'AsyncError',
   setup() {
     initI18nAsyncMsgsOnce()

packages/uni-h5/src/framework/components/async-loading/index.ts

-import { createBlock, createVNode, defineComponent, openBlock } from 'vue'
-
+import { createBlock, createVNode, openBlock } from 'vue'
+import { defineSystemComponent } from '@dcloudio/uni-components'
 const clazz = { class: 'uni-async-loading' }
 const loadingVNode = /*#__PURE__*/ createVNode(
   'i',
@@ -8,7 +8,7 @@ const loadingVNode = /*#__PURE__*/ createVNode(
   -1 /* HOISTED */
 )
 
-export default /*#__PURE__*/ defineComponent({
+export default /*#__PURE__*/ defineSystemComponent({
   name: 'AsyncLoading',
   render() {
     return openBlock(), createBlock('div', clazz, [loadingVNode])

packages/uni-h5/src/framework/components/layout/index.tsx

@@ -8,7 +8,6 @@ import {
   createBlock,
   createVNode,
   SetupContext,
-  defineComponent,
   resolveComponent,
   ConcreteComponent,
   resolveDynamicComponent,
@@ -16,6 +15,7 @@ import {
 
 import { RouterView, useRoute } from 'vue-router'
 
+import { defineSystemComponent } from '@dcloudio/uni-components'
 import { updateCssVar } from '@dcloudio/uni-core'
 import { useTabBar } from '../../setup/state'
 import { useKeepAliveRoute } from '../../setup/page'
@@ -26,7 +26,7 @@ type KeepAliveRoute = ReturnType<typeof useKeepAliveRoute>
 
 const DEFAULT_CSS_VAR_VALUE = '0px'
 
-export default defineComponent({
+export default /*#__PURE__*/ defineSystemComponent({
   name: 'Layout',
   setup(_props, { emit }) {
     !__NODE_JS__ && initCssVar()

packages/uni-h5/src/framework/components/layout/tabBar.tsx

-import { watch, watchEffect, computed, defineComponent } from 'vue'
+import { watch, watchEffect, computed } from 'vue'
 import { RouteLocationNormalizedLoaded, useRoute } from 'vue-router'
 import { invokeHook, updatePageCssVar } from '@dcloudio/uni-core'
 import {
   API_ON_TAB_BAR_MID_BUTTON_TAP,
   OnTabBarMidButtonTap,
 } from '@dcloudio/uni-api'
+import { defineSystemComponent } from '@dcloudio/uni-components'
 import { getRealPath } from '../../../platform'
 import { useTabBar } from '../../setup/state'
 import { cssBackdropFilter } from '../../../service/api/base/canIUse'
 import { normalizeWindowBottom } from '../../../helpers/cssVar'
 
-export default /*#__PURE__*/ defineComponent({
+export default /*#__PURE__*/ defineSystemComponent({
   name: 'TabBar',
   setup() {
     const tabBar = useTabBar()!

packages/uni-h5/src/framework/components/page/index.ts

@@ -5,15 +5,15 @@ import {
   createVNode,
   createBlock,
   SetupContext,
-  defineComponent,
 } from 'vue'
+import { defineSystemComponent } from '@dcloudio/uni-components'
 
 import PageHead from './pageHead'
 import PageBody from './pageBody'
 import { providePageMeta } from '../../setup/provide'
 import { getStateId } from '../../../helpers/dom'
 
-export default defineComponent({
+export default defineSystemComponent({
   name: 'Page',
   setup(_props, ctx) {
     const { navigationBar } = providePageMeta(getStateId())

packages/uni-h5/src/framework/components/page/pageBody.tsx

-import { ref, renderSlot, defineComponent, Ref } from 'vue'
+import { ref, renderSlot, Ref } from 'vue'
+
+import { defineSystemComponent } from '@dcloudio/uni-components'
 
 import { usePageMeta } from '../../setup/provide'
 
@@ -6,7 +8,7 @@ import PageRefresh from './page-refresh/component.vue'
 
 import { usePageRefresh } from './page-refresh'
 
-export default defineComponent({
+export default defineSystemComponent({
   name: 'PageBody',
   setup(props, ctx) {
     const pageMeta = (__UNI_FEATURE_PULL_DOWN_REFRESH__ &&
@@ -27,12 +29,12 @@ export default defineComponent({
         __UNI_FEATURE_PULL_DOWN_REFRESH__ &&
         createPageRefreshTsx(refreshRef, pageMeta)
       return (
-        <div>
+        <>
           {pageRefreshTsx}
           <uni-page-wrapper {...pageRefresh}>
             <uni-page-body>{renderSlot(ctx.slots, 'default')}</uni-page-body>
           </uni-page-wrapper>
-        </div>
+        </>
       )
     }
   },

packages/uni-h5/src/framework/components/page/pageHead.tsx

-import { computed, defineComponent, onBeforeMount, ref } from 'vue'
+import { computed, onBeforeMount, ref } from 'vue'
 import { extend, isArray } from '@vue/shared'
-import { Input } from '@dcloudio/uni-components'
+import { defineSystemComponent, Input } from '@dcloudio/uni-components'
 import { getRealPath } from '@dcloudio/uni-platform'
 import {
   invokeHook,
@@ -30,7 +30,7 @@ const ICON_PATHS = {
     'M17.25 16.156l7.375-7.313q0.281-0.281 0.281-0.641t-0.281-0.641q-0.25-0.25-0.625-0.25t-0.625 0.25l-7.375 7.344-7.313-7.344q-0.25-0.25-0.625-0.25t-0.625 0.25q-0.281 0.25-0.281 0.625t0.281 0.625l7.313 7.344-7.375 7.344q-0.281 0.25-0.281 0.625t0.281 0.625q0.125 0.125 0.281 0.188t0.344 0.063q0.156 0 0.328-0.063t0.297-0.188l7.375-7.344 7.375 7.406q0.125 0.156 0.297 0.219t0.328 0.063q0.188 0 0.344-0.078t0.281-0.203q0.281-0.25 0.281-0.609t-0.281-0.641l-7.375-7.406z',
 }
 
-export default /*#__PURE__*/ defineComponent({
+export default /*#__PURE__*/ defineSystemComponent({
   name: 'PageHead',
   setup() {
     const headRef = ref(null)

packages/uni-h5/src/framework/setup/provide/page.ts

@@ -105,6 +105,7 @@ function normalizePageMeta(pageMeta: UniApp.PageRouteMeta) {
   if (__UNI_FEATURE_NAVIGATIONBAR__) {
     const { navigationBar } = pageMeta
     const { titleSize, titleColor, backgroundColor } = navigationBar
+    navigationBar.type = navigationBar.type || 'default'
     navigationBar.backButton = pageMeta.isQuit ? false : true
     navigationBar.titleSize = titleSize || '16px'
     navigationBar.titleColor = titleColor || '#fff'

packages/uni-h5/src/view/components/map/MapCircle.tsx

-import { defineComponent, inject, onUnmounted, watch } from 'vue'
-import { useCustomEvent } from '@dcloudio/uni-components'
+import { inject, onUnmounted, watch } from 'vue'
+import { defineSystemComponent, useCustomEvent } from '@dcloudio/uni-components'
 import { Map, Circle } from './qqMap/types'
 import { QQMapsExt } from './qqMap'
 
@@ -22,7 +22,7 @@ type OnMapReadyCallback = (
 ) => void
 type OnMapReady = (callback: OnMapReadyCallback) => void
 
-export default /*#__PURE__*/ defineComponent({
+export default /*#__PURE__*/ defineSystemComponent({
   name: 'MapCircle',
   props,
   setup(props) {

packages/uni-h5/src/view/components/map/MapControl.tsx

-import { defineComponent, inject, onUnmounted, watch, PropType } from 'vue'
+import { inject, onUnmounted, watch, PropType } from 'vue'
 import { getRealPath } from '@dcloudio/uni-platform'
-import { useCustomEvent } from '@dcloudio/uni-components'
+import { defineSystemComponent, useCustomEvent } from '@dcloudio/uni-components'
 import { Map } from './qqMap/types'
 import { QQMapsExt } from './qqMap'
 
@@ -27,7 +27,7 @@ type OnMapReadyCallback = (
 ) => void
 type OnMapReady = (callback: OnMapReadyCallback) => void
 
-export default /*#__PURE__*/ defineComponent({
+export default /*#__PURE__*/ defineSystemComponent({
   name: 'MapControl',
   props,
   setup(props) {

packages/uni-h5/src/view/components/map/MapLocation.tsx

-import { defineComponent, inject, onUnmounted, reactive } from 'vue'
-import { useCustomEvent } from '@dcloudio/uni-components'
+import { inject, onUnmounted, reactive } from 'vue'
+import { defineSystemComponent, useCustomEvent } from '@dcloudio/uni-components'
 //#if !_NODE_JS_
 import {
   onCompassChange,
@@ -38,7 +38,7 @@ type RemoveMapChidlContext = (context: Context) => void
 const ICON_PATH =
   'data:image/png;base64,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'
 
-export default /*#__PURE__*/ defineComponent({
+export default /*#__PURE__*/ defineSystemComponent({
   name: 'MapLocation',
   setup() {
     const state: State = reactive({

packages/uni-h5/src/view/components/map/MapMarker.tsx

-import { defineComponent, onUnmounted, inject, watch } from 'vue'
+import { onUnmounted, inject, watch } from 'vue'
 import { getRealPath } from '@dcloudio/uni-platform'
-import { useCustomEvent } from '@dcloudio/uni-components'
+import { defineSystemComponent, useCustomEvent } from '@dcloudio/uni-components'
 import { Map, Marker, Label, LatLng } from './qqMap/types'
 import { Callout, CalloutOptions, QQMapsExt } from './qqMap'
 
@@ -98,7 +98,7 @@ interface MarkerExt extends Marker {
   lastPosition?: LatLng
 }
 
-export default /*#__PURE__*/ defineComponent({
+export default /*#__PURE__*/ defineSystemComponent({
   name: 'MapMarker',
   props,
   setup(props) {

packages/uni-h5/src/view/components/map/MapPolyline.tsx

-import { defineComponent, inject, PropType, onUnmounted, watch } from 'vue'
-import { useCustomEvent } from '@dcloudio/uni-components'
+import { inject, PropType, onUnmounted, watch } from 'vue'
+import { defineSystemComponent, useCustomEvent } from '@dcloudio/uni-components'
 import { Map, LatLng, Polyline } from './qqMap/types'
 import { QQMapsExt } from './qqMap'
 
@@ -35,7 +35,7 @@ type OnMapReadyCallback = (
 ) => void
 type OnMapReady = (callback: OnMapReadyCallback) => void
 
-export default /*#__PURE__*/ defineComponent({
+export default /*#__PURE__*/ defineSystemComponent({
   name: 'MapPolyline',
   props,
   setup(props) {

packages/uni-h5/src/view/components/map/index.tsx

 import {
-  defineComponent,
   onMounted,
   reactive,
   Ref,
@@ -9,8 +8,11 @@ import {
   PropType,
   provide,
 } from 'vue'
-import { useCustomEvent } from '@dcloudio/uni-components'
-import { useSubscribe } from '@dcloudio/uni-components'
+import {
+  defineBuiltInComponent,
+  useSubscribe,
+  useCustomEvent,
+} from '@dcloudio/uni-components'
 import { callback } from '../../../helpers/utils'
 import { QQMapsExt, loadMaps } from './qqMap'
 import { Map } from './qqMap/types'
@@ -405,7 +407,7 @@ function useMap(
   }
 }
 
-export default /*#__PURE__*/ defineComponent({
+export default /*#__PURE__*/ defineBuiltInComponent({
   name: 'Map',
   props,
   emits: [

packages/uni-h5/src/view/components/video/index.tsx

 import {
-  defineComponent,
   withModifiers,
   Ref,
   ref,
@@ -14,6 +13,7 @@ import { passive } from '@dcloudio/uni-shared'
 import { useI18n, initI18nVideoMsgsOnce } from '@dcloudio/uni-core'
 import { getRealPath } from '@dcloudio/uni-platform'
 import {
+  defineBuiltInComponent,
   useSubscribe,
   useCustomEvent,
   EmitEvent,
@@ -786,7 +786,7 @@ const props = {
     default: true,
   },
 }
-export default /*#__PURE__*/ defineComponent({
+export default /*#__PURE__*/ defineBuiltInComponent({
   name: 'Video',
   props,
   emits: [

packages/uni-h5/src/view/components/web-view/index.tsx

+import { ref, onMounted, Ref, onActivated, onDeactivated, Teleport } from 'vue'
 import {
-  defineComponent,
-  ref,
-  onMounted,
-  Ref,
-  onActivated,
-  onDeactivated,
-  Teleport,
-} from 'vue'
-import { ResizeSensor, useAttrs } from '@dcloudio/uni-components'
+  defineBuiltInComponent,
+  ResizeSensor,
+  useAttrs,
+} from '@dcloudio/uni-components'
 import { getRealPath } from '@dcloudio/uni-platform'
 import { updateElementStyle } from '@dcloudio/uni-shared'
 
@@ -20,7 +16,7 @@ const props = {
 
 type RootRef = Ref<HTMLElement | null>
 
-export default /*#__PURE__*/ defineComponent({
+export default /*#__PURE__*/ defineBuiltInComponent({
   inheritAttrs: false,
   name: 'WebView',
   props,

packages/uni-h5/style/framework/base.css

@@ -19,12 +19,16 @@ uni-app,
 uni-page,
 uni-page-wrapper,
 uni-page-body {
-  position: relative;
   display: block;
   box-sizing: border-box;
   width: 100%;
 }
 
+uni-page-wrapper {
+  position: relative;
+}
+
+#app,
 uni-app,
 uni-page,
 uni-page-wrapper {
@@ -44,7 +48,7 @@ uni-page-wrapper {
 /* toast,modal,actionSheet,picker */
 .uni-fade-enter-active,
 .uni-fade-leave-active {
-  transition-duration: .25s;
+  transition-duration: 0.25s;
   transition-property: opacity;
   transition-timing-function: ease;
 }

packages/vite-plugin-uni/src/config/index.ts

@@ -28,7 +28,7 @@ export function createConfig(
     options.command = env.command
     options.platform = (process.env.UNI_PLATFORM as UniApp.PLATFORM) || 'h5'
     options.inputDir = normalizeInputDir(config)
-    options.vueOptions = initPluginVueOptions(options.vueOptions || {})
+    options.vueOptions = initPluginVueOptions(options)
     options.compiler.init()
     const define = createDefine(options, config, env)
     const { h5 } = parseManifestJsonOnce(options.inputDir)

packages/vite-plugin-uni/src/vue/compilerOptions.ts

-import { isArray } from '@vue/shared'
+import { extend, isArray } from '@vue/shared'
 import { CompilerOptions, SFCTemplateCompileOptions } from '@vue/compiler-sfc'
 
-import { Options as VueOptions } from '@vitejs/plugin-vue'
-
 import { isNativeTag } from '@dcloudio/uni-shared'
-import { EXTNAME_VUE_RE } from '@dcloudio/uni-cli-shared'
+import { EXTNAME_VUE_RE, parseCompatConfigOnce } from '@dcloudio/uni-cli-shared'
 
+import { block } from './transforms/block'
 import { matchMedia } from './transforms/matchMedia'
+import { VitePluginUniResolvedOptions } from '..'
+
 export const uniVueCompilerOptions: CompilerOptions = {
   isNativeTag,
-  nodeTransforms: [matchMedia],
+  nodeTransforms: [block, matchMedia],
 }
 
 export const uniVueTransformAssetUrls: SFCTemplateCompileOptions['transformAssetUrls'] =
@@ -36,7 +37,8 @@ export const uniVueTemplateOptions: Partial<SFCTemplateCompileOptions> = {
   transformAssetUrls: uniVueTransformAssetUrls,
 }
 
-export function initPluginVueOptions(vueOptions: VueOptions) {
+export function initPluginVueOptions(options: VitePluginUniResolvedOptions) {
+  const vueOptions = options.vueOptions || (options.vueOptions = {})
   if (!vueOptions.include) {
     vueOptions.include = []
   }
@@ -55,6 +57,15 @@ export function initPluginVueOptions(vueOptions: VueOptions) {
   if (!compilerOptions.nodeTransforms) {
     compilerOptions.nodeTransforms = []
   }
+
+  const compatConfig = parseCompatConfigOnce(options.inputDir)
+
+  compilerOptions.compatConfig = extend(
+    compilerOptions.compatConfig || {},
+    compatConfig
+  )
+
   compilerOptions.nodeTransforms.unshift(matchMedia)
+  compilerOptions.nodeTransforms.unshift(block)
   return vueOptions
 }

packages/vite-plugin-uni/src/vue/transforms/block.ts

+import { ElementNode, NodeTransform } from '@vue/compiler-core'
+
+export const block: NodeTransform = (node) => {
+  if ((node as ElementNode).tag !== 'block') {
+    return
+  }
+  const platform = process.env.UNI_PLATFORM
+  if (platform === 'h5' || platform === 'app') {
+    ;(node as ElementNode).tag = 'template'
+  }
+}