Stilljs TreeView Component

The StillTreeView is a Still vendor component based on imkate's implementation which is a pure and 100% vanilla CSS. The Still.js implementation allows the building of tree in a dynamic way as well as by specifying a JSON with the structure and intended hierarchy.

Table of Contents

1. Instalation
2. Setup the prefetch in the Still.js Application level
3. Adding Data from JSON to the Tree
4. Adding Data or Nodes Dynamically to the Tree
5. Clone the git repository and run the sample

#### Instalation

This dependency installation is to be done inside a Still.js project, hence we need to use the still CLI tool.

``
stilljs install @stilljs/treeview
`





#### Setup the prefetch in the Stilljs Application level
Once installed the component will be placed inside @still/vendors/ folder. The StillAppSetup class is the config/app-setup.js file.

StrillTreeView setup is being done from line 12 to 16, on line 19 we are running the prefetc as it's needed.

`{.javascript .numberLines .lineAnchors}
import { StillAppMixin } from "../@still/component/super/AppMixin.js";
import { Components } from "../@still/setup/components.js";
import { HomeComponent } from "../app/home/HomeComponent.js";
import { AppTemplate } from "./app-template.js";

export class StillAppSetup extends StillAppMixin(Components) {

constructor() {
super();
this.setHomeComponent(HomeComponent);

// Setting the component to be prefetched
this.addPrefetch({
component: '@treeview/StillTreeView',
assets: ["tree-view.css"]
});

// Run prefetch setting
this.runPrefetch();
}
async init() {
return await AppTemplate.newApp();
}

}

`




#### Adding Data from JSON to the Tree

Embeding the TreeView into another component template

The JSON Data.

`js
import { ViewComponent } from "../../@still/component/super/ViewComponent.js";
import { StillTreeView } from "../../@still/vendors/treeview/StillTreeView.js";

export class HomeComponent extends ViewComponent {

isPublic = true;

/**
* @Proxy
@type { StillTreeView } /
tviewProxy;

//Embeding the Treeview component into another component
template =

;

//This Hook will make the Tree to be handled only when HomeComponent is fully rendered
stAfterInit(){
//Degining the structure of the tree
const dummyTreeData = {
"1": {
"content": "Parent 1",
"childs": [
{
"content": "Child parent 1",
"childs": [ { "content": "Grand Child", "childs": [] } ]
}
],
"isTopLevel": true
},
"2": {
"content": "Second parent",
"childs": [
{
"content": "Child parent 2",
"childs": [ { "content": "Grand child sec par", "childs": [] } ]
}
],
"isTopLevel": true
}
}

// This will make sure that data is added in the Tree only when it's fully loaded
this.tviewProxy.on('load', () => {
//Adding the data to the to the Tree
this.tviewProxy.addData(dummyTreeData);
//Instruct the Tree to render
this.tviewProxy.renderTree();
})
}
}
`
##### Result:









#### Adding Data or Nodes Dynamically to the Tree
We can also add the nodes dynamically making it more flexible to work with data from the application flow (e.g. Database, API).
`js
import { ViewComponent } from "../../../@still/component/super/ViewComponent.js";
import { StillTreeView } from "../../../@still/vendors/treeview/StillTreeView.js";

export class DynamicLoadedTree extends ViewComponent {

isPublic = true;

/**
* @Proxy
* @type { StillTreeView }
/
tviewProxy;

template =

;

stAfterInit(){

this.tviewProxy.on('load', () => {
this.dynamicTreeNodes();
this.tviewProxy.renderTree();
});

}

dynamicTreeNodes(){

const p1 = this.tviewProxy.addNode({ content: 'First parent',isTopLevel: true });
const p2 = this.tviewProxy.addNode({content: 'Second Parent', isTopLevel: true });

const child1 = this.tviewProxy.addNode({ content: 'Child parent1' });
p1.addChild(child1);

const grandChild = this.tviewProxy.addNode({ content: 'Grand Child' })
child1.addChild(grandChild);

grandChild.addChild({ content: 'Grand Grand Child' })

}
}
`

##### Result:













#### Adding Data/Nodes with HTML and event binding
`js
import { ViewComponent } from "../../../@still/component/super/ViewComponent.js";
import { StillTreeView } from "../../../@still/vendors/treeview/StillTreeView.js";

export class TreeWithHTMLContent extends ViewComponent {

isPublic = true;

/**
* @Proxy
@type { StillTreeView } /
tviewProxy;

template =

;

stAfterInit(){

this.tviewProxy.on('load', () => {
this.dynamicTreeNodes();
this.tviewProxy.renderTree();
})

}

dynamicTreeNodes(){
//Top level node are calling a method in the parent component (HomeComponent)
const p1 = this.tviewProxy.addNode({
content: First parent link,
isTopLevel: true
});

const p2 = this.tviewProxy.addNode({
content: Second parent link,
isTopLevel: true,
});

const child1 = this.tviewProxy.addNode({ content: Child parent1 });
p1.addChild(child1);

const grandChild = this.tviewProxy.addNode({ content: 'Grand Child' })
child1.addChild(grandChild);

grandChild.addChild({ content: 'Grand Grand Child' });
}

//Method that is bound to the tree nodes
printOnAlert(event, text){
event.preventDefault();
alert(text);
}
}

`
##### Result:


#### Embeding as a remote component
Still.js supports remote embedding of self-contained components (no third-party imports) without local installation—only a minor change is needed.:
`html



`
To include tree-view.css when remotely embedding StillTreeView, manually import it in the embedding component’s JS file:

`js
import sheet from 'https://cdn.jsdelivr.net/npm/@stilljs/treeview@latest/tree-view.css' with { type: 'css' };
document.adoptedStyleSheets = [sheet];
`

In the above scenario, because we're embeding from NPM, we have the npm/ prefix, and the the namespace of the packege and finally the Component name.











$3

Got to the Still.js TreeView GitHub repository, clone or download it, follow the bellow instrcutions to run it.

`py
cd examples/vendors-poc
st serve

The different examples are under the follow URLs:

/HomeComponent

/dynamic-loaded-tree

/tree-with-htmlc-ontent

``

PS: This is a sample Still.js project which implements the TreeView component, as it does not work in another context.

#### Join Still.js discord channel

Still.js on discord