for babel to inject react debug tool

react-babel-inject-plugin.js

export default function (babel) {
  const { types: t } = babel;
  
  function injectMountHistory(cycleType) {
    return t.assignmentExpression(
      '=',
      t.memberExpression(
        t.Identifier('history'),
        t.UpdateExpression(
          '++',
          t.Identifier('step')
        ),
        true
      ),
      t.binaryExpression(
        '+',
        t.stringLiteral(cycleType),
        t.memberExpression(
          t.Identifier('componentConstructor'),
          t.Identifier('name')
        )
      )
    )
  }
  
  return {
    name: "ast-transform", // not required
    visitor: {
      ClassMethod(path) {
        const { node } = path
        if (node.key.name === 'componentDidMount') {
          const cacheExpressionBody = node.body.body.map(b => b)
          const injectDidMountDebugExpression = t.blockStatement([
            t.variableDeclaration('const', [t.variableDeclarator(
              t.Identifier('componentConstructor'),
              t.CallExpression(t.Identifier('descriptionState'), [t.ThisExpression()])
            )]),
            t.ifStatement(
              t.binaryExpression(
                '===',
                t.memberExpression(
                  t.Identifier('componentConstructor'),
                  t.Identifier('debugID')
                ),
	            t.NumericLiteral(1)
              ),
				t.BlockStatement([
                  t.expressionStatement(
                    injectMountHistory('Mount-')
                  ),
                  t.expressionStatement(
                    t.assignmentExpression(
                      '=',
                      t.memberExpression(
                        t.Identifier('history'),
                        t.UpdateExpression(
                          '++',
                          t.Identifier('step')
                        ),
                        true
                      ),
                      t.stringLiteral('------------- First Mount End -------------')
                    )
                  )
              ]),
              t.blockStatement([
                t.expressionStatement(
                  injectMountHistory('Mount-')
                )
              ])
            )
          ].concat(cacheExpressionBody))
          path.node.body = injectDidMountDebugExpression
        }
        if (node.key.name === 'componentWillMount') {
        }
        if (node.key.name === 'componentWillUnmount') {
          const cacheExpressionBody = node.body.body.map(b => b)
          console.log(cacheExpressionBody)
        }
        if (node.key.name === 'componentWillReceiveProps') {
        }
        if (node.key.name === 'shouldComponentUpdate') {
        }
        if (node.key.name === 'componentWillUpdate') {
        }
        if (node.key.name === 'componentDidUpdate') {
        }
      }
    }
  };
}