[Steve-Mcl]

Description

Builds on #2290 and node-red/node-red#5994. Related to node-red/nr-monaco-build#9 and node-red/nr-monaco-build#18.

Summary

#2290 gives ui-template Vue and Vuetify editing.

Inside <script> and <style> it only highlights code. node-red/node-red#5994 adds JavaScript and CSS support for those blocks to Node-RED's HTML editors, and an API (RED.editor.codeEditor.monaco.registerEmbeddedLanguages) so other HTML-like languages can opt in.

This PR opts ui-template's vue-sfc language in, and adds the parts that are specific to Dashboard: the type of this.

With a Node-RED version that includes node-red/node-red#5994, the ui-template editor gets:

• <script>: JavaScript completion, hover info, parameter hints, go to definition and error checking. this knows the component: data, computed and methods, plus what Dashboard adds: this.send(), this.submit(), this.msg, this.value, this.id, this.props, this.$socket, this.$store, this.$router, this.$vuetify and the usual Vue instance members.
• <style>: CSS checking. With feat: expose the CSS and HTML language workers node-red/nr-monaco-build#18 in Node-RED's Monaco, also CSS completion, hover and colour previews.

On older Node-RED nothing changes: ui-template keeps the Vue/Vuetify support from #2290, and this code isn't even loaded.

How it works

Node-RED does the heavy lifting: a hidden copy of each block that Monaco's TypeScript and CSS workers answer for, mapped back onto the editor. Dashboard only tells it how to read a ui-template script, matching how Dashboard runs it (ui/src/widgets/ui-template/UITemplate.vue, ui/src/util/vue.acorn.js):

• A component script (the only statement is export default { ... }) is rewritten in the hidden copy as export default __uiTemplate({ ... }). A small type declaration then gives this the right type in data, computed, methods, watch, mounted and unmounted.
• Any other script runs inside mounted, so it's wrapped in a function whose this is the component.

Files:

• resources/vue-editor/vue-script.mjs (new, ~145 lines): the this type declarations, the wrapper, and the call to registerEmbeddedLanguages. The wrapper's helper names are hidden from completions, and $ members sort after the component's own.
• resources/vue-editor/vue-sfc.mjs: loads vue-script.mjs only when Node-RED provides registerEmbeddedLanguages.
• nodes/plugins/vue-editor.html: uses Node-RED's registerHTMLLanguage when present, which also maps the language to the html worker. Older Node-RED keeps feat: Vue and Vuetify editing in the ui-template code editor #2290's own registration and worker mapping.
• docs/en/nodes/widgets/ui-template.md: one more bullet in the Code Editor section.

TypeScript details I hit, recorded in the type declarations:

• One unsupported option (e.g. created, which Dashboard ignores with a console warning) made TypeScript give up and type this as any. So the options type allows other keys and doesn't warn about them.
• Typing this directly on watch / mounted / unmounted broke inference when watch comes before methods. They take this from the surrounding ThisType, like Vue's own types.

Testing

• New unit tests in test/resources/vue-script.spec.js (8): component vs raw detection matching Dashboard's parser, the wrapper's insertions, the type declarations, and activate() with and without Node-RED's API. The full suite passes (255) and lint is clean.
• Checked the types with the TypeScript 5.9 language service, using Node-RED's hidden-document code plus this wrapper. this. in a component lists count, doubled, go, id, items, msg, other, props, send, submit, value..., and this.count is number. Leaving out each option in turn (data/computed/watch/methods/mounted) keeps the typing.
• Checked in the browser with Playwright, against Node-RED with feat: add JavaScript and CSS support to script and style blocks in HT… node-red/node-red#5994:
  • this. lists the component's own members first, then Dashboard's;
  • this.send( shows its signature and description;
  • notDefined() is underlined on the right line;
  • raw scripts get the same this;
  • with feat: expose the CSS and HTML language workers node-red/nr-monaco-build#18: CSS completion and colour swatches in <style>;
  • no console errors;
  • nothing left behind after closing the editor.
• Node-RED 4.1.13 with this branch: vue-script.mjs isn't requested, feat: Vue and Vuetify editing in the ui-template code editor #2290's Vue/Vuetify support works as before, no console errors.

Related Issue(s)

#2290
node-red/node-red#5994
node-red/nr-monaco-build#9
node-red/nr-monaco-build#18

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
• Link to Changelog Entry PR, or note why one is not needed.

Labels

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

[Steve-Mcl]

Demo:

[Steve-Mcl]

better demo:

ui-template-vue-vuetify-demo.mp4

[n-lark]

Looks good minor nit - tested the following:

Tested on: Node-RED 3.1.15 (Monaco 0.38), 4.1.16 (Monaco 0.52), 5.0.4 (Monaco 0.55) and 5.0.8 (main, Monaco 0.57, with #5994).

3.1.15, 4.1.16 and 5.0.4 (without #5994):

• Same behaviour as #2290: dashboard, completion, hover, expand editor, scope switching, Done and Deploy all work
• vue-script.mjs never loads
• HTML completion works on older Monaco (3.1 and 4.1)
• No console errors

5.0.8 (with #5994):

• All #2290 checks still pass
• <script> completion, including typed this (data, computed, methods, msg, send, $socket, etc.)
• Syntax errors and CSS errors are flagged
• <style> CSS completion
• No false errors on the test template or on 18 of the 19 docs examples
• Library preview editor uses vue-sfc
• Hidden editor models are cleaned up on Done and Cancel
• Typing stays fast on a 156 KB template

[Steve-Mcl]

Fixed in c150d61 - a comment after export default { ... } no longer flags export default as an error. Added tests for both above and below.

[Steve-Mcl]

Code editor errors in the template now mark the node as invalid, like the Function node.