For full text search please use the '?' prefix. e.g. ? Onboarding

Init View

Lifecycle

Register command

We register the ShowPreview command and pass in a preview panel factory to hold the vscode panel

vscode.registerCommand(
    ShowPreviewCommand.new(PreviewPanelFactory.create(workspace));
)

Initialize Preview Factory

create {
    if !PreviewPanelFactory._preview { 
        PreviewPanelFactory._preview = new PreviewPanel
    }

}

Initialize a Panel

new PreviewPanel {
    // write up 
}

Show Panel

Panel is created. Handles messages from the webview and will update the editor on certain preview events

class PreviewPanel {

    show {
        VIEW_KEY := "Preview"
        const { bundleName: name } = getWebEditorViewEntry(DendronEditorViewKey[KEY]);
        const webViewAssets = WebViewUtils.getJsAndCss(name);
        createWebviewPanel(
            localResourceRoots: WebViewUtils.getLocalResourceRoots
        )
        getWebviewContent
        setupCallbacks
    }

    setupCallbacks {
        // handle messages from the webview
        _panel.webview.onDidReceiveMessag(msg => {
            switch(msg.type)
                case MESSAGE_DISPATCHER_READY {
                    ...
                }
                case ON_CLICK {
                    ...
                }
                ...
        })
    }
}

Rendering

From Render
Go to text ā†’

renderIndex

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

renderDendronVsCodeApp

  1. 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);

  2. renderOnDOM

    • this is a helper: wraps the component with the parent DendronApp container and renders it using ReactDOM
    renderOnDOM(Component) {
    ReactDOM.render(
        {renderWithDendronApp(Component)}
    )
}

  3. renderWithDendronApp

    • wraps the component with DendronVSCodeApp
    DendronApp {
    <Provider>
        <DendronVSCodeApp />
    </Provider>
}

  • DendronVSCodeApp 

    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