imperatively adding code to bundles

[mayank99]

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. 🤔)

[zachleat]

A few examples documenting bundleExportKey have popped up over at #28

[mayank99]

Ah that does clarify bundleExportKey. It's useful but not related to imperatively adding code to bundles.