Treebox - jaredgorski.org

treebox

Treebox is a vanilla JS solution for programmatically rendering multiple views with template literals. In other words, it's basically a simple, embeddable SPA router. I currently use treebox to display my "photography" gallery. For example, here's a slightly simplified version of the inline JS that displays those views (minus the code that powers the History API/location.hash routing):

<script type="module">
  import TreeBox from 'path/to/treeboxjs/index.browser.js';

  const nodes = {
    display: '<div><% import gallery template html %></div>',
    children: {
      image1: {
        display: '<div><% markup for image1 %></div>',
      },
      ...
    },
  };

  const root = document.getElementById('root');
  const config = {
    initialPath: '/',
    onnavigate: ({to}) => {
      // use History API to handle programmatic routing
    },
  };

  const tb = new TreeBox({config, nodes, root});
</script>

See the Pen treebox-demonstration by Jared Gorski (@jaredgorski) on CodePen.

Links: