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

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