How it works under the hood
This is how the extension works under the hood. It's not necessary to read this to use the extension, but it might be interesting to some.
The extension operates by:
- Creating a temporary copy of the current file.
- Integrating this copy with a GUI editor app.
- Bundling the file using rs-pack, a new webpack-compatible tool.
- Running the bundle with rspack-dev-server.
When you make a change inside the GUI editor:
- Direct modifications are made to the HTML DOM (not Virtual DOM).
- The source code in the text editor is updated to reflect these changes, without directly saving them to the file.
The main challenge in developing this extension was ensuring synchronization between the GUI changes and the code updates, and it's far from being perfect even now. If you notice any differences between the GUI and the code, please report (opens in a new tab).
pre-installed modules
Following npm packages are pre-installed in the extension, because they are likely to be used. If you have the package in your repo, the bundler will resolve it from your repo, not from the extension. Even if you don't have the package, UIs that depends on these packages will work inside Vigma RN Editor. (But it'll fail to build in your repo)
react-native-webreact-native-svg@expo/vector-icons