node-red-ts

Introduction

This project was born because I hate the overly complex and nested structure of the Node-RED API. I wanted something easy and clean and typescript-based.

This is how a simply node looks like:

1import { AbstractNode } from "@redts/api/AbstractNode";
2import { NodeAPI, NodeMessage } from "node-red";
3
4class DummyNode extends AbstractNode<NodeMessage> {
5	public constructor(RED: NodeAPI) {
6		super(RED);
7	}
8
9	public override async onInput(msg?: NodeMessage): Promise<NodeMessage[]> {
10		console.debug("input");
11
12		this.status = "";
13		return [{ payload: "dummy test" }];
14	}
15
16	public override async onClose(removed: boolean): Promise<void> {
17		console.debug('input');
18
19		this.status = '';
20	}
21}
22
23module.exports = (RED: NodeAPI) => AbstractNode.createNode(RED, DummyNode);

The corresponding HTML file looks a little bit more complex though:

1<!-- definition  -->
2<script type="text/javascript">
3  RED.nodes.registerType("DummyNode", {
4    category: "HHLA",
5    color: "#1eb3fd",
6    icon: "font-awesome/fa-cogs",
7    defaults: {
8      name: { value: "" },
9    },
10    inputs: 1,
11    outputs: 1,
12    outputLabels: [
13      "summary",
14    ],
15    label: function () {
16      return this.name || "Dummy"
17    },
18    paletteLabel: "Dummy",
19    oneditprepare: () => {
20    }
21  });
22</script>
23
24<!-- edit dialog -->
25<script type="text/html" data-template-name="DummyNode">
26  <!-- name -->
27<div class="form-row">
28  <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
29  <input type="text" id="node-input-name" placeholder="Name" />
30</div>
31</script>
32
33
34<!-- help text -->
35<script type="text/html" data-help-name="DummyNode">
36  <p>
37  </p>
38</script>

The HTML structure is based on the Node-RED API. Ideally this would be generated from a type-safe representation, maybe a TS class or another well defined structural language.

The node files are in the "src/nodes" folder of this project.

The project itself is runnable in node-red and fully debuggable in vscode (launch config and all is included).

It looks like this:

A quick-starter template can be found here: https://github.com/mojo2012/node-red-ts-template. Just check it out and run it.

API

The AbstractNode has a bunch of methods that can be used or overriden in your node, for example:

• onInput
• onClose
• setProperty/getProperty
• setStatus
• context
• flowContext
• globalContext

The onInput method is triggered when a message arrives. It returns an array of messages (in the most cases just one). Each message in the array is passed to one output. The number of outputs has to be configured in the HTML file though.

Usage

Create new nodes using this command node node_modules/node-red-ts/tools/create-node.js. This command will create a new node (html and ts file) in the src/nodes folder and also register the node in the package.json.

You can then build and launch node-red and start coding on your new node.

Future plans

• Generate HTML based on a type-safe class
• Add more convenience functionality to the AbstractNode