chore(templates): update templates for dynamic node generation

Author: alex2844

packages/node-red-builder/src/cli/utils.js

@@ -38,6 +38,16 @@ export function getTemplatesDir() {
 	return path.resolve(import.meta.dir, '../../templates');
 }
 
+/**
+ * Escapes a string for use in a regular expression.
+ *
+ * @param {string} string
+ * @returns {string}
+ */
+function escapeRegExp(string) {
+	return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
 /**
  * Copies a template file to a destination with variable replacements.
  *
@@ -59,7 +69,11 @@ export async function copyTemplate(srcRelativePath, destRelativePath, replacemen
 		let content = await fs.readFile(srcPath, 'utf8');
 
 		for (const [key, value] of Object.entries(replacements)) {
-			content = content.replace(new RegExp(key, 'g'), value);
+			if (value === '') {
+				const regex = new RegExp(`^.*${escapeRegExp(key)}.*(\\r?\\n|$)`, 'gm');
+				content = content.replace(regex, '');
+			} else
+				content = content.replace(new RegExp(escapeRegExp(key), 'g'), value);
 		}
 
 		await fs.writeFile(destPath, content, 'utf8');

packages/node-red-builder/templates/src/locales/en-US/config-node.json

@@ -0,0 +1,12 @@
+{
+	"__NODE_NAME__": {
+		"label": {
+			"name": "Name",
+			"host": "Host",
+			"port": "Port"
+		},
+		"placeholder": {
+			"name": "My Config"
+		}
+	}
+}

packages/node-red-builder/templates/src/locales/en-US/node.json

@@ -2,6 +2,7 @@
 	"__NODE_NAME__": {
 		"label": {
 			"name": "Name",
+			"config": "Config",
 			"action": "Action",
 			"topic": "Topic"
 		},

packages/node-red-builder/templates/src/nodes/config/runtime.js

@@ -0,0 +1,25 @@
+import { BaseConfigNode, registerNode } from 'node-red-builder';
+/** @import { Node, NodeAPI, NodeDef } from 'node-red' */
+
+/**
+ * @typedef {object} __NODE_CLASS__Props
+ * @property {string} name
+ * @property {string} host
+ * @property {number} port
+ */
+
+/** @typedef {NodeDef & __NODE_CLASS__Props} __NODE_CLASS__Config */
+
+/** @extends {BaseConfigNode<__NODE_CLASS__Config>} */
+export class __NODE_CLASS__ extends BaseConfigNode {
+	/**
+	 * @param {Node} node
+	 * @param {__NODE_CLASS__Config} config
+	 * @param {NodeAPI} RED
+	 */
+	constructor(node, config, RED) {
+		super(node, config, RED);
+	}
+}
+
+export default (/** @type {NodeAPI} */ RED) => registerNode(RED, '__PREFIX__-__NODE_NAME__', __NODE_CLASS__);

packages/node-red-builder/templates/src/nodes/config/template.html

@@ -0,0 +1,21 @@
+<div class="form-row">
+	<label for="node-config-input-name">
+		<i class="fa fa-tag"></i>
+		<span data-i18n="__NODE_NAME__.label.name"></span>
+	</label>
+	<input type="text" id="node-config-input-name" data-i18n="[placeholder]__NODE_NAME__.placeholder.name" />
+</div>
+<div class="form-row">
+	<label for="node-config-input-host">
+		<i class="fa fa-globe"></i>
+		<span data-i18n="__NODE_NAME__.label.host"></span>
+	</label>
+	<input type="text" id="node-config-input-host" placeholder="localhost" />
+</div>
+<div class="form-row">
+	<label for="node-config-input-port">
+		<i class="fa fa-random"></i>
+		<span data-i18n="__NODE_NAME__.label.port"></span>
+	</label>
+	<input type="text" id="node-config-input-port" placeholder="8080" />
+</div>

packages/node-red-builder/templates/src/nodes/config/ui.js

@@ -0,0 +1,17 @@
+/** @import { EditorRED } from 'node-red' */
+/** @import { EditorDefaults } from 'node-red-builder/ui' */
+/** @import { __NODE_CLASS__ } from './runtime.js' */
+
+let /** @type {EditorRED} */ RED = /** @type {any} */ (window).RED;
+
+RED.nodes.registerType('__PREFIX__-__NODE_NAME__', {
+	category: 'config',
+	/** @type {EditorDefaults<__NODE_CLASS__['config']>} */ defaults: {
+		name: { value: '' },
+		host: { value: 'localhost', required: true },
+		port: { value: 8080, required: true, validate: RED.validators.number() }
+	},
+	label: function () {
+		return this.name || '__NODE_NAME__';
+	}
+});

packages/node-red-builder/templates/src/nodes/node/template.html

@@ -5,6 +5,7 @@
 	</label>
 	<input type="text" id="node-input-name" data-i18n="[placeholder]__NODE_NAME__.placeholder.name" />
 </div>
+<!-- __CONFIG_ROW__ -->
 <div class="form-row">
 	<label for="node-input-action">
 		<i class="fa fa-tasks"></i>

packages/node-red-builder/templates/src/nodes/node/ui.js

@@ -9,6 +9,7 @@ let /** @type {EditorRED} */ RED = /** @type {any} */ (window).RED;
 RED.nodes.registerType('__PREFIX__-__NODE_NAME__', {
 	category: '__PREFIX__',
 	/** @type {EditorDefaults<__NODE_CLASS__['props']>} */ defaults: {
+		// __CONFIG_ENTRY__
 		name: { value: '' },
 		action: { value: ACTION.APPLY },
 		actionType: { value: 'action' },