Render

renderIndex

Import index

src: ../packages/dendron-plugin-views/src/index.tsx (Private)

VIEW_NAME = process.env["REACT_APP_VIEW_NAME"] || "";
...
View = require(VIEW_NAME)

renderDendronVsCodeApp

Import a component and wrap it with its own DOM renderer
- NOTE: the following uses src/views/DendronNotePageView.tsx as an example
```
import DendronNotePage from "../components/DendronNotePage";

renderOnDOM(DendronNotePage);
```

renderOnDOM

this is a helper: wraps the component with the parent DendronApp container and renders it using ReactDOM

renderOnDOM(Component) {
    ReactDOM.render(
        {renderWithDendronApp(Component)}
    )
}

renderWithDendronApp

wraps the component with DendronVSCodeApp

DendronApp {
    <Provider>
        <DendronVSCodeApp />
    </Provider>
}

DendronVSCodeApp

source: ../packages/dendron-plugin-views/src/components/DendronApp.tsx (Private)

DendronVSCodeApp {
    ctx = "DendronVSCodeApp"

    log "enter", workspace
    // see [[useEngine|dendron://dendron.docs/pkg.dendron-plugin-views.arch.lifecycle#useengine]]
    useEngine
    useEffect {
        // tell vscode that client has loaded
        postVSCodeMessage {
            type: INIT,
            source: webClient
        }
    }
    // listen to vscode messages
    // on INIT, vscode will send over all current notes and schemas
    useVSCodeMessage {
        ...
    }
}

renderCustomComponent

src/components/DendronNotePage.tsx

DendronNotePage {

     // this renders the note page
     // noteProps is obtained from vscode and passed in via redux
    useRenderedNoteBody(noteProps, noteId) {
        renderedNoteContentHash = useRef
        if noteProps.contentHash != renderedNoteContentHash {
            engineSlice.renderNote noteId
        }
    }
    ...
}

Backlinks

renderIndex

renderDendronVsCodeApp

renderCustomComponent