React Lazify

A VS Code extension for React

React Lazify is a lazy way to write lazy imports (see what I did there?). Back with the release of React 18, Next13, and Gatsby 5, I've found myself making a LOT more lazy imports and needing to go back to refactor old sites as we upgraded. I found myself having to go through and re-write a ton of imports. Thus an extension was born.

Instead of just writing a quick bash script or codemod, I figured I would take the time to make something a bit more robust and shareable. (This was also for fun) Now I am maintaining my own VS code extension and am already starting to iterate on it too.

Note: This might be slightly out of date with the current version of the extension

Repository VS Code Marketplace

Typescript
Mocha
React
VS Code

A gif showing the basic function of React Lazify

A demonstration of the React Lazify extension working within the JSX return

Basic functionality

This shows the basic functionality of the extension, which is quite simple.

Select an import with your cursor
ctrl+alt+cmd+L
Supports multiple cursor selections and highlighted selections

Works from the JSX too!

Select the component you wish to covert within the JSX return
Use the keyboard shortcut ctrl+opt+cmd+L to make it lazy
Supports selections with multiple cursors and highlighting
will STILL ignore non-default imports even if selected

Unit tests with Mocha

Tested on Mac, Linux, and Windows OS with 98% test coverage. Though I would typically prefer to write my tests with Jest. Mocha integrates well with the VS Code environment and its always better to choose the right tool for the job.

Slowly gaining popularity

With a VS code marketplace ranking of 5 stars, 9 Github stars, and 259 downloads (as of writing this) it's starting to gain (a very little bit) of popularity. It's just nice to build software that people are using!