猪齿鱼前端跨模块组件注入方案

前端某些情况下需要跨模块引用，比如工作台包含各种卡片，工作台的主体代码写在master中，但是各个卡片的逻辑是master不关心的，应该写在各个子模块中。

为了简化和统一模块注入逻辑，编写了此npm包

使用

前端master包已包含此依赖，不用也不应该再添加此依赖。

一般情况下，注入的内容是组件，以下以一个例子来说明：

在测试服务需要使用敏捷的issue详情弹框

那么在敏捷服务的package.json中加一个install属性，指向是一个js文件

{
  "name": "@choerodon/agile",
  "routeName": "agile",
  "version": "0.25.0",
  "description": " ",
  "main": "./lib/index.js",
  "install": "./lib/install.js"
}

install.js中书写所有需要注入给其他模块使用的组件

import { set } from '@choerodon/inject';

set('agile:detailModal', () => import('./injects/detail-modal'));

注1：为了避免code重复，约定code形式为服务名:组件名

注2：各个模块的注入代码会被收集并在master的最开始运行，以保证可以在任意地方拿到注入的组件，所以这里使用() => import()的形式可以有效减少入口文件大小，如果注入部分是组件，应都采取此形式

之后在测试服务就可以使用

import { mount } from '@choerodon/inject';
import DetailModal from './injects/detail-modal';

const App = () => {
  return <div>
  {mount('agile:detailModal')}
  </div>
}

API

set

类似Map的set

参数：

| 参数名 | 说明 | 类型 | | :----- | ---- | --------------------- | | code | | ${string}:${string} | | value | | any |

get

类似Map的get

参数：

| 参数名 | 说明 | 类型 | | :----- | ---- | --------------------- | | code | | ${string}:${string} |

has

类似Map的has

参数：

| 参数名 | 说明 | 类型 | | :----- | ---- | --------------------- | | code | | ${string}:${string} |

mount

专门处理组件类型的渲染，返回React Element，如果code对应的组件不存在，则返回null

参数：

| 参数名 | 说明 | 类型 | | :----- | --------------- | --------------------- | | code | | ${string}:${string} | | props | 传给组件的Props | React props |