@gregoriusrippenstein/node-red-contrib-nodedev 0.1.6 → 0.1.8

package/README.md

@@ -1,5 +1,8 @@
 ## Node-RED nodes for the development of Node-RED nodes in Node-RED using Node-RED nodes.
 
+
+*** Work In Progress, not stable. ***
+
 *What?*
 
 The idea behind this collection of nodes to democratise the development of Node-RED nodes. Normally the development of your [own nodes](https://nodered.org/docs/creating-nodes/) will require the use of a third-party editor. Something like VSCode or Vim or Atom or god forbid, [Emacs](https://discourse.nodered.org/t/node-red-node-development-in-node-red/81525/2). This requirement makes creating nodes that much harder. So why not create nodes for Node-RED in Node-RED? After all, if you are using Node-RED, you probably understand how to use Node-RED.
@@ -59,10 +62,14 @@ Since all this happens in the browser, there is no leaving Node-RED, making it m
 ### Artifacts
 
 - [Flow that maintains](https://flowhub.org/f/b92be5062203ff69) this codebase
-- [GitHub repo](https://flows.nodered.org/node/@gregoriusrippenstein/node-red-contrib-nodedev)
+- [GitHub repo](https://github.com/gorenje/node-red-contrib-nodedev)
 - [NPMjs node package](https://www.npmjs.com/package/@gregoriusrippenstein/node-red-contrib-nodedev)
 - [Node-RED node package](https://flows.nodered.org/node/@gregoriusrippenstein/node-red-contrib-nodedev)
 
+### Similar Projects
+
+- [node-maker](https://github.com/steveorevo/node-maker) which helps to make UI components for nodes in Node-RED.
+
 ### Outlook
 
 Wherever the road shall lead, there it will go.

package/nodes/10-node-factory.html

@@ -97,21 +97,34 @@
 
 </script>
 
+<script type="text/html" data-help-name="NodeFactory">
+    <p>Generate node templates providing starting points for node development</p>
+    The Node-Factory can be used to create example code for various types of Node-RED nodes.
+</script>
+
 <script type="text/javascript">
 (function () {
 
-   RED.comms.subscribe("nodedev:perform-autoimport-nodes", (event,data) => {
-     if ( data.msg == "autoimport" ) {
-        setTimeout(() => {
-            RED.clipboard.import();
-        
+    RED.comms.subscribe("nodedev:perform-autoimport-nodes", (event,data) => {
+        if ( data.msg == "notify") {
+            RED.notify(data.text, {
+                type:    data.type,
+                id:      data.id || "NodeFactory",
+                timeout: data.timeout || 2000
+            });
+        }
+
+        if ( data.msg == "autoimport" ) {
             setTimeout(() => {
-                $('#red-ui-clipboard-dialog-import-text').val(
-                   data.payload
-                ).trigger("paste");
-            }, 300);
-        },400)
-     }
+                RED.clipboard.import();
+            
+                setTimeout(() => {
+                    $('#red-ui-clipboard-dialog-import-text').val(
+                    data.payload
+                    ).trigger("paste");
+                }, 300);
+            },400)
+        }
     });
 
     function doSubmission(node) {

package/nodes/10-node-factory.js

@@ -5,9 +5,6 @@ module.exports = function (RED) {
     var path = require('path');
     
     var mustache = require("mustache");
-    var tarStream = require('tar-stream');
-    var streamx = require('streamx');
-    var pakoGzip = require('pako');
 
     var spcRepDict = {
         "ocb2": "{{",
@@ -229,16 +226,22 @@ module.exports = function (RED) {
     function createSimpleNodeDefintions(msg,node) {
         var htmlPath = path.join(__dirname, 'templates', 'tmpl.html');
         var jsPath = path.join(__dirname, 'templates', 'tmpl.js');
+        var localeJsonPath = path.join(__dirname, 'templates', 'locale', 'en-US', 'tmpl.json')
+        var localeHtmlPath = path.join(__dirname, 'templates', 'locale', 'en-US', 'tmpl.html')
 
         var content = {};
 
         var promises = [
             handleTemplate(msg, node, fs.readFileSync(htmlPath, 'utf8')).then((c) => { content["html"] = c }),
             handleTemplate(msg, node, fs.readFileSync(jsPath, 'utf8')).then((c) => { content["jasc"] = c }),
+            handleTemplate(msg, node, fs.readFileSync(localeJsonPath, 'utf8')).then((c) => { content["ljsn"] = c }),
+            handleTemplate(msg, node, fs.readFileSync(localeHtmlPath, 'utf8')).then((c) => { content["lhtm"] = c }),
         ];
 
         return Promise.all(promises).then(() => {
             var secondId = RED.util.generateId();
+            var thirdId = RED.util.generateId();
+            var fourthId = RED.util.generateId();
 
             return [{
                 id: RED.util.generateId(),
@@ -253,7 +256,6 @@ module.exports = function (RED) {
                 y: 50,
                 wires: [[secondId]]
             },
-
             {
                 id: secondId,
                 type: "PkgFile",
@@ -265,8 +267,35 @@ module.exports = function (RED) {
                 output: "str",
                 x: 100,
                 y: 100,
+                wires: [[thirdId]]
+            },
+            {
+                id: thirdId,
+                type: "PkgFile",
+                name: "Locale: " + msg.node.name + ".json",
+                filename: "nodes/locales/en-US/" + msg.node.namelwr + ".json",
+                template: content["ljsn"],
+                syntax: "mustache",
+                format: "json",
+                output: "str",
+                x: 120,
+                y: 150,
+                wires: [[fourthId]]
+            },
+            {
+                id: fourthId,
+                type: "PkgFile",
+                name: "Locale: " + msg.node.name + ".html",
+                filename: "nodes/locales/en-US/" + msg.node.namelwr + ".html",
+                template: content["lhtm"],
+                syntax: "mustache",
+                format: "html",
+                output: "str",
+                x: 120,
+                y: 200,
                 wires: [[]]
-            }]
+            }
+            ]
         })
     }
 
@@ -430,76 +459,12 @@ module.exports = function (RED) {
             } else {
                 /* assume that payload is a buffer with a .tgz if not, error out */
                 try {
-                    const extract = tarStream.extract()
-
-                    var allFiles = [];
-
-                    /* 
-                     * there is no indication in a tar file of whether a file is binary or textual.
-                     * we can only make a guess by the extension of the filename.
-                     ***/
-                    var computeFormat = (filename) => {
-                        var ext = filename.split(".").at(-1);
-
-                        return {
-                            "html": "html",
-                            "js": "javascript",
-                            "md": "markdown",
-                            "json": "json",
-                            /* binary formats are encoded in base64 */
-                            "png": "base64",
-                            "tiff": "base64",
-                            "tif": "base64",
-                            "jpg": "base64",
-                            "jpeg": "base64",
-                            "bin": "base64",
-                            "bmp": "base64",
-                            "gif": "base64",
-                        }[ext.toLowerCase()] || "text";
-                    };
-
-                    extract.on('entry', function (header, stream, next) {
-                        // header is the tar header
-                        // stream is the content body (might be an empty stream)
-                        // call next when you are done with this entry
-
-                        var buffer = [];
-
-                        stream.on('data', function (data) {
-                            buffer.push(data)
-                        });
-
-                        stream.on('end', function () {
-                            var frmt = computeFormat(header.name.split("/").at(-1));
-
-                            allFiles.push({
-                                id: RED.util.generateId(),
-                                type: "PkgFile",
-                                name: header.name.split("/").at(-1),
-                                filename: header.name.replace(/^package\//, ''),
-                                template: Buffer.concat(buffer).toString(frmt == "base64" ? 'base64' : 'utf8'),
-                                syntax: "mustache",
-                                format: frmt,
-                                output: "str",
-                                x: 100,
-                                y: 50 * (allFiles.length + 1),
-                                wires: [
-                                    []
-                                ]
-                            })
-
-                            next() // ready for next entry
-                        })
-
-                        stream.resume() // just auto drain the stream
-                    })
-
-                    extract.on('finish', function () {
-                        // all entries read, wire them together
-                        for (var idx = 0; idx < allFiles.length - 1; idx++) {
-                            allFiles[idx].wires = [[allFiles[idx + 1].id]];
-                        }
+                    const onError = (err) => {
+                        msg.error = err;
+                        done("extraction error", msg)
+                    }
 
+                    const onFinish = (allFiles) => {
                         msg.payload = JSON.stringify(allFiles);
                         send(msg)
 
@@ -515,15 +480,9 @@ module.exports = function (RED) {
                         );
 
                         done()
-                    })
-
-                    extract.on('error', function (err) {
-                        msg.error = err;
-                        done("extraction error", msg)
-                    });
-
-                    var stream = streamx.Readable.from(Buffer.from(pakoGzip.inflate(new Uint8Array(msg.payload))))
-                    stream.pipe(extract);
+                    }
+                    
+                    require('./lib/tarhelpers.js').convertTarFile(RED, msg.payload, onFinish, onError)
                 } catch (err) {
                     msg.error = err
                     done(err.message, msg)

package/nodes/lib/tarhelpers.js

@@ -0,0 +1,106 @@
+module.exports = (function () {
+
+    var tarStream = require('tar-stream');
+    var streamx = require('streamx');
+    var pakoGzip = require('pako');
+
+    /*
+     * there is no indication in a tar file of whether a file is binary or textual.
+     * we can only make a guess by the extension of the filename.
+     ***/
+    var computeFormat = (filename) => {
+        var ext = filename.split(".").at(-1);
+
+        return {
+            "html": "html",
+            "js": "javascript",
+            "md": "markdown",
+            "json": "json",
+            "txt": "text",
+            "css": "css",
+            "yaml": "yaml",
+            "yml": "yaml",
+
+            /* binary formats are encoded in base64 */
+            "png": "base64",
+            "tiff": "base64",
+            "tif": "base64",
+            "jpg": "base64",
+            "jpeg": "base64",
+            "bin": "base64",
+            "bmp": "base64",
+            "gif": "base64",
+            "woff2": "base64",
+            "woff": "base64",
+            "ttf": "base64",
+            "mov": "base64",
+            "ico": "base64",
+            "eot": "base64",
+        }[ext.toLowerCase()] || "text";
+    }
+
+    var convertTarFile = (RED, tgzData, onFinish, onError) => {
+        const extract = tarStream.extract()
+
+        var allFiles = [];
+
+        extract.on('entry', function (header, stream, next) {
+            // header is the tar header
+            // stream is the content body (might be an empty stream)
+            // call next when you are done with this entry
+
+            var buffer = [];
+
+            stream.on('data', function (data) {
+                buffer.push(data)
+            });
+
+            stream.on('end', function () {
+                var frmt = computeFormat(header.name.split("/").at(-1));
+
+                allFiles.push({
+                    id: RED.util.generateId(),
+                    type: "PkgFile",
+                    name: header.name.split("/").at(-1),
+                    filename: header.name.replace(/^package\//, ''),
+                    // @ts-ignore
+                    template: Buffer.concat(buffer).toString(frmt == "base64" ? 'base64' : 'utf8'),
+                    syntax: "plain", // not mustache templates, these are files.
+                    format: frmt,
+                    output: "str",
+                    x: 250 * Math.floor(allFiles.length / 40),
+                    y: 50 * (allFiles.length % 40),
+                    wires: [
+                        []
+                    ]
+                })
+
+                next() // ready for next entry
+            })
+
+            stream.resume() // just auto drain the stream
+        })
+
+        extract.on('finish', function () {
+            // all entries read, wire them together
+            for (var idx = 0; idx < allFiles.length - 1; idx++) {
+                allFiles[idx].wires = [[allFiles[idx + 1].id]];
+            }
+
+            onFinish(allFiles)
+        })
+
+        extract.on('error', onError );
+
+        var stream = streamx.Readable.from(Buffer.from(pakoGzip.inflate(new Uint8Array(tgzData))))
+        stream.pipe(extract);
+    }
+
+
+    let exports = {
+        computeFormat: computeFormat,
+        convertTarFile: convertTarFile
+    }
+    
+    return exports;
+})();

package/nodes/node-factory-sidebar-cfg.html

@@ -0,0 +1,22 @@
+<script type="text/javascript">
+(function ($) {
+   RED.nodes.registerType('NodeFactorySidebarCfg', {
+      category: 'config',
+      hasUsers: false,
+      defaults: {
+         pkgname: { value: "node-red-dashboard" },
+         pkgversion: { value: "latest" }
+      },
+      paletteLabel: 'NodeFactorySidebarCfg',
+      label: function () {
+         return "NodeFactorySidebarCfg"
+      }
+  });
+})(jQuery);
+</script>
+
+<!-- The html for the config node info panel (in right sidebar) -->
+<script type="text/x-red" data-template-name="NodeFactorySidebarCfg">
+    <p>Generate nodes for an existing node package.</p>
+   Generate nodes for an existing node package.
+</script>

package/nodes/node-factory-sidebar-cfg.js

@@ -0,0 +1,193 @@
+module.exports = function (RED) {
+    let pacote = require('pacote');
+    let tarHelpers = require('./lib/tarhelpers.js');
+    
+    function ConfigNodeFactorySidebarFunctionality(config) {
+        RED.nodes.createNode(this, config)
+    }
+
+    RED.nodes.registerType('NodeFactorySidebarCfg', ConfigNodeFactorySidebarFunctionality);
+
+    function createDevOpsNode(pkgname, pkgversion, x, y, nodeid) {
+        return {
+            "id": RED.util.generateId(),
+            "type": "NodeDevOps",
+            "name": "",
+            "pname": pkgname,
+            "pversion": pkgversion,
+            "pauthorname": "",
+            "pauthoremail": "",
+            "pdescription": "",
+            "noderedinstall": true,
+            "randompackagename": false,
+            "ignore_package_check": false,
+            "gitcommit": false,
+            "gitcheckforchange": false,
+            "githubowner": "",
+            "githubrepo": "",
+            "githubbranch": "main",
+            "githubauthor": "",
+            "githubauthoremail": "",
+            "githubmessage": "",
+            "npmpublish": false,
+            "npmunpublish": false,
+            "npmotp": "",
+            "x": x - 120,
+            "y": y - 50,
+            "wires": [
+                [nodeid]
+            ]
+        }
+    }
+
+    function createTarballNode(x,y,nodeid) {
+        return {
+            "id": RED.util.generateId(),
+            "type": "NpmTarBall",
+            "name": "",
+            "x": x+150,
+            "y": y+50,
+            "wires": [
+                [nodeid]
+            ]
+        };
+    }
+
+    function createNodeRedInstallNode(x,y) {
+        return {
+            "id": RED.util.generateId(),
+            "type": "NodeRedInstall",
+            "name": "",
+            "x": x+300,
+            "y": y+100,
+            "wires": [
+                []
+            ]
+        }
+    }
+
+    RED.httpAdmin.post("/NodeFactorySidebarCfg",
+        RED.auth.needsPermission("nodedev.write"),
+        (req, res) => {
+            try {
+                if (req.body) {
+                    var msg = req.body;
+                    if ( msg.pkgname && msg.pkgversion ) {
+                        const onFinish = (allFiles) => {
+
+                            /* these are no templates, these are files - no mustache intrepretation */
+                            allFiles.forEach(function(element) {
+                                element.syntax = "plain"
+                            });
+
+                            var lastNode = allFiles[allFiles.length - 1];
+
+                            var nodeDevOp = createDevOpsNode(msg.pkgname, msg.pkgversion, allFiles[0].x, allFiles[0].y, allFiles[0].id)
+                            var nrInstallNode = createNodeRedInstallNode(lastNode.x, lastNode.y)
+                            var tarballNode = createTarballNode(lastNode.x, lastNode.y, nrInstallNode.id)
+
+                            let pkgjson = allFiles.filter( a => {
+                                return a.filename == "package.json"
+                            })[0];
+
+                            if ( pkgjson) {
+                                let ctnt = JSON.parse(pkgjson.template);
+                                nodeDevOp.pversion     = ctnt.version
+                                nodeDevOp.pdescription = ctnt.description || "Empty"
+                                nodeDevOp.pauthorname  = ctnt.author || "Empty"
+                                nodeDevOp.pauthoremail = ctnt.author || "Empty"
+                            }
+
+                            lastNode.wires[0].push(tarballNode.id)
+
+                            allFiles.push(nodeDevOp);
+                            allFiles.push(tarballNode)
+                            allFiles.push(nrInstallNode)
+                            
+                            RED.comms.publish(
+                                "nodedev:perform-autoimport-nodes",
+                                RED.util.encodeObject({
+                                    msg: "autoimport",
+                                    payload: JSON.stringify(allFiles),
+                                })
+                            );
+                        }
+
+                        const onError = (err) => {
+                            RED.comms.publish(
+                                "nodedev:perform-autoimport-nodes",
+                                RED.util.encodeObject({
+                                    msg: "notify",
+                                    text: "Failed to create nodes for " + msg.pkgname + "@" + msg.pkgversion + ": " + err,
+                                    type: "error",
+                                })
+                            );
+                        }
+                        
+                        pacote.manifest(
+                            msg.pkgname + "@" + msg.pkgversion
+                        ).then(manifest => {
+                            RED.comms.publish(
+                                "nodedev:perform-autoimport-nodes",
+                                RED.util.encodeObject({
+                                    msg: "notify",
+                                    text: "Found url for " + msg.pkgname + "@" + msg.pkgversion,
+                                    type: "warning",
+                                })
+                            );
+
+                            import('got').then((module) => {
+                                module.got.get(manifest._resolved,
+                                    {
+                                        timeout: {
+                                            request: 25000,
+                                            response: 25000
+                                        },
+                                        responseType: 'buffer'
+                                    }).then(resp => {
+                                        try {
+                                            tarHelpers.convertTarFile(RED, resp.body, onFinish, onError);
+                                        } catch (err) {
+                                            onError(err)
+                                        }
+                                    }).catch(err => {
+                                        onError(err)
+                                    });
+                            }).catch(err => {
+                                onError(err)
+                            });
+
+                        }).catch(err => {
+                            RED.comms.publish(
+                                "nodedev:perform-autoimport-nodes",
+                                RED.util.encodeObject({
+                                    msg: "notify",
+                                    text: "Failed to retrieve tgz file for " + msg.pkgname + "@" + msg.pkgversion + ": " + err,
+                                    type: "error",
+                                })
+                            );
+                        })
+
+                        res.sendStatus(200);
+                        
+                        RED.comms.publish(
+                            "nodedev:perform-autoimport-nodes",
+                            RED.util.encodeObject({
+                                msg: "notify",
+                                text: "Retrieving " + msg.pkgname + "@" + msg.pkgversion,
+                                type: "warning",
+                            })
+                        );
+                    } else {
+                        res.sendStatus(404);
+                    }
+                } else {
+                    res.sendStatus(405);
+                }
+            } catch (err) {
+                console.error("ERROR", err)
+                res.sendStatus(500);
+            }
+        }
+    );
+}

package/nodes/templates/locale/en-US/tmpl.html

@@ -0,0 +1,4 @@
+<script type="text/html" data-help-name="{{ node.name }}">
+  <p>{{{ node.summary }}}</p>
+  {{{ node.description }}}
+</script>

package/nodes/templates/locale/en-US/tmpl.json

@@ -0,0 +1,24 @@
+{
+  "{{ node.name }}": {
+{{#node.bak2frtcomm}}
+      "notify": {
+         "commfrombackend": "Backend sent something to the frontend - check browser console.",
+         "msgfrombackend": "message from backend"
+  {{ #node.frt2bakcomm }}
+      },
+  {{ /node.frt2bakcomm }}
+  {{ ^node.frt2bakcomm }}
+      }
+  {{ /node.frt2bakcomm }}
+{{/node.bak2frtcomm}}
+
+{{ #node.frt2bakcomm }}
+      "notifyf2b": {
+          "submissionfailed": "submission failed",
+          "buttonpressed": "button pressed on frontend",
+          "success": "Successfully sent something to the backend"
+      }
+{{ /node.frt2bakcomm }}
+
+  }
+}

package/nodes/templates/tmpl.html

@@ -15,7 +15,7 @@
         }),
 
         success: function (resp) {
-          RED.notify("Successfully sent something to the backend", {
+          RED.notify( RED._("{{ node.name}}.notifyf2b.success"), {
             type: "warning",
             id: "{{node.name}}",
             timeout: 2000
@@ -84,7 +84,7 @@
       this.messageFromBackendHandler = (topic,dataobj) => {
         console.log( "here goes the code for handling a message from the backend", topic, dataobj);
 
-        RED.notify("Backend sent something to the frontend - check browser console.", {
+        RED.notify(RED._("{{ node.name}}.notify.commfrombackend"), {
             type: "success",
             id: "{{node.name}}",
             timeout: 2000
@@ -125,7 +125,7 @@
 
         {{ #node.frt2bakcomm }}
         var that = this;
-        sendToBackend(that, {"payload": "button pressed on frontend"})
+        sendToBackend(that, {"payload": RED._("{{ node.name}}.notifyf2b.buttonpressed")})
         {{ /node.frt2bakcomm }}
 
         /* here goes the button code to be executed on click */
@@ -138,13 +138,8 @@
 </script>
 
 <script type="text/html" data-template-name="{{ node.name }}">
-    <div class="form-row">
-        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
-        <input type="text" id="node-input-name" placeholder="Name"/>
-    </div>
-</script>
-
-<script type="text/html" data-help-name="{{ node.name }}">
-  <p>{{{ node.summary }}}</p>
-  {{{ node.description }}}
+  <div class="form-row">
+    <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="node-red:common.label.name"></span></label>
+    <input type="text" id="node-input-name" data-i18n="[placeholder]node-red:common.label.name">
+  </div>
 </script>

package/nodes/templates/tmpl.js

@@ -14,8 +14,8 @@ module.exports = function(RED) {
       {{#node.bak2frtcomm}}
         RED.comms.publish("{{node.name}}:message-from-backend",
                RED.util.encodeObject({
-                    ...msg,
-                    "data": "message from backend",
+                  ...msg,
+                  "data": RED._("{{ node.name}}.notify.msgfrombackend"),
                 })
         );
       {{/node.bak2frtcomm}}
@@ -49,7 +49,7 @@ module.exports = function(RED) {
         } catch (err) {
           console.error(err);
           res.status(500).send(err.toString());
-          node.error("{{ node.name }}: Submission failed: " + err.toString())
+          node.error("{{ node.name }}: " + RED._("{{ node.name }}.notifyf2b.submissionfailed") + ": " + err.toString())
         }
       } else {
         res.sendStatus(404);

package/package.json

@@ -1,34 +1,44 @@
 {
   "name" : "@gregoriusrippenstein/node-red-contrib-nodedev",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "dependencies": {
     "pako":          "latest",
     "tar-stream":    "latest",
     "mustache":      "latest",
     "libnpmpublish": "latest",
-    "streamx":       "latest"
+    "streamx":       "latest",
+    "got":           "latest",
+    "pacote":        "latest"
   },
 
   "keywords": [
-    "node-red", "node development", "introspection", "bootstrapping", "recursion"
+    "node-red", 
+    "node development", 
+    "introspection", 
+    "bootstrapping", 
+    "recursion"
   ],
 
   "homepage": "https://github.com/gorenje/node-red-contrib-nodedev#readme",
   "license": "Don't do evil.",
-  "author": "Gerrit Riessen <does.anyone@spread-the.love> (https://spread-the.love)",
+  "author": "Gerrit Riessen <gerrit@openmindmap.org> (https://spread-the.love)",
   "engines": {
     "node": ">=8"
   },
 
   "node-red" : {
     "version": ">=3.0.0",
+    "plugins": {
+      "nodefactory_sidebar": "plugins/node-factory-sidebar.html"
+    },
     "nodes": {
       "nodedevops":     "nodes/05-node-dev-ops.js",
       "nodefactory":    "nodes/10-node-factory.js",
       "pkgfile":        "nodes/20-pkg-file.js",
       "npmtarball":     "nodes/30-npm-tarball.js",
       "noderedinstall": "nodes/40-node-red-install.js",
-      "npmpublish":     "nodes/50-npm-publish.js"
+      "npmpublish":     "nodes/50-npm-publish.js",
+      "nodefactorycfg": "nodes/node-factory-sidebar-cfg.js"
     }
   },
 

package/plugins/node-factory-sidebar.html

@@ -0,0 +1,188 @@
+<script type="text/javascript">
+(function() {
+   var globalYourConfigNode = null;
+
+   function doSubmission(pkgname,pkgversion) {
+      ensureYourConfigNodeExists();
+
+      $.ajax({
+         url:         "NodeFactorySidebarCfg",
+         type:        "POST",
+         contentType: "application/json; charset=utf-8",
+
+         data: JSON.stringify({
+            pkgname: $("#node-input-nodefactorysidebar-package-name").val(),
+            pkgversion: $("#node-input-nodefactorysidebar-package-version").val()
+         }),
+
+         success: function (resp) {
+            RED.notify("Submission triggered", {
+               type: "warning",
+               id: "NodeFactorySidebar",
+               timeout: 2000
+            });
+         },
+
+         error: function (jqXHR, textStatus, errorThrown) {
+            RED.notify("Submission failed: " + textStatus, {
+               type: "error",
+               id: "NodeFactorySidebar",
+               timeout: 2000
+            });
+            console.log(textStatus,errorThrown )
+         }
+      });      
+   }
+
+   function ensureYourConfigNodeExists() {
+      // This function makes sure there is 1 instance of your config node is available, and that the globalYourConfigNode variable refers to it.
+      // Explained in the next step of this tutorial... --> https://discourse.nodered.org/t/tutorial-create-a-sidebar-plugin-and-persist-the-data-in-a-config-node/82020
+
+      // If we had found it previously, check if it has been deleted by the user behind our back
+      if (globalYourConfigNode !== null) {
+         var configNode = RED.nodes.node(globalYourConfigNode.id);
+         if (configNode === null) { globalYourConfigNode = null; }
+      }
+
+      // If not found previously, let's go find it
+      if (globalYourConfigNode === null) {
+         var configNodes = [];
+         RED.nodes.eachConfig(function(configNode) {
+             if (configNode.type === 'NodeFactorySidebarCfg') { 
+                 configNodes.push(configNode); 
+             }
+         });
+
+         // Make sure we only have 1 config node
+         while (configNodes.length > 1) {
+             var configNode = configNodes.pop();
+             RED.nodes.remove(configNode.id);
+             RED.nodes.dirty(true);
+         }
+
+         // When we found a config node, let's use that one
+         if (configNodes.length === 1) { globalYourConfigNode = configNodes[0]; }
+      }
+
+      // When it doesn't exist yet, create it if required
+      if (globalYourConfigNode === null) {
+         // Remark: since this config node is dynamically created (and only used in this sidebar which isn't another node), the config
+         // node is in fact "unused".  But since we don't want it to appear "unused" in the "config nodes" panel, we need to set hasUsers
+         // to false (see https://github.com/node-red/node-red/blob/master/CHANGELOG.md#0161-maintenance-release).
+         // The hasUsers needs also to be specified in the RED.nodes.registerType statement!
+         let typ = RED.nodes.getType("NodeFactorySidebarCfg");
+
+         globalYourConfigNode = {
+             id: RED.nodes.id(), // on the server side, this is called RED.util.generateId()
+             _def: typ,
+             type: "NodeFactorySidebarCfg",
+             hasUsers: false, 
+             users: [],
+             name: "NodeFactorySidebar",
+             label: function() { return this.name || "NodeFactorySidebar"},
+             /* values and data defined by this config node */
+             pkgname: typ.defaults.pkgname.value, 
+             pkgversion: typ.defaults.pkgversion.value
+         }
+
+         // Add the new config node to the collection of Node-RED nodes
+         RED.nodes.add(globalYourConfigNode);
+
+         // Make sure the "Deploy" button becomes active
+         RED.nodes.dirty(true);
+      }      
+   }
+
+   // Add your plugin as a new tabsheet in the right sidebar AFTER the flow editor is completely started
+   var initialiseConfigNodeOnce = () => {
+      RED.events.off('runtime-state', initialiseConfigNodeOnce);
+
+      // The html content of the sidebar has been specified below as a data-template, from where it can be loaded:
+      var content = $($('script[type="text/x-red"][data-template-name="NodeFactorySidebar"]').i18n().html());
+    
+      // Add a "Your sidebar" tabsheet to the right sidebar panel, in which this sidebar panel can be displayed
+      // --> more details: https://nodered.org/docs/api/ui/sidebar/
+      RED.sidebar.addTab({
+         id: "NodeFactorySidebar",
+         label: "Node Factory", // short name for the tab
+         name: "Node Factory", // long name for the menu
+         content: content,
+         closeable: true,
+         // disableOnEdit: true,
+         enableOnEdit: true,
+         iconClass: "fa fa-industry" // your fontawesome icon
+      });
+
+      ensureYourConfigNodeExists();
+
+      var doSomething = (e) => {
+         if (e) { e.preventDefault(); }
+         doSubmission()
+      }
+
+      $('#node-input-nodefactorysidebar-generate-btn').on('click', doSomething );
+
+      $("#node-input-nodefactorysidebar-package-version").val(globalYourConfigNode.pkgversion);
+
+      $("#node-input-nodefactorysidebar-package-version").on("change", function() {
+         ensureYourConfigNodeExists();
+
+         let data = $(this).val();
+
+         if (globalYourConfigNode.pkgversion != data) {
+           globalYourConfigNode.pkgversion = data;
+           RED.nodes.dirty(true);
+         }
+      })
+      $("#node-input-nodefactorysidebar-package-name").val(globalYourConfigNode.pkgname);
+
+      $("#node-input-nodefactorysidebar-package-name").on("change", function() {
+        ensureYourConfigNodeExists();
+
+        let data = $(this).val();
+
+        if (globalYourConfigNode.pkgname != data) {
+           globalYourConfigNode.pkgname = data;
+           RED.nodes.dirty(true);
+        }
+      })
+
+   };
+
+   RED.events.on('runtime-state', initialiseConfigNodeOnce);
+})();
+</script>
+
+<!-- The html for the right sidebar plugin screen -->
+<script type="text/x-red" data-template-name="NodeFactorySidebar">
+   <div class="form-row" style="margin-left: 10px; margin-top: 30px;">
+      Enter package details here:
+   </div>
+
+  <div class="form-row" style="margin-left: 10px;">
+   <label for="node-input-nodefactorysidebar-package-name">
+      <i class="fa fa-tag"></i>
+      Name
+    </label>
+      <input type="text" id="node-input-nodefactorysidebar-package-name"
+              placeholder="node-red-dashboard">
+   </div>
+
+   <div class="form-row" style="margin-left: 10px;">
+      <label for="node-input-nodefactorysidebar-package-version">
+         <i class="fa fa-tag"></i>
+         Version
+      </label>
+      <input type="text" id="node-input-nodefactorysidebar-package-version"
+           placeholder="3.5.0">
+   </div>
+
+   <div class="form-row">
+      <div style="position: relative; height: 100%; margin: 15px;">
+         <button id="node-input-nodefactorysidebar-generate-btn" 
+                 class="red-ui-button"
+                 style="width: 100%; margin-top: 30px">Generate Nodes</button>
+      </div>
+   </div>
+
+</script>