@gregoriusrippenstein/node-red-contrib-nodedev 0.1.1 → 0.1.3

package/nodes/10-node-factory.js

@@ -165,62 +165,137 @@ module.exports = function (RED) {
         });
     }
 
-    function convertToPkgFileNodes(msg, jsCtnt, htmlCtnt) {
-        var allNodes = [];
-
-        var secondId = RED.util.generateId();
-
-        allNodes.push({
-            id: RED.util.generateId(),
-            type: "PkgFile",
-            name: msg.node.name + ".js",
-            filename: "nodes/" + msg.node.name.toLowerCase() + ".js",
-            template: jsCtnt,
-            syntax: "mustache",
-            format: "javascript",
-            output: "str",
-            x: 100,
-            y: 50,
-            wires: [[secondId]]
+    function createPluginNodeDefintions(msg, node) {
+        var sidebarHtmlPath = path.join(__dirname, 'templates', 'tmplsidebar.html');
+        var nodeJsPath = path.join(__dirname, 'templates', 'tmplsidebarnode.js');
+        var nodeHtmlPath = path.join(__dirname, 'templates', 'tmplsidebarnode.html');
+
+        var content = {};
+
+        var promises = [
+            handleTemplate(msg, node, fs.readFileSync(sidebarHtmlPath, 'utf8')).then((c) => { content["sbht"] = c }),
+            handleTemplate(msg, node, fs.readFileSync(nodeJsPath, 'utf8')).then((c) => { content["ndjs"] = c }),
+            handleTemplate(msg, node, fs.readFileSync(nodeHtmlPath, 'utf8')).then((c) => { content["ndht"] = c }),
+        ];
+
+        return Promise.all(promises).then(() => {
+            var secondId = RED.util.generateId();
+            var thirdId = RED.util.generateId();
+
+            return [{
+                id: RED.util.generateId(),
+                type: "PkgFile",
+                name: msg.node.name + "Cfg.js",
+                filename: "nodes/" + msg.node.namelwr + ".js",
+                template: content["ndjs"],
+                syntax: "mustache",
+                format: "javascript",
+                output: "str",
+                x: 100,
+                y: 50,
+                wires: [[secondId]]
+            },
+
+            {
+                id: secondId,
+                type: "PkgFile",
+                name: "Sidebar: " + msg.node.name + ".html",
+                filename: "plugins/" + msg.node.namelwr + ".html",
+                template: content["sbht"],
+                syntax: "mustache",
+                format: "html",
+                output: "str",
+                x: 100,
+                y: 100,
+                wires: [[thirdId]]
+            },
+
+            {
+                id: thirdId,
+                type: "PkgFile",
+                name: msg.node.name + "Cfg.html",
+                filename: "nodes/" + msg.node.namelwr + ".html",
+                template: content["ndht"],
+                syntax: "mustache",
+                format: "html",
+                output: "str",
+                x: 100,
+                y: 150,
+                wires: [[]]
+            }]
         })
+    }
+
+    function createSimpleNodeDefintions(msg,node) {
+        var htmlPath = path.join(__dirname, 'templates', 'tmpl.html');
+        var jsPath = path.join(__dirname, 'templates', 'tmpl.js');
+
+        var content = {};
 
-        allNodes.push({
-            id: secondId,
-            type: "PkgFile",
-            name: msg.node.name + ".html",
-            filename: "nodes/" + msg.node.name.toLowerCase() + ".html",
-            template: htmlCtnt,
-            syntax: "mustache",
-            format: "html",
-            output: "str",
-            x: 100,
-            y: 100,
-            wires: [[]]
+        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 }),
+        ];
+
+        return Promise.all(promises).then(() => {
+            var secondId = RED.util.generateId();
+
+            return [{
+                id: RED.util.generateId(),
+                type: "PkgFile",
+                name: msg.node.name + ".js",
+                filename: "nodes/" + msg.node.namelwr + ".js",
+                template: content["jasc"],
+                syntax: "mustache",
+                format: "javascript",
+                output: "str",
+                x: 100,
+                y: 50,
+                wires: [[secondId]]
+            },
+
+            {
+                id: secondId,
+                type: "PkgFile",
+                name: msg.node.name + ".html",
+                filename: "nodes/" + msg.node.namelwr + ".html",
+                template: content["html"],
+                syntax: "mustache",
+                format: "html",
+                output: "str",
+                x: 100,
+                y: 100,
+                wires: [[]]
+            }]
         })
+    }
 
-        return allNodes;
+    function createNodeDefintions(msg, node) {
+        if ( msg.node.isplugin ) {
+            return createPluginNodeDefintions(msg, node)
+        } else {
+            return createSimpleNodeDefintions(msg, node)
+        }
     }
 
     function createManifestFiles(msg, node, nodeDefinitions) {
-        /* ASSUMPTION: assume the .js file is defined first and 
-        then the .html file in the node definitions */
-
         var packageJsonPath = path.join(__dirname, 'templates', 'tmplpackage.json');
         var readmePath = path.join(__dirname, 'templates', 'tmplreadme.md');
         var licensePath = path.join(__dirname, 'templates', 'tmpllicense');
 
-        var pkjsTmpl = fs.readFileSync(packageJsonPath, 'utf8');
-        var rdmeTmpl = fs.readFileSync(readmePath, 'utf8');
-        var lcnsTmpl = fs.readFileSync(licensePath, 'utf8');
-
-        spcRepDict["nodestanza"] = " \"" + msg.node.name.toLowerCase() + "\": \"" + nodeDefinitions[0].filename + "\""
+        /* ASSUMPTION: assume the .js file is defined first and
+            then the .html file in the node definitions */
+        spcRepDict["nodestanza"] = " \"" + msg.node.namelwr + "\": \"" + nodeDefinitions[0].filename + "\""
+        if ( msg.node.isplugin ) {
+            spcRepDict["pluginstanza"] = " \"sidebar-plugin\": \"" + nodeDefinitions[1].filename + "\""
+        }
 
         var content = {};
 
         var promises = [
-            handleTemplate(msg, node, pkjsTmpl).then((c) => { content["pkjs"] = c }),
-            handleTemplate(msg, node, rdmeTmpl).then((c) => { content["rdme"] = c }),
-            handleTemplate(msg, node, lcnsTmpl).then((c) => { content["lcns"] = c }),
+            handleTemplate(msg, node, fs.readFileSync(packageJsonPath, 'utf8')).then((c) => { content["pkjs"] = c }),
+            handleTemplate(msg, node, fs.readFileSync(readmePath, 'utf8')).then((c) => { content["rdme"] = c }),
+            handleTemplate(msg, node, fs.readFileSync(licensePath, 'utf8')).then((c) => { content["lcns"] = c }),
         ];
 
         return Promise.all(promises).then( () => {
@@ -284,43 +359,15 @@ module.exports = function (RED) {
         });
 
         node.on("input", function (msg, send, done) {
+            send({ payload: msg.node })
+            
             if (msg.node && msg.node.__task == "generate_from_templates") {
                 try {
-                    var htmlPath = path.join(__dirname, 'templates', 'tmpl.html');
-                    var jsPath = path.join(__dirname, 'templates', 'tmpl.js');
-
-                    var jsonTmpl = fs.readFileSync(jsPath, 'utf8');
-                    var htmlTmpl = fs.readFileSync(htmlPath, 'utf8');
-
-                    handleTemplate(msg, node, jsonTmpl).then(function (data) {
-                        var jsData = data;
-
-                        handleTemplate(msg, node, htmlTmpl).then(function (data) {
-                            var nodeDef = convertToPkgFileNodes(msg, jsData, data)
-
-                            if (msg.node.createmanifest ) {
-                                /* create the package.json, readme and license files */
-                                createManifestFiles(msg, node, nodeDef).then( (data) => {
-                                    var nodeImpStr = JSON.stringify(data);
-
-                                    send({ payload: nodeImpStr })
-
-                                    RED.comms.publish(
-                                        "nodedev:perform-autoimport-nodes",
-                                        RED.util.encodeObject({
-                                            msg: "autoimport",
-                                            payload: nodeImpStr,
-                                            topic: msg.topic,
-                                            nodeid: node.id,
-                                            _msg: msg
-                                        })
-                                    );
-                                }).catch( (err) => {
-                                    msg.error = err
-                                    done(err.message, msg)
-                                })
-                            } else {
-                                var nodeImpStr = JSON.stringify(nodeDef);
+                    createNodeDefintions(msg,node).then( (nodeDef) => {
+                        if (msg.node.createmanifest ) {
+                            /* create the package.json, readme and license files */
+                            createManifestFiles(msg, node, nodeDef).then( (data) => {
+                                var nodeImpStr = JSON.stringify(data);
 
                                 send({ payload: nodeImpStr })
 
@@ -334,17 +381,31 @@ module.exports = function (RED) {
                                         _msg: msg
                                     })
                                 );
-                            }
-                            done()
-                        }).catch((err) => {
-                            msg.error = err
-                            done(err.message, msg)
-                        })
+                            }).catch( (err) => {
+                                msg.error = err
+                                done(err.message, msg)
+                            })
+                        } else {
+                            var nodeImpStr = JSON.stringify(nodeDef);
+
+                            send({ payload: nodeImpStr })
+
+                            RED.comms.publish(
+                                "nodedev:perform-autoimport-nodes",
+                                RED.util.encodeObject({
+                                    msg: "autoimport",
+                                    payload: nodeImpStr,
+                                    topic: msg.topic,
+                                    nodeid: node.id,
+                                    _msg: msg
+                                })
+                            );
+                        }
+                        done()
                     }).catch((err) => {
                         msg.error = err
                         done(err.message, msg)
                     })
-                    //send({ payload: jsonString })
                 } catch (err) {
                     msg.error = err
                     done(err.message, msg)

package/nodes/templates/tmpl.html

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

package/nodes/templates/tmpl.js

@@ -1,5 +1,5 @@
 module.exports = function(RED) {
-  function {{ node.name }}Functionality(config) {
+  function Core{{ node.name }}Functionality(config) {
     RED.nodes.createNode(this,config);
 
     var node = this;
@@ -24,7 +24,7 @@ module.exports = function(RED) {
     });
   }
 
-  RED.nodes.registerType("{{ node.name }}", {{ node.name }}Functionality);
+  RED.nodes.registerType("{{ node.name }}", Core{{ node.name }}Functionality);
 
 {{ #node.frt2bakcomm }}
   RED.httpAdmin.post("/{{ node.name }}/:id",

package/nodes/templates/tmplpackage.json

@@ -1,28 +1,33 @@
 {
   "name" : "{{__.ocb3}} pname {{__.ccb3}}",
-  "version": "{{__.ocb2}} pversion {{__.ccb2}}",
+  "version": "{{__.ocb3}} pversion {{__.ccb3}}",
   "dependencies": {
   },
 
+  "description": "{{__.ocb3}} pdescription {{__.ccb3}}",
   "keywords": [
     "node-red"
   ],
 
-  "homepage": "https://github.com/{{__.ocb2}} githubowner {{__.ccb2}}/{{__.ocb2}} githubrepo {{__.ccb2}}#readme",
   "license": "Don't do evil.",
-  "author": "Joe Blog <joe.blog@spreads-the.love>",
+  "homepage": "https://github.com/{{__.ocb2}} githubowner {{__.ccb2}}/{{__.ocb2}} githubrepo {{__.ccb2}}#readme",
+  "author": "{{__.ocb3}} pauthorname {{__.ccb3}} <{{__.ocb3}} pauthoremail {{__.ccb3}}>",
   "engines": {
     "node": ">=14"
   },
 
   "node-red" : {
     "version": ">=3.0.0",
+    {{#node.isplugin}}
+    "plugins": {
+       {{{__.pluginstanza}}}
+     },
+    {{/node.isplugin}}
     "nodes": {
       {{{__.nodestanza}}}
     }
   },
 
-  "description": "Description of what these nodes do.",
   "repository": {
     "type": "github",
     "url": "git+https://github.com/{{__.ocb2}} githubowner {{__.ccb2}}/{{__.ocb2}} githubrepo {{__.ccb2}}.git"

package/nodes/templates/tmplsidebar.html

@@ -0,0 +1,138 @@
+<script type="text/javascript">
+(function() {
+   var globalYourConfigNode = null;
+
+   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 === '{{ node.name }}') { 
+                 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!
+         globalYourConfigNode = {
+             id: RED.nodes.id(), // on the server side, this is called RED.util.generateId()
+             _def: RED.nodes.getType("{{ node.name }}Cfg"),
+             type: "{{ node.name }}Cfg",
+             hasUsers: false, 
+             users: [],
+             name: "{{ node.name }}",
+             label: function() { return this.name || "{{ node.name }}"},
+             /* values and data defined by this config node */
+             data: "some default value", // Default data
+         }
+
+         // 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="{{ node.name }}"]').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: "{{ node.name }}",
+         label: "{{ node.namelwr }}", // short name for the tab
+         name: "{{ node.name }}", // long name for the menu
+         content: content,
+         closeable: true,
+         // disableOnEdit: true,
+         enableOnEdit: true,
+         iconClass: "{{{ node.iconclass }}}" // your fontawesome icon
+      });
+
+      ensureYourConfigNodeExists();
+
+      {{#node.hasbutton}}
+      var doSomething = (e) => {
+         if (e) { e.preventDefault(); }
+         RED.notify("Button pressed in the side or action "+
+                    "triggered. Current value: <b>" + globalYourConfigNode.data + "</b>", 
+                    "success");
+      }
+
+      $('#node-input-button').on('click', (e) => {
+         doSomething(e);
+      })
+
+      /* name of action will become "My Sidebar Action", label is generated
+         from action name - see https://nodered.org/docs/api/ui/actions/ */
+      RED.actions.add("{{ node.namelwr }}:my-sidebar-action",function() {
+        doSomething();
+      });
+      {{/node.hasbutton}}
+
+      // At startup load your config node data into the plugin sidebar html elements
+      $("#node-input-data").val(globalYourConfigNode.data);
+
+      // When the user has entered new data in the sidebar, then store it into the config node
+      $("#node-input-data").on("change", function() {
+        ensureYourConfigNodeExists();
+
+        let data = $(this).val();
+
+         if (globalYourConfigNode.data != data) {
+            globalYourConfigNode.data = data;
+            // Since the config node has been updated, the 'Deploy' button should become active
+            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="{{ node.name }}">
+  <div class="form-row">
+    <div style="position: relative; height: 100%; margin: 15px;">
+      <label for="node-input-data" style="margin-top: 15px"><i class="fa fa-cog"></i> Data</label>
+      <input type="text" id="node-input-data" style="width: 100%; margin-top: 30px">
+    </div>
+  </div>
+  
+{{#node.hasbutton}}
+ <div class="form-row">
+   <div style="position: relative; height: 100%; margin: 15px;">
+      <button id="node-input-button" class="success" style="width: 100%; margin-top: 30px">Do something</button>
+   </div>
+ </div>
+{{/node.hasbutton}}
+</script>

package/nodes/templates/tmplsidebarnode.html

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

package/nodes/templates/tmplsidebarnode.js

@@ -0,0 +1,6 @@
+module.exports = function (RED) {
+  function Config{{ node.name }}Functionality(config) {
+    RED.nodes.createNode(this, config)
+  }
+  RED.nodes.registerType('{{ node.name }}Cfg', Config{{ node.name }}Functionality);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name" : "@gregoriusrippenstein/node-red-contrib-nodedev",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "dependencies": {
     "pako":          "latest",
     "tar-stream":    "latest",
@@ -13,7 +13,7 @@
     "node-red", "node development", "introspection", "bootstrapping", "recursion"
   ],
 
-  "homepage": "https://github.com/gorenje/node-red-contrib-nodedev#README.md",
+  "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)",
   "engines": {