Idea: loadLeaflet() helper function

[simonw]

A helper function that loads the CSS, loads the JavaScript and then calls your callback function. It could work like this:

loadLeaflet(leaflet => {
  /* Do stuff with leaflet */
]

[simonw]

Could base it on https://github.com/simonw/datasette-leaflet-geojson/blob/0.7/datasette_leaflet_geojson/static/datasette-leaflet-geojson.js#L2-L33

  const loadDependencies = (callback) => {
    let loaded = [];
    function hasLoaded() {
      loaded.push(this);
      if (loaded.length == 2) {
        callback();
      }
    }
    let stylesheet = document.createElement("link");
    stylesheet.setAttribute("type", "text/css");
    stylesheet.setAttribute("rel", "stylesheet");
    stylesheet.setAttribute(
      "href",
      "https://unpkg.com/[email protected]/dist/leaflet.css"
    );
    stylesheet.setAttribute(
      "integrity",
      "sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
    );
    stylesheet.setAttribute("crossorigin", "anonymous");
    stylesheet.onload = hasLoaded;
    document.head.appendChild(stylesheet);
    let script = document.createElement("script");
    script.src = "https://unpkg.com/[email protected]/dist/leaflet.js";
    script.setAttribute(
      "integrity",
      "sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
    );
    script.setAttribute("crossorigin", "anonymous");
    script.onload = stylesheet.onload = hasLoaded;
    document.head.appendChild(script);
  };

[simonw]

Maybe something like this:

function loadLeaflet(callback) {
  let loaded = [];
  let callbackResult = null;
  function hasLoaded(result) {
    if (result) {
        callbackResult = result;
    }
    loaded.push(this);
    if (loaded.length == 2) {
      callback(callbackResult);
    }
  }
  let stylesheet = document.createElement("link");
  stylesheet.setAttribute("rel", "stylesheet");
  stylesheet.setAttribute("href", "{{ datasette_leaflet_url }}");
  stylesheet.onload = hasLoaded;
  document.head.appendChild(stylesheet);
  import('{{ datasette_leaflet_url }}').then(hasLoaded);
}

[simonw]

It minifies to 305 bytes: https://skalman.github.io/UglifyJS-online/

function loadLeaflet(e){let t=[],l=null;function n(n){n&&(l=n),t.push(this),2==t.length&&e(l)}let a=document.createElement("link");a.setAttribute("rel","stylesheet"),a.setAttribute("href","{{ datasette_leaflet_url }}"),a.onload=n,document.head.appendChild(a),import("{{ datasette_leaflet_url }}").then(n)}

[simonw]

If I add that script using the extra_body_script() I'll need to depend on Datasette 0.54 which adds module support.