Any ideas on including multiple scripts sustainably?

[castielwaverly]

For context, I have a few custom widgets that I've made dynamic through scripts. Basically something that looks like this:

document:
  head: |
    <script>
    document.getElementById(`my-custom-widget`).textContent = "New value";
    </script>

# ...

pages:
  # ...
  widgets:
    - type: custom-api
      # ...
      template: |
        <div id="my-custom-widget">Initial value</div>

I've used the handy $include directive to clean up the file from getting massive, since it starts to balloon with multiple scripts and widgets. The new one would look something like this:

document:
  $include: scripts/head.yml

# ...

pages:
  # ...
  widgets:
    - $include: widgets/my-custom-widget.yml

So far so good. However, as I make more of my own widgets dynamic, the scripts/head.yml file starts to get massive. It would be nice to be able to have an $include statement per script, or somehow bundle the scripts with the widget, but the three restrictions preventing this are:

1. Scripts have to be in the top-level HTML body in the head or the footer, so you can't include scripts inside the widget HTML.
2. Both head and custom-footer elements are unique, and so you can't "include them multiple times", so to speak.
3. $include seems to work by replacing an element in the YAML, so you can't include snippets of one of the aforementioned elements.

The only solution I've come up with is to do more or less what's documented here: https://github.com/glanceapp/glance/blob/main/docs/configuration.md#document, e.g.

document:
  head: |
    <script src="scripts/my-custom-script-1.js"></script>
    <script src="scripts/my-custom-script-2.js"></script>
    <script src="scripts/my-custom-script-3.js"></script>

This should work in theory, but requires hosting a file server, since in this implementation the client performs additional fetches.

I think this is fine, but since for each additional line of code, maintainability decreases much faster than document size increases, it'd be nice to just bundle these with the initial fetch in a similar way that just dumping all the scripts under head as one string would.

Just wondering if anyone has any clever ideas on how to do this or if one of my assumptions are wrong 😄

[ralphocdol]

I made the HTML Script Loader here: https://github.com/ralphocdol/glance-micro-scripts

With this, you can bundle the script with the widget.

Also,

but requires hosting a file server, since in this implementation the client performs additional fetches.

I'm not sure what you meant by this as you don't necessarily need to host a file server since Glance has one called assets-path.

[castielwaverly]

Not sure why I didn't make the connection of using assets-path for scripts too and not just CSS. Also, matching the script tag and adding it to head programmatically is clever, nice.

Thank you, this was really helpful and was pretty much exactly what I was asking for 🙏