From 5ba56f144ebad8ac6feaca3512415db6f35d6f5e Mon Sep 17 00:00:00 2001 From: fxy060608 Date: Fri, 26 Mar 2021 11:45:30 +0800 Subject: [PATCH] refactor: tsx --- packages/uni-h5/dist/uni-h5.esm.js | 68 +++++++++---------- .../framework/components/app/layout/index.tsx | 19 +++--- .../src/framework/components/app/test.vue | 15 ++-- .../components/page/{index.ts => index.tsx} | 14 ++-- .../src/framework/components/page/pageBody.ts | 62 ----------------- .../framework/components/page/pageBody.tsx | 53 +++++++++++++++ .../framework/components/page/pageHead.tsx | 34 +++++----- .../uni-h5/src/framework/plugin/components.ts | 3 +- 8 files changed, 125 insertions(+), 143 deletions(-) rename packages/uni-h5/src/framework/components/page/{index.ts => index.tsx} (74%) delete mode 100644 packages/uni-h5/src/framework/components/page/pageBody.ts create mode 100644 packages/uni-h5/src/framework/components/page/pageBody.tsx diff --git a/packages/uni-h5/dist/uni-h5.esm.js b/packages/uni-h5/dist/uni-h5.esm.js index 690c2b596..af341779b 100644 --- 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 }); diff --git a/packages/uni-h5/src/framework/components/app/layout/index.tsx b/packages/uni-h5/src/framework/components/app/layout/index.tsx index 5c5fb88bf..a241eed61 100644 --- 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__) { diff --git a/packages/uni-h5/src/framework/components/app/test.vue b/packages/uni-h5/src/framework/components/app/test.vue index d534ecb6f..3fbc81589 100644 --- a/packages/uni-h5/src/framework/components/app/test.vue +++ b/packages/uni-h5/src/framework/components/app/test.vue @@ -1,13 +1,8 @@ diff --git a/packages/uni-h5/src/framework/components/page/index.ts b/packages/uni-h5/src/framework/components/page/index.tsx similarity index 74% rename from packages/uni-h5/src/framework/components/page/index.ts rename to packages/uni-h5/src/framework/components/page/index.tsx index 2523d25a1..7109641e8 100644 --- a/packages/uni-h5/src/framework/components/page/index.ts +++ b/packages/uni-h5/src/framework/components/page/index.tsx @@ -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), - ]) + + + {createPageBodyVNode(ctx)} + ) }, }) -function createPageHeadVNode() { - return createVNode(PageHead) -} - function createPageBodyVNode(ctx: SetupContext) { return ( openBlock(), diff --git a/packages/uni-h5/src/framework/components/page/pageBody.ts b/packages/uni-h5/src/framework/components/page/pageBody.ts deleted file mode 100644 index 5e4e910e8..000000000 --- a/packages/uni-h5/src/framework/components/page/pageBody.ts +++ /dev/null @@ -1,62 +0,0 @@ -import { - ref, - Fragment, - openBlock, - renderSlot, - createBlock, - createVNode, - defineComponent, - createCommentVNode, - Ref, -} from 'vue' - -import { usePageMeta } from '../../plugin/provide' - -import PageRefresh from './page-refresh/component.vue' - -import { usePageRefresh } from './page-refresh' - -export default defineComponent({ - name: 'PageBody', - setup(props, ctx) { - const pageMeta = __UNI_FEATURE_PULL_DOWN_REFRESH__ - ? usePageMeta() - : undefined - - const refreshRef = __UNI_FEATURE_PULL_DOWN_REFRESH__ ? ref(null) : undefined - 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'), - ]), - ]), - ]) - ) - }, -}) - -function createPageRefreshVNode( - refreshRef: Ref, - pageMeta: UniApp.PageRouteMeta -) { - if (!__UNI_FEATURE_PULL_DOWN_REFRESH__) { - return createCommentVNode('', true) - } - if (!pageMeta.enablePullDownRefresh) { - return createCommentVNode('', true) - } - return createVNode( - PageRefresh, - { ref: refreshRef }, - null, - 512 /* NEED_PATCH */ - ) -} diff --git a/packages/uni-h5/src/framework/components/page/pageBody.tsx b/packages/uni-h5/src/framework/components/page/pageBody.tsx new file mode 100644 index 000000000..1db4052e8 --- /dev/null +++ b/packages/uni-h5/src/framework/components/page/pageBody.tsx @@ -0,0 +1,53 @@ +import { + ref, + Fragment, + openBlock, + renderSlot, + createBlock, + createVNode, + defineComponent, + createCommentVNode, + Ref, + VNodeProps, +} from 'vue' + +import { usePageMeta } from '../../plugin/provide' + +import PageRefresh from './page-refresh/component.vue' + +import { usePageRefresh } from './page-refresh' + +export default defineComponent({ + name: 'PageBody', + setup(props, ctx) { + const pageMeta = (__UNI_FEATURE_PULL_DOWN_REFRESH__ && + usePageMeta()) as UniApp.PageRouteMeta + + const refreshRef = (__UNI_FEATURE_PULL_DOWN_REFRESH__ && + ref(null)) as Ref + + const pageRefresh = + __UNI_FEATURE_PULL_DOWN_REFRESH__ && pageMeta.enablePullDownRefresh + ? usePageRefresh(refreshRef) + : null + + return () => { + const pageRefreshTsx = createPageRefreshTsx(refreshRef, pageMeta) + return ( + <> + {pageRefreshTsx} + + {renderSlot(ctx.slots, 'default')} + + + ) + } + }, +}) + +function createPageRefreshTsx(refreshRef: Ref, pageMeta: UniApp.PageRouteMeta) { + if (!__UNI_FEATURE_PULL_DOWN_REFRESH__ || !pageMeta.enablePullDownRefresh) { + return null + } + return +} diff --git a/packages/uni-h5/src/framework/components/page/pageHead.tsx b/packages/uni-h5/src/framework/components/page/pageHead.tsx index 47a8cc77e..d889a685e 100644 --- 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 () => ( - -
-
- {backButtonJsx} - {...leftButtonsJsx} + return () => { + // 单页面无需back按钮 + const backButtonJsx = __UNI_FEATURE_PAGES__ + ? createBackButtonJsx(navigationBar) + : null + const leftButtonsJsx = __UNI_FEATURE_NAVIGATIONBAR_BUTTONS__ + ? createButtonsJsx('left', navigationBar) + : [] + return ( + +
+
+ {backButtonJsx} + {...leftButtonsJsx} +
-
- - ) + + ) + } }, }) diff --git a/packages/uni-h5/src/framework/plugin/components.ts b/packages/uni-h5/src/framework/plugin/components.ts index 340ccece6..2cca7fa65 100644 --- 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) } -- GitLab