{"id":13739615,"url":"https://github.com/gaearon/babel-plugin-react-transform","last_synced_at":"2025-09-27T08:31:02.486Z","repository":{"id":40005240,"uuid":"41516944","full_name":"gaearon/babel-plugin-react-transform","owner":"gaearon","description":"Babel plugin to instrument React components with custom transforms","archived":true,"fork":false,"pushed_at":"2018-09-03T17:07:41.000Z","size":105,"stargazers_count":1073,"open_issues_count":10,"forks_count":87,"subscribers_count":42,"default_branch":"master","last_synced_at":"2025-09-26T02:56:01.506Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gaearon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-08-27T23:50:00.000Z","updated_at":"2025-06-01T23:48:48.000Z","dependencies_parsed_at":"2022-06-26T06:03:05.555Z","dependency_job_id":null,"html_url":"https://github.com/gaearon/babel-plugin-react-transform","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"purl":"pkg:github/gaearon/babel-plugin-react-transform","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gaearon%2Fbabel-plugin-react-transform","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gaearon%2Fbabel-plugin-react-transform/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gaearon%2Fbabel-plugin-react-transform/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gaearon%2Fbabel-plugin-react-transform/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gaearon","download_url":"https://codeload.github.com/gaearon/babel-plugin-react-transform/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gaearon%2Fbabel-plugin-react-transform/sbom","scorecard":{"id":416928,"data":{"date":"2025-08-11","repo":{"name":"github.com/gaearon/babel-plugin-react-transform","commit":"d7069df5c6f36a07857fd108067dc515b3a795ee"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3.4,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Code-Review","score":3,"reason":"Found 7/23 approved changesets -- score normalized to 3","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Maintained","score":0,"reason":"project is archived","details":["Warn: Repository is archived."],"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 15 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}}]},"last_synced_at":"2025-08-19T00:09:41.049Z","repository_id":40005240,"created_at":"2025-08-19T00:09:41.049Z","updated_at":"2025-08-19T00:09:41.049Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":277156811,"owners_count":25770701,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-26T02:00:09.010Z","response_time":78,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T04:00:35.794Z","updated_at":"2025-09-27T08:31:02.094Z","avatar_url":"https://github.com/gaearon.png","language":"JavaScript","funding_links":["https://www.patreon.com/reactdx"],"categories":["Plugins"],"sub_categories":["React"],"readme":"\u003e## This Project Is Deprecated\n\n\u003eReact 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 || '\u003cUnknown\u003e';\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 || '\u003cUnknown\u003e';\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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgaearon%2Fbabel-plugin-react-transform","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgaearon%2Fbabel-plugin-react-transform","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgaearon%2Fbabel-plugin-react-transform/lists"}