116 lines
15 KiB
JSON
116 lines
15 KiB
JSON
{
|
||
"_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[](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\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"
|
||
}
|