# \[uibuilder\] Next release v6.1.0 - Development started - GitHub v6.1.0 branch available

**URL:** https://discourse.nodered.org/t/uibuilder-next-release-v6-1-0-development-started-github-v6-1-0-branch-available/72606
**Category:** Share Your Nodes
**Tags:** uibuilder
**Created:** [22 December 2022 21:35 UTC](https://discourse.nodered.org/t/uibuilder-next-release-v6-1-0-development-started-github-v6-1-0-branch-available/72606 "2022-12-22T21:35:09Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [22 December 2022 21:35 UTC](https://discourse.nodered.org/t/uibuilder-next-release-v6-1-0-development-started-github-v6-1-0-branch-available/72606/1 "2022-12-22T21:35:09Z")

</div>

Didn't get as much time as I hoped this week to work on v6.1 but it is certainly well under way with what I think are some nice new features.

Here are the proposed and completed changes so far. As usual, if you want to follow along, the dev build is on the GitHub v6.1.0 branch. Lots more to do but Christmas is going to slow things down for a few days I'm afraid.

Don't forget that there is a LOT more than this in the roadmap file.

* * *

## To do/In-progress

### uibuilder node

- Editor
  - Disable the new Open button along with other disabled things when new or url has changed.
  - Add template description to display.

- `socket.js`
  - Add rooms: Url, Url/page, User id, Tab id - will allow broadcasts to a specific page, user or individual tab and will not be purely reliant on the `_socketId` which can change.
  - When a new client connection is made, use `socket.emit('join', tabId)`
  - Output to a room using `io.to(tabId).emit(...)`
  - [Rooms | Socket.IO](https://socket.io/docs/v4/rooms/)

### IIFE/ESM/Module client library

- Add a default `msg.topic` option. `uibuilder.set('topic', '....')` Will be used in msgs sent back to node-red if no topic specified.
- Add `uibuilder.cacheSend()` and `uibuilder.cacheClear()` functions - reinstate in uib-cache fn now we've removed extra ctrl send
- Add option to send log events back to node-red via the `navigator.sendBeacon()` method.
  - uibuilder node will output control msg of type `Client Log` when client sends a beacon.
  - Make optional via flag in Editor with start msg enabling/disabling in client.
  - ? window and document events - make optional via uibuilder fe command.

- Consider watching for a url change (e.g. from vue router) and send a ctrl msg if not sending a new connection (e.g. from an actual page change).

### Examples

- Update all to use new libs. Remove (c).
- Global Notification/Toasts
- Update/add examples for each template

### Templates - update to latest standards

- Not yet done:
  - vue
  - vue-simple
  - svelte-basic

- Maybe add:
  - Vue v3 (build)
  - Vue v3 + Quasar
  - REACT (no-build)
  - REACT (build)

### uib-cache

- Output node.warn msg if recv input with no "Cache by" msg prop. (e.g. no msg.topic for default setting)

### Doc updates

- `isVisible`, `tabId` and `syntaxHighlight(json)` in new client builds.
- Updated `msg._uib` optional in standard msgs
- Move v5 changes to archive log

### Other Ideas (Will probably move to the roadmap)

- Investigate use of WebWorkers to have a shared websocket that allows retained connection on page reload and between pages in the same uibuilder node.
  - [https://crossbario.com/blog/Websocket-Persistent-Connections/](https://crossbario.com/blog/Websocket-Persistent-Connections/)
  - [javascript - How to maintain a WebSockets connection between pages? - Stack Overflow](https://stackoverflow.com/questions/10886910/how-to-maintain-a-websockets-connection-between-pages)

* * *

## Committed to GitHub v6.1.0 branch

### uibuilder node

- Added JSON and Form encoded body processing to all user instance routes to allow for processing POST requests

- Added new user web endpoint `./_clientLog` (`web.js`::`addLogRoute()`). This can only be POSTed to and should only be used for `navigator.sendBeacon` text messages (the body of the POST has to be plain text).

- Updated optional `msg._uib` properties on standard output messages, additional metadata added:

- Updated connect, disconnect and error control messages. They now show more details about the originating client and page.

- Reinstated ability for client to send uibuilder control messages.

- Editor

- `socket.js`

### IIFE/ESM/Module client library

- Added `uibuilder.syntaxHighlight(json)` function - standard function that converts JSON/JavaScript object into highlighted HTML. Useful for debugging messages sent from/to Node-RED. This used to be in each template so you don't need it there any more.

- Added a unique tab identifier `uibuilder.tabId` that remains while the tab does. Is include in std outputs. Based on [this](https://stackoverflow.com/questions/11896160/any-way-to-identify-browser-tab-in-javascript). NOTE however, that duplicating the browser tab will result in a duplicate tab id.

- Added `uibuilder.isVisible` property. Is true when the browser tab containing the page is actually visible. On visibility change, sends a new control msg `msg.uibuilderCtrl` = "visibility" with the property `isVisible` true or false. Does not send this when the page loads but does set the property. Uses the document `visibilitychange` event.

### `uib-brand.css`

- Is now the default CSS for all of the templates.
- Added JSON syntax highlight rules from `uib-styles.css`.

### Templates

- All of the templates have been updated to the latest uibuilder standards for v6.
- The default blank template and any others that don't specify which client build is used now use the new `uibuilder.IIFE.min.js` build.
- All templates using the new clients have a `<div id="more"><!-- '#more' is used as a parent for dynamic content in examples --></div>` line in the HTML which is a useful target for adding dynamic content from Node-RED.
- All templates have updated and rationalised README.md and package.json files in the root folder.
- All templates have .eslintrc.js files in the root folder. You may need to install eslint extensions to match. If this file gets in the way, it can be safely deleted. It helps maintain standard coding practices and helps avoid the use of JavaScript which is too new.
- Removed the (c) from the remaining templates. There is no (c) on any of them. They all fall under MIT license. Use as you will, there are no intellectual property restraints on the template code.
- Updated:
  - blank
  - blank-iife-client
  - blank-old-client
  - blank-esm-client
  - iife-vue3-nobuild
