Uibuilder quick update

Share Your Nodes
1

For folk following the ongoing progress of uibuilder development.

v6.4 is in development. So far with just a few improvements baked in.

  • The big one so far being that I've added VSCode links if you are running Node-RED on localhost. That means that you can open a uibuilder front-end code folder in VSCode direct from the Editor. Saves a lot of time if, like me, you have dozens of uibuilder nodes deployed for development and testing.

    I'd love to find a way to open remote links as well and this should be feasible with the Microsoft remote edit extensions in VSCode. I'm not sure how and whether that can be done though. If you have any ideas, please let me know.

  • Next up is an improvement to the Socket.IO handling. When Socket.IO v4.6 was released, some nice additions appeared. Notably, it can now auto-reconnect after a temporary disconnection (up to 2 minutes as currently set). When it auto-reconnects, the same _socketId is kept and any sent messages that the client missed are forwarded automatically. If the disconnection is >2 minutes, the clientId and tabId will stay the same but the _socketId will change. I've also added a msg.recovered property to the connection control msg so that you can tell what happened.

  • There is a new document added to the docs that explains about "CSS Selectors". Since these are now fairly critical to use of zero-/low-code features. As well as a brief explainer and links to more detailed explanations, a set of examples are provided for things you might commonly come across when using uibuilder.

  • I've re-instigated Editor console debugging for uibuilder nodes if you are running on localhost. Opening the browser devtools on the Node-RED Editor page will show debugging information in regard to your uibuilder instance.

  • The last thing implemented so far is that the msg._ui processing functions in the client library have been moved to a separate file. You don't need to do anything on your own code since the additional library is built-in. However, it paves the way to reuse the library in Node-RED itself as mentioned in other posts. It also allows you to take the extra file and use it as a library in non-uibuilder code. I've used it twice now at work for easy delivery of some complex visualisations (as I got fed up of waiting for the "developer" who was meant to be doing them!).

Not sure yet when I'll release 6.4 but as always, there is a branch on GitHub that you can use for testing if you care to.

Not sure if this will make it into 6.4 but one of the things I've been chatting to some of the FlowForge folk about is whether or not uibuilder could be made more FlowForge friendly. As a starting point for that, I'm going to be moving all of the filing system handling to a separate back-end library. It's a fair bit of work so it might not make it into 6.4, we will have to see.

Lots more to come, check out the changelog and roadmap to stay in touch with developments.

Oh, nearly forgot, some further improvements to _ui handling in the client.

  • A custom event is no longer fired for each method invoked in a msg._ui. Very unlikely anyone ever found that useful and it simplifies the code. So onChange and onTopic event handler's are not called.
  • Fixed handling of xlink SVG attributes. Allows the use of <use> and other tags with xlink:href attributes.
  • Auto-add correct namespaces to an svg tag (xmlns and xmlns:xlink) so that you don't have to remember. :wink:
  • Additional safety checks added to ensure browser native API's present (document, fetch, etc.).
  • Class constructor takes a log function as an argument, this is required. The log function is assumed to be the same as the one in the main library (which requires calling as log(...)() to ensure that the correct calling line is reported.)
  • Improved htmlSend. Now includes doctype and outer html tags. msg.length also added to allow checking that the payload wasn't truncated by a Socket.IO limit.
2 Likes