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.

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.

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 = `
        <div>
            <st-element 
                proxy="tviewProxy"
                component="@treeview/StillTreeView">
            </st-element>
        </div>
    `;

    //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).

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 = `
        <div>
            <st-element 
        	proxy="tviewProxy"
        	component="@treeview/StillTreeView">
            </st-element>
        </div>
    `;

    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

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 = `
	<div>
	    <st-element 
                proxy="tviewProxy"
                component="@treeview/StillTreeView">
            </st-element>
	</div>
    `;

    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: `<a onclick="parent.printOnAlert($event, '1st parent')">First parent link</a>`,
            isTopLevel: true 
        });

        const p2 = this.tviewProxy.addNode({
            content: `<a onclick="parent.printOnAlert($event, '2nd parent')">Second parent link</a>`,
            isTopLevel: true,
        });

        const child1 = this.tviewProxy.addNode({ content: `<span style="color: red;">Child parent1</span>` });
        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.:

<div>
  <st-element 
    proxy="tviewProxy"
    component="npm/@stilljs/treeview/StillTreeView">
  </st-element>
</div>

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

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.

Clone the git repository and run the sample

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

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