[plugins][feature request]: Support additional script tag attributes when loading custom JS

[hydrosquall]

Motivation

• The build system for my new plugin has two output JS files, one for browsers that support ES modules, one for browsers that don't. At present, I'm only passing one of them into Datasette.
• I'd like to specify the non-es-module script as a fallback for older browsers. I don't want to load it by default, because browsers will only need one, and it's heavy, so for now I'm only supporting modern browsers.

To be able to support legacy browsers without slowing down users with modern browsers, I would like to be able to set additional HTML attributes on the tag fallback script, nomodule and defer. My injected scripts should look something like this:

<script type="module" src="/index.my-es-module-bundle.js"></script>
<script src="/index.my-legacy-fallback-bundle.js" nomodule="" defer></script>

Proposal

To achieve this, I propose additional optional properties to the API accepted by the extra_js_urls hook and custom JS field the metadata.json described here.

Under this API, I'd write something like this to get the above HTML rendered in Datasette.

{
    "extra_js_urls": [
        {
            "url": "/index.my-es-module-bundle.js",
            "module": true,
        },
        {
            "url": "/index.my-legacy-fallback-bundle.js",
            "nomodule": "",
            "defer": true
        }
    ]
}

Resources

• MDN on the script tag
  • There may be other properties that could be added that are potentially valuable, like async or referrerpolicy, but I don't have an immediate need for those.

[simonw]

This is a good idea.

[simonw]

I like your design, though I think it should be "nomodule": True for consistency with the other options.

I think "async": True is worth supporting too.