feat: support multiply bundles

Author: xuyuanxiang@home

package.json

@@ -6,7 +6,7 @@
     "clean": "rimraf packages/*/lib",
     "lint": "eslint packages/*/src/**/*.{ts,tsx}",
     "build": "cross-env NODE_ENV=production lerna run build",
-    "watch": "cross-env NODE_ENV=development lerna run watch --parallel --concurrency 4",
+    "watch": "cross-env NODE_ENV=development lerna run watch --parallel --concurrency 5",
     "changelog": "rimraf CHANGELOG.md && node scripts/changelog",
     "prerelease": "yarn clean && yarn build",
     "release": "lerna publish",

packages/umi-preset-react-native/package.json

@@ -17,17 +17,14 @@
   "engines": {
     "node": ">=10.x"
   },
-  "main": "lib",
+  "main": "lib/index.js",
   "typings": "lib/index.d.ts",
   "types": "lib/index.d.ts",
   "directories": {
     "lib": "lib"
   },
   "files": [
-    "lib",
-    "android",
-    "ios",
-    "umi-preset-react-native.podspec"
+    "lib"
   ],
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

packages/umi-preset-react-native/src/plugins/features/reactNative.ts

@@ -112,23 +112,23 @@ export default (api: IApi) => {
       throw new TypeError('"history.type" 配置错误');
     }
 
-    if (api.config.dynamicImport) {
-      api.logger.error('在 RN 环境中暂不支持："dynamicImport"功能。');
-      throw new TypeError('在 RN 环境中暂不支持："dynamicImport"功能。');
-    }
-
-    // if (api.config.haul) {
-    //   if (api.config.dynamicImport && !api.config.dynamicImport.loading) {
-    //     api.logger.error(
-    //       `在 RN 环境中启用"dynamicImport"功能时，必须实现自定义的"loading"！${EOL}因为 umi 默认 loading 使用了 HTML 标签，在 RN 中运行会报错！${EOL}查看如何配置自定义 loading：https://umijs.org/config#dynamicimport`,
-    //     );
-    //     throw new TypeError('"dynamicImport.loading" 未配置');
-    //   }
-    // } else {
-    //   if (api.config.dynamicImport) {
-    //     api.logger.error('在 RN 环境中暂不支持："dynamicImport"功能。');
-    //     throw new TypeError('在 RN 环境中暂不支持："dynamicImport"功能。');
-    //   }
+    // if (api.config.dynamicImport) {
+    //   api.logger.error('在 RN 环境中暂不支持："dynamicImport"功能。');
+    //   throw new TypeError('在 RN 环境中暂不支持："dynamicImport"功能。');
     // }
+
+    if (api.config.haul) {
+      if (api.config.dynamicImport && !api.config.dynamicImport.loading) {
+        api.logger.error(
+          `在 RN 环境中启用"dynamicImport"功能时，必须实现自定义的"loading"！${EOL}因为 umi 默认 loading 使用了 HTML 标签，在 RN 中运行会报错！${EOL}查看如何配置自定义 loading：https://umijs.org/config#dynamicimport`,
+        );
+        throw new TypeError('"dynamicImport.loading" 未配置');
+      }
+    } else {
+      if (api.config.dynamicImport) {
+        api.logger.error('在 RN 环境中暂不支持："dynamicImport"功能。');
+        throw new TypeError('在 RN 环境中暂不支持："dynamicImport"功能。');
+      }
+    }
   });
 };

packages/umi-preset-react-native/src/plugins/generateFiles/react-native/routes.ts

@@ -2,7 +2,7 @@ import { IApi } from 'umi';
 import { createFormatter, routesToJSON } from '../../../utils';
 
 const ROUTES_TPL = `import {ApplyPluginsType, dynamic} from 'umi';
-import Multibundle from 'umi-preset-react-native';
+import Multibundle from 'umi-react-native-multibundle';
 import { plugin } from '@@/core/plugin';
 
 const routes = {{#routes}}{{{ routes }}}{{/routes}}{{^routes}}{}{{/routes}};

packages/umi-preset-react-native/src/templates/haulConfigTpl.ts

@@ -24,13 +24,7 @@ export default makeConfig({
         }
       ),
       dll: true,
-      type: 'indexed-ram-bundle',
-      transform,
-    },
-    host: {
-      entry: '@/index',
-      dependsOn: ['index'],
-      app: true,
+      // type: 'indexed-ram-bundle',
       transform,
     },
     ...{{{ bundles }}},

packages/umi-preset-react-native/src/utils.ts

@@ -90,25 +90,29 @@ interface IBundle {
   transform?: string;
 }
 
-export function transformRoutesToBundle(routes: IRoute[], parent?: IRoute): IBundle[] {
+export function getBundleNameFrom(component: string): string {
+  const bundleName = component.replace(/^@\//, '').replace(/\.[tj]sx?$/, '');
+  if (bundleName === 'pages/index') {
+    return 'host';
+  }
+  return bundleName;
+}
+
+export function transformRoutesToBundle(routes: IRoute[]): IBundle[] {
   const bundles: IBundle[] = [];
   for (const route of routes) {
-    if (Array.isArray(route.routes)) {
-      bundles.push(...transformRoutesToBundle(route.routes, route));
-    } else {
-      if (route.component) {
-        bundles.push({
-          name: route.component,
-          entry:
-            parent && parent.component
-              ? { entryFiles: [route.component], setupFiles: [parent.component] }
-              : route.component,
-          dependsOn: ['index'],
-          app: true,
-          type: 'indexed-ram-bundle',
-          transform: 'transform',
-        });
-      }
+    if (route.component) {
+      bundles.push({
+        name: getBundleNameFrom(route.component),
+        entry: route.component,
+        dependsOn: ['index'],
+        app: true,
+        // type: 'indexed-ram-bundle',
+        transform: 'transform',
+      });
+    }
+    if (Array.isArray(route.routes) && route.routes.length > 0) {
+      bundles.push(...transformRoutesToBundle(route.routes));
     }
   }
   return bundles;
@@ -185,14 +189,15 @@ export async function routesToJSON(api: IApi) {
         if (isFunctionComponent(value)) return value;
         if (api.config.dynamicImport) {
           const [component] = value.split(SEPARATOR);
+          const bundleName = getBundleNameFrom(component);
           let loading = '';
           if (api.config.dynamicImport.loading) {
             loading = `,loading: require('${api.config.dynamicImport.loading}').default`;
           }
           return `dynamic({
           loader: async () => {
-            await Multibundle.loadBundle('${component}');
-            return Multibundle.getBundleExport('${component}');
+            await Multibundle.loadBundle('${bundleName}');
+            return Multibundle.getBundleExport('${bundleName}');
           }${loading}})`;
         } else {
           return `require('${value}').default`;

packages/umi-plugin-react-native-multibundle/android/build.gradle packages/umi-react-native-multibundle/android/build.gradle

@@ -28,7 +28,7 @@ public void loadBundle(String bundleName, int bundleId, Promise promise) {
               this.reactContext.getAssets(),
               "assets://" + bundleName + ".android.bundle",
               false);
-            catalystInstance.registerSegment(bundleId, "assets://" + bundleName + ".android.bundle");
+//            catalystInstance.registerSegment(bundleId, "assets://" + bundleName + ".android.bundle");
             promise.resolve(null);
         } catch(Exception e) {
             promise.reject(e);

packages/umi-plugin-react-native-multibundle/android/gradle/wrapper/gradle-wrapper.jar packages/umi-react-native-multibundle/android/gradle/wrapper/gradle-wrapper.jar

@@ -0,0 +1,48 @@
+{
+  "name": "umi-react-native-multibundle",
+  "version": "0.3.4",
+  "description": "umi-react-native-multibundle",
+  "keywords": [
+    "umi",
+    "umijs",
+    "react-native",
+    "multibundle"
+  ],
+  "author": {
+    "name": "xuyuanxiang",
+    "email": "hi@xuyuanxiang.cn",
+    "url": "https://xuyuanxiang.me/about/"
+  },
+  "homepage": "https://github.com/xuyuanxiang/umi-react-native#readme",
+  "license": "MIT",
+  "main": "lib",
+  "typings": "lib/index.native.d.ts",
+  "types": "lib/index.native.d.ts",
+  "directories": {
+    "lib": "lib"
+  },
+  "files": [
+    "android",
+    "ios",
+    "lib",
+    "src",
+    "umi-react-native-multibundle.podspec"
+  ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/xuyuanxiang/umi-react-native.git"
+  },
+  "scripts": {
+    "build": "tsc",
+    "watch": "tsc -w"
+  },
+  "bugs": {
+    "url": "https://github.com/xuyuanxiang/umi-react-native/issues"
+  },
+  "peerDependencies": {
+    "react-native": ">=0.60.0"
+  }
+}

packages/umi-plugin-react-native-multibundle/android/gradle/wrapper/gradle-wrapper.properties packages/umi-react-native-multibundle/android/gradle/wrapper/gradle-wrapper.properties

@@ -40,6 +40,7 @@ class Multibundle {
     if (!this.isBundleLoaded(bundleName)) {
       throw new Error(`Bundle ${bundleName} was not loaded`);
     }
+    console.warn('getBundleExport: bundleName=', bundleName, 'default=', global[bundleName].default);
     return global[bundleName].default;
   }
 
@@ -66,7 +67,12 @@ class Multibundle {
         throw new Error(`Cannot find bundle id for bundle name ${bundleName}`);
       }
 
-      await MultibundleNativeModule.loadBundle(bundleName, bundleId);
+      console.warn('loadBundle:', bundleName, ' bundleId:', bundleId);
+      try {
+        await MultibundleNativeModule.loadBundle(bundleName, bundleId);
+      } catch (e) {
+        console.warn('loadBundle:', bundleName, ' failed:', e);
+      }
 
       return bundleId;
     }

packages/umi-plugin-react-native-multibundle/android/src/main/AndroidManifest.xml packages/umi-react-native-multibundle/android/src/main/AndroidManifest.xml

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "lib"
+  },
+  "include": ["src", "../../types"]
+}

packages/umi-plugin-react-native-multibundle/android/src/main/java/com/reactlibrary/MultibundleModule.java packages/umi-react-native-multibundle/android/src/main/java/com/reactlibrary/MultibundleModule.java

@@ -3,11 +3,11 @@ require "json"
 package = JSON.parse(File.read(File.join(__dir__, "package.json")))
 
 Pod::Spec.new do |s|
-  s.name         = "umi-preset-react-native"
+  s.name         = "umi-react-native-multibundle"
   s.version      = package["version"]
   s.summary      = package["description"]
   s.description  = <<-DESC
-                  umi-preset-react-native
+                  umi-react-native-multibundle
                    DESC
   s.homepage     = "https://github.com/xuyuanxiang/umi-react-native#readme"
   s.license      = "MIT"