Dendron Plugin Views Quickstart

To see a video walkthrough of everything, go here

Prerequisites

1. Finish steps from Dendron Plugin Quickstart
2. Launch Test Workspace

Video Walkthroughs

• Creating new component in Dendron Plugin Views

Steps

• NOTE: unlike all other packages in the monorepo, running the watch script watch will not compile code inside this pacakge

When working on plugin views, there are two modes of development: browser and IDE.

Developing in Browser Mode

1. Make sure that Test Workspace is running on port 3005
2. Navigate to package

   cd $DENDRON_REPO_ROOT/packages/dendron-plugin-views
   

3. Run

   # this builds stylesheets and generates a dynamic index.html
   yarn setup
   env REACT_APP_VIEW_NAME=$VIEW_NAME yarn start
   

   • NOTE: $VIEW_NAME is anything in dendron-plugin-views/src/views/* minus the .tsx extension. it is the name of the Component, not the file name
     • Dendron will dynamically require the module when yarn start is called
   • This will open up the browser at localhost:3000. When developing on the browser, Dendron will have some defaults loaded depending on what view you are using.
4. When developing against the browser, you don't have direct access to the workspace. Instead, you'll need to use window.postMessage api to simulate vscode actions. To do this, open up the developer console (inside browser) and simulate events by pasting the following event:
   From Cook

   Go to text →

   • TIP: You can change the id to any id inside of Test Workspace to see how different views function

   id = "9eae08fb-5e3f-4a7e-a989-3f206825d490";
   window.postMessage({
     type: "onDidChangeActiveTextEditor",
     data: { note: { id } },
     source: "vscode",
   });
   

• TIP: to set the theme in browser mode, you can run env THEME={dark|light} yarn start
• GOTCHA: if you edit ../packages/common-server/src/etc.ts (Private), you'll need to restart the watcher

Developing in IDE Mode

1. After you have made code changes, export all assets by running

   yarn build:dev ^w6jviyyunzqw
   

2. After assets are compiled, follow the Run extension for Plugin Core

---

Footnotes

1. Dendron Plugin Quickstart˄

---

Backlinks

• Dendron Plugin Views
• Qa
• Add an Editor View