better build pipeline

build/build.js

@@ -0,0 +1,35 @@
+const fs = require("fs")
+const Mustache = require('mustache');
+
+// Load template
+const htmlTemplate = fs.readFileSync("build/template/editor.html.mustache").toString()
+
+const nodes = fs.readdirSync("src/nodes")
+
+nodes.forEach((e)=>{
+    // Load html parts
+    const helpHtml = fs.readFileSync(`src/nodes/${e}/ui/editor.html`)
+    const editorHtml = fs.readFileSync(`src/nodes/${e}/ui/editor.html`)
+
+    // Load complied editor index js/ts
+    let indexHtml = fs.readFileSync(`dist/nodes/${e}/ui/index.js`).toString()
+    // Cut first 2 lines because typescript inserts some stuff that the browser does not like
+    // TODO: is is ugly but it works
+    const tmp = indexHtml.split("\n")
+    tmp.splice(0,2)
+    indexHtml = tmp.join("\n")
+
+    // Prepare view object to be injected into render
+    const view = {
+        helpHtml,
+        editorHtml,
+        indexHtml,
+        nodeName: e
+    }
+
+    const html = Mustache.render(htmlTemplate, view);
+
+    // Write generated html into dist
+    fs.writeFileSync(`dist/nodes/${e}/${e}.html`,html)
+})
+

build/template/editor.html.mustache

@@ -0,0 +1,11 @@
+<script type="text/javascript">
+{{{indexHtml}}}
+</script>
+
+<script type="text/html" data-template-name="{{nodeName}}">
+{{{editorHtml}}}
+</script>
+
+<script type="text/html" data-help-name="{{nodeName}}">
+{{{helpHtml}}}
+</script>

package.json

@@ -5,7 +5,7 @@
   "main": "index.js",
   "license": "MIT",
   "scripts": {
-    "build": "tsc --build && copyfiles -u 2 './src/nodes/**/*.{png,svg,html}' ./dist/nodes/"
+    "build": "tsc --build && copyfiles -u 2 './src/nodes/**/*.{png,svg}' ./dist/nodes/ && node build/build.js"
   },
   "files": [
     "dist/**/*"
@@ -24,6 +24,7 @@
   "devDependencies": {
     "@types/node": "^14.14.41",
     "@types/node-red": "^1.1.1",
-    "copyfiles": "^2.4.1"
+    "copyfiles": "^2.4.1",
+    "mustache": "^4.2.0"
   }
 }

src/nodes/ts3-config/ts3-config.html

@@ -1,45 +0,0 @@
-<script type="text/javascript">
-    RED.nodes.registerType('ts3-config',{
-        category: 'config',
-        color: '#a6bbcf',
-        defaults: {
-            host: { value: ""},
-            nickname: {value: "ServerQuery"},
-            name: {value: ""}
-        },
-        credentials: {
-            username: {type: "text"},
-            password: {type: "password"}
-        },
-        label: function() {
-            return this.name || "Ts3 Config";
-        }
-    });
-</script>
-
-<script type="text/html" data-template-name="ts3-config">
-    <div class="form-row">
-        <label for="node-input-host"><i class="fa fa-globe"></i> Name</label>
-        <input type="text" id="node-config-input-name">
-    </div>
-    <div class="form-row">
-        <label for="node-input-host"><i class="fa fa-globe"></i> Hostname</label>
-        <input type="text" id="node-config-input-host">
-    </div>
-    <div class="form-row">
-        <label for="node-input-nickname"><i class="fa fa-comment"></i> Nickname</label>
-        <input type="text" id="node-config-input-nickname">
-    </div>
-    <div class="form-row">
-        <label for="node-input-username"><i class="fa fa-user"></i> Username</label>
-        <input type="text" id="node-config-input-username">
-    </div>
-    <div class="form-row">
-        <label for="node-input-password"><i class="fa fa-key"></i> Password</label>
-        <input type="password" id="node-config-input-password">
-    </div>
-</script>
-
-<script type="text/html" data-help-name="ts3-config">
-    <p>Connection config for a Teamspeak 3 server.</p>
-</script>

src/nodes/ts3-config/types.ts

@@ -1,10 +1,9 @@
-import { NodeDef, Node } from "node-red";
+import { NodeDef, Node, EditorNodeProperties } from "node-red";
 import { TeamSpeak } from "ts3-nodejs-library"
 
 export interface Ts3ConfigProps{
     host: string
     nickname: string
-    name: string
 }
 
 export interface Ts3ConfigCreds {
@@ -16,7 +15,8 @@ export interface Ts3ConfigData {
     getConnection(): Promise<TeamSpeak>
 }
 
-
 export interface Ts3ConfigConfig extends NodeDef, Ts3ConfigProps, Ts3ConfigCreds { }
 
 export interface Ts3ConfigNode extends Node<Ts3ConfigCreds>, Ts3ConfigData {}
+
+export interface Ts3ConfigEditorNodeProperties extends EditorNodeProperties,Ts3ConfigProps {}

src/nodes/ts3-config/ui/editor.html

@@ -0,0 +1,20 @@
+<div class="form-row">
+    <label for="node-input-name"><i class="fa fa-globe"></i> Name</label>
+    <input type="text" id="node-config-input-name">
+</div>
+<div class="form-row">
+    <label for="node-input-host"><i class="fa fa-globe"></i> Hostname</label>
+    <input type="text" id="node-config-input-host">
+</div>
+<div class="form-row">
+    <label for="node-input-nickname"><i class="fa fa-comment"></i> Nickname</label>
+    <input type="text" id="node-config-input-nickname">
+</div>
+<div class="form-row">
+    <label for="node-input-username"><i class="fa fa-user"></i> Username</label>
+    <input type="text" id="node-config-input-username">
+</div>
+<div class="form-row">
+    <label for="node-input-password"><i class="fa fa-key"></i> Password</label>
+    <input type="password" id="node-config-input-password">
+</div>

src/nodes/ts3-config/ui/help.html

@@ -0,0 +1 @@
+<p>Connection config for a Teamspeak 3 server.</p>

src/nodes/ts3-config/ui/index.ts

@@ -0,0 +1,20 @@
+import { EditorRED } from "node-red";
+import { Ts3ConfigCreds, Ts3ConfigEditorNodeProperties } from "../types";
+
+declare const RED: EditorRED;
+
+RED.nodes.registerType<Ts3ConfigEditorNodeProperties,Ts3ConfigCreds>('ts3-config',{
+    category: 'config',
+    color: '#a6bbcf',
+    defaults: {
+        host: { value: ""},
+        nickname: {value: "ServerQuery"}
+    },
+    credentials: {
+        username: {type: "text"},
+        password: {type: "password"}
+    },
+    label: function() {
+        return this.name || "Ts3 Config";
+    }
+});

src/nodes/ts3-get/ts3-get.html

@@ -1,32 +0,0 @@
-<script type="text/javascript">
-    RED.nodes.registerType('ts3-get',{
-        category: 'function',
-        color: '#a6bbcf',
-        defaults: {
-            configid: {type:"ts3-config"},
-            selection: {default: ""}
-        },
-        inputs: 1,
-        outputs: 1,
-        label: function() {
-            return this.name || "Ts3 Get";
-        }
-    });
-</script>
-
-<script type="text/html" data-template-name="ts3-get">
-    <div class="form-row">
-        <label for="node-input-configid"><i class="fa fa-database"></i> Connection</label>
-        <input type="text" id="node-input-configid">
-    </div>
-    <div class="form-row">
-        <label for="node-input-configid"><i class="fa fa-database"></i> Connection</label>
-        <select class="form-select" id="node-input-selection">
-            <option selected>Open this select menu</option>
-        </select>
-    </div>
-</script>
-
-<script type="text/html" data-help-name="ts3-get">
-    <p>Get information from a Teamspeak 3 server.</p>
-</script>

src/nodes/ts3-get/types.ts

@@ -1,4 +1,4 @@
-import { NodeDef, Node } from "node-red";
+import { NodeDef, Node, EditorNodeProperties } from "node-red";
 import { Ts3ConfigNode } from "../ts3-config/types";
 
 export interface Ts3GetProps {
@@ -13,6 +13,8 @@ export interface Ts3GetConfig extends NodeDef, Ts3GetProps { }
 
 export interface Ts3GetNode extends Node, Ts3GetData {}
 
+export interface Ts3GetEditorNodeProperties extends EditorNodeProperties,Ts3GetProps {}
+
 export enum GetFunctions {
     CLIENTS_LIST,
 }

src/nodes/ts3-get/ui/editor.html

@@ -0,0 +1,14 @@
+<div class="form-row">
+    <label for="node-input-name"><i class="fa fa-globe"></i> Name</label>
+    <input type="text" id="node-input-name">
+</div>
+<div class="form-row">
+    <label for="node-input-configid"><i class="fa fa-database"></i> Connection</label>
+    <input type="text" id="node-input-configid">
+</div>
+<div class="form-row">
+    <label for="node-input-configid"><i class="fa fa-database"></i> Connection</label>
+    <select class="form-select" id="node-input-selection">
+        <option selected>Open this select menu</option>
+    </select>
+</div>

src/nodes/ts3-get/ui/help.html

@@ -0,0 +1 @@
+<p>Get information from a Teamspeak 3 server.</p>

src/nodes/ts3-get/ui/index.ts

@@ -0,0 +1,18 @@
+import { EditorRED } from "node-red";
+import { Ts3GetEditorNodeProperties } from "../types";
+
+declare const RED: EditorRED;
+
+RED.nodes.registerType<Ts3GetEditorNodeProperties>('ts3-get',{
+    category: 'function',
+    color: '#a6bbcf',
+    defaults: {
+        configid: { type:"ts3-config", value: "" },
+        selection: { value:"" }
+    },
+    inputs: 1,
+    outputs: 1,
+    label: function() {
+        return this.name || "Ts3 Get";
+    }
+});

yarn.lock

@@ -317,6 +317,11 @@ mkdirp@^1.0.4:
   resolved "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz"
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
 
+mustache@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/mustache/-/mustache-4.2.0.tgz#e5892324d60a12ec9c2a73359edca52972bf6f64"
+  integrity sha512-71ippSywq5Yb7/tVYyGbkBggbU8H3u5Rz56fH60jGFgr8uHwxs+aSKeqmluIVzM0m0kB7xQjKS6qPfd0b2ZoqQ==
+
 noms@0.0.0:
   version "0.0.0"
   resolved "https://registry.npmjs.org/noms/-/noms-0.0.0.tgz"