Render option to bind a `this`

[pauleveritt]

I've been enjoying using jsx-async-runtime with 11ty. One pattern I'd be interested in: binding the original this to each subcomponent rendering. This would help avoid prop drilling. Let me explain.

In 11ty, the "template" renders a page. The template has some state bound to it using .bind, which means templates have access to configured functions and data.

Shortcodes (i.e. subcomponents) also have a bound this.

While I have access to the Eleventy-provide this in the original template, I don't for any subcomponents. This means I need to pass the universe down through props.

It would be nice if renderToString allowed an option bind=this. Then, each subcomponent rendering would do a bind().

[jablonski]

Can you provide a minimal example project which I can use to test the implementation?

[pauleveritt]

Would it help if I had a repo showing this binding idea using preact-render-to-string?

[jablonski]

Yes, any example would help.

[pauleveritt]

Sorry for the delay. Here's a tiny repo showing how it works with Preact and 11ty.

This might be easier: a 2m30s video walkthrough.

[jablonski]

The walkthrough helps, thanks! The repo seems to be private, maybe you can change access rights.

[pauleveritt]

@jablonski My apologies! Fixed on the repo.

[jablonski]

@pauleveritt Thanks, I've got the idea and have a working implementation now. I'm going to do some more tests tomorrow before pushing a release. But I'm quite confident that it is working as expected.

[jablonski]

Here is an example how to bind the 11ty-context in your project:

const result = await jsxToString.call({ context: data }, content);

[jablonski]

The changes are published in 0.4.0. Works as expected in 11ty and is a cool improvement for Jeasx (https://www.jeasx.dev/), too. Thanks a lot for raising the issue.

[pauleveritt]

Thanks a bunch for doing this. I'll try it today.

[pauleveritt]

I have another feature kind of thing to ask about. It's not a bug. Should you open Discussions or is it ok for me to file a ticket?

[jablonski]

Ticket is fine.