@flowfuse/node-red-dashboard 1.33.0 → 1.33.1-215bca8-202610211539.0

package/nodes/config/locales/en-US/ui_base.html

@@ -63,4 +63,13 @@
             </ul>
         </dd>
     </dl>
+    <dl class="message-properties">
+        <dt>
+            Notification Display Time
+            <span class="property-type">number</span>
+        </dt>
+        <dd>
+            Number of seconds the "Connected" notification is shown after the Dashboard reconnects. Set to 0 to keep it open until dismissed.
+        </dd>
+    </dl>
 </script>

package/nodes/plugins/vue-editor.html

@@ -0,0 +1,108 @@
+<script type="text/javascript">
+    /**
+     * Registers a "vue-sfc" language with Node-RED's Monaco code editor, used by ui-template.
+     * Up front this only registers the language id and Monaco's HTML language service for it. The tokenizer,
+     * Vue/Vuetify providers and Vuetify data are loaded from resources/vue-editor the first time an editor uses it.
+     */
+    (function () {
+        const PLUGIN_ID = 'ui-template-vue-editor'
+        const LANGUAGE_ID = 'vue-sfc'
+        const MODULE = '@flowfuse/node-red-dashboard'
+
+        /**
+         * Monaco asks MonacoEnvironment.getWorkerUrl/getWorker for a language worker using the language id as the
+         * label. Node-RED only knows its built-in labels, so map ours onto the html worker that serves it.
+         * Done on first use, when Node-RED has already set up MonacoEnvironment.
+         */
+        function shimWorkerLabel () {
+            const env = window.MonacoEnvironment
+            if (!env || env.vueSfcWorkerShim) {
+                return
+            }
+            for (const fn of ['getWorkerUrl', 'getWorker']) {
+                if (typeof env[fn] === 'function') {
+                    const original = env[fn]
+                    env[fn] = function (moduleId, label) {
+                        return original.call(this, moduleId, label === LANGUAGE_ID ? 'html' : label)
+                    }
+                }
+            }
+            env.vueSfcWorkerShim = true
+        }
+
+        /** Newer Node-RED versions register HTML-like languages itself, including the worker mapping */
+        function nodeRedRegistersHtmlLanguages () {
+            return typeof RED.editor?.codeEditor?.monaco?.registerHTMLLanguage === 'function'
+        }
+
+        function registerHtmlLanguageService (monaco) {
+            const options = { data: { useDefaultDataProvider: true } }
+            if (nodeRedRegistersHtmlLanguages()) {
+                RED.editor.codeEditor.monaco.registerHTMLLanguage(LANGUAGE_ID, options)
+                return
+            }
+            // Monaco 0.55 moved monaco.languages.html to monaco.html
+            const html = monaco.html?.registerHTMLLanguageService ? monaco.html : monaco.languages.html
+            if (!html?.registerHTMLLanguageService) {
+                return
+            }
+            html.registerHTMLLanguageService(LANGUAGE_ID, Object.assign({}, html.htmlDefaults?.options, options))
+        }
+
+        /**
+         * Registers the language if Monaco is loaded. Safe to call more than once.
+         * @returns {boolean} true when the vue-sfc language is available
+         */
+        function ensure () {
+            const monaco = window.monaco
+            if (!monaco?.languages?.register) {
+                return false
+            }
+            if (monaco.languages.getLanguages().some(l => l.id === LANGUAGE_ID)) {
+                return true
+            }
+            monaco.languages.register({ id: LANGUAGE_ID, aliases: ['Vue', LANGUAGE_ID], extensions: ['.vue'] })
+            try {
+                registerHtmlLanguageService(monaco)
+            } catch (err) {
+                console.warn('Dashboard: HTML language service not available for Vue templates', err)
+            }
+
+            const version = RED.nodes.registry?.getModule?.(MODULE)?.version
+            const query = version ? '?v=' + encodeURIComponent(version) : ''
+            const base = new URL('resources/' + MODULE + '/vue-editor/', document.baseURI)
+            monaco.languages.onLanguage(LANGUAGE_ID, function () {
+                if (!nodeRedRegistersHtmlLanguages()) {
+                    shimWorkerLabel()
+                }
+                import(new URL('vue-sfc.mjs' + query, base).href)
+                    .then(m => m.activate(monaco, { dataUrl: new URL('vuetify.json' + query, base).href }))
+                    .catch(err => console.warn('Dashboard: could not load the Vue editor support', err))
+            })
+            return true
+        }
+
+        /**
+         * nr-assistant before 0.21.0 only gives ui-template Expert completions and its CodeLens for html,
+         * so keep ui-template on html when an older nr-assistant is installed.
+         */
+        function assistantSupportsVueSfc () {
+            const assistant = RED.plugins.getPlugin('flowfuse-nr-assistant')
+            return !assistant || assistant.supportsVueSfc === true
+        }
+
+        /**
+         * Registers the language if needed. Safe to call more than once.
+         * @returns {boolean} true when ui-template should use the vue-sfc language
+         */
+        function useVueSfc () {
+            return RED.editor.codeEditor?.editor?.type === 'monaco' && assistantSupportsVueSfc() && ensure()
+        }
+
+        RED.plugins.registerPlugin(PLUGIN_ID, {
+            onadd: ensure,
+            ensure,
+            useVueSfc
+        })
+    })()
+</script>

package/nodes/widgets/locales/en-US/ui_template.json

@@ -18,6 +18,9 @@
             "template": "Template",
             "expand": "Expand",
             "resend": "Reload last value on refresh."
+        },
+        "errors": {
+            "invalid-template": "Error in template code"
         }
     }
 }

package/nodes/widgets/ui_template.html

@@ -149,6 +149,14 @@
                 height: { value: 0 },
                 head: { value: '' },
                 format: { value: defaultTemplate },
+                // number of errors the code editor reported when the edit dialog was last saved (set in oneditsave)
+                noerr: {
+                    value: 0,
+                    // two parameters, so Node-RED shows the returned message (a one-parameter validator's result is coerced to a boolean)
+                    validate: function (v, opt) {
+                        return !v ? true : c_('errors.invalid-template')
+                    }
+                },
                 storeOutMessages: { value: true },
                 passthru: { value: true },
                 resendOnRefresh: { value: true },
@@ -183,6 +191,11 @@
                 const that = this
                 const $templateScope = $('#node-input-templateScope')
 
+                // Monaco gets Vue/Vuetify syntax and completions from the ui-template-vue-editor plugin (nodes/plugins/vue-editor.html).
+                // ACE, Monaco without the plugin, or an nr-assistant too old for vue-sfc keeps the HTML mode.
+                const vueEditor = RED.plugins.getPlugin('ui-template-vue-editor')
+                const htmlMode = vueEditor?.useVueSfc?.() ? 'ace/mode/vue-sfc' : 'ace/mode/html'
+
                 // if this groups parent is a subflow template, set the node-config-input-width and node-config-input-height up
                 // as typedInputs and hide the elementSizer (as it doesn't make sense for subflow templates)
                 if (RED.nodes.subflow(this.z)) {
@@ -239,15 +252,15 @@
                         break
                     case 'widget:ui':
                         $('#template-row-ui').show()
-                        that.editor.getSession().setMode('ace/mode/html')
+                        that.editor.getSession().setMode(htmlMode)
                         break
                     case 'widget:page':
                         $('#template-row-page').show()
-                        that.editor.getSession().setMode('ace/mode/html')
+                        that.editor.getSession().setMode(htmlMode)
                         break
                     default:
                         $('#template-row-group, #template-row-class').show()
-                        that.editor.getSession().setMode('ace/mode/html')
+                        that.editor.getSession().setMode(htmlMode)
                         break
                     }
                     resize.call(that)
@@ -255,7 +268,7 @@
 
                 this.editor = RED.editor.createEditor({
                     id: 'node-input-format-editor',
-                    mode: 'ace/mode/html',
+                    mode: htmlMode,
                     value: $('#node-input-format').val()
                 })
 
@@ -263,7 +276,7 @@
                     url: 'uitemplates', // where to get the data from
                     type: 'ui-template', // the type of object the library is for
                     editor: this.editor, // the field name the main text body goes to
-                    mode: 'ace/mode/html',
+                    mode: htmlMode,
                     fields: ['name']
                 })
 
@@ -275,7 +288,7 @@
                     e.preventDefault()
                     const value = that.editor.getValue()
                     RED.editor.editText({
-                        mode: $templateScope.val() === 'global' ? 'css' : 'html',
+                        mode: $templateScope.val() === 'global' ? 'css' : htmlMode.replace('ace/mode/', ''),
                         value,
                         width: 'Infinity',
                         cursor: that.editor.getCursorPosition(),
@@ -423,6 +436,7 @@
     <div class="form-row" style="margin-bottom:0px;">
         <label for="node-input-format" style="width:110px;"><i class="fa fa-copy"></i> <span data-i18n="ui-template.label.template"></span></label>
         <input type="hidden" id="node-input-format">
+        <input type="hidden" id="node-input-noerr">
         <button id="node-template-expand-editor" class="red-ui-button red-ui-button-small" style="float:right"><i class="fa fa-expand"></i></button>
     </div>
     <div class="form-row node-text-editor-row" style="display: block;">

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@flowfuse/node-red-dashboard",
-    "version": "1.33.0",
+    "version": "1.33.1-215bca8-202610211539.0",
     "description": "FlowFuse Dashboard - A collection of Node-RED nodes that provide functionality to build your own UI applications (inc. forms, buttons, charts).",
     "keywords": [
         "node-red"
@@ -31,15 +31,17 @@
     ],
     "files": [
         "dist/*",
-        "nodes/*"
+        "nodes/*",
+        "resources/*"
     ],
     "scripts": {
-        "build": "vite build",
-        "build:dev": "cross-env NODE_ENV=development vite build --mode development",
+        "build": "npm run build:vue-editor && vite build",
+        "build:dev": "npm run build:vue-editor && cross-env NODE_ENV=development vite build --mode development",
+        "build:vue-editor": "node scripts/build-vue-editor-data.js",
         "cy:open": "cypress open",
         "cy:run": "cypress run",
         "cy:server": "node-red -u ./cypress/fixtures/user-dir/ -p 1881",
-        "dev": "cross-env NODE_ENV=development vite build --mode development --watch",
+        "dev": "npm run build:vue-editor && cross-env NODE_ENV=development vite build --mode development --watch",
         "dev:prod": "vite build --watch",
         "docs:build": "vitepress build docs",
         "docs:dev": "vitepress dev docs",
@@ -99,7 +101,7 @@
         "medium-zoom": "^1.1.0",
         "mermaid": "^11.12.2",
         "mocha": "^12.0.1",
-        "node-red": "^4.1.8",
+        "node-red": "^4.1.16",
         "node-red-node-test-helper": "^0.3.5",
         "npm-run-all": "^4.1.5",
         "sass": "^1.96.0",
@@ -108,9 +110,10 @@
         "should-sinon": "^0.0.6",
         "sinon": "^21.0.0",
         "socket.io-client": "^4.8.1",
+        "socket.io-parser": "~4.2.6",
         "sort-package-json": "^2.15.1",
         "svgo": "^4.0.0",
-        "vite": "^5.4.17",
+        "vite": "^6.4.4",
         "vite-plugin-image-optimizer": "^2.0.2",
         "vite-plugin-pwa": "^1.0.0",
         "vitepress": "^1.0.2",
@@ -156,18 +159,23 @@
             "ui-event": "nodes/widgets/ui_event.js",
             "ui-control": "nodes/widgets/ui_control.js",
             "ui-progress": "nodes/widgets/ui_progress.js"
+        },
+        "plugins": {
+            "ui-template-vue-editor": "nodes/plugins/vue-editor.html"
         }
     },
     "overrides": {
-        "node-red-admin@4.1.2": {
-            "axios": "^1.13.2"
-        },
         "nise@5.1.9": {
             "path-to-regexp": "6.3.0"
         },
         "esbuild": ">=0.25.0",
         "cross-spawn": "~7.0.5",
         "js-yaml": ">=5.4.1",
-        "tar": ">=7.5.4"
+        "tar": ">=7.5.4",
+        "vitepress": {
+            ".": "$vitepress",
+            "vite": "$vite"
+        },
+        "npm@<11.21.0": "11.21.0"
     }
 }

package/resources/vue-editor/vue-script.mjs

@@ -0,0 +1,148 @@
+/* eslint-env browser */
+/* global RED */
+/**
+ * JavaScript and CSS editing for the <script> and <style> blocks of a ui-template (`vue-sfc` language).
+ *
+ * Node-RED provides the machinery (RED.editor.codeEditor.monaco.registerEmbeddedLanguages, in newer
+ * Node-RED versions). This module only adds what is specific to Dashboard: the type of `this`. Dashboard runs a
+ * ui-template script in one of two ways (ui/src/widgets/ui-template/UITemplate.vue, ui/src/util/vue.acorn.js):
+ *  - a script whose only statement is `export default { ... }` is a Vue component; Node-RED's hidden copy
+ *    of it becomes `export default __uiTemplate({ ... })`, which types `this` in data, computed, methods,
+ *    watch, mounted and unmounted
+ *  - any other script runs inside `mounted`, so it is wrapped in a function whose `this` is the component
+ * Both see what Dashboard adds to the component: send(), submit(), msg, value, id, props, $socket, ...
+ */
+
+const TYPES_PATH = 'file:///node_modules/@types/node-red-dashboard-ui-template/index.d.ts'
+
+/** Type declarations for the ui-template component instance */
+export const UI_TEMPLATE_TYPES = `
+/** Members that Dashboard adds to every ui-template component */
+interface UiTemplateContext {
+    /** The ID of this ui-template node, assigned by Node-RED */
+    readonly id: string
+    /** The configuration of this ui-template node */
+    readonly props: { name?: string, templateScope?: string, [key: string]: any }
+    /** The last message received by this ui-template node */
+    readonly msg: { payload?: any, topic?: string, [key: string]: any }
+    /** Get or set \`msg.payload\` of the last message */
+    value: any
+    /** Send a message to the Node-RED flow. A non-object value is sent as \`msg.payload\`. */
+    send(msg: any): void
+    /** Send an event to the Node-RED flow, with \`topic\` set to the event type */
+    submit(event: Event): void
+    /** The socket.io connection to Node-RED */
+    readonly $socket: {
+        on(event: string, listener: (...args: any[]) => void): any
+        off(event: string, listener?: (...args: any[]) => void): any
+        emit(event: string, ...args: any[]): any
+        [key: string]: any
+    }
+    /** Last message received by every widget, by widget ID */
+    readonly messages: Record<string, any>
+    /** Dashboard setup information */
+    readonly setup: any
+    readonly $dataTracker: any
+    /** The Dashboard Vuex store */
+    readonly $store: any
+    /** The Dashboard router */
+    readonly $router: any
+    /** The current route */
+    readonly $route: any
+    /** The Vuetify instance */
+    readonly $vuetify: any
+    /** The root DOM element of this component */
+    readonly $el: any
+    /** Elements and components registered with \`ref\` */
+    readonly $refs: Record<string, any>
+    readonly $data: Record<string, any>
+    readonly $parent: any
+    readonly $root: any
+    readonly $options: Record<string, any>
+    /** Trigger a custom event on this component */
+    $emit(event: string, ...args: any[]): void
+    /** Wait for the next DOM update */
+    $nextTick(fn?: () => void): Promise<void>
+    /** Watch a reactive property or getter */
+    $watch(source: string | (() => any), callback: (value: any, oldValue: any) => void, options?: { immediate?: boolean, deep?: boolean }): () => void
+    /** Force this component to re-render */
+    $forceUpdate(): void
+}
+type UiTemplateComputed<C> = { [K in keyof C]: C[K] extends (...args: any[]) => infer R ? R : C[K] extends { get(): infer G } ? G : never }
+type UiTemplateInstance<D, C, M> = D & UiTemplateComputed<C> & M & UiTemplateContext
+type UiTemplateWatcher = ((value: any, oldValue: any) => void) | { handler: (value: any, oldValue: any) => void, deep?: boolean, immediate?: boolean }
+/** The options that a ui-template component supports */
+declare function __uiTemplate<D = {}, C = {}, M = {}>(component: {
+    name?: string
+    data?: (this: UiTemplateContext) => D
+    computed?: C & ThisType<UiTemplateInstance<D, C, M>>
+    methods?: M & ThisType<UiTemplateInstance<D, C, M>>
+    // \`this\` in these comes from the ThisType below; typing it here as well stops TypeScript inferring D, C and M
+    watch?: Record<string, UiTemplateWatcher>
+    mounted?: () => void
+    unmounted?: () => void
+    /** Dashboard ignores other options (it logs a warning); allowed here so that one doesn't stop \`this\` being typed */
+    [option: string]: any
+} & ThisType<UiTemplateInstance<D, C, M>>): void
+`
+
+// whitespace and comments, which Dashboard allows around a component (they aren't statements)
+const GAP = String.raw`(?:\s|\/\/[^\n]*(?:\n|$)|\/\*(?:[^*]|\*(?!\/))*\*\/)*`
+
+/**
+ * Where a ui-template script is a component: Dashboard treats it as one when its only statement is
+ * `export default { ... }`.
+ * @param {string} body - the script's code
+ * @returns {{ open: number, close: number } | null} offsets (in body) of the object's `{` and `}`
+ */
+export function findComponent (body) {
+    const head = new RegExp(`^${GAP}export\\s+default\\s*(?=\\{)`).exec(body)
+    const tail = new RegExp(`\\}\\s*;?${GAP}$`).exec(body)
+    return head && tail ? { open: head[0].length, close: tail.index } : null
+}
+
+/**
+ * The `wrap` hook for registerEmbeddedLanguages: text to insert around a script so `this` has its type.
+ * @param {string} text - the ui-template
+ * @param {{start: number, end: number}} region - the script's code
+ * @param {number} index - the script's position in the template
+ * @returns {{at: number, text: string}[]} insertions at offsets in the ui-template
+ */
+export function wrapScript (text, region, index) {
+    const component = findComponent(text.slice(region.start, region.end))
+    if (component) {
+        return [
+            { at: region.start + component.open, text: '__uiTemplate(' },
+            { at: region.start + component.close + 1, text: ')' }
+        ]
+    }
+    return [
+        { at: region.start, text: `/** @this {UiTemplateContext} */ function __uiTemplateScript${index} () {` },
+        { at: region.end, text: '\n}' }
+    ]
+}
+
+/**
+ * Registers Dashboard's script and style support with Node-RED's code editor.
+ * @param {object} monaco - the monaco namespace (unused, kept for the same signature as vue-sfc.mjs)
+ * @param {object} options
+ * @param {string} options.languageId - the ui-template language id (vue-sfc)
+ * @returns {boolean} false if this Node-RED doesn't provide registerEmbeddedLanguages
+ */
+export function activate (monaco, { languageId }) {
+    const register = RED.editor?.codeEditor?.monaco?.registerEmbeddedLanguages
+    if (typeof register !== 'function') {
+        return false
+    }
+    register(languageId, {
+        javascript: {
+            wrap: wrapScript,
+            extraLibs: [{ content: UI_TEMPLATE_TYPES, filePath: TYPES_PATH }],
+            hiddenNames: /^__uiTemplate/,
+            // list the component's own members before the Vue/Dashboard `$` members
+            demotedNames: /^\$/
+        },
+        css: {}
+    })
+    return true
+}