node-red-contrib-typescript 1.0.0

package/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "node-red-contrib-typescript",
+  "version": "1.0.0",
+  "description": "",
+  "author": "kezziny",
+  "license": "ISC",
+  "node-red" : {
+    "nodes": {
+      "instance": "src/instance/instance.js"
+    }
+}
+}

package/src/instance/instance.html

@@ -0,0 +1,270 @@
+<script type="text/javascript">
+    var renderStreamData = function (id, data, node) {
+        let $chart = document.getElementById("data-view-output-chart-" + id);
+        if (!$chart) {
+            const $container = document.getElementById(id)
+            if (!$container) { return }
+            const text = document.createElementNS("http://www.w3.org/2000/svg", 'text')
+            text.setAttribute('id', `data-view-output-text-${id}`)
+            text.setAttribute('x', `0`)
+            text.setAttribute('y', `45`)
+            text.setAttribute('text-anchor', `start`)
+            $container.insertBefore(text, $container.lastChild.nextSibling);
+            // Creat group
+            const group = document.createElementNS("http://www.w3.org/2000/svg", 'g');
+            group.setAttribute('id', `data-view-output-chart-${id}`);
+            group.setAttribute('innerHTML', `data-view-output-chart-${id}`);
+            $container.insertBefore(group, $container.lastChild.nextSibling);
+            $chart = $container
+        }
+
+        let $text = document.getElementById(`data-view-output-text-${id}`);
+        $text.textContent = ''
+        let x = ``
+        if (data.value === undefined) {
+            x = "";
+        } else if (typeof data.value == `object`) {
+            x = JSON.stringify(data.value, null, '  ')
+        } else {
+            x = data.value + ''
+        }
+        var
+            lines = x.split('\n'),
+            tn,
+            ts
+
+        lines.forEach(function (value, index) {
+            let countSpace = value.length - value.trim().length
+            tn = document.createTextNode(value);
+            ts = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
+            ts.setAttribute('dy', (index) ? "1.2em" : "1.2em"); // : 0
+            ts.setAttribute('x', (countSpace * 10) + 25);
+            ts.setAttribute('text-anchor', 'start');
+            ts.setAttribute('fill', '#555');
+            ts.setAttribute('stroke', 'transparent');
+            ts.setAttribute('font-size', `11`)
+            ts.appendChild(tn);
+            $text.append(ts);
+        });
+    }
+
+    function streamSubscriptions(event, data) {
+        if (data.hasOwnProperty("data")) {
+            let node = RED.nodes.node(data.id);
+            renderStreamData(data.id, data.data, node);
+        }
+    }
+    
+    class TSEditor {
+        constructor(node, path) {
+            this.node = node;
+
+            const mainModel = monaco.editor.createModel(
+                node.code || "",
+                'typescript',
+                window.monaco.Uri.parse('file://' + path)
+            );
+
+            this.editor = RED.editor.createEditor({
+                id: "node-input-example-editor",
+                mode: 'ace/mode/typescript',
+                value: node.code || "",
+                theme: "vs-dark",
+                focus: true,
+                model: mainModel,
+            });
+
+            window.monaco.editor.getModels()[0].dispose();
+
+            window.monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+                    "paths": {
+                        "/*": [
+                            "file:///*"
+                        ],
+                        "#*": [
+                            "file:///lib/*"
+                        ]
+                    },
+                    experimentalDecorators: true,
+                    moduleResolution: window.monaco.languages.typescript.ModuleResolutionKind.NodeJs,
+                    allowNonTsExtensions: true,
+                    module: monaco.languages.typescript.ModuleKind.ESNext,
+                    target: monaco.languages.typescript.ScriptTarget.ESNext
+            });
+        }
+
+        recalculateGlobal(subflowId) {
+            let nodes = [];
+            let subflowNodes = [];
+            let workspaces = [];
+            let subflows = [];
+
+            RED.nodes.eachWorkspace(item => workspaces.push(item));
+            RED.nodes.eachSubflow(item => subflows.push(item));
+            RED.nodes.eachNode(item => {
+                if (item.type === "typescript")
+                    nodes.push(item);
+                if (item.type.startsWith("subflow:"))
+                    subflowNodes.push(item);
+            });
+
+            function resolveFlow(id) {
+                let imports = {};
+                nodes
+                    .filter(node => node.z === id)
+                    .forEach(node => {
+                        imports[`/${encodeURIComponent(node.name)}.ts`] = node.code;
+                    });
+                subflowNodes
+                    .filter(node => node.z === id)
+                    .forEach(node => {
+                        let subImports = resolveFlow(node.type.split(":")[1]);
+                        for (let key in subImports) {
+                            imports[`/${encodeURIComponent(node.name)}${key}`] = subImports[key];
+                        }
+                    });
+                return imports;
+            }
+
+
+            let imports = {};
+            workspaces.forEach(workspace => {
+                let subImports = resolveFlow(workspace.id);
+                for (let key in subImports) {
+                    if (key.indexOf("//") === -1)
+                        imports[`/${encodeURIComponent(workspace.label)}${key}`] = subImports[key];
+                }
+            });
+
+            if (subflowId) {
+                let subflow = subflows.find(s => s.id === subflowId);
+                let subImports = resolveFlow(subflowId);
+                for (let key in subImports) {
+                    if (key.indexOf("//") === -1)
+                        imports[`/subflow${key}`] = subImports[key];
+                }
+            }
+
+            for (let key in imports) {
+                window.monaco.languages.typescript.typescriptDefaults.addExtraLib(imports[key], "file://" + key);
+            }
+
+            window.monaco.languages.typescript.typescriptDefaults.addExtraLib(`
+                let node = {
+                    error: (msg:any) => {},
+                    send: (msg:any) => {},
+                    on: (topic:"close"|"input", callback:any) => {},
+                    status: (status:{fill?:"red"|"yellow"|"green"|"blue"|"grey", shape?:"dot"|"ring", text?:string}) => {},
+                    log: (data:any) => {}
+                };
+                let flow = {
+                    get: (topic:string):any => {};
+                    set: (topic:string, value:any) => {};
+                };
+                let global = {
+                    get: (topic:string):any => {};
+                    set: (topic:string, value:any) => {};
+                };
+                let context = {
+                    get: (topic:string):any => {};
+                    set: (topic:string, value:any) => {};
+                };
+                let env = {
+                    get: (topic:string):any => {};
+                    set: (topic:string, value:any) => {};
+                };
+                `, 'global.d.ts'
+            );
+        }
+
+        getCode() {
+            return this.editor.getValue();
+        }
+
+        destroy() {
+            this.editor.destroy();
+        }
+    }
+</script>
+<script type="text/javascript">
+    RED.nodes.registerType('typescript',{
+        category: 'function',
+        color: '#3178c6',
+        defaults: {
+            name: {value:""},
+            outputs:{value:1},
+            code: {value:""},
+        },
+        inputs:1,
+        outputs:1,
+        icon: "function.svg",
+        label: function () {
+            RED.comms.unsubscribe('stream-status-' + this.id, streamSubscriptions);
+            RED.comms.subscribe('stream-status-' + this.id, streamSubscriptions);
+            return this.name || "typescript";
+        },
+        oneditprepare: function() {
+            let path = "/__editor__.tsx";
+
+            let workspaces = [];
+            let subflows = [];
+
+            RED.nodes.eachWorkspace(item => workspaces.push(item));
+            RED.nodes.eachSubflow(item => subflows.push(item));
+
+            let target = this;
+            if (workspaces.some(wf => wf.id === target.z)) {
+                target = workspaces.find(wf => wf.id === target.z);
+                path = `/${target.label}${path}`;
+            } else if (subflows.some(wf => wf.id === target.z)) {
+                target = subflows.find(wf => wf.id === target.z);
+                path = `/subflow${path}`;
+            }
+        
+            this.view = {
+                editor: new TSEditor(this, path),
+            };
+
+            this.view.editor.recalculateGlobal(path.startsWith("/subflow") ? this.z : null);
+
+            $( "#node-input-outputs" ).spinner({
+                min: 0,
+                max: 500,
+                change: function(event, ui) {
+                    var value = parseInt(this.value);
+                    value = isNaN(value) ? 1 : value;
+                    value = Math.max(value, parseInt($(this).attr("aria-valuemin")));
+                    value = Math.min(value, parseInt($(this).attr("aria-valuemax")));
+                    if (value !== this.value) { $(this).spinner("value", value); }
+                }
+            });
+        },
+        oneditsave: function() {
+            this.code = this.view.editor.getCode();
+            this.view.editor.destroy();
+            delete this.view;
+        },
+        oneditcancel: function() {
+            this.view.editor.destroy();
+            delete this.view;
+        }
+    });
+</script>
+
+<script type="text/html" data-template-name="typescript">
+    <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>
+
+    <div class="form-row">
+        <label for="node-input-outputs"><i class="fa fa-random"></i> <span data-i18n="function.label.outputs"></span></label>
+        <input id="node-input-outputs" style="width: 60px;" value="1">
+    </div>
+    
+    <div style="height: calc(100% - 68px); min-height:250px; width: 800px" class="node-text-editor" id="node-input-example-editor"></div>
+</script>
+
+<script type="text/html" data-help-name="typescript">
+    <p>A simple node that converts the message payloads into all lower-case characters</p>
+</script>

package/src/instance/instance.js

@@ -0,0 +1,157 @@
+let registry = {};
+module.exports = function(RED) {
+    var helper = require("../../helper.js");
+    var vm = require("vm");
+
+    function TypescriptInstance(config) {
+        RED.nodes.createNode(this,config);
+        var node = this;
+        node.config = config;
+        node.libs = config.libs;
+        node.modules = config.modules;
+        node.code = config.code;
+
+        var sandbox = helper.createSandbox(RED, node);
+        let moduleErrors = false;
+
+        // region Registry
+        let tabs = {};
+        RED.nodes.eachNode(n => {
+            if (n.type === "tab") tabs[n.id] = n;
+        });
+
+        let path = "/";
+        let segment = RED.nodes.getNode(node.z);
+        if (segment === null) {
+            path = `/${tabs[node.z].label}${path}`;
+        }
+        while(segment !== null) {
+            if (segment.node.name === undefined) {
+                path = `/${segment.node.id}${path}`;
+            } else {
+                path = `/${segment.node.name}${path}`;
+            }
+            let parent = RED.nodes.getNode(segment.node.z);
+            if (parent === null) {
+                path = `/${tabs[segment.node.z].label}${path}`;
+            }
+            segment = parent;
+        }
+        registry[path + node.config.name] = node;
+        node.on("close", () => {delete registry[path + node.config.name]});
+
+        if (node.config.name === "index") {
+            let pkgPath = path.substring(0, path.length - 1);
+            registry[pkgPath] = node;
+            node.on("close", () => {delete registry[pkgPath]});
+        }
+        // endregion
+
+        // region Dependencies
+        let modules = {};
+        let libraryPromises = [];
+        const regexp = /require\("(?<lib>.*)"\)/gm;
+        for (const match of helper.transpile(config.code).matchAll(regexp)) {
+            let target = match[1];
+            if (target.startsWith("/subflow")) {
+                target = path + target.substring(9);
+            }
+            if (target.startsWith("#")) {
+                target = "/lib/" + target.substring(1);
+            }
+            if (target.startsWith("$/")) {
+                target = target.substring(1);
+            }
+            if (target.startsWith("./")) {
+                target = path + target.substring(2);
+            }
+            if (target.endsWith(".pkg")) {
+                target = target.substring(0, target.length - 4) + "/index";
+            }
+
+            if (target.startsWith("/")) {
+                libraryPromises.push(
+                    new Promise(async (resolve, reject) => {
+                        let dependency = registry[target];
+                        for(let i = 0; i < 100 && (dependency === null || dependency === undefined); i++) {
+                            dependency = registry[target];
+                            await new Promise(r => setTimeout(r, 50));
+                        }
+                        if (dependency === null || dependency === undefined) reject(new Error("Dependency not found: " + target));
+                        else {
+                            dependency.loading.then(() => resolve(dependency)).catch(error => reject(error));
+                        }
+                    })
+                );
+            } else {
+                libraryPromises.push(RED.import(target).then(lib => {
+                    modules[target] = lib.default;
+                }).catch(err => {
+                    node.error(RED._("function.error.moduleLoadError",{module:module.spec, error:err.toString()}))
+                    throw err;
+                }));
+            }
+        }
+        // endregion
+
+        node.loading = new Promise((resolve, reject) => {
+            Promise.all(libraryPromises).then(() => {
+                var context = vm.createContext(sandbox);
+                node.exports = context.exports;
+
+                context.require = (target) => {
+                    if (target.startsWith("/subflow")) {
+                        target = path + target.substring(9);
+                    }
+                    if (target.startsWith("#")) {
+                        target = "/lib/" + target.substring(1);
+                    }
+                    if (target.startsWith("$/")) {
+                        target = target.substring(1);
+                    }
+                    if (target.startsWith("./")) {
+                        target = path + target.substring(2);
+                    }
+                    if (target.endsWith(".pkg")) {
+                        target = target.substring(0, target.length - 4) + "/index";
+                    }
+
+                    if (target.startsWith("/")) {
+                        return registry[target].exports;
+                    }
+                    return modules[target];
+                };
+
+                try {
+                    var iniOpt = helper.createVMOpt(node, " setup");
+                    var iniScript = helper.createScript(node, iniOpt, config.code);
+                    context.__initSend__ = function(msgs) { node.send(msgs); };
+                    promise = iniScript.runInContext(context, iniOpt)
+                        .then(() => resolve(node))
+                        .catch(e => {
+                            node.error(e); 
+                            node.error(e.stack); 
+                            node.status({fill: 'red', shape: 'dot', text: 'error'})
+                        });
+        
+                    node.on("close", function() {
+                        while (node.outstandingTimers.length > 0) {
+                            clearTimeout(node.outstandingTimers.pop());
+                        }
+                        while (node.outstandingIntervals.length > 0) {
+                            clearInterval(node.outstandingIntervals.pop());
+                        }
+                    });
+                }
+                catch(err) {
+                    node.error(err);
+                    node.error(err.stack);
+                }
+            }).catch(error => reject(error))
+        }).catch(error => {
+            node.error(error);
+            node.error(error.stack);
+        });
+    }
+    RED.nodes.registerType("typescript", TypescriptInstance);
+}

package/test.d.ts

@@ -0,0 +1,3 @@
+declare namespace Test {
+    declare class Cucc {}
+}