Separate registry (#17)

vercel · Aug 16, 2022 · a4a0437 · a4a0437
1 parent 3301fa3
commit a4a0437
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 3 deletions.
diff --git a/app/layout.server.tsx b/app/layout.server.tsx
@@ -1,6 +1,5 @@
 import '@/styles/globals.css';
 import AddressBar from '@/ui/AddressBar.client';
-import RootStyleRegistry from '@/ui/RootStyleRegistry.client';
 import nextPackageJson from 'next/package.json';
 import React from 'react';
 import GlobalNav from './GlobalNav.client';
@@ -11,7 +10,6 @@ export default function RootLayout({ children }: { children: any }) {
       <head>
         <title>Next.js Layouts and Routing Playground</title>
       </head>
-      <RootStyleRegistry>
         <body className="overflow-y-scroll bg-zinc-900">
           <div className="grid grid-cols-[1fr,minmax(auto,240px),min(800px,100%),1fr] gap-x-8 py-8">
             <div className="col-start-2">
@@ -34,7 +32,6 @@ export default function RootLayout({ children }: { children: any }) {
             </div>
           </div>
         </body>
-      </RootStyleRegistry>
     </html>
   );
 }
diff --git a/app/styling/styled-components/layout.server.tsx b/app/styling/styled-components/layout.server.tsx
@@ -0,0 +1,9 @@
+import StyledComponentsRegistry from './registry.client'
+
+export default function Layout({ children }: { children: JSX.Element }) {
+  return (
+    <StyledComponentsRegistry>
+      {children}
+    </StyledComponentsRegistry>
+  )
+}
diff --git a/app/styling/styled-components/registry.client.tsx b/app/styling/styled-components/registry.client.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { useFlushEffects } from 'next/dist/client/components/hooks-client';
+import { useStyledComponentsRegistry } from '@/lib/styling';
+
+export default function StyledComponentsRegistry({
+  children,
+}: {
+  children: JSX.Element
+}) {
+  const [StyledComponentsRegistry, styledComponentsFlushEffect] =
+    useStyledComponentsRegistry();
+
+  useFlushEffects(() => {
+    return (
+      <>
+        {styledComponentsFlushEffect()}
+      </>
+    );
+  });
+
+  // Only include style registry on server side for SSR
+  if (typeof window === 'undefined') {
+    return (
+      <StyledComponentsRegistry>
+        {children}
+      </StyledComponentsRegistry>
+    );
+  }
+
+  return children;
+}
diff --git a/app/styling/styled-jsx/layout.server.tsx b/app/styling/styled-jsx/layout.server.tsx
@@ -0,0 +1,9 @@
+import StyledJsxRegistry from './registry.client'
+
+export default function Layout({ children }: { children: JSX.Element }) {
+  return (
+    <StyledJsxRegistry>
+      {children}
+    </StyledJsxRegistry>
+  )
+}
diff --git a/app/styling/styled-jsx/registry.client.tsx b/app/styling/styled-jsx/registry.client.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { useFlushEffects } from 'next/dist/client/components/hooks-client';
+import { useStyledJsxRegistry } from '@/lib/styling';
+
+export default function StyledJsxRegistry({
+  children,
+}: {
+  children: JSX.Element;
+}) {
+  const [StyledJsxRegistry, styledJsxFlushEffect] = useStyledJsxRegistry();
+
+  useFlushEffects(() => {
+    return (
+      <>
+        {styledJsxFlushEffect()}
+      </>
+    );
+  });
+
+  // Only include style registry on server side for SSR
+  if (typeof window === 'undefined') {
+    return (
+        <StyledJsxRegistry>{children}</StyledJsxRegistry>
+
+    );
+  }
+
+  return children;
+}