styled-components example not updated #28
Comments
|
A pull request updating the example would be more than welcome. |
|
I believe the new entry.server file supports React 18 streamining, whereas most of the older examples use React 17 and I'm not sure how simple, if even possible, it is to update the As you can see, styled components first renders the markup as a string, while collecting styles, then injects those styles into the markup. With streaming, the HTML is already being sent to the client while rendering, so nowhere to inject the styles. examples/styled-components/app/entry.server.tsx Lines 14 to 21 in 872b8ba |
|
@AxelBriche I'm working on a PR to update all examples to be in line with our templates. @kiliman |
It seems they have documented how to implement a working example with streaming rendering: https://styled-components.com/docs/advanced#streaming-rendering However, it uses the deprecated This does not also not work with a streamed response though. |
|
Any motion on this? We're wondering the exact same thing. |
github-actions
bot
added
the
needs-response
|
This issue has been automatically closed because we haven't received a response from the original author 🙈. This automation helps keep the issue tracker clean from issues that are unactionable. Please reach out if you have more information for us! 🙂 |
|
I'm migrating away from styled-components, so I can use a library that supports react 18 streaming rendering 🤷♂️ |
|
For those still using the example const styleSheet = new ServerStyleSheet();
// SSR render the full App
const { pipe, abort } = renderToPipeableStream(
styleSheet.collectStyles(
<RemixServer
context={remixContext}
url={request.url}
abortDelay={ABORT_DELAY}
/>
),
{
// use onShellReady to wait until a suspense boundary is triggered
onShellReady() {
responseHeaders.set("Content-Type", "text/html");
const body = new PassThrough({
transform: (chunk, _, done) => {
// perform previous behaviour and replace the "__STYLES__" placeholder as it's streamed to the client
const stringChunk = (chunk as Buffer).toString();
done(
undefined,
Buffer.from(
stringChunk.replace("__STYLES__", styleSheet.getStyleTags())
)
);
},
});
pipe(body);
resolve(
new Response(body, {
status: didError ? 500 : responseStatusCode,
headers: responseHeaders,
})
);
},
onShellError(err: unknown) {
reject(err);
},
onError(err: unknown) {
didError = true;
console.error(err);
},
}
);Seems to be working so far for me! |
|
@freshollie We would love to get the |
|
The example that @freshollie gave works, but why did he receive a thumbs down? Is there something wrong? |
I start a new project with
npx create-remix@latestcommand and myentry.server.tsxfile has 111 lines of code.Styled-components
entry.server.tsxfile has only 29 line of code.Can you update that example?
The exemple code use
return new Response("<!DOCTYPE html>" + markup, {But last remix version use
new PassThrough()has new body value:The text was updated successfully, but these errors were encountered: