Bug fixes for Node-RED projects use

Code commits since last release.

A bug fix release.

• Runtime startup was not correctly recognising the uibuilder.telemetryEnabled setting in settings.js. This meant that telemetry was always enabled even if the setting was set to false. Now fixed.
• The "fix" for projects in v7.7.2 was not quite correct. Now corrected
• Node-RED project changes to a new project were not being recognised by uibuilder.

CRITICAL NOTE

When changing Node-RED projects, it is critical to restart Node-RED after switching. This will reset the uibuilder runtime settings to the new project locations.

Failing to restart will cause uibuilder to fail to work correctly and may cause data loss.

To support this, uibuilder now shows an error in the log and the Editor telling you to restart Node-RED if it detects a project change.

In addition, the uibuilder initialisation log block now shows if projects are in use and which is the current project (if any).

Also note that a new project will get a completely "clean" uibuilder environment (other than any configuration in settings.js).
Front-end libraries will need to be installed and any changes to uibuilder's .config or common folders will need to be manually copied over.

Mostly bug fixes with a couple of feature tweaks

Code commits since last release.

(Mostly) A bug fix release.

New features

• A new --syntax-highlight-height CSS variable has been added to allow the maximum height of syntax-highlighted blocks to be set. If the content exceeds this height, it becomes scrollable. This is useful for preventing very large blocks of content from taking up too much space on the page. The default value is 22em, but you can set it to whatever you like in your CSS. You can check out its use on the Variables page in the Markweb demo where the height is reduced to 9em.

• For Markweb, there is a new uibuilder.markwebEvent variable. Currently, this is only set/updated on page-navigation. It shows the old and new URL's. The Variables page in the Markweb demo has been updated to show how to use this.

Bug fixes & tweaks

• When the runtime plugin is loaded by Node-RED, the uibRoot folder should be in 1 of 3 possible places. An overridden location (uibuilder.uibRoot in settings.js if provided), <userDir>/<uib.moduleName> (e.g. commonly ~/.node-red/uibuilder), or <userDir>/projects/<currProject>/<uib.moduleName> if Node-RED projects are being used. The last of these was not working correctly. This is now fixed. In addition, the logic for determining the uibRoot location has been tidied up and made more robust. Reference.

• Markweb:

  • Various demo page content clarified and tidied up.
  • The navigation menu shows a left-hand border for the current page. This was appearing outside a folder twisty icon which looked odd. Now improved, the border is inside the icon.
  • Navigation and index lists were showing folders that had no index.md file and so clicking on the folder would result in a 404 not found page. Now fixed, folders with no index page are hidden as per the design requirements.
  • Navigating with the back button to a URL containing an anchor hash link was not working consistently. Now fixed.
  • The main content prose now has a collapsible twisty marker by default (as requested by Colin in the forum). To remove it, simply add a style of --collapsible-marker: none; to the page template or as a stylesheet. You can also set it to any text or emoji you like. Just remember that the marker is rotated by 90 degrees when the content is expanded so it should look right in either orientation.
  • For some users, the Markweb was reporting 0 files to be indexed. This appears to be due to the ignore parameter passed to fgSync (which uses fast-glob). Ref. Fixed.

Bug fix only: Force Markweb pages to dark mode

Forgot that some people don't always run in dark mode! Now fixed. I'm afraid that dark mode is the only game in town right now for Markweb. If you want something different, please let me know.

New features and bug fixes

Code commits since last release.

📌 Highlights

• Markweb now supports Mermaid diagrams and Markdown footnotes. The automatic status block has been corrected and moved to the main content.
• The uib-sidebar node is now working correctly which creates a mini-web-page in the Node-RED Editor's sidebar panel. It has been updated to allow multiple sidebar nodes to be used. Each will create a separate section in the sidebar and can have its own input and output for dynamic content.
• New <json-viewer> web component made available for displaying JSON data in a structured format. Accepts pretty much ALL JavaScript object data, not just JSON. The uibuilder client library's syntaxHighlight() and showMsg() functions have also been updated to use this new component if it is loaded, giving a much nicer output with collapsible sections for large objects and arrays.
• Updated RED.util.uib namespace for Node-RED Function nodes with new saferSerialize() and renderToHTML() functions for more robust JavaScript object handling and rendering.
• Easier CSP overrides. uibuilder.contentSecurityPolicy in settings.js.
• New anonymous telemetry feature.
• The uibuilder initial log summary nows starts just after the 'flows:started' event to ensure that telemetry data is available. Whether telemetry is active and the number of uibuilder and markweb node instances are now also shown.

NEW telemetry feature

Records anonymous, non-identifiable data about uibuilder usage to a cloud endpoint to help guide future development.

Data is stored locally and sent no more than monthly if enabled. See the telemetry process documentation for details.

The send process is checked every time flows are (re)started. So on stable platforms, sending might be much longer than a month.

There is a new Privacy Policy document for GDPR and other compliance purposes.

Telemetry is optional and can be disabled in settings.js (uibuilder.telemetryEnabled). If disabled, data will still be collected locally but not sent to the cloud endpoint.

The telemetry data is written to <uibRoot>/.config/telemetry.json.

NEW Node-RED Function Node utility functions

UIBUILDER has enhanced the RED.util object for quite some time. It adds the RED.util.uib namespace which contains utility functions for use in Node-RED Function nodes.

This release adds to this namespace two new functions:

• saferSerialize() - This is a more robust version of JSON.stringify() that can handle circular references, functions and other data types without throwing an error.

  It lets you pass more complex data over to the front-end without worrying about serialization errors.

• renderToHTML() - This function takes a JavaScript object and renders it to an HTML string using the new saferSerialize function.

  This can be used anywhere that can display HTML, not just UIBUILDER. For example, you could use it to render complex data in a Dashboard template node.

There is also a new example flow that you can import. In the uibuilder examples, look for Client-side code >> Web Component - json-viewer. It demonstrates both the saferSerialize, renderToHTML functions and the new json-viewer web component.

Note

renderToHTML() and saferSerialize() do not quite produce the same output as the json-viewer component since they have no JavaScript interactivity available. However, they do produce a nicely formatted and highlighted HTML representation of the data that is much more robust than JSON.stringify().

Use <json-viewer> in a web page for the best experience.

NEW json-viewer HTML Web Component library

This optional library provides an HTML Web Component <json-viewer> that can be used to display JSON data in a nicely formatted and interactive way. It supports collapsible sections for objects and arrays, syntax highlighting, and other features to make it easier to explore complex JSON data.

If loaded in your index.html file, it not only provides the new element but also enhances the existing uibuilder.syntaxHighlight() and uibuilder.showMsg() functions to use the new library for rendering JSON data. This gives a much nicer output with collapsible sections for large objects and arrays.

uibuilder client library

• FIX for issue with RED.util.uib.send(). Was generating an uncaught error if the specified uibuilder instance did not exist.
• Moved some startup processing into the runtime plugin. This means that the uibuilder global configuration is available earlier in the startup process since plugins are loaded before nodes.
• ENHANCED uibuilder.syntaxHighlight() function now looks for the JsonViewer library. If loaded, it is used to render to HTML instead of the custom renderer. This gives a much nicer output with collapsible sections for large objects and arrays. If the library is not loaded, it falls back to the original custom renderer.
• ENHANCED uibuilder.showMsg() function now has tooltips for its two action buttons. It will also use the JsonViewer library if loaded.
• When the Node-RED server tells clients that it is shutting down, the Socket.IO auto-reconnect is turned off for 30 seconds to allow the server to restart without clients trying to reconnect and causing errors. Also reduced the number of error messages logged to the client console when Node-RED is disconnected.
• Socket.IO disconnect function updated to add the disconnect details introduced in Socket.IO v4.5. The uibuilder:socket:disconnected event updated to output {reason, details} instead of just the reason string.

Markweb

• The automatic status block has been corrected and moved to the main content. It only shows if either or both of the status and/or since front-matter attributes are set. Note that this is driven purely by CSS (no JavaScript) but it requires a relatively up-to-date browser to work correctly.
• Mermaid diagrams are now supported as code blocks in markdown files.
• Markdown footnotes are now also supported. See the Footnotes page in the [DEMO] Markweb for details and examples. We use the markdown-it-footnote plugin for this.
• Markweb nodes are now tracked in the uibuilder global configuration.
• The sidebar resizer is now more accessible and works with the keyboard.

Sidebar node

• FIXED Clearly nobody has been using the features of the uib-sidebar! Because if you had tried to send dynamic content to the sidebar, it wasn't working at all! Now, it does indeed work correctly.

• NEW You can now have as many uib-sidebar nodes as you like. Each one will add its defined HTML to the sidebar, wrapped in a <section> tag with a unique ID. This allows you to easily modularise your sidebar content and have different nodes responsible for different parts of the sidebar. Each sidebar node has its own input and output so they can be updated and respond to messages independently. The content from each sidebar node is added to the sidebar in the order that the nodes are listed in the Node-RED editor.

  [!TIP]
  Each of the sidebar HTML definitions has a change listener attached. This means that, if you include input elements in the HTML, they report back to the node's output when their content value changes. This allows you to easily create interactive sidebar content.

uibuilder node

• Improved shutdown processing, especially when using a custom Express server. Socket.IO and web connections are now terminated if Node-RED recieves a SIGINT. In addition, each instance's close function has been tidied up & the "shutdown" control message is now sent to connected clients earlier. This also updates the web and uiblib libraries.

• Started to move initialisation processing into the runtime plugin. This allows the uibuilder global configuration to be available earlier in the startup process since plugins are loaded before nodes. This is a work in progress and will continue over several releases. This also simplifies the uibuilder node's code and should make it easier to maintain and extend in the future. This is also important now that we have Markweb as well as uibuilder nodes that need to share the global configuration and filing system setup.

Documentation

• The sidebar resizer is now more accessible and works with the keyboard.
• New design docs added. These are directions or ideas for future development.
• Some additional process documents added. The process documents are aimed at clarifying the internal workings of uibuilder.

Runtime plugin

• Started to move initialisation processing into the runtime plugin. This allows the uibuilder global configuration to be available earlier in the startup process since plugins are loaded before nodes. This is a work in progress and will continue over several releases.

Runtime libraries

• NEW In Node-RED's settings.js file, you can now specify uibuilder.contentSecurityPolicy to set the default Content-Security-Policy (CSP) header for uibuilder instances. This allows you to improve the security of your uibuilder applications by restricting the sources of content that can be loaded in the browser.

  It is defined as an object. The default value is:

  {
    "default-src": "'self' 'unsafe-inline' data: blob: https:;",
    "connect-src": "'self';",
    "img-src": "'self' data: blob: https:;",
    "font-src": "'self' data: https:;",
    "style-src": "'self' 'unsafe-inline' data: blob: https:;",
    "script-src": "'self' 'unsafe-inline' 'unsafe-eval' blob: https:;",
    "frame-src": "'self' https:;"
  }

  You can customize this value to suit your needs. For example, if you want to allow loading scripts from a spec...

Bug fix release + Improved documentation layout

Code commits since last release.

This is a bug-fix release.

However, there is an update to the UIBUILDER Documentation! The page table-of-contents now sits in the sidebar (similar to Markweb) which gives a lot more room for the main text. In addition, the sidebar is now resizable.

• A number of fixes have been made to Markweb, nothing major. Includes making the copyright footer dynamically update on changes to the page front-matter.
• Removed ws: and wss: from the default Content Security Policy (CSP) connect-src as they are not needed and can interfere with other settings.
• Added uibuilder.asyncSend() function to the client docs.

Bug fix: Middleware load order

This is a bug-fix release.

The order of loading of ExpressJS web server middleware has been corrected so that any custom middleware in ~/.node-red/uibuilder/.common/uibMiddleware.js is now loaded after the uibuilder master middleware that adds uibuilder specific headers and cookies. This should allow custom middleware to work as expected.

Feature release: Introducing Markweb and other enhancements

Code commits since last release.

📌 Highlights

• In the Node-RED Editor, a popover is now shown after a UIBUILDER update. It contains highlights of the changes in the new version. It will only be shown once per version update.

• NEW NODE markweb - Enables simple creation of dynamic web sites using Markdown files. It supports navigation menus, search, front-matter placeholders, custom templates and much more.

• If you have set the Reload connected clients on save? option on the uibuilder node's File tab, clients will automatically reload the visible page not only if you change a file in the file Editor but also if you make changes elsewhere such as using an external editor or the uib-save node. So you now have the option of a full development server workflow.

• Two new example flows. "Built-in Web Components" and "Easy UI Updates".

• The various uibuilder icons now have more open names in the palette. In addition, the icons have all been updated to use customised, coloured icons. In particular, the uibuilder and markweb primary nodes now use 🌐 and 🕸️ icons respectively which is in line with their log and debug outputs.

• The uibuilder docs, front-end templates and markweb page template now all have different favicons to help differentiate them in the browser.

• Default Content-Security-Policy (CSP) header updated for improved browser security. You can override it in your settings.js file if needed.

Front-end

• uibuilder.get() and uibuilder.set() functions now support deep object paths. This allows you to get and set nested properties of reactive variables without needing to replace the entire variable. e.g. myvar.myprop, myvar.myprop.subprop or myvar[5].

• All HTML custom elements and reactive attributes also now support nested object paths. e.g. <uib-var topic="myvar.myprop"> or <div uib-var="myvar.myprop.subprop">. This allows you to directly bind to nested properties of reactive variables without needing to replace the entire variable.

• Updated uibuilder.onTopic() to process control messages as well as standard ones. Added so that the <uib-var topic="..."> component and uib-topic attribute can listen for control messages.

• <uib-var> component now recognizes data-before and data-after attributes. Useful for adding units, labels, or other contextual information around the variable value without needing extra HTML elements.

• New uib-var custom reactive HTML attribute added. Mostly of use for <meta>, <title>, <link> elementts in the <head> HMTL section.

• If DOMPurify is used, it is now configured to allow custom web components, since uibuilder now makes more extensive use of them.

• New stack and logStack functions. These can be useful for debugging and understanding the flow of your code especially with complex and deeply nested functions.

Documentation

• Mermaid diagrams are now supported in UIBUILDER's documentation. With the first example being for the new markweb node's page.
• The Roadmap has now been split into separate pages as it was totally unmanageable as a single page. You can use the links on the main Roadmap page to navigate to the different sections.

New node: markweb

Create a folder containing at least an index.md file for each (sub-)folder. Add the new node and configure the base URL and source folder.

The node will serve the markdown files as HTML pages using Single-Page Application (SPA) style navigation. The markdown is converted to HTML and inserted into a page template.

The Markdown conversion is done on Node-RED startup and re-done when a source page changes. So loading and navigation from the browser remains very fast.

It supports YAML front-matter in the markdown files. All front-matter attributes are available as placeholders in the page template and in the markdown using {{attributeName}} tags. Special instructions (directives) are also available to create navigation menus, index listings, search results, etc. These use %%...%% syntax.

CommonMark and GitHub Flavored Markdown (GFM) are supported. Syntax highlighting for code blocks is also included. Some additional extensions are also supported such as custom attributes.

An optional web component <show-meta> is also provided to display the current page's metadata (front-matter attributes). This is useful for debugging and development.

See the node documentation for full details.

Examples (Node-RED library flows)

• NEW Built-in Web Components

  Shows how to use the uibuilder client web components: <uib-meta>, <uib-var>, <apply-template>, and <uib-control>. These are all included in the main client library and do not need to be loaded separately.

• NEW Easy UI Updates

  Illustrates the use of the different ways to update the UI from Node-RED or your own front-end JavaScript. Includes examples of using the (new) uib-var and (existing) uib-topic custom HTML attributes, and the existing <uib-var> web component.

Documentation

• The sidebar of documentation page links now scrolls the current page link into view.
• The sidebar top-level entries that have children are now collapsible sections. Added because the documentaiton continues to grown.
• The sidebar expand/collapse state for each section is remembered across page loads.
• Each page now automatically shows status and/or since front-matter.
• Fixed Issue #575 - Broken CSS loads.
• Improvements to developer detailed documentation including details on the uibuilder/markweb instance setup. Should make things a lot easier if other developers want to take part in the future.
• Mermaid diagrams are now supported. With the first example being for the new markweb node's page.

uib-cache node

• Added several techniques to reduce resource overheads when the cache is receiving very large numbers of inputs.

uib-elements node

• FIXED Issue 580 - Missing data could cause a Node-RED crash. Additional checks and try/catch trap added.

uibuilder node

• NEW Function uibuilder.getCommandList(). This function returns a list of available commands that can be sent from Node-RED to the front-end client.
• FIXED VScode link not properly updating on node url change.
• Added a new config variable instancePath. This is the first change that will eventually allow uibuilder instances to use a different server folder than <uibRoot>/<url>.

uib-var component

• FIXED Not updating when the given variable is zero (0). Ref.

uib-brand.css front-end styles

• Added .visually-hidden class for elements hidden from sighted users but still accessible to screen readers. Use for skip links, form explanations, and status updates otherwise not needed for sighted users.
• FIXED Misconfigured fieldset border.
• Tweaks to blockquote and code styles for better appearance.
• All z-index values changed to use CSS variables. This allows you to easily change the z-index values in your own CSS if needed.

uibuilder client library

• NEW Function formatDate. This uses the Intl API to format dates according to locale and optional pattern. See the documentation for details. Really useful as a filter function and works great with the new markweb features.

• NEW Functions

  • randomUUID. This function generates a random UUID (Universally Unique Identifier) using the browser's crypto.randomUUID() method if available. If not available, it falls back to a simple implementation that combines the current timestamp and a random string. This can be useful for generating unique IDs for elements, messages, or other purposes in your front-end code.

  • asyncSend. This function allows you to send a message to the server and wait for a response. It returns a promise that resolves with the response message. This is useful for request/response patterns where you need to get data from the server before proceeding. Ref.

  • stack and logStack. These functions allow you to log a stack trace to the console. stack returns the stack details, while logStack logs the details as a regular console log message. This can be useful for debugging and understanding the flow of your code especially with complex and deeply nested functions.

• NEW Added the _receivedHRtime property to messages received from the Node-RED server. This is a high-resolution timestamp (in milliseconds) of when the message was received. It can be used to measure latency and performance. It uses the performance.now() method which provides sub-millisecond accuracy. The value is the elapsed time since page navigation started.

• NEW Added instanceFolder to uibuilder node settings. This to bring it into line with the new markweb node, in the future, allow instance root folders to be specified anywhere.

• NEW httpHeaders property added. This contains the HTTP headers received when the front-end client first connects to the server. This can be useful for debugging and for advanced use cases such as authentication and user tracking. Async so issues a custom event when ready. The start() function is now not called until they are ready because the headers are the most reliable way to get the namespace and Node-RED web root (stupid Firefox refuses to...

Feature release: Scripts tab, custom server public folder, bug fixes and more

Code commits since last release.

NOTE: If using the uibRouter SPA client library, please note that the startup processing has changed slightly. You may now get an error if you have specified a route container element but it doesn't exist. Unfortunately, some of the examples shared have this error and so will now break unless that container element id is changed. Sorry about that. The built-in router/SPA example has been updated to reflect this change.

📌 Highlights

• New "Quick Start" guides added to the documentation. Two main approaches: no-code/low-code and low-code/custom code. Each approach has a step-by-step guide to get you started quickly. In addition, several documentation pages now have rotating "tips" selected randomly from a list, they change every 15 seconds.

• A new browser overlay notification message feature available. Using showOverlay allows messages of different types (info, success, warning, and error) to be displayed to users in the browser. This can be triggered from Node-RED or from front-end code. Messages can be auto-dismissed after a few seconds (the default), or retained until manually dismissed.

• The uibuilder node now has an extra tab "scripts" which lets you run npm scripts defined in your instance root's package.json file.

  These can be any script that can be run on the host OS. They run in the OS's default shell. Output from the script is captured and returned to Node-RED in the panel beneath the list of scripts. When a script is running, a "Kill Script" button is visible, clicking this wil abort the script immediately.

• The 🌐 emoji is now in use consistently across UIBUILDER. You will find it in announcements on the forum, log messages, on the web page open buttons in the Editor and elsewhere. I am using this because emoji's are single-characters and usable anywhere that UTF-8 text is usable.

• uibuilder installation will now ERROR and stop if the Node-RED userDir folder is not writable. This is to prevent the uibuilder node from being misconfigured and not working correctly. The error message will show the userDir folder that is not writable.

• When using uibuilder's custom web server option, you now have the option to create a <uibRoot>/.public folder. It is served as the root URL. This is where you can place static files that you want to serve from the custom web server. The folder will be created automatically if it does not exist. You can also use this folder to serve static files such as images, CSS, and JavaScript files. Create an index.html file in the folder to serve a custom root home page. The folder is not served if you are using the default Node-RED web server (Use Node-RED's public folder for that).

• The documentation now has a "Tips" page that rotates through a selection of tips. I will be adding more tips over time. If you have any tips that you think would be useful, please let me know.

Example flows

• NEW uib-basic An inject node to a uibuilder node with debug nodes on each output. Inputs and outputs minimised. Outputs show full msg and show msg count.
• UPDATED Client-side code > FE Router Test. A complete front-end router example flow including html, js and route partials.
• UPDATE "Remote Commands" renamed to "Control UI from Node-RED" and refreshed. New showOverlay notifications included.

uibuilder node

• NEW Two new Editor actions have been added. This enables you to run these actions from keyboard shortcuts.

  • open-uibuilder-site - opens the selected uibuilder instances web site in a new browser tab.
  • edit-uibuilder-site - opens the selected uibuilder instances source folder in your full IDE. THe configuration for this comes from the "Code Editor URL" in the node's advanced properties tab (defaulting to VS Code).

• Updated the buttons on the Editor config panel's top button bar to use icons instead of text. Note that the wireframe globe is now used consistently across uibuilder.

• NEW An extra tab "scripts" has been added. This lets you run npm scripts defined in your instance root's package.json file.

  These can be any script that can be run on the host OS. They run in the OS's default shell. Output from the script is captured and returned to Node-RED in the panel beneath the list of scripts. When a script is running, a "Kill Script" button is visible, clicking this wil abort the script immediately.

  In addition to scripts that you define, the default npm outdated, update, and install scripts are also available to run.

• FIX for issue #564. VSCode edit link would not work if the uibuilder root folder did not start with a /. Also, the VSCode edit link could not be amended.

• FIX for duplicate url error when node is used in a subflow. Ref.

• FIX for issue #556. The library list in the Editor config panel would not work correctly if a library name contained special characters. Thanks to Paul Reed for reporting this issue.

Ui class

• Fixed a hidden issue with replaceSlot(). The safe method of creating a DocumentFragment does not work if the parent element is a <template>. For that, you can only use innerHTML.

• NEW showOverlay function. This function creates and displays an overlay window with customizable content and behavior. See the uibuilder client documentation for more details.

uib-sender node

• BUG FIX It was not returning messages from the front-end. This was a regression bug from a previous update. Many thanks to @Robert0 for reporting.

uib-brand.css front-end styles

• Improved colour contrast for default text/background.
• Improved background contrast for forms. Forms now stand out if emmbedded in an <article> element.
• Corrected the foreground/background colour for inputs and textareas. Now works better in light mode.
• Improved appearance of inputs and select elements outside of forms.
• Updated the table header styles to make them sticky. This means that the table headers will remain visible when scrolling down a long table. This is particularly useful for large tables with many rows.
• Changed accent-color to use the --primary variable rather than the --brand variable. accent-color is used by browsers to set the colour of form elements such as checkboxes and radio buttons. This means that the colour will now match the primary colour used in the rest of the uibuilder styles.
• Added cursor: pointer; to the <summary> element. This makes it clearer that the element is clickable and can be expanded or collapsed.
• Improved .status-side-panel styles. Allowing background color to be overridden with --status-color.

For forms, the following CSS variables (show with their defaults) can be used to more easily change the appearance of the forms:

/* The main background color for form elements */
--form-bg: var(--surface1);
/* The main text color for form elements */
--form-fg: var(--text2);
/* The border color for form elements */
--form-border: 1px solid var(--text3);

For the updated navigation menus, the following CSS variables (show with their defaults) can be used to more easily change the appearance of the menus:

/* The main background color for the menu */
--nav-bg: var(--surface3);
/* The main text color for the menu */
--nav-fg: var(--text2);
/* Secondary background color - used when hovering over other menu items */
--nav-2nd-bg: var(--primary-bg);
/* More contrasting text color - used for selected menu items */
--nav-2nd-fg: var(--text1);
/* More contrasting background color - Used for menu pop-up background */
--nav-3rd-bg: var(--surface2);

uibuilder client library

• NEW function uibuilder.reactive(srcvar)

  This function allows you to create a reactive variable. It outputs a custom event when the variable changes (including deep object changes). It returns the reactive version of the variable. This also has several new methods:

  • onChange(property, callback): Adds a listener that triggers the callback when the specified property of the reactive variable changes. If '*' is specified, it listens for any change to the variable. It returns a reference to the callback that can be used to remove the listener later. The reference also has a cancel() method
  • cancelChange(callbackRef): Removes a listener using a saved callback reference.

  [!WARNING]
  If the reactive variable is a primative type (string, number, boolean), then the you MUST use the myvar.value = 42 syntax to change the value. If you use myvar = 42, then the reactive variable will overwritten. The value property will also let you change a primative even if it has been created with const.

• NEW showOverlay function. This function creates and displays an overlay window with customizable content and behavior. This is an easy way to display some temporary information to the user.

  Also available as an external (from Node-RED) command. In that case, msg.payload is used as the content of the overlay unless options.content is specified. Controlling options can be passed in the msg._uib.options property

• Updated the client library type description files. They are available in the types folder of the blank template. There is a tsconfig.json file in the root of that template that includes the type definitions. This means that you can now get better code completion, descriptions and type checking when using the client library in your own code. Feel free to copy the file and the folder to your own projects.

  [!WARNING]
  The type definitions are not automatically...

Bug Fix

Bug fix for Issue #557 - Building ui.js with ESBUILD was causing the require to fail in the uib-html node. Needed to adjust the code from require('./libs/ui.js') to require('./libs/ui.js').default.

Bug fixes and improvements to showDialog

Code commits since last release.

• Dependabot updates to dependencies.
• Merge PR #553 from mutec: Fixes an issue with the glob function in libs/fs.cjs. Only impacts Windows users.
• Fix issue #546. Issues with the client ui library's showDialog function.
• Update the ui showDialog function - improving layout and updating the CSS styles in the uib-brand.css file.