Can't render a Control Template. Rete enviroment with WebPack

[limuyao]

Hi to all! The problem is on the picture (Rete can't render a Control template. There are not any <input> elements in the Number Nodes and in the Add Node) I am using the code from the very first sample https://codepen.io/Ni55aN/pen/xzgQYq and a WebPack enviroment (configs and a full code below). Btw, when i try to add console.log(this) for constructor of the NumControl i can see that "$el" of _vue is <!-- function(n,e,r,o){return ue(t,n,e,r,o,!0)} -->.

But it should be a vue object with a template <input type="number"...

What's wrong with me? And who can help me to solve the problem?

All of code here: https://github.com/limuyao/rete_env WebPack config:

"use strict";
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    //entry: './src/index.js', //error [regeneratorRuntime is not defined]
    entry: ['babel-polyfill', './src/index.js'],
    output: {
        path: path.resolve(__dirname, '../dist'),
        filename: 'main.js'
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.pug$/,
                loader: 'pug-plain-loader'
            },
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.sass$/,
                use: [
                    'vue-style-loader',
                    'css-loader',
                    {
                        loader: 'sass-loader',
                        options: {
                            indentedSyntax: true
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin()
    ]
};

[Ni55aN]

You need to update vue-render-plugin to latest version, because you have latest version of vue in your dependencies. For some reason vue@2.6.6 not compatible with version of vue that used by the render plugin (in previous versions)

[limuyao]

Thank you for answer, Ni55aN, but i have updated the plugin and the problem remains =(

[Ni55aN]

Is there any logs in the console?

[limuyao]

there aren't any logs and errors in the console And when i try to inspect the DOM structure of a node i can see that <div class='control'> has that the same text: <!-- function(n,e,r,o){return ue(t,n,e,r,o,!0)} -->

mb the reason is in the WebPack vue-loader that can't recognize that vue template?

[Ni55aN]

vue-loader processes only a single file components.

Rather, you should have received the warning https://github.com/retejs/rete/issues/249#issuecomment-461846528 Therefore, Vue should to generate render() function based on template: https://github.com/retejs/examples/issues/9#issuecomment-436433281

But using vue-loader (with *.vue file) is more more preferred way

[limuyao]

Thank you for answer, Ni55aN it helps me! I have solved the problem with the single file components: 1) Create a file ../components/VueNumControlSingle.vue

<template>
    <input type="number" :readonly="readonly" :value="value" @input="change($event)" @dblclick.stop="" @pointermove.stop=""/>
</template>

<script>
    export default {
        props: ['readonly', 'emitter', 'ikey', 'getData', 'putData'],
        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);
        }
    }
</script>

<style scoped>

</style>

2) import it in index.js

import VueNumControlSingle from '../components/VueNumControlSingle.vue';

3) And use it instead of VueNumControl in NumControl's constructor

class NumControl extends Rete.Control {

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

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

All of code is here: https://github.com/limuyao/rete_env