From 0a421518cf7d5eae2aab820a5c08c668cff8a059 Mon Sep 17 00:00:00 2001
From: "wuyue.xht" <wuyue.xht@alibaba-inc.com>
Date: Sun, 19 Apr 2020 22:39:56 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=E7=BC=96=E8=AF=91?=
 =?UTF-8?q?=E6=B8=B2=E6=9F=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/runtime/package.json                 |  5 +-
 .../runtime/src/core/provider/react/index.ts  | 66 ++++++++++++-------
 packages/runtime/src/core/run.ts              | 27 ++++----
 3 files changed, 59 insertions(+), 39 deletions(-)

diff --git a/packages/runtime/package.json b/packages/runtime/package.json
index 191b3e633..2c667549f 100644
--- a/packages/runtime/package.json
+++ b/packages/runtime/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ali/lowcode-runtime",
-  "version": "0.8.9",
+  "version": "0.8.12",
   "description": "Runtime for Ali lowCode engine",
   "files": [
     "es",
@@ -25,7 +25,8 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@ali/recore": "^1.6.9"
+    "@ali/recore": "^1.6.9",
+    "@ali/offline-events": "^1.0.0"
   },
   "devDependencies": {
     "@alib/build-scripts": "^0.1.18",
diff --git a/packages/runtime/src/core/provider/react/index.ts b/packages/runtime/src/core/provider/react/index.ts
index 3bff84f94..1c0a3fb07 100644
--- a/packages/runtime/src/core/provider/react/index.ts
+++ b/packages/runtime/src/core/provider/react/index.ts
@@ -1,4 +1,4 @@
-import { createElement, ReactElement } from 'react';
+import { createElement, ReactType, ReactElement } from 'react';
 import { Router } from '@ali/recore';
 import app from '../../index';
 import Provider from '..';
@@ -7,33 +7,66 @@ import LazyComponent from './lazy-component';
 export default class ReactProvider extends Provider {
   // 定制构造根组件的逻辑，如切换路由机制
   createApp() {
+    const RouterView = this.getRouterView();
+    let App;
+    const layoutConfig = this.getLayoutConfig();
+    if (!layoutConfig || !layoutConfig.componentName) {
+      App = (props: any) => (RouterView ? createElement(RouterView, { ...props }) : null);
+      return App;
+    }
+    const { componentName: layoutName, props: layoutProps } = layoutConfig;
+    const { content: Layout, props: extraLayoutProps } = app.getLayout(layoutName) || {};
+    const sectionalRender = this.isSectionalRender();
+    if (!sectionalRender && Layout) {
+      App = (props: any) =>
+        createElement(
+          Layout,
+          { ...layoutProps, ...extraLayoutProps },
+          RouterView ? createElement(RouterView, props) : null,
+        );
+    } else {
+      App = (props: any) => (RouterView ? createElement(RouterView, props) : null);
+    }
+    return App;
+  }
+
+  // 内置实现 for 动态化渲染
+  getRouterView(): ReactType | null {
     const routerConfig = this.getRouterConfig();
     if (!routerConfig) {
-      return;
+      return null;
     }
-    const routes: Array<{ path: string; children: any; exact: boolean; keepAlive: boolean }> = [];
-    let homePageId = '';
+    const routes: Array<{
+      path: string;
+      children: any;
+      exact: boolean;
+      defined: { keepAlive: boolean; [key: string]: any };
+    }> = [];
+    let homePageId = this.getHomePage();
     Object.keys(routerConfig).forEach((pageId: string, idx: number) => {
       if (!pageId) {
         return;
       }
       const path = routerConfig[pageId];
-      if (idx === 0 || path === '/') {
-        homePageId = pageId;
-      }
       routes.push({
         path,
         children: (props: any) => this.getLazyComponent(pageId, props),
         exact: true,
-        keepAlive: true,
+        defined: { keepAlive: true },
       });
+      if (homePageId) {
+        return;
+      }
+      if (idx === 0 || path === '/') {
+        homePageId = pageId;
+      }
     });
     if (homePageId) {
       routes.push({
         path: '**',
         children: (props: any) => this.getLazyComponent(homePageId, { ...props }),
         exact: true,
-        keepAlive: true,
+        defined: { keepAlive: true },
       });
     }
     const RouterView = (props: any) => {
@@ -45,20 +78,7 @@ export default class ReactProvider extends Provider {
         ...props,
       });
     };
-    let App;
-    const layoutConfig = this.getLayoutConfig();
-    if (!layoutConfig || !layoutConfig.componentName) {
-      App = (props: any) => createElement(RouterView, { ...props });
-      return App;
-    }
-    const { componentName: layoutName, props: layoutProps } = layoutConfig;
-    const Layout = app.getLayout(layoutName);
-    if (Layout) {
-      App = (props: any) => createElement(Layout, layoutProps, RouterView({ props }));
-    } else {
-      App = (props: any) => createElement(RouterView, props);
-    }
-    return App;
+    return RouterView;
   }
 
   getLazyComponent(pageId: string, props: any): ReactElement | null {
diff --git a/packages/runtime/src/core/run.ts b/packages/runtime/src/core/run.ts
index 3fd4a364e..7cc7ab98f 100644
--- a/packages/runtime/src/core/run.ts
+++ b/packages/runtime/src/core/run.ts
@@ -46,21 +46,20 @@ function transformConfig(config: IAppConfig | (() => IAppConfig)): IRecoreAppCon
   };
 }
 
-export default function run(config?: IAppConfig | (() => IAppConfig)) {
+export default function run() {
   const provider = app.getProvider();
-  if (config) {
-    config = transformConfig(config);
-    const App = provider.createApp();
-    runApp(App, config);
-    return;
+  if (!provider) {
+    throw new Error('');
   }
-  const promise = provider.async();
-  promise.then((config: IAppConfig) => {
-    if (!config) {
-      return;
-    }
-    const App = provider.createApp();
-    config = transformConfig(config);
-    runApp(App, config);
+  provider.onReady(() => {
+    const promise = provider.async();
+    promise.then((config: IAppConfig) => {
+      if (!config) {
+        return;
+      }
+      const App = provider.createApp();
+      config = transformConfig(config);
+      runApp(App, config);
+    });
   });
 }