Skip to content
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

Compatibility with streaming APIs. #125

Open
garronej opened this issue Oct 27, 2022 · 2 comments
Open

Compatibility with streaming APIs. #125

garronej opened this issue Oct 27, 2022 · 2 comments

Comments

@garronej
Copy link
Owner

garronej commented Oct 27, 2022

Hello @Andarist,

I'm very sorry to bother you but I have this burning question I wanted to ask you for weeks.

Is there a world where tss-react is compatible with the streaming APIs?

This module is a wrapper around @emotion/react that provide a hook-based API. See your quote.

As of today, the only way to make tss-react work with SSR is to implement the advanced approach and this approach doesn’t work with the steaming APIs.

image

I don't care how hard it is to set up, I'm willing to provide and maintain a specific SSR utility on a per framework basis just like I currently do for Next.js.

But is it or will it ever be feasible to support streaming?

Thank you very much for taking a look at this.

PS: Despite the little number of stars, this module is actually used. Mostly by peoples using it to migrate from MUIv4 to MUIv5 without having to refactor the whole codebase.
image

@Andarist
Copy link

Andarist commented Oct 27, 2022

Yes, it should be possible to support streaming - if you only wrap your app with some special provider etc. Emotion itself is not 100% compatible with streaming right now, it's quite nuanced. I'm - sort of - waiting for better APIs (Resources) that are supposed to make it easier to implement this stuff in the future.

As right now, to make streaming possible we'd have to render smth like that on the server (or inject this into the stream):

<!-- construct the style tag from the styles inserted into the cache since the lust chunk was written to the stream -->
<style></style>
<script>
  var cs = document.currentScript
  document.head.appendChild(cs.previousSibling)
  cs.remove()
</script>

On top of that, we'd have to figure out how to rehydrate this properly on the client side (totally doable, I just didn't exactly think deeply about how to do this best).

With Next.js the new version also comes with a custom hook, useServerInsertedHTML, that could potentially be utilized to make this easier for us. However, from what I understand, this doesn't actually support streaming all that well because it only allows us to inject into the head once. I contacted the Next.js team this morning with a question about this. So I hope to learn more about this soon-ish.

Either way - this potentially could only make the integration with Next.js smoother and we need to support a wider ecosystem. If you'd like to collaborate on making a stream transformer for Emotion that could be used with any framework then I'm totally open to it. I have some idea on how we could make this work - I just couldn't find enough energy to do it on my own in the past months.

@garronej
Copy link
Owner Author

Thank you for the quick and detailed answer @Andarist,

This is very encouraging, I'm very glad that tss-react is not dead tech.

I'm waiting for better APIs (Resources) that are supposed to make it easier to implement this stuff in the future.

I'm not in a hurry at all, no user complained yet and I have no usecase for it.
I just wanted to know if we'll eventually be able, one way or another to support it or if it was a dead end.

I just couldn't find enough energy to do it on my own in the past months.

I'd love to but I don't think I'll have the bandwidth in the coming weeks.
That said, please, if you open an issue about it, tag me, I'll see what I can do!
I think waiting a little bit for the dust to settle around this is a good call.

Thanks again @Andarist,

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants