feat: [utils] export importScript and lazyComponent

Author: akai

src/index.ts

@@ -2,6 +2,8 @@ import 'intersection-observer';
 
 export { default as clsx } from 'clsx';
 
+export { importScript } from './utils/importScript';
+export { lazyComponent } from './utils/lazyComponent';
 export { mountComponent } from './utils/mountComponent';
 export { Avatar } from './components/Avatar';
 export type { AvatarProps, AvatarSize, AvatarShape } from './components/Avatar';

src/utils/importScript.tsx

@@ -0,0 +1,28 @@
+export function importScript(url: string, name: string) {
+  return new Promise((resolve, reject) => {
+    const script = document.createElement('script');
+    script.async = true;
+
+    const destroy = () => {
+      if (script.parentNode) {
+        script.parentNode.removeChild(script);
+      }
+      if (name && window[name as any]) {
+        delete window[name as any];
+      }
+    };
+
+    script.onload = () => {
+      resolve(window[name as any]);
+      destroy();
+    };
+
+    script.onerror = () => {
+      reject(new Error(`Failed to import: ${url}`));
+      destroy();
+    };
+
+    script.src = url;
+    document.head.appendChild(script);
+  });
+}

src/utils/lazyComponent.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { importScript } from './importScript';
+
+export type LazyComponentResult = React.LazyExoticComponent<React.ComponentType<any>> & {
+  WrappedComponent?: React.ComponentType<any>;
+};
+
+export function lazyComponent(
+  url: string,
+  name: string,
+  success?: () => void,
+  fail?: (err: Error) => void,
+) {
+  const ret: LazyComponentResult = React.lazy(() =>
+    importScript(url, name)
+      .then((res: any) => {
+        if (!res.default) {
+          throw new Error(`Failed to import ${name} component: no default export`);
+        }
+
+        ret.WrappedComponent = res.default || res;
+
+        if (success) {
+          success();
+        }
+        return res;
+      })
+      .catch((err: any) => {
+        if (fail) {
+          fail(err);
+        }
+        return { default: () => <></> };
+      }),
+  );
+
+  return ret;
+}