@gregoriusrippenstein/node-red-contrib-nodedev 0.0.6

package/nodes/10-node-factory.html

@@ -0,0 +1,311 @@
+<script type="text/html" data-template-name="NodeFactory">
+    <div class="form-row">
+        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
+        <div style="display: inline-block; width: calc(100% - 105px)"><input type="text" id="node-input-name" placeholder="Name"></div>
+    </div>
+
+    <div class="form-row">
+        <label for="node-input-autoimport">
+                <span>Auto Import of Nodes?</span>
+            </label>
+        <input type="checkbox" id="node-input-autoimport" style="display:inline-block; width:15px; vertical-align:baseline;">
+    </div>
+
+    <div class="form-row">
+        <label for="node-input-nodename"><i class="fa fa-tag"></i> Node Name</label>
+        <div style="display: inline-block; width: calc(100% - 105px)"><input type="text" id="node-input-nodename" placeholder="Node Name">
+        </div>
+    </div> 
+
+    <div class="form-row">
+        <label for="node-input-category"><i class="fa fa-tag"></i> Node Category</label>
+        <div style="display: inline-block; width: calc(100% - 105px)"><input type="text" id="node-input-category" placeholder="Node Category">
+        </div>
+    </div>
+
+    <div id="node-input-row-style-colour" class="form-row">
+        <label>Color</label>
+     </div>
+
+    <div id="node-input-row-icon-picker" class="form-row">
+    </div>
+
+    <div class="form-row">
+        <label for="node-input-hasbutton">
+            <span>Has button?</span>
+        </label>
+        <input type="checkbox" id="node-input-hasbutton" style="display:inline-block; width:15px; vertical-align:baseline;">
+    </div>
+
+    <div class="form-row">
+        <label for="node-input-hasinput">
+            <span>Has input port?</span>
+        </label>
+        <input type="checkbox" id="node-input-hasinput" style="display:inline-block; width:15px; vertical-align:baseline;">
+    </div>
+
+    <div class="form-row">
+        <label for="node-input-outputcount">
+            <i class="fa fa-tag"></i> Output ports
+          </label>
+        <select id="node-input-outputcount"></select>
+    </div>
+
+    <div class="form-row">
+        <label for="node-input-summary">
+          <i class="fa fa-tag"></i>
+          <span>Summary</span>
+        </label>
+        <div style="height: 150px; min-height:150px; max-height: 150px;" class="node-text-editor" id="node-input-summary">
+        </div>
+    </div>
+
+    <div class="form-row">
+        <label for="node-input-description">
+              <i class="fa fa-tag"></i>
+              <span>Description</span>
+            </label>
+        <div style="height: 350px; min-height:350px; max-height: 350px;" class="node-text-editor" id="node-input-description">
+        </div>
+    </div>
+
+</script>
+
+<script type="text/javascript">
+(function () {
+
+   RED.comms.subscribe("nodedev:perform-autoimport-nodes", (event,data) => {
+     if ( data.msg == "autoimport" ) {
+        RED.clipboard.import();
+        
+        setTimeout(() => {
+            $('#red-ui-clipboard-dialog-import-text').val(
+               data.payload
+            ).trigger("paste");
+        }, 300);
+     }
+    });
+
+    function doSubmission(node) {
+
+        var data = {};
+        Object.keys(node._def.defaults).forEach( (nam) => {
+            data[nam] = node[nam]
+        })
+        data["name"] = node.nodename;
+        data["__task"] = "generate_from_templates";
+        
+        $.ajax({
+            url: "NodeFactory/" + node.id,
+            type: "POST",
+            contentType: "application/json; charset=utf-8",
+
+            data: JSON.stringify({
+                node: data,
+            }),
+
+            success: function (resp) {
+                RED.notify("Data sent", {
+                    type: "warning",
+                    id: "FlowHubPush",
+                    timeout: 2000
+                });
+            },
+
+            error: function (jqXHR, textStatus, errorThrown) {
+                if (jqXHR.status == 404) {
+                    RED.notify(node._("common.notification.error", {
+                        message: node._("common.notification.errors.not-deployed")
+                    }), "error");
+                } else if (jqXHR.status == 405) {
+                    RED.notify(node._("common.notification.not_allowed", {
+                        message: node._("inject.errors.not_allowed")
+                    }), "error");
+                } else if (jqXHR.status == 500) {
+                    RED.notify(node._("common.notification.error", {
+                        message: node._("inject.errors.failed")
+                    }), "error");
+                } else if (jqXHR.status == 0) {
+                    RED.notify(node._("common.notification.error", {
+                        message: node._("common.notification.errors.no-response")
+                    }), "error");
+                } else {
+                    RED.notify(node._("common.notification.error", {
+                        message: node._("common.notification.errors.unexpected", {
+                            status: jqXHR.status, message: textStatus
+                        })
+                    }), "error");
+                }
+            }
+        });
+    }
+    
+    RED.nodes.registerType('NodeFactory', {
+        color: "#e5e4ef",
+        category: 'nodedev',
+        defaults: {
+            name: { value: "" },
+            nodename: { value: "" },
+            color: { value: "#e5e4ef" },
+            hasbutton: { value: false },
+            hasinput: { value: true },
+            outputcount: { value: 1 },
+            autoimport: { value: true },
+            category: { value: "" },
+            summary: { value: ""},
+            description: { value: ""},
+            icon: { value: "font-awesome/fa-industry" }
+        },
+        inputs: 1,
+        outputs: 1,
+        icon: "font-awesome/fa-industry",
+        label: function () {
+            return this.name || this._def.paletteLabel;
+        },
+        labelStyle: function () {
+            return this.name ? "node_label_italic" : "";
+        },
+        oneditprepare: function () {
+            const that = this;
+            const stateId = RED.editor.generateViewStateId("node", this, "");
+
+            var sltObj = $('#node-input-outputcount');
+            sltObj.html("");
+            
+            [0,1,2,3,4,5,6,7,8,9,10].forEach( function(v) {
+                sltObj.append($('<option></option>').val(v).html(v));
+            });
+            
+            sltObj.val(this.outputcount || "1");
+
+            var colorPalette = [
+                "#DDAA99",
+                "#3FADB5", "#87A980", "#A6BBCF",
+                "#AAAA66", "#C0C0C0", "#C0DEED",
+                "#C7E9C0", "#D7D7A0", "#D8BFD8",
+                "#DAC4B4", "#DEB887", "#DEBD5C",
+                "#E2D96E", "#E6E0F8", "#E7E7AE",
+                "#E9967A", "#F3B567", "#FDD0A2",
+                "#FDF0C2", "#FFAAAA", "#FFCC66",
+                "#FFF0F0", "#FFFFFF"
+            ];
+
+            RED.editor.colorPicker.create({
+                id: "node-input-colour",
+                value: this.color || "#a4a4a4",
+                defaultValue: "#a4a4a4",
+                palette: colorPalette,
+                cellWidth: 16,
+                cellHeight: 16,
+                cellMargin: 3,
+                none: false,
+                opacity: 1.0,
+                sortPalette: function (a, b) { return a.l - b.l; }
+            }).appendTo("#node-input-row-style-colour");
+
+            $("#node-input-colour").on('change', function(ev) {
+                var colour = $(this).val();
+                var nodeDiv = $('.red-ui-search-result-node')
+                nodeDiv.css('backgroundColor',colour);
+                var borderColor = RED.utils.getDarkerColor(colour);
+                if (borderColor !== colour) {
+                        nodeDiv.css('border-color',borderColor);
+                }
+            });
+
+            this.editorSummary = RED.editor.createEditor({
+               id: 'node-input-summary',
+               mode: 'ace/mode/markdown',
+               value: $("#node-input-summary").val()
+            });
+
+            this.editorDesc = RED.editor.createEditor({
+                id: 'node-input-description',
+                mode: 'ace/mode/markdown',
+                value: $("#node-input-description").val()
+            });
+
+            var node = this;
+            var iconRow = $('#node-input-row-icon-picker');
+            $('<label data-i18n="editor.settingIcon">').appendTo(iconRow);
+
+            var iconButton = $('<button type="button" class="red-ui-button red-ui-editor-node-appearance-button">').appendTo(iconRow);
+            $('<i class="fa fa-caret-down"></i>').appendTo(iconButton);
+            var nodeDiv = $('<div>',{class:"red-ui-search-result-node"}).appendTo(iconButton);
+            var colour = this.color || RED.utils.getNodeColor(node.type, node._def);
+            var icon_url = RED.utils.getNodeIcon(node._def,node);
+            nodeDiv.css('backgroundColor',colour);
+            var borderColor = RED.utils.getDarkerColor(colour);
+            if (borderColor !== colour) {
+                nodeDiv.css('border-color',borderColor);
+            }
+
+            var iconContainer = $('<div/>',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv);
+            RED.utils.createIconElement(icon_url, iconContainer, true);
+
+            iconButton.on("click", function(e) {
+                e.preventDefault();
+                var iconPath;
+                var icon = $("#red-ui-editor-node-icon").val()||"";
+                if (icon) {
+                    iconPath = RED.utils.separateIconPath(icon);
+                } else {
+                    iconPath = RED.utils.getDefaultNodeIcon(node._def, node);
+                }
+                var backgroundColor = RED.utils.getNodeColor(node.type, node._def);
+                if (node.type === "subflow") {
+                    backgroundColor = $("#red-ui-editor-node-color").val();
+                }
+                RED.editor.iconPicker.show(iconButton,backgroundColor,iconPath,false,function(newIcon) {
+                    $("#red-ui-editor-node-icon").val(newIcon||"");
+                    var icon_url = RED.utils.getNodeIcon(node._def,{type:node.type,icon:newIcon});
+                    RED.utils.createIconElement(icon_url, iconContainer, true);
+                });
+            });
+
+            RED.popover.tooltip(iconButton, function() {
+                return $("#red-ui-editor-node-icon").val() || RED._("editor.default");
+            });
+            $('<input type="hidden" id="red-ui-editor-node-icon">').val(node.icon).appendTo(iconRow);
+        },
+        
+        oneditsave: function () {
+            this.color = $('#node-input-colour').val();
+            $("#node-input-summary").val(this.editorSummary.getValue());
+            $("#node-input-description").val(this.editorDesc.getValue());
+            this.icon = $('#red-ui-editor-node-icon').val();
+
+            this.editorSummary.destroy();
+            this.editorDesc.destroy();
+            delete this.editorSummary;
+            delete this.editorDesc;
+        },
+
+        oneditcancel: function () {
+            this.editorSummary.destroy();
+            this.editorDesc.destroy();
+            delete this.editorSummary;
+            delete this.editorDesc;
+        },
+
+        oneditresize: function (size) {
+        },
+
+        button: {
+            enabled: function () {
+                return !this.changed
+            },
+
+            onclick: function () {
+                if (this.changed) {
+                    return RED.notify(RED._("notification.warning", {
+                        message: RED._("notification.warnings.undeployedChanges")
+                    }), "warning");
+                }
+
+                doSubmission(this)
+            }
+        },
+    });
+})();
+</script>

package/nodes/10-node-factory.js

@@ -0,0 +1,375 @@
+module.exports = function (RED) {
+    "use strict";
+
+    var fs = require('fs');
+    var path = require('path');
+    
+    var mustache = require("mustache");
+    var tarStream = require('tar-stream');
+    var streamx = require('streamx');
+    var pakoGzip = require('pako');
+
+    function extractTokens(tokens, set) {
+        set = set || new Set();
+        tokens.forEach(function (token) {
+            if (token[0] !== 'text') {
+                set.add(token[1]);
+                if (token.length > 4) {
+                    extractTokens(token[4], set);
+                }
+            }
+        });
+        return set;
+    }
+
+    function parseContext(key) {
+        var match = /^(flow|global)(\[(\w+)\])?\.(.+)/.exec(key);
+        if (match) {
+            var parts = {};
+            parts.type = match[1];
+            parts.store = (match[3] === '') ? "default" : match[3];
+            parts.field = match[4];
+            return parts;
+        }
+        return undefined;
+    }
+
+    function parseEnv(key) {
+        var match = /^env\.(.+)/.exec(key);
+        if (match) {
+            return match[1];
+        }
+        return undefined;
+    }
+
+    /**
+     * Custom Mustache Context capable to collect message property and node
+     * flow and global context
+     */
+
+    function NodeContext(msg, nodeContext, parent, escapeStrings, cachedContextTokens) {
+        this.msgContext = new mustache.Context(msg, parent);
+        this.nodeContext = nodeContext;
+        this.escapeStrings = escapeStrings;
+        this.cachedContextTokens = cachedContextTokens;
+    }
+
+    NodeContext.prototype = new mustache.Context();
+
+    NodeContext.prototype.lookup = function (name) {
+        // try message first:
+        try {
+            var value = this.msgContext.lookup(name);
+            if (value !== undefined) {
+                if (this.escapeStrings && typeof value === "string") {
+                    value = value.replace(/\\/g, "\\\\");
+                    value = value.replace(/\n/g, "\\n");
+                    value = value.replace(/\t/g, "\\t");
+                    value = value.replace(/\r/g, "\\r");
+                    value = value.replace(/\f/g, "\\f");
+                    value = value.replace(/[\b]/g, "\\b");
+                }
+                return value;
+            }
+
+            // try env
+            if (parseEnv(name)) {
+                return this.cachedContextTokens[name];
+            }
+
+            // try flow/global context:
+            var context = parseContext(name);
+            if (context) {
+                var type = context.type;
+                var store = context.store;
+                var field = context.field;
+                var target = this.nodeContext[type];
+                if (target) {
+                    return this.cachedContextTokens[name];
+                }
+            }
+            return '';
+        }
+        catch (err) {
+            throw err;
+        }
+    }
+
+    NodeContext.prototype.push = function push(view) {
+        return new NodeContext(view, this.nodeContext, this.msgContext, undefined, this.cachedContextTokens);
+    };
+
+    function handleTemplate(msg, node, template) {
+        var promises = [];
+        var tokens = extractTokens(mustache.parse(template));
+        var resolvedTokens = {};
+
+        tokens.forEach(function (name) {
+            var env_name = parseEnv(name);
+            if (env_name) {
+                var promise = new Promise((resolve, reject) => {
+                    var val = RED.util.evaluateNodeProperty(env_name, 'env', node)
+                    resolvedTokens[name] = val;
+                    resolve();
+                });
+                promises.push(promise);
+                return;
+            }
+
+            var context = parseContext(name);
+            if (context) {
+                var type = context.type;
+                var store = context.store;
+                var field = context.field;
+                var target = node.context()[type];
+                if (target) {
+                    var promise = new Promise((resolve, reject) => {
+                        target.get(field, store, (err, val) => {
+                            if (err) {
+                                reject(err);
+                            } else {
+                                resolvedTokens[name] = val;
+                                resolve();
+                            }
+                        });
+                    });
+                    promises.push(promise);
+                    return;
+                }
+            }
+        });
+
+        return Promise.all(promises).then(function () {
+            return mustache.render(template, new NodeContext(msg, node.context(), null, false, resolvedTokens));
+        });
+    }
+
+    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
+                ]
+            ]
+        })
+
+        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: [
+                [
+                ]
+            ]
+        })
+
+        return allNodes;
+    }
+
+    function NodeFactoryFunctionality(config) {
+        RED.nodes.createNode(this, config);
+
+        var node = this;
+        var cfg = config;
+
+        node.on('close', function () {
+            node.status({});
+        });
+
+        node.on("input", function (msg, send, done) {
+            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 nodeImpStr = JSON.stringify(convertToPkgFileNodes(msg, jsData, data));
+
+                            send({ payload: nodeImpStr })
+
+                            if (cfg.autoimport) {
+                                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)
+                        })
+                    }).catch((err) => {
+                        msg.error = err
+                        done(err.message, msg)
+                    })
+                    //send({ payload: jsonString })
+                } catch (err) {
+                    msg.error = err
+                    done(err.message, msg)
+                }
+            } 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",
+                        }[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]];
+                        }
+
+                        msg.payload = JSON.stringify(allFiles);
+                        send(msg)
+
+                        if (cfg.autoimport) {
+                            RED.comms.publish(
+                                "nodedev:perform-autoimport-nodes",
+                                RED.util.encodeObject({
+                                    msg: "autoimport",
+                                    payload: msg.payload,
+                                    topic: msg.topic,
+                                    nodeid: node.id,
+                                    _msg: msg
+                                })
+                            );
+                        }
+
+                        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);
+                } catch (err) {
+                    msg.error = err
+                    done(err.message, msg)
+                }
+            }
+        });
+    }
+
+    RED.nodes.registerType("NodeFactory", NodeFactoryFunctionality);
+
+    RED.httpAdmin.post("/NodeFactory/:id",
+        RED.auth.needsPermission("NodeFactory.write"),
+        (req, res) => {
+            var node = RED.nodes.getNode(req.params.id);
+            if (node != null) {
+                try {
+                    if (req.body && req.params.id) {
+                        var nde = RED.nodes.getNode(req.params.id)
+                        if (nde && nde.type == "NodeFactory") {
+                            node.receive(req.body);
+                        }
+                    } else {
+                        res.sendStatus(404);
+                    }
+                    res.sendStatus(200);
+                } catch (err) {
+                    res.sendStatus(500);
+                    node.error("FlowHub: Submission failed: " +
+                        err.toString())
+                }
+            } else {
+                res.sendStatus(404);
+            }
+        });
+}