TSX, components, and shortcodes

pauleveritt commented 3 months ago

Operating system

macOS Big Sur

Eleventy

3.0 alpha 13

Describe the bug

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

Go to '...'
Click on '....'
Scroll down to '....'
See an error

Expected behavior

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

Reproduction URL

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

Screenshots

Video: https://youtu.be/m0lzT7__O7U

pauleveritt commented 3 months ago

Maybe a better way to think about it: eliminate the TSX part. Just think of it as a JavaScript template calling a shortcode.

How would a universal shortcode call css and get something added to the bundle, when used in a JavaScript template?

zachleat commented 3 months ago

Some overlap with #3310

monochromer commented 3 months ago

In Eleventy itself, the context this is binded to filters (what makes it possible to work for filters from the bundle plugin) something like this:

https://github.com/11ty/eleventy/blob/55e2279f1ad5856848d2d2273967078a14cf0c95/src/Engines/JavaScript.js#L12-L13 https://github.com/11ty/eleventy/blob/55e2279f1ad5856848d2d2273967078a14cf0c95/src/Engines/JavaScript.js#L119-L145

pauleveritt commented 3 months ago

@monochromer My plugin bundle concern...let's say I have a JavaScript template that inserts the CSS bundle in the head, then later, calls a shortcode. The shortcode adds something to the CSS bundle. But it is called after the bundle is put in the head.

I don't think the binding to this is enough for this. There's something deferred happening when the bundle gets put in the head, with some re-evaluation/resolution happening after the first pass through. (Confession: I should read the source rather than guess.)

monochromer commented 3 months ago

Eleventy bundle plugin functions inserts placeholders into html, then transforms replace them with content or links of bundles.

pauleveritt commented 3 months ago

Thanks a bunch for that tip @monochromer .... I now see the placeholder, its string scheme, and the event that processes after build.

Thanks to my buddy Khalid, we found where the problem lies. addContent needs a `page.url.

My subcomponent doesn't have this.page. I would need to pass in the URL each time, and find a way to get to page.url in each subcomponent. I made an arrow function in compile to automate that.

I made a video walking through the problem and hacky-y solution.

Not much 11ty can do to help. It doesn't control the creation of the "shortcode" (subcomponent.) I could imagine some relationship with the jsx-async-runtime project (nice small codebase) where it allowed a pluggable factory to control the this.

I'd be ok with closing this ticket.

monochromer commented 2 weeks ago

it would be nice to have an API to control order (priority) of transforms. For example, if we have jsx-plugin with transform:

eleventyConfig.addTranform('some-transform-name', function () {
 return `<!DOCTYPE html>` + someRenderFromJsxToHtml(<Component />)
})

This transform will perform before bundle transform, which replace placeholders (/*__EleventyBundle:get:css:default:EleventyBundle__*/) to real resources links.

11ty / eleventy