@gregoriusrippenstein/node-red-contrib-nodedev 0.4.7 → 0.5.0

package/README.md

@@ -2,9 +2,11 @@
 
 *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.
+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 [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.
 
-So this package tries to provide some supporting nodes for making node development in Node-RED possible and simpler. I have created a set of nodes that fulfill my needs, everything else is bound my imagination. 
+So this package tries to provide some supporting nodes for making node development in Node-RED possible and simpler. I have created a set of nodes that fulfill my needs, everything else is bound my imagination.
+
+Imagine a [continous integration](https://en.wikipedia.org/wiki/Continuous_integration) server combined with an editor. This can be done because Node-RED can both editor code (using something like a function node) and also perform actions such as posting data off to servers (http request node). 
 
 *What do these nodes provide?*
 
@@ -14,14 +16,13 @@ So this package tries to provide some supporting nodes for making node developme
 - A `NodeFactory` node that can create templates for node development. It also converts existing `.tgz` packages to `PkgFile` nodes, meaning that existing packages can easily be ported to this style of development. 
 - A `NpmPublish` allows node packages to be published to a node registry, for example [npmjs](https://www.npmjs.com/). The NpmPublish can also be used to publish to private registries, for example, those based on [Verdaccio](https://verdaccio.org/).
 - A `OTPGenerate` node can be used to generate an One Time Password (OTP) for publishing nodes to registries. For example the NPMjs.com registry.
+- The `NodeDevOps` node controls what is done, i.e., install package locally, commit to GitHub or publish to Npm. For these operations to work, a support [flow](https://flowhub.org/f/d0506e991d512ace) needs to be installed in Node-RED. This can be done using the [FlowHub nodes](https://flows.nodered.org/node/@gregoriusrippenstein/node-red-contrib-flowhub). 
 
 *This is all very confusing?*
 
-Of course, all this is very meta and it gets worse since these nodes are maintained by this [flow](https://flowhub.org/f/b92be5062203ff69). These nodes are creating in Node-RED in a kind of a bootstrapping for further node development in Node-RED.
-
-This is not an inbuilt extension of Node-RED and obviously a more integrated workflow would be simpler. This is a attempt to find a better solution to node development, one by which testing and fixing nodes becomes faster.
+Of course, all this is very meta and it gets worse since these nodes are maintained by this [flow](https://flowhub.org/f/b92be5062203ff69). These nodes are bootstrapped in Node-RED to aid Node-RED node development within Node-RED. On the other hand, Node-RED node [development](https://nodered.org/docs/creating-nodes/) is initially also confusing (requiring at least three different files). That's why the NodeFactory provides templates for various types of nodes.
 
-It also gets more confusing since these nodes will open the Node-RED import dialog with pre-defined nodes. These are generally safe to import since that's how this package creates an initial set of nodes for representing a node package. Also importing nodes for an unknown node package is not recommended unless it happens to be your own package!
+This is not an inbuilt extension of Node-RED and obviously a more integrated workflow would be simpler. This is a attempt to find a better solution to Node-RED node development (*not* NodeJS development), one by which testing and fixing nodes becomes faster because everything is done in Node-RED.
 
 ### Screencast
 

package/nodes/20-pkg-file.html

@@ -71,6 +71,7 @@
                 <option value="lexon">Lexon</option>
                 <option value="liquid">Liquid</option>
                 <option value="lua">Lua</option>
+                <option value="mdx">MDX</option>
                 <option value="mips">MIPS</option>
                 <option value="markdown">Markdown</option>
                 <option value="m3">Modula-3</option>
@@ -103,6 +104,7 @@
                 <option value="hcl">Terraform</option>
                 <option value="twig">Twig</option>
                 <option value="typescript">TypeScript</option>
+                <option value="typespec">TypeSpec</option>
                 <option value="verilog">V</option>
                 <option value="vb">Visual Basic</option>
                 <option value="wgsl">WebGPU Shading Language</option>

package/nodes/lib/tarhelpers.js

@@ -86,6 +86,7 @@ module.exports = (function () {
         "liquid": "liquid",
         "html.liquid": "liquid",
         "lua": "lua",
+        "mdx": "mdx",
         "s": "mips",
         "md": "markdown",
         "markdown": "markdown",
@@ -153,6 +154,10 @@ module.exports = (function () {
         "iecst": "st",
         "iecplc": "st",
         "lc3lib": "st",
+        "TcPOU": "st",
+        "TcDUT": "st",
+        "TcGVL": "st",
+        "TcIO": "st",
         "swift": "swift",
         "tf": "hcl",
         "tfvars": "hcl",
@@ -162,6 +167,7 @@ module.exports = (function () {
         "tsx": "typescript",
         "cts": "typescript",
         "mts": "typescript",
+        "tsp": "typespec",
         "v": "verilog",
         "vh": "verilog",
         "vb": "vb",
@@ -219,6 +225,7 @@ module.exports = (function () {
         "xml": "xml",
         "ts": "typescript",
         "sql": "sql",
+        "sh": "shell",
 
 
         /* binary formats are encoded in base64 */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name" : "@gregoriusrippenstein/node-red-contrib-nodedev",
-  "version": "0.4.7",
+  "version": "0.5.0",
   "dependencies": {
     "pako":          "^2.1.0",
     "tar-stream":    "^3.1.6",
@@ -31,7 +31,8 @@
   "node-red" : {
     "version": ">=3.0.0",
     "plugins": {
-      "nodefactory_sidebar": "plugins/node-factory-sidebar.html"
+      "nodefactory_sidebar": "plugins/node-factory-sidebar.html",
+      "supportdraganddrop":  "plugins/support-drag-and-drop.html"
     },
     "nodes": {
       "nodedevops":     "nodes/05-node-dev-ops.js",

package/plugins/support-drag-and-drop.html

@@ -0,0 +1,142 @@
+<script type="text/javascript">
+(function () {
+    var initialiseConfigNodeOnce = () => {
+        RED.events.off('runtime-state', initialiseConfigNodeOnce);
+
+        let customDropHandler = (event) => {
+            /* for debugging purposes - inspect the original Event to discover the type:
+            * console> window.ddEvent.originalEvent.dataTransfer.items[0].type
+            */
+            window.ddEvent = event
+
+            let itemPtr = event.originalEvent.dataTransfer.items
+            let itemCount = itemPtr.length
+
+            let nodesToBeImported = []
+            let waitingOnNode = 0;
+
+            let file2base64Image = (file, cb) => {
+                var reader = new FileReader();
+                reader.onload = (function (fd) {
+                    return function (e) {
+                        cb(e.target.result);
+                    };
+                })(file);
+                reader.readAsDataURL(file);
+            }
+
+            for (let idx = 0; idx < itemCount; idx++) {
+                let itm = itemPtr[idx]
+
+                if (itm.type.startsWith("image/")) {
+                    waitingOnNode++
+
+                    let file = event.originalEvent.dataTransfer.files[idx]
+                    let yPos = waitingOnNode * 40
+
+                    file2base64Image(file, dataUrl => {
+                        nodesToBeImported.push({
+                            "id": RED.nodes.id(),
+                            "type": "PkgFile",
+                            "name": file.name,
+                            "filename": file.name,
+                            "dirname": "",
+                            "format": "base64",
+                            "syntax": "plain",
+                            "template": dataUrl.replace(/^data:[^;]+;base64,/,""),
+                            "output": "str",
+                            "y": yPos,
+                            "x": 0,
+                            "wires": [[]]
+                        })
+                    })
+                } else if ( (itm.type == "text/xml" ||
+                             itm.type == "text/css" ||
+                             itm.type == "text/plain" ||
+                             itm.type == "text/html" ||
+                             itm.type == "text/x-python-script" ||
+                             itm.type == "text/markdown" ||
+                             itm.type == "application/x-javascript" ||
+                             itm.type == "application/x-yaml" ||
+                             itm.type == "application/x-sh" ||
+                             itm.type == "application/json"
+                           ) && (
+                              event.originalEvent.dataTransfer.files && event.originalEvent.dataTransfer.files[idx]
+                           )) {
+                    /*
+                     * Why is there a checking for existence of file data?
+                     *
+                     * Because text/plain is supported here BUT it's assumed that there is a
+                     * corresponding file, ensure that there is, else ignore text/plain.
+                     * text/plain also occurs without having a file attached.
+                     */
+                    waitingOnNode++
+
+                    let file = event.originalEvent.dataTransfer.files[idx]
+                    let yPos = waitingOnNode * 40
+
+                    let mapMineTypeToFormat = (minetype) => {
+                        let type = minetype.split("/")[1].replace("x-","")
+
+                        return {
+                            "plain":         "text",
+                            "python-script": "python",
+                            "sh":            "shell"
+                        }[type] || type;
+                    }
+
+                    file.arrayBuffer().then( d => {
+                        nodesToBeImported.push({
+                            "id": RED.nodes.id(),
+                            "type": "PkgFile",
+                            "name": file.name,
+                            "filename": file.name,
+                            "dirname": "",
+                            "format": mapMineTypeToFormat(itm.type),
+                            "syntax": "plain",
+                            "template": new TextDecoder().decode(d),
+                            "output": "str",
+                            "y": yPos,
+                            "x": 0,
+                            "wires": [[]]
+                        })
+                    }).catch( ex => { console.log(ex) })
+                }
+            }
+            
+            let checkIfAllIsThere = () => {
+                if (waitingOnNode > 0 && nodesToBeImported.length == waitingOnNode) {
+                    setTimeout(() => {
+                        try {
+                            RED.view.importNodes(nodesToBeImported)
+                        } catch (ex) { /*keep quiet*/ }
+                    }, 400);
+                } else {
+                    setTimeout(checkIfAllIsThere, 400)
+                }
+            }
+
+            if (waitingOnNode > 0) {
+                setTimeout(checkIfAllIsThere, 200)
+                setTimeout(() => { nodesToBeImported.length = waitingOnNode }, 4000)
+            }
+        }
+
+        /*
+         * Because this happens before the workspace is setup, we set the drop listen
+         * when the target becomes available.
+         */
+        let defineCustomDropHandler = () => {
+            if ($('#red-ui-drop-target').length > 0) {
+                $('#red-ui-drop-target').on("drop", customDropHandler)
+            } else {
+                setTimeout(defineCustomDropHandler, 300)
+            }
+        }
+        setTimeout(defineCustomDropHandler, 300)
+    };
+
+    RED.events.on('runtime-state', initialiseConfigNodeOnce);
+})();
+
+</script>