fix(browser-extensions): don't render directly in body

stackblitz · Oct 7, 2024 · 3a0336e · 3a0336e
1 parent d656686
commit 3a0336e
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 17 deletions.
diff --git a/app/entry.client.tsx b/app/entry.client.tsx
@@ -3,5 +3,5 @@ import { startTransition } from 'react';
 import { hydrateRoot } from 'react-dom/client';
 
 startTransition(() => {
-  hydrateRoot(document, <RemixBrowser />);
+  hydrateRoot(document.getElementById('root')!, <RemixBrowser />);
 });
diff --git a/app/entry.server.tsx b/app/entry.server.tsx
@@ -2,6 +2,9 @@ import type { AppLoadContext, EntryContext } from '@remix-run/cloudflare';
 import { RemixServer } from '@remix-run/react';
 import { isbot } from 'isbot';
 import { renderToReadableStream } from 'react-dom/server';
+import { renderHeadToString } from 'remix-island';
+import { Head } from './root';
+import { themeStore } from '~/lib/stores/theme';
 
 export default async function handleRequest(
   request: Request,
@@ -10,16 +13,57 @@ export default async function handleRequest(
   remixContext: EntryContext,
   _loadContext: AppLoadContext,
 ) {
-  const body = await renderToReadableStream(<RemixServer context={remixContext} url={request.url} />, {
+  const readable = await renderToReadableStream(<RemixServer context={remixContext} url={request.url} />, {
     signal: request.signal,
     onError(error: unknown) {
       console.error(error);
       responseStatusCode = 500;
     },
   });
 
+  const body = new ReadableStream({
+    start(controller) {
+      const head = renderHeadToString({ request, remixContext, Head });
+
+      controller.enqueue(
+        new Uint8Array(
+          new TextEncoder().encode(
+            `<!DOCTYPE html><html lang="en" data-theme="${themeStore.value}"><head>${head}</head><body><div id="root" class="w-full h-full">`,
+          ),
+        ),
+      );
+
+      const reader = readable.getReader();
+
+      function read() {
+        reader
+          .read()
+          .then(({ done, value }) => {
+            if (done) {
+              controller.enqueue(new Uint8Array(new TextEncoder().encode(`</div></body></html>`)));
+              controller.close();
+
+              return;
+            }
+
+            controller.enqueue(value);
+            read();
+          })
+          .catch((error) => {
+            controller.error(error);
+            readable.cancel();
+          });
+      }
+      read();
+    },
+
+    cancel() {
+      readable.cancel();
+    },
+  });
+
   if (isbot(request.headers.get('user-agent') || '')) {
-    await body.allReady;
+    await readable.allReady;
   }
 
   responseHeaders.set('Content-Type', 'text/html');

diff --git a/app/root.tsx b/app/root.tsx
@@ -4,6 +4,8 @@ import { Links, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/reac
 import tailwindReset from '@unocss/reset/tailwind-compat.css?url';
 import { themeStore } from './lib/stores/theme';
 import { stripIndents } from './utils/stripIndent';
+import { createHead } from 'remix-island';
+import { useEffect } from 'react';
 
 import reactToastifyStyles from 'react-toastify/dist/ReactToastify.css?url';
 import globalStyles from './styles/index.scss?url';
@@ -50,24 +52,29 @@ const inlineThemeCode = stripIndents`
   }
 `;
 
+export const Head = createHead(() => (
+  <>
+    <meta charSet="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <Meta />
+    <Links />
+    <script dangerouslySetInnerHTML={{ __html: inlineThemeCode }} />
+  </>
+));
+
 export function Layout({ children }: { children: React.ReactNode }) {
   const theme = useStore(themeStore);
 
+  useEffect(() => {
+    document.querySelector('html')?.setAttribute('data-theme', theme);
+  }, [theme]);
+
   return (
-    <html lang="en" data-theme={theme}>
-      <head>
-        <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <Meta />
-        <Links />
-        <script dangerouslySetInnerHTML={{ __html: inlineThemeCode }} />
-      </head>
-      <body>
-        {children}
-        <ScrollRestoration />
-        <Scripts />
-      </body>
-    </html>
+    <>
+      {children}
+      <ScrollRestoration />
+      <Scripts />
+    </>
   );
 }
 

diff --git a/package.json b/package.json
@@ -73,6 +73,7 @@
     "remark-gfm": "^4.0.0",
     "remix-utils": "^7.6.0",
     "shiki": "^1.9.1",
+    "remix-island": "^0.2.0",
     "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml