From 3a1e9001496b521dfd3646c77f9b8fad2eb6e655 Mon Sep 17 00:00:00 2001
From: "wuyue.xht" <wuyue.xht@alibaba-inc.com>
Date: Tue, 17 Mar 2020 00:35:37 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0loading=E6=89=A9?=
 =?UTF-8?q?=E5=B1=95=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/runtime-framework/src/boot.ts        | 44 +++++++++++++++++++
 .../runtime-framework/src/lazyComponent.tsx   | 20 ++++++---
 packages/runtime-framework/src/trunk.ts       | 30 -------------
 3 files changed, 58 insertions(+), 36 deletions(-)
 create mode 100644 packages/runtime-framework/src/boot.ts
 delete mode 100644 packages/runtime-framework/src/trunk.ts

diff --git a/packages/runtime-framework/src/boot.ts b/packages/runtime-framework/src/boot.ts
new file mode 100644
index 000000000..2598b18fe
--- /dev/null
+++ b/packages/runtime-framework/src/boot.ts
@@ -0,0 +1,44 @@
+import { ComponentClass, FunctionComponent } from 'react';
+
+type TComponent = ComponentClass | FunctionComponent;
+
+class Trunk {
+  private renderer: TComponent | null = null;
+  private layouts: { [key: string]: TComponent } = {};
+  private loading: TComponent | null = null;
+
+  public registerRenderer(renderer: TComponent): any {
+    this.renderer = renderer;
+  }
+
+  public registerLayout(componentName: string, Layout: TComponent): any {
+    if (!componentName || !Layout) {
+      return;
+    }
+    this.layouts[componentName] = Layout;
+  }
+
+  public registerLoading(component: TComponent) {
+    if (!component) {
+      return;
+    }
+    this.loading = component;
+  }
+
+  public getLayout(componentName: string) {
+    if (!componentName) {
+      return;
+    }
+    return this.layouts[componentName];
+  }
+
+  public getRenderer(): TComponent | null {
+    return this.renderer;
+  }
+
+  public getLoading(): TComponent | null {
+    return this.loading;
+  }
+}
+
+export default new Trunk();
diff --git a/packages/runtime-framework/src/lazyComponent.tsx b/packages/runtime-framework/src/lazyComponent.tsx
index b7cfeed2c..b33d0b3df 100644
--- a/packages/runtime-framework/src/lazyComponent.tsx
+++ b/packages/runtime-framework/src/lazyComponent.tsx
@@ -1,5 +1,5 @@
 import { Component, createElement } from 'react';
-import Trunk from './trunk';
+import Boot from './boot';
 
 interface IProps {
   getPageData: () => any;
@@ -11,6 +11,8 @@ interface IState {
 }
 
 export default class LazyComponent extends Component<IProps, IState> {
+  private schema: object | null = null;
+
   constructor(props: IProps) {
     super(props);
     this.state = {
@@ -20,19 +22,25 @@ export default class LazyComponent extends Component<IProps, IState> {
 
   public async componentDidMount() {
     const { getPageData } = this.props;
-    if (getPageData) {
+    if (getPageData && !this.schema) {
       const schema = await getPageData();
+      this.schema = schema;
       this.setState({ schema });
     }
   }
 
   public render() {
-    const Renderer = Trunk.getRenderer();
-    if (!Renderer) {
-      return null;
-    }
     const { getPageData, ...restProps } = this.props;
     const { schema } = this.state;
+    const Renderer = Boot.getRenderer();
+    const Loading = Boot.getLoading();
+    if (!Renderer || !schema) {
+      if (!Loading) {
+        return null;
+      }
+      // loading扩展点
+      return createElement(Loading);
+    }
     return createElement(Renderer as any, { schema, ...restProps });
   }
 }
diff --git a/packages/runtime-framework/src/trunk.ts b/packages/runtime-framework/src/trunk.ts
deleted file mode 100644
index 7ef5975ac..000000000
--- a/packages/runtime-framework/src/trunk.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { ComponentClass } from 'react';
-
-class Trunk {
-  private renderer: ComponentClass | null = null;
-  private layouts: { [key: string]: ComponentClass } = {};
-
-  public registerRenderer(renderer: ComponentClass): any {
-    this.renderer = renderer;
-  }
-
-  public registerLayout(componentName: string, Layout: ComponentClass): any {
-    if (!componentName || !Layout) {
-      return;
-    }
-    this.layouts[componentName] = Layout;
-  }
-
-  public getLayout(componentName: string) {
-    if (!componentName) {
-      return;
-    }
-    return this.layouts[componentName];
-  }
-
-  public getRenderer(): ComponentClass | null {
-    return this.renderer;
-  }
-}
-
-export default new Trunk();