imperatively adding code to bundles

Currently, the only way to add code to a bundle is by rendering it through a template. This works fine for simple cases, but it limits the usefulness of bundles, since not everything is always an eleventy template.

It would be useful to be able to incrementally add code to the bundle without/before rendering. For example, this would come in handy if you want to populate the bundle using arbitrary JS in the ---js frontmatter or an .11ty.js file or even in the 11ty config file.

This could be exposed using an additional method under this. For example:

this.writeBundle("css", "p { color: red; }");

this.getBundle("css"); // p { color: red; }

Edits:

Related: this.getBundle currently returns a placeholder comment until after the build finishes.

• This makes it difficult to do code transformations (e.g. using addTransform). I first noticed this when I was trying to transform some WebC output.)
• Another thing I was trying to do is conditionally render a <style> vs a <link rel="stylesheet"> depending on the size of the code. The placeholder string makes this impossible to achieve.

(Maybe also related: I just noticed the bundleExportKey option in the readme. I wonder if that could help with the flexibility of bundles since it's JS-related. 🤔)

Start by tracing the current this.getBundle behavior and how bundle content is produced before and after rendering. Review the addTransform interaction and the bundleExportKey option mentioned in the issue, then define tests for imperative writes, pre-render reads, transformations, and size-based output decisions. Done means callers can add and inspect bundle code at the requested points without placeholder content preventing these cases.