javascript - Webpack カスタム プラグイン。ASTを使用して反応コンポーネントに属性を挿入する

Question

webpack のコンパイル時にコンポーネントを反応させるために data-attr を挿入する必要があります。たとえば、次のコンポーネントがあります。

export const MyComponent = (props: any) => {
  return (
    <div>bla bla</div>
  );
};

そしてコンパイル後、私はこれが必要です:

export const MyComponent = (props: any) => {
  return (
    <div data-attr="some data">bla bla</div>
  );
};

私は次のプラグインを書きました（ほぼ完成したと思いますが、属性を挿入する方法が見つかりません）：

export class ReactAttrGeneratorPlugin implements webpack.Plugin {
  public apply({ hooks }: webpack.Compiler) {

    hooks.compilation.tap(
      "ReactAttrGeneratorPlugin",
      (compilation) => {
        compilation.dependencyFactories.set(ConstDependency, new NullFactory());
        compilation.dependencyTemplates.set(ConstDependency, new ConstDependency.Template());
      });

    hooks.normalModuleFactory.tap('ReactAttrGeneratorPlugin', (factory) => {
      factory.hooks.parser.for('javascript/auto').tap('ReactAttrGeneratorPlugin', (parser, options) => {
        parser.hooks.statement.tap('ReactAttrGeneratorPlugin', (statement:any) => {
          if (this.isOwnComponent(parser) && statement.type === 'ReturnStatement') {

            const div = statement.argument.arguments[0];

            /** What do I need here, to insert attribute to div? **/

          }
        });
      });
    });
  }

  private isOwnComponent(parser: any) {
    return parser.state &&
      parser.state.module &&
      parser.state.module.resource.indexOf('node_modules') === -1 &&
      parser.state.module.resource.endsWith('tsx');
  }
}