node-red-contrib-uibuilder 5.1.0

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

on Node.js NPM

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.