Initial commit

Author: gaearon

.gitignore

@@ -0,0 +1,4 @@
+node_modules
+lib
+*.log
+DS_Store

CODE_OF_CONDUCT.md

@@ -0,0 +1,13 @@
+# Contributor Code of Conduct
+
+As contributors and maintainers of this project, we pledge to respect all people who contribute through reporting issues, posting feature requests, updating documentation, submitting pull requests or patches, and other activities.
+
+We are committed to making participation in this project a harassment-free experience for everyone, regardless of level of experience, gender, gender identity and expression, sexual orientation, disability, personal appearance, body size, race, age, or religion.
+
+Examples of unacceptable behavior by participants include the use of sexual language or imagery, derogatory comments or personal attacks, trolling, public or private harassment, insults, or other unprofessional conduct.
+
+Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct. Project maintainers who do not follow the Code of Conduct may be removed from the project team.
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by opening an issue or contacting one or more of the project maintainers.
+
+This Code of Conduct is adapted from the [Contributor Covenant](http://contributor-covenant.org), version 1.0.0, available at [http://contributor-covenant.org/version/1/0/0/](http://contributor-covenant.org/version/1/0/0/)

README.md

@@ -0,0 +1,59 @@
+# react-transform-catch-errors
+
+A [React Transform](https://github.com/gaearon/babel-plugin-react-transform) that catches errors inside `render()` function and renders a React component with an error message instead.
+
+It’s up to you to choose the React component to render an error message. For example, you may use [redbox-react](https://github.com/KeywordBrain/redbox-react) that imitates React Native “red screen of death”.
+
+## Installation
+
+First, install the [Babel plugin](https://raw.githubusercontent.com/gaearon/babel-plugin-react-transform):
+
+```
+npm install --save-dev babel-plugin-react-transform
+```
+
+Then, install the transform:
+
+```
+npm install --save-dev react-transform-catch-errors
+```
+
+Finally, install the component for rendering errors, for example:
+
+```js
+npm install --save-dev redbox-react
+```
+
+You may also use a custom component instead.
+
+Now edit your `.babelrc` to include `extra.babel-plugin-react-transform`.  
+It must be an array of the transforms you want to use:
+
+```js
+{
+  "stage": 0,
+  "plugins": [
+    "react-transform"
+  ],
+  "extra": {
+    // must be defined and be an array
+    "react-transform": [{
+      "target": "react-transform-catch-errors",
+      // now go the imports!
+      // the first import is your React distribution
+      // (if you use React Native, pass "react-native" instead)
+      // the second import is the React component to render error
+      // (it can be a local path too, like "./src/ErrorReporter")
+      "imports": ["react", "redbox-react"]
+    }]
+    // note: you can put more transforms into array
+    // this is just one of them!
+  }
+}
+```
+
+This transform has no effect when `process.env.NODE_ENV` is set to `'production'`.
+
+## License
+
+MIT

package.json

@@ -0,0 +1,33 @@
+{
+  "name": "react-transform-catch-errors",
+  "version": "0.1.0",
+  "description": "React Transform that catches errors inside React components",
+  "main": "lib/index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gaearon/react-transform-catch-errors.git"
+  },
+  "author": "Dan Abramov <[email protected]>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/gaearon/react-transform-catch-errors/issues"
+  },
+  "homepage": "https://github.com/gaearon/react-transform-catch-errors#readme",
+  "scripts": {
+    "clean": "rimraf lib",
+    "build": "babel src --out-dir lib",
+    "prepublish": "npm run clean && npm run build"
+  },
+  "keywords": [
+    "react-transform",
+    "react",
+    "reactjs",
+    "errors",
+    "rhl",
+    "dx"
+  ],
+  "devDependencies": {
+    "babel": "^5.8.23",
+    "rimraf": "^2.4.3"
+  }
+}

src/development.js

@@ -0,0 +1,24 @@
+export default function catchErrors({ filename, components, imports }) {
+  const [React, ErrorReporter] = imports;
+  if (!React || !React.Component) {
+    throw new Error('imports[0] for react-transform-catch-errors does not look like React.');
+  }
+  if (typeof ErrorReporter !== 'function') {
+    throw new Error('imports[1] for react-transform-catch-errors does not look like a React component.');
+  }
+
+  return function wrapToCatchErrors(ReactClass, componentId) {
+    const originalRender = ReactClass.prototype.render;
+    ReactClass.prototype.render = function tryRender() {
+      try {
+        return originalRender.apply(this, arguments);
+      } catch (err) {
+        console.error(err);
+        return React.createElement(ErrorReporter, {
+          error: err
+        });
+      }
+    };
+    return ReactClass;
+  };
+}

src/index.js

@@ -0,0 +1,5 @@
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./production');
+} else {
+  module.exports = require('./development');
+}

src/production.js

@@ -0,0 +1,3 @@
+export default function noop() {
+  return ReactClass => ReactClass;
+}