node-red-contrib-uibuilder/docs/roadmap at main · TotallyInformation/node-red-contrib-uibuilder

Name	Name	Last commit message	Last commit date
parent directory ..
Future.md	Future.md
Maybe.md	Maybe.md
Old.md	Old.md
Rejected.md	Rejected.md
readme.md	readme.md

title	description	created	updated
uibuilder Roadmap	This page outlines the future direction of uibuilder. Including specific things that will almost certainly happen as well as more speculative ideas.	2022-02-01 03:15:27 -0800	2025-01-03 08:26:09 -0800

Is there something in this list you would like to see prioritised? Is there something you could help with? Please get in touch via the Node-RED forum. Alternatively, you can start a discussion on GitHub or raise a GitHub issue. Please note that I no longer have the time to monitor the #uibuilder channel in the Node-RED slack.

For more information about the future of UIBUILDER, please see the Futures page

In Progress

To see what is currently being developed, please look at the "Unreleased" section of the Changelog for the latest branch. Anything else in this section is work-in-progress.

Library: Comms

Socket.IO rooms. ref - Rooms can be used to filter messages for specific destinations (e.g. client or page id) or to create client-to-client comms.
- Need a way to join rooms from Node-RED
- socket.js
  - Auto-join clientId:xxxxxxx & pageName:xxxxxxx rooms
  - socket.on uib-room-join/-leave-send
  - Change send functions to use rooms where clientId/pageName is specified in msg._uib
  - socket.on('uib-room-send', ...) Add option to also send a uibuilder msg.
  - Incorporate msg._uib.roomId for sending to custom rooms
  - ? Allow sending to different uib namespaces? would likely need an option flag for security?
  - Allow global as well as NS rooms - allow sending between different uib connected clients. ref - this.io.of('/').emit('uibuilder:global', 'Hello from the server. NS: "/"')
  - Remove console.log from addNs
- client
  - joinRoom, leaveRoom, sendRoom - allows clients to join/leave/message any arbitrary room
  - Add additional listener for the default (global) namespace
  - Add globalSend function
  - Add listener when joining a room, remove when leaving
  - Document new managed var: globalMsg.

FE: Client Library

FE: Router

Add rotate method to auto-rotate through routes. Needs ms and stop/start args.
Add 1st show marker to route change to allow client to ask for cache update
Update example
Make this.config.routes a SET to prevent duplicates. Or possibly an object. Needs some code changes.
Methods needed:
- Delete route - need to update routeIds
- Update/reload route
- Shutdown - that removes all elements
- Delete templates - unloads a list of (or all) templates
- Reload templates - to facilitate updates of a list of (or all) templates
- Auto-rotation of routes - uib..navigate(nextRoute)
- Next/prev route navigation
Additional options:
- Add pre-load option early load of all routes instead of default lazy-load.
- Unload templates after they are added to the route container. Only if hide=true. unload: true
- Maybe: options to auto-load js and css files with the same name as a template file.
- Maybe: Reset route to template option?

Web components

[STARTED] Update built-in web components to new standards
- uib-var
- uib-meta
- apply-template

Node: `uibuilder`

Add manual entry field to editor config for a URL scheme to open the instanceRoot folder in an editor new window. Pre-fill with vscode entry for localhost. Partially fill with vscode-remote otherwise (or maybe have a button).

All nodes

Incorporate ideas from: https://www.htmhell.dev/adventcalendar/2023/2/
More flexible low-code class attribute handling.
- In ui.js
  - Update the low-code schema's with add/remove/replace classes property
  - Update all fns to use the extra property
- In nodes - update to allow using array of classes and to have add/remove class arrays
  - In uib-update
  - In uib-element
  - In uib-tag

Styles: `uib-brand.css`

Transfer the formats from the dashboard layout example to uib-brand.css
Add a .shadow utility class for adding shadows to things.
Update with changes from the website.

Examples

Update text update example to include new uib-topic html attributes

Node Edit Panel Refactoring

Refactor / Node:	uibuilder	uib-cache	uib-element	uib-file-list	uib-save	uib-sender	uib-tag	uib-update	uib-uplot
Mv src editor.js to resources	✔️	✔️	✔️	✔️	✔️	✔️	✔️	✔️
jQ Tooltips	✔️	✔️	✔️	✔️	✔️	✔️	✔️	✔️
rename template.html	✔️	✔️	✔️	✔️	✔️	✔️		✔️
==jQ TI class not id==	✔️	✔️	✔️		✔️
Mv help to locales/en-US	✔️	✔️	✔️	✔️	✔️	✔️
Remove build & src/editor folder	✔️	✔️	🚫(templates need build)	✔️	✔️	✔️
checkbox's remove style				✔️
tiWidth = uibuilder.typedInputWidth			✔️
Notes			mv combobox styles?						check this for other needed updates

Vars moved to editor-common (replace): node.urlPrefix, node.nodeRoot, paletteCategory, typedInputWidth, localHost, packages, editorInstances[urlsByNodeId].

Ref editor-common.js/css - now moved to a plugin so only loaded once.

Node Runtime Refactoring

Refactor / Node:	uibuilder	uib-cache	uib-element	uib-save	uib-sender	uib-tag	uib-uplot
getSource(2)			✔️			✔️
Std process for typed inputs
buildUi to std lib	--	--		--	--		??
Object.assign config vars(1)
Move FS to lib(3)
Remove fs-extra(4)
Modules(5)	✔️
Notes							check this for other needed updates

(1) https://github.com/ryanmcdermott/clean-code-javascript?tab=readme-ov-file#set-default-objects-with-objectassign (2) Get an individual value for a typed input field and save to supplied node object (3) Complete the move of all server filing system handling into the libs/fs.js library. (4) Remove dependency on fs-extra. (5) Change all node html files to load js as modules. Remove IIFE wrappers from js files.

Removal of fs-extra dependency

[-] Functions wanted:
- ensureDirSync (uibuilder, admin-api-v3)
- ensureFileSync (admin-api-v3)
- moveSync (uibuilder)
- removeSync (admin-api-v3, admin-api-v2)
- writeJson (package-mgt)
- remove (uiblib) - needs testing
- access (admin-api-v3) - passthrough to node:fs/promises - needs testing
- writeFileCb (admin-api-v2) - passthrough to node:fs
Remove from:
- libs\fs.js

Optimisations

Front-End

Use document fragments (document.createDocumentFragment()) to build components then use appendChild when the component is built.
Use textContent over innerText - but only where you know that the text cannot be hidden as textContent ignores that.
Use insertAdjacentHTML over innerHTML
Prefer hiding/showing content over creating new elements. Accessibility ref..
For element references, use WeakMap to make it easier to remove and allow garbage collection earlier. ref.

Backlog

Possible New Nodes

`uib-remote`

New node to simplify executing remote commands on the front-end

`uib-file-read`

Reads a file for a specific uibuilder instance. Allows, for example, the file to be passed to the FE for editing.

`uib-ctrl`

Route different types of control msgs to different output ports: cache ("client connect"), network ("client connect", "client disconnect"), visibilty, routing ("route change"). Maybe link to a uib instance so that it can be separate.

`uib-file-change`

Watches for changes to files for a specific uibuilder instance. Allow folder choice, filtering (via fast-glob). Triggers an output on-change. Output can be a folder/file list OR a URL list (or maybe both). Could then be used to simply reload any connected clients automatically, trigger backups or something else entirely.

`uib-component` (or `uib-custom`?)

Like uib-element but auto-installs a web component library. Specify the library name, drop-down prefix for local (e.g. installed using library mgr) or jsdelivr CDN.

`uib-read-all-front-matter`

Reads a folder recursively and compiles all YAML Front-Matter entries into a single return. Use with uib-file-change to update when files change.

`uib-meta`

Links to a uibuilder node and returns the instance metadata including URL's and folder locations and other settings. (e.g. use with node-red-cleanup-filesystem for example).

`uib-template`

New node to take a msg._ui template input and update parts of it before sending (e.g. parent, id, ...). Alt. name ideas: uib-override or uib-config? Ref.

`uib-event`

Outputs uibuilder standard messages (or maybe both std and control) but is separate from the uibuilder instance node and can be filtered by user, client, page as well as the instance. May be helpful to some people to simplify flows without using lots of link nodes.

uib-fe-event

Captures actual front-end events (e.g. custom events) and forwards them to Node-RED either as std or ctrl (?) messages.

Maybe

`uib-parse`

Use Cheerio or DOMParser to convert HTML to low-code JSON. Ref. Could be extended to form the basis of automated no-/low-code -> HTML -> and back testing. Or for accessibility testing.

`uib-extract`

A node that uses JSDom to select from HTML and return as html/text/attribs as needed (as per updated $() fn). [Ref 1](GitHub - chishui/JSSoup: JavaScript + BeautifulSoup = JSSoup), Ref 2.

`uib-router`

This would connect a route handler flow to an existing uibuilder node. A bit like an http-in node but not needing an http-out because the out is via the uibuilder node. Would allow wildcard routing and ability to restrict by method. The defined path(s) would be added as a new router to the uibuilder routes. Consider whether this needs to be a uib-router-in/uib-router-out pair instead?

`uib-diagrams`

Consider implementing at Kroki diagram service node - https://kroki.io/ - enables delivery of diagrams from text descriptions using many different libraries.

Possible New Web Components

Note

May want to use auto-adopted stylesheets in components. Ref.

Include-fragment

~~<include-fragment src="/tips"> ref.~~

Use GitHub's version instead.

Enhanced button/Button-state

Ref.

Modes: momentary, latching
Visuals: button, pill switch (horizontal & vertical)
Transitions: Warm-up, warm-down options

Multi-state switch

Visuals: button row (or col), slider (v or h), circular
Transition options

Light-controller

Light controller. With options for on/off, brightness and colour.

Pop-down menu

Icon & menu list that pops down when the icon is clicked. Icon defaults to a cog. Common use: configuration or control menu.

uib-loop

<uib-loop>. Ref - A web component that takes a variable to loop over. Slot content being used as a template and replicated. Need a way to represent loop properties in the template.

lamp

convert from vue version

gauge

convert from vue version.

uib-input

<uib-input> Extended input. Refs: 1, 2, 3, 4.

Map - Leaflet

See Node-RED worldmap for reference.

New/Improved no-code elements

New

Improvements

General changes

Collapsible list: Either built-in class/js or a web component. Ref. NB: Allow for nav menus as well as normal lists. Also consider collapsible para's.
FE: Drag/drop: draggable class, drag-container class (to constrain drag area). Use moveElement fn. On drop, send change notice to Node-RED as control msg.
Improve connection/disconnection processing
- Add disconnect & reconnect timestamps to the uib FE library and pass back in connect ctrl msgs.
- Add option to the cache node to only send data from the disconnected period.
Need to improve url change for dependent nodes. Currently have to reload the editor to get the new url. Should happen live (on save of uibuilder).
Include source node data in msg._ui & an optional 2nd output on no-code nodes to allow interactions from elements to be routed direct to the source node.
Issue #94 - Detect when Node-RED switches projects and see if the uibRoot folder can be dynamically changed.
Allow control of browser html cache from Node-RED. Add an auto-restore on load option. (? Add send updates back to Node-RED option - control msg ?)
Add automatic search handler for all uibuilder endpoints - Ref
Add endpoint creation APIs
Change runtime parameter passes of uib to globalThis['ti-uibuilder'].uib
Consider moving all handling of uib's package.json into a single lib. Only allow a single function to read/write/update
Add Vue-style dynamic attributes: ref1, ref2.
Provide a common location and some standards to enable people to craft and share custom elements. Install using library mgr? Or as an NR plugin?
Consider adding an Editor plugin that adds a sidebar tab to show: All uibuilder instances (with links to the node AND the page), All library and other standard endpoint references.
- enableOnEdit (optional) If set to true, this tab will be accessible whilst the edit dialog is open. Default: false.
Consider adding a uibuilder custom library - ref.
gauge tiles - web component or new element? ref
Example stand-alone node package as exemplar
- https://github.com/TotallyInformation/nr-uibuilder-uplot
- probably chart
- How to pass data through?

Nodes

Node: `uibuilder`

FIX NEEDED On first setup, after typing in a url, the folder name shows an undefined folder name. That needs to update or not be shown.
FIX NEEDED Loading template - if it fails due to a missing dependency, the template isn't loaded but the Template shows the new one. Need to revert the name if loading fails.
IMPROVEMENT NEEDED in code editor. Needs bringing up to latest Node-RED code standards. Ref.
IMPROVEMENT NEEDED - If user types in a full url (e.g. with http: or a domain/ip), give a better warning and disallow.
IMPROVEMENT NEEDED uibuilder.packages after an update does not contain the outdated prop for each package because the server only does a quick update and so does not call npmOutdated (from packge-mgt.js) on each package because it is async and quite slow. This may mean that update flags are not updated until the Editor is next reloaded which isn't ideal. Probably need to fix at some point.
Further simplifications of the url change handling. Converge to live url element change or the validation check. Stop saving props that don't need to be (that means that re-opening after a deployment results in an update that needs re-deploying).
Gracefully handle when rename cannot (re)move original folder (e.g. held open by browser).
- Improve checks for rename failures. [uibuilder:nodeInstance] RENAME OF INSTANCE FOLDER FAILED. Fatal. - these should clear after restart but sometimes don't.
Ensure that uibRoot is set to a project folder if projects in use. See PR#47 and Issue #44
Improve handling for when Node-RED changes projects.
?? Filter clientId and pageName using socket.io rooms?
Extend record of instances to include instance title & description and update the apps page.
Use alt logging for websocket disconnects, sleep, error, etc
Move all uibRoot package.json handling to libs/package-mgt.js
Runtime API's - a new set of runtime API's
- List all URL's
- List all *.html files for instance serve folder
- List all *.html for all URL's
- started Add api to query if a specific uib library is installed and return version. Optionally return estimated base path. Allow calling from front-end.
Add API test harness using VScode restbook.
Add option to process a crafted msg from the FE that returns a JSON list of all files/folders (optionally recursive) - needs change to FE library & editor.
- In Editor, set the top-level permitted folder - relative to the Serve folder (e.g. If serving <instanceRoot>/src, that would be the default root but allow a sub-folder to be set, e.g. content so that only <instanceRoot>/src/content and below could be queried). This is to facilitate the creation of content management systems.
- Possibly also needs option as to whether data can be written back. Including options to create/delete as well as amend. To begin with, just output any changed data to port 1 and let people create their own write-back logic.
Allow instance npm installs to be served (would allow both vue 2 and vue 3 for example). Instance serves to take preference. Would need extension to editor libraries tab to differentiate the locations.
Centralise the list of control messages in use.
Add occasional check for new version of uib being available and give single prompt in editor.
Trace report for not loading uibMiddleware.js but not for other middleware files. Doesn't need a stack trace if the file isn't found and probably not at all. Make everything consistent. "uibuilder common Middleware file failed to load. Path: \src\uibRoot.config\uibMiddleware.js, Reason: Cannot find module '\src\uibRoot.config\uibMiddleware.js'". "sioUse middleware failed to load for NS" - make sure that middleware does not log warnings if no file is present. ref.
Introduce standard events: url-change (so that all uib related nodes can be notified if a uib endpoint changes url).
Auto-generate web manifest.
Add actions: open page? open docs? using RED.actions editor API. ref
Better icons! See https://discourse.nodered.org/t/wish-for-new-nodes/73858/20
Consider adding an action for when a uibuilder node is selected - would open the web page. https://discourse.nodered.org/t/call-link-from-node-red-editor-ctrl-shift-d/73388/4
Add GIT processing? Or maybe just handle via npm scripts?
- Is git command available?
- is front-end src folder a git repository?
- git commit
- git push
Investigate use of WebWorkers to have a shared websocket that allows retained connection on page reload and between pages in the same uibuilder node.
- https://crossbario.com/blog/Websocket-Persistent-Connections/
- https://stackoverflow.com/questions/10886910/how-to-maintain-a-websockets-connection-between-pages
[STARTED] Provide option to switch from static to rendering to allow dynamic content using ExpressJS Views.

Currently available by adding the appropriate ExpressJS option in settings.js.

Editor Panel

Inputs on Files tab don't expand correctly.
Text in Template settings fieldset is fixed width.
Server info box doesn't update if nr restarts with different setting but editor not reloaded. Need to switch to an API call.
When a template changes, optionally install required front-end packages. Probably use a new property in package.json - note, don't use the dependencies property as these are for local dependencies not for packages that uibuilder will make available to the front-end via ExpressJS. Or possibly make this a button for easy install?
Method to show output from npm package handling.
Add optional plugin displaying drop-down in Editors header bar - listing links to all deployed uib URLs. See example: https://github.com/kazuhitoyokoi/node-red-contrib-plugin-header
If instance folder doesn't exist - need to mark node as changed to force deploy.
Admin API enhancements
- List of All uib endpoints as a menu page.
Add case sensitivity flag
Rationalise the file editor. Ref

Templates

Add eslint dev dependencies to package.json
- .eslintrc.js: Configuration for rule "sonarjs/no-duplicate-string" is invalid: Value 6 should be object.
Add template description to display.
Add dependency version handling to templates (e.g. vue 2/3)
Allow templates to provide example flows via a uibuilder Node-RED library plugin - will library update though?

Check for examples folder, if present load all *.json files to library. saveLibraryEntry (ref1, ref2, ref3)
Add group/category to template_dependencies.js. Add grouping to drop-down in editor. Allow for no group specified (for backwards compatibility).
Add option for external templates in template_dependencies.js.
Consider allowing a local version of template_dependencies.js.
Add descriptions when chosen.
Maybe add as external templates.
- Vue v3 (build)
- Vue v3 + Quasar
- REACT (no-build)
- REACT (build)
- jQuery + jQuery UI (maybe + some add-ons?)
~~Add class="dark" to all template html file html tags. Remove class="uib" from body tag.~~ Maybe not such a good idea
Add ability to load an example flow from a template (add list to package.json and create a drop-down in the editor?) - using the pluggable libraries feature of Node-RED v2.1+?
Add option to auto-load npm dependencies on change of Template. Issue #165
Maybe move dependencies and other template meta-data into the template package.json file.

Would require making sure that package.json always exists (e.g. after template change). May need to be able to reload package.json file as well. Couldn't use the dependencies prop because we dont want to install libraries in the instance root but rather the uibRoot. Will need matching code in the Editor panel & a suitable API.

Libraries tab

Major version updates are not listed - because of package.json version spec - need to update docs?
Show warning if node_modules is empty, offer to run npm install & warn to restart Node-RED. Any way to extend that for missing installs?
Trigger indicator to Libraries to show if new major version available when switching to the tab.
Add npm package delete confirmation - probably via std NR notifications.
When adding a package, make sure that the input field gets focus & add <keyb>Enter</keyb> & <keyb>Esc</keyb> key processing.

Files tab

Change getFileList to only return files, use the separate folder list for folders. No need to run it multiple times then.
Creating new folder - new folder should be selected after create.
settings.js option to allow _ files to show in editor. #190.
Move folder management to a popup dialog (to save vertical space)
Extend folder/file management
- Allow renaming of files/folders.
- Add the common folder to the file editor.
- Allow editing in the common folder not just the instance folder.
- Add a file upload button.
- Method to import/export front-end files. Needs ZIP/Unzip functions at the back-end.
- Add a reminder to the Editor help about examples. Add an onclick to that <a> icon that calls RED.actions.invoke('core:show-import-dialog'); as a quick action to get the user to the import dialog. See here for more info.
- Add option to keep backups for edited files + button to reset to backup + hide backup files

Advanced tab

Update the Advanced > Serve dropdown list after creating a new top-level folder (to save having to exit and re-enter the panel).
Add visual error when changing advanced/Serve to a folder with no index.html.
Add (advanced) flag to make use of project folder optional.
Improve help box for _uib switch
Option for project folder storage.
Show Socket.io server & client versions

Settings.js

Add optional sidebar (or drop-down menu on NR header bar) displaying list of all uib URLs (and link to nodes).

Function node enhanced utilities

RED.util.uib.listAllApps() - add uibuilder meta-data (e.g. the full url). Also update nodes/function-node.md.

NEW TAB: `Build` - run npm scripts, install instance libraries (for dev or dependencies - just dev initially)

Add all local package.json script entries as links/buttons so they can be run from the editor panel.
If dev script discovered in local package.json scripts, enable a dev button so that a CI dev service can be spun up (e.g. Svelte). Will need debug output to be visible in Editor?
package-mgt.js
- Rationalise the various functions - several of them have similar tasks.
- Remove dependency on execa.
- Output npm log to NR log debug level (or maybe trace?)
- When checking for URL to use - scan for a dist folder.
socket.js
- Add rooms: page, User id, Tab id - will allow broadcasts to a specific page, user or individual tab and will not be purely reliant on the _socketId which can change.
- When a new client connection is made, use socket.emit('join', tabId)
- Output to a room using io.to(tabId).emit(...)
- https://socket.io/docs/v4/rooms/
Rejected
- ~~Add 4th cookie to record the Node-RED web URL since uibuilder can now use a different server, it is helpful if the front-end knows the location of Node-RED itself.~~ Can't even give the port since the client access might be totally different to the server (e.g. behind a proxy).

Node: `uib-cache`

CHANGE CONTEXT VAR HANDLING TO DEAL WITH ASYNC
Editor panel
- Some inputs width not consistent
Change cache & main nodes to use client id rather than socket id where available. Since that is less likely to change.
Add cache replay filtering. Option flags need adding for control. Filter by:
- routeId
- clientId
- pageName
Add processing for filters - use saved input on _ui or _uib, process if filter turned on
Add a msg property option to DELAY delivery on cache replay. Or maybe an option to output replay to 2nd port which would be more flexible. 2nd port could also avoid all the extra options since they could simply be a change node that adds the appropriate msg._uib property.
Add DELAY and EXPIRY features.
Add ROUTE-specific caching. And route filtering
Output node.warn msg if recv input with no "Cache by" msg prop. (e.g. no msg.topic for default setting)
Add cache clear button to complement the cache clear control msg
Add optional page filter - a cache with a page filter will only send the cache if the replay request is from that page. Page filters need to allow a list of pages and ideally wildcards.
Allow send to client id - would need clientId to _socketId map to be maintained by uibuilder.
Document client-specific caching.
Add checks to prevent non-string cache by property values.
Add empty cache button.
Think about impact of a cache clear (affects all connected clients)
Document
- How to send cache on "route change" control msg - use a switch node before the cache
- How to ONLY send cache on "route change" control msg
Consider allowing an option for separate state and data stores (D2 ref)
Improve docs by describing common use-cases: replay all or last 1, replay only on initial load, ...
On close, delete cache

Node: `uib-element`

Make the outer div optional (at least for html/markdown) - needed for the <collapsible-headings> component.
Use the new tbl* functions
Allow option to add tblAddClickListener to tables
~~For tables, add data-row-index to each tbody row.~~ NO! Because adding/removing rows throws out the numbering. Use the rowIndex property of the DOM element instead.
Allow the outer tag to be anything, not just div (or maybe just have a simpler list: div, article, section), also allow attributes to be set. ref
Add option for routerId - would ensure that the output only goes to the appropriate route.
Add option for clientId - would ensure that the output only goes to the appropriate client.
Add option for pageName - would ensure that the output only goes to the appropriate page.
uib-element forms need some serious TLC! checkbox, radio
Add width setting
Add input to allow restriction by pageName/clientId/tabId. _ui.pageName, _ui.clientId, and/or _ui.tabId
Add individual class handling to _ui processing. ref.
New Types for CSS and JS files?
New type "Clone" - use a template or other element already in the HTML and copy it to a new position in the DOM. Applies attribs/slot changes if specified. Templates themselves are invisible.
Disable or hide inputs when unused for a specific type.
As more element types are added, group into types: main, add, form, etc
? Have JSON input msg templates for each type with links to copy to clipboard ?
Check out: https://www.w3.org/WAI/ARIA/apg/patterns/
Think about having a linkInputs([idList]) fn that allows easy linking of different inputs?
??? How to allow EXTERNAL element definitions ??? e.g. Someone else's contributed package.
Consider making the editor icon responsive to the selected element type by using a function and include svg files in resources.

Node: `uib-file-list`

Editor panel
- URL drop-down width not consistent (check uib-update as this is correct)

Node: `uib-html`

Add option to remove the page tags, leaving just the document body fragment.
Add options for DOMpurify and Markdown-IT
Consider adding an HTML editor for the template?

Node: `uib-save`

Editor panel
- URL drop-down width not consistent (check uib-update as this is correct)
Allow msg overrides of input fields
Allow URL to be driven by msg or context (just add new options to select, don't bother with typed input)

Node: `uib-sender`

CHANGE CONTEXT VAR HANDLING TO DEAL WITH ASYNC

Node: `uib-tag`

Add option for routerId - would ensure that the output only goes to the appropriate route.
Add option for clientId - would ensure that the output only goes to the appropriate client.
Add option for pageName - would ensure that the output only goes to the appropriate page.
Add input to allow restriction by pageName/clientId/tabId. _ui.pageName, _ui.clientId, and/or _ui.tabId
Add individual class handling to _ui processing. ref.

Node: `uib-update`

Add input to allow restriction by pageName/clientId/tabId. _ui.pageName, _ui.clientId, and/or _ui.tabId
Add individual class handling to _ui processing. ref.
Add props: uibUpdated, uibUpdatedBy
Add status in Editor: # input msgs
?? Consider if worth adding a way to update a front-end javascript variable directly ??
New type option "Template" - Replaces the selected element with a template clone. Then applies attribs/slot if required. Ref

Server libraries

`libs/package-mgt.js`

uibRoot package.json - add check if dependencies blank but node_modules is not empty, if so, repopulate? Need to decide when to check - on commit at least.

`libs/web.js` (Web/ExpressJS)

Add instance descriptions to the index pages

`editor-common.js`/`editor-common.css` (Shared Editor Code)

Add isNew flag that indicates if a node instance has not yet been deployed. (e.g. new paste or import or drag from palatte)

Front-end libraries

FE Client Library

FE UI Library: `ui.js`

uib-element/client - allow loading of data to the ROOT to allow for full HTML replacement
[Started] Add optional page filter to _ui - if msg._ui.pageName not matching current page, don't process - needs list and wildcard capabilities.
Filter on msg._ui.routeId (If using router).
Content editor capability - to set editable content blocks. ref 1
Add handling for _ui.components[n].slots where slots is an object of named slots with the special name of default for the default slot (default must be handled first since it overwrites all existing slots)
Add check to uibuilder.module.js to prevent adding of multiple entries with same ID
Allow adding to more locations: next/previous sibling
Add click coordinates to return msgs where appropriate. See https://discourse.nodered.org/t/contextmenu-location/22780/51
New functions
- [STARTED] moveElement function that moves an element from 1 place to another. Ref.
  - Finish coding in ui.js
  - Add reference to client library
  - Document

FE Router Library: `uibrouter.js`

Web Component: `uib-var` (internal)

Allow no var attrib but instead allow ID to create a new managed variable.
Add uib.var function as a test of using a proxy to manage vars and work with the uib-var component.
Amend to use same processors as the uib-topic?
Add ability to directly amend the tag's attributes.
New Example: Easy UI Updates
- Add uib-topic attrib examples
Update docs:
- custom-components
- functions
- config-driven-ui
- easy-ui-updates

Styles: `uib-brand.css`

Add nav menu formatting. include header nav & aside nav variants.
Forms:
- Allow for blank line spanning the form width.
- Allow for information line spanning the form width.
Something similar to the sidebar status panel but segmented. Choose number of segments.
Make input[type="color"] starting colour the brand colour. Can only be done via JavaScript.
Check input:valid pseudo-class defaults
Improve input/form elements. Ref
Add treeview formatting. ref
Consider an "Easy Read" variation:
- Easy read means:
  - wide margins
  - images on the left
  - larger text (14 to 16pt)
  - bigger spaces between lines (1.5 spacing in a word processor for example) - already done in the base.
  - 1 idea per image

Documentation (including videos)

Document tblGetCellName (ui) new FE function.
Add a "Debugging" doc. ref, ref1
Document grid and flex layouts.
Finish 3rd-party-extensions. Finish documenting Editor and runtime API's for new endpoint creation for 3rd-party extensions.
Document .config/uibMiddleware.js, also update docs\how-to\server-side-views.md.
How to redirect un-auth web requests to login page (using msg._client).
Update docs for ctrl msgs and msg._uib return data to say that anything set via the socket.io auth can only update when the client reconnects.
document clientTimeDifference
New doc for using ui.js outside of uibuilder.
README.md: Add more links to the Features section so that each feature points to appropriate documentation. Add a landing-page link to "includes many helper features" to signpost to relavent detailed documentation.
Node-specific docs.
Reorg docs to make more sense to new starters & make more logical.
Search for *(This document is a work-in-progress, it is not complete)* and update documents.
Add message interaction diagram to "pre-defined-msgs.md"
Add note to documentation for the library manager that you can install LOCAL folders.
Finish Configuring uibuilder and Configuring uibuilder nodes pages.
Add some notes about Node-RED's projects feature. It doesn't seem to add a correct .gitignore which should contain **/node_modules. Also add notes about the fact that projects creates a disconnect between the flows and the userDir folder.
Add new doc to explain the HTML document hierarchy.
Consider changing favicon slightly for the docs - to better differentiate from uibuilder apps.
Allow offline usage. Ref. Need to work out how to cache the plugins. May need a manifest.json?
Add Giscus commenting to docs
"Islands" concept. Ref..

The general idea of an “Islands” architecture is deceptively simple: render HTML pages on the server, and inject placeholders or slots around highly dynamic regions […] that can then be “hydrated” on the client into small self-contained widgets, reusing their server-rendered initial HTML.

Highlight how the FE library uses the "Signals" pattern. Ref.

WIKI

Update examples
Helmet Example

Flows site

https://flows.nodered.org/flow/bbe6803d9daebda5c991336cf4e5e3e0

Videos

Creating data-driven web apps using Node-RED
- http-in/-out, D1/2, UIB - lockin & flexibility
- UIB approaches
Updating content/attributes (see ref)
Each release
Each node
Snapshots (grab html and save somewhere)
uibuilder reactive variables (set, get, onChange), uib-var
Dynamically modify CSS class for HTML elements
Low-code, do anything from Node-RED or browser
UI updates using low-code. ref
Easy forms
Forms - zero-code
SHORT
- quick-start example
- Switch light/dark
Mix of HTML and uibuilder uib-update for simple tasks.
Caching - node and custom
Remote programming environments ref

Examples

Use of msg._client
Add example for sending msg using function node
uib-sender - remove ref to uibuilderfe and update flows.
Navigation menu examples. 1x Router, 1x page.
Extend SVG example to download and save the svg from the gist
Add a "Quick Start" example.
Update the uib-element example.
Update the remote-commands example.
Zero-code example needs better wording for UL/OL example. ref
Reproduce the examples from the pdfmaker website since that uses a similar-style config-driven approach to uibuilder's low-code, config-driven UI feature. See especially the tables example.
Add example for Vue sfc loader.
Ticklist
- Send a list
- Attach click handler to switch list type from bullet to ticked & msg node-red
- Save changes to cache on click
Table
- Weather example?
Telegram web app. ref1
Perspective - interactive data dashboard

NEW FEATURE: Create package.json template for Node-RED projects

Reference

An optional template package.json in <uibRoot>/.config/projectPackage.json where the dependencies are pre-requisite modules for new Node-RED projects.

Initial thinking is that there will be a new but optional file in the /.config/ folder, called something like projectPackage.json. It would be, I think a sub-set of a standard package.json A full package.json on 2nd thoughts so that it would be easy to copy/paste your current /package.json. That will let you include a default version, description, etc if you wish along-side the dependencies.

I will attempt to also trap a new project create to run the install if I can. Otherwise, it will display a notification for the user to run that manually. Not certain whether Node-RED will have to be restarted, I will try to avoid that but it might not be possible. Will have to test.

Questions that need answers

How best to allow other nodes to provide zero-code nodes - that allow auto feedback from the front-end? e.g. something like the node-red-contrib-ui-time-scheduler node.
How to provide a better log output? With a simple way to link to Node-RED log output (filtered) as well as a dedicated output node. That output's to a web page with highlighting and possibly page back/fwd through history.

UIBUILDER v8 planned breaking changes

None yet

Ideas for releases further out

Changes needed for future versions of node.js

https://nodejs.org/en/about/releases/, https://github.com/nodejs/node/blob/main/doc/changelogs/CHANGELOG_V14.md, https://node.green/

Node.js v14 features - code updates to leverage the latest features

~~Replace || default value tests with ?? . Replace checks for if a property exists with ?. - Optional Chaining, Optional Chaining, Nullish Coalescing~~ - started using
~~Object.fromEntries (helps make an object either from Map or from a key/value array)~~ - already in use
==Private Class methods== (v14.5.1+)
==Optional catch binding==
Intl.DisplayNames
calendar & numberingSystem for Intl.DateTimeFormat
WeakReferences (v14.5.1+)
Array flat and flat map
Experimental diagnostic reports. https://developer.ibm.com/articles/introducing-report-toolkit-for-nodejs-diagnostic-reports/, https://github.com/IBM/report-toolkit

Changes due once Node.js v16 live:

Change style of requiring core node modules: require('node:os') instead of require('os') - started, ongoing
JSON Modules (experimental in v14, full in 16.15.0)
==Object.hasOwn is a static alias for Object.prototype.hasOwnProperty.call (16.9.0)==
Error cause (16.9.0)
Array.prototype.at (16.6.0) - allows use of negative indexes.
Stable Timers Promises API, RegExp Match Indices, which provide the start and end indices of the captured string (16.0.0)

Refs: release notes, What's New In Node.js 16?

Changes due once Node.js v18 live (EOL Apr 2025)

Socket.IO with WebTransport - requires https
findLast and findLastIndex array methods (18.0.0)
Top-level await
Improvements to the Intl.Locale API.
The Intl.supportedValuesOf function.
Improved performance of class fields and private class methods (the initialization of them is now as fast as ordinary property stores).
APIs now exposed on the global scope:
- Blob - https://nodejs.org/api/buffer.html#class-blob
- BroadcastChannel - https://nodejs.org/api/worker_threads.html#class-broadcastchannel-extends-eventtarget
Experimental
- Fetch
- Web Streams API
- Test Runner
- watch run mode (restarts the process)

Changes due once Node.js v19 live

Web crypto: globalThis.crypto or require('node:crypto').webcrypto
Intl.NumberFormat v3 API is a new TC39 ECMA402 stage 3 proposal extending the pre-existing Intl.NumberFormat.
npm@8.19.2

Changes due once Node.js v20 live

Test Runner module
String.prototype.isWellFormed and toWellFormed
Methods that change Array and TypedArray by copy
Resizable ArrayBuffer and growable SharedArrayBuffer
RegExp v flag
Synchronous import.meta.resolve()
Consider the experimental permission model

Changes due once Node.js v21 live

Stable Fetch
Stable Webstreams
Array grouping
ArrayBuffer.prototype.transfer
Global navigator object.

Changes in Node.js v22

Migrate from commonjs to ES modules. (2) JSON can't be imported directly in ESMs, Requires Node.js post v22. Ref1, Ref2, Ref3.
glob and globSync - external glob package no longer required
Native WebSocket available
Watch mode node --watch
Experimental
- Ability to require ESM's synchronously
- node --run pkg-script - run without npm

Changes due once Node.js post v20

Diagnostic channels (experimental in v14)
AbortController and AbortSignal (experimental in v14)
Permission model (experimental in v20)

Other Ideas

PAGE CREATOR: Something that creates a new page file from template. Could be an extension to uib-save?
- Maybe also a way to track pages? A catalogue? Maybe also an API to return all HTML file names as an array?
- Consider scraping all .html files in each uibuilder instance and building an auto-list that can be added to the ../uibuilder/apps page. Possibly with a manual override list option.
- Add functions to not only reference page-names/urls but also to automatically create menus.
- Ref
THEME CONFGURATOR: Something that allows manipulation of theme settings from within Node-RED
Consider using element setHTML() method if DOMsanitise is not available. Ref
Consider adding a default CSS override to the uibuilder node. To be used when no CSS specificed and also to be used in admin/generated uib pages. Defaulting to ../uibuilder/uib-brand.css.
Change fixed text to use RED._ for l8n. See: https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861/48. ref
NEW NODE: uib-room - linked to a uibuilder node, creates a socket.io room. Will need a way to tell the connected clients to subscribe to the room (optional) and FE fns to connect/disconnect from rooms.
UIB index page - new node? Default to root url. Show all instances by default, optional pages? Include descriptions. Selectable list of instances/pages. Allow for multiple instances of the node with different settings. CSS.
?For no-code nodes that might have class selectors - add a search button that searches the uib-brand.css?
?Have a toggled UI button that opens the Node-RED Editor to the correct location for the URL?
Add custom internal store for any uibuilder nodes that want one - so that users don't have to manually configure a file store.
Use degit to move default templates and maybe examples to their own repos - allowing more dynamic updates without needing a new version of uibuilder.
Restructure to a monorepo? With libs in 1, maybe nodes in their own and the front-end library in another? ref
Some way to visually expose (to clients) a library of JavaScript functions with their args as inputs. Maybe make this a cmd that pulls a doc from Node-RED? (keeps client lib small)
- Using the above to visually show available uibuilder fns with inputs and outputs.
Add optional TELEMETRY output (maybe linked to the log functions) - add mqtt endpoint to uibuilder settings.js (or maybe websocket?)
Extend optional attributes on the uibuilder script tag to override start options. Would reduce the need for custom uibuilder.start(...) when serving from odd web servers.
Consider creating a test install script that allows creation of a clean node-red install using the alt installer, adds uibuilder, asks for a port.

Thoughts on JavaScript tabular data manipulation and visualisation

An editable table widget for the browser where data changes are sent back to Node-RED.
Some DataFrame style tools for manipulating 2d tabular JSON data.
- Using msg._ui low-code - facilitating quick table updates from Node-RED.
- In Node-RED functions - enabling simpler manipulation of 2d JSON data.
- In the browser - as above.
A live JavaScript interpreter in the browser that would let users do Jupyter notebook style interactions with browser data.

Ref

General

Consider creating a module that uses gridstck.js where each grid entry gets a unique html ID. Needs a way to save the grid as HTML without the amend widgets but also as a gridstack object to allow re-editing.
Optimise runtime code using esbuild (see node-build.mjs). Reduce runtime dependencies by bundling and move deps to dev deps.
Allow client id to be set externally.
~~Add client identifier chooser to cache node - allowing use of different msg props to identify a specific client~~ No need for the complexity, can use a switch node to filter.
Use chokidar to send a control msg to the fe when files change. Change the front-end to allow the browser to automatically reload (location.reload()). Put everything behind an optional flag and don't load the chokidar library unless the flag is set. May want an auto-rebuild feature as well. Alternatively, try livereload which is used by rollup.
Add package.json style property to Instance details page and packages list if it exists.
Add option to log http(s) requests to control output port
Switch to dynamic imports for require's with low probability of usage. ref.
Add settings.js options to use different paths/names for middleware files.
Add socket.io instrumentation server. See https://socket.io/docs/v4/admin-ui/
Consider the use of RED.comms.publish('uibuilder:some-event-name', data, retainFlag) to push data to the editor (using RED.comms.subscribe in the Editor)
Consider allowing addition of HTTP request headers to control msgs
Consider allowing control msg for each request
Revisit elementIsVisible - requires probably 2 fns at least. A monitor and a one-off check. One-off requires a separate observer function for each.

Templates

Serve instance package.json dependencies on ../uibuilder/vendor/ path
- Or maybe on ./vendor/? That might be more consistent and avoid other issues/changes?
- Complexity: this would end up with packages installed locally - would the uib central packages be recognised? Maybe use uibuilder.dependencies instead?
- Change '../../templates/template_dependencies' in api v3
- Update built-in templates to use package.json
watcher
Add a new template and example to demonstrate the sender node.
Template - Docsify CMS
Add uibuilder property to template package.json files to define
- uibuilder version checker - https://github.com/npm/node-semver
- required fe packages
- watch - dict of watches: {'path':'scriptname'} or {['path1',...]:'scriptname'}
- add dependencies to ../uibuilder/vendor/ path

Maybe

Speculative entries - May never happen.

Rejected & Why Not

Rejected entries - Don't repeat the mistakes!

Why not?

Use a config node to define uibuilder endpoints?

Because the UX would be worse. When uibuilder and related nodes are pasted or imported, the URL has to be blanked to help ensure there are no duplicates. With this buried in a config node, it would likely be less visible and harder for people to understand.

OLD

Archived old entries

Files

roadmap

Directory actions

More options

Directory actions

More options

Latest commit

History

roadmap

Folders and files

parent directory

readme.md

In Progress

Library: Comms

FE: Client Library

FE: Router

Web components

Node: uibuilder

All nodes

Styles: uib-brand.css

Examples

Node Edit Panel Refactoring

Node Runtime Refactoring

Removal of fs-extra dependency

Optimisations

Front-End

Backlog

Possible New Nodes

uib-remote

uib-file-read

uib-ctrl

uib-file-change

uib-component (or uib-custom?)

uib-read-all-front-matter

uib-meta

uib-template

uib-event

Maybe

uib-parse

uib-extract

uib-router

uib-diagrams

Possible New Web Components

Include-fragment

Enhanced button/Button-state

Multi-state switch

Light-controller

Pop-down menu

uib-loop

lamp

gauge

uib-input

Map - Leaflet

New/Improved no-code elements

New

Improvements

General changes

Nodes

Node: uibuilder

Editor Panel

Templates

Libraries tab

Files tab

Advanced tab

Settings.js

Function node enhanced utilities

NEW TAB: Build - run npm scripts, install instance libraries (for dev or dependencies - just dev initially)

Node: uib-cache

Node: uib-element

Node: uib-file-list

Node: uib-html

Node: uib-save

Node: uib-sender

Node: uib-tag

Node: uib-update

Server libraries

libs/package-mgt.js

libs/web.js (Web/ExpressJS)

editor-common.js/editor-common.css (Shared Editor Code)

Front-end libraries

Node: `uibuilder`

Styles: `uib-brand.css`

`uib-remote`

`uib-file-read`

`uib-ctrl`

`uib-file-change`

`uib-component` (or `uib-custom`?)

`uib-read-all-front-matter`

`uib-meta`

`uib-template`

`uib-event`

`uib-parse`

`uib-extract`

`uib-router`

`uib-diagrams`

Node: `uibuilder`

NEW TAB: `Build` - run npm scripts, install instance libraries (for dev or dependencies - just dev initially)

Node: `uib-cache`

Node: `uib-element`

Node: `uib-file-list`

Node: `uib-html`

Node: `uib-save`

Node: `uib-sender`

Node: `uib-tag`

Node: `uib-update`

`libs/package-mgt.js`

`libs/web.js` (Web/ExpressJS)

`editor-common.js`/`editor-common.css` (Shared Editor Code)

FE UI Library: `ui.js`

FE Router Library: `uibrouter.js`

Web Component: `uib-var` (internal)

Styles: `uib-brand.css`