feat!: add CSS and modulepreload tags for imported chunks

[tobyzerner]

Closes #272

• Add a makePreloadTag method to the TagGenerator to generate
  modulepreload tags, and corresponding methods to configure it.
  Use this method when getting a chunk's tag if it's not an
  entrypoint.

• When getting a chunk's tags, append all the tags for its
  imported chunks too. Call unique on the collection to
  prevent duplicate tags, in case imports overlap.

• Output tags with a newline separator for better legibility.

• Add/update tests.

Note that I haven't built in any protection against circular references, though I suspect it's not possible to actually end up with a circular manifest structure unless you manually tamper with the manifest file.

[innocenzi]

Thanks for your work! Can you describe the use case for this? In what situation did you realize this was missing? What were your imports looking like?

Or better yet, can you give me a repository that uses this setup? I'd like to understand before merging.

[tobyzerner]

Hey @innocenzi, happy to help!

The use case is multiple entry points which import shared modules (including components, which contain CSS).

Here's a super simple demonstration with plain Vite.
https://stackblitz.com/edit/vitejs-vite-ah8pn1?terminal=dev

• Two entry points: app.ts and admin.ts (via app.html and admin.html)
• Each entry imports the shared App.vue component, which includes some CSS.
• The resulting manifest.json looks like this (basically the same structure as I outlined in #272).

{
  "src/app.ts": {
    "file": "assets/app.387d4e8d.js",
    "src": "src/app.ts",
    "isEntry": true,
    "imports": [
      "_App.e478d53d.js"
    ]
  },
  "src/admin.ts": {
    "file": "assets/admin.0ebf3bdf.js",
    "src": "src/admin.ts",
    "isEntry": true,
    "imports": [
      "_App.e478d53d.js"
    ]
  },
  "_App.e478d53d.js": {
    "file": "assets/App.e478d53d.js",
    "css": [
      "assets/App.e8fec7c0.css"
    ]
  }
}

• And the resulting HTML files include the following tags:

<script type="module" crossorigin src="/assets/app.d381851a.js"></script>
<link rel="modulepreload" href="/assets/App.942340e2.js">
<link rel="stylesheet" href="/assets/App.e8fec7c0.css">

[innocenzi]

Sorry for the late merge, I just found a bit of time to check out the code. I couldn't test it myself in a project (never encountered your use case), but the tests seem fine so let's go with that. Thanks!