Third Party Widget Support

[Pezmc]

Description

Adds support for third party widgets with full Vue support in NR dashboard as per the example widget implemented in FlowFuse/node-red-dashboard-2-ui-example#3.

This works by loading the third party Vue components over HTTP and using UMD to bind those components to window, as well are using the same instance of vue in both places (via window.Vue)

In practice that looks like this*:
_{*Where all of the visible widgets were in fact loaded over HTTP and not in the main bundle}

The documentation will need to be updated to reflect this new way to build third party nodes and their corresponding widgets, developers should follow the example (and Vite config) in https://github.com/FlowFuse/node-red-dashboard-example-node to get started.

Related Issue(s)

For #307

Pairs with: FlowFuse/node-red-dashboard-2-ui-example#3

Follow up to: #336

Checklist

• I have read the contribution guidelines
• Suitable unit/system level tests have been added and they pass
• Documentation has been updated
  • Upgrade instructions
  • Configuration details
  • Concepts
• Changes flowforge.yml?
  • Issue/PR raised on FlowFuse/helm to update ConfigMap Template
  • Issue/PR raised on FlowFuse/CloudProject to update values for Staging/Production

Labels

• Backport needed? -> add the backport label
• Includes a DB migration? -> add the area:migration label

[Pezmc]

Tests are broken, I believe due to unrelated changes, but handling back to @joepavitt for any finishing toushes.

[joepavitt]

FYI @bartbutenaers and @jtalbourdet just getting this on your radar as I know you're both actively looking at third-party widget support.

This will be an overhaul of the way we integrate (apologies its come so quickly after the first pass), but given the feedback we had in #307 felt it was required.

This new approach will utilise vite to run a build (via npm run build) in the third-party widget, package everything up into a single umd.js file, which we can then inject directly into Dashboard 2.0

With this, you can define any number of Vue Components, dependencies, etc. and it will all get packaged up. You will also be able to write full vue components as you should be able to, and will be consistent with core.

A few use cases I still need to iron up:

• How can we utilise the useDataTracker() functionality we have in core widgets as we can't currently import that file into the third-party components.
  • solution: use direct $socket event handlers
• Consequently, how do we access the main Vue $sockets connection & $state store access for data retention
  • All available by default because we extend the Vue App
• With the Node-RED .js file for the third party widget, how do we get exposure to the Dashboard 2.0's datastore, which would likely be required when defining custom onInput behaviour.

I will then be getting documentation fully up to date, including the updated example repository which will bring a much better workflow for development.

[joepavitt]

Example updates to reflect all (I think) cases of customisation/integration that would be required. This also shows 2 x instances of the same third-party widget being deployed to show that they stay separated from each other.

The custom event wasn't shown as it was just console logging something in the Node-RED terminal, but is fully functional.

Screen.Recording.2023-11-17.at.18.46.10.mov

Only outstanding item remains to be accessing the Dashboard datastore from within the ui-example.js file on the Node-RED side, as this is a .js file within Dashboard core that isn't exposed outside of that core package. One entry could be via the group that we retrieve, and then exposing the datastore at the UI Base level.

[joepavitt]

This is all now fully functional - just need to update the documentation