Fix runtime errors in browser

This commit is contained in:
Zoe Roux 2025-02-01 23:17:40 +01:00
parent f907f2158b
commit 23a7e7b025
No known key found for this signature in database
5 changed files with 42 additions and 63 deletions

View File

@ -1,5 +1,4 @@
import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { prefix } from "inline-style-prefixer/lib";
import { Slot } from "one"; import { Slot } from "one";
// import { WebTooltip } from "@kyoo/primitives/src/tooltip.web"; // import { WebTooltip } from "@kyoo/primitives/src/tooltip.web";
// import { HiddenIfNoJs, SkeletonCss, TouchOnlyCss } from "@kyoo/primitives"; // import { HiddenIfNoJs, SkeletonCss, TouchOnlyCss } from "@kyoo/primitives";
@ -8,7 +7,6 @@ import { StyleRegistryProvider, createStyleRegistry, useTheme } from "yoshiki/we
import { Providers } from "~/providers"; import { Providers } from "~/providers";
const GlobalCssTheme = () => { const GlobalCssTheme = () => {
console.log(prefix("test"));
const theme = useTheme(); const theme = useTheme();
// TODO: add fonts here // TODO: add fonts here
// body {font-family: ${font.style.fontFamily};} // body {font-family: ${font.style.fontFamily};}
@ -68,27 +66,27 @@ export default function Layout() {
// TODO: change this lang attr // TODO: change this lang attr
return ( return (
<StyleRegistryProvider registry={registry}> <html lang="en-US">
<html lang="en-US"> <head>
<head> <title>Kyoo</title>
<title>Kyoo</title> <meta charSet="utf-8" />
<meta charSet="utf-8" /> <meta name="description" content="A portable and vast media library solution." />
<meta name="description" content="A portable and vast media library solution." /> <link rel="icon" type="image/png" sizes="16x16" href="/icon-16x16.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/icon-16x16.png" /> <link rel="icon" type="image/png" sizes="32x32" href="/icon-32x32.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/icon-32x32.png" /> <link rel="icon" type="image/png" sizes="64x64" href="/icon-64x64.png" />
<link rel="icon" type="image/png" sizes="64x64" href="/icon-64x64.png" /> <link rel="icon" type="image/png" sizes="128x128" href="/icon-128x128.png" />
<link rel="icon" type="image/png" sizes="128x128" href="/icon-128x128.png" /> <link rel="icon" type="image/png" sizes="256x256" href="/icon-256x256.png" />
<link rel="icon" type="image/png" sizes="256x256" href="/icon-256x256.png" /> {/* <GlobalCssTheme /> */}
<GlobalCssTheme /> </head>
</head>
<body className="hoverEnabled"> <body className="hoverEnabled">
<Providers> <StyleRegistryProvider registry={registry}>
<Slot /> {/* <Providers> */}
<ReactQueryDevtools initialIsOpen={false} /> <Slot />
</Providers> {/* <ReactQueryDevtools initialIsOpen={false} /> */}
</body> {/* </Providers> */}
</html> </StyleRegistryProvider>
</StyleRegistryProvider> </body>
</html>
); );
} }

View File

@ -18,7 +18,6 @@
"react-native-safe-area-context": "5.1.0", "react-native-safe-area-context": "5.1.0",
"react-native-screens": "4.6.0", "react-native-screens": "4.6.0",
"react-native-web": "^0.19.13", "react-native-web": "^0.19.13",
"vite-plugin-commonjs": "^0.10.4",
}, },
"devDependencies": { "devDependencies": {
"@biomejs/biome": "1.9.4", "@biomejs/biome": "1.9.4",
@ -1683,8 +1682,6 @@
"lru-cache": ["lru-cache@10.4.3", "", {}, "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ=="], "lru-cache": ["lru-cache@10.4.3", "", {}, "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ=="],
"magic-string": ["magic-string@0.30.17", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0" } }, "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA=="],
"make-dir": ["make-dir@2.1.0", "", { "dependencies": { "pify": "^4.0.1", "semver": "^5.6.0" } }, "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA=="], "make-dir": ["make-dir@2.1.0", "", { "dependencies": { "pify": "^4.0.1", "semver": "^5.6.0" } }, "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA=="],
"makeerror": ["makeerror@1.0.12", "", { "dependencies": { "tmpl": "1.0.5" } }, "sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg=="], "makeerror": ["makeerror@1.0.12", "", { "dependencies": { "tmpl": "1.0.5" } }, "sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg=="],
@ -2303,10 +2300,6 @@
"vite-plugin-barrel": ["vite-plugin-barrel@0.4.1", "", { "dependencies": { "@swc/core": "1.7.26", "debug": "^4.3.4", "oxc-resolver": "1.9.3", "swc-plugin-barrel": "0.3.0" }, "peerDependencies": { "vite": "^5" } }, "sha512-79HEEzwmacSUjCHXEQcTRKA6I0QPMom+0nQRj/5eppDEKC1WFz2+m14wKrTxPmSeCe5MoCIitoJzrtDrj/YdRQ=="], "vite-plugin-barrel": ["vite-plugin-barrel@0.4.1", "", { "dependencies": { "@swc/core": "1.7.26", "debug": "^4.3.4", "oxc-resolver": "1.9.3", "swc-plugin-barrel": "0.3.0" }, "peerDependencies": { "vite": "^5" } }, "sha512-79HEEzwmacSUjCHXEQcTRKA6I0QPMom+0nQRj/5eppDEKC1WFz2+m14wKrTxPmSeCe5MoCIitoJzrtDrj/YdRQ=="],
"vite-plugin-commonjs": ["vite-plugin-commonjs@0.10.4", "", { "dependencies": { "acorn": "^8.12.1", "magic-string": "^0.30.11", "vite-plugin-dynamic-import": "^1.6.0" } }, "sha512-eWQuvQKCcx0QYB5e5xfxBNjQKyrjEWZIR9UOkOV6JAgxVhtbZvCOF+FNC2ZijBJ3U3Px04ZMMyyMyFBVWIJ5+g=="],
"vite-plugin-dynamic-import": ["vite-plugin-dynamic-import@1.6.0", "", { "dependencies": { "acorn": "^8.12.1", "es-module-lexer": "^1.5.4", "fast-glob": "^3.3.2", "magic-string": "^0.30.11" } }, "sha512-TM0sz70wfzTIo9YCxVFwS8OA9lNREsh+0vMHGSkWDTZ7bgd1Yjs5RV8EgB634l/91IsXJReg0xtmuQqP0mf+rg=="],
"vite-tsconfig-paths": ["vite-tsconfig-paths@5.1.4", "", { "dependencies": { "debug": "^4.1.1", "globrex": "^0.1.2", "tsconfck": "^3.0.3" }, "peerDependencies": { "vite": "*" }, "optionalPeers": ["vite"] }, "sha512-cYj0LRuLV2c2sMqhqhGpaO3LretdtMn/BVX4cPLanIZuwwrkVl+lK84E/miEXkCHWXuq65rhNN4rXsBcOB3S4w=="], "vite-tsconfig-paths": ["vite-tsconfig-paths@5.1.4", "", { "dependencies": { "debug": "^4.1.1", "globrex": "^0.1.2", "tsconfck": "^3.0.3" }, "peerDependencies": { "vite": "*" }, "optionalPeers": ["vite"] }, "sha512-cYj0LRuLV2c2sMqhqhGpaO3LretdtMn/BVX4cPLanIZuwwrkVl+lK84E/miEXkCHWXuq65rhNN4rXsBcOB3S4w=="],
"vlq": ["vlq@1.0.1", "", {}, "sha512-gQpnTgkubC6hQgdIcRdYGDSDc+SaujOdyesZQMv6JlfQee/9Mp0Qhnys6WxDWvQnL5WZdT7o2Ul187aSt0Rq+w=="], "vlq": ["vlq@1.0.1", "", {}, "sha512-gQpnTgkubC6hQgdIcRdYGDSDc+SaujOdyesZQMv6JlfQee/9Mp0Qhnys6WxDWvQnL5WZdT7o2Ul187aSt0Rq+w=="],

View File

@ -28,8 +28,7 @@
"react-native-reanimated": "~3.16.7", "react-native-reanimated": "~3.16.7",
"react-native-safe-area-context": "5.1.0", "react-native-safe-area-context": "5.1.0",
"react-native-screens": "4.6.0", "react-native-screens": "4.6.0",
"react-native-web": "^0.19.13", "react-native-web": "^0.19.13"
"vite-plugin-commonjs": "^0.10.4"
}, },
"devDependencies": { "devDependencies": {
"@biomejs/biome": "1.9.4", "@biomejs/biome": "1.9.4",

View File

@ -1,7 +1,7 @@
// import { useUserTheme } from "@kyoo/models"; // import { useUserTheme } from "@kyoo/models";
import { ThemeSelector } from "@kyoo/primitives"; import { ThemeSelector } from "@kyoo/primitives";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ComponentType, ReactNode, useState } from "react"; import { ComponentType, type ReactNode, useState } from "react";
const QueryProvider = ({ children }: { children: ReactNode }) => { const QueryProvider = ({ children }: { children: ReactNode }) => {
// const [queryClient] = useState(() => createQueryClient()); // const [queryClient] = useState(() => createQueryClient());
@ -20,32 +20,10 @@ const ThemeProvider = ({ children }: { children: ReactNode }) => {
); );
}; };
type ProviderComponent<P = {}> = ComponentType<{ children: ReactNode } & P>; export const Providers = ({ children }: { children: ReactNode }) => {
type Provider = ProviderComponent; return (
<QueryProvider>
const withProviders = ( <ThemeProvider>{children}</ThemeProvider>
providers: Provider[], </QueryProvider>
): ComponentType<{ );
children: ReactNode;
}> => {
const ProviderImpl = ({ children }: { children: ReactNode }) => {
return providers.reduceRight(
(acc, Prov) => <Prov key={Prov.displayName}>{acc}</Prov>,
children,
);
};
return ProviderImpl;
}; };
export const Providers = withProviders([
QueryProvider,
// AccountProvider,
// HydratationBoundary,
ThemeProvider,
// PortalProvider,
// SnackbarProvider
// ConnectionErrorVerifier
// DownloadProvider
// NavigationThemeProvider
// WithLayout
]);

View File

@ -5,8 +5,13 @@ import type { UserConfig } from "vite";
export default { export default {
ssr: { ssr: {
// needed to fix ssr error of react-query // needed to fix ssr error of react-query
noExternal: true, // noExternal: true,
}, },
// optimizeDeps: {
// esbuildOptions: {
// jsx: "automatic",
// },
// },
plugins: [ plugins: [
one({ one({
deps: { deps: {
@ -16,7 +21,13 @@ export default {
"inline-style-prefixer": "interop", "inline-style-prefixer": "interop",
"inline-style-prefixer/**": "interop", "inline-style-prefixer/**": "interop",
"inline-style-prefixer/lib": "interop", "inline-style-prefixer/lib": "interop",
yoshiki: "interop", yoshiki: {
"**/*.tsx": ["jsx"],
},
// yoshiki: "exclude",
// "yoshiki > inline-style-prefixer/**": "interop",
// "yoshiki > inline-style-prefixer": "interop",
// "yoshiki > inline-style-prefixer/lib": "interop",
}, },
}), }),
], ],