From f179419757109325742a75deec16b008485c2ddb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=87=E7=BA=AF?= <harrywan@webank.com>
Date: Tue, 23 Mar 2021 20:41:53 +0800
Subject: [PATCH] =?UTF-8?q?feat(plugin-qiankun):=20=E4=B8=BB=E5=BA=94?=
 =?UTF-8?q?=E7=94=A8=E6=94=AF=E6=8C=81=E8=B7=AF=E7=94=B1=E4=B8=8A=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E5=BE=AE=E5=BA=94=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/fes-plugin-layout/src/index.js       |  1 -
 packages/fes-plugin-qiankun/src/main/index.js | 15 +++++
 .../src/main/modifyRoutes.js                  | 58 +++++++++++++++++++
 .../runtime/getMicroAppRouteComponent.tpl     | 11 ++++
 4 files changed, 84 insertions(+), 1 deletion(-)
 create mode 100644 packages/fes-plugin-qiankun/src/main/modifyRoutes.js
 create mode 100644 packages/fes-plugin-qiankun/src/main/runtime/getMicroAppRouteComponent.tpl

diff --git a/packages/fes-plugin-layout/src/index.js b/packages/fes-plugin-layout/src/index.js
index 860ac017..99325149 100644
--- a/packages/fes-plugin-layout/src/index.js
+++ b/packages/fes-plugin-layout/src/index.js
@@ -79,7 +79,6 @@ export default (api) => {
     api.addRuntimePlugin(() => `@@/${absRuntimeFilePath}`);
 
     // 把BaseLayout插入到路由配置中，作为根路由
-    // TODO: fes缺少修改路由API
     api.modifyRoutes(routes => [
         {
             path: '/',
diff --git a/packages/fes-plugin-qiankun/src/main/index.js b/packages/fes-plugin-qiankun/src/main/index.js
index c3964f04..83161a81 100644
--- a/packages/fes-plugin-qiankun/src/main/index.js
+++ b/packages/fes-plugin-qiankun/src/main/index.js
@@ -1,6 +1,7 @@
 import { readFileSync } from 'fs';
 import { join } from 'path';
 import { defaultMainRootId, defaultHistoryType } from '../constants';
+import modifyRoutes from './modifyRoutes';
 
 const namespace = 'plugin-qiankun/main';
 
@@ -21,9 +22,12 @@ export default function (api) {
         mountElementId: defaultMainRootId
     }));
 
+    modifyRoutes({ api, namespace });
+
     const absMicroAppPath = join(namespace, 'MicroApp.js');
     const absRuntimePath = join(namespace, 'runtime.js');
     const absMasterOptionsPath = join(namespace, 'masterOptions.js');
+    const absGetMicroAppRouteCompPath = join(namespace, 'getMicroAppRouteComponent.js');
 
     api.onGenerateFiles(() => {
         api.writeTmpFile({
@@ -36,6 +40,10 @@ export default function (api) {
             content: readFileSync(join(__dirname, 'runtime/runtime.tpl'), 'utf-8')
         });
 
+        api.writeTmpFile({
+            path: absGetMicroAppRouteCompPath,
+            content: readFileSync(join(__dirname, 'runtime/getMicroAppRouteComponent.tpl'), 'utf-8')
+        });
 
         const { main: options } = api.config?.qiankun || {};
         const masterHistoryType = api.config?.router?.mode || defaultHistoryType;
@@ -61,6 +69,13 @@ export default function (api) {
         }
     ]);
 
+    api.addPluginExports(() => [
+        {
+            specifiers: ['getMicroAppRouteComponent'],
+            source: absGetMicroAppRouteCompPath
+        }
+    ]);
+
 
     // const { registerRuntimeKeyInIndex = false } = options || {};
 
diff --git a/packages/fes-plugin-qiankun/src/main/modifyRoutes.js b/packages/fes-plugin-qiankun/src/main/modifyRoutes.js
new file mode 100644
index 00000000..8a1ff4e0
--- /dev/null
+++ b/packages/fes-plugin-qiankun/src/main/modifyRoutes.js
@@ -0,0 +1,58 @@
+import { defaultHistoryType } from '../constants';
+
+function getMicroApp(options) {
+    const {
+        microAppName, masterHistoryType, base, namespace, ...normalizedRouteProps
+    } = options;
+    return `(() => {
+const { getMicroAppRouteComponent } = require('@@/${namespace}/getMicroAppRouteComponent');
+return getMicroAppRouteComponent({ appName: '${microAppName}', base: '${base}', masterHistoryType: '${masterHistoryType}', routeProps: ${JSON.stringify(normalizedRouteProps)} })
+})()`;
+}
+
+function modifyRoutesWithAttachMode({
+    routes, masterHistoryType, base, namespace
+}) {
+    const patchRoutes = (_routes) => {
+        if (_routes.length) {
+            _routes.forEach((route) => {
+                if (route.meta && route.meta.microApp) {
+                    route.component = getMicroApp({
+                        microAppName: route.meta.microApp,
+                        masterHistoryType,
+                        base,
+                        namespace
+                    });
+                }
+                if (route.children?.length) {
+                    modifyRoutesWithAttachMode({
+                        routes: route.children,
+                        masterHistoryType,
+                        base,
+                        namespace
+                    });
+                }
+            });
+        }
+    };
+
+    patchRoutes(routes);
+
+    return routes;
+}
+
+export default function modifyRoutes({ api, namespace }) {
+    api.modifyRoutes((routes) => {
+        const { router, base } = api.config;
+        const masterHistoryType = (router && router?.mode) || defaultHistoryType;
+
+        modifyRoutesWithAttachMode({
+            routes,
+            masterHistoryType,
+            base: base || '/',
+            namespace
+        });
+
+        return routes;
+    });
+}
diff --git a/packages/fes-plugin-qiankun/src/main/runtime/getMicroAppRouteComponent.tpl b/packages/fes-plugin-qiankun/src/main/runtime/getMicroAppRouteComponent.tpl
new file mode 100644
index 00000000..55b3776b
--- /dev/null
+++ b/packages/fes-plugin-qiankun/src/main/runtime/getMicroAppRouteComponent.tpl
@@ -0,0 +1,11 @@
+import { MicroApp } from './MicroApp';
+
+export function getMicroAppRouteComponent({
+  appName,
+  base,
+  masterHistoryType,
+  routeProps
+}) {
+
+  return <MicroApp base={base} masterHistoryType={masterHistoryType} name={appName} {...routeProps} />;
+}