Error when updating the last version

[Lilyanov]

I have the following error when I updated the latest version of the library:

core.js:17901 ERROR Error: Uncaught (in promise): ReferenceError: regeneratorRuntime is not defined
ReferenceError: regeneratorRuntime is not defined
at rete.esm.js:595
at rete.esm.js:612
at Module../node_modules/rete/build/rete.esm.js (rete.esm.js:682)
at webpack_require (bootstrap:83)
at Module../src/app/workflows/views/version/rete/components/dev-ops-component-view.ts (dev-ops-component-view.ts:1)
at webpack_require (bootstrap:83)
at Module../src/app/workflows/views/version/workflow-version.component.ts (workflows-workflows-module.js:65073)
at webpack_require (bootstrap:83)
at Module../src/app/workflows/views/index.ts (index.ts:1)
at webpack_require (bootstrap:83)
at resolvePromise (zone.js:814)
at resolvePromise (zone.js:771)
at zone.js:873
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:19821)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
at drainMicroTaskQueue (zone.js:595)

I am using it with angular 7, es6. Do you have any suggestions ?

[Ni55aN]

You need a polyfill

https://forum.adonisjs.com/t/regeneratorruntime-is-not-defined-angular-6/2451

[cvisl]

@Ni55aN I can't seem to get that working with npm, webpack and awesome-typescript-loader. Is there another way to include this? I have the same issue, how do I add the polyfill with the npm, webpack, awesome-typescript-combination?

[cvisl]

@Ni55aN My apologies, I seem to have added the babelpolyfill after the Rete import, now that I placed it in front of it it seems to do something:
Uncaught TypeError: Cannot read property 'name' of undefined
at NodeEditor.use (rete.esm.js:797)
at Object../src/general_ui/main.ts (main.ts:29)
at webpack_require (bootstrap:19)
at bootstrap:83
at bootstrap:83
at webpackUniversalModuleDefinition (universalModuleDefinition:7)
at universalModuleDefinition:10
use @ rete.esm.js:797
./src/general_ui/main.ts @ main.ts:29
webpack_require @ bootstrap:19
(anonymous) @ bootstrap:83
(anonymous) @ bootstrap:83
webpackUniversalModuleDefinition @ universalModuleDefinition:7
(anonymous) @ universalModuleDefinition:10
vue.runtime.esm.js:8010

But that is not related to this problem. If I can't figure this one out I might make another issue on that.

[Ni55aN]

@blauwepiet you can import the polyfill package into your entry script

import "@babel/polyfill";

or install this plugin

https://babeljs.io/docs/en/babel-polyfill

[Ni55aN]

@blauwepiet how do you import the Rete's plugins?

[cvisl]

@Ni55aN Like this:

import * as Rete from 'rete';
import ConnectionPlugin from 'rete-connection-plugin';
import VueRenderPlugin from 'rete-vue-render-plugin';

[Ni55aN]

There are some differences in import of plugins. Plugins that built with rete-cli@0.5.0 must be imported as follow:

import ConnectionPlugin from 'rete-connection-plugin';

Older builds:

import * as VueRenderPlugin from 'rete-vue-render-plugin';

[Ni55aN]

@blauwepiet so latest version of VueRenderPlugin built using rete-cli@0.3.0.

I'm going to build all plugins with latest CLI to provide all types of bundes (UMD, CommonJS and ESM)

In other words: importing packages built via CLI below version 0.5.0 you always import the UMD module, so

import * as Smth from 'rete-smth-plugin';

will return default export

[cvisl]

@Ni55aN now I import it as follows and everything seems to be importing correctly:

import * as Rete from 'rete';
import ConnectionPlugin from 'rete-connection-plugin';
import * as VueRenderPlugin from 'rete-vue-render-plugin';

but now the rete node editor element has a height 0?
This is the element I am adding to my html:

<div id="rete" class="bode-editor"></div>

and this is the typescript source, made with the "how to get started" code in the docs:

import "@babel/polyfill";

import * as Rete from 'rete';
import ConnectionPlugin from 'rete-connection-plugin';
import * as VueRenderPlugin from 'rete-vue-render-plugin';

const numSocket = new Rete.Socket('Number value');

class NumComponent extends Rete.Component {
    constructor(){
        super('Number');
    }

    builder(node) {
        let out = new Rete.Output('Number', 'Number',numSocket);

        node.addOutput(out);
    }

    worker(node, inputs, outputs){
        outputs[0] = node.data.num;
    }
}

const container : HTMLElement = document.querySelector('#rete');
const editor = new Rete.NodeEditor('demo@0.1.0', container);

editor.use(ConnectionPlugin)
editor.use(VueRenderPlugin)

const numComponent = new NumComponent();
editor.register(numComponent);

const engine = new Rete.Engine('demo@0.1.0');
editor.register(numComponent);

editor.on('process nodecreated noderemoved connectioncreated connectionremoved', async () => {
    await engine.abort();
    await engine.process(editor.toJSON());
});

[Ni55aN]

@blauwepiet parent HTML element of bode-editor must have a specific height and width

[cvisl]

I can't get anything to work... Fixed the height, nothing is showing.

Tried the codepen examples, get errors all over the place of undefined variables. For example the data-flow codepen example:

var VueNumControl = {
  props: ['readonly', 'emitter', 'ikey', 'getData', 'putData'],
  template: '<input type="number" :readonly="readonly" :value="value" @input="change($event)" @dblclick.stop=""/>',
  data() {
    return {
      value: 0,
    }
  },
  methods: {
    change(e){
      this.value = +e.target.value;
      this.update();
    },
    update() {
      if (this.ikey)
        this.putData(this.ikey, this.value)
      this.emitter.trigger('process');
    }
  },
  mounted() {
    this.value = this.getData(this.ikey);
  }
}

class NumControl extends Rete.Control {

  constructor(emitter, key, readonly) {
    super(key);
    this.component = VueNumControl;
    this.props = { emitter, ikey: key, readonly };
  }

  setValue(val) {
    this.vueContext.value = val;
  }
}

Rete.control doesn't have a component variable where you put the vuenumcontrol in. And when I look at the source I also don't find this component variable in the Rete.control class:

import { Node } from './node';

export class Control {

    constructor(key) {
        if (this.constructor === Control)
            throw new TypeError('Can not construct abstract class');
        if (!key)
            throw new Error('The key parameter is missing in super() of Control ');

        this.key = key;
        this.data = {};
        this.parent = null;
    }

    getNode() {
        if (this.parent === null)
            throw new Error("Control isn't added to Node/Input");   
        
        return this.parent instanceof Node ? this.parent : this.parent.node;
    }

    getData(key) {
        return this.getNode().data[key];
    }

    putData(key, data) {
        this.getNode().data[key] = data;
    }  
}

I think I am missing a lot of details here? I'd love to give Rete a try because I see potential but I don't know where to start when the examples are not working and the documentation isn't very clear.

[cvisl]

@Ni55aN I now managed to get it running partially by filling in the blanks and defining the variables as any. But it only renders the nodes but not the control values because of this:

vue.runtime.esm.js:587 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

found in

---> <Anonymous>
       <Root>

Sorry for my inexperience with this all but I thought I would've been able to build it all in Typescript without too much external components like Vue. How can I build these Vue templates?

[Ni55aN]

@blauwepiet to avoid this issue you should to compile Vue templates in runtime or use Vue.js loader for single file components (it is Vue.js specific trick)

retejs/examples#9 (comment)

[cvisl]

@Ni55aN thanks for the tip, that does take away the vue warning, but I still don't have any in and output fields in my nodes. Looks like Vue is still not building the templates. This is my typescript:

import "@babel/polyfill";

import Vue from 'vue/dist/vue.esm.js'

import * as Rete from 'rete';
import * as ConnectionPlugin from 'rete-connection-plugin';
import * as ContextMenuPlugin from 'rete-context-menu-plugin';
import AreaPlugin from 'rete-area-plugin';
import HistoryPlugin from 'rete-history-plugin';
import * as CommentPlugin from 'rete-comment-plugin';

import * as VueRenderPlugin from 'rete-vue-render-plugin';

var numSocket = new Rete.Socket('Number value');

const VueNumControl = Vue.component('num', {
  props: ['readonly', 'emitter', 'ikey', 'getData', 'putData'],
  template: '<input type="number" :readonly="readonly" :value="value" @input="change($event)" @dblclick.stop=""/>',
  data() {
    return {
      value: 0,
    }
  },
  methods: {
    change(e){
      this.value = +e.target.value;
      this.update();
    },
    update() {
      if (this.ikey)
        this.putData(this.ikey, this.value)
      this.emitter.trigger('process');
    }
  },
  mounted() {
    this.value = this.getData(this.ikey);
  }
});

class NumControl extends Rete.Control {

  component: any;
  props: any;
  vueContext: any;

  constructor(emitter, key, readonly) {
    super(key);
    this.component = VueNumControl;
    this.props = { emitter, ikey: key, readonly };
  }

  setValue(val) {
    this.vueContext.value = val;
  }
}

class NumComponent extends Rete.Component {

    constructor(){
        super("Number");
    }

    builder(node) {
        var out1 = new Rete.Output('num', "Number", numSocket);

        return node.addControl(new NumControl(this.editor, 'num', false)).addOutput(out1);
    }

    worker(node, inputs, outputs) {
        outputs['num'] = node.data.num;
    }
}

class AddComponent extends Rete.Component {
    constructor(){
        super("Add");
    }

    builder(node) {
        var inp1 = new Rete.Input('num1',"Number", numSocket);
        var inp2 = new Rete.Input('num2', "Number2", numSocket);
        var out = new Rete.Output('num', "Number", numSocket);

        inp1.addControl(new NumControl(this.editor, 'num1', false))
        inp2.addControl(new NumControl(this.editor, 'num2', false))

        return node
            .addInput(inp1)
            .addInput(inp2)
            .addControl(new NumControl(this.editor, 'preview', true))
            .addOutput(out);
    }

    worker(node, inputs, outputs) {
        var n1 = inputs['num1'].length?inputs['num1'][0]:node.data.num1;
        var n2 = inputs['num2'].length?inputs['num2'][0]:node.data.num2;
        var sum = n1 + n2;
        
        var ncomp: NumControl = <NumControl>this.editor.nodes.find(n => n.id == node.id).controls.get('preview');
        ncomp.setValue(sum)
        outputs['num'] = sum;
    }
}

(async () => {
    var container : HTMLElement = document.querySelector('#rete');
    var components = [new NumComponent(), new AddComponent()];
    
    var editor = new Rete.NodeEditor('demo@0.1.0', container);
    editor.use(ConnectionPlugin.default);
    editor.use(VueRenderPlugin);
    editor.use(ContextMenuPlugin);
    editor.use(AreaPlugin);
    editor.use(CommentPlugin);
    editor.use(HistoryPlugin);

    var engine = new Rete.Engine('demo@0.1.0');
    
    components.map(c => {
        editor.register(c);
        engine.register(c);
    });

    var n1 = await components[0].createNode({num: 2});
    var n2 = await components[0].createNode({num: 0});
    var add = await components[1].createNode();

    n1.position = [80, 200];
    n2.position = [80, 400];
    add.position = [500, 240];
 

    editor.addNode(n1);
    editor.addNode(n2);
    editor.addNode(add);

    editor.connect(n1.outputs.get('num'), add.inputs.get('num1'));
    editor.connect(n2.outputs.get('num'), add.inputs.get('num2'));


    editor.on('process nodecreated noderemoved connectioncreated connectionremoved', async () => {
      console.log('process');
        await engine.abort();
        await engine.process(editor.toJSON());
    });

    editor.view.resize();
    AreaPlugin.zoomAt(editor);
    editor.trigger('process');
})();

And this gives me the resulting node tree without ins and outputs:

There are no errors or warnings, it just doesn't make any new html elements in the nodes which does happen in the codepen examples.

[cvisl]

This is what I get in the console:

16:07:51.578 localhost/:2 Active resource loading counts reached a per-frame limit while the tab was in background. Network requests will be delayed until a previous loading finishes, or the tab is brought to the foreground. See https://www.chromestatus.com/feature/5527160148197376 for more details
16:07:51.812 main.ts:142 process
16:07:52.338 vue.esm.js:9012 Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools
16:07:52.339 vue.esm.js:9023 You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
16:07:52.339 vue.runtime.esm.js:8364 Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools
16:07:52.340 vue.runtime.esm.js:8375 You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
16:07:52.340 vue.runtime.esm.js:8010 Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools
16:07:52.341 vue.runtime.esm.js:8021 You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
16:07:52.376 content.min.js:2 [Deprecation] Element.createShadowRoot is deprecated and will be removed in M73, around March 2019. Please use Element.attachShadow instead. See https://www.chromestatus.com/features/4507242028072960 for more details.
(anonymous) @ content.min.js:2
16:07:52.386 favicon.ico:1 GET http://localhost:8000/favicon.ico 404 (Not Found)
16:07:52.399 content.min.js:1 XHR finished loading: GET "chrome-extension://mgijmajocgfcbeboacabfgobmjgjcoja/content.min.css".
u @ content.min.js:1
y @ content.min.js:1
(anonymous) @ content.min.js:18
(anonymous) @ content.min.js:18

[Ni55aN]

@blauwepiet how do you build your project?

[Ni55aN]

I see duplicate logs You are running Vue in development mode from vue.runtime.esm.js

[cvisl]

npm packag.json, webpack conf and tsconfig are as follows:

npm:

{
  "name": "nodebasedvis",
  "version": "0.0.1",
  "description": "A node-based visualization platform.",
  "author": "Casper van Leeuwen",
  "private": "true",
  "keywords": [
    "visualization",
    "nodebasedinterface"
  ],
  "scripts": {
    "prepare": "webpack"
  },
  "devDependencies": {
    "awesome-typescript-loader": "^5.2.1",
    "typescript": "^3.2.4",
    "uglifyjs-webpack-plugin": "^2.1.1",
    "webpack": "^4.29.3",
    "webpack-cli": "^3.2.3"
  },
  "dependencies": {
    "@babel/polyfill": "^7.2.5",
    "rete": "1.1.0",
    "rete-area-plugin": "0.2.1",
    "rete-comment-plugin": "0.2.1",
    "rete-connection-plugin": "0.4.1",
    "rete-context-menu-plugin": "0.3.3",
    "rete-history-plugin": "0.1.2",
    "rete-vue-render-plugin": "0.2.6",
    "vue": "^2.6.5"
  }
}

webpack conf:

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const path = require('path');

var rules = [
    { 
        test: /\.tsx?$/, 
        loader: 'awesome-typescript-loader',
        exclude: /node_modules/,
        options: {
           declaration: false,
        } 
    },
];


module.exports = [
    {
        entry: {
            'nodebasedvis':'./src/general_ui/main.ts',
            'nodebasedvis.min':'./src/general_ui/main.ts',
        },
        output: {
            path: path.resolve(__dirname, `../general_ui/static/js`),
            filename: '[name].js',
            libraryTarget: 'umd',
            umdNamedDefine: true
        },
        devtool: 'source-map',
        module: {
            rules: rules
        },
        optimization: {
            minimizer: [
                new UglifyJsPlugin({
                    parallel: true,
                    sourceMap: true,
                    include: /\.min\.js$/,
                })
            ]
        },
        resolve: {
            extensions: ['.ts', '.tsx', '.js']
        },
        mode: 'development'
    }
];

tsconfig:

{
    "compilerOptions":{
        "module": "commonjs",
        "target": "es5",
        "lib": [ "es2015", "dom" ],
        "outDir": "lib",
        "sourceMap": true,
        "declaration": true,
    },
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules",
        "**/*.spec.ts"
    ]
}

Sorry to bother you with all of this but I must say that this is the first time where I properly wanted to setup a js project so there might be something wrong in my setup but as far as I know it is setup correctly... I hope you can spot something off.

[Ni55aN]

Is it happens with previous versions of rete and render plugin?

[cvisl]

@Ni55aN just tried it with rete v1.0.4 and rete-vue-render-plugin 0.2.5 but it also doesn't work. How is the VueNumControl used in:

class NumControl extends Rete.Control {

  constructor(emitter, key, readonly) {
    super(key);
    this.component = VueNumControl;
    this.props = { emitter, ikey: key, readonly };
  }

  setValue(val) {
    this.vueContext.value = val;
  }
}

There is no reference in the rest of my code, is that handled by the rete-ue-render-plugin? Because in the example on the rete-vue-render-plugin npm package page the following example is given:

import CustomNodeComponent from './CustomNodeComponent.vue';
import CustomControlComponent from './CustomControlComponent.vue';
 
class MyComponent extends Rete.Component {
    constructor(){
        // ...
        this.data.render = 'vue';
        this.data.component = CustomNodeComponent; // Vue.js component, not required
        this.data.props = {}; // props for the component above, not required
    }
}
 
class MyControl extends Rete.Control {
    constructor(){
        // ...
        this.data.render = 'vue';
        this.data.component = CustomControlComponent; // Vue.js component, required
        this.data.props = {}; // props for the component above, not required
    }
}

Which used the customnodecomponent and customcontrolcomponent and sets the this.data.render to 'vue', which isn't set in the flow-control codepen example? Which my code is made off.

[Ni55aN]

I have reproduced issue:
rete-vue-render-plugin uses a vue v2.5.17 (when build project with webpack), but control component is compiled via 2.6.*. It is strange that does not show any error

[Ni55aN]

Finally I have updated Vue dependency for renderer. rete-vue-render-plugin@0.3.0 published

import VueRenderPlugin from 'rete-vue-render-plugin';
import Vue from 'vue/dist/vue.esm'

const VueNumControl = Vue.component('num', {
  template: ...

[cvisl]

Amazing! It works now, thanks a lot @Ni55aN!

[AMOSKERIO023]

how can i fix this error 'unable to resolve superclass rete.component'

import Rete from "rete";
import { NumberSocket } from "./sockets";
import { NumberControl } from "./controls/NumberControl.js";

export class NumberComponent extends Rete.Component {
constructor() {
super("Number");
this.task = {
outputs: { num: "output" }
};
}

builder(node) {
let out = new Rete.Output("num", "Number", NumberSocket);

node.addControl(new NumberControl(this.editor, "num"));
node.addOutput(out);

}

worker(node) {
return { num: node.data.num };
}
}

[Ni55aN]

@AMOSKERIO023 how do your build the app?