@aligov/plugin-jsx-auto-tracker v0.1.0

@aligov/plugin-jsx-auto-tracker

ice 体系插件，解析 jsx 语法，依据注释注入配置好的埋点方法。

Usage

$ npm i @aligov/plugin-jsx-auto-tracker --save

step 1

在 ice 体系的配置中添加本插件

{
  "plugins": [
    [
      "@aligov/plugin-jsx-auto-tracker",
      {
        "registerModulePath": "./src/utils/registerAplus"
      }
    ]
  ]
}

参数说明 | 参数名 | 类型 | 必填 | 说明 | | --------------- | -------------- | ---- | -------------------------------------------------- | | registerModulePath | string | 是 | 埋点初始化方法 | | entryImportPath | string | 否 | 埋点是否在入口处注入 |

step 2

编写registerModulePath。它应当返回

export default {
  register: function () {
    return { click: function () {}, request: function () {} };
  },
};

step 3

代码中插入注释。

用法一

return (
  <Checkbox
    /* @tracker-click({eventCode: /recept.authconfirm.checked, checked: $0}) */
    onChange={(isChecked) => (isChecked ? setType('primary') : setType('secondary'))}
    className={styles.check}
  ></Checkbox>
);

以类似注解注释的方法，为 jsx 属性注入埋点代码。关键字为@tracker-type()，type是 step2 中注册的方法。其相关参数以 JSON 对象进行解析，$0代表原始代码中函数的第一个入参。

用法二

handleSingleMaterialUpload = (res: { url imgUrl }, attaName) => {
  const { onSuccess, item, fileList } = this.props;
  const newMaterial = rebuildUpload({
    ...res,
    attaName,
    attaUrl: res.url,
  });
  /**
   * tracker: inject
   * type: request
   * args:
   *  eventCode: /recept.materials.upload
   *  operation: input_upload
   *  materialCode: $item.materialCode
   *  result: success
   */
  onSuccess(item, newMaterial, fileList.length);
};

插件会解析tracker: inject关键字，并以 yaml 语法解析参数。type中的方法，是处理该埋点的方法，在 step2 中注册；args 是传入埋点处理方法的各个参数。