Hi all, this topic is to capture ideas and decisions regarding the design of a VueJS component standard for uibuilder.
uibuilder VueJS components will be standard pieces of front-end code with an agreed msg schema for communications from/to Node-RED. They will be the uibuilder equivalent of Dashboard widgets. However, where those send the code as well as the data from Node-RED to the front-end, uibuilder components will only send data since the code is developed using standard web development methods.
Here are my starter requirements for uibuilder VueJS components - everything is open for discussion though so if you disagree, please chip in and explain why and what might be better:
-
Each component (or component set) must be installable via npm (e.g. using the uibuilder library manager or manual install into the
userDir
folder) -
Components npm modules should be named
node-red-contrib-uib-xxxxx
- the components themselves should be named in line with VueJS naming conventions and should clearly identify what they do in the name.I'm actually not sure about this one and would welcome input from Nick and Dave in particular as to whether they would prefer a different naming convention. After all, these components could be used outside of Node-RED. However, "uibuilder" is a term also used in other modules not related to us.
-
Component npm modules should have the "uibuilder" tag.
-
Component npm modules should NOT have a "node-red" tag (so that they don't confusingly appear in the Node-RED flows library) - after all, these are not Node-RED extensions and could be used outside of Node-RED.
The exception to this would be where a component includes a new Node-RED Node. This should not be a common requirement.
-
Component npm modules MUST have a peer dependency of "node-red-contrib-uibuilder" listed in their package.json files.
-
Component npm modules should identify the versions of VueJS they will work with.
-
uibuilder components MUST be usable with or without a build step.
-
Any JavaScript must be self isolating (wrapped in an anonymous, self-executing function).
-
Components must have suitable documentation including a schema description of the
msg
(or msgs) required. -
Components should be listed in the component index (to be created). This index may in the future auto-discover components based on the agreed component naming and a "uibuilder" tag in the npm module.
-
Components should not assume that inputs are in any way correct or safe.
-
Components must take note of the uibuilder v3 proposed
msg.auth
schema that will be used for exchange of authentication/authorisation information.
The critical part of any uibuilder component will be the schema that describes how communications between Node-RED and your front-end happen and in what format.
In general, uibuilder VueJS components should not need a new Node-RED Node since all that is required is to send an appropriate msg to the front-end. It is currently expected that all communication happens via the uibuilder node instance. If we come across a situation that needs something different, we will need to have a separate discussion since it is possible that changes to uibuilder itself might be needed.