Hot reloading with Browsersync and Webpack

Webix JS
1

Hi, am trying to implement Browsersync and Webpack, with hot reload.

Problem seems to be that id’s are persisted after a destructor() is called on the parent !

Any way to force destructor() to remove all ids of children, so that they can be recreated with exactly the same id’s ??

Problem seems to be in ProtoUI.id_setter

  	id_setter:function(value){
	if (webix._global_collection && (webix._global_collection != this || this._prev_global_col)){
		var oldvalue = this.config.$id = value;
		(this._prev_global_col || webix._global_collection)._elements[value] = this;
		value = webix.ui._uid(this.name);
		(this._prev_global_col || webix._global_collection)._translate_ids[value]=oldvalue;
	}
	webix.assert(!webix.ui.views[value], "Non unique view id: "+value);
	webix.ui.views[value] = this;
	this._viewobj.setAttribute("view_id", value);
	return value;
2

This sort of works, based on reading the above source code:

 if( module.hot ) {
       if(popupX ) {
             popupX.destructor ()
             delete webix.ui['views']['idA']
             delete webix.ui['views']['idB']  
       }
       module.hot.accept ()
 }
3

You can use the next code to destroy all views.

for (var key in webix.ui.views)
   webix.$$(key).destructor();
4

thanks, but I don’t want to delete all the views, just the ones in the module being hot-reloader, then I need to pass their state back in.

will experiment a bit more.

5

Your suggestion seems to work nicely!

I save the state,
then destroy the entire UI,
then recreate it again.

No more logging in, recreating the state, etc.!

Webix working with Webpack hot module reloader, and Typescript!

Thanks
David