Nearly here! Just finalising the niceties.
A front-end router is used in single-page apps (SPA) to make it look to the users as though they are swapping web pages but without the slight delay that comes from actually having to load another page. The route content is simply a set of HTML/JavaScript/CSS that gets loaded and unloaded dynamically.
Node-RED Dashboard has always been a single-page app (SPA) whereas UIBUILDER has the choice of multi- or single-page.
However, UIBUILDER has always lacked a front-end router of its own with people either having to find and learn a 3rd-party router library or turn to a full-fat framework like VueJS or REACT with a router extension.
But no more! Thanks to some prompting and questioning by @fmarzocca, a new, lightweight router for SPA use is on its way. It will be incorporated into the next release of UIBUILDER (v6.7). Which shouldn't be too far away now.
This will be incorporated into the UIBUILDER front-end but will be kept as a separate library to keep the uibuilder library itself as small as feasible.
Though offered with UIBUILDER, the router library will actually be pure JavaScript and so could be taken out and used elsewhere. It has the usual permissive Apache 2.0 license to facilitate this.
The router library will let you combine route content both from in-page <template>
tags AND from external HTML files. With external files supporting stylesheets and scripts as well as content.
Defining and executing the router will use some simple front-end code that will look something like this:
const routerConfig = {
// Router templates created inside the routeContainer
// If not provided, default div with ID uibroutecontainer is added as the last element of the body
routeContainer: '#routecontainer',
// Optionally, chose a default route to be displayed on load
defaultRoute: 'route03',
// Define the possible routes type=url for externals
// Can be an object or an array but each entry must be an object containing {id,src,type}
// type can be anything but only `url` will be treated as an external template file.
// src is either a CSS selector for a <template> or a URL of an HTML file.
// id must match the href="#routeid" in any menu/link. and `<template id="routeid">` on any loaded template
routes: [
{id: 'route01', src: '#route01', type: 'dom'},
{id: 'route02', src: '#route02', type: 'dom'},
{id: 'route03', src: './fe-routes/route03a.html', type: 'url'},
// Doesn't exist. Tests load error
{id: 'route04', src: './fe-routes/dummy.html', type: 'url'},
],
}
const router = new UibRouter(routerConfig)
And switching to a route is as simple has creating a suitable link in your HTML:
<ul id="routemenu">Route Menu
<li><a href="#route01" onclick="router.doRoute(event)">#1</a></li>
<li><a href="#route02">#2</a></li>
<li><a href="#route03?doh=rei">#3</a></li>
</ul>
With routes executed using, in this case, the click event on the link. In the example, that is defined in the HTML for route 1 but you can also do it in JavaScript if preferred:
const menuItems = $$('#routemenu > li > a') // gets array of all
menuItems.forEach( item => {
item.addEventListener('click', (event) => {
router.doRoute(event)
})
} )
And as a bonus for anyone who bothered to read down to here. If you would like to make early use of the router, please leave a comment below and I will post some working code before the v6.7 release.
Oh, and nearly forgot. Of course, there will be a no-code option for creating the router and routes as well.