@gregoriusrippenstein/node-red-contrib-nodedev 0.1.7 → 0.2.0

package/README.md

@@ -62,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.js

@@ -226,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(),
@@ -250,7 +256,6 @@ module.exports = function (RED) {
                 y: 50,
                 wires: [[secondId]]
             },
-
             {
                 id: secondId,
                 type: "PkgFile",
@@ -262,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: [[]]
-            }]
+            }
+            ]
         })
     }
 

package/nodes/20-pkg-file.html

@@ -47,6 +47,39 @@
 </script>
 
 <script type="text/javascript">
+(function(){
+
+    var returnInfo = (that) => {
+        const escapeHTML = str =>
+            str.replace(
+                /[&<>'"]/g,
+                tag =>
+                ({
+                    '&': '&amp;',
+                    '<': '&lt;',
+                    '>': '&gt;',
+                    "'": '&#39;',
+                    '"': '&quot;'
+                }[tag] || tag)
+            );
+
+        switch(that.format) {
+            case 'markdown':
+            case 'text':
+                return that.template
+                
+            case "json":
+            case "yaml":
+            case "javascript":
+            case "css":
+                return ["```" + that.format, that.template, "```"].join("\n")
+
+            case "html":
+                return ["```" + that.format, escapeHTML(that.template), "```"].join("\n")
+        }
+        return ""
+    };
+
     RED.nodes.registerType('PkgFile',{
         color:"#e5e4ef",
         category: 'nodedev',
@@ -58,15 +91,20 @@
             template: {value:""},
             output: {value:"str"},
         },
+
         inputs:1,
         outputs:1,
         icon: "font-awesome/fa-file-o",
+        info: function() { return returnInfo(this) },
+
         label: function() {
             return this.name || this.filename || this._def.paletteLabel;
         },
+
         labelStyle: function() {
             return this.name?"node_label_italic":"";
         },
+
         oneditprepare: function() {
             const that = this;
             const stateId = RED.editor.generateViewStateId("node", this, "");
@@ -132,4 +170,5 @@
             this.editor.resize();
         }
     });
+})();
 </script>

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

@@ -66,6 +66,20 @@ module.exports = function (RED) {
         }
     }
 
+    function createGroup(pkgname, pversion, allFiles) {
+        return {
+            "id": RED.util.generateId(), 
+             "type": "group",
+             "name": "Package: " + pkgname + "@" + pversion,
+             "style": {
+                "label": true,
+                "label-position": "ne",
+                "color": "#001f60"
+            },
+            "nodes": allFiles.map( d => d.id )
+        }
+    }
+
     RED.httpAdmin.post("/NodeFactorySidebarCfg",
         RED.auth.needsPermission("nodedev.write"),
         (req, res) => {
@@ -101,9 +115,13 @@ module.exports = function (RED) {
                             lastNode.wires[0].push(tarballNode.id)
 
                             allFiles.push(nodeDevOp);
-                            allFiles.push(tarballNode)
-                            allFiles.push(nrInstallNode)
-                            
+                            allFiles.push(tarballNode);
+                            allFiles.push(nrInstallNode);
+
+                            allFiles = [
+                                createGroup(msg.pkgname, nodeDevOp.pversion || msg.pkgversion, allFiles)
+                            ].concat(allFiles);
+
                             RED.comms.publish(
                                 "nodedev:perform-autoimport-nodes",
                                 RED.util.encodeObject({

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,45 @@
+{
+  "{{ node.name }}": {
+{{#node.bak2frtcomm}}
+      "label": {
+         "commfrombackend": "Backend sent something to the frontend - check browser console.",
+         "msgfrombackend": "message from backend"
+  {{ #node.frt2bakcomm }}
+         ,
+          "submissionfailed": "submission failed",
+          "buttonpressed": "button pressed on frontend",
+          "success": "Successfully sent something to the backend"
+  {{ /node.frt2bakcomm }}
+      },
+{{/node.bak2frtcomm}}
+
+{{^node.bak2frtcomm}}
+  {{#node.frt2bakcomm }}
+      "label": {
+          "submissionfailed": "submission failed",
+          "buttonpressed": "button pressed on frontend",
+          "success": "Successfully sent something to the backend"
+      },
+  {{/node.frt2bakcomm }}
+{{/node.bak2frtcomm}}
+
+{{^node.bak2frtcomm}}
+  {{^node.frt2bakcomm }}
+    "label": {
+      "hello": "world"
+    },
+  {{/node.frt2bakcomm }}
+{{/node.bak2frtcomm}}
+
+    "errors": {
+
+    },
+    "tip": {
+
+    },
+    "status": {
+      "waiting": "Waiting for Godot",
+      "timeout": "No more time to waiting"
+    }
+  }
+}

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}}.label.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}}.label.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}}.label.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}}.label.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 }}.label.submissionfailed") + ": " + err.toString())
         }
       } else {
         res.sendStatus(404);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name" : "@gregoriusrippenstein/node-red-contrib-nodedev",
-  "version": "0.1.7",
+  "version": "0.2.0",
   "dependencies": {
     "pako":          "latest",
     "tar-stream":    "latest",

package/plugins/node-factory-sidebar.html

@@ -11,8 +11,8 @@
          contentType: "application/json; charset=utf-8",
 
          data: JSON.stringify({
-            pkgname: $("#node-input-nodefactorysidebar-package-name").val(),
-            pkgversion: $("#node-input-nodefactorysidebar-package-version").val()
+            pkgname: $("#node-input-nodefactorysidebar-package-name").val().trim(),
+            pkgversion: $("#node-input-nodefactorysidebar-package-version").val().trim()
          }),
 
          success: function (resp) {
@@ -104,8 +104,8 @@
       // --> 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
+         label: "Pkg Import", // short name for the tab
+         name: "Package Import", // long name for the menu
          content: content,
          closeable: true,
          // disableOnEdit: true,
@@ -122,19 +122,17 @@
 
       $('#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;
+           globalYourConfigNode.pkgversion = data.trim();
            RED.nodes.dirty(true);
          }
       })
-      $("#node-input-nodefactorysidebar-package-name").val(globalYourConfigNode.pkgname);
+      $("#node-input-nodefactorysidebar-package-version").val(globalYourConfigNode.pkgversion);
 
       $("#node-input-nodefactorysidebar-package-name").on("change", function() {
         ensureYourConfigNodeExists();
@@ -142,11 +140,11 @@
         let data = $(this).val();
 
         if (globalYourConfigNode.pkgname != data) {
-           globalYourConfigNode.pkgname = data;
+           globalYourConfigNode.pkgname = data.trim();
            RED.nodes.dirty(true);
         }
       })
-
+      $("#node-input-nodefactorysidebar-package-name").val(globalYourConfigNode.pkgname);
    };
 
    RED.events.on('runtime-state', initialiseConfigNodeOnce);
@@ -156,6 +154,12 @@
 <!-- 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;">
+      Import <a href="https://npmjs.com" target=_blank>npmJs.com</a> packages as a flow. packages
+      are imported as a collection of PkgFile nodes. This can help to learn from other
+      peoples experiences and code.
+   </div>
+
+   <div class="form-row" style="margin-left: 10px;">
       Enter package details here:
    </div>
 
@@ -181,7 +185,7 @@
       <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>
+                 style="width: 100%; margin-top: 30px">Import Package</button>
       </div>
    </div>