Minor feature release

📌 Highlights

• Any Node-RED custom node can now send a message to a uibuilder client! In your runtime code, add RED.events.emit('UIBUILDER/send/<url-name>', {payload: 'Hi from my custom node!'}) where <url-name> is the URL set in a deployed uibuilder node. The data will be sent to all browser tabs connected to that uibuilder endpoint. Note though that this bypasses any uib-cache node.

• You can now send a message from Node-RED to a connected client from a Function Node! Simply add RED.util.uib.send('uibname', {....}) to your function code. This will send a message to all connected clients for that uibuilder instance.

• For front-end coders, you now have access to a number of table manipulation functions. Making it very easy to create and manipulate tables in your web pages from simple input data. You can add and remove tables, table rows and add event handlers (e.g. click) to rows or cells.

General changes

• Added ability to send messages from Node-RED to a connected client from a Function Node. Simply add RED.util.uib.send('uibname', {....}) to your function code. This will send a message to all connected clients for that uibuilder instance.

• References to fs-extra 3rd-party library removed from all nodes & libraries except libs/fs.js.

• Socket security check tool added to all TotallyInformation GitHub repositories including UIBUILDER. Provides significant supply-chain security and privacy checks.

• All references to node.js's fs library now restricted to libs/fs.js.

• To help further improve the development of the brand css, LightningCSS is now used to compile the source CSS. This ensures that the CSS is not using too new CSS options and improves the performance of the CSS. Additionally, stylelint is now used to check the CSS for errors and warnings.

• Now using LightningCSS to compile source CSS and ensure not using too new CSS options.

• Some unused NodeJS files have been removed.

• @totallyinformation/ti-common-event-handler dependency package now removed completely. RED.events is used throughout, all uibuilder events start with UIBUILDER/.

• To make it easier to create new elements in the future. Moved no-code element runtime processing to a common folder, nodes/elements. Added Editor API's and moved processing out of the uib-element runtime to separate module. Also moved element description and advanced options HTML to nodes/elements/en-US.

• The common code and css files in the resources folder (ti-common.js and ti-common.css) have been renamed to editor-common.js and editor-common.css respectively. This is to make it clearer that these are used in the Node-RED editor only.

• The uib-plugin library now renamed to uib-editor-plugin for clarity.

• New uib-runtime-plugin library added. Now manages most of the additions to RED.util.uib which contains functions made available to Node-RED function nodes.

uib-brand.css styles & variables

• NEW Utility classes

  • square - Make something square or rectangular.

  • round - Make something circular, oval or pill-shaped

    Each of these are controlled by simple CSS variable overrides. See the live file for details on use.

• Core font now changed to match the uib-brand.css. No more Google fonts! This should make the UI more consistent and faster to load.

• Now using LightningCSS to compile source CSS and ensure not using too new CSS options.

• Added text-wrap: balance to h1, h2, h3, h4, h5, h6, heading and added text-wrap: pretty to p, li, figcaption - these make the elements look a little nicer when text is wrapping.

• Added container-type: inline-size to header, footer, main, section, article. This is in preparation for the future use of Container Queries which are a much more flexible alternative to Media Queries for controlling responsive layout breakpoints. Container Queries are still very new and not yet supported widely enough to use.

• Added some additional "reset" tweaks for improved visual style.

Node: uibuilder

• Node-RED Editor:
  • FIXED When a URL is changed, the IDE editor url is now updated automatically. This is particularly important when copying/pasting a uibuilder node.

Front-end code templates

• Removed optional link to legacy CSS style library.

Front-end library: uibuilder.js

• NEW FUNCTIONS

  • buildHtmlTable - Returns HTML of a table created from the input data.
  • createTable - Uses buildTable to create a new table and attaches to a parent element in the DOM.
  • tblAddRow - adds a new row to an existing table.
  • tblRemoveRow - removes a row from an existing table.
  • tblAddListener - adds row/cell listeners to the 1st tbody of a table. Will send a msg back to Node-RED when used with uibuilder.

• Updated the front-end index.html templates to highlight that the uibuilder client library MUST be included. After seeing several people take it out.

• Added uibuilder:propertyChanged:${prop} custom event when a managed variable changed. Has the same event.details as the 'uibuilder:propertyChanged' event. This event can be used instead of the uibuilder.onChange('prop', ....) function if preferred.

• Updated uibuilder:propertyChanged and uibuilder:propertyChanged:${prop} custom events to include oldValue as one of the event details. Will be undefined if the property is new.

• Updated uibuilder.eventSend function to include msg._ui.dataset which contains any data-* attributes from the element that triggered the event.

Front-end library: ui.js

• NEW METHODS
  • buildHtmlTable - Returns HTML of a table created from the input data.
  • createTable - Uses buildTable to create a new table and attaches to a parent element in the DOM.
  • tblAddDataRow - adds a new row to an existing table.
  • tblAddListener - adds row/cell listeners to the 1st tbody of a table. Will send a msg back to Node-RED when used with uibuilder. Defaults to adding a click listener.
  • tblGetCellName - Returns a standardised table cell name. Either from a data-col-name attribute or a numeric reference like C003.
• Added data-col-reference attribute to created tables - on the thead row that actually defines the columns. Making it easier to get a reliable column reference later.

Front-end components: uib-var

• Re-engineered to match the latest standards in the TotallyInformation web-components library.
• Added ready event
• Removed shadow dom
• Error messages improved
• Add source prop when reporting change back to Node-RED

Documentation changes

• Improved documentation for uibuilder's event handling and better linked that to how to create custom nodes that work with uibuilder.
• Improved documentation of the uibuilder extensions for the RED.util.uib object for use in Function nodes.
• Documentation for the new table handing functions in the client library.

Example flow updates

• All examples showing the use of the old uibuilderfe client library have been removed.
• Several of the example flows have been updated to show the latest features.

Runtime library changes

web.js

• Improved error checking and reporting in serveVendorPackages when mounting installed libraries. Issue #428.

Bug fix

Bug fix only. Missing originator on messages from clients.

Bug fix

Bug fix only. Issue for new UIBUILDER installations that would get the error [node-red-contrib-uibuilder/uibuilder] TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received an instance of Array (line:393).

Bug Fix: nanoId

v7.0.2

Fix bug in uiblib nanoId. Bump to v7.0.2

Bug fix

New hooks feature was failing if not present in settings.js.

MAJOR RELEASE - now node.js 18+

This major upgrade of UIBUILDER has been some 9 months in preparation. 325 commits, 244 files changed. UIBUILDER is now some 12,598 total lines of code (22,400 including comments).

You should read through the potentially breaking changes. They are very unlikely to really impact anyone but it is hard to know for sure. As always, it is best to test before going into production.

The last major release, v6, really felt like a big maturity step for UIBUILDER (which is now around 10 years old) and this v7 release really builds on that. Focus has very much been on UIBUILDER as a mature tool for anyone using Node-RED to build data-driven web apps. It retains all of its flexibility but continues to make working with HTML/CSS and occasional JavaScript a breeze.

I really hope you find some amazing things in this release. If you do, please let me know in the Node-RED forum. And if you don't, let me know as well!

There is much more to come from UIBUILDER. Check out the roadmap in the docs, this shows you the vast number of ideas and improvements that I have in mind for the future. But, as always, I'm open to suggestions so please do reach out.

Regards, Julian.

---

⚠️ 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 (instead of the Node-RED built-in one), 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 (the default), 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.

• Not really a breaking change but worth noting - if you use the Svelte template, that has been updated to use the latest versions of Svelte and Rollup. Those are both at least 2 major versions newer. In doing so, I had to replace a dev dependency and make changes to the config and npm scripts.

📌 Highlights

• Some tweaks to the documentation should make it a little easier to get started with. The menu and UX has also been tweeked. There are new pages covering easy UI updates, common design patterns, creating well-structured HTML pages, and troubleshooting.

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

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

• File uploads from client browser to Node-RED are now enabled.

  When using a form on a page and using <input type="file">, if a file is selected by the client and the file is less than the size of the maximum message size, the file will be automatically uploaded to Node-RED when the form is submitted (assuming you use uibuilder.eventSend(event) to submit the form). The upload is a message with file details and the file itself as a buffer in msg.payload.

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

• UIBUILDER now has its own "hooks" feature. For now, these can be used for allowing/blocking or debugging messages. More hooks may be added.

  By adding uibuilder.hooks(...) to Node-RED's settings.js and adding either of the functions msgReceived or msgSending, those functions will run when msgs are received from the client or about to be sent to the client respectively. Both functions need a return value of either true or false. true allows the msg through, false blocks the msg. You can also use the functions to alter the msg and, of course, to report on it to the Node-RED log. The functions receive msg and node as the arguments. So you can filter on the node's URL, socket id, client id, page name, etc.

  As well as debugging or msg altering, you can use these to help with message filtering, especially useful as part of authentication and authorisation processes. And somewhat simpler to use than Socket.IO middleware (which is still available).

• Connection headers have been added to the client details that are shown on control messages and on standard messages if the uibuilder "Include msg._uib in standard msg output." advanced flag is turned on. These may be particularly useful if using 3rd-party identity (authentication and authorisation) tooling which may put validated data into custom headings. Note however that these are "connection" headers, ongoing communications between the clients and the server do not update the headers (not possibl...

Important Bug Fix Release

Please update to this release as soon as possible, especially if using the new uibrouter or the uib-save node.

uibrouter library

• FIXED Default route was always being set on load. Now correctly takes the current URL hash into account first.
• FIXED Routes loaded via script, if pre-selected on page load (e.g. in URL hash), were crashing. Now will automatically revert to the default route and just print an error to the console.
• FIXED On start, hash change event could be fired twice. Now does the initial route before setting up the hash change listener.

uib-save node

• FIXED After import/paste, impossible to set a selected uibuilder node reference. Due to a timing issue in how Node-RED reports on nodes added to the flows on Editor page load. Now pre-populate the list of in-editor uibuilder nodes with deployed uibuilder nodes.
• FIXED Correctly change saved URL if a uibuilder node changes it. In this case, the save node knows the id of its linked uibuilder node but not the name so we change the name and mark the save node as needing re-deployment.
• FIXED In the Editor, the list of available uibuilder nodes to choose from was not sorted. Now sorted for ease of access.
• FIXED After a paste/import, when the url changes, reset the addType flag to stop chkUrl re-blanking it by adding if (node.addType === 'paste/import') node.addType = 'load' (in oneditchange)

ti-common.js Editor support library

• IMPROVED Due to a timing issue in how Node-RED reports on nodes added to the flows on Editor page load, the in-editor list of uibuilder node was not built soon enough for use. Now pre-populates the list of in-editor uibuilder nodes with deployed uibuilder nodes. (Only if the in-editor list has zero entries).

v6.8.1 Bug Fixes Only

• FIXED Regression caused by "fix" for users deploying with an invalid URL. uibuilder node's editor and runtime code updated.
• FIXED Regression caused by over-optimising references to the TI event library which stopped msgs with an originator from getting back to the relavent uib-sender node. libs/socket.js updated.
• Version numbers bumped to match release.

<uib-var> and router improvements and more

📌 Highlights

• The <uib-var> HTML component gets

  • This is BIG! - A topic attribute (use instead of the variable attribute) that automatically watches for messages from Node-RED matching the topic and outputs the payload onto the page. This becomes the easiest way to automatically update the page! It is similar to mustache tags ({{varname}}) in frameworks but has the advantage that it is 100% vanilla standard HTML.

  • A filter attribute that can be used along-side variable or topic or on its own. The attribute receives the name of a function to run whenever the source data changes. Use for formatting output. A new function uibuilder.formatNumber has been added that is compatible, it outputs a formatted version of an input number according to the locale and number of decimal places specified. <uib-var topic="mytopic" filter="uibuilder.formatNumber(2, 'de-DE')">[...]</uib-var>. You can, of course, create your own filter functions.

  • Access to your ./index.css style sheet file. This lets output be styled like the rest of your page.

• The uibrouter library gets some serious updates in this version. Including:

  • Automatic menu updates (to highlight the current route). Just make sure to use list items (li) for menu items and give them a data-route="routerid" attribute (where routeid is the actual route id). The currentRoute class & aria-current="page" attribute are both added to entries matching the current route.
  • Route definitions now support title & description properties.
  • New uibuilder variables to use with <uib-var> to show titles and descriptions that update automatically.
  • A fix for a missing default route - the first defined route is used in this case.
  • Other small bug fixes and improvements to the logic.

• The client library gets

  • Connected to a new "global" socket.io "room" allowing uibuilder connected pages to talk to each other. Note that this is still very basic, only the receiver is in place as yet. There is no function to do a global send.
  • New functions joinRoom(room), leaveRoom(room), sendRoom(room, msg) - to interact with arbitrary communication "rooms". Not fully working yet but will eventually allow any uibuilder connect node or client to communicate with 1 or many other connected nodes/clients.
  • A new navigate function and command. Triggers a page change or a route change either from front-end JavaScript or via a command message in Node-RED. Put a client into Kiosk mode and rotate pages or route displays all from Node-RED!
  • A new scrollTo function and command. Scrolls the visible page to a specific location either from front-end JavaScript or via a command message in Node-RED.
  • New UI functions addClass(classNames, el) and removeClass(classNames, el) to make class handling easier.
  • New connect() and disconnect() functions to manually connect/disconnect the Socket.IO connections.

• The importable example flows have been re-organised for easier access. Some new examples added: "Text Update - Different Methods", "FE Router Test"

• No-code and low-code features now all allow more flexible class handling (add, remove, and replace using lists). HTML element data outputs also now return an array of class names, not just a combined string.

• Front-end commands issued from Node-RED can now take a quiet option set to true to prevent the return message. e.g. {"_uib": {"command":"navigate","prop":"#newroute","quiet":true}}

• Front-end developers now have full access to the ui.js library via the $ui global.

uibuilder node

• FIXED Previously, if an editor deployed a uibuilder node with an invalid URL, the node configuration & setup still happened which lead to odd results. Now a missing or invalid URL results in a logged error and the node is not configured. ref

uib-cache node

• FIXED - bug introduced by last version's correction of connections count meant that "Only replay cache when client is really new" option resulted in the cache never being sent.
• Re-worked node's html into latest format with JS in separate resources file.

uib-html node

• Downgrade jsdom version to 21.* as that is the last version that supports Node.js v14.

uib-save node

• FIXED - usePageName logic.
• FIXED - import - initial deployment does not connect to node - need to clear the entry & mark as invalid. Also, no url = invalid
• URL (uibuilder instance) drop-down list is now sorted
• On copy/paste or import, link to uibuilder node is now cleared.

uib-tag node

• FIXED - Allow blanks in some typed input fields.

uib-update node

• FIXED - Allow blanks in some typed input fields.

Client library

• FIXES

  • Some reported client data was incorrect. Notably the connections, and lastNavType properties. The connections property has now been corrected. The lastNavType, I now realise will never be correctly updated by the client and therefore it has been removed. Fixing these has also resulted in some simplification of the client code.

• NEW - $ui is a new global created by the library which gives full access to the ui.js library, that library presents an instance of the Ui class. So typing $ui.version in the browser dev console will return the current version of the ui library. Also available as uibuilder.$ui just in case $ui was already taken when the uibuilder library is loaded.

• NEW managed variable globalMsg - contains the last message received over the global socket. The global socket allows uibuilder connected pages to talk to each other.

• NEW Functions that have Node-RED remote commands

  • navigate(url) - Load a new web page or change routes. Can be triggered from Node-RED with msg {"_uib": {"command":"navigate","prop":"#newroute"}}. See Client Functions (navigate) in the docs for details. URL's can be full, relative (to the current page) or routing (hashes). Obviously, can be called in front-end JavaScript as well as uibuilder.navigate('./page2.html') etc.

  • scrollTo(cssSelector) - Scroll visible page to an element based on a CSS Selector. See Client Functions (scrollTo) in the docs for details. top, start, bottom, end can be used as shortcuts for the top/bottom of the page. An optional 2nd parameter gives more control.

• NEW Functions (without Node-RED remote commands)

  • connect(), disconnect() - These manually connect and disconnect the Socket.IO communications between the browser and Node-RED.

  • formatNumber(value, decimalPlaces, intl, opts) - Compatible with the <uib-var> component's filter attribute. Uses the JavaScript standard INTL library to allow locale-based formatting.

  • keepHashFromUrl() - Returns the route id from the URL.

  • joinRoom(room), leaveRoom(room), sendRoom(room, msg) - allows clients to join/leave/message any arbitrary room

• NEW ui functions - addClass(classNames, el), removeClass(classNames, el) - see ui.js below for details.

• NEW - the client has some early code for dealing with Socket.IO "rooms". These are really a SIO server function but some methods updated to take them into account.

• NEW - the client now subscribes to a new "global" socket.io channel. This allows clients to talk to each other

• Added quiet property to remote command processing. Set msg._uib.quiet to true to stop the library returning a message to Node-RED on completion of the command.

• When using uiGet or nodeGet functions/commands, if class attribute is present, an additional classes property is returned which is an array of the class names.

• Moved $ and $$ functions to ui.js library. This library references them. So no change to usage.

• DEPRECATED Function - elementIsVisible - Was not working correctly and a fix is complex. Will revisit in the future. Let me know if you need this function. This would normally be a breaking change but the function is still there - it returns a console msg and a node-red msg still - and as it wasn't working, I doubt anyone has used it.

uibrouter library

• FIXED Issue #232 - Ensure origin script is removed after re-applying to ensure only 1 instance shows instead of 2.
• FIXED - If no routerConfig.defaultRoute set, now uses the first (zeroth) defined route.
• Version bumped to v1.0.1
• NEW - Route definitions now support title & description properties.
• NEW uibuilder managed variables added to make it easier to use with <uib-var>. [uibrouter_CurrentRoute, uibrouter_CurrentTitle, uibrouter_CurrentDescription, uibrouter_CurrentDetails]. These are automatically updated whenever a route change occurs.
• NEW - routeIds variable is a JavaScript Set containing the list of unique route IDs.
• NEW Functions - routeTitle, routeDescription - return the current route's title and description properties if set or the ID if not.
• NEW Function - currentRoute - returns the current routes configuration object.
• NEW Function - setCurrentMenuItems - Updates any on-page elements matching the selector li[data-route] such that any having a data-route attribute matching the current route id have the currentRoute class & aria-current="page" attribute added. It is removed from all other matches. This makes it very easy to highlight the current route in any on-page menu's.

uib-var custom web component

• NEW: Added topic attribute - auto-monitors for messages from Node-RED with the given topic. msg.payload ...

Feature release: New front-end router. Improved uib-html, uib-save and much more

UPDATE 2023-12-29: Totally forgot to document the new custom web component built into UIBUILDER! The <uib-var> tag provides an easy way to get dynamically updated content into your web page. See the examples library and the documentation for more details. In this release, allows the specifying of a managed uibuilder variable which will be inserted into the page and automatically updated whenever the variable updates. This is similar to mustache tags in many front-end frameworks ({{myvar}}) but, unlike those frameworks, is totally vanilla, standards-based. Expect further improvements in future releases.

Highlights

• The new front-end routing library is available. Easy to use, robust and reasonably comprehensive. It is not dependent on uibuilder but offered with it to enable Single-Page Apps (SPA's) to be easily created with uibuilder.
• The uib-html node now allows an HTML string wrapper. This defaults to uibuilder's default "Blank" template HTML or can be overridden using msg.template. This lets you create a fully working page from no-code and low-code configurations that can be fed direct to uib-save or used in Dashboard or with http-in/-out nodes. Or indeed with external web server tools.

New client library - uibrouter - front-end routing library

A complete, standalone library for doing front-end routing with both internal and external templates. Lightweight and simple to use. See the documentation for details.

uib-html improvements

• The uib-html node now accepts a msg.template property which, if provided, MUST contain a valid HTML page template.

  This allows you to grab an existing page using the htmlSend command, add new elements/updates and save it back to a uibuilder instance either as the default page or another page, for example, using the uib-save node. Overwriting a page is a way of ensuring that new accesses get a known page with structure and potentially data.

  You can, of course, use this node to produce HTML for use outside of UIBUILDER. For example, use uib-element/uib-update, add a template and use this node to create a complete web page for use with http-in/-out, a static website or some other web service.

  You probably don't need/want the template if outputting for the Node-RED Dashboard ui_template node.

uib-save improvements

• The reload client flag now actually works.
• The new "Use pageName" flag allows you to save to the uibuilder node's live folder using the page name returned from the front-end or manually set in msg._ui.pageName or msg.uib.pageName. This makes it easier to save an updated page via the htmlSend command (either from Node-RED or from front-end code). See the example flow to see how this works. It means that you don't need to know the folder or the pageName at all.
• The filename can include folders (use / as separator) and missing folders will be created automatically if the "Create Folder" flag is set. Note that you cannot have any .. in the filename, this is to prevent escaping from the instance root folder and causing mayhem elsewhere. By default, new folders cannot be created (this is a safety feature), select the "Create Folder?" flag to allow creation.
• The Editor js has been moved out of the html file and put into resources/uib-save.js. It is loaded by the html file in a link. This makes development a lot easier. The code also references resources/ti-common.js to ensure consistency.

uib-tag improvements

• FIXED - Tag name input would only accept string. Now correctly processes other types.

Client library improvements

• FIXED Client htmlSend, when called as a Node-RED command, was returning 2 messages. Now returns the HTML string and sends it to Node-RED directly only if the new 2nd argument is TRUE (the default so that direct calls will still work without changes).
• FIXED eventSend when attached to a change event returns the value property that all input tags have - except when they don't! When input is used as a checkbox, it has a checked property instead. Function changed to return the checked value if it exists (true or false), the value property otherwise.
• NEW function and command watchUrlHash - Toggle (or manually set on/off) sending URL Hash changes back to Node-RED in a standard msg.
• NEW watched variable urlHash Set on load and updated as it changes. URL Hashes are used by front-end routing for Single-Page-Apps (SPA's). They do not reload the page.
• New utility function truthy Takes a truthy/falsy input (e.g. text, number, boolean) and returns true or false (boolean). If input is neither truthy or falsy, can take a 2nd parameter which is the default return.
• Function added to watch for url hash changes.

uibuilder node improvements

• uibuilder - Reduce code complexity by moving more fs actions out into libs/fs.js.
• Some common Node-RED Editor code and styles moved to common libraries (resources/ti-common.js & resources/ti-common.css) loaded as resources. Making the editor code smaller and more consistent.

Editor panel improvements

• Major rework of tracking node instances. Custom events are now fired: 'uibuilder:node-added', 'uibuilder:node-changed', 'uibuilder:node-deleted'. With the node in question passed as data in the event. For added nodes, an extra property addType is added to the node object and set to either "load" (fired when the Editor is loaded which adds all nodes), "new" (when a brand new instance is added, eg from the palette), or "paste/import". The tracking code is also now only ever instanciated once when the Editor is loaded.
• Better and more consistent removal of URL setting when pasting or importing existing uibuilder nodes.
• The Editor js has been moved out of the html file and put into resources/uibuilder.js. It is loaded by the html file in a link. This makes development a lot easier. The code also references resources/ti-common.js to ensure consistency.
• Improved debug information. Debug output to Editor page console is automatic if environment variable NODE_ENV is set to 'dev' or 'development' (it used to be if running on localhost). Otherwise can be turned on by manually issueing uibuilder.debug = true on the browser console on the Editor page.

Examples

• uib-save and uib-html example flows added.
• uib-var-web-component example flow added. Contains several examples of showing uibuilder managed variables dynamically in your HTML code. Including several no-code examples.
• uib-tag example flow added.

Other improvements

• NEW node Library libs/lowcode.js - The beginnings of moving the zero- to low-code element translations (e.g. uib-element, uib-update and uib-tag) to their own library. With the possibility of eventually making that library available as a stand-alone front-end library as well. Not yet in use.
• libs/fs.js - More replacements towards removing dependency on fs-extra. More move of filing system actions out of other nodes and libraries.
• NEW utility function getSource(propName, node, msg, RED, src, srcType) in libs/uiblib.js - this is an ASYNC function that returns a promise. It is a standardised way of getting the current value from a Node-RED Typed Input field.
• Enhanced tooltips not applied to the Monaco/Ace edit panel.