nvim-ReFact

A Neovim plugin Inspired by VSCode extension Glean

The plugin provides refactoring tools for your React codebase. Extract JSX into a new component, wrapping with Hooks and more!

Highlights

• Allows extracting JSX into new component
• Allows wrapping JSX with conditional

Requirements

• nvim-treesitter including a parser for your language

• nui.nvim

Installation

Packer.nvim

use 'Balagha/nvim-ReFact'

vim-plug

Plug 'Balagha/nvim-ReFact'

 

Extracting JSX into a new Component

treesitter-refact-react allows easy extraction of JSX into new React components (in the same or other file). Just select the JSX to extract, and it will handle all the rest:

• Generate Functional Component, such that the extracted JSX will continue to function.
• It will identify all inputs to the newly created component.
• Replace extracted JSX with newly created component, while providing it with all the props.

Examples:

• vv to select the inner unit
• r to change the JSX into new React components

gif...

Useful mappings

init.lua

vim.api.nvim_set_keymap('n', 'vv', ':lua require"nvim-ReFact".select()<CR>', {noremap=true})

vim.api.nvim_set_keymap('v', 'r', ':lua require"nvim-ReFact".change()<CR>', {noremap=true})

init.vim

xnoremap vv :lua require"nvim-ReFact".select()<CR>

xnoremap r :lua require"nvim-ReFact".change()<CR>

 

How to run this project into your machine

make sure you have fulfilled the requirements and necessary key mappings

# clone this repo
$ git clone https://github.com/tamanna190101/nvim-ReFact.git

$ cd nvim-ReFact

# set runtime path and open lua init.lua file and example.js file for test lua implementation
$ nvim --cmd "set rtp+=./" lua/nvim-ReFact/init.lua -O example.js

To setup Neovim Treesitter Playground follow this link.

Licensing

Licensed under the Apache License. Check the LICENSE file for details.