[New Major Release] node-red-contrib-uibuilder - v4.0.1

Share Your Nodes
1

Well, finally it is here! Lots more fixes and code improvements so that we can keep the improvements coming.

A major release though because I'm afraid that there are a couple of potentially breaking changes.

The most important being that node.js v12 is now the minimum supported version. This is due to changes in upstream libraries.

The second most important is that I am now assuming that everyone is using a "modern" browser. That is one that supports ES6 (ECMA2015). Both the Editor code and the uibuilderfe make this assumption. As I've previously said, if this causes you an issue, please reach out and we can do something about it.

The other two big changes are:

Template handling is significantly changed in this major release

New instances of uibuilder nodes will only be given the "blank" template which uses no front-end frameworks.

You can load a different template using the "Template Settings" in the Editor.

Loading a new template WILL overwrite any files with the same name. A warning is given though so even if you press the button, you can still back out.

You can choose from the following internal templates:

  • VueJS & bootstrap-vue - The previous default template.
  • Simple VueJS - A minimal VueJS example.
  • Blank - The new default.
  • External - See below.

But, you can now also chose an EXTERNAL template! :grinning:
This will let you choose from any remote location supported by degit. You can use TotallyInformation/uib-template-test as an example (on GitHub).

NOTE: When using an external template, no check is currently done on dependencies, you must install these yourself. I will try to add this feature in the future.

Changing the uibRoot folder

You can now set uibuilder's root folder - that stores configuration, common, security and each node's front-end code - to a different location.

The default location is in your userDir folder in a sub-folder called uibuilder. If you are using projects, the sub-folder will be in your projects root folder. This setting will change that.

See docs/changing-uibroot for more detail.

And the rest of the changes:

Updated

  • Update fs-extra to v10. No longer supports node.js v10, requires v12+.

  • Make some class methods private in web.js and socket.js. Requires node.js v12 as a minimum as it uses an ECMA2018 feature.

  • web.setup and socket.setup can only be called once.

  • Socket.IO updated from v2 to v4.

  • Added Admin API check for whether a url has a matching instance root folder. (Was an outstanding to-do)

  • Reworked the info block that is printed to the log on startup. Much neater and with added info on the webserver being used.

  • Technical Docs have been improved in line with some other work I did recently on enterprise standards.

    The docsify configuration has been greatly improved with a new theme and some automation for dates and document front-matter.

    Added a new page on changing the uibRoot folder.

    Updated the front page with links and explanations of the different sections.

New

  • In the technical documentation, you can now access and search the main README as well as the current and archive changelogs (v1 & v2) in addition to everything else.

    Don't forget that you can access the tech docs on the Internet from GitHub AND locally from within Node-RED.

  • nodes/web.js - Added web.isConfigured to allow a check to see whether web.setup has been called.

  • nodes/sockets.js - Added socket.isConfigured to allow a check to see whether socket.setup has been called.

  • Add a new icon to the main readme that allows editing of uibuilder code using VSCode either via a remote repository or via a Docker container.

Fixed

  • Node-RED edge-case for credentials was causing node to be marked as changed whenever "Done" button pressed even if no changes made. Turns out to be an issue if you don't give a password-type credential an actual value (e.g. leave it blank). Gave the JWTsecret a default value even when it isn't really needed.
  • Instance details page - CSS now loads correctly even if using a customer server port. Some Socket.IO details that were missing now returned.
  • web.js - specifying a custom server port caused uibuilder to crash. Now fixed.
  • Lots of tidying up of log messages, especially TRACE level.
  • Accidentally include a node.js v14+ issue, now removed.
  • Additional try/catch blocks to force better reporting if there is an error in the uibuilder module files.
6 Likes
2

And of course, the inevitable immediate bug-fix!

4 Likes
3

By the way, if you are playing along at home, you might like the fact that the next couple of features have been added to the main branch which is now labelled v4.1.0.

Still more to add to that I'm sure but:

New

  • Add drop-down to adv settings that lets the served folder be changed between src and dist. #147

    If the <uibRoot>/<servedFolder> folder does not exist, it will be silently created.
    If the <uibRoot>/<servedFolder>/index.html file does not exist, a warning will be issued to the Node-RED log & the Node-RED debug panel.

  • Allow front-end code to update the msg. #146

    This allows your front-end code to be its own test harness by pretending that a msg has been sent from Node-RED. It would also let you have a single processing method even if you wanted to use a non-Node-RED data input (e.g. a direct MQTT connection or some other API).

    uibuilder.set( 'msg', { topic:'my/topic', payload: {a:1, b:'hello'} } )

    When using this feature, the uibuilder.onChange('msg', function(msg) { ... }) function is still triggered as expected.

4

All my (admittedly not very complex) uibuilder flows are working as expected.

Thank you for the work required to get this in play.

1 Like
5

Many thanks for the feedback, always helpful to know that things are working! :grinning:

1 Like