refactor: tsx

5ba56f14 · fxy060608 · ad78aea8 · 5ba56f14 · 5ba56f14 · 5ba56f14
7 changed file
--- a/packages/uni-h5/dist/uni-h5.esm.js
+++ b/packages/uni-h5/dist/uni-h5.esm.js
@@ -884,7 +884,10 @@ var Layout = defineComponent({
    return () => {
      const layoutTsx = createLayoutTsx(keepAliveRoute);
      const tabBarTsx = __UNI_FEATURE_TABBAR__ && createTabBarTsx(route);
-      return [layoutTsx, tabBarTsx].filter(Boolean);
+      if (!tabBarTsx) {
+        return layoutTsx;
+      }
+      return [layoutTsx, tabBarTsx];
    };
  }
 });
@@ -8041,16 +8044,18 @@ var PageHead = defineComponent({
      clazz,
      style
    } = usePageHead(navigationBar);
-    const backButtonJsx = __UNI_FEATURE_PAGES__ ? createBackButtonJsx(navigationBar) : null;
-    const leftButtonsJsx = __UNI_FEATURE_NAVIGATIONBAR_BUTTONS__ ? createButtonsJsx("left", navigationBar) : [];
-    return () => createVNode("uni-page-head", {
-      "uni-page-head-type": navigationBar.type
-    }, [createVNode("div", {
-      class: clazz.value,
-      style: style.value
-    }, [createVNode("div", {
-      class: "uni-page-head-hd"
-    }, [backButtonJsx, ...leftButtonsJsx])], 6)], 8, ["uni-page-head-type"]);
+    return () => {
+      const backButtonJsx = __UNI_FEATURE_PAGES__ ? createBackButtonJsx(navigationBar) : null;
+      const leftButtonsJsx = __UNI_FEATURE_NAVIGATIONBAR_BUTTONS__ ? createButtonsJsx("left", navigationBar) : [];
+      return createVNode("uni-page-head", {
+        "uni-page-head-type": navigationBar.type
+      }, [createVNode("div", {
+        class: clazz.value,
+        style: style.value
+      }, [createVNode("div", {
+        class: "uni-page-head-hd"
+      }, [backButtonJsx, ...leftButtonsJsx])], 6)], 8, ["uni-page-head-type"]);
+    };
  }
 });
 function createBackButtonJsx(navigationBar) {
@@ -8361,43 +8366,34 @@ function usePageRefresh(refreshRef) {
 var PageBody = defineComponent({
  name: "PageBody",
  setup(props, ctx) {
-    const pageMeta = __UNI_FEATURE_PULL_DOWN_REFRESH__ ? usePageMeta() : void 0;
-    const refreshRef = __UNI_FEATURE_PULL_DOWN_REFRESH__ ? ref(null) : void 0;
+    const pageMeta = __UNI_FEATURE_PULL_DOWN_REFRESH__ && usePageMeta();
+    const refreshRef = __UNI_FEATURE_PULL_DOWN_REFRESH__ && ref(null);
    const pageRefresh = __UNI_FEATURE_PULL_DOWN_REFRESH__ && pageMeta.enablePullDownRefresh ? usePageRefresh(refreshRef) : null;
-    return () => (openBlock(), createBlock(Fragment, null, [
-      createPageRefreshVNode(refreshRef, pageMeta),
-      createVNode("uni-page-wrapper", pageRefresh, [
-        createVNode("uni-page-body", null, [
-          renderSlot(ctx.slots, "default")
-        ])
-      ])
-    ]));
+    return () => {
+      const pageRefreshTsx = createPageRefreshTsx(refreshRef, pageMeta);
+      return createVNode(Fragment, null, [pageRefreshTsx, createVNode("uni-page-wrapper", pageRefresh, [createVNode("uni-page-body", null, [renderSlot(ctx.slots, "default")])], 16)]);
+    };
  }
 });
-function createPageRefreshVNode(refreshRef, pageMeta) {
-  if (!__UNI_FEATURE_PULL_DOWN_REFRESH__) {
-    return createCommentVNode("", true);
-  }
-  if (!pageMeta.enablePullDownRefresh) {
-    return createCommentVNode("", true);
+function createPageRefreshTsx(refreshRef, pageMeta) {
+  if (!__UNI_FEATURE_PULL_DOWN_REFRESH__ || !pageMeta.enablePullDownRefresh) {
+    return null;
  }
-  return createVNode(_sfc_main$2, {ref: refreshRef}, null, 512);
+  return createVNode(_sfc_main$2, {
+    ref: refreshRef
+  }, null, 512);
 }
 var index = defineComponent({
  name: "Page",
  setup(props, ctx) {
    providePageMeta();
-    return () => (openBlock(), createBlock("uni-page", null, [
-      createPageHeadVNode(),
-      createPageBodyVNode(ctx)
-    ]));
+    return () => createVNode("uni-page", null, [createVNode(PageHead, null, null), createPageBodyVNode(ctx)]);
  }
 });
-function createPageHeadVNode() {
-  return createVNode(PageHead);
-}
 function createPageBodyVNode(ctx) {
-  return openBlock(), createBlock(PageBody, {key: 0}, {
+  return openBlock(), createBlock(PageBody, {
+    key: 0
+  }, {
    default: withCtx(() => [renderSlot(ctx.slots, "page")]),
    _: 3
  });

--- a/packages/uni-h5/src/framework/components/app/layout/index.tsx
+++ b/packages/uni-h5/src/framework/components/app/layout/index.tsx
@@ -25,8 +25,10 @@ export default defineComponent({
  },
  emits: ['change'],
  setup() {
-    const route = __UNI_FEATURE_TABBAR__ && useRoute()
-    const keepAliveRoute = __UNI_FEATURE_PAGES__ && useKeepAliveRoute()
+    const route = (__UNI_FEATURE_TABBAR__ &&
+      useRoute()) as RouteLocationNormalizedLoaded
+    const keepAliveRoute = (__UNI_FEATURE_PAGES__ &&
+      useKeepAliveRoute()) as KeepAliveRoute
    const topWindow = __UNI_FEATURE_TOPWINDOW__ && useTopWindow()
    const leftWindow = __UNI_FEATURE_LEFTWINDOW__ && useLeftWindow()
    const rightWindow = __UNI_FEATURE_RIGHTWINDOW__ && useRightWindow()
@@ -37,22 +39,23 @@ export default defineComponent({
        leftWindow,
        rightWindow
      )
-      const tabBarTsx =
-        __UNI_FEATURE_TABBAR__ &&
-        createTabBarTsx(route as RouteLocationNormalizedLoaded)
-      return [layoutTsx, tabBarTsx].filter(Boolean)
+      const tabBarTsx = __UNI_FEATURE_TABBAR__ && createTabBarTsx(route)
+      if (!tabBarTsx) {
+        return layoutTsx
+      }
+      return [layoutTsx, tabBarTsx]
    }
  },
 })

 function createLayoutTsx(
-  keepAliveRoute: KeepAliveRoute | false,
+  keepAliveRoute: KeepAliveRoute,
  topWindow?: unknown,
  leftWindow?: unknown,
  rightWindow?: unknown
 ) {
  const routerVNode = __UNI_FEATURE_PAGES__
-    ? createRouterViewVNode(keepAliveRoute as KeepAliveRoute)
+    ? createRouterViewVNode(keepAliveRoute)
    : createPageVNode()
  // 非响应式
  if (!__UNI_FEATURE_RESPONSIVE__) {

--- a/packages/uni-h5/src/framework/components/app/test.vue
+++ b/packages/uni-h5/src/framework/components/app/test.vue
 <template>
-  <uni-layout>
-    <uni-top-window> </uni-top-window>
-    <uni-content>
-      <uni-main>
-        <keep-alive>
-          <router-view />
-        </keep-alive>
-      </uni-main>
-    </uni-content>
-  </uni-layout>
+  <uni-page-wrapper>
+    <uni-page-body>
+      <slot />
+    </uni-page-body>
+  </uni-page-wrapper>
 </template>

--- a/packages/uni-h5/src/framework/components/page/index.ts
+++ b/packages/uni-h5/src/framework/components/page/index.ts
@@ -3,7 +3,6 @@ import {
  openBlock,
  renderSlot,
  createBlock,
-  createVNode,
  SetupContext,
  defineComponent,
 } from 'vue'
@@ -17,19 +16,14 @@ export default defineComponent({
  setup(props, ctx) {
    providePageMeta()
    return () => (
-      openBlock(),
-      createBlock('uni-page', null, [
-        createPageHeadVNode(),
-        createPageBodyVNode(ctx),
-      ])
+      <uni-page>
+        <PageHead />
+        {createPageBodyVNode(ctx)}
+      </uni-page>
    )
  },
 })

-function createPageHeadVNode() {
-  return createVNode(PageHead)
-}
-
 function createPageBodyVNode(ctx: SetupContext) {
  return (
    openBlock(),

--- a/packages/uni-h5/src/framework/components/page/pageBody.ts
+++ b/packages/uni-h5/src/framework/components/page/pageBody.ts
@@ -8,6 +8,7 @@ import {
  defineComponent,
  createCommentVNode,
  Ref,
+  VNodeProps,
 } from 'vue'

 import { usePageMeta } from '../../plugin/provide'
@@ -19,44 +20,34 @@ import { usePageRefresh } from './page-refresh'
 export default defineComponent({
  name: 'PageBody',
  setup(props, ctx) {
-    const pageMeta = __UNI_FEATURE_PULL_DOWN_REFRESH__
-      ? usePageMeta()
-      : undefined
+    const pageMeta = (__UNI_FEATURE_PULL_DOWN_REFRESH__ &&
+      usePageMeta()) as UniApp.PageRouteMeta
+
+    const refreshRef = (__UNI_FEATURE_PULL_DOWN_REFRESH__ &&
+      ref(null)) as Ref<null>

-    const refreshRef = __UNI_FEATURE_PULL_DOWN_REFRESH__ ? ref(null) : undefined
    const pageRefresh =
-      __UNI_FEATURE_PULL_DOWN_REFRESH__ && pageMeta!.enablePullDownRefresh
-        ? usePageRefresh(refreshRef!)
+      __UNI_FEATURE_PULL_DOWN_REFRESH__ && pageMeta.enablePullDownRefresh
+        ? usePageRefresh(refreshRef)
        : null

-    return () => (
-      openBlock(),
-      createBlock(Fragment, null, [
-        createPageRefreshVNode(refreshRef!, pageMeta!),
-        createVNode('uni-page-wrapper', pageRefresh, [
-          createVNode('uni-page-body', null, [
-            renderSlot(ctx.slots, 'default'),
-          ]),
-        ]),
-      ])
-    )
+    return () => {
+      const pageRefreshTsx = createPageRefreshTsx(refreshRef, pageMeta)
+      return (
+        <>
+          {pageRefreshTsx}
+          <uni-page-wrapper {...pageRefresh}>
+            <uni-page-body>{renderSlot(ctx.slots, 'default')}</uni-page-body>
+          </uni-page-wrapper>
+        </>
+      )
+    }
  },
 })

-function createPageRefreshVNode(
-  refreshRef: Ref,
-  pageMeta: UniApp.PageRouteMeta
-) {
-  if (!__UNI_FEATURE_PULL_DOWN_REFRESH__) {
-    return createCommentVNode('', true)
-  }
-  if (!pageMeta.enablePullDownRefresh) {
-    return createCommentVNode('', true)
+function createPageRefreshTsx(refreshRef: Ref, pageMeta: UniApp.PageRouteMeta) {
+  if (!__UNI_FEATURE_PULL_DOWN_REFRESH__ || !pageMeta.enablePullDownRefresh) {
+    return null
  }
-  return createVNode(
-    PageRefresh,
-    { ref: refreshRef },
-    null,
-    512 /* NEED_PATCH */
-  )
+  return <PageRefresh ref={refreshRef} />
 }
--- a/packages/uni-h5/src/framework/components/page/pageHead.tsx
+++ b/packages/uni-h5/src/framework/components/page/pageHead.tsx
@@ -9,23 +9,25 @@ export default defineComponent({
    const navigationBar = pageMeta.navigationBar
    UniServiceJSBridge.emit('onNavigationBarChange', navigationBar.titleText)
    const { clazz, style } = usePageHead(navigationBar)
-    // 单页面无需back按钮
-    const backButtonJsx = __UNI_FEATURE_PAGES__
-      ? createBackButtonJsx(navigationBar)
-      : null
-    const leftButtonsJsx = __UNI_FEATURE_NAVIGATIONBAR_BUTTONS__
-      ? createButtonsJsx('left', navigationBar)
-      : []
-    return () => (
-      <uni-page-head uni-page-head-type={navigationBar.type}>
-        <div class={clazz.value} style={style.value}>
-          <div class="uni-page-head-hd">
-            {backButtonJsx}
-            {...leftButtonsJsx}
+    return () => {
+      // 单页面无需back按钮
+      const backButtonJsx = __UNI_FEATURE_PAGES__
+        ? createBackButtonJsx(navigationBar)
+        : null
+      const leftButtonsJsx = __UNI_FEATURE_NAVIGATIONBAR_BUTTONS__
+        ? createButtonsJsx('left', navigationBar)
+        : []
+      return (
+        <uni-page-head uni-page-head-type={navigationBar.type}>
+          <div class={clazz.value} style={style.value}>
+            <div class="uni-page-head-hd">
+              {backButtonJsx}
+              {...leftButtonsJsx}
+            </div>
          </div>
-        </div>
-      </uni-page-head>
-    )
+        </uni-page-head>
+      )
+    }
  },
 })


--- a/packages/uni-h5/src/framework/plugin/components.ts
+++ b/packages/uni-h5/src/framework/plugin/components.ts
@@ -3,9 +3,10 @@ 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)
 }