react-mixin-transformer

react-mixin-transformer is a transformer for use with webpack and esprima-loader. It allows you to pass in an array of mixins that you want to inject into all of your React components.

TODO

• Write tests.

Install

npm install esprima-loader --save-dev
npm install react-mixin-transformer --save-dev

Usage

ReactMixinTransformer.inject([array], boolean)
ReactMixinTransformer.inject(['ReactDebuggerMixin'], true)

• [array] - Array of Strings of the Mixins you want to inject.
• boolean - Boolean, of whether to display verbose logging during the transform process.

Webpack Config Example

// webpack.config.js
var webpack = require('webpack');
var path = require('path');
var ReactMixinTransformer = require('ReactMixinTransformer');

module.exports = {
  module: {
    loaders: [
      {
        test: /\.jsx$/,
        exclude: /node_modules/,
        loader: 'esprima!react-hot!babel-loader?experimental&optional=runtime'
      }
    ]
  },

  plugins: [
    new webpack.ProvidePlugin({
      ReactDebuggerMixin: path.join(__dirname, './app/components/mixins/ReactDebuggerMixin')
    })
  ],

  esprima: {
    transforms: [
      ReactMixinTransformer.inject(['ReactDebuggerMixin'], false)
    ]
  }
}

Notes

It is recommended you make the mixins that you want to inject available via webpack's ProvidePlugin.

Resources

• Esprima AST Explorer
• esprima-loader
• webpack plugins
• React Conf 2015 - AST Transformations
• estraverse
• component-flow-loader
• reactiflux - Slack for React developers

Special Thanks

• @iamdustan, for esprima-loader and the pointers.
• @gurdasnijor, for the great intro about AST transformations at React Conf.