Instances & Slots

Nothing renders

Almost always a target that did not resolve. createDock runs immediately, so if the script executes before the element exists, the selector returns null.

1const dock = createDock({
2    target: "#app",
3    state: { query: "", selected: null },
4})
5 
6dock.set("query", "deploy")
7console.log(dock.get("query")) // "deploy"

Selectors

Options

A slot is a named position inside a component that accepts arbitrary children. Slots are how Docks composes without inheritance: a component declares where content may go, and the caller decides what goes there.

• Named slotsCheck the console for the target not found warning.

• Derived valuesDocks scopes its styles to the instance root. If a global reset or utility framework sets styles with higher specificity, those win. Load the Docks stylesheet last, or raise the instance root’s specificity with a wrapper class.

• for values computed from other values. Derived values are cached and recomputed only when their inputs change.The value passed to that slot is changing identity each render — usually an inline arrow function or object literal. Hoist it outside the render, or memoise it.

— additional components to register beyond the built-ins.

Instance methods

1dock.render("panel", {
2    header: "Deployments",
3    body: () => list(items),
4    footer: null,
5})

option overrides the OS preference for the life of the instance. Pass

if you want it to track

1. Memory grows on navigation

2. dock.destroy() leave observers attached. Destroy the instance in your route teardown, then create a fresh one.

3. Still stuck?

Open an issue with a minimal reproduction — the version, the options you passed, and the smallest markup that shows the problem. That is almost always enough to identify the cause.

Call dock.destroy() — tear the instance down and release all listeners.