search

jeasx / jsx-async-runtime

An asynchronous JSX runtime without dependencies to be used as server-side template engine.
Other
14 stars 1 forks source link

Subcomponent CSS: state, re-rendering (hooks+context, helmet) #2

Closed pauleveritt closed 2 months ago

pauleveritt commented 3 months ago

I'd like let subcomponents to add CSS/JS that goes in <head>. There are similar needs/patterns, e.g. shoving data into Open Graph <meta> in the <head>.

In React, this pattern was popular with various "React Helmet" approaches. In preact-render-to-string they recommended context provider plus useState. (It didn't ultimately work.)

11ty is solving this with bundles. During render, the "bundle" writes a magic/structured string into where the "bucket" data is supposed to go. Then, any part of the system can set data into a bucket.

After render, something scans for the magic string and writes in the bucket contents.

I wonder if jsx-async-runtime could have some kind of mini-lifecycle that does this a bit more sanely. Or, some other technique: async generators, or two-pass JSX trees (to avoid parsing strings).

jablonski commented 3 months ago

Yes, this is a reasonable requirement. In Jeasx (which is the initial reason for jsx-async-runtime) we use "guards" to prepare data before rendering, so this usually is not a problem.

But I will give it some thought if there's an easy way to implement such a feature.

jablonski commented 2 months ago

This feature can now be implemented via jsx interception (introduced in 0.5.0). Have a look at the example app:

https://github.com/jeasx/jsx-async-runtime/blob/main/example/src/index.jsx