styled-components example not updated

[remix-run]

styled-components example not updated

[freshollie]

For those still using the example styled-components. This can be used with the react 18 streaming 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!

[joglr]

@AxelBriche I'm working on a PR to update all examples to be in line with our templates.

@kiliman styled-components has an issue about HTML streaming: styled-components/styled-components#3658

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 renderToNodeStream, not sure how to use it with renderToPipeableStream

This does not also not work with a streamed response though.

[MichaelDeBoey]

@AxelBriche I'm working on a PR to update all examples to be in line with our templates.

@kiliman styled-components has an issue about HTML streaming: styled-components/styled-components#3658

[machour]

A pull request updating the example would be more than welcome.
Would be more than glad to help if you have some spare time to take care of it!

[kiliman]

I believe the new entry.server file supports React 18 streamining, whereas most of the older examples use React 17 and renderToString.

I'm not sure how simple, if even possible, it is to update the styled-components example to the streaming API.

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

	let markup = renderToString(
	sheet.collectStyles(
	<RemixServer context={remixContext} url={request.url} />
	)
	);
	const styles = sheet.getStyleTags();
	markup = markup.replace("__STYLES__", styles);

[iDVB]

Any motion on this? We're wondering the exact same thing.
I guess the fallback is to use React 18 with renderToString instead?

[github-actions]

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! 🙂

[joglr]

I'm migrating away from styled-components, so I can use a library that supports react 18 streaming rendering 🤷‍♂️

[MichaelDeBoey]

@freshollie We would love to get the styled-components example updated to work with React 18

[beeant]

The example that @freshollie gave works, but why did he receive a thumbs down? Is there something wrong?