From a4a043739655a618c8309aceb6e33e7756f5e391 Mon Sep 17 00:00:00 2001 From: Jiachi Liu Date: Tue, 16 Aug 2022 16:50:54 +0200 Subject: [PATCH] Separate registry (#17) --- app/layout.server.tsx | 3 -- .../styled-components/layout.server.tsx | 9 ++++++ .../styled-components/registry.client.tsx | 31 +++++++++++++++++++ app/styling/styled-jsx/layout.server.tsx | 9 ++++++ app/styling/styled-jsx/registry.client.tsx | 29 +++++++++++++++++ 5 files changed, 78 insertions(+), 3 deletions(-) create mode 100644 app/styling/styled-components/layout.server.tsx create mode 100644 app/styling/styled-components/registry.client.tsx create mode 100644 app/styling/styled-jsx/layout.server.tsx create mode 100644 app/styling/styled-jsx/registry.client.tsx diff --git a/app/layout.server.tsx b/app/layout.server.tsx index 640406e7..9f020db7 100644 --- 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 }) { Next.js Layouts and Routing Playground -
@@ -34,7 +32,6 @@ export default function RootLayout({ children }: { children: any }) {
- ); } diff --git a/app/styling/styled-components/layout.server.tsx b/app/styling/styled-components/layout.server.tsx new file mode 100644 index 00000000..223f432f --- /dev/null +++ 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 ( + + {children} + + ) +} \ No newline at end of file diff --git a/app/styling/styled-components/registry.client.tsx b/app/styling/styled-components/registry.client.tsx new file mode 100644 index 00000000..d476a778 --- /dev/null +++ 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 ( + + {children} + + ); + } + + return children; +} diff --git a/app/styling/styled-jsx/layout.server.tsx b/app/styling/styled-jsx/layout.server.tsx new file mode 100644 index 00000000..1b4094ab --- /dev/null +++ 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 ( + + {children} + + ) +} \ No newline at end of file diff --git a/app/styling/styled-jsx/registry.client.tsx b/app/styling/styled-jsx/registry.client.tsx new file mode 100644 index 00000000..7a8640b3 --- /dev/null +++ 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 ( + {children} + + ); + } + + return children; +}