[Bug] Update script won't refresh component script properly after autoloading component from html in localStorage

[alvim]

I'm using GrapesJS v0.14.5 in a local copy. OS: Ubuntu 16.04 LTS Browser: Chrome Version 64.0.3282.140 (Official Build) (64-bit) I think I can't reproduce it from the demo

I have a component with the current script:

script: function () {
    console.log('Running script!', '{[ timestamp ]}');
    var timestamp = '{[ timestamp ]}';
    var comp = xGrapes.comp;

    var vm = new Vue({
        el: `#app-container-${timestamp}`,
        components: {
            comp: comp
        },
        data: function () { return { msg: "{[ message ]}" } },
        template: '<div><h1>{{msg}}</h1><p>Great!</p><comp message="{[ anotherMessage ]}"></comp></div>'
    });
}

(The "comp" variable part is from a plugin functionality I'm currently developing, but I think you can ignore it)

As you can see I'm rendering a Vue component. This component has some data binded using traits. When I add the component in canvas and change it's traits, the script is immediately updated and reload the component with the new message, since I'm using updateScript method, as you can see here:

init() {

    this.insertAppContainer()

    this.listenTo(this.model, 'change:message change:anotherMessage', this.onChangeProps);
    editor.on('load', this.onChangeProps.bind(this));
},

onChangeProps() {
    this.insertAppContainer();
    this.updateScript();
}

So far everything worked as expected. :+1: If I refresh the page my canvas is reloaded with HTML content stored in localStorage item gjs-html, since I have storageManager.autoload = true.

Now if I update my traits properties with a new value the messages arent't updated at all (it continues showing the last value saved before the update) and I noticed why: Before the page refresh, if I console.log my model.attributes.script, this is the result: After the page refresh, this is the result:

The script function is stored in gjs-html as a string with the hardcoded variables. After the reload it does not have the notation like {[ message ]} but the last saved value itself.

I hope I had been clear. Thank you! :smile:

[artf]

gjs-html contains the final HTML, the HTML your users will gonna see so it's correct that you see the script "compiled". For a correct editing, you have to rely on gjs-components which is basically a JSON representation of the template and so contains all the informations about your components

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.