Use SSR env variable for easier logic separation

silvenon · silvenon · commit d8761057ea33 · 2024-04-08T03:07:36.000+02:00
Since it gets replaced during build, dead code also gets removed.
diff --git a/app/root.tsx b/app/root.tsx
@@ -73,14 +73,13 @@ export function Layout({ children }: { children: React.ReactNode }) {
   const data = useRouteLoaderData<typeof loader>('root')
   const error = useRouteError()
   const origin = data?.origin ?? window.location.origin
-  const hasJs = typeof document !== 'undefined'
 
   return (
     <AnalyticsProvider>
       <DarkMode.Provider sessionValue={error !== null || data?.darkMode}>
         <DarkMode.Html
           lang="en"
-          className={clsx('h-full', hasJs ? 'js' : 'no-js')}
+          className={clsx('h-full', import.meta.env.SSR ? 'no-js' : 'js')}
         >
           <head>
             {data?.appName === 'silvenon-staging' && (
diff --git a/app/services/dark-mode.tsx b/app/services/dark-mode.tsx
@@ -24,7 +24,7 @@ function DarkModeProvider({ sessionValue, children }: ProviderProps) {
   const sessionFetcher = useFetcher({ key: FETCHER_KEY })
   const optimisticSessionValueRef = useRef<boolean | undefined>(undefined)
   const [matchesValue, setMatchesValue] = useState<boolean | null>(() => {
-    if (typeof document === 'undefined') {
+    if (import.meta.env.SSR) {
       // there's no way for us to know what the theme should be in this context
       // the client will have to figure it out before hydration.
       return null
