Feature Release & Bug Fixes

Apologies, the documentation has fallen a little behind with this release as things took longer and more new features were added than expected. But I needed to get this release out as it contains some important bug fixes as well.

NEW Features

• New zero-code node uib-tag - creates a single html element based on the given tag name (e.g. create a link element from an a tag). Also works with web component custom tags. Use this when you want to add something not covered by uib-element. Lets you specify slot content (html or Markdown) and attributes at the same time.

• The client library now filters inbound messages according to pageName, clientId, and/or tabId set in either msg._uib or msg._ui.

• There is a new, dynamic page at ../uibuilder/apps that lists (with links) all uibuilder instance endpoints. Currently only a very simple list but the plan is to add an instance title and description field to uibuilder which would then be populated into this page. Use as an index of all of your main web pages (strictly, this is a list of all of the uibuilder-driven web apps. Apps may have multiple pages of course).

• The uibuilder client connection control msg now reports the URL parameters (AKA search parameters) for the connection from the client. This is another way of passing data from a client to the server. Obviously, you should never trust user input - always limit, check and validate user input.

• uib-element now allows the core data for the element to be defined in the node or on a context variable and other locations, you are no longer forced to use msg.payload. It also now allows the incoming msg.payload to be sent to the client to allow for local processing if required.

• uibuilder Instance routes/middleware

  You can now add ExpressJS routes and other middleware to a single instance of uibuilder (a specific uibuilder node), not just to all nodes. Especially useful if you want to add custom security (login, registration, etc) to just one instance.

  The new feature lets you specify the sub-url-path, the HTTP method and the callback function. Paths can include wildcards and parameters too. The routes are always added to the instance router which forces them to only ever be sub-url-paths of the specified instance. e.g. if your instance url is test, a route with a path of /foo/:bah will ALWAYS be .../test/foo/.... This is for security. Note that you are responsible for creating unique URL paths, no checking is done and ExpressJS is quite happy to have multiple path handlers but if you provide a terminating response (e.g. res.status(200)) and no next() call, the call stack is obviously terminated. If you include a call to next(), overlapping route callbacks will also be triggered. In that case, make sure you do not do any more res.xxxx() responses otherwise you will get an ERR_HTTP_HEADERS_SENT error.

  To add route handlers, create 1 or more .js files in the <instanceRoot>/routes/ folder. See the docs for details.

  What can I do? Authentication, authorisation, http headers, dynamic html changes/additions, js inserts, logging, server-side includes, server-side rendering (e.g. Jade, ...) ...

NEW NODE: uib-tag

• New zero-code node
• Creates a single html element based on the given tag name (e.g. create a link element from an a tag).
• Works with web component custom tags.
• Lets you specify slot content (html or Markdown) and attributes at the same time.
• Filters out msg._ui from input if it includes msg._ui.from set to "client". We don't want to loop from output to input. ref

Use this when you want to add something not covered by uib-element.

Changes to uibuilder client Library

• FIX Change warn msg "[Ui:_uiManager] No method defined for msg._ui[0]. Ignoring" to an error so it is more visible.

• FIX Issue #213 - SVG flow example not working _uiComposeComponent is not a function at htmlClone index.js:52:15

  Caused by the move of all ui fns to a separate class. So _uiComposeComponent is no longer accessible. It should not have been used in the example anyway since anything starting with an underscore should be for internal use only. My bad.

  `uibuilder.uiEnhanceElement(el, component)`` added. Example will be updated again once this is released

• NEW FUNCTION uibuilder.notify(config) - If possible (not all browsers yet fully support it), use the browser Notification API to show an operating system notification. Supports a simple click reponse which can be used with uibuilder.eventSend to notify Node-RED that a user clicked the notification. Note that there are significant inconsistencies in how/whether this API is handled by browsers. It may not always work.

• No longer processes input messages if either msg._uib or msg._ui includes either pageName, clientId, and/or tabId and where those parameters do not match the current page or client.

• Improvements and corrections to the eventSend function. Allowing more event types to be sensible handled (including the Notify response). Also added CSS class information & specific outputs for notifications. Also, added input field types to form outputs.

• Added window.uib as a synonym of window.uibuilder. So you can do things like uib.logLevel = 5 instead of uibuilder.logLevel = 5

• Added flag to indicate if the DOMPurify library is loaded. Added warnings to the include() function when it is loaded since some includes will be filtered by the purify process for safety. Updated the front-end client introduction document with details about DOMPurify, how to load it and use it.

• Added flag to indicate if the Markdown-IT library is loaded. Updated the front-end client introduction document with details about how to load the library and use it.

• Trigger onChange when msg.payload received along with msg._ui. Previous update turned this off completely but that is too restrictive. Use the Passthrough option in uib-element for example so that data can be further processed in the front-end if required.

• When the client sends a msg back to Node-RED that includes msg._ui properties, the client adds msg._ui.from set to "client". This lets the uib-element, uib-update, and uib-tag nodes filter them out when flow editors have looped an output msg back to the input. ref

Changes to uibuilder main node

• NEW Instance route/middleware handlers - allows you to create custom url routes and custom middleware functions that only impact routes for a single instance of uibuilder.

• NEW Deep object find function added as RED.util.uib.deepObjFind so that it can be used in function nodes. Useful for manipulating msg._ui objects which can get very deep. See Manipulating msg._ui for details.

• NEW A dynamically generated list of all uibuilder apps is now available at ../uibuilder/apps. In addition, title and description fields have been added to the Advanced tab in the uibuilder node. These are used on the apps page. You can also output the detailed list in Node-RED using a function node with RED.util.uib.listAllApps(). The detailed list also shows what node defines the app.

• Filter out msg._ui from input if it includes msg._ui.from set to "client". We don't want to loop from output to input. ref

Changes to uib-element node

• FIX Was issuing a node.warn showing the input type (happening on v6.1 as well) - only for table type. Now removed.

• FIX Chaining to a page title deleted the previous chain - putting title first was ok. Now works either way.

• FIX Form checkbox "value" output from auto-send was always "on". Because HTML is sometimes utterly stupid! Input tags of type "checkbox" do not set a value like other inputs! They only set the "checked" attribute. Fixed by forcing the value attribute to be set. Issue #221, Discussion #219.

• KEY CHANGE Added option to select core data input other than msg.payload.

  This means that you can define the UI element directly in the node if you want. This includes the use of JSONata for dynamically defined elements, allowing for even simpler msg inputs should this be desired.

• KEY CHANGE Added an option to pass through msg.payload. When sent to the front-end, the client library will trigger standard events to allow further processing of the data in the front-end.

  This means that you can use uibuilder.onChange etc in the front-end even though the msg contains msg._ui which would normally prevent this from happening.

• Order of node properties changed in the Editor. Hopefully more logical.

• Filter out msg._ui from input if it includes msg._ui.from set to "client". We don't want to loop from output to input. ref

• Form additions:

  • Textarea input.
  • Select options drop-down input.

Changes to the uib-update node

• Filter out msg._ui from input if it includes msg._ui.from set to "client". We don't want to loop from output to input. ref

Changes to CSS styles (uib-br...

Bug fix

BUG FIX uib-element When creating a form, if a heading was specified, the form inputs went into the heading instead of the form.

More bug fixes and some new features

Highlights

• Client is now able to generate xlink:href correctly when creating SVG's via msg._ui low-code UI generator.
• The uiGet client function and matching msg._uib command provides extending info for tables, and lists. The inner text content of an element can be explicitly requested.
• A new client function $$(cssSelector) is added that returns the configuration of all matching elements. There is also a new help page that explains what CSS Selectors are and gives some common examples.
• The main uibuilder node now uses the extended recovery features of Socket.IO v4.6.
• The Editor panel for the uibuilder code now provides a link to VSCode if running on localhost so that editing front-end code is even easier.

---

Front-end client library

• A received msg containing a msg._ui property no longer triggers onChange or onTopic event handlers.

• _ui handling moved to a separate utility library ui.js to allow use elsewhere. Currently configured as a CommonJS style module which allows use in front-end code via esbuild or in Node-RED (though another library will be needed to provide direct DOM support).

• ui.js

  • New class library containing the uibuilder _ui processing so that it can be used in the future for processing in Node-RED as well.

    Exports the Ui class. Must be used as: const _ui = new Ui(log, syntaxHighlight)

    log is a logging function that, returns a function that actually logs (so it has to be called as log(...)()). This is normally a wrapper around console so that the correct calling location (taking into account maps) is reported.

    syntaxHighlight is a function that returns returns an HTML string representing a highlighted version of the JSON input.

    Both of those input functions are available in the uibuilder client library. If using separately, those functions will need to be reproduced.

    As the library uses module.exports, it must currently be built into a working script using esbuild or it can be imported into another script that is run through esbuild.

  • Additional safety checks added to ensure browser native API's present (document, fetch, etc.).

  • Class constructor takes a log function as an argument, this is required. The log function is assumed to be the same as the one in the main library (which requires calling as log(...)() to ensure that the correct calling line is reported.)

  • Fixed handling of xlink SVG attributes. Allows the use of <use> and other tags with xlink:href attributes.

  • Auto-add correct namespaces to an svg tag (xmlns and xmlns:xlink) so that you don't have to remember. 😉

  • Improved htmlSend. Now includes doctype and outer html tags. msg.length also added to allow checking that the payload wasn't truncated by a Socket.IO limit.

  • A custom event is no longer fired for each method invoked in a msg._ui. Very unlikely anyone ever found that useful and it simplifies the code. So onChange and onTopic event handler's are not called.

• For uiGet function:

  • Added number of list/table rows where appropriate.
  • Corrected the single attribute code.
  • Extended single attribute get such that:
    • If the property requested is either an element attribute OR an element property, a key/value pair will be returned.
    • If the property requested is "value" and the selected element is not an input element, the element's inner text will be retured instead.

• Extended the uiGet _uib command to allow getting a specific property. e.g. send a msg like: { "_uib": {"command":"uiGet","prop":"#eltest", "value": "class"} } to get the classes applied.

uibuilder node

• Added ability to limit _ui/_uib commands to a specific pageName/clientId/tabId. Simply add a property of the matching name and the commands will be ignored on any browser page not matching. You can use 1 or more of the properties, all will be checked. You can, of course still use msg._socketId, if present, the msg being sent is only sent to the single browser tab matching that socket.io id.

• Socket.IO v4.6 connection state recovery added - Allows a client to recover from a temporary disconnection (up to 2 minutes). msg.recovered added to the connection control msg. Is set to true if the client connection is a recovery.

  This change should reduce the number of times that a client's _socketId property changes value. Note that the socket id will always change if the user reloads the page.

  It also ensures that packets sent from the server while the connection was broken will be sent to the client after reconnection.

• Socket.IO v4.6 disconnect description added - Adds more details about the disconnection reason to the disconnect control message.

• When running Node-RED on localhost, the editor panel automatically turns on debug output. This used to be the case previously but the lookup to determine whether running locally was not comprehensive enough, now fixed.

• Added links to open the instance's front-end code folder in a new VSCode window. They only appear if running Node-RED on localhost. A button is added to the top of the config panel and to the Core tab where the folder name is shown.

• Added $$(cssSelector) function. This matches the function of the same name available in the Chromium DevTools console. It returns ALL elements that match the selector (unlike $(cssSelector) which only returns the first). In addition, whereas $(cssSelector) returns the DOM element (like jQuery), $$(cssSelector) returns an array of the properties of each element.

uib-element node

• Bug-fix - msg.payload is normally an instance of Object if created as an array or object via JSON/JSONata inputs from inject and change nodes. However, it turns out that is NOT the case if created in a function node. Corrected to a more robust detection method. Thanks to Rami Yeger for spotting the bug and reporting via YouTube comments.

Documentation

• Added new how-to explaining CSS Selectors and giving common examples.
• Updated for the new $$(cssSelector) function.

Small bug fixes

Front-end library

• BUG FIX for Issue #207 - eventSend function failing when in a form and when using Svelte.

uib-element

• Bug Fix: Adjust selector for type "Page Title" to avoid accidentally updating <title> tags in SVG's.

Documentation

• Renamed _sidebar.md to -sidebar.md to stop npm publish from dropping it.

Dynamic creation of SVG

There is really only 1 new feature in this release but it is incredibly powerful! 🧙‍♂️

You can now use the uibuilder low-code dynamic configuration data to create SVG elements as well as HTML! This means that you could, for example, easily create an SVG-based gauge dynamically.

Client library changes

• _ui handling extended to support dynamic creation of SVG images.
• Changed _uiUpdate() to use _uiComposeComponent() for consistency & code reduction.

uib-brand.css

• Adjusted img, picture, video, canvas, svg background colours to match the html background colour --surface2.

Examples

• zero-code: Minor correction to form example (1st input had changed id)

Minor features and bug fixes

General

• locales folder with en-US subfolder. Ready for l8n.

Client library changes

• Bug Fix: Issue #201 - Incorrect logic in stylesheet load causing an error. Fixed.

• New functions - can be run from Node-RED as well as front-end code:

  • htmlSend() - sends the current web page back to Node-RED.
  • uiWatch(cssSelector, startStop=true/false/'toggle', send=true, showLog=true) - watches for any changes to the selected page elements and uses uiGet to send useful data back to Node-RED automatically. It should also trigger a custom event to allow front-end processing too. If startStop is undefined, null or 'toggle', the watch will be toggled.
  • include(url, uiOptions) - include external files. Includes HTML, Images, Video, PDF's and more.

• New internal functions:

  • nodeGet(domNode) - gets standard data from a DOM node (used internally by uiGet and uiWatch for consistency).

• Updated functions:

  • uiGet - now uses nodeGet for consistency with uiWatch.
  • $ - now returns first child if selector returns a <template> tag. Warn/Error logging added.

uib-element node changes

• Bug Fix: Updating the page title (with no html id set) was setting the mode to "add" which upset chained outputs. Now corrected.
• "Form" type - improvements:
  • Where required property is true in the input, add class="required" to the div that wraps the label and input. Add div.required label::after styling to uib-brand.css. This will add an "*" after the label text for required inputs. See the uib-brand.css updates for more formatting improvements.
  • Allow title property to be set in input data. Also add "Required. " to start of title. If no title property specified, make it Type: ${type}.
  • If no button included in the input data, add default send and reset buttons with an id of ${elementId}-btn-send & ${elementId}-btn-reset. The Send button uses the standard eventSend function. The Reset button returns all form inputs back to their defaults.
  • Formatting improvements: Inputs are outlined with --success if they pass validation and with --failure if they do not. Any buttons on the form are given --warning colour if the form does not validate. The buttons still work however.
  • Form data improvements: Using the eventSend within a form element includes data saying whether the form validates. The details for each input also say whether they validate and if they don't, why.
  • The documentation for "Zero-code element types" > "Forms" completed.

uib-sender node changes

• Add the uibuilder node link node id to config data & expand editor checks for url changes. Will mark the node instance as needing re-deployment if the linked uibuilder node changed its URL. This is done by also tracking and recording the node id of the linked uibuilder node.

uib-brand.css updates

• Added intense (more saturated) versions of info, success, warning/warn, failure/error/danger.
• Added center as a synonym of centre.
• Added surface5 which has higher lightness than 4.
• Forms formatting extended.
  • Form labels are shown in Title Text (first letter of each word capitalised). If attached to a required input, an "*" is shown after the label.
  • Input valid/invalid formatting added. Borders set to --success, --failure collours accordingly
  • Buttons on an invalid form set to --warning colour.

Standard Templates

• Bug Fix: Issue #204 - change to rollup.config.js caused issues with bundled css. Fixed.

Examples

• zero-code: Improved Forms example shows off more options. Example for light/dark mode added. On-(re)load flow attached to the control output of the uibuilder node; automatically changes the page title (an alternative to using a cache node).
• New Example: Remote-Commands - Demonstrates all of the uibuilder client library functions that can be called from Node-RED.

Bug fix release - fix zero-code example

Bug Fix: The zero-code example only had a single node in it. Now corrected to have the full example set demonstrating most aspects of the zero-code uib-sender node with some examples of the zero-code uib-update node.

Coming of age - uibuilder grows up!

In this release, it feels like uibuilder really is growing up. No more apologising for not being a direct Node-RED Dashboard replacement, uibuilder has its own path.

You can now create and update visible web page elements direct from Node-RED data without needing to understand all of the intricacies and inconsistencies of HTML. You can create your own utility tools either in Node-RED or in front-end code that leverages the low-code UI features of uibuilder. You can get information about the current state of your web pages back into Node-RED. You can save and reload the current state of your web pages. You get custom information from the front-end to help with security decisions and control. You can use a custom web server rather than Node-RED's and you can use custom middleware for fine-grained control. And so much more. A comprehensive review of the documentation has also started with some notable updates already that will hopefully make things easier to follow.

So please enjoy this new release it might be a small number change, but it is a big leap forward that paves the way for a lot more to come.

Summary of notable changes

Just a quick summary here. See the main sections for more details.

Please remember that no changes are being made to the old uibuilderfe.js client. Nothing listed here applies to that.

• New zero-code nodes uib-element and uib-update let you use simple data to create dynamic web UI's. Including in this release: tables, forms, lists, raw HTML and page title. More to come.

• The client library has a number of fixes and new features

  • Extensions to the eventSend function to include form data and value changes. Should greatly simplify creating and using FORMs and providing quick inputs for Node-RED flows. Used by uib-element to create zero-code input forms.

  • New function: uibuilder.showMsg() Displays/hides an on-screen card that automatically updates with the last msg received from Node-RED.

  • New function: uibuilder.showStatus() Displays/hides an on-screen card that shows the current status of the uibuilder client. Use for debugging where console output is not available or not desirable (e.g. debugging pages on mobile devices).

  • Some client functions can now be controlled direct from Node-RED via simple messages. Changing log levels, show/hide message and status displays, getting uibuilder client variable values join the ability to reload the page. More to come in the next release.

  • New function: uibuilder.uiGet(cssSelector) Gets useful data about an HTML element direct from the DOM. Saves lots of faffing when digging through DOM details.

  • New function: uibuilder.watchDom(true) Starts watching the content of the page and saves it to browser localStorage so that it can be recovered at any time. Use uibuilder.restoreHtmlFromCache() to recover the stored HTML (e.g. on page load). Use uibuilder.watchDom(false) to turn off and uibuilder.clearHtmlCache() to remove the saved HTML. If desired, you can manually save the HTML at any point using uibuilder.saveHtmlCache().

  • The uibuilder client now reports changes of visibility of pages back to node-red via a new control msg.

  • When using the _ui low-code features, you can now position a new element anywhere within its parent. Either first/last or a position number can be used.

  • There is a new mode for the _ui low-code features - "removeAll". This allows a selection of elements to be the target of a remove - for example, all list entries could be removed with a single command.

  • Creates a browser tabId which is reported back to node-red when messages are sent. Helps identify the origin. Future uibuilder versions will let you send messages to a specific tab id which does not change even if the page is reloaded (only if the tab is closed).

  • Messages sent from the client either inherit the topic from the last inbound msg or from a default set using uibuilder.set('topic', 'my topic string'). The default will take preference. Reset by setting to an empty string.

• If you turn on the advanced option "Include msg._uib in standard msg output", messages from the client now include client details for you to use in your own security processing or just to identify where things have come from (e.g. what page name as well as what client).

• uibuilder now makes a copy of its main <uibRoot>/package.json file to package.json.bak before it updates it. Trace and error messages have been added to the process.

• All of the templates and example flows have been refreshed with the latest standards.

• The default style-sheet uib-brand.css has various updates and improvements.

• Plenty of documentation updates and additions.

Notes for this release

v6.1.0 makes the new client libraries (uibuilder.esm.min.js and uibuilder.iife.min.js) current and the old client library (uibuilderfe.js) is now no longer recommended and is not being updated, it is on the road to being deprecated (it will remain until at least v7, mahbe v8 but probably not longer unless someone calls for it).

The experimental uib-list node is now deprecated, the features are moved to the new uib-element node. It will be removed certainly by v7.

The new uib-brand.css style library is not yet feature complete - if you find something missing or wrong, please raise an issue. It does, however, continue to develop.

Dynamic content does not currently work fully with VueJS (and probably not other frameworks that rely on pre-building components). It is possible though to combine the vanilla HTML from the low-/no-code features with front-end frameworks. Such frameworks require both the components and the structure to be pre-defined before the DOM is fully loaded. They have their own methods to provide dynamic includes, lazy loading, etc that are very different (and generally much more complex) than uibuilder's simple to use feature. However, dynamic content DOES work with HTML components and any frameworks that are compatible with them such as Svelte. The component definitions have to be loaded before you use them (that can be dynamic too!) and you must use the ESM build of the uibuilder client library since HTML Components are ES Module only.

uibuilder node

• Added JSON and Form encoded body processing to all user instance routes to allow for processing POST requests

• Added new user web endpoint ./_clientLog (web.js::addLogRoute()). This can only be POSTed to and should only be used for navigator.sendBeacon text messages (the body of the POST has to be plain text).

• Updated optional msg._uib properties on standard output messages, additional metadata added:

  msg._uib = {
    "clientId":"0yB8nqLSbhWAEyEpEuPYa",
    "remoteAddress":"::1",
    "pageName":"index.html",
    // The uibuilder URL setting
    "url":"uibUrl",
    // ID of the client tab - NOTE: If a tab is duplicated, it will have the same ID
    "tabId":"t568878"
  }

  This data should help when working out identities for authentication and authorisation as well as enabling specific page/tab/user processing.

• Updated connect, disconnect and error control messages. They now show more details about the originating client and page.

  In particular, the connect msg now has msg.lastNavType which shows what the browser reported about the last time the originating page loaded. e.g. "navigate", "reload", "back_forward", "prerender". This comes from the Performance browser API.

• Reinstated ability for client to send uibuilder control messages.

  • New "visibility" control msg now added which uses the document visibilitychange event.

• Editor

  • Added Open button to top button bar next to Delete. Add globe icon to open buttons.
  • Added Docs button next to new Open button. Add book icon to docs buttons.
  • Disable the new Open button along with other disabled things when new or url has changed.
  • Icon changed.

• socket.js

  • When asked to add msg._uib to std output msgs, Standardised on the same client details as for control msgs to make downstream processing easier.
  • Added visibility-change control msg. Sent by FE client. Fires when the open page changes from hidden-to-visible or visa versa.
  • New functions: sendCtrlMsg, getClientDetails. Standardise/simplify client details shown on control msgs.

• web.js

  • Added new addBeaconRoute function that sets up the ./_clientLog instance endpoint. Use the new client uibuilder.beaconLog(txtToSend, logLevel) function to send a simple text log back to Node-RED even if socket.io isn't working.

• package-mgt.js

  • A backup copy of package.json to package.json.bak is now made on each write.
  • Trace/Error log messages added to writePackageJson.

IIFE/ESM/Module client library

• Bug fixes

  • Fixed issue where method:update for msg._ui handling would cause a loop and console error. An assign by reference error fixed by forcing a shallow copy at the start of _uiUpdate.
  • Fixed bug where the library was loading uib-brand.css even when it didn't need to. It now doesn't load automatically even if there is a single stylesheet loaded on startup.

• uibuilder.eventSend(event) function improved.

  • Now prevents the default event action from happening.

  • If the element that triggers the event is part of an HTML form, the names and values for all input elements in the form at the time of sending will be attached as msg.payload properties. Extended data for all input elements inside the form are included in msg._ui.form.

  • If the event type is change(e.g. a user changed an input field and then moved to a new field), a msg._ui.newValue property is generat...

Major Release

NOTE: The templates and example flows are not fully updated for release 6.0.0. They need some tidying and replacing of the old FE library with the new one.

Breaking Changes

• Minimum Node-RED version is now v3
• Minimum Node.js version is now v14 LTS (in line with Node-RED v3) - note that the minimum minor version changes to the latest v14 LTS version whenever uibuilder is updated.
• Not sure if this is really breaking. However, uib-cache nodes were not properly handling cases where, when processing incoming msgs, the chosen "Cache by" msg property was an empty string in the input msg. Previously handling of that case was dependent on the store and type being used. It is now ignored. The common case is where the setting is msg.topic and using the default trigger node which has msg.topic set to an empty string. Previously that was sometimes recorded and sometimes not. Now it is never recorded.

Fixed

• uib-cache: Custom variable name was being ignored - cache processing rewritten
• uibuilder: Library tab might occasionally list a package that wasn't a direct installed dependency. Now resolved. Only packages listed in <uibRoot>/package.json dependencies property will be listed.
• nodes/libs/package-msg.js updateInstalledPackageDetails(): Installations with a large number of installed libraries not correctly reporting their details. Resolved (hopefully) async issue. Was using async with .forEach() which doesn't work. Changed to use Promise.all with a map. Thanks to dczysz for reporting. Issue #186. Issue more complex than originally thought. Ended up doing a 2-stage update of the installed libraries data. First stage is quick and synchronous to allow the appropriate vendor folders to be added to the ExpressJS vendor routes. 2nd stage uses npm to get additional library information.
• Can now stop auto-loading of uibuilder default stylesheet using uibuilder.start({loadStylesheet: false}). Issue #184.
• Fixed deepscan issues.
• Old client library was reporting mismatch client version unnecessarily
• Old client library was not reporting client pageName correctly

New

• New example: Demonstrating logging methods of messages passed both into and from a uibulder node, to both the Node-RED debug panel and the Web Dev console. Many thanks to Harold Peters Inskipp for the contribution.
• New Template: Basic Vue v3 example with no build step required.
• New editor option: Add msg._uib to standard messages (off by default). Can be used to help with authentication/authorisation & session management within Node-RED flows. Contains clientId & remoteAddress and pageName properties.

Changed

• New client (uibuilder.iife.js and uibuilder.esm.js) improvements

  Note that the new clients are now the preferred client libraries. It is best to use one of these rather than the older uibuilderfe.js client library. Please note that a couple of features were dropped, namely the VueJS versions of the Toast and alert functions. The same input msgs still work to allow for backward compatibility but they will not trigger bootstrap-vue even if that is installed. Use the new Dynamic, data-driven content features instead.

  • Client now knows whether the browser is online or offline. If offline, it no longer keeps outputing socket.io error messages or warnings. A console warn is given whenever the browser goes online or offline. Going online reconnects the socket.io connection to Node-RED.
  • Client now tracks what the last navigation type was (navigate, reload, back_forward, prerender). Enables the client to know whether the page was a new navigation or simply reloaded. Can be accessed in the client using uibuilder.lastNavType.

• uibuilder node

  • uibuilder can now select any existing folder to serve as the root of your web app. The selector on the advanced tab is now populated with all folders. The folder must, however, contain at least an index.html page otherwise an error is logged and no web page will be shown unless you manually include the page name in your browser address bar.

  • The uibuilder node will now create the required <uibRoot>/package.json file if it does not exist. Removes some unnecessary warning messages.

  • uibRoot added to settings passed to Editor so that the editor can display and link to server folders (links only work when server is local of course).

  • If running in debug mode, key settings dumped to Editor console.

  • Editor panel improvements:

    • The currently installed uibuilder version is now shown on the Advanced tab.
    • The server's instanceRoot filing system folder is shown on the Core tab. This is the configuration and front-end code for this instance of uibuilder.
    • The info showing the current web server is now a link to the instance page (same as the Open button above it).
    • The "Server folder" information now shows the currently used serve folder (e.g. src or dist).
    • The Advanced > Serve dropdown now shows ALL top-level folders. Note that you have to close and re-open the panel to pick up the new folder.
    • In the help panel: Added a link to the Configuring uibuilder nodes page. Added link to the new client library page and a note about deprecation of the old client library.
    • Library tab
      • Package outdated markers added to Editor Library tab. (Currently only on Node-RED startup. Will be improved later.)
      • Package outdated markers are buttons that will update the installation of the package.

• uib-cache node

  • More compact context variable settings in Editor panel.
  • Flow/global cache context has node id appended to variable name for safety, can be changed but obviously must be unique.

• uib-list node

  • Now uses same context variable settins as uib-cache for greater flexibility.
  • Flow/global cache context has node id appended to variable name for safety, can be changed but obviously much be unique.
  • Change drop-downs to typed input
  • In editor, disable cache settings if cache turned off
  • Add uib url to name display

• Various library improvements including some trace and info log msg improvements.

• Tech docs - updated to indicate the the old client library is now functionally stabilised and will eventually be deprecated.

• uibindex page (adminapiv2.js) - Add folders to Vendor Routes table (from packageMgt.uibPackageJson.uibuilder.packages).

Feature release: New modern client, new uib-list node

Note that this is likely to be the last of the v5 series (barring small fixes). The next main release should be v6 with a move to Node.js v14 LTS as a minimum version.

Fixed

• Improved module path search to allow an array of locations. Removes spurious warning about socket.io client not being found.
• /uibuilder/ping now correctly returns 204 (no content) status not 201.
• web.js::buildHtmlTable - over-optimised regex broke the table cells, now fixed.
• Connected control message now correctly contains the client id and client IP address. The client id does not change as much as the _socketId, it is saved in browser local storage so will be the same across sessions and multiple windows/tabs.
• uib-sender was not using topic defined in settings. If present, that overrides msg.topic.
• uibuilder node - Editor: Add library had been over-optimised and wasn't working in the right order. Now fixed. This also fixed a problem with url rename.

Changed

• clientId is now session stable. That means that it does not change unless the client browser is restarted. It is now also included in more messages. For control messages, it will be found as a msg property. For _ui related messages, it will be a property under msg._ui. Any other uses will appear under msg._uib.

• All code now Linted to "Standard JavaScript" with node.js v12 and front-end to ECMA2019. Null/undefined guards put in place.

• Package.json: Changed homepage to point to Tech Docs on github.io.

• Client libraries and css available on ../uibuilder/ path as well as on ./ path for consistency with other server paths.

• Client connect, disconnect and error control messages (uibulder node output port #2) now contain more information. Includes: client version, clientId, Client IP address, page name, number of (re)connections.

• express-session and jsonwebtoken dependencies removed as no longer in use.

• Editor:

  • Added stylesheet containing a class of emoji which provides nicer, cross-platform, colour emojis.
  • Libraries tab:
    • Change "URL to use:" to "Estimated link:" on the Libraries tab to make it clear that it might not be correct (down to the library author).
    • Added info emoji to package name (links to package homepage).
    • Added url link to estimated library to make it easier to find out if it actually exists and exactly where.

• uib-cache node

  • Added option to not replay the cache if the client connection isn't actually new (e.g. if the client is a reconnection after restarting Node-RED).If the control msg recieved contains msg.connected and it is >0, that means that the client is reconnecting and this isn't a client page load. Note that currently, only the new ES module client library populates the msg.connected value. This option is selected by default.
  • The context store type (node, flow, global) can now be selected (only node was previously used).
  • The variable name can now be changed. May be needed if using flow/global stores with multiple cache nodes.

• package-mgt.js:

  • Rewrite root package.json and package details processing for more efficiency + prettify package.json output
  • Add outdated (current/wanted/latest) to uibRoot/package.json>uibuilder.packages in prep for update display in Editor

• Old client library uibuilderfe.js

  • Connection count, and page name added to initial "client connect" message in line with the new client.
  • The old uibuilderfe.js client library is now "functionally stable". It will no longer be updated. Please consider moving to the new library (see below). When v6 is released, the old client library will be deprecated.

New

• uib-brand.css - will eventually be the new default uibuilder CSS. It is light/dark switchable both manually and by browser preference. Still under development, this WILL CHANGE, probably quite a bit. There are still some variables that are needed in order to be able to sensible control things like spacing and sizing.

• New ES Module front-end client library (uibuilder.esm.min.js)

  The new library will only work with web browsers from early 2019 or later (only really impacts if you are stuck on IE11 or on an Apple device that doesn't support iOS 12 or later). It uses the new brand CSS by default.

  Key differences from the old library:

  • Supports the new configuration/message-driven features that let you both build and modify web pages dynamically.
  • Can load an entire UI from a JSON file (or JSON response from a web server). Can also do incremental loads and dynamic changes.
  • Incorporates the socket.io client library so you don't need to worry about it ever again!
  • Requires a modern(ish) browser.
  • Has to be loaded as an ES Module.
  • No built-in VueJS features, use the new msg._ui features instead.
  • No need for uibuilder.start() in your code any more (nearly always). Often no code needed at all in fact! (Other than loading the library of course).
  • uibuilder.eventSend() now has a lot more information attached. It also now uses the msg._ui property to hold all of the information (except for the payload which is as-before). This brings it into line with the other _ui handling. Attributes, classes, clientId and custom properties are all now included.
  • New function uibuilder.ui({...}) allows passing the same data as msg._ui from front-end code.
  • The "client connect" uibuilder control msg that is output on port #2 when a client (re)connects, now has additional details from the client: client version, clientId, client ip, number of connections since the client last (re)loaded the page. Use to work out whether the client is new or a reconnection. Used by the updated uib-cache node.

  See the uibuilder.module.md page in the tech docs for all of the features and details for the new library.

  • Clients now report how many times they have connected since last page load. This lets uibuilder know whether the client is reconnecting or connecting for the first time.

  Please use the uibuilder.esm.min.js in preference to the uibuilder.esm.js version which is only for people needing to do their own bundling. The min version includes a map so that debugging is as good as (actually better than) using the non-min version.

• New IIFE Module front-end client library (uibuilder.iife.min.js)

  This is the same as the ES Module client version above but is wrapped as as a standard JavaScript IIFE function which means that it can simply be loaded as a script link (as per the orgiginal uibuilderfe.js client library). You should not attempt to load this version of the new library as an ES Module.

  As with the module version above, when using this version, you should no longer manually load the Socket.IO client library and should hardly ever need to call uibuilder.start.

  All of the features of the ESM version should work as expected but please note that testing on this client has been limited so far. Please report any errors so that they can be corrected.

• New Node - uib-list

  Consider this to be the first experimental node in what will hopefully be a series. It can be sent a message who's payload is an array of strings or an array of an array of strings.

  The node creates a new <ul>, <ol>, or <dl> HTML list according to the settings. In the case of it being sent an array of arrays, the outer array creates a new list entry and the inner array is joined as a comma-separated list. A <dl> list however must be given an array of arrays and the first entry in the inner array becomes the <dt> entry with the 2nd becoming the <dd> entry.

  The node also requires you specify the uibuilder URL that the node links to along with a required HTML element id that is used to identify the element. Optionally, you can also set a parent element by specifying a CSS selector, the list will be attached ot the end of that parent as a new child. Note that if the selector is not unique, only the first found element will be used.

  Instead of outputting to the uibuilder node, you can instead output a message that contains the appropriate msg._ui configuration used by the new front-end ES Module library. You can use this to help you build larger and more complex UI's and to help learn about how the configuration-driven UI features work. Such a message could be further processed and then sent to an appropriate uibuilder node.

  One additional feature is that the configuration is retained in the node (until Node-RED is restarted or you re-deploy the node/flow) and whenever a new client connects to the matching uibuilder instance, it will send the complete configuration to the new client. This ensures that client browsers connecting after you have created the configuration will all receive it and so will have matching UI's.

• Runtime

  • Each uibuilder node instance issues a tiEvent when:

    • Instance setup is completed (node-red-contrib-uibuilder/${url}/instanceSetupComplete). The node object is passed as data.
    • A client (re)connects (node-red-contrib-uibuilder/${url}/clientConnect). The control msg is passed as data.
    • When a client disconnects (node-red-contrib-uibuilder/${url}/clientDisconnect). The control msg is passed as data.

    These can be used by any other node that uses the @totallyinformation/ti-common-events module. Such as the experimental uib-list node.