feat(remix-island): setup (#13)

Co-authored-by: Shayne Preston <shayne.preston@protonmail.com>
prests · Nov 30, 2024 · 8eb98c9 · 8eb98c9
1 parent 79aa718
commit 8eb98c9
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 24 deletions.
diff --git a/package.json b/package.json
@@ -69,6 +69,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "remix-hono": "^0.0.16",
+    "remix-island": "^0.2.0",
     "zod": "^3.23.8"
   },
   "devDependencies": {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/remix-app/Document.tsx b/src/remix-app/Document.tsx
@@ -0,0 +1,30 @@
+import { Links, Meta, Scripts, ScrollRestoration } from '@remix-run/react';
+import { createHead } from 'remix-island';
+
+import { useNonce } from './hooks/nonce';
+
+import type { PropsWithChildren } from 'react';
+
+const Head = createHead(() => (
+  <>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <Meta />
+    <Links />
+  </>
+));
+
+const Document = ({ children }: PropsWithChildren) => {
+  const nonce = useNonce();
+
+  return (
+    <>
+      <Head />
+      {children}
+
+      <ScrollRestoration nonce={nonce ?? undefined} />
+      <Scripts nonce={nonce ?? undefined} />
+    </>
+  );
+};
+
+export { Document, Head };
diff --git a/src/remix-app/entry.client.tsx b/src/remix-app/entry.client.tsx
@@ -4,7 +4,7 @@ import { hydrateRoot } from 'react-dom/client';
 
 startTransition(() => {
   hydrateRoot(
-    document,
+    document.getElementById('root')!,
     <StrictMode>
       <RemixBrowser />
     </StrictMode>

diff --git a/src/remix-app/entry.server.tsx b/src/remix-app/entry.server.tsx
@@ -4,11 +4,18 @@ import { createReadableStreamFromReadable } from '@remix-run/node';
 import { RemixServer } from '@remix-run/react';
 import { isbot } from 'isbot';
 import { renderToPipeableStream } from 'react-dom/server';
+import { renderHeadToString } from 'remix-island';
 
+import { Head } from './Document';
 import NonceProvider from './hooks/nonce';
 
 import type { AppLoadContext, EntryContext } from '@remix-run/node';
 
+const CLOSING_HTML = '</div></body></html>' as const;
+
+const generateOpeningHTML = (nonce: string, headStr: string) =>
+  `<!DOCTYPE html><html><head><meta charSet="utf-8" nonce="${nonce}" />${headStr}</head><body><div id="root">`;
+
 const handleRequest = (
   request: Request,
   responseStatusCode: number,
@@ -36,6 +43,7 @@ const handleBotRequest = (
       {
         onAllReady() {
           shellRendered = true;
+          const headStr = renderHeadToString({ request, remixContext, Head });
           const body = new PassThrough();
           const stream = createReadableStreamFromReadable(body);
 
@@ -48,7 +56,9 @@ const handleBotRequest = (
             })
           );
 
+          body.write(generateOpeningHTML(loadContext.nonce, headStr));
           pipe(body);
+          body.write(CLOSING_HTML);
         },
         onShellError(error: unknown) {
           reject(error);
@@ -84,6 +94,7 @@ const handleBrowserRequest = (
       {
         onShellReady() {
           shellRendered = true;
+          const headStr = renderHeadToString({ request, remixContext, Head });
           const body = new PassThrough();
           const stream = createReadableStreamFromReadable(body);
 
@@ -96,7 +107,9 @@ const handleBrowserRequest = (
             })
           );
 
+          body.write(generateOpeningHTML(loadContext.nonce, headStr));
           pipe(body);
+          body.write(CLOSING_HTML);
         },
         onShellError(error: unknown) {
           reject(error);

diff --git a/src/remix-app/root.tsx b/src/remix-app/root.tsx
@@ -1,6 +1,6 @@
-import { Links, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react';
+import { Outlet } from '@remix-run/react';
 
-import { useNonce } from './hooks/nonce';
+import { Document } from './Document';
 import stylexStylesheet from './main.css?url';
 
 import type { LinksFunction } from '@remix-run/node';
@@ -12,27 +12,11 @@ const links: LinksFunction = () => [
   },
 ];
 
-const App = () => {
-  const nonce = useNonce();
-
-  return (
-    <html lang="en">
-      <head>
-        <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <Meta />
-        <Links />
-      </head>
-
-      <body>
-        <Outlet />
-
-        <ScrollRestoration nonce={nonce ?? undefined} />
-        <Scripts nonce={nonce ?? undefined} />
-      </body>
-    </html>
-  );
-};
+const App = () => (
+  <Document>
+    <Outlet />
+  </Document>
+);
 
 export default App;
 export { links };