[examples] Updated Remix examples with the lates changes using React 18

[58bits]

From #34991

This should 'just work' with the updated entry.client.tsx for Remix latest and React 18

Note that the latest entry.server.tsx in the Remix blog tutorial uses renderToPipeableStream, although based on emotion-js/emotion#2800 - I'm not sure this is possible yet.

For interest only, below is what the renderToPipeableStream would look like in entry.server.tsx if it were supported.

Hope this helps.

import { PassThrough } from "stream";
import type { EntryContext } from "@remix-run/node";
import { Response } from "@remix-run/node";
import { RemixServer } from "@remix-run/react";
import isbot from "isbot";
import { renderToPipeableStream } from "react-dom/server";

const ABORT_DELAY = 5000;

export default function handleRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext
) {
  const callbackName = isbot(request.headers.get("user-agent"))
    ? "onAllReady"
    : "onShellReady";

  return new Promise((resolve, reject) => {
    let didError = false;

    const { pipe, abort } = renderToPipeableStream(
      <RemixServer context={remixContext} url={request.url} />,
      {
        [callbackName]: () => {
          const body = new PassThrough();

          responseHeaders.set("Content-Type", "text/html");

          resolve(
            new Response(body, {
              headers: responseHeaders,
              status: didError ? 500 : responseStatusCode,
            })
          );

          pipe(body);
        },
        onShellError: (err: unknown) => {
          reject(err);
        },
        onError: (error: unknown) => {
          didError = true;

          console.error(error);
        },
      }
    );

    setTimeout(abort, ABORT_DELAY);
  });
}

[mui-bot]

	Messages
📖	Netlify deploy preview: https://deploy-preview-35092--material-ui.netlify.app/

No bundle size changes

Generated by 🚫 dangerJS against 0a9c893

[mnajdova]

Looks like this works. BTW could you reference what project you used as a reference. I am asking because the Remix's emotion example is still using React 17 and some older implementaiton.

[58bits]

Hi @mnajdova - you know I searched (albeit fairly quickly) to find the new 'quickstart' app repo for Remix (not the Emotion example) - but couldn't find it. However, when you run this command npx create-remix@latest --template remix-run/indie-stack blog-tutorial from this page... https://remix.run/docs/en/v1/tutorials/blog - you get the latest indie stack with React 18. It's from this that I created the updated entry.client.tsx file, and configured the rest of the project for MUI 5 / Emotion.js (based on the Remix example here in the MUI repo)

[mnajdova]

Hi @mnajdova - you know I searched (albeit fairly quickly) to find the new 'quickstart' app repo for Remix (not the Emotion example) - but couldn't find it. However, when you run this command npx create-remix@latest --template remix-run/indie-stack blog-tutorial from this page... https://remix.run/docs/en/v1/tutorials/blog - you get the latest indie stack with React 18. It's from this that I created the updated entry.client.tsx file, and configured the rest of the project for MUI 5 / Emotion.js (based on the Remix example here in the MUI repo)

Alright, this makes sense 👍 I guess their examples are not updated yet. I couldn't find anything out of place.

[58bits]

just committed eslint and prettier fixes (apologies, commit messages are not 'conventional commits' - which I see now is the project's format)

[mnajdova]

just committed eslint and prettier fixes (apologies, commit messages are not 'conventional commits' - which I see now is the project's format)

No worries, we squash and merge, so only one commit per PR is visible afterwards :) Thanks for fixing the issues