-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Support Web Streams #2781
Comments
This would be valuable to support the new Next.js Edge Runtime & Deno's Fresh Framework as well as other Web API based runtimes. |
I would be happy to discuss this feature with somebody willing to implement this - my time capacity is limited and I can't afford lately to spend too much time on the OSS. I can design this feature and review the implementation though. |
Sure thing - I'm happy to discuss this whenever you find time for this. |
I took a look at this recently to judge the amount of effort needed and to see if I could be of any help. It seems the biggest challenge is to port (or find/create a replacement for) Am I on the right track here? |
Using a strategy close to the current one (based on something like 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 |
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 :)
It makes sense. I couldn't find where |
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? This comment seems to imply so. |
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
It currently isn't - but it probably should be.
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. |
Thanks for the insights, I'll keep looking into it and experimenting as time permits. |
I have a working implementation! It uses Mantine's server but it works with plain Emotion server too. Unlike Emotion's current Node stream implementation, it also injects a script to remove the style (and the script itself) out of the way, otherwise you get hydration errors if a suspense boundary causes new styles to be injected. It also works on Deno and worker runtimes with some bundler magic to strip Node-only deps ( Am I on the right track? If so, we can discuss a strategy to extract it into a PR here. |
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 fromtransformStream.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: denoland/std#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.
The text was updated successfully, but these errors were encountered: