cloud-component

用于远程加载 component registry 中注册的组件

Install

yarn add cloud-component

Usage

Use systemjs as the module loader

import SystemJS from 'systemjs';
import create from 'cloud-component';

const registryServer = process.env.REACT_APP_COMPONENT_REGISTRY_SERVER || '';

const { loadComponent, CloudComponent } = create(SystemJS, registryServer);

export { loadComponent };

export default CloudComponent;

Use requirejs as the module loader

import create from 'cloud-component';

const registryServer = process.env.REACT_APP_COMPONENT_REGISTRY_SERVER || '';

/* eslint-disable global-require, import/no-dynamic-require */
// @ts-ignore
const { loadComponent, CloudComponent } = create(require, registryServer);

export { loadComponent };

export default CloudComponent;

find the module loader on the global

import create from 'cloud-component';

const registryServer = process.env.REACT_APP_COMPONENT_REGISTRY_SERVER || '';

// 如果未指定任何模块加载器, 尝试在全局变量中查找合适的加载器(requirejs, sysyemjs)
const { loadComponent, CloudComponent } = create(null, registryServer);

export { loadComponent };

export default CloudComponent;

可指定 name -> url 的映射, 用于调试, mapper 如果命中则不会再在 registry 中去查找 url

import create from 'cloud-component';

const mapper =
  process.env.NODE_ENV === 'development'
    ? {
        'test-project/WhatToEat': 'http://test.com/WhatToEat',
      }
    : null;

const registryServer = process.env.REACT_APP_COMPONENT_REGISTRY_SERVER || '';

// 如果未指定任何模块加载器, 尝试在全局变量中查找合适的加载器(requirejs, sysyemjs)
const { loadComponent, CloudComponent } = create(null, registryServer);

export { loadComponent };

export default CloudComponent;

custom loading

<CloudComponent name="project/component" fallback={<CustomLoading />} />

custom loading and error by ConfigProvider

import { CloudComponentConfigProvider } from 'cloud-component';

const ErrorComponent = ({errorMessage}) => <Alert type="error">{errorMessage}</Alert>

<CloudComponentConfigProvider fallback={<CustomLoading />} ErrorComponent={ErrorComponent}>
  <CloudComponent name="project/component1" />
  <CloudComponent name="project/component2" />
</CloudComponentConfigProvider>;

License

MIT © angular-moon