@theotherwillembotha/node-red-plugincore 0.0.55 → 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/WebhookDecorator.ts

@@ -1,6 +1,7 @@
+import os from "os";
 import { RestAuthType } from "../logger/service/LoggerService";
 import { BaseNode, createPostConstructDecorator, NodeManager } from "../NodeConstructor";
-import { ProxyManagerClient } from "./service/ReverseProxyTypeService";
+import { HTTPScheme, ProxyManagerClient } from "./service/ReverseProxyTypeService";
 import { ApiKeyAuthenticationConfig, BasicAuthenticationConfig, EndpointConfig, EndpointMethodType, NoAuthenticationConfig, WebhookServer } from "./service/WebhookServerService";
 import { WebhookTemplateConfig } from "./template/WebhookTemplate";
 
@@ -10,6 +11,14 @@ type WebhookConfig = {
     methods:EndpointMethodType[],
 }
 
+type ManagedProxyHost = {
+    proxyNodeId: string;
+    hostId: number;
+}
+
+// In-memory registry: nodeId → managed proxy host entries from the last deploy.
+const managedProxyHosts = new Map<string, ManagedProxyHost[]>();
+
 const Webhook = createPostConstructDecorator<WebhookConfig>('Webhook')
     .withInitLogic(async (instance, propertyKey, webhookconfig:WebhookConfig) => {
         //console.log(`Registering webhook callback`,  "PROPERTYKEY", propertyKey, "WEBHOOK CONFIG", webhookconfig, "THIS", this);
@@ -35,24 +44,58 @@ const Webhook = createPostConstructDecorator<WebhookConfig>('Webhook')
 
         if(nodeConfig.reverseProxies_enabled){
 
-            await Promise.all(nodeConfig.reverseProxies_connections.map(async proxy => {
+            let targetPort = webhookServer.config().port;
+            let targetHost = os.hostname();
+            let nodeId = nodeConfig.id;
+            let newlyManaged: ManagedProxyHost[] = [];
 
+            await Promise.all(nodeConfig.reverseProxies_connections.map(async proxy => {
                 try{
-                    // get a n instance of reverseProxNode.
-                    let reverseProxyNode = (NodeManager.RED.nodes.getNode(proxy.proxy) as any).node();
-
                     // TODO: ReverseProxyConfigNodes need to become their own subtype of config nodes so we can enforce the ".client()" method.
+                    let reverseProxyNode = (NodeManager.RED.nodes.getNode(proxy.proxy) as any).node();
                     let proxyClient = reverseProxyNode.client() as ProxyManagerClient;
 
-                    console.log("List of known hosts: ", await proxyClient.getHosts());
-                    //console.log("ADD REVERSE PROXY:" + proxy.proxy + " to " + node.id(), proxyClient);
+                    let hosts = await proxyClient.getHosts();
+                    let matchingHost = hosts.find(h => h.domainNames?.includes(proxy.domainname));
+
+                    if (!matchingHost) {
+                        await proxyClient.updateHost({ domainNames: [proxy.domainname], forwardHost: targetHost, forwardPort: targetPort, scheme: HTTPScheme.HTTP });
+                        // Fetch again to get the assigned ID of the newly created entry.
+                        let updatedHosts = await proxyClient.getHosts();
+                        matchingHost = updatedHosts.find(h => h.domainNames?.includes(proxy.domainname));
+                    }
+                    else if (matchingHost.forwardHost !== targetHost || matchingHost.forwardPort !== targetPort) {
+                        await proxyClient.updateHost({ id: matchingHost.id, forwardHost: targetHost, forwardPort: targetPort, scheme: HTTPScheme.HTTP });
+                    }
+
+                    if (matchingHost?.id !== undefined) {
+                        newlyManaged.push({ proxyNodeId: proxy.proxy, hostId: matchingHost.id });
+                    }
                 }
                 catch(e){
-                    console.log(e);
+                    console.error(e);
                 }
-
-                return Promise.resolve();
             }));
+
+            // Remove any stale proxy host entries that were managed last deploy but are no longer in the current config.
+            let previouslyManaged = managedProxyHosts.get(nodeId) ?? [];
+            let newHostIds = new Set(newlyManaged.map(m => m.hostId));
+
+            await Promise.all(previouslyManaged
+                .filter(m => !newHostIds.has(m.hostId))
+                .map(async stale => {
+                    try{
+                        let reverseProxyNode = (NodeManager.RED.nodes.getNode(stale.proxyNodeId) as any).node();
+                        let proxyClient = reverseProxyNode.client() as ProxyManagerClient;
+                        await proxyClient.deleteHost(stale.hostId);
+                    }
+                    catch(e){
+                        console.error(e);
+                    }
+                })
+            );
+
+            managedProxyHosts.set(nodeId, newlyManaged);
         }
 
         // register a close listener to the node.

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

@@ -22,6 +22,7 @@ export abstract class ReverseProxyType {
 export interface ProxyManagerClient {
     updateHost(data: Partial<HostEntry>):Promise<void>;
     getHosts():Promise<Partial<HostEntry>[]>;
+    deleteHost(id: number):Promise<void>;
 }
 
 export type HostEntry = {