3f8f72bf9b
Follow up for https://github.com/vercel/next.js/pull/40415 Remove internal next client api determination, fully relying on `'client'` directive. Change `.client.js` extension to `.js ` in tests, remove legacy / unused test files
43 lines
1.3 KiB
JavaScript
43 lines
1.3 KiB
JavaScript
'client'
|
|
|
|
import React from 'react'
|
|
import { StyleRegistry, createStyleRegistry } from 'styled-jsx'
|
|
import { ServerStyleSheet, StyleSheetManager } from 'styled-components'
|
|
import { useFlushEffects } from 'next/dist/client/components/hooks-client'
|
|
import { useState } from 'react'
|
|
|
|
export default function RootStyleRegistry({ children }) {
|
|
const [jsxStyleRegistry] = useState(() => createStyleRegistry())
|
|
const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet())
|
|
const styledJsxFlushEffect = () => {
|
|
const styles = jsxStyleRegistry.styles()
|
|
jsxStyleRegistry.flush()
|
|
return <>{styles}</>
|
|
}
|
|
const styledComponentsFlushEffect = () => {
|
|
const styles = styledComponentsStyleSheet.getStyleElement()
|
|
styledComponentsStyleSheet.seal()
|
|
|
|
return <>{styles}</>
|
|
}
|
|
|
|
// Allow multiple useFlushEffects
|
|
useFlushEffects(() => {
|
|
return <>{styledJsxFlushEffect()}</>
|
|
})
|
|
|
|
useFlushEffects(() => {
|
|
return <>{styledComponentsFlushEffect()}</>
|
|
})
|
|
|
|
// Only include style registry on server side for SSR
|
|
if (typeof window === 'undefined') {
|
|
return (
|
|
<StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
|
|
<StyleRegistry registry={jsxStyleRegistry}>{children}</StyleRegistry>
|
|
</StyleSheetManager>
|
|
)
|
|
}
|
|
|
|
return children
|
|
}
|