@umijs/plugins 4.0.0-canary.20220824.1 → 4.0.0-canary.20220826.1

package/dist/mf.js

@@ -89,7 +89,7 @@ function mf(api) {
     });
     const { remotes = [] } = api.config.mf;
     api.writeTmpFile({
-      path: "index.ts",
+      path: "index.tsx",
       context: {
         remoteCodeString: (0, import_mfUtils.toRemotesCodeString)(remotes)
       },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umijs/plugins",
-  "version": "4.0.0-canary.20220824.1",
+  "version": "4.0.0-canary.20220826.1",
   "description": "@umijs/plugins",
   "homepage": "https://github.com/umijs/umi/tree/master/packages/plugins#readme",
   "bugs": "https://github.com/umijs/umi/issues",
@@ -27,7 +27,7 @@
     "@ant-design/antd-theme-variable": "^1.0.0",
     "@ant-design/icons": "^4.7.0",
     "@ant-design/pro-layout": "^7.0.1-beta.28",
-    "@umijs/bundler-utils": "4.0.0-canary.20220824.1",
+    "@umijs/bundler-utils": "4.0.0-canary.20220826.1",
     "antd-dayjs-webpack-plugin": "^1.0.6",
     "axios": "^0.27.2",
     "babel-plugin-import": "^1.13.5",
@@ -46,7 +46,7 @@
     "warning": "^4.0.3"
   },
   "devDependencies": {
-    "umi": "4.0.0-canary.20220824.1"
+    "umi": "4.0.0-canary.20220826.1"
   },
   "publishConfig": {
     "access": "public"

package/tpls/mf-runtime.ts.tpl

@@ -1,10 +1,12 @@
+import { lazy, Suspense } from 'react'
+import type { Component, ReactNode } from 'react'
 const remotes = {
 {{{ remoteCodeString }}}
 };
 const scriptLoadedMap: Record<string, Promise<void> | 0 | undefined> = {};
 
-type MFModuleImportRequest = { entry: string, remoteName: string; moduleName: string; }
-type MFModuleRegisterRequest = { entry: string, remoteName: string; aliasName?:string; }
+type MFModuleImportRequest = { entry: string; remoteName: string; moduleName: string; }
+type MFModuleRegisterRequest = { entry: string; remoteName: string; aliasName?:string; }
 
 export async function rawMfImport(opts: MFModuleImportRequest) {
   await loadRemoteScriptWithCache(opts.remoteName, opts.entry);
@@ -110,3 +112,38 @@ async function loadRemoteScriptWithCache(remoteName:string, url: string): Promis
     await p;
   }
 }
+
+type SafeRemoteComponentOpts ={
+  moduleSpecifier:string;
+  fallbackComponent: ComponentType<any>;
+  loadingElement: ReactNode
+}
+
+export function safeRemoteComponent<T extends ComponentType<any>>(opts: SafeRemoteComponentOpts): T {
+  const Lazy = lazy<T>(()=>safeMfImport(opts.moduleSpecifier, { default: opts.fallbackComponent }));
+  return (props)=> (<Suspense fallback={opts.loadingElement}>
+     <Lazy {...props} />
+  </Suspense>)
+}
+
+type RawRemoteComponentOpts ={
+  mfConfig:{
+    entry:string;
+    remoteName: string;
+    moduleName: string;
+  };
+  fallbackComponent: ComponentType<any>;
+  loadingElement: ReactNode;
+}
+
+export function safeRemoteComponentWithMfConfig<T extends ComponentType<any>>(opts: RawRemoteComponentOpts): T {
+  const Lazy = lazy<T>(()=>{
+    return rawMfImport(opts.mfConfig)
+      .catch(()=>{
+        return { default: opts.fallbackComponent };
+      })
+  })
+  return (props)=> (<Suspense fallback={opts.loadingElement}>
+     <Lazy {...props} />
+  </Suspense>)
+}