• Workbench Runtime

    index
    6
    status
    Draft

    Workbench is the root component that orchestrates all interactions, state, and visual output for a given demo. It provides the runtime environment that ties together the viewer, controls, and example components.

    Core responsibilities

    Workbench manages:

    • Prop context, including current values and units
    • Reactive updates to derived props
    • Playback state and direction for animating props
    • User control visibility and configuration
    • View mode toggles (e.g., exploded vs. plan view)

    Prop context

    Authors must set up the Workbench prop context explicitly from the parent component using setupWorkbenchContext(props):

    <script>
  import { setupProps, useProp } from "../workbench.js";

  setupProps({
    color: { value: "dodgerblue", type: "string" }
  });

  const color = useProp("color");
</script>

    This sets up a shared context that useProp() and the <Workbench> component both rely on. useProp(name) returns either the current value or a [value, unit] tuple for props with units. The Workbench component no longer sets up its own context — it assumes this setup has already occurred in the parent authoring space.

    This model simplifies authoring by letting authors colocate prop definitions and usage in a single file, without splitting each demo into multiple components.

    To update a prop manually (e.g., from within a component), use updateProp(name, newValue) from the same import. This safely updates base and derived props, and triggers dependent reactivity.

    All prop data is exposed as reactive stores under the hood, but Workbench encourages using useProp() and updateProp() to maintain clean, declarative examples.

    Context requirement

    The parent of <Workbench> must call setupProps() before the Workbench is rendered. If no context is found, an error will be logged in development and the Workbench may fail silently in production. Always ensure context is set up at the top of the component that renders the Workbench.

    Playback and animation

    Workbench manages a single play/pause toggle, and tracks direction per animating prop. The playback system ticks on a shared interval, adjusting each playable prop’s value based on its direction and duration.

    Direct user interaction with a control linked to a playable prop pauses playback automatically.

    Context scoping

    All prop context is scoped to a single Workbench instance. This allows multiple Workbenches to appear on a single page without conflicting state.

    Authoring constraints

    Authors define props statically and declaratively. Props are not added or removed at runtime. All animations, reactivity, and derived values are managed through the declared prop structure and Workbench orchestration.

    Prop declarations are static — props cannot be added, removed, or changed in type at runtime.