[Bug] Update script won't refresh component script properly after autoloading component from html in localStorage
Question
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:
Answers (2)
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
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.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1115
[BUG] core:canvas-clear removes CSS Composer Styles
I am using the core:canvas-clear command assigned to a button but when this is pressed, the styles setup through the CSS Composer are also...
Issue #1411
Manual triggering of the asset manager rendering is required after opening the AM pop-up
Questions Q: Are you using the latest release (older versions are NOT supported)? A: Yes Q. Are you facing the bug with your local copy of...
Issue #1941
[BUG]: When dragging a block over the canvas, JS in script, is appended in canvas before dropping the block.
You're submitting a BUG Are you using the latest release (older versions are NOT supported)? v0.14.57 Are you facing the bug with your loca...
Issue #1758
Unable to load in CSS string with characters such as '#' with setStyle()
You're submitting a BUGAre you using the latest release (older versions are NOT supported)?If you're not sure, type grapesjs.version in con...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.