@theotherwillembotha/node-red-plugincore 0.0.52 → 0.0.53

package/README.md

@@ -179,6 +179,7 @@ Templates bundle reusable UI fragments that compose into any node's editor panel
 | `TimerMetricTemplate` | Timer config node reference |
 | `WebhookTemplate` | Webhook server reference, path, auth, and reverse proxy config |
 | `UIHelperTemplate` | Global `PluginCore.dialog()` and `PluginCore.table()` UI factories (see below) |
+| `ScriptEditorTemplate` | Global `PluginCore.createScriptEditor()` factory for Monaco-based script editors (see below) |
 | `SettingsTemplate` | General settings section |
 | `BasicTemplate` | Base styles shared by all nodes |
 
@@ -265,6 +266,58 @@ $container.append($table);
 | `plugincore-status-enabled` | Green | Enabled / active state |
 | `plugincore-status-disabled` | Red | Disabled / inactive state |
 
+#### `PluginCore.createScriptEditor(elementId, template, initialValue)`
+
+Including `ScriptEditorTemplate` in a node's `templates` list injects a Monaco-based script editor factory into the Node-RED editor page. It wraps the async Monaco initialisation boilerplate into a single call and returns a `{ getValue(), dispose() }` handle.
+
+```javascript
+// In onIncludeEditPrepare:
+let scriptTemplate = `
+    interface Message { [key: string]: any; }
+    async function(msg: Message) {
+    \${script}
+    }
+`;
+
+node.scriptEditor = PluginCore.createScriptEditor(
+    'node-input-script-editor',         // DOM id of the container element
+    scriptTemplate,                      // TypeScript context template
+    node.script || 'return true;'        // initial value
+);
+
+// In onIncludeEditSave:
+node.script = node.scriptEditor.getValue();
+delete node.scriptEditor;
+
+// In IncludeEditCancel:
+node.scriptEditor.dispose();
+delete node.scriptEditor;
+```
+
+The `template` string provides the TypeScript context that the Monaco language service uses for diagnostics, completions, and hover info. Use `\${script}` as the placeholder for the user's code. The user only sees their code — the surrounding context is invisible to them but informs type checking.
+
+**Returns:** `{ getValue(): string, dispose(): void }`
+
+---
+
+> **Note — Handlebars escaping in node HTML files**
+>
+> Node HTML files (`.html` template files) are processed by Handlebars during the build. This means any `{{ }}` syntax in the HTML — including in JavaScript comments or JSDoc — will be interpreted as a Handlebars expression and produce unexpected output or an error.
+>
+> Escape curly braces with a backslash wherever they appear literally in the file:
+>
+> ```javascript
+> // Wrong — Handlebars will try to evaluate this:
+> // @returns {{ getValue(): string }}
+>
+> // Correct — escaped so Handlebars passes it through:
+> // @returns \{{ getValue(): string \}}
+> ```
+>
+> This applies anywhere in the HTML file: `<script>` blocks, inline styles, markdown documentation sections, and comments.
+
+---
+
 ### Registering nodes for generation
 
 Create a `GenerateNodes.ts` at the root of your `src/` directory. This is the composition root — register every service, template, and node, then call `.generate()` to emit the two Node-RED entry files (`Nodes.js` and `Plugins.js`).

package/build/GenerateNodes.js

@@ -24,6 +24,7 @@ new index_js_1.NodeGenerator("./src/core/")
     .registerTemplate(index_js_1.TimerMetricTemplate)
     .registerTemplate(index_js_2.WebhookTemplate)
     .registerTemplate(index_js_1.UIHelperTemplate)
+    .registerTemplate(index_js_1.ScriptEditorTemplate)
     // nodes
     .registerNode(DelegatedConfigReferenceNode_js_1.DelegatedConfigReferenceNode)
     .registerNode(index_js_1.ConsoleLoggerConfigNode)

package/build/core/ui/template/ScriptEditorTemplate.d.ts

@@ -0,0 +1,5 @@
+import { Template, TemplateDescriptor } from "../../NodeConstructor";
+export declare class ScriptEditorTemplate extends Template {
+    static getTemplateDescriptor(): TemplateDescriptor;
+}
+//# sourceMappingURL=ScriptEditorTemplate.d.ts.map

package/build/core/ui/template/ScriptEditorTemplate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScriptEditorTemplate.d.ts","sourceRoot":"","sources":["../../../../src/core/ui/template/ScriptEditorTemplate.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAA;AAGpE,qBAAa,oBAAqB,SAAQ,QAAQ;WAEhC,qBAAqB,IAAI,kBAAkB;CAQ5D"}

package/build/core/ui/template/ScriptEditorTemplate.html

@@ -0,0 +1,50 @@
+
+<div template-section="onIncludeOnce">
+
+<script src="resources/@theotherwillembotha/node-red-plugincore/editorLanguageExtension.js"></script>
+
+<script type="text/javascript">
+
+    window.PluginCore = window.PluginCore || {};
+
+    /**
+     * PluginCore.createScriptEditor(elementId, template, initialValue)
+     *
+     * Creates a Monaco editor instance with TypeScript-aware diagnostics,
+     * completions, and hover info scoped to the provided type template.
+     *
+     * @param {string} elementId   - DOM id of the container element.
+     * @param {string} template    - TypeScript template string. Use `${script}`
+     *                               as the placeholder for the user's code.
+     * @param {string} initialValue - The starting content of the editor.
+     * @returns \{{ getValue(): string, dispose(): void \}}
+     */
+    PluginCore.createScriptEditor = function(elementId, template, initialValue) {
+        var editorInstance = null;
+        var currentValue = initialValue || '';
+
+        ScriptEditorLanguageManager.createLanguage(monaco, template).then(function(language) {
+            editorInstance = monaco.editor.create(document.getElementById(elementId), {
+                value: currentValue,
+                language: language.getName(),
+                automaticLayout: true,
+                wordBasedSuggestions: 'currentDocument',
+            });
+        });
+
+        return {
+            getValue: function() {
+                return editorInstance ? editorInstance.getValue() : currentValue;
+            },
+            dispose: function() {
+                if (editorInstance) {
+                    editorInstance.dispose();
+                    editorInstance = null;
+                }
+            }
+        };
+    };
+
+</script>
+
+</div>

package/build/core/ui/template/ScriptEditorTemplate.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScriptEditorTemplate = void 0;
+const NodeConstructor_1 = require("../../NodeConstructor");
+const NodeGenerator_1 = require("../../NodeGenerator");
+class ScriptEditorTemplate extends NodeConstructor_1.Template {
+    static getTemplateDescriptor() {
+        return new NodeConstructor_1.TemplateDescriptor("script-editor", ScriptEditorTemplate, NodeGenerator_1.SourceUtility.getSourcePath("/build/", "/src/") + "ScriptEditorTemplate.html", []);
+    }
+}
+exports.ScriptEditorTemplate = ScriptEditorTemplate;

package/build/index.d.ts

@@ -18,6 +18,7 @@ export * from "./core/metrics/template/TimerMetricTemplate";
 export * from "./core/tagging/service/NodeTypeService";
 export * from "./core/tagging/NodeDescriptionDecorator";
 export * from "./core/ui/template/UIHelperTemplate";
+export * from "./core/ui/template/ScriptEditorTemplate";
 export * from "./core/other/node/DelegatedConfigReferenceNode";
 export * from "./core/other/service/InputService";
 export * from "./core/other/service/SettingsService";

package/build/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AAGvC,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,yCAAyC,CAAC;AACxD,cAAc,yCAAyC,CAAC;AAGxD,cAAc,uCAAuC,CAAC;AACtD,cAAc,yCAAyC,CAAC;AACxD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,6CAA6C,CAAC;AAC5D,cAAc,uCAAuC,CAAC;AACtD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,6CAA6C,CAAC;AAG5D,cAAc,wCAAwC,CAAC;AACvD,cAAc,yCAAyC,CAAC;AAGxD,cAAc,qCAAqC,CAAC;AAGpD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,mCAAmC,CAAC;AAClD,cAAc,sCAAsC,CAAC;AACrD,cAAc,qCAAqC,CAAC;AACpD,cAAc,wCAAwC,CAAC;AAGvD,cAAc,yCAAyC,CAAC;AACxD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,6CAA6C,CAAC;AAG5D,cAAc,gDAAgD,CAAC;AAG/D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC;AAChD,cAAc,iCAAiC,CAAC;AAChD,cAAc,6BAA6B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AAGvC,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,yCAAyC,CAAC;AACxD,cAAc,yCAAyC,CAAC;AAGxD,cAAc,uCAAuC,CAAC;AACtD,cAAc,yCAAyC,CAAC;AACxD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,6CAA6C,CAAC;AAC5D,cAAc,uCAAuC,CAAC;AACtD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,6CAA6C,CAAC;AAG5D,cAAc,wCAAwC,CAAC;AACvD,cAAc,yCAAyC,CAAC;AAGxD,cAAc,qCAAqC,CAAC;AACpD,cAAc,yCAAyC,CAAC;AAGxD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,mCAAmC,CAAC;AAClD,cAAc,sCAAsC,CAAC;AACrD,cAAc,qCAAqC,CAAC;AACpD,cAAc,wCAAwC,CAAC;AAGvD,cAAc,yCAAyC,CAAC;AACxD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,6CAA6C,CAAC;AAG5D,cAAc,gDAAgD,CAAC;AAG/D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC;AAChD,cAAc,iCAAiC,CAAC;AAChD,cAAc,6BAA6B,CAAC"}

package/build/index.js

@@ -38,6 +38,7 @@ __exportStar(require("./core/tagging/service/NodeTypeService"), exports);
 __exportStar(require("./core/tagging/NodeDescriptionDecorator"), exports);
 // UI
 __exportStar(require("./core/ui/template/UIHelperTemplate"), exports);
+__exportStar(require("./core/ui/template/ScriptEditorTemplate"), exports);
 // OTHER
 __exportStar(require("./core/other/node/DelegatedConfigReferenceNode"), exports);
 __exportStar(require("./core/other/service/InputService"), exports);

package/build/resources/editorLanguageExtension.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=editorLanguageExtension.d.ts.map

package/build/resources/editorLanguageExtension.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editorLanguageExtension.d.ts","sourceRoot":"","sources":["../../src/resources/editorLanguageExtension.ts"],"names":[],"mappings":""}