Dynamic compose

Help Requests
7

Hi,

I guess, it should work with webpack, because it’s independent from any loader/bundler, but actually I’ve not tested.

load(contentName) {
self=this;
if (! (contentName in this.content) ) {
this.content[contentName]={};
this.app.http.fetch(’/ui?name=’+contentName)
.then( resp => resp.text())
.then( data=> {
let ui=JSON.parse(data);
loadClass(ui.viewModel).then( (c)=> {
this.content[contentName].view=ui.view;
this.content[contentName].viewModel=new c(self);
this.content[contentName].title=this.toTitleCase(contentName);
self.contentView=new InlineViewStrategy(this.content[contentName].view);
self.contentViewModel=this.content[contentName].viewModel;
});
})
.catch(error => { throw new Error(error);} );
} else {
self.contentView=new InlineViewStrategy(this.content[contentName].view);
self.contentViewModel=this.content[contentName].viewModel;
}
}

loadClass(code) {
return new Promise((resolve, reject) => {
let node = document.createElement(“script”);
node.type = “module”;
node.async=true;
let classId = “dynClass”+Math.floor(Math.random() * 1000000);
let code2=" “+code;
let m=new RegExp(”[ ]+export[ ]+default[ ]+class[ ]+([^{]+)", ‘g’).exec(code2);
if (m==null) m=new RegExp("[ ]+export[ ]+class[ ]+([^{]+)", ‘g’).exec(code2);
if (m==null) throw new Error(“Exported class not found !”);
node.src = URL.createObjectURL( new Blob([code+\n window.${classId}=${m[1]};], {“type”:“text/javascript”}) );
node.onload = (m) => {
resolve(window[classId]);
destroy();
};
node.onerror = (m) => {
reject(new Error(loadClass error));
destroy();
};
let destroy = () => {
delete window[classId];
node.onerror = null;
node.onload = null;
URL.revokeObjectURL(node.src);
node.src = null;
node.remove();
};
document.head.appendChild(node);
});
}

2 Likes