TSX, components, and shortcodes

Operating system

macOS Big Sur

Eleventy

3.0 alpha 13

Describe the bug

Repo and video

TSX layout components work great. Subcomponents work great. But they don't have good access to universal shortcodes, in particular, eleventy-plugin-bundle stuff such as css.

In short, Preact manages the instantiation of subcomponents, which means 11ty can't bind this. But Preact has a way to pass a "context" object to the render function, and every component will get this.context. I'm able to pass in shortcodes: eleventyConfig.javascriptFunctions and thus call this.context.shortcodes.css(".xyz {}") in my subcomponent.

But when the caller (the layout template) renders, this.getBundle() doesn't return anything. Which makes sense, from an order-of-execution perspective.

Here is a repo with a README and example code.

Reproduction steps

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See an error

Expected behavior

1. Clone the repo.
2. Run the build script.
3. Note that xyz is not in the build output.
4. Or: watch the video walkthrough

Reproduction URL

https://github.com/pauleveritt/eleventy-tsx-shortcodes

Screenshots

Video: https://youtu.be/m0lzT7__O7U