Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-07-09 03:04:20 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fix Yoshiki ssr mismatch

Browse Source
This commit is contained in:
Zoe Roux 2023-01-26 22:43:49 +09:00 committed by Zoe Roux
parent bc878a2e90
commit 91289c8588
1 changed files with 22 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
front/apps/web/src/pages/_app.tsx
View File

@ -26,7 +26,7 @@ import { createQueryClient, fetchQuery, QueryIdentifier, QueryPage } from "@kyoo
import { useState } from "react"; import { useState } from "react";
import NextApp, { AppContext, type AppProps } from "next/app"; import NextApp, { AppContext, type AppProps } from "next/app";
import { Poppins } from "@next/font/google"; import { Poppins } from "@next/font/google";
import { useTheme, useMobileHover } from "yoshiki/web"; import { useTheme, useMobileHover, useStyleRegistry, StyleRegistryProvider } from "yoshiki/web";
import superjson from "superjson"; import superjson from "superjson";
import Head from "next/head"; import Head from "next/head";
import { withTranslations } from "../i18n"; import { withTranslations } from "../i18n";
@ -80,6 +80,12 @@ const GlobalCssTheme = () => {
); );
}; };
const YoshikiDebug = ({ children }: { children: JSX.Element }) => {
if (typeof window === "undefined") return children;
const registry = useStyleRegistry();
return <StyleRegistryProvider registry={registry}>{children}</StyleRegistryProvider>;
};
const App = ({ Component, pageProps }: AppProps) => { const App = ({ Component, pageProps }: AppProps) => {
const [queryClient] = useState(() => createQueryClient()); const [queryClient] = useState(() => createQueryClient());
const { queryState, ...props } = superjson.deserialize<any>(pageProps ?? { json: {} }); const { queryState, ...props } = superjson.deserialize<any>(pageProps ?? { json: {} });
@ -90,6 +96,7 @@ const App = ({ Component, pageProps }: AppProps) => {
useMobileHover(); useMobileHover();
return ( return (
<YoshikiDebug>
<> <>
<Head> <Head>
<title>Kyoo</title> <title>Kyoo</title>
@ -103,6 +110,7 @@ const App = ({ Component, pageProps }: AppProps) => {
</Hydrate> </Hydrate>
</QueryClientProvider> </QueryClientProvider>
</> </>
</YoshikiDebug>
); );
}; };