🌟 [Major Release] uibuilder v6.0.0 - it's here at last!

Share Your Nodes
1

Hi all, after much delay due to unexpected life getting in the way (which really should be expected by now!), uibuilder v6 is finally released.

The notable changes are:

  • Node.js v14 and Node-RED v3 are the minimum supported versions.

  • The "new" front-end client libraries are now preferred over the old uibuilderfe library. The new library has files for standard use similar to the old version (e.g. use as a simple link in your HTML), a version to use if you are wanting to switch to ES Modules and a raw version to use if you want to include in your own build steps. New features will only be added to the new library, the old one will only get critical fixes.

  • New client library changes:

    • It knows if the browser is online or offline and reduces the error message output when offline. You can, of course, also access the flag in your own code.

    • It tracks the type of the last navigation action & passes a (re)connection count back to Node-RED which lets the nodes understand if a connection is genuinely new or is a re-connection after a network interruption (e.g. the computer went to sleep).

  • Changes to the main uibuilder node:

    • A new switch for uibuilder (defaults off) that will include a msg._uib property object in standard output messages. It shows the stable client id, origin page name and client IP address. Useful for security and multi-user processing.

    • Some new and updated information is shown in the Editor such as the current version, instance root folder, etc. Some minor improvements to the uibindex page.

    • A new template that illustrates the use of VueJS v3 without a build step.

    • You can now select any instance sub-folder to serve up, not just src and dist.

    • On the Library tab, outdated installed libraries are highlighted. You can click the highlight to update the library.

  • All the nodes that support caching now use the same feature-set. They use Node-RED's native context storage and lets you chose between stores.

  • The usual set of bug fixes. Most notably an error in the uib-cache node and in the main node, the package handling wasn't always working as expected if you had a lot of packages on a slower device.

  • A new example flow thanks to Harold Peters Inskipp that demonstrates some logging possibilities.

  • The somewhat experimental uib-list node allows you to create an HTML list (UL, OL or DL) from a simple array or object payload. It caches the last thing sent to it (if you want it too) so page reloads and new client connections will all get the data.

    Expect more of this in the future. It uses the configuration-driven dynamic HTML capability that landed in uibuilder v5. It is a dead-simple, no-code way to show a list of text on a web page. It requires no front-end framework as it produces pure HTML. You can select a parent HTML element to attach the list to which lets you integrate the dynamic output with your static design.

One apology - I wanted to get this release out into the wild and I haven't had chance to update all of the example flows and templates to use the new FE library. I'll try to get these updated ASAP.

Changelog

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).

6 Likes
2

Oooh, it's the battle of the dashboards :smile: :smile: :smile:

3

Not really - uibuilder isn't a dashboard but rather a builder of dashboards :smiley:

Or more accurately a builder of data-driven web apps.

But it is starting to gain some dashboard capabilities as well such the the experimental uib-list node which I'm really interested to get feedback on that.

1 Like
4

Hi. I have interesting error while try install [node-red-contrib-uibuilder].

npm WARN notsup Unsupported engine for node-red-contrib-uibuilder@6.0.0: wanted: {"node":">=14.14"} (current: {"node":"12.2                     2.12","npm":"6.14.16"})
npm WARN notsup Not compatible with your version of node/npm: node-red-contrib-uibuilder@6.0.0
npm WARN notsup Unsupported engine for fs-extra@11.1.0: wanted: {"node":">=14.14"} (current: {"node":"12.22.12","npm":"6.14                     .16"})
npm WARN notsup Not compatible with your version of node/npm: fs-extra@11.1.0
npm WARN unipi No description
npm WARN unipi No repository field.
npm WARN unipi No license field.

but I use node 18.14.2:

unipi@L205-sn160:~$ npm version
{
  npm: '9.6.0',
  node: '18.14.2',
  v8: '10.2.154.26-node.22',
  uv: '1.44.2',
  zlib: '1.2.13',
  brotli: '1.0.9',
  ares: '1.18.1',
  modules: '108',
  nghttp2: '1.51.0',
  napi: '8',
  llhttp: '6.0.10',
  uvwasi: '0.0.14',
  acorn: '8.8.1',
  simdutf: '3.1.0',
  undici: '5.20.0',
  openssl: '3.0.8+quic',
  cldr: '42.0',
  icu: '72.1',
  tz: '2022g',
  unicode: '15.0',
  ngtcp2: '0.8.1',
  nghttp3: '0.7.0'
}

Have somebody any suggestion?

5

What hardware/OS are you using, how did you install nodejs, how did you install node-red and how are you running node-red?

Also stop node-red and start it in a command window. Copy/paste (not screenshot please) the full startup log here.

6

OK, I used this script to completlly reinstall Node-Red:

bash <(curl -sL https://raw.githubusercontent.com/node-red/linux-installers/master/deb/update-nodejs-and-nodered)

and now, everything works fine.

7

Please raise new topics rather than adding to old ones.