refactor: app => layout

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

-import { ref, computed, onMounted, defineComponent } from 'vue'
-
-import Layout from './layout'
-
-import { updateCssVar } from '../../../helpers/dom'
-
-const CSS_VARS = [
-  '--status-bar-height',
-  '--top-window-height',
-  '--window-left',
-  '--window-right',
-  '--window-margin',
-]
-
-export default defineComponent({
-  name: 'App',
-  setup() {
-    useCssVar()
-    useAppLifecycle()
-    const { clazz, onChange } = useAppClass()
-
-    return () => (
-      <uni-app class={clazz.value}>
-        <Layout onChange={onChange} />
-      </uni-app>
-    )
-  },
-})
-
-function useCssVar() {
-  CSS_VARS.forEach((name) => updateCssVar(name, '0px'))
-}
-
-function useAppLifecycle() {
-  onMounted(() => {
-    document.addEventListener('visibilitychange', function () {
-      if (document.visibilityState === 'visible') {
-        UniServiceJSBridge.emit('onAppEnterForeground')
-      } else {
-        UniServiceJSBridge.emit('onAppEnterBackground')
-      }
-    })
-  })
-}
-
-function useAppClass() {
-  const showTabBar = ref(false)
-  const showMaxWidth = ref(false)
-  function onChange(type: string, value: boolean) {
-    if (type === 'showTabBar') {
-      showTabBar.value = value
-    } else if (type === 'showMaxWidth') {
-      showMaxWidth.value = value
-    }
-  }
-  const clazz = computed(() => {
-    return {
-      'uni-app--showtabbar': showTabBar.value,
-      'uni-app--maxwidth': showMaxWidth.value,
-    }
-  })
-  return {
-    clazz,
-    onChange,
-  }
-}

packages/uni-h5/src/framework/components/app/observable.js

-import Vue from 'vue'
-__uniConfig.tabBar = Vue.observable(__uniConfig.tabBar || {})
-export const tabBar = __uniConfig.tabBar

packages/uni-h5/src/framework/components/app/test.vue

-<template>
-  <uni-page-wrapper>
-    <uni-page-body>
-      <slot />
-    </uni-page-body>
-  </uni-page-wrapper>
-</template>
-

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

@@ -12,24 +12,32 @@ import {
   ConcreteComponent,
   resolveDynamicComponent,
   SetupContext,
+  onMounted,
+  ref,
 } from 'vue'
 
 import { RouterView, useRoute } from 'vue-router'
 
-import { useTabBar } from '../../../plugin/state'
-import { useKeepAliveRoute } from '../../../plugin/page'
+import { useTabBar } from '../../plugin/state'
+import { useKeepAliveRoute } from '../../plugin/page'
 
-import TabBar from '../tabBar'
+import TabBar from './tabBar'
 
 type KeepAliveRoute = ReturnType<typeof useKeepAliveRoute>
 
+const CSS_VARS = [
+  '--status-bar-height',
+  '--top-window-height',
+  '--window-left',
+  '--window-right',
+  '--window-margin',
+]
+
 export default defineComponent({
   name: 'Layout',
-  props: {
-    onChange: Function,
-  },
-  emits: ['change'],
   setup(props, { emit }) {
+    useCssVar()
+    useAppLifecycle()
     const keepAliveRoute = (__UNI_FEATURE_PAGES__ &&
       useKeepAliveRoute()) as KeepAliveRoute
     const topWindow = __UNI_FEATURE_TOPWINDOW__ && useTopWindow()
@@ -37,6 +45,7 @@ export default defineComponent({
     const rightWindow = __UNI_FEATURE_RIGHTWINDOW__ && useRightWindow()
     const showTabBar = (__UNI_FEATURE_TABBAR__ &&
       useShowTabBar(emit)) as ComputedRef<boolean>
+    const clazz = useAppClass(showTabBar)
     return () => {
       const layoutTsx = createLayoutTsx(
         keepAliveRoute,
@@ -45,13 +54,37 @@ export default defineComponent({
         rightWindow
       )
       const tabBarTsx = __UNI_FEATURE_TABBAR__ && createTabBarTsx(showTabBar)
-      if (!tabBarTsx) {
-        return layoutTsx
-      }
-      return [layoutTsx, tabBarTsx]
+      return <uni-app class={clazz.value}>{[layoutTsx, tabBarTsx]}</uni-app>
     }
   },
 })
+import { updateCssVar } from '../../../helpers/dom'
+
+function useCssVar() {
+  CSS_VARS.forEach((name) => updateCssVar(name, '0px'))
+}
+
+function useAppLifecycle() {
+  onMounted(() => {
+    document.addEventListener('visibilitychange', function () {
+      if (document.visibilityState === 'visible') {
+        UniServiceJSBridge.emit('onAppEnterForeground')
+      } else {
+        UniServiceJSBridge.emit('onAppEnterBackground')
+      }
+    })
+  })
+}
+
+function useAppClass(showTabBar?: ComputedRef<boolean>) {
+  const showMaxWidth = ref(false)
+  return computed(() => {
+    return {
+      'uni-app--showtabbar': showTabBar && showTabBar.value,
+      'uni-app--maxwidth': showMaxWidth.value,
+    }
+  })
+}
 
 function createLayoutTsx(
   keepAliveRoute: KeepAliveRoute,
@@ -87,7 +120,7 @@ function createLayoutTsx(
   )
 }
 
-function useShowTabBar(emit: SetupContext['emit']) {
+function useShowTabBar(emit: SetupContext<['change']>['emit']) {
   const route = useRoute()
   const tabBar = useTabBar()!
   // TODO meida query

packages/uni-h5/src/framework/plugin/components.ts

-import { App } from 'vue'
-
-import { COMPONENT_NAME_PREFIX } from '@dcloudio/uni-shared'
-
-import AppComponent from '../components/app/index'
-// import TestComponent from '../components/app/test.vue'
-export function initSystemComponents(app: App) {
-  // @ts-ignore
-  AppComponent.name = COMPONENT_NAME_PREFIX + AppComponent.name
-  app.component(AppComponent.name, AppComponent)
-  // app.component(TestComponent.name, TestComponent)
-}

packages/uni-h5/src/framework/plugin/index.ts

@@ -4,7 +4,6 @@ import { initApp } from '@dcloudio/uni-vue'
 import { initView, initService } from '@dcloudio/uni-core'
 
 import { initRouter } from './router'
-import { initSystemComponents } from './components'
 import { initMixin } from './mixin'
 
 export default {
@@ -12,7 +11,6 @@ export default {
     initApp(app)
     initView(app)
     initService(app)
-    initSystemComponents(app)
 
     initMixin(app)
 

packages/uni-h5/src/index.ts

@@ -22,6 +22,7 @@ export * from './service/bridge'
 
 export { getApp, getCurrentPages } from './framework'
 
+export { default as LayoutComponent } from './framework/components/layout/index'
 export { default as PageComponent } from './framework/components/page/index'
 export { default as AsyncErrorComponent } from './framework/components/async-error/index.vue'
 export { default as AsyncLoadingComponent } from './framework/components/async-loading/index.vue'

packages/vite-plugin-uni/src/configResolved/plugins/appVue.ts

-import path from 'path'
-import slash from 'slash'
-import { Plugin } from 'vite'
-import { parseVueRequest } from '@dcloudio/uni-cli-shared'
-import { VitePluginUniResolvedOptions } from '../..'
-
-export function uniAppVuePlugin(options: VitePluginUniResolvedOptions): Plugin {
-  const appVuePath = slash(path.resolve(options.inputDir, 'App.vue'))
-  return {
-    name: 'vite:uni-app-vue',
-    transform(code, id) {
-      const { filename, query } = parseVueRequest(id)
-      //App.vue main request
-      if (filename === appVuePath && !query.vue) {
-        return {
-          code: `<template><VUniApp/></template>${code}`,
-          map: this.getCombinedSourcemap(),
-        }
-      }
-    },
-  }
-}

packages/vite-plugin-uni/src/configResolved/plugins/index.ts

@@ -8,7 +8,6 @@ import { uniPreCssPlugin } from './preCss'
 import { uniEasycomPlugin } from './easycom'
 import { InjectOptions, uniInjectPlugin } from './inject'
 
-import { uniAppVuePlugin } from './appVue'
 import { uniMainJsPlugin } from './mainJs'
 import { uniPagesJsonPlugin } from './pagesJson'
 import { uniManifestJsonPlugin } from './manifestJson'
@@ -86,7 +85,6 @@ export function resolvePlugins(
     0,
     'pre'
   )
-  addPlugin(plugins, uniAppVuePlugin(options), 1, 'pre')
   addPlugin(plugins, uniMainJsPlugin(options), 1, 'pre')
   addPlugin(plugins, uniPagesJsonPlugin(config, options), 1, 'pre')
   addPlugin(plugins, uniManifestJsonPlugin(options), 1, 'pre')

packages/vite-plugin-uni/src/configResolved/plugins/mainJs.ts

@@ -13,7 +13,7 @@ export function uniMainJsPlugin(options: VitePluginUniResolvedOptions): Plugin {
     transform(code, id) {
       if (id === mainJsPath || id === mainTsPath) {
         return {
-          code: `import { plugin } from '@dcloudio/uni-h5';import '${pagesJsonJsPath}';function createApp(rootComponent,rootProps){rootComponent && (rootComponent.mpType = 'app');return createVueApp(rootComponent, rootProps).use(plugin)};${code.replace(
+          code: `import { openBlock, createBlock } from 'vue';import { plugin,LayoutComponent } from '@dcloudio/uni-h5';import '${pagesJsonJsPath}';function createApp(rootComponent,rootProps){rootComponent && (rootComponent.mpType = 'app',rootComponent.render = ()=>(openBlock(),createBlock(LayoutComponent)));return createVueApp(rootComponent, rootProps).use(plugin)};${code.replace(
             'createApp',
             'createVueApp'
           )}`,