Skip to main content

treeViewModule

MS Code Extension API

MS Code Extension API / core/extensionAPI/modules/window/treeViewModule

core/extensionAPI/modules/window/treeViewModule

Interfaces​

TreeView​

Defined in: core/extensionAPI/modules/window/treeViewModule.ts:10

Handle contract returned to extensions when instantiating a custom tree interface.

  • This instance exposes standard lifecycle modifiers allowing plugins to dynamically control visibility states, trigger structural mutations, or safely unbind memory locks.

Properties​

id​

readonly id: string

Defined in: core/extensionAPI/modules/window/treeViewModule.ts:12

The unique channel identifier matching this structural panel slot (e.g. 'npmScriptsExplorer').

title​

title: string

Defined in: core/extensionAPI/modules/window/treeViewModule.ts:17

Title text rendered dynamically inside the sidebar container panel wrapper.

Methods​

dispose()​

dispose(): void

Defined in: core/extensionAPI/modules/window/treeViewModule.ts:22

Safe destructor sequence removing this structural tree container context immediately from the core system state.

Returns​

void

TreeViewOptions​

Defined in: core/extensionAPI/modules/window/treeViewModule.ts:28

Metadata configuration settings supplied by extensions during custom Tree initialization blocks.

Properties​

title?​

optional title?: string

Defined in: core/extensionAPI/modules/window/treeViewModule.ts:33

Natural text caption rendered visible to users inside the sidebar header.

treeDataProvider​

treeDataProvider: TreeDataProvider

Defined in: core/extensionAPI/modules/window/treeViewModule.ts:30

Dynamic data-source abstraction layer feeding nested labels, icons, badges, and async child streams to the UI.

Type Aliases​

TreeViewModule​

TreeViewModule = ReturnType<typeof createTreeViewModule>

Defined in: core/extensionAPI/modules/window/treeViewModule.ts:134

Functions​

createTreeViewModule()​

createTreeViewModule(_extId): object

Defined in: core/extensionAPI/modules/window/treeViewModule.ts:41

Factory Module Orchestrator wrapping the core Zustand registry to safely deploy extension-contributed hierarchies.

  • Connects third-party asynchronous tree data models directly into the reactive useTreeViewRegistry pipeline.

Parameters​

_extId​

string

The validated identity string capturing the active extension package signature.

Returns​

createTreeView​

createTreeView: (viewId, options) => TreeView

mscode.window.createTreeView​

  • Allocates and hooks a stateful, data-agnostic tree container view into the application framework. Leverages the GenericTreeView visual component upstream by binding the target data provider inside the global registry.

  • Extension API Usage & Dynamic Tree Data Pipeline​

Extensions feed structured or asynchronous tree data seamlessly by initializing compliant provider contracts: *

Parameters​
viewId​

string

The unique structural registration target path across the layout mapping coordinates.

options​

TreeViewOptions

Core tracking attributes configuration container holding providers and descriptors.

Returns​

TreeView

An instantiated state handle conforming to the strict structural TreeView contract layer.

Example​
// 1. Construct a structural provider handling database data streams
const databaseProvider = {
getChildren: async (element?: TreeItem) => {
if (!element) {
// Root level nodes definition
return [{ id: 'cluster-1', label: 'Production_Cluster', collapsibleState: 'expanded' }];
}
// Sub-option lazy fetch trigger
return [{ id: 'table-users', label: 'Users_Schema', collapsibleState: 'none', icon: 'file' }];
},
onItemClick: (item) => {
mscode.window.showInformationMessage(`Opening database schema: ${item.label}`);
}
};
* // 2. Bind the provider securely using your treeView API module
const myDatabaseTree = mscode.window.createTreeView('mySqlExplorerView', {
title: 'SQL Database Explorer',
treeDataProvider: databaseProvider
});
* // 3. Dynamically alter the header tracking title at runtime if needed
myDatabaseTree.title = 'Production Cloud Cluster';
* // 4. Clean up the container layout stack when the extension deactivates
// myDatabaseTree.dispose();

  • Subsystem Architecture Data Flow​

[Extension Logic] ──> mscode.window.createTreeView(viewId, options)
│
▼ (Invokes Zustand Registry Setter)
useTreeViewRegistry.getState().register({ viewId, title, provider })
│
▼ (Emits Reactive State Cascade)
[GenericTreeView UI Layer] ──> Renders Custom Collapsible Graph
│
▼ (On Extension Termination)
treeView.dispose() ──> Ejects item from Zustand Registry Array