{"id":17623495,"url":"https://github.com/aadsm/refact","last_synced_at":"2025-03-30T01:33:13.839Z","repository":{"id":66091879,"uuid":"52071142","full_name":"aadsm/refact","owner":"aadsm","description":"Refactoring tool for React Components","archived":false,"fork":false,"pushed_at":"2016-03-02T15:43:55.000Z","size":468,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-05T03:35:38.918Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://aadsm.github.io/refact/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aadsm.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-02-19T07:55:39.000Z","updated_at":"2018-11-28T10:01:47.000Z","dependencies_parsed_at":null,"dependency_job_id":"2962e3ac-7038-4831-a6e1-e79bf77beea2","html_url":"https://github.com/aadsm/refact","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aadsm%2Frefact","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aadsm%2Frefact/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aadsm%2Frefact/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aadsm%2Frefact/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aadsm","download_url":"https://codeload.github.com/aadsm/refact/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246264995,"owners_count":20749575,"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","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-10-22T21:10:12.620Z","updated_at":"2025-03-30T01:33:13.805Z","avatar_url":"https://github.com/aadsm.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Refact\n\n# What it does\nUseful for when you have a react component that grew too much and now you want to separate it into multiple little components.\n\nYou 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.\n\nGive it a go at http://aadsm.github.io/refact.\n\n# Caveats\nThis 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.\n\nIt only supports generating ES6 react based classes, will had support for classic React later (React.createClass).\n\nFactoring 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.\n\n# How to use locally\n```bash\nnpm install \u0026\u0026 npm run dist\n```\n\nOpen `gui/index.html` in a browser.\nFollow the instructions at the top.\n\nUse `npm run watch` to automatically compile the code on file changes.\n\n# Documentation\n\nThis refactoring is based on two main classes: `Refactor` and `FactoredReactComponent`.\n\n## Refactor\nThis 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:\n\n```javascript\nvar yourCode = 'function render() { return \u003cdiv className=\"foo\"\u003e\u003ch1\u003eTitle\u003c/h1\u003e\u003c/div\u003e; }';\nvar refactor = new Refactor(yourCode);\nvar factoredReactComponent = refactor.factorElementAt(0, 30, 'es6');\n```\n\n`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).\n\n### FactoredReactComponent\nYou 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.\n\n```javascript\n// Change its name\nfactoredReactComponent.setName(\"MyComponent\");\n// Read the properties created\nfactoredReactComponent.getProps();\n// Change the properties' names\nfactoredReactComponent.setPropName(0, \"className\");\n```\n\nThe first argument of the `setPropName` method is the prop index returned by `getProps()`.\n\nWhen you're happy with the new React component you can print out its code:\n```javascript\nconsole.log(factoredReactComponent.toSource());\n```\n\nFinally you need to start using this new component in your code to replace the factored elements:\n```javascript\nrefactor.applyFactoredReactComponent(factoredReactComponent);\nconsole.log(refactor.toSource());\n```\n\nYou can call `applyFactoredReactComponent` as many times as you want to update it with your factoredReactComponent changes.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faadsm%2Frefact","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faadsm%2Frefact","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faadsm%2Frefact/lists"}