Dynamically loading a remote Cell script from an existing Cell app and injecting into the existing Cell app.
gliechtenstein opened this issue · comments
I was trying to implement an app that consists of just an input field initially, which when submitted will dynamically load a remote script and do something on onload
event, using Cell.
More specifically, I was trying to find a way to load a remote cell app from an existing cell app, and inject it into the existing cell app.
But I ran into a problem. When loading a remote script dynamically, it is not possible to know what variables have loaded as a result of that script. The new manual instantiation feature introduced in #125 doesn't help because we have no knowledge about the newly introduced variables in the root context.
Anyway here's the half-finished code. The only problematic part is the Fill in the blank here
part inside onload()
. Once that's figured out, everything should just work.
{
$cell: true,
_load: function(url) {
this.querySelector("#script_slot").$components.push({
$type: "script",
src: url,
onload: function() {
/*
* Fill in the blank here
* Need to turn the loaded gene objects into cells
* but we do not know what variables have loaded.
*/
}
});
},
$components: [
{
id: "script_slot",
$components: []
},
{
$type: "input",
placeholder: "Enter a javascript url and press enter",
onkeyup: function(e) {
// when the enter key is pressed, find the nearest ancestor
// that contains _load() and call that function.
if(e.keyCode === 13) this._load(this.value);
}
}
]
}
Trying to figure out a nice and clean way to tackle this.
it could be done through a modification of the API, or maybe there's a way to do this without modifying the API. Maybe there's a clean way.
do i understand this correctly that you are you looking for a way to determine which global variables have been added after loading a script?
if so, could some of the answers in this thread help or do the trick?
Thanks for sharing!
Yup, in fact this is how Cell implements its automatic instantiation mechanism https://github.com/intercellular/cell/blob/develop/cell.js#L501
But the challenge I'm trying to point out here is that currently there's no way to detect whether a variable has already been used or not.
In the example above, we need to detect only the variables that have been dynamically loaded as a result of the script load. The Object.keys(window)
approach will return all the variables, not just the newly added ones. Hope I'm making sense, it's a niche scenario but I think it can be powerful if we can figure this out.