feat(core): #85 supports view components of the react lazy type

apps/docs/src/application-react/antd-menu/antd-menu-component.tsx

@@ -0,0 +1,18 @@
+import { MAIN_MENU_BAR } from '@difizen/mana-app';
+import * as React from 'react';
+import { forwardRef } from 'react';
+
+import { MenuRender } from '../workbench/menu/render.js';
+
+export const ManaMenubarComponent = forwardRef(function ManaMenubarComponent(
+  props,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  return (
+    <div ref={ref}>
+      <MenuRender path={MAIN_MENU_BAR} />
+    </div>
+  );
+});
+
+export default ManaMenubarComponent;

apps/docs/src/application-react/antd-menu/antd-menu-view.tsx

@@ -1,23 +1,10 @@
 import { MacCommandOutlined } from '@ant-design/icons';
-import { MAIN_MENU_BAR } from '@difizen/mana-app';
 import { BaseView, view } from '@difizen/mana-app';
 import { singleton } from '@difizen/mana-app';
 import { prop } from '@difizen/mana-app';
-import * as React from 'react';
-import { forwardRef } from 'react';
+import { lazy } from 'react';
 
-import { MenuRender } from '../workbench/menu/render.js';
-
-export const ManaMenubarComponent = forwardRef(function ManaMenubarComponent(
-  props,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
-  return (
-    <div ref={ref}>
-      <MenuRender path={MAIN_MENU_BAR} />
-    </div>
-  );
-});
+export const ManaMenubarComponent = lazy(() => import('./antd-menu-component.js'));
 
 @singleton()
 @view({ id: 'AntdMenuView', component: ManaMenubarComponent })

packages/mana-core/src/view/utils.tsx

@@ -14,6 +14,11 @@ export const isForwardRefComponent = (
     component.render !== undefined
   );
 };
+
+// 判断是否是懒加载组件的函数
+export const isLazyComponent = (component: any) => {
+  return component && component.$$typeof === Symbol.for('react.lazy');
+};
 /**
  * hack
  * @param component react component

packages/mana-core/src/view/view-container.tsx

@@ -1,11 +1,12 @@
 import { ObservableContext, useInject } from '@difizen/mana-observable';
 import type { Syringe } from '@difizen/mana-syringe';
 import * as React from 'react';
+import { Suspense } from 'react';
 
 import { useMount, useUnmount } from '../utils/hooks';
 
 import { useViewSize } from './hooks';
-import { isForwardRefComponent } from './utils';
+import { isForwardRefComponent, isLazyComponent } from './utils';
 import type { View } from './view-protocol';
 import type { ViewComponent } from './view-protocol';
 import { OriginViewComponent } from './view-protocol';
@@ -53,8 +54,50 @@ export const ViewContainer = React.forwardRef<HTMLDivElement, ViewContainerProps
     );
   },
 );
+
+export const LazyWrapper = (
+  ViewComponent:
+    | React.FC
+    | React.ForwardRefExoticComponent<any>
+    | React.LazyExoticComponent<React.FC | React.ForwardRefExoticComponent<any>>,
+) => {
+  const LazyWrapperRender: WrapperViewComponent = ({
+    children,
+    ...props
+  }: {
+    children: React.ReactNode;
+  }) => {
+    const containerRef = React.useRef<HTMLDivElement>(null);
+    if (isLazyComponent(ViewComponent)) {
+      return (
+        <Suspense fallback={<></>}>
+          <ViewContainer
+            ref={containerRef}
+            component={ViewComponent}
+            viewComponentProps={props}
+          >
+            {children}
+          </ViewContainer>
+        </Suspense>
+      );
+    }
+    return (
+      <ViewContainer
+        ref={containerRef}
+        component={ViewComponent}
+        viewComponentProps={props}
+      >
+        {children}
+      </ViewContainer>
+    );
+  };
+  return LazyWrapperRender;
+};
 export const ViewWrapper = (
-  ViewComponent: React.FC | React.ForwardRefExoticComponent<any>,
+  ViewComponent:
+    | React.FC
+    | React.ForwardRefExoticComponent<any>
+    | React.LazyExoticComponent<React.FC | React.ForwardRefExoticComponent<any>>,
   container: Syringe.Container,
 ) => {
   const ViewWrapperRender: WrapperViewComponent = ({
@@ -63,16 +106,10 @@ export const ViewWrapper = (
   }: {
     children: React.ReactNode;
   }) => {
-    const containerRef = React.useRef<HTMLDivElement>(null);
+    const ChildComponent = LazyWrapper(ViewComponent);
     return (
       <ObservableContext.Provider value={{ getContainer: () => container }}>
-        <ViewContainer
-          ref={containerRef}
-          component={ViewComponent}
-          viewComponentProps={props}
-        >
-          {children}
-        </ViewContainer>
+        <ChildComponent {...props}>{children}</ChildComponent>
       </ObservableContext.Provider>
     );
   };