mirror of https://github.com/buster-so/buster.git
Update tanstack for prod
This commit is contained in:
parent
7248ce9415
commit
a20ec3cd5e
|
@ -3,10 +3,20 @@ import React, { lazy, Suspense } from 'react';
|
||||||
import { useMount } from '@/hooks/useMount';
|
import { useMount } from '@/hooks/useMount';
|
||||||
import { isServer } from '@/lib/window';
|
import { isServer } from '@/lib/window';
|
||||||
|
|
||||||
|
const isProduction = import.meta.env.PROD;
|
||||||
|
|
||||||
// Only create lazy components if we're in the browser
|
// Only create lazy components if we're in the browser
|
||||||
const LazyTanstackDevtools = !import.meta.env.SSR
|
const LazyTanstackDevtools = !import.meta.env.SSR
|
||||||
? lazy(() =>
|
? lazy(() =>
|
||||||
import('@tanstack/react-devtools').then((mod) => ({
|
import('@tanstack/react-devtools/production').then((mod) => ({
|
||||||
|
default: mod.TanStackDevtools,
|
||||||
|
}))
|
||||||
|
)
|
||||||
|
: () => null;
|
||||||
|
|
||||||
|
const LazyTanstackDevtoolsInProd = !import.meta.env.SSR
|
||||||
|
? lazy(() =>
|
||||||
|
import('@tanstack/react-devtools/production').then((mod) => ({
|
||||||
default: mod.TanStackDevtools,
|
default: mod.TanStackDevtools,
|
||||||
}))
|
}))
|
||||||
)
|
)
|
||||||
|
@ -20,10 +30,20 @@ const LazyReactQueryDevtoolsPanel = !import.meta.env.SSR
|
||||||
)
|
)
|
||||||
: () => null;
|
: () => null;
|
||||||
|
|
||||||
|
const LazyReactQueryDevtoolsPanelInProd = !import.meta.env.SSR
|
||||||
|
? lazy(() =>
|
||||||
|
import('@tanstack/react-query-devtools/production').then((mod) => ({
|
||||||
|
default: mod.ReactQueryDevtoolsPanel,
|
||||||
|
}))
|
||||||
|
)
|
||||||
|
: () => null;
|
||||||
|
|
||||||
const LazyTanStackRouterDevtoolsPanel = !import.meta.env.SSR
|
const LazyTanStackRouterDevtoolsPanel = !import.meta.env.SSR
|
||||||
? lazy(() =>
|
? lazy(() =>
|
||||||
import('@tanstack/react-router-devtools').then((mod) => ({
|
import('@tanstack/react-router-devtools').then((mod) => ({
|
||||||
default: mod.TanStackRouterDevtoolsPanel,
|
default: isProduction
|
||||||
|
? mod.TanStackRouterDevtoolsPanelInProd
|
||||||
|
: mod.TanStackRouterDevtoolsPanel,
|
||||||
}))
|
}))
|
||||||
)
|
)
|
||||||
: () => null;
|
: () => null;
|
||||||
|
@ -43,6 +63,11 @@ const TanstackDevtoolsImpl: React.FC = React.memo(() => {
|
||||||
});
|
});
|
||||||
const isServerOrSSR = isServer && import.meta.env.SSR;
|
const isServerOrSSR = isServer && import.meta.env.SSR;
|
||||||
|
|
||||||
|
const TanstackDevtools = isProduction ? LazyTanstackDevtoolsInProd : LazyTanstackDevtools;
|
||||||
|
const ReactQueryDevtoolsPanel = isProduction
|
||||||
|
? LazyReactQueryDevtoolsPanelInProd
|
||||||
|
: LazyReactQueryDevtoolsPanel;
|
||||||
|
|
||||||
if (isServerOrSSR) {
|
if (isServerOrSSR) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
@ -50,7 +75,7 @@ const TanstackDevtoolsImpl: React.FC = React.memo(() => {
|
||||||
return (
|
return (
|
||||||
<ClientOnly>
|
<ClientOnly>
|
||||||
<Suspense fallback={null}>
|
<Suspense fallback={null}>
|
||||||
<LazyTanstackDevtools
|
<TanstackDevtools
|
||||||
config={{
|
config={{
|
||||||
position: 'bottom-left',
|
position: 'bottom-left',
|
||||||
hideUntilHover: true,
|
hideUntilHover: true,
|
||||||
|
@ -61,7 +86,7 @@ const TanstackDevtoolsImpl: React.FC = React.memo(() => {
|
||||||
name: 'Tanstack Query',
|
name: 'Tanstack Query',
|
||||||
render: (
|
render: (
|
||||||
<Suspense fallback={null}>
|
<Suspense fallback={null}>
|
||||||
<LazyReactQueryDevtoolsPanel />
|
<ReactQueryDevtoolsPanel />
|
||||||
</Suspense>
|
</Suspense>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue