babel analytics, performance plugins

.a_use_case.md

• Capture analytics from synthetic events and gather performance metrics
• Transform React components

.babelrc

{
  "presets": ["es2015", "react"],
  "plugins": ["analytics", "performance"]
}

Hello.js

import Performance from 'performance';
import Analytics from 'analytics';

<Performance environment={{'ci'}}>
  <Analytics>  
    <App />
  </Analytics>  
</Performance>

index.src.js

import { Component } from 'react';

class Hello extends Component {
  
  componentDidMount() {
    console.log('component did mount');
  }  
  
  onClick(e) {
    console.log(e);
  }

  render () {
    return <div onClick={this.clickHandler}></div>
  }
}

index.transpiled.js

import { Component } from 'react';

class Hello extends Component {
  componentWillMount() {
    if (this.context.performance && typeof this.context.performance === 'function') {
      this.performance('component_will_mount');
    }
  }
  
  componentDidMount() {
    if (this.context.performance && typeof this.context.performance === 'function') {
      this.performance('component_did_mount');
    }
    this._componentDidMount();      
  }
  
  _componentDidMount() {
    console.log('component did mount');
  }  
  
  componentWillUnmount() {
    if (this.context.performance && typeof this.context.performance === 'function') {
      this.performance('component_will_unmount');
    }
    this._componentDidMount();    
  }
  
  clickHandler(e) {
    console.log(e);
  }
  
  _clickHandler(e) {
    if (this.context.analytics && typeof this.context.analytics === 'function') {
      this.context.analytics(e)
    }
    this.onClick(e);
  }  

  render () {
    return <div onClick={this._clickHandler}></div>
  }
}