← All @molecule/* packages · App templates
@molecule/app-tree-view-defaultProvider bond · tree-view · App (browser) · v1.0.1 · Apache-2.0
Default provider for @molecule/app-tree-view
npm install @molecule/app-tree-view-defaultnpm · Source on GitHub · Implements @molecule/app-tree-view
@molecule/app-tree-view-default is a provider bond on the app (browser) side: it implements the tree-view core interface (@molecule/app-tree-view) with a concrete vendor or library behind it.
Your code calls the core; you wire this provider once at startup. Swapping vendors later is one line in that wiring, not a rewrite.
import { provider } from '@molecule/app-tree-view-default'
import { setProvider } from '@molecule/app-tree-view'
setProvider(provider)Works with: @molecule/app-tree-view
Auto-generated, AI-first package reference for the molecule.dev ecosystem. It is written to be read by coding agents as much as by people, and is generated from this package's source — edit
src/index.tsJSDoc, not this file.
Default provider for @molecule/app-tree-view.
Provides an in-memory tree view implementation with node management, selection, and expansion control.
import { provider } from '@molecule/app-tree-view-default'
import { setProvider } from '@molecule/app-tree-view'
setProvider(provider)
provider
npm install @molecule/app-tree-view-default @molecule/app-tree-view
DefaultTreeViewConfigProvider-specific configuration options.
interface DefaultTreeViewConfig {
/** Whether to expand all nodes by default. Defaults to `false`. */
expandAll?: boolean
}
createProvider(config)Creates a default tree view provider.
function createProvider(config?: DefaultTreeViewConfig): TreeViewProvider
config — Optional provider configuration.Returns: A configured TreeViewProvider.
providerDefault tree view provider instance.
const provider: TreeViewProvider
Implements @molecule/app-tree-view interface.
Setup function to register this provider with the core interface:
import { setProvider } from '@molecule/app-tree-view'
import { provider } from '@molecule/app-tree-view-default'
export function setupTreeViewDefault(): void {
setProvider(provider)
}
Peer dependencies:
@molecule/app-tree-view ^1.0.1@molecule/app-tree-viewFully supported: node CRUD, expansion
(expandNode/collapseNode/expandAll/collapseAll), selection with
multiSelect, and onExpand (which fires on BOTH expand and collapse —
read node.expanded to tell which). Checkboxes: when created with
showCheckboxes: true, toggleChecked(id) flips a node's checked state
(independent of selected, skips disabled nodes) and getCheckedNodes()
returns the checked set; with the knob off, toggleChecked is a no-op. Drag:
when created with draggable: true, moveNode(sourceId, targetId, position)
reparents/reorders the node (before/after as a sibling, inside as a
child), fires onDrop(source, target, position), and returns true; with
the knob off — or for a self/descendant/unknown target — it is a rejected
no-op returning false and onDrop never fires. getData() returns a deep
clone — mutate via the instance methods, not the returned array
(getSelectedNodes()/getCheckedNodes() and the on* callbacks expose the
live internal nodes).
End-to-end checklist — drive the RENDERED tree in the live preview (real nodes, no mocks), adapt each item to this app's actual tree screen, and check every box off one by one. A box you can't check is an integration bug to fix — not a skip:
data render on screen with their labels; a
node with children shows an expand/collapse affordance and a leaf does
not. A node with disabled: true renders non-interactive — clicking it
neither selects it nor fires onSelect.expanded flag in getData() matches
what's on screen. expandAll()/collapseAll() open/close the whole tree;
each toggle fires onExpand with the affected node.onSelect fires with THAT node (verify its
id/label), the row is visibly highlighted, and the node appears in
getSelectedNodes().multiSelect off (default),
selecting a second node REPLACES the first (getSelectedNodes() holds one);
with multiSelect: true, selections ACCUMULATE (the set grows).showCheckboxes is enabled, a checkbox renders per node and toggling
one updates that node's selected state and getSelectedNodes(). Where the
app wires parent/child cascade, checking a parent also checks its rendered
children (the core exposes selection state, not a built-in cascade).draggable is enabled, dragging a node onto another fires onDrop
with the source, target, and position (before/after/inside) and the
tree re-renders in the new order; onDrop never fires when draggable is
off.