Add template block prior to extra URL loaders

[psychemedia]

To handle packages that require Javascript state setting prior to loading a package (eg thebelab, provide a template block before the URLs are loaded.

[codecov]

Codecov Report

Merging #1049 into main will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##             main    #1049   +/-   ##
=======================================
  Coverage   84.72%   84.72%           
=======================================
  Files          28       28           
  Lines        3942     3942           
=======================================
  Hits         3340     3340           
  Misses        602      602           

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 42f4851...50a743a. Read the comment docs.

[simonw]

thebe is the first time I've seen a library that requires you to set up some global JavaScript configuration before loading the script itself.

I'm hesitant to add an extra template block just to cover that one case since it's such a rare pattern. But it's important that thebelab can be used with Datasette.

Would this pattern work for you instead?

{% block extra_head %}
<script type="text/x-thebe-config">
  {
    requestKernel: true,
    binderOptions: {
      repo: "binder-examples/requirements",
    },
  }
</script>
<script src="https://unpkg.com/thebelab@latest/lib/index.js"></script>
{% endblock %}

[simonw]

You could use Datasette's new {{ urls.static_plugins(...) }} template option - see https://docs.datasette.io/en/latest/internals.html#internals-datasette-urls - to generate a link to code that was bundled with the plugin:

{% block extra_head %}
<script type="text/x-thebe-config">
  {
    requestKernel: true,
    binderOptions: {
      repo: "binder-examples/requirements",
    },
  }
</script>
<script src="{{ urls.static_plugins("datasette-thebelab-plugin", "thebelab-index.js")"></script>
{% endblock %}

[psychemedia]

That workaround is probably fine. I was trying to work out whether there might be other situations where a pre-external package load might be useful but couldn't offhand bring any other examples to mind. The static plugins option also looks interesting.