Support Web Streams

The problem

Emotion supports Node Streams but not Web Streams

Proposed solution

Add a method renderStylesToTransformStream() (https://developer.mozilla.org/en-US/docs/Web/API/TransformStream)

This allows you to .pipeTo(transformStream.writable) and to read from transformStream.readable e.g. response.body = transformStream.readable.

Alternative solutions

Waiting for the implementation of node helper functions in deno so that I can create a wrapper that converts a web stream to node, pipe that to the emotion node stream and cast the result back to a web stream. I have a ticket open for that here: https://github.com/denoland/deno_std/issues/2310

Additional context

Web Streams are the new hot shit and Deno supports these natively. I’ve written a Streaming Server Side Rendering framework for Deno called Reflex that uses suspense rendering and I’d like to use MaterialUI which uses Emotion.

[Andarist]

Yes, I also thought it was kind of inefficient to parse the HTML stream instead of remembering what styles are rendered. I would definitely prefer an implementation like you described but that requires much deeper knowledge of the codebase, which I don’t have 😃

Overall I think that it would be a fairly isolated change - I don’t have a good grasp of what it would look like and if it’s a preferred approach. To judge this I’d have to see a prototype of the solution. In general, I think that we should attempt to conditionally (based on a flag or something) do things differently in insertStyles, we should just put stuff into some buffer on it (+ probably still put the inserted ids in the cache.inserted). Potentially the code that today uses the insertStyles should also be adjusted. Note that there are just a couple of places where insertStyles is used and at the same time all of them should have roughly the same code structure, so figuring it out for a single call site should be enough as other call sites would have to be adjusted in the very same way. Given that each server request should always use its own unique cache the idea seems to be feasible

It makes sense. I couldn’t find where createRenderStylesToNodeStream does that though?

It currently isn’t - but it probably should be.

Also, I inject script tags to serialize suspense cache and React doesn’t seem to complain. Maybe the hydration engine just skips styles and scripts? https://github.com/reactwg/react-18/discussions/110#discussioncomment-1464102 seems to imply so.

I’m not entirely sure how to best interpret this comment. I think it’s best to just experiment with this - perhaps you are right. This in turn would mean that we’d only have to add a script at the very end of the stream.

[Andarist]

Using a strategy close to the current one (based on something like html-tokenize) is an option. However, I wonder if we couldn’t just “insert” styles “directly” to a cache from within render and then just flush~ whatever got inserted in between the last call to transform~ and the current one as <style/> element(s).

I’m not sure if there is an actual benefit of reverse-engineering what styles were inserted from the HTML string if we can control the insertion call.

Apart from injecting <style/> we also might need to inject <script/> because we need to move asap the injected <style/> elements away from what React will try to rehydrate