@theotherwillembotha/node-red-plugincore 0.1.0 → 0.2.0

package/src/core/state/template/StateTemplate.html

@@ -0,0 +1,244 @@
+<script type="text/javascript" template-section="onCompose">
+    node
+        .addDefault("stateReference", { required: false, value: '', type: "DelegatedConfigReferenceNode" })
+</script>
+
+<script type="text/javascript" template-section="onIncludeEditPrepare">
+
+    // Read name suffix and declared states from the build-time templateConfig injected by NodeConstructor.
+    let _stateNameSuffix = (templateConfig && templateConfig.nameSuffix) ? templateConfig.nameSuffix : '-State';
+    let _stateStates     = (templateConfig && templateConfig.defaultStates) ? templateConfig.defaultStates : null;
+
+    let stateSection     = $("#state-config-section");
+    let typeSelector     = stateSection.find("#state-type-selector");
+    let configureBtn     = stateSection.find("#state-configure-btn");
+    let stateRefSelector = stateSection.find("#state-ref-selector");
+
+    // Seed the hidden select with the current value and record the original for cleanup.
+    stateRefSelector.empty();
+    if (node.stateReference) {
+        let existingNode = RED.nodes.node(node.stateReference);
+        let label = existingNode ? (existingNode.name || node.stateReference) : node.stateReference;
+        stateRefSelector.append($('<option>').val(node.stateReference).text(label));
+        stateRefSelector.val(node.stateReference);
+    }
+    stateRefSelector.data('originalRef', node.stateReference || '');
+
+    let updateConfigureBtn = function() {
+        configureBtn.toggleClass("disabled", !typeSelector.val());
+    };
+
+    let getStateProviderTypes = async function() {
+        let types = [];
+        await $.ajax({
+            url: "nodetypeservice/find?tag=StateProvider",
+            type: "GET",
+            contentType: "application/json; charset=utf-8",
+            success:  (r)              => { types = r; },
+            error:    (jqXHR, s, err) => { console.log("StateTemplate: provider types error", jqXHR, s, err); },
+        });
+        return types;
+    };
+
+    // RED.editor.editConfig captures a reference to the field element before the inner config
+    // editor opens. When editing a ConfigNode, the outer editor's DOM is swapped out while the
+    // inner editor is active, so the captured reference becomes stale and editConfig's own
+    // callback silently fails to update our hidden select.
+    //
+    // Instead we listen for the 'nodes:add' event which fires via RED.nodes.add() whenever a
+    // new node (including config nodes) is added to the workspace - regardless of DOM state.
+    let stateNodeAddHandler = function(addedNode) {
+        getStateProviderTypes().then(function(types) {
+            let typeIds = types.map(function(t) { return t.id; });
+            if (typeIds.indexOf(addedNode.type) < 0) { return; }
+
+            console.log("StateTemplate: nodes:add - state provider added:", addedNode.type, addedNode.id);
+
+            let prevRef     = stateRefSelector.val() || '';
+            let originalRef = stateRefSelector.data('originalRef') || '';
+
+            // Clean up any intermediate node created earlier this session (not the original).
+            if (prevRef && prevRef !== originalRef) {
+                let inter = RED.nodes.node(prevRef);
+                if (inter) { RED.nodes.remove(inter); RED.nodes.dirty(true); }
+            }
+
+            // Update the hidden select with the newly created node.
+            stateRefSelector.empty();
+            stateRefSelector.append($('<option>').val(addedNode.id).text(addedNode.name || addedNode.id));
+            stateRefSelector.val(addedNode.id);
+
+            // Sync the visible type selector.
+            typeSelector.val(addedNode.type);
+            updateConfigureBtn();
+        });
+    };
+
+    RED.events.on('nodes:add', stateNodeAddHandler);
+    stateSection.data('stateNodeAddHandler', stateNodeAddHandler);
+
+    // When the type dropdown changes, restore the original ref if it matches,
+    // or clear so the user must click Configure to create a new instance.
+    typeSelector.on('change', function() {
+        let selectedType = typeSelector.val() || '';
+        let originalRef  = stateRefSelector.data('originalRef') || '';
+        let currentRef   = stateRefSelector.val() || '';
+
+        if (!selectedType) {
+            stateRefSelector.val('');
+            updateConfigureBtn();
+            return;
+        }
+        if (originalRef) {
+            let originalNode = RED.nodes.node(originalRef);
+            if (originalNode && originalNode.type === selectedType) {
+                stateRefSelector.val(originalRef);
+                updateConfigureBtn();
+                return;
+            }
+        }
+        if (currentRef) {
+            let currentNode = RED.nodes.node(currentRef);
+            if (currentNode && currentNode.type === selectedType) {
+                updateConfigureBtn();
+                return;
+            }
+        }
+        stateRefSelector.val('');
+        updateConfigureBtn();
+    });
+
+    configureBtn.on('click', function(event) {
+        event.stopPropagation();
+        if (configureBtn.hasClass("disabled")) return;
+
+        let selectedType = typeSelector.val() || '';
+        if (!selectedType) return;
+
+        let currentRef  = stateRefSelector.val() || '';
+        let currentNode = currentRef ? RED.nodes.node(currentRef) : null;
+
+        // Always set __stateTemplateContext so the config node editor can read defaultName and states.
+        window.__stateTemplateContext = {
+            defaultName: (node.name || node.type) + _stateNameSuffix,
+            states: _stateStates
+        };
+
+        if (currentNode && currentNode.type === selectedType) {
+            // Editing an existing owned node - nodes:add won't fire, select already has the value.
+            RED.editor.editConfig("#state-ref-selector", selectedType, currentRef);
+        } else {
+            // Creating a new instance - nodes:add handler will capture the new ID.
+            RED.editor.editConfig("#state-ref-selector", selectedType, "_ADD_");
+        }
+    });
+
+    // Populate the type dropdown, pre-select the current type, or auto-create a default.
+    getStateProviderTypes().then(function(providerTypes) {
+        providerTypes.forEach(function(t) {
+            $('<option>').val(t.id).text(t.name).appendTo(typeSelector);
+        });
+
+        let currentRef = stateRefSelector.val();
+        if (currentRef) {
+            // Existing reference - just pre-select its type.
+            let currentNode = RED.nodes.node(currentRef);
+            if (currentNode) typeSelector.val(currentNode.type);
+            updateConfigureBtn();
+        } else if (providerTypes.length > 0) {
+            // No state reference - auto-create a default InternalStateConfigNode so the
+            // consumer always has a valid state provider without requiring user action.
+            let defaultType = providerTypes.find(function(t) { return t.id === "InternalStateConfigNode"; }) || providerTypes[0];
+            let nodeDef     = RED.nodes.getType(defaultType.id);
+            if (nodeDef) {
+                // _def and _users MUST be set explicitly when creating a node programmatically:
+                // - _def:   RED.nodes.add() triggers updateConfigNodeUsers() which accesses
+                //           n._def.defaults. Without it: "can't access property '_', e._def is undefined".
+                // - _users: When the outer config node is saved, Node-RED updates the referenced
+                //           config node's user list. Without it: "can't access property 'indexOf',
+                //           t.users is undefined".
+                let newNode = { id: RED.nodes.id(), type: defaultType.id, _def: nodeDef, _users: [], users: [] };
+                let defs = nodeDef.defaults || {};
+                for (let key in defs) {
+                    if (defs[key].value !== undefined) { newNode[key] = defs[key].value; }
+                }
+                newNode.name = (node.name || node.type) + _stateNameSuffix;
+                // Pre-select the type immediately; nodes:add handler will set the ref ID.
+                typeSelector.val(defaultType.id);
+                updateConfigureBtn();
+                RED.nodes.add(newNode);
+            }
+        }
+    });
+</script>
+
+<script type="text/javascript" template-section="onIncludeEditSave">
+    var _stateSection        = $("#state-config-section");
+    var _stateNodeAddHandler = _stateSection.data('stateNodeAddHandler');
+    if (_stateNodeAddHandler) {
+        RED.events.off('nodes:add', _stateNodeAddHandler);
+        _stateSection.data('stateNodeAddHandler', null);
+    }
+    var _stateRefSelector = _stateSection.find("#state-ref-selector");
+    node.stateReference   = _stateRefSelector.val() || '';
+    console.log("StateTemplate: save - stateReference:", node.stateReference);
+    var _stateOriginalRef = _stateRefSelector.data('originalRef') || '';
+    if (_stateOriginalRef && _stateOriginalRef !== node.stateReference) {
+        var _stateOldNode = RED.nodes.node(_stateOriginalRef);
+        if (_stateOldNode) {
+            RED.nodes.remove(_stateOldNode);
+            RED.nodes.dirty(true);
+        }
+    }
+</script>
+
+<script type="text/javascript" template-section="onIncludeEditCancel">
+    var _stateSection        = $("#state-config-section");
+    var _stateNodeAddHandler = _stateSection.data('stateNodeAddHandler');
+    if (_stateNodeAddHandler) {
+        RED.events.off('nodes:add', _stateNodeAddHandler);
+        _stateSection.data('stateNodeAddHandler', null);
+    }
+    var _stateRefSelector = _stateSection.find("#state-ref-selector");
+    var _stateCurrentRef  = _stateRefSelector.val() || '';
+    var _stateOriginalRef = _stateRefSelector.data('originalRef') || '';
+    if (_stateCurrentRef && _stateCurrentRef !== _stateOriginalRef) {
+        var _stateTempNode = RED.nodes.node(_stateCurrentRef);
+        if (_stateTempNode) {
+            RED.nodes.remove(_stateTempNode);
+            RED.nodes.dirty(true);
+        }
+    }
+</script>
+
+<script type="text/html" template-section="onIncludeEditForm">
+    <div id="state-config-section">
+        <div class="form-row editorsectionheading">
+            <i class="w-16 fa fa-exchange"></i> <span>State</span>
+        </div>
+        <div class="editorgroupborder">
+            <div class="form-row nomargin">
+                <label class="towb_editorlabel" for="state-type-selector">Provider</label>
+                <div style="width: 70%; display: inline-flex;">
+                    <select id="state-type-selector" style="flex-grow: 1; min-width: 0;">
+                    </select>
+                    <a id="state-configure-btn" class="red-ui-button disabled" style="margin-left: 10px; flex-shrink: 0;" title="Configure state provider">
+                        <i class="fa fa-pencil"></i>
+                    </a>
+                </div>
+            </div>
+            <!-- Hidden real select - populated by nodes:add handler when a new state provider is created. -->
+            <select id="state-ref-selector" style="display:none;"></select>
+        </div>
+    </div>
+</script>
+
+<script type="text/markdown" template-section="onIncludeDocumentation">
+### State
+
+: *provider* (stateconfig) : Selects the type of state backend for this node. Click the pencil icon to create or configure the provider instance.
+
+Available built-in provider: **Internal State Config Node** - stores state in memory with optional persistence across redeployments and restarts.
+
+Each node owns its state provider exclusively. Switching provider types during configuration will delete the old provider instance when the editor is saved.
+</script>

package/src/core/state/template/StateTemplate.ts

@@ -0,0 +1,17 @@
+import { SourceUtility } from "../../NodeGenerator";
+import { BaseNodeConfig, Template, TemplateDescriptor } from "../../NodeConstructor";
+
+export interface StateTemplateConfig extends BaseNodeConfig {
+    stateReference: string;
+}
+
+export class StateTemplate extends Template {
+
+    public static getTemplateDescriptor(): TemplateDescriptor {
+        return new TemplateDescriptor(
+            "state",
+            StateTemplate,
+            SourceUtility.getSourcePath("/build/", "/src/") + "StateTemplate.html",
+            []);
+    }
+}

package/src/core/tagging/ServiceDescriptionDecorator.ts

@@ -0,0 +1,23 @@
+import { DependencyType, ServiceDescriptor } from "../NodeConstructor";
+
+export type ServiceDescriptionConfig = {
+    id: string;
+    sourceFile: string;
+    type?: string;
+    name?: string;
+    dependencies?: DependencyType[];
+}
+
+export function ServiceDescription(config: ServiceDescriptionConfig) {
+    return function(target: any) {
+        const descriptor = new ServiceDescriptor(
+            config.id,
+            config.name ?? target.name,
+            config.type ?? "services-plugin",
+            config.sourceFile,
+            target,
+            config.dependencies
+        );
+        target.getServiceDescriptor = (): ServiceDescriptor => descriptor;
+    };
+}

package/src/core/tagging/service/NodeTypeService.ts

@@ -1,8 +1,13 @@
 import { INodeClass } from "../../NodeGenerator";
-import { BaseService, ConfigNode, FlowDeployment, ServiceDescriptor } from "../../NodeConstructor";
+import { BaseService, ConfigNode, FlowDeployment } from "../../NodeConstructor";
+import { ServiceDescription } from "../ServiceDescriptionDecorator";
 import { NodeAPI, NodeAPISettingsWithData } from "node-red";
 
 
+@ServiceDescription({
+    id: "@theotherwillembotha/nodetypeservice",
+    sourceFile: "@theotherwillembotha/node-red-plugincore"
+})
 export class NodeTypeService extends BaseService {
     private red!: NodeAPI<NodeAPISettingsWithData>;
     private nodeTypes:{[key:string]:INodeClass[]} = {};
@@ -54,14 +59,4 @@ export class NodeTypeService extends BaseService {
         return this.nodeTypes[tag] ? this.nodeTypes[tag] : [];
     }
 
-    static override getServiceDescriptor():ServiceDescriptor {
-        return new ServiceDescriptor(
-            "@theotherwillembotha/nodetypeservice",
-            "NodeTypeService",
-            "services-plugin",
-            "@theotherwillembotha/node-red-plugincore",
-            NodeTypeService,
-            []
-        );
-    }
 }

package/src/core/ui/template/UIHelperTemplate.html

@@ -27,7 +27,7 @@
     overflow: hidden;
 }
 
-/* Title bar — matches Node-RED's main nav bar colour */
+/* Title bar - matches Node-RED's main nav bar colour */
 .plugincore-dialog-titlebar {
     display: flex;
     align-items: center;
@@ -43,7 +43,7 @@
     font-size: 13px;
 }
 
-/* Close button — jQuery UI styling as used in Node-RED dialogs */
+/* Close button - jQuery UI styling as used in Node-RED dialogs */
 .plugincore-dialog-close {
     color: #ccc !important;
     background: transparent !important;
@@ -56,9 +56,9 @@
     border-color: rgba(255, 255, 255, 0.3) !important;
 }
 
-/* Scrollable body that contains the jQuery UI tab widget */
+/* Scrollable body that contains the jQuery UI tab widget or plain content */
 .plugincore-dialog-body {
-    flex: 1;
+    flex: 1 1 auto;
     overflow: auto;
     padding: 10px;
 }
@@ -148,15 +148,45 @@
         return $table;
     };
 
+    /**
+     * PluginCore.tabs(tabs) → jQuery element
+     *
+     * tabs: [{ label: string, render($container) }]
+     *
+     * Builds and returns a jQuery UI tab widget element.
+     * Can be embedded in any container, including inside PluginCore.dialog render().
+     */
+    PluginCore.tabs = function(tabs) {
+        var uid     = 'plugincore-tabs-' + Date.now();
+        var $tabsEl = $('<div>').attr('id', uid);
+        var $ul     = $('<ul>');
+
+        (tabs || []).forEach(function(tab, i) {
+            var paneId = uid + '-pane-' + i;
+            $ul.append(
+                $('<li>').append($('<a>').attr('href', '#' + paneId).text(tab.label))
+            );
+            var $pane = $('<div>').attr('id', paneId);
+            if (tab.render) { tab.render($pane); }
+            $tabsEl.append($pane);
+        });
+
+        $tabsEl.prepend($ul);
+        $tabsEl.tabs();
+
+        return $tabsEl;
+    };
+
     /**
      * PluginCore.dialog(options) → { close() }
      *
      * options: {
-     *   title : string,
-     *   tabs  : [{ label: string, render($container) }]
+     *   title  : string,
+     *   render : function($container)              - simple dialog; body passed directly
+     *   tabs   : [{ label: string, render($c) }]  - tabbed dialog; delegates to PluginCore.tabs
      * }
      *
-     * Uses jQuery UI tabs for the tab widget (already bundled with Node-RED).
+     * render and tabs can coexist: render is called first, then the tab widget is appended.
      * Closes on: close button click, overlay click, or Escape key.
      */
     PluginCore.dialog = function(options) {
@@ -179,32 +209,17 @@
         );
         $titlebar.append($closeBtn);
 
-        // ── Body + jQuery UI tabs ──────────────────────────────────────────
-        var $body   = $('<div class="plugincore-dialog-body">');
-        var $tabsEl = $('<div>').attr('id', uid + '-tabs');
-        var $ul     = $('<ul>');
+        // ── Body ──────────────────────────────────────────────────────────
+        var $body = $('<div class="plugincore-dialog-body">');
 
-        (options.tabs || []).forEach(function(tab, i) {
-            var paneId = uid + '-pane-' + i;
-            $ul.append(
-                $('<li>').append($('<a>').attr('href', '#' + paneId).text(tab.label))
-            );
-            var $pane = $('<div>').attr('id', paneId);
-            if (tab.render) { tab.render($pane); }
-            $tabsEl.append($pane);
-        });
-
-        $tabsEl.prepend($ul);
-        $body.append($tabsEl);
+        if (options.render) { options.render($body); }
+        if (options.tabs)   { $body.append(PluginCore.tabs(options.tabs)); }
 
         // ── Assemble ───────────────────────────────────────────────────────
         $dialog.append($titlebar).append($body);
         $overlay.append($dialog);
         $('body').append($overlay);
 
-        // Initialise jQuery UI tabs (bundled with Node-RED)
-        $tabsEl.tabs();
-
         // ── Close logic ───────────────────────────────────────────────────
         var escNs = 'keydown.plugincore-dialog-' + uid;
 

package/src/core/webhook/service/WebhookServerService.ts

@@ -1,13 +1,15 @@
 
-import {BaseService, FlowDeployment, ServiceDescriptor } from "../../NodeConstructor";
+import {BaseService, FlowDeployment} from "../../NodeConstructor";
+import { ServiceDescription } from "../../tagging/ServiceDescriptionDecorator";
 import { NodeAPI, NodeAPISettingsWithData } from "node-red";
 import { WebhookServerConfigNode } from "../node/WebhookServerConfigNode";
 import { WebhookTemplate } from "../template/WebhookTemplate";
-import express, {Express, Request, Response} from "express";
+import type { Express, Request, Response } from "express";
 import { Server } from "http";
 import { ApiKeyMechanismType, RestAuthType } from "../../logger/service/LoggerService";
 
-var bodyParser = require('body-parser');
+function getExpress(): any { return require('express'); }
+function getBodyParser(): any { return require('body-parser'); }
 
 export enum EndpointMethodType {
     GET = "GET",
@@ -46,8 +48,8 @@ export class WebhookServer {
     public constructor(config:WebhookServerConfig){
         this._config = config;
 
-        this._app = express();
-        this._app.use(bodyParser.json({type: "application/json", limit: '50mb'}));
+        this._app = getExpress()();
+        this._app.use(getBodyParser().json({type: "application/json", limit: '50mb'}));
         this._listener = this._app.listen(this._config.port, '0.0.0.0');
     }
 
@@ -117,6 +119,10 @@ export class WebhookServer {
 
     }
 
+    public close(): void {
+        this._listener.close();
+    }
+
     public config():WebhookServerConfig {
         return this._config;
     }
@@ -129,9 +135,19 @@ export type  WebhookServerConfig = {
     externalPort:number;
 }
 
-export class WebhookServerService extends BaseService {
+// Stored on global so all bundled copies share the same server registry.
+const _GLOBAL_WEBHOOKSERVERS_KEY = '__plugincore_webhookservers__';
+function getWebhookServersStore(): {[key:string]:WebhookServer} {
+    if (!(global as any)[_GLOBAL_WEBHOOKSERVERS_KEY]) (global as any)[_GLOBAL_WEBHOOKSERVERS_KEY] = {};
+    return (global as any)[_GLOBAL_WEBHOOKSERVERS_KEY];
+}
 
-    private static webhookServers:{[key:string]:WebhookServer} = {};
+@ServiceDescription({
+    id: "@theotherwillembotha/webhookserverservice",
+    sourceFile: "@theotherwillembotha/node-red-plugincore",
+    dependencies: [WebhookServerConfigNode, WebhookTemplate]
+})
+export class WebhookServerService extends BaseService {
 
     constructor(){
         super("wehbookserver")
@@ -151,8 +167,10 @@ export class WebhookServerService extends BaseService {
 
         let webhookServerNodes = flowDeployment.flows.filter(node => node.type === "WebhookServerConfigNode") as any as WebhookServerConfig[];
 
+        const store = getWebhookServersStore();
+
         // find all the nodes that have been removed or changed.
-        Object.entries(WebhookServerService.webhookServers).forEach(([key, serverService]) => {
+        Object.entries(store).forEach(([key, serverService]) => {
             let webhookServerNode = webhookServerNodes.find(node => node.id === key);
             let serverServiceConfig = serverService.config();
             // compare the properties.
@@ -177,30 +195,28 @@ export class WebhookServerService extends BaseService {
 
         // find all the servers that have been added.
         webhookServerNodes
-            .filter(node => !WebhookServerService.webhookServers[node.id])
+            .filter(node => !store[node.id])
             .forEach(node => addedServers.push(node));
 
-        //console.log("REMOVED SERVERS:", removedServers);
-        //console.log("ADDED SERVERS:", addedServers);        
+        // Close and remove servers that have been deleted or whose config changed.
+        removedServers.forEach(removedConfig => {
+            const server = store[removedConfig.id];
+            if (server) {
+                server.close();
+                delete store[removedConfig.id];
+                console.log(`Closed webhook server on port ${removedConfig.port}`);
+            }
+        });
     }
 
     public static get (config:WebhookServerConfig): WebhookServer{
-        let server = (this.webhookServers[config.id]);
+        const store = getWebhookServersStore();
+        let server = store[config.id];
         if(!server){
-            this.webhookServers[config.id] = server = new WebhookServer(config);
+            store[config.id] = server = new WebhookServer(config);
             console.log(`Creating webhook server on port ${config.port}`);
         }
         return server;
     }
 
-    static override getServiceDescriptor():ServiceDescriptor {
-        return new ServiceDescriptor(
-            "@theotherwillembotha/webhookserverservice",
-            "WebhookServerService",
-            "services-plugin",
-            "@theotherwillembotha/node-red-plugincore",
-            WebhookServerService,
-            [WebhookServerConfigNode, WebhookTemplate]
-        );
-    }
 }