Architecture
Summary
Dendron views are served using Webviews
We use CRA to generate a client side React App and customize the webpack file to generate one javascript bundle and one css bundle for each webview.
Development Modes
When developing new views, there are two ways of doing development
- IDE Mode
- Browser Mode
Browser Mode
From Concepts
Go to text ā
In browser mode, we start a webpack dev server to see changes to plugin views in real time.
Pros:
- realtime changes without running
webpack export
Cons:
- not natively integrated into vscode, need to shim methods to access the running workspace
Browser mode is great for development speed but it means we're not acutally testing the view integration with VSCode. Instead, we need to manually call postMessage to simulate VSCode events.
IDE Mode
From Concepts
Go to text ā
In IDE mode, we run webpack export to generate static js and css bundles of all views. We then launch the Dendron Plugin in development mode to see the webview changes integrated with VSCode
Pros:
- full fidelity webview testing
Cons:
- slow iteration time, exporting takes time
- takes longer to debug (need to launch vscode, launch a web view developer tools, and then inspect the view inside of there)
Backlinks