-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Align server code with other loathers projects
- Loading branch information
Showing
4 changed files
with
152 additions
and
70 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,32 +1,28 @@ | ||
| import createEmotionCache from "@emotion/cache"; | ||
| import { CacheProvider } from "@emotion/react"; | ||
| import { RemixBrowser } from "@remix-run/react"; | ||
| import React, { useState } from "react"; | ||
| import { startTransition, StrictMode } from "react"; | ||
| import { hydrateRoot } from "react-dom/client"; | ||
|
|
||
| import { ClientStyleContext } from "./context.js"; | ||
| import createEmotionCache, { defaultCache } from "./createEmotionCache.js"; | ||
| const hydrate = () => { | ||
| const emotionCache = createEmotionCache({ key: "css" }); | ||
|
|
||
| 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()); | ||
| } | ||
|
|
||
| return ( | ||
| <ClientStyleContext.Provider value={{ reset }}> | ||
| <CacheProvider value={cache}>{children}</CacheProvider> | ||
| </ClientStyleContext.Provider> | ||
| ); | ||
| if (typeof requestIdleCallback === "function") { | ||
| requestIdleCallback(hydrate); | ||
| } else { | ||
| // Safari doesn't support requestIdleCallback | ||
| // https://caniuse.com/requestidlecallback | ||
| setTimeout(hydrate, 1); | ||
| } | ||
|
|
||
| hydrateRoot( | ||
| document, | ||
| <ClientCacheProvider> | ||
| <RemixBrowser /> | ||
| </ClientCacheProvider>, | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,45 +1,142 @@ | ||
| import { CacheProvider } from "@emotion/react"; | ||
| import createEmotionCache from "@emotion/cache"; | ||
| import { CacheProvider as EmotionCacheProvider } from "@emotion/react"; | ||
| import createEmotionServer from "@emotion/server/create-instance"; | ||
| import type { EntryContext } from "@remix-run/node"; | ||
| import type { AppLoadContext, EntryContext } from "@remix-run/node"; | ||
| import { RemixServer } from "@remix-run/react"; | ||
| import React from "react"; | ||
| import { renderToString } from "react-dom/server"; | ||
| import { Response } from "@remix-run/web-fetch"; | ||
| import { isbot } from "isbot"; | ||
| import { renderToPipeableStream } from "react-dom/server"; | ||
| import { PassThrough } from "stream"; | ||
|
|
||
| // Depends on the runtime you choose | ||
| import { ServerStyleContext } from "./context.js"; | ||
| import createEmotionCache from "./createEmotionCache.js"; | ||
| const ABORT_DELAY = 5000; | ||
|
|
||
| export default function handleRequest( | ||
| const handleRequest = ( | ||
| request: Request, | ||
| responseStatusCode: number, | ||
| responseHeaders: Headers, | ||
| remixContext: EntryContext, | ||
| ) { | ||
| const cache = createEmotionCache(); | ||
| const { extractCriticalToChunks } = createEmotionServer(cache); | ||
| // 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, | ||
| ) => | ||
| isbot(request.headers.get("user-agent")) | ||
| ? handleBotRequest( | ||
| request, | ||
| responseStatusCode, | ||
| responseHeaders, | ||
| remixContext, | ||
| ) | ||
| : handleBrowserRequest( | ||
| request, | ||
| responseStatusCode, | ||
| responseHeaders, | ||
| remixContext, | ||
| ); | ||
| export default handleRequest; | ||
|
|
||
| const html = renderToString( | ||
| <ServerStyleContext.Provider value={null}> | ||
| <CacheProvider value={cache}> | ||
| const handleBotRequest = ( | ||
| request: Request, | ||
| responseStatusCode: number, | ||
| responseHeaders: Headers, | ||
| remixContext: EntryContext, | ||
| ) => | ||
| new Promise((resolve, reject) => { | ||
| let shellRendered = false; | ||
| const emotionCache = createEmotionCache({ key: "css" }); | ||
|
|
||
| const { pipe, abort } = renderToPipeableStream( | ||
| <EmotionCacheProvider value={emotionCache}> | ||
| <RemixServer context={remixContext} url={request.url} /> | ||
| </CacheProvider> | ||
| </ServerStyleContext.Provider>, | ||
| ); | ||
| </EmotionCacheProvider>, | ||
| { | ||
| onAllReady: () => { | ||
| shellRendered = true; | ||
| const reactBody = new PassThrough(); | ||
| const emotionServer = createEmotionServer(emotionCache); | ||
|
|
||
| const bodyWithStyles = emotionServer.renderStylesToNodeStream(); | ||
| reactBody.pipe(bodyWithStyles); | ||
|
|
||
| responseHeaders.set("Content-Type", "text/html"); | ||
|
|
||
| resolve( | ||
| // @ts-expect-error: Stream is not compatible with ReadWriteStream | ||
| new Response(bodyWithStyles, { | ||
| headers: responseHeaders, | ||
| status: responseStatusCode, | ||
| }), | ||
| ); | ||
|
|
||
| pipe(reactBody); | ||
| }, | ||
| onShellError: (error: unknown) => { | ||
| reject(error); | ||
| }, | ||
| onError: (error: unknown) => { | ||
| responseStatusCode = 500; | ||
| // Log streaming rendering errors from inside the shell. Don't log | ||
| // errors encountered during initial shell rendering since they'll | ||
| // reject and get logged in handleDocumentRequest. | ||
| if (shellRendered) { | ||
| console.error(error); | ||
| } | ||
| }, | ||
| }, | ||
| ); | ||
|
|
||
| const chunks = extractCriticalToChunks(html); | ||
| setTimeout(abort, ABORT_DELAY); | ||
| }); | ||
|
|
||
| const markup = renderToString( | ||
| <ServerStyleContext.Provider value={chunks.styles}> | ||
| <CacheProvider value={cache}> | ||
| const handleBrowserRequest = ( | ||
| request: Request, | ||
| responseStatusCode: number, | ||
| responseHeaders: Headers, | ||
| remixContext: EntryContext, | ||
| ) => | ||
| new Promise((resolve, reject) => { | ||
| const emotionCache = createEmotionCache({ key: "css" }); | ||
|
|
||
| let shellRendered = false; | ||
| const { pipe, abort } = renderToPipeableStream( | ||
| <EmotionCacheProvider value={emotionCache}> | ||
| <RemixServer context={remixContext} url={request.url} /> | ||
| </CacheProvider> | ||
| </ServerStyleContext.Provider>, | ||
| ); | ||
| </EmotionCacheProvider>, | ||
| { | ||
| onShellReady: () => { | ||
| shellRendered = true; | ||
| const reactBody = new PassThrough(); | ||
| const emotionServer = createEmotionServer(emotionCache); | ||
|
|
||
| const bodyWithStyles = emotionServer.renderStylesToNodeStream(); | ||
| reactBody.pipe(bodyWithStyles); | ||
|
|
||
| responseHeaders.set("Content-Type", "text/html"); | ||
|
|
||
| resolve( | ||
| // @ts-expect-error: Stream is not compatible with ReadWriteStream | ||
| new Response(bodyWithStyles, { | ||
| headers: responseHeaders, | ||
| status: responseStatusCode, | ||
| }), | ||
| ); | ||
|
|
||
| responseHeaders.set("Content-Type", "text/html"); | ||
| pipe(reactBody); | ||
| }, | ||
| onShellError: (error: unknown) => { | ||
| reject(error); | ||
| }, | ||
| onError: (error: unknown) => { | ||
| responseStatusCode = 500; | ||
| // Log streaming rendering errors from inside the shell. Don't log | ||
| // errors encountered during initial shell rendering since they'll | ||
| // reject and get logged in handleDocumentRequest. | ||
| if (shellRendered) { | ||
| console.error(error); | ||
| } | ||
| }, | ||
| }, | ||
| ); | ||
|
|
||
| return new Response(`<!DOCTYPE html>${markup}`, { | ||
| status: responseStatusCode, | ||
| headers: responseHeaders, | ||
| setTimeout(abort, ABORT_DELAY); | ||
| }); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters