feat: change the code structure

packages/runtime/remote-component/src/apis/loadComponent.ts

@@ -0,0 +1,58 @@
+import { assert, isAbsolute } from '@garfish/utils';
+import { Actuator } from '../actuator';
+import {
+  loader,
+  LOADING,
+  purifyOptions,
+  ComponentInfo,
+  cacheComponents,
+} from '../common';
+
+export function loadComponent(
+  options: ComponentInfo | string,
+): Promise<Record<string, any> | null> {
+  const info = purifyOptions(options);
+  const { url, env, cache, version, error, adapter } = info;
+
+  assert(url, 'Missing url for loading micro component');
+  assert(
+    isAbsolute(url),
+    'The loading of the micro component must be an absolute path.',
+  );
+
+  // `1.0@https://xx.js`
+  // `latest@https://xx.js`
+  const urlWithVersion = `${version || 'latest'}@${url}`;
+
+  const asyncLoadProcess = async () => {
+    let result = null;
+    try {
+      const component = cacheComponents[urlWithVersion];
+      if (cache && component) {
+        result = component;
+      } else {
+        const data = await loader.loadComponent(url);
+        const actuator = new Actuator(data.resourceManager, env);
+        let exports = actuator.execScript().exports;
+        if (typeof adapter === 'function') {
+          exports = adapter(exports);
+        }
+        result = exports;
+        cacheComponents[urlWithVersion] = result;
+      }
+    } catch (err) {
+      if (typeof error === 'function') {
+        result = error(err);
+      } else {
+        throw err;
+      }
+    } finally {
+      LOADING[urlWithVersion] = null;
+    }
+    return result;
+  };
+  if (!LOADING[urlWithVersion]) {
+    LOADING[urlWithVersion] = asyncLoadProcess();
+  }
+  return LOADING[urlWithVersion];
+}

packages/runtime/remote-component/src/apis/loadComponentSync.ts

@@ -0,0 +1,51 @@
+import { assert, isAbsolute } from '@garfish/utils';
+import { Actuator } from '../actuator';
+import {
+  purifyOptions,
+  ComponentInfo,
+  cacheComponents,
+  PRE_STORED_RESOURCES,
+} from '../common';
+
+export function loadComponentSync(
+  options: ComponentInfo | string,
+): Record<string, any> {
+  const info = purifyOptions(options);
+  assert(info.url, 'Missing url for loading micro component');
+  assert(
+    isAbsolute(info.url),
+    'The loading of the micro component must be an absolute path.',
+  );
+
+  let result = null;
+  const { url, env, cache, version, error, adapter } = info;
+  const urlWithVersion = `${version || 'latest'}@${url}`;
+  const component = cacheComponents[urlWithVersion];
+
+  if (cache && component) {
+    result = component;
+  } else {
+    const manager = PRE_STORED_RESOURCES[url];
+    assert(
+      manager,
+      'Synchronously load components must load resources in advance.',
+    );
+
+    try {
+      const actuator = new Actuator(manager, env);
+      let exports = actuator.execScript().exports;
+      if (typeof adapter === 'function') {
+        exports = adapter(exports);
+      }
+      result = exports;
+      cacheComponents[urlWithVersion] = result;
+    } catch (err) {
+      if (typeof error === 'function') {
+        result = error(err);
+      } else {
+        throw err;
+      }
+    }
+  }
+  return result;
+}

packages/runtime/remote-component/src/apis/preload.ts

@@ -0,0 +1,19 @@
+import { assert, isAbsolute } from '@garfish/utils';
+import { loader, PRE_STORED_RESOURCES } from '../common';
+
+// Preload the static resources of the component, so that the component can be loaded synchronously
+export function preload(urls: string | Array<string>) {
+  if (!Array.isArray(urls)) urls = [urls];
+
+  return Promise.all(
+    urls.map((url) => {
+      assert(
+        isAbsolute(url || ''),
+        'The loading of the micro component must be an absolute path.',
+      );
+      return loader.loadComponent(url).then((data) => {
+        PRE_STORED_RESOURCES[url] = data.resourceManager;
+      });
+    }),
+  );
+}

packages/runtime/remote-component/src/apis/setExternal.ts

@@ -0,0 +1,22 @@
+import { warn, assert, deepMerge, isAbsolute } from '@garfish/utils';
+import { Actuator, EXTERNALS } from '../actuator';
+
+export function setExternal(
+  nameOrExtObj: string | Record<string, any>,
+  value?: any,
+) {
+  assert(nameOrExtObj, 'Invalid parameter.');
+  if (typeof nameOrExtObj === 'object') {
+    for (const key in nameOrExtObj) {
+      if (EXTERNALS[key]) {
+        __DEV__ &&
+          warn(
+            `The "${key}" will be overwritten in remote components external.`,
+          );
+      }
+      EXTERNALS[key] = nameOrExtObj[key];
+    }
+  } else {
+    EXTERNALS[nameOrExtObj] = value;
+  }
+}

packages/runtime/remote-component/src/common.ts

@@ -0,0 +1,35 @@
+import { Loader } from '@garfish/loader';
+import { deepMerge } from '@garfish/utils';
+
+export interface ComponentInfo {
+  url: string;
+  cache?: boolean; // Whether the cache
+  version?: string;
+  env?: Record<string, any>;
+  error?: (err: Error) => any;
+  adapter?: (cjsModule: Record<string, any>) => Record<string, any>;
+}
+
+export const LOADING = Object.create(null);
+export const PRE_STORED_RESOURCES = Object.create(null);
+export const cacheComponents = Object.create(null);
+
+export const loader = (() => {
+  if (window.Garfish) {
+    const loader = window.Garfish && window.Garfish.loader;
+    // Garfish loader will have an identifier
+    if (loader && loader.personalId === Symbol.for('garfish.loader')) {
+      return loader;
+    }
+    return new Loader();
+  }
+})();
+
+const defaultOptions: Pick<ComponentInfo, 'cache'> = {
+  cache: true,
+};
+
+export const purifyOptions = (options: ComponentInfo | string) => {
+  if (typeof options === 'string') options = { url: options };
+  return deepMerge(defaultOptions, options || {}) as ComponentInfo;
+};

packages/runtime/remote-component/src/garfishPlugin.ts

@@ -1,12 +1,10 @@
 import { warn } from '@garfish/utils';
 import { interfaces } from '@garfish/core';
-import {
-  preload,
-  setExternal,
-  loadComponent,
-  loadComponentSync,
-  cacheComponents,
-} from './apis';
+import { cacheComponents } from './common';
+import { preload } from './apis/preload';
+import { setExternal } from './apis/setExternal';
+import { loadComponent } from './apis/loadComponent';
+import { loadComponentSync } from './apis/loadComponentSync';
 
 declare module '@garfish/core' {
   export interface Garfish {

packages/runtime/remote-component/src/index.ts

@@ -1,11 +1,9 @@
+import { preload } from './apis/preload';
+import { setExternal } from './apis/setExternal';
+import { loadComponent } from './apis/loadComponent';
+import { loadComponentSync } from './apis/loadComponentSync';
+import { cacheComponents } from './common';
 import { remoteComponentPlugin } from './garfishPlugin';
-import {
-  preload,
-  setExternal,
-  loadComponent,
-  loadComponentSync,
-  cacheComponents,
-} from './apis';
 
 // Micro component loader uses singleton mode
 const loader = {