https://github.com/aadsm/refact
Refactoring tool for React Components
https://github.com/aadsm/refact
Last synced: about 2 months ago
JSON representation
Refactoring tool for React Components
- Host: GitHub
- URL: https://github.com/aadsm/refact
- Owner: aadsm
- License: bsd-3-clause
- Created: 2016-02-19T07:55:39.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-03-02T15:43:55.000Z (about 9 years ago)
- Last Synced: 2025-02-05T03:35:38.918Z (4 months ago)
- Language: JavaScript
- Homepage: http://aadsm.github.io/refact/
- Size: 457 KB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Refact
# What it does
Useful for when you have a react component that grew too much and now you want to separate it into multiple little components.
You can paste or drag your code into a text editor, and then select which react element you want to factor out. A new react component will be created out of this element and your code will be updated to use this new component instead.
Give it a go at http://aadsm.github.io/refact.
# Caveats
This is just a proof of concept of an idea I had in mind for a while ago. There's still much to do if I find this to be useful in my day to day work.
It only supports generating ES6 react based classes, will had support for classic React later (React.createClass).
Factoring out of the selected element into a new React element uses the most simple and naive way. Dependencies are not brought at all into the new component. This is something I plan to address in the future.
# How to use locally
```bash
npm install && npm run dist
```
Open `gui/index.html` in a browser.
Follow the instructions at the top.
Use `npm run watch` to automatically compile the code on file changes.
# Documentation
This refactoring is based on two main classes: `Refactor` and `FactoredReactComponent`.
## Refactor
This class represents the code you want to refactor. You initialize it with your code and then you can create a new React component by selecting a react element to refactor:
```javascript
var yourCode = 'function render() { return
Title
; }';
var refactor = new Refactor(yourCode);
var factoredReactComponent = refactor.factorElementAt(0, 30, 'es6');
```
`factorElementAt` receives the line and column where the element is located (in this case the `div`) and returns a `FactoredReactComponent` instance. 'es6' is the component template to use, in this case an ES6 React Component (it's the only one for now).
### FactoredReactComponent
You can edit the new react component name and any properties that were created to pass in dependencies that existed in your code. In this example there will be one property, the className.
```javascript
// Change its name
factoredReactComponent.setName("MyComponent");
// Read the properties created
factoredReactComponent.getProps();
// Change the properties' names
factoredReactComponent.setPropName(0, "className");
```
The first argument of the `setPropName` method is the prop index returned by `getProps()`.
When you're happy with the new React component you can print out its code:
```javascript
console.log(factoredReactComponent.toSource());
```
Finally you need to start using this new component in your code to replace the factored elements:
```javascript
refactor.applyFactoredReactComponent(factoredReactComponent);
console.log(refactor.toSource());
```
You can call `applyFactoredReactComponent` as many times as you want to update it with your factoredReactComponent changes.