UIBUILDER v7 development update

[TotallyInformation]

Hi all, just to let you know that I am still working on the next major release of UIBUILDER which I hope to release shortly after Node-RED v4 is released. It will have the same baseline node.js v18 requirement.

Had a bit of a break (mostly) for a few weeks to refresh and deal with some personal and work things. But will be trying to get back into it again now.

To that end, I've added another feature today that allows you to query the current page size and created/modified timestamps. It also includes a new <uib-meta> web component to display these without the need for any JavaScript code.

Current list of highlights

• Some tweaks to the documentation should make it a little easier to get started with.

• You can now add a uib-topic="mytopic" attribute to ANY HTML element. Doing so makes that element responsive to messages from Node-RED.

  For a message with the correct msg.topic. The msg.payload will replace the inner HTML of the element. msg.attributes will update corresponding element attributes. Making this now one of the easiest ways to define dynamic updates in your UI.

• The new node uib-file-list will produce a list of files from a uibuilder instance. It automatically adjusts to the currently served sub-folder and allows filtering. Use this for producing indexes and menus.

• The new built in <uib-meta> web component can be used in your HTML to display facts about the current page such as its file size, when it was created and when it was last updated.

• Lots of extensions and improvements to the uibrouter front-end routing library in this release:

  • You can now define a set of external html files (that can include scripts and css just like routes) that are immediately loaded to the page. These can be defined in the initial router config when they will be loaded immediately (before routes) or can be manually loaded later. Use these for things like menu's or other fixed parts of the UI.

  • You can now define route content as Markdown instead of HTML. This makes Notion/Obsidian-like applications feasible using UIBUILDER.

  • You can now use Markdown-IT plugins to enhance your Markdown content.

  • You can start with an empty routing list to allow dynamic creation of routes later on.

• Markdown improvements.

  Both the main uibuilder node (via the ui.js library) and the uibrouter library both accept markdown content (via the external Markdown-IT library) and now they both support Markdown-IT plugins so that you can add features such as checkbox lists, GitHub style callouts, Mermaid diagrams and much more.

  There is also a new documentation page dedicated to using Markdown.

  And, the no-code example flow has been extended to demonstrate how to dynamically load all of the libraries, plugins and even how to set up responses back to Node-RED - for example when a checkbox is clicked.

• Wherever you can use no-/low-code features that accept HTML, you can now include <script> tags that will be executed on load.

• Handling of forms and inputs continue to improve.

  • Programmatic changes to input values or checked properties now trigger both the input and changed events - something that HTML normally doesn't do but can be important for data-driven web apps. For example, if using an <output> tag to show a combined or calculated input, changes via Node-RED will still update the values.
  • When using the eventSend(event) function on inputs whether inside or outside of a form, the returned values have been improved, especially for checkboxes and radio buttons.

• Security of the UIBUILDER repository on GitHub has been improved.

• On the uibuilder node's "Core" tab, the info buttons bar has changed slightly.

  The "Docs" button has gone (it is still on the top of panel bar anyway) and been replaced by a new "Apps" button which shows a page listing ALL uibuilder node instances along with their descriptions where provided.

  Most of the UIBUILDER nodes have be given a bit of a refresh of their Editor configuration panels. This work is ongoing but should give a more consistent look and feel and make the panels rather more responsive. The layouts are starting to use more modern CSS features. The work isn't complete yet so there are still a few inconsistencies - for example, when you make the panel wider - but we are getting there.

• For front-end developers, there are many new functions added to the uibuilder front-end library. Some are standard utility functions such as fast but accurate number rounding or conversion of primitives into objects. Others simplify the use of the DOM.

And a number of bugs fixed and code improvements as always of course.

Still quite a bit to do but getting to that boring tidy up and documentation part now Not exciting but must be done. The occasional new feature thrown in keeps me interested.

As always, please feel free to install direct from GitHub into your test environment to see the latest features and, more importantly, to check whether any of the potential breaking changes impact you. It try to keep UIBUILDER as backwards compatible as possible and most of the changes will not impact the majority of users.

Potentially Breaking Changes

Note that potentially breaking changes are only introduced in major version releases such as this one. It has been a couple of years now since the last, v6, major version.

Most of these changes will not impact most people but you should check through them just in case.

• If using uibuilder's custom ExpressJS server feature, URL's are now case sensitive

  This brings them into line not only with W3C guidance but also with the Socket.IO library. It can be turned off in settings.js using property uibuilder.serverOptions['case sensitive routing'] set to false.

  Note that when using Node-RED's internal ExpressJS web engine, URLs are still case-insensitive because that's how core Node-RED has been configured.

• Minimum node.js now v18 - in line with the release of Node-RED v4, the minimum node.js version has moved from v14 to v18.

  If you need to update your own servers, please remember to do an npm rebuild of all node.js packages afterwards.

• Rewrite of the uibuilder.eventSend(event) function in the client library.

  This might have an impact only if you were relying on some of the auto-naming features of form elements since the formula for that has been significantly improved.

  That function has been extensively re-written and should provide significantly better results now.

• Removal of the uibuilderfe library

  If you are still using this old library in your HTML code, please move to the module based library as it is far more feature rich and has many bugs removed.

• Removal of the uib-list node

  The uib-element node does everything that it did and more.

• Moved socket.io-client from dependencies to dev-dependencies

  If using the module based client library, you should not be loading the Socket.IO client yourself since it is already built into the client library. If you are still using the old uibuilderfe client, you should replace that and remove the socket.io client library from your html files.

• Removed the css auto-load from the client library

  This automatically loads the uib-brand.css if no css is provided at all. Since all of the standard templates include some CSS and have for a long time, this should not impact anyone.

  At least 1 person hit a race condition. ref. So this is best removed.

• jsdom (using in the uib-html node) now tracks the latest releases again

  Shouldn't be breaking at all but you might still want to review things since the new versions of jsdom are likely to have better available features. We were restricted to jsdom v21 previously as newer versions required node.js v18+.

• ejs package removed

  This should not impact anyone. ejs is an ExpressJS server-side templating library and what instructions exist (minimal) say that you need to install it manually. A new How-to: Server-side Rendered Views has been created to help understand how to use server-side templating. It is far from complete however.

• Removed Pollyfills from uibuilder editor code - shouldn't impact anyone using a browser from the last 5 years or so.

• A uibuilder node cannot be given a URL name of common as this would clash with the built-in folder of the same name that holds resources that can be shared with all instances. This was an oversight in previous releases I'm afraid, now fixed.

• The uibuilder node, no longer has the "Show web view of source files (deploy before you can use it)" option. The supporting external library was also removed. It never looked that good anyway. Please use the new uib-file-list node to produce a custom folder/file list and send to your own custom page.