Dynamically loading a remote Cell script from an existing Cell app and injecting into the existing Cell app.

[gliechtenstein]

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.

[p3k]

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?

https://stackoverflow.com/questions/17276206/list-all-js-global-variables-used-by-site-not-all-defined

[gliechtenstein]

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.