├── .babelrc
├── .eslintrc
├── .gitignore
├── .travis.yml
├── LICENSE
├── README.md
├── demo
├── entry.js
└── preview.gif
├── package.json
├── src
├── fix-it.js
├── index.js
└── options.js
├── test
└── fix-it.spec.js
├── webpack.config.js
└── yarn.lock
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["es2015", "react"]
3 | }
4 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "airbnb",
3 |
4 | "env": {
5 | "jest": true,
6 | "browser": true
7 | },
8 |
9 | "rules": {
10 | "semi": [2, "never"],
11 | "no-console": 0,
12 | "react/jsx-filename-extension": [2, { "extensions": [".js"] }],
13 | "react/no-multi-comp": 0,
14 | "import/no-extraneous-dependencies": [2, { "devDependencies": ["demo/*", "test/*", "*.config.js"] }]
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | build
2 | dist
3 | node_modules
4 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | - "6"
4 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2016 Michele Bertoli
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # React Fix It [](https://travis-ci.org/MicheleBertoli/react-fix-it)
2 | Automagically generate tests from errors.
3 |
4 | :warning: This package uses [react-component-errors](https://github.com/staxmanade/react-component-errors) to wrap the lifecycle methods into a try...catch block, which affects the performance of your components. Therefore it should **not** be used in production.
5 |
6 | ## How to use it
7 |
8 | - Enhance your components with `fixIt`
9 | - Write some bugs (or wait for your components to fail)
10 | - Open the console and copy the test snippet
11 | - Paste the code to reproduce the error
12 | - Fix the bugs and celebrate
13 |
14 | ## Demo
15 |
16 | [https://michelebertoli.github.io/react-fix-it/](https://michelebertoli.github.io/react-fix-it/)
17 |
18 | 
19 |
20 | ## Installation
21 |
22 | > You can either install it with [npm](https://nodejs.org) or [yarn](https://yarnpkg.com).
23 |
24 | ```sh
25 | npm install --save-dev react-fix-it
26 | ```
27 | or
28 | ```sh
29 | yarn add --dev react-fix-it
30 | ```
31 |
32 | ## Example
33 |
34 | ```jsx
35 | import React, { Component } from 'react'
36 | import fixIt, { options } from 'react-fix-it'
37 |
38 | // defaults to console.log
39 | options.log = (test) => {
40 | console.warn(test)
41 | doWatheverYouWant(test)
42 | }
43 |
44 | class MyComponent extends Component {
45 | render() {
46 | return Hello ⚛
47 | }
48 | }
49 |
50 | export default fixIt(MyComponent)
51 | ```
52 |
53 | :bulb: They easiest way to patch automatically all the components in development mode is by using [babel-plugin-react-fix-it](https://github.com/MicheleBertoli/babel-plugin-react-fix-it) with the following configuration:
54 | ```json
55 | {
56 | "env": {
57 | "development": {
58 | "plugins": ["react-fix-it"]
59 | }
60 | }
61 | }
62 | ```
63 |
64 | ## Test
65 | ```sh
66 | npm test
67 | ```
68 | or
69 | ```sh
70 | yarn test
71 | ```
72 |
--------------------------------------------------------------------------------
/demo/entry.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import ReactDOM from 'react-dom'
3 | import fixIt, { options } from '../src'
4 |
5 | class Evil extends Component {
6 |
7 | componentWillReceiveProps(nextProps) {
8 | if (nextProps.shouldThrow) {
9 | throw new Error('💩')
10 | }
11 | }
12 |
13 | render() {
14 | return Hello ⚛
15 | }
16 |
17 | }
18 |
19 | const SuperEvil = fixIt(Evil)
20 |
21 | class CustomLogger extends Component {
22 |
23 | constructor(props) {
24 | super(props)
25 |
26 | this.state = { test: null }
27 |
28 | options.log = test => this.setState({ test })
29 | }
30 |
31 | render() {
32 | return this.state.test && {this.state.test}
33 | }
34 |
35 | }
36 |
37 | class App extends Component {
38 |
39 | constructor(props) {
40 | super(props)
41 |
42 | this.state = { shouldThrow: false }
43 |
44 | this.handleClick = this.handleClick.bind(this)
45 | }
46 |
47 | handleClick() {
48 | this.setState({ shouldThrow: true })
49 | }
50 |
51 | render() {
52 | return (
53 |
54 | 💥
56 |
58 | )
59 | }
60 |
61 | }
62 |
63 | ReactDOM.render(