Enable using this library to pre-load the JSAPI

Example:

1. user visits index route (no map, no JSAPI yet)
2. app renders index page, then starts loading JSAPI (bootstrap()) so that map route loads faster once people go there
3. user clicks link to map route
4. map route checks if already loaded (isLoaded()) or loading, if not, load JSAPI. Once JSAPI is loaded, create the map

The only thing new here (when compared to the lazy loading example) is keeping track of the notion that the JSAPI is already in the process of being loaded and providing a hook to do something once it’s done. Currently users can pass a callback, but in a preloading scenario, the context is likely to change between when a user calls bootstrap()and when they want to actually create a map.

One idea is to expose an isLoading property and .onLoad(fn) (or .on('load', fn)) event. I’m not a real big fan of having both a callback and an event, so if we go this route, may want to deprecate the callback? Not sure.

Thoughts welcome.

[tomwayson]

Interesting. Still would like to figure out how to do #8 w/o adding yet another promise implementation to someone’s app.

[alexurquhart]

First off thanks for putting these libraries up, I’ve just started playing with angular 2 and have been working off this to create a similar implementation bundled in with an angular service.

One possible solution is to check for the existence of the API script tag in dojoRequire(), and if window['require'] is undefined, then add an event listener to the script that will execute the callback, like so:

In bootstrap():

  // create a script object whose source points to the API
  const script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = options.url;

  // Add data-attribute so we can find the script in dojoRequire()
  script.dataset.esriLoader = '';

dojoRequire():

export function dojoRequire(modules: string[], callback: Function) {
  if (isLoaded()) { 
    window['require'](modules, callback);
    return;
  }
  
  const script = document.querySelector('script[data-esri-loader=""]');
  if (script) {
    // Not yet loaded but script is in the body - use callback after onLoad event
    script.addEventListener('load', () => {
      window['require'](modules, callback);
    });
  } else {
    // Not bootstrapped
    throw new Error('The ArcGIS API for JavaScript has not been loaded. You must first call esriLoader.bootstrap()');
  }
}

Here’s a sample with some console.logs to demonstrate the order of operations: https://jsfiddle.net/gvaq4tph/5/