{
  "_args": [
    [
      {
        "raw": "babel-plugin-react-transform@^3.0.0",
        "scope": null,
        "escapedName": "babel-plugin-react-transform",
        "name": "babel-plugin-react-transform",
        "rawSpec": "^3.0.0",
        "spec": ">=3.0.0 <4.0.0",
        "type": "range"
      },
      "/Volumes/2009-SSD/GT2/GT2-iOS/node_modules/babel-preset-react-native"
    ]
  ],
  "_from": "babel-plugin-react-transform@>=3.0.0 <4.0.0",
  "_id": "babel-plugin-react-transform@3.0.0",
  "_inCache": true,
  "_location": "/babel-plugin-react-transform",
  "_nodeVersion": "8.2.1",
  "_npmOperationalInternal": {
    "host": "s3://npm-registry-packages",
    "tmp": "tmp/babel-plugin-react-transform-3.0.0.tgz_1505226983613_0.6134067801758647"
  },
  "_npmUser": {
    "name": "gaearon",
    "email": "dan.abramov@gmail.com"
  },
  "_npmVersion": "5.3.0",
  "_phantomChildren": {},
  "_requested": {
    "raw": "babel-plugin-react-transform@^3.0.0",
    "scope": null,
    "escapedName": "babel-plugin-react-transform",
    "name": "babel-plugin-react-transform",
    "rawSpec": "^3.0.0",
    "spec": ">=3.0.0 <4.0.0",
    "type": "range"
  },
  "_requiredBy": [
    "/babel-preset-react-native"
  ],
  "_resolved": "https://registry.npmjs.org/babel-plugin-react-transform/-/babel-plugin-react-transform-3.0.0.tgz",
  "_shasum": "402f25137b7bb66e9b54ead75557dfbc7ecaaa74",
  "_shrinkwrap": null,
  "_spec": "babel-plugin-react-transform@^3.0.0",
  "_where": "/Volumes/2009-SSD/GT2/GT2-iOS/node_modules/babel-preset-react-native",
  "author": {
    "name": "Dan Abramov",
    "email": "dan.abramov@me.com"
  },
  "bugs": {
    "url": "https://github.com/gaearon/babel-plugin-react-transform/issues"
  },
  "dependencies": {
    "lodash": "^4.6.1"
  },
  "description": "Babel plugin to instrument React components with custom transforms",
  "devDependencies": {
    "babel-cli": "^6.2.0",
    "babel-core": "^6.2.1",
    "babel-eslint": "^4.1.6",
    "babel-preset-es2015": "^6.1.18",
    "babel-register": "^6.2.0",
    "eslint": "^1.10.3",
    "eslint-plugin-react": "^3.11.2",
    "mocha": "^2.2.5",
    "rimraf": "^2.4.3"
  },
  "directories": {},
  "dist": {
    "integrity": "sha512-4vJGddwPiHAOgshzZdGwYy4zRjjIr5SMY7gkOaCyIASjgpcsyLTlZNuB5rHOFoaTvGlhfo8/g4pobXPyHqm/3w==",
    "shasum": "402f25137b7bb66e9b54ead75557dfbc7ecaaa74",
    "tarball": "https://registry.npmjs.org/babel-plugin-react-transform/-/babel-plugin-react-transform-3.0.0.tgz"
  },
  "gitHead": "d7069df5c6f36a07857fd108067dc515b3a795ee",
  "homepage": "https://github.com/gaearon/babel-plugin-react-transform#readme",
  "keywords": [
    "babel-plugin",
    "react-transform",
    "instrumentation",
    "dx",
    "react",
    "reactjs",
    "components"
  ],
  "license": "MIT",
  "main": "lib/index.js",
  "maintainers": [
    {
      "name": "thejameskyle",
      "email": "me@thejameskyle.com"
    },
    {
      "name": "gaearon",
      "email": "dan.abramov@gmail.com"
    }
  ],
  "name": "babel-plugin-react-transform",
  "optionalDependencies": {},
  "readme": ">## This Project Is Deprecated\n\n>React Hot Loader 3 is [on the horizon](https://github.com/gaearon/react-hot-loader/pull/240), and you can try it today ([boilerplate branch](https://github.com/gaearon/react-hot-boilerplate/pull/61), [upgrade example](https://github.com/gaearon/redux-devtools/commit/64f58b7010a1b2a71ad16716eb37ac1031f93915)). It fixes some [long-standing issues](https://twitter.com/dan_abramov/status/722040946075045888) with both React Hot Loader and React Transform, and is intended as a replacement for both. The docs are not there yet, but they will be added before the final release. For now, [this commit](https://github.com/gaearon/redux-devtools/commit/64f58b7010a1b2a71ad16716eb37ac1031f93915) is a good reference.\n\n# babel-plugin-react-transform\n\n[![react-transform channel on discord](https://img.shields.io/badge/discord-react--transform%40reactiflux-61DAFB.svg?style=flat-square)](http://www.reactiflux.com)\n\n:rocket: **Now  with [Babel 6](https://github.com/babel/babel) support** (thank you [@thejameskyle](https://github.com/thejameskyle)!)\n\nThis plugin wraps React components with arbitrary transforms. In other words, **it allows you to instrument React components** in any way—limited only by your imagination.\n\n## 🚧🚧🚧🚧🚧\n\nThis is **highly experimental tech**. If you’re enthusiastic about hot reloading, by all means, give it a try, but don’t bet your project on it. Either of the technologies it relies upon may change drastically or get deprecated any day. You’ve been warned 😉 .\n\n**This technology exists to prototype next-generation React developer experience**. Please don’t use it blindly if you don’t know the underlying technologies well. Otherwise you are likely to get disillusioned with JavaScript tooling.\n\n**No effort went into making this user-friendly yet. The goal is to eventually kill this technology** in favor of less hacky technologies baked into React. These projects are not long term.\n\n## Table of Contents\n\n* [Ecosystem](#ecosystem)\n* [Demo Project](#demo-project)\n* [Installation](#installation)\n* [Writing Transforms](#writing-transforms)\n\n## Ecosystem\n\nFor a reference implementation, see [**react-transform-boilerplate**](https://github.com/gaearon/react-transform-boilerplate).  \nFor a starter kit to help write your own transforms, see [**react-transform-noop**](https://github.com/pwmckenna/react-transform-noop).\n\n\n#### Transforms\n\n* [**react-transform-hmr**](https://github.com/gaearon/react-transform-hmr) - enables hot reloading using HMR API\n* [**react-transform-catch-errors**](https://github.com/gaearon/react-transform-catch-errors) - catches errors inside `render()`\n* [**react-transform-debug-inspector**](https://github.com/alexkuz/react-transform-debug-inspector) - renders an inline prop inspector\n* [**react-transform-render-visualizer**](https://github.com/spredfast/react-transform-render-visualizer) - highlight components when updated\n* [**react-transform-style**](https://github.com/pwmckenna/react-transform-style) - support `style` and `className` styling for all components\n* [**react-transform-log-render**](https://github.com/rkit/react-transform-log-render) - log component renders with passed props and state\n* [**react-transform-count-renders**](https://github.com/stipsan/react-transform-count-renders) - counts how many times your components render\n\nFeeling inspired? Learn [how to write transforms](#writing-transforms) and send a PR!\n\n## Demo Project\n\nCheck out **[react-transform-boilerplate](https://github.com/gaearon/react-transform-boilerplate)** for a demo showing a combination of transforms.\n\n![](https://cloud.githubusercontent.com/assets/1539088/11611771/ae1a6bd8-9bac-11e5-9206-42447e0fe064.gif)\n\n## Installation\n\nThis plugin is designed to be used with the Babel 6 ecosystem. These instructions assume you have a working project set up. If you do not have Babel set up in your project, [learn how to integrate](https://babeljs.io/docs/setup/) it with your toolkit before installing this plugin.\n\n##### Using NPM\n\nInstall plugin and save in `devDependencies`:\n\n```bash\nnpm install --save-dev babel-plugin-react-transform\n```\n\nInstall some transforms:\n\n```bash\nnpm install --save-dev react-transform-hmr\nnpm install --save-dev react-transform-catch-errors\n```\n\n##### Configuration\nAdd react-transform to the list of plugins in your babel configuration (usually `.babelrc`):\n\n```js\n\n\n{\n  \"presets\": [\"react\", \"es2015\"],\n  \"env\": {\n    // this plugin will be included only in development mode, e.g.\n    // if NODE_ENV (or BABEL_ENV) environment variable is not set\n    // or is equal to \"development\"\n    \"development\": {\n      \"plugins\": [\n        // must be an array with options object as second item\n        [\"react-transform\", {\n          // must be an array of objects\n          \"transforms\": [{\n            // can be an NPM module name or a local path\n            \"transform\": \"react-transform-hmr\",\n            // see transform docs for \"imports\" and \"locals\" dependencies\n            \"imports\": [\"react\"],\n            \"locals\": [\"module\"]\n          }, {\n            // you can have many transforms, not just one\n            \"transform\": \"react-transform-catch-errors\",\n            \"imports\": [\"react\", \"redbox-react\"]\n          }, {\n            // can be an NPM module name or a local path\n            \"transform\": \"./src/my-custom-transform\"\n          }]\n          // by default we only look for `React.createClass` (and ES6 classes)\n          // but you can tell the plugin to look for different component factories:\n          // factoryMethods: [\"React.createClass\", \"createClass\"]\n        }]\n      ]\n    }\n  }\n}\n```\n\nAs you can see, each transform, apart from the `transform` field where you write it name, also has `imports` and `locals` fields. You should consult the docs of each individual transform to learn which `imports` and `locals` it might need, and how it uses them. You probably already guessed that this is just a way to inject local variables (like `module`) or dependencies (like `react`) into the transforms that need them.\n\nNote that when using `React.createClass()` and allowing `babel` to extract the `displayName` property you must ensure that [babel-plugin-react-display-name](https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-display-name) is included before `react-transform`. See [this github issue](https://github.com/gaearon/babel-plugin-react-transform/issues/19) for more details.\n\nYou may optionally specify an array of strings called `factoryMethods` if you want the plugin to look for components created with a factory method other than `React.createClass`. Note that you don’t have to do anything special to look for ES6 components—`factoryMethods` is only relevant if you use factory methods akin to `React.createClass`.\n\n## Writing Transforms\n\nIt’s not hard to write a custom transform! First, make sure you call your NPM package `react-transform-*` so we have uniform naming across the transforms. The only thing you should export from your transform module is a function.\n\n```js\nexport default function myTransform() {\n  // ¯\\_(ツ)_/¯\n}\n```\n\nThis function should *return another function*:\n\n```js\nexport default function myTransform() {\n  return function wrap(ReactClass) {\n    // ¯\\_(ツ)_/¯\n    return ReactClass;\n  }\n}\n```\n\nAs you can see, you’ll receive `ReactClass` as a parameter. It’s up to you to do something with it: monkeypatch its methods, create another component with the same prototype and a few different methods, wrap it into a higher-order component, etc. Be creative!\n\n```js\nexport default function logAllUpdates() {\n  return function wrap(ReactClass) {\n    const displayName = // ¯\\_(ツ)_/¯\n    const originalComponentDidUpdate = ReactClass.prototype.componentDidUpdate;\n\n    ReactClass.prototype.componentDidUpdate = function componentDidUpdate() {\n      console.info(`${displayName} updated:`, this.props, this.state);\n\n      if (originalComponentDidUpdate) {\n        originalComponentDidUpdate.apply(this, arguments);\n      }\n    }\n\n    return ReactClass;\n  }\n}\n```\n\nOh, how do I get `displayName`?\nActually, we give your transformation function a single argument called `options`. Yes, `options`:\n\n```js\nexport default function logAllUpdates(options) {\n```\n\nIt contains some useful data. For example, your `options` could look like this:\n\n```js\n{\n  // the file being processed\n  filename: '/Users/dan/p/my-projects/src/App.js',\n  // remember that \"imports\" .babelrc option?\n  imports: [React],\n  // remember that \"locals\" .babelrc option?\n  locals: [module],\n  // all components declared in the current file\n  components: {\n    $_MyComponent: {\n      // with their displayName when available\n      displayName: 'MyComponent'\n    },\n    $_SomeOtherComponent: {\n      displayName: 'SomeOtherComponent',\n      // and telling whether they are defined inside a function\n      isInFunction: true\n    }\n  }\n}\n```\n\nOf course, you might not want to use *all* options, but isn’t it nice to know that you have access to them in the top scope—which means before the component definitions actually run? (Hint: a hot reloading plugin might use this to decide whether a module is worthy of reloading, even if it contains an error and no React components have yet been wrapped because of it.)\n\nSo, to retrieve the `displayName` (or `isInFunction`, when available), use the `options` parameter *and* the second `uniqueId` parameter given to the inner function after `ReactClass`:\n\n```js\nexport default function logAllUpdates(options) {\n  return function wrap(ReactClass, uniqueId) {\n    const displayName = options.components[uniqueId].displayName || '<Unknown>';\n```\n\nThis is it!\n\nSure, it’s a slightly contrived example, as you can grab `ReactClass.displayName` just fine, but it illustrates a point: you have information about all of the components inside a file before that file executes, which is *very* handy for some transformations.\n\nHere is the complete code for this example transformation function:\n\n```js\nexport default function logAllUpdates(options) {\n  return function wrap(ReactClass, uniqueId) {\n    const displayName = options.components[uniqueId].displayName || '<Unknown>';\n    const originalComponentDidUpdate = ReactClass.prototype.componentDidUpdate;\n\n    ReactClass.prototype.componentDidUpdate = function componentDidUpdate() {\n      console.info(`${displayName} updated:`, this.props, this.state);\n\n      if (originalComponentDidUpdate) {\n        originalComponentDidUpdate.apply(this, arguments);\n      }\n    }\n\n    return ReactClass;\n  }\n}\n```\n\nNow go ahead and write your own! Don’t forget to tag it with `react-transform` [keyword on npm](https://www.npmjs.com/browse/keyword/react-transform).\n\n## Patrons\n\nThe work on React Transform, [React Hot Loader](https://github.com/gaearon/react-hot-loader), [Redux](https://github.com/rackt/redux), and related projects was [funded by the community](https://www.patreon.com/reactdx). Meet some of the outstanding companies that made it possible:\n\n* [Webflow](https://github.com/webflow)\n* [Ximedes](https://www.ximedes.com/)\n\n[See the full list of React Transform patrons.](PATRONS.md)\n\n## License\n\nMIT\n",
  "readmeFilename": "README.md",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/gaearon/babel-plugin-react-transform.git"
  },
  "scripts": {
    "build": "babel src -d lib",
    "clean": "rimraf lib",
    "prepublish": "npm run clean && npm run build",
    "test": "mocha --compilers js:babel-register",
    "test:watch": "npm run test -- --watch"
  },
  "version": "3.0.0"
}