web synth docs

view-context

A view context (often abbreviated vc in web synth code) is the name for one of the top-level [module]s of the web synth application. It can be created as a standalone entity, renders independently to a view, and optionally exposes [audio-connectables] to allow it to be used as a part of the [audio-graph].

For a guide on how to create new view contexts to add new functionality to web synth, check out [creating-new-view-contexts].

technical information

View Contexts have a lifecycle that is defined by the ViewContext Rust trait in the [engine] and managed by the [view-context-manager]. The trait is the best place to look for up-to-date documentation, but the lifecycle roughly looks like this:

  1. VCs are created via an init method. This method is optionally provided a string which contains serialized state created the last time the VC was saved which should be deserialized and loaded. It should also handle mounting and rendering the VC's UI into the DOM.
  2. VCs expose hide and unhide methods which are meant to toggle the visibility of the VC's UI. These should not disable the VC or otherwise alter its functionality; they are solely used to facilitate changing tabs in the UI.
  3. A cleanup method exists which should tear down all UI rendered by the VC, remove all [patch-network] entities or other [audio-connectables] created by the VC, and dispose of any other resources used by the VC.

Note that there are several higher-order React helper functions to help implement this lifecycle. Search the code for the following for more info:

  • mkContainerRenderHelper
  • mkContainerCleanupHelper
  • mkContainerHider
  • mkContainerUnhider
view-context