Chakra UI example update.

chakra-ui/app/emotion/context.tsx

@@ -0,0 +1,19 @@
+import { createContext } from "react";
+
+export interface ServerStyleContextData {
+  key: string;
+  ids: Array<string>;
+  css: string;
+}
+
+export const ServerStyleContext = createContext<
+  ServerStyleContextData[] | null
+>(null);
+
+export interface ClientStyleContextData {
+  reset: () => void;
+}
+
+export const ClientStyleContext = createContext<ClientStyleContextData | null>(
+  null
+);

chakra-ui/app/emotion/createEmotionCache.ts

@@ -0,0 +1,7 @@
+import createCache from "@emotion/cache";
+
+export const defaultCache = createEmotionCache();
+
+export default function createEmotionCache() {
+  return createCache({ key: "cha" });
+}

chakra-ui/app/entry.client.tsx

@@ -1,28 +1,36 @@
-import createEmotionCache from "@emotion/cache";
-import { CacheProvider } from "@emotion/react";
 import { RemixBrowser } from "@remix-run/react";
-import { startTransition, StrictMode } from "react";
+import React, { startTransition, StrictMode, useState } from "react";
+import { CacheProvider } from "@emotion/react";
 import { hydrateRoot } from "react-dom/client";
 
-const hydrate = () => {
-  const emotionCache = createEmotionCache({ key: "css" });
+import createEmotionCache, { defaultCache } from "~/emotion/createEmotionCache";
+import { ClientStyleContext } from "~/emotion/context";
+
+interface ClientCacheProviderProps {
+  children: React.ReactNode;
+}
+
+function ClientCacheProvider({ children }: ClientCacheProviderProps) {
+  const [cache, setCache] = useState(defaultCache);
 
-  startTransition(() => {
-    hydrateRoot(
-      document,
-      <StrictMode>
-        <CacheProvider value={emotionCache}>
-          <RemixBrowser />
-        </CacheProvider>
-      </StrictMode>,
-    );
-  });
-};
+  function reset() {
+    setCache(createEmotionCache());
+  }
 
-if (typeof requestIdleCallback === "function") {
-  requestIdleCallback(hydrate);
-} else {
-  // Safari doesn't support requestIdleCallback
-  // https://caniuse.com/requestidlecallback
-  setTimeout(hydrate, 1);
+  return (
+    <ClientStyleContext.Provider value={{ reset }}>
+      <CacheProvider value={cache}>{children}</CacheProvider>
+    </ClientStyleContext.Provider>
+  );
 }
+
+startTransition(() => {
+  hydrateRoot(
+    document,
+    <StrictMode>
+      <ClientCacheProvider>
+        <RemixBrowser />
+      </ClientCacheProvider>
+    </StrictMode>
+  );
+});

chakra-ui/app/entry.server.tsx

@@ -1,128 +1,49 @@
-import { PassThrough } from "stream";
+import type { AppLoadContext, EntryContext } from "@remix-run/node";
+import { renderToString } from "react-dom/server";
 
-import createEmotionCache from "@emotion/cache";
-import { CacheProvider as EmotionCacheProvider } from "@emotion/react";
+import { CacheProvider } from "@emotion/react";
+import createEmotionCache from "~/emotion/createEmotionCache";
 import createEmotionServer from "@emotion/server/create-instance";
-import type { AppLoadContext, EntryContext } from "@remix-run/node";
-import { Response } from "@remix-run/node";
+import { ServerStyleContext } from "~/emotion/context";
 import { RemixServer } from "@remix-run/react";
-import isbot from "isbot";
-import { renderToPipeableStream } from "react-dom/server";
-
-const ABORT_DELAY = 5000;
 
-const handleRequest = (
-  request: Request,
-  responseStatusCode: number,
-  responseHeaders: Headers,
-  remixContext: EntryContext,
-  loadContext: AppLoadContext,
-) =>
-  isbot(request.headers.get("user-agent"))
-    ? handleBotRequest(
-        request,
-        responseStatusCode,
-        responseHeaders,
-        remixContext,
-      )
-    : handleBrowserRequest(
-        request,
-        responseStatusCode,
-        responseHeaders,
-        remixContext,
-      );
-export default handleRequest;
+const ABORT_DELAY = 5_000;
 
-const handleBotRequest = (
+export default function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
   remixContext: EntryContext,
-) =>
-  new Promise((resolve, reject) => {
-    let didError = false;
-    const emotionCache = createEmotionCache({ key: "css" });
-
-    const { pipe, abort } = renderToPipeableStream(
-      <EmotionCacheProvider value={emotionCache}>
+  // This is ignored so we can keep it in the template for visibility.  Feel
+  // free to delete this parameter in your app if you're not using it!
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  loadContext: AppLoadContext
+) {
+  const cache = createEmotionCache();
+  const { extractCriticalToChunks } = createEmotionServer(cache);
+
+  const html = renderToString(
+    <ServerStyleContext.Provider value={null}>
+      <CacheProvider value={cache}>
         <RemixServer context={remixContext} url={request.url} />
-      </EmotionCacheProvider>,
-      {
-        onAllReady: () => {
-          const reactBody = new PassThrough();
-          const emotionServer = createEmotionServer(emotionCache);
-
-          const bodyWithStyles = emotionServer.renderStylesToNodeStream();
-          reactBody.pipe(bodyWithStyles);
-
-          responseHeaders.set("Content-Type", "text/html");
-
-          resolve(
-            new Response(bodyWithStyles, {
-              headers: responseHeaders,
-              status: didError ? 500 : responseStatusCode,
-            }),
-          );
-
-          pipe(reactBody);
-        },
-        onShellError: (error: unknown) => {
-          reject(error);
-        },
-        onError: (error: unknown) => {
-          didError = true;
+      </CacheProvider>
+    </ServerStyleContext.Provider>
+  );
 
-          console.error(error);
-        },
-      },
-    );
+  const chunks = extractCriticalToChunks(html);
 
-    setTimeout(abort, ABORT_DELAY);
-  });
-
-const handleBrowserRequest = (
-  request: Request,
-  responseStatusCode: number,
-  responseHeaders: Headers,
-  remixContext: EntryContext,
-) =>
-  new Promise((resolve, reject) => {
-    let didError = false;
-    const emotionCache = createEmotionCache({ key: "css" });
-
-    const { pipe, abort } = renderToPipeableStream(
-      <EmotionCacheProvider value={emotionCache}>
+  const markup = renderToString(
+    <ServerStyleContext.Provider value={chunks.styles}>
+      <CacheProvider value={cache}>
         <RemixServer context={remixContext} url={request.url} />
-      </EmotionCacheProvider>,
-      {
-        onShellReady: () => {
-          const reactBody = new PassThrough();
-          const emotionServer = createEmotionServer(emotionCache);
-
-          const bodyWithStyles = emotionServer.renderStylesToNodeStream();
-          reactBody.pipe(bodyWithStyles);
-
-          responseHeaders.set("Content-Type", "text/html");
-
-          resolve(
-            new Response(bodyWithStyles, {
-              headers: responseHeaders,
-              status: didError ? 500 : responseStatusCode,
-            }),
-          );
-
-          pipe(reactBody);
-        },
-        onShellError: (error: unknown) => {
-          reject(error);
-        },
-        onError: (error: unknown) => {
-          didError = true;
+      </CacheProvider>
+    </ServerStyleContext.Provider>
+  );
 
-          console.error(error);
-        },
-      },
-    );
+  responseHeaders.set("Content-Type", "text/html");
 
-    setTimeout(abort, ABORT_DELAY);
+  return new Response(`<!DOCTYPE html>${markup}`, {
+    status: responseStatusCode,
+    headers: responseHeaders,
   });
+}