From 74959ca54db3a4f5ab2c98146b528bfb6455a4de Mon Sep 17 00:00:00 2001
From: Innei <i@innei.in>
Date: Fri, 19 Jul 2024 16:32:02 +0800
Subject: [PATCH] chore: define `ELECTRON` macro to tree shake code (#142)

Signed-off-by: Innei <i@innei.in>
---
 electron.vite.config.ts                                | 1 +
 src/renderer/src/App.tsx                               | 6 +++---
 src/renderer/src/components/ui/background/vibrancy.tsx | 4 ++--
 src/renderer/src/components/ui/image/preview-image.tsx | 4 ++--
 src/renderer/src/components/user-button.tsx            | 4 ++--
 src/renderer/src/global.d.ts                           | 1 +
 src/renderer/src/hooks/common/useDark.ts               | 6 +++---
 src/renderer/src/hooks/common/useTitle.ts              | 2 +-
 src/renderer/src/lib/auth.ts                           | 2 +-
 src/renderer/src/lib/client.ts                         | 4 ++--
 src/renderer/src/lib/native-menu.ts                    | 2 +-
 src/renderer/src/main.tsx                              | 2 +-
 src/renderer/src/modules/entry-column/index.tsx        | 2 +-
 src/renderer/src/modules/entry-column/video-item.tsx   | 2 +-
 src/renderer/src/modules/feed-column/index.tsx         | 2 +-
 src/renderer/src/modules/settings/tabs/apperance.tsx   | 6 +++---
 src/renderer/src/modules/settings/tabs/general.tsx     | 2 +-
 src/renderer/src/pages/(external)/login.tsx            | 2 +-
 src/renderer/src/pages/(external)/redirect.tsx         | 2 +-
 src/renderer/src/pages/(main)/layout.tsx               | 2 +-
 src/renderer/src/providers/root-providers.tsx          | 2 +-
 src/renderer/src/router.tsx                            | 2 +-
 src/renderer/src/tipc.ts                               | 2 +-
 vite.config.ts                                         | 1 +
 24 files changed, 34 insertions(+), 31 deletions(-)

diff --git a/electron.vite.config.ts b/electron.vite.config.ts
index d833e3e05..db36705c6 100644
--- a/electron.vite.config.ts
+++ b/electron.vite.config.ts
@@ -62,6 +62,7 @@ export default defineConfig({
       GIT_COMMIT_SHA: JSON.stringify(getGitHash()),
 
       DEBUG: process.env.DEBUG === "true",
+      ELECTRON: "true",
     },
   },
 })
diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
index c10b61276..dd4d77a09 100644
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@@ -28,7 +28,7 @@ function App() {
 
   useLayoutEffect(() => {
     // Electron app register in app scope, but web app should register in window scope
-    if (window.electron) return
+    if (ELECTRON) return
     const handleOpenSettings = (e) => {
       if (e.key === "," && (e.metaKey || e.ctrlKey)) {
         window.router.showSettings()
@@ -42,10 +42,10 @@ function App() {
     }
   }, [])
 
-  const windowsElectron = window.electron && getOS() === "Windows"
+  const windowsElectron = ELECTRON && getOS() === "Windows"
   return (
     <>
-      {window.electron && !windowsElectron && (
+      {ELECTRON && !windowsElectron && (
         <div
           className="drag-region absolute inset-x-0 top-0 h-12 shrink-0"
           aria-hidden
diff --git a/src/renderer/src/components/ui/background/vibrancy.tsx b/src/renderer/src/components/ui/background/vibrancy.tsx
index d639b0bff..da2228e76 100644
--- a/src/renderer/src/components/ui/background/vibrancy.tsx
+++ b/src/renderer/src/components/ui/background/vibrancy.tsx
@@ -6,8 +6,8 @@ export const Vibrancy: Component<
 > = ({ className, children, ...rest }) => {
   const opaqueSidebar = useUISettingKey("opaqueSidebar")
   const canVibrancy =
-    window.electron &&
-    window.electron.process.platform === "darwin" &&
+    ELECTRON &&
+    window.electron!.process.platform === "darwin" &&
     !opaqueSidebar
 
   return (
diff --git a/src/renderer/src/components/ui/image/preview-image.tsx b/src/renderer/src/components/ui/image/preview-image.tsx
index acee7e6c7..742db90e5 100644
--- a/src/renderer/src/components/ui/image/preview-image.tsx
+++ b/src/renderer/src/components/ui/image/preview-image.tsx
@@ -34,7 +34,7 @@ const Wrapper: Component<{
         className="absolute bottom-4 right-4 flex gap-3"
         onClick={stopPropagation}
       >
-        {!!window.electron && (
+        {ELECTRON && (
           <ActionButton
             tooltip="Download"
             onClick={() => {
@@ -64,7 +64,7 @@ export const PreviewImageContent: FC<{
 
   const handleContextMenu = useCallback(
     (image: string, e: React.MouseEvent<HTMLImageElement>) => {
-      if (!window.electron) return
+      if (!ELECTRON) return
 
       showNativeMenu(
         [
diff --git a/src/renderer/src/components/user-button.tsx b/src/renderer/src/components/user-button.tsx
index e95b1c215..407b4cfd9 100644
--- a/src/renderer/src/components/user-button.tsx
+++ b/src/renderer/src/components/user-button.tsx
@@ -48,7 +48,7 @@ export const LoginButton: FC<LoginProps> = (props) => {
                 id: "login",
                 content: () => (
                   <LoginModalContent
-                    runtime={window.electron ? "app" : "browser"}
+                    runtime={ELECTRON ? "app" : "browser"}
                   />
                 ),
                 clickOutsideToDismiss: true,
@@ -121,7 +121,7 @@ export const ProfileButton: FC<LoginProps> = memo((props) => {
           Preferences
         </DropdownMenuItem>
         <DropdownMenuSeparator />
-        {!window.electron && (
+        {!ELECTRON && (
           <>
             <DropdownMenuItem
               onClick={() => {
diff --git a/src/renderer/src/global.d.ts b/src/renderer/src/global.d.ts
index 1a0bac21a..f1ea49dce 100644
--- a/src/renderer/src/global.d.ts
+++ b/src/renderer/src/global.d.ts
@@ -18,6 +18,7 @@ declare global {
   export const APP_DEV_CWD: string
   export const GIT_COMMIT_SHA: string
   export const DEBUG: boolean
+  export const ELECTRON: boolean
   export interface Window {
     SENTRY_RELEASE: typeof SENTRY_RELEASE
   }
diff --git a/src/renderer/src/hooks/common/useDark.ts b/src/renderer/src/hooks/common/useDark.ts
index aabc97930..a81833e16 100644
--- a/src/renderer/src/hooks/common/useDark.ts
+++ b/src/renderer/src/hooks/common/useDark.ts
@@ -8,7 +8,7 @@ import { useMediaQuery } from "usehooks-ts"
 
 const useDarkQuery = () => useMediaQuery("(prefers-color-scheme: dark)")
 type ColorMode = "light" | "dark" | "system"
-const darkAtom = !window.electron ?
+const darkAtom = !ELECTRON ?
   atomWithStorage(
     getStorageNS("color-mode"),
     "system" as ColorMode,
@@ -26,7 +26,7 @@ function useDarkWebApp() {
   const mode = useAtomValue(darkAtom)
   return mode === "dark" || (mode === "system" && systemIsDark)
 }
-export const useDark = window.electron ? useDarkElectron : useDarkWebApp
+export const useDark = ELECTRON ? useDarkElectron : useDarkWebApp
 
 const useSyncDarkElectron = () => {
   const appIsDark = useDarkQuery()
@@ -50,7 +50,7 @@ const useSyncDarkWebApp = () => {
   }, [colorMode, systemIsDark])
 }
 
-export const useSyncDark = window.electron ?
+export const useSyncDark = ELECTRON ?
   useSyncDarkElectron :
   useSyncDarkWebApp
 
diff --git a/src/renderer/src/hooks/common/useTitle.ts b/src/renderer/src/hooks/common/useTitle.ts
index 9ba6ca605..035c9dc68 100644
--- a/src/renderer/src/hooks/common/useTitle.ts
+++ b/src/renderer/src/hooks/common/useTitle.ts
@@ -1,6 +1,6 @@
 import { useEffect, useRef } from "react"
 
-const titleTemplate = window.electron ? `%s` : `%s | ${APP_NAME}`
+const titleTemplate = ELECTRON ? `%s` : `%s | ${APP_NAME}`
 
 export const useTitle = (title?: Nullable<string >) => {
   const currentTitleRef = useRef(document.title)
diff --git a/src/renderer/src/lib/auth.ts b/src/renderer/src/lib/auth.ts
index c4af64ff0..ef815ea16 100644
--- a/src/renderer/src/lib/auth.ts
+++ b/src/renderer/src/lib/auth.ts
@@ -4,7 +4,7 @@ import { WEB_URL } from "@shared/constants"
 export const LOGIN_CALLBACK_URL = `${WEB_URL}/redirect?app=follow`
 export type LoginRuntime = "browser" | "app"
 export const loginHandler = (provider: string, runtime: LoginRuntime = "app") => {
-  if (window.electron) {
+  if (ELECTRON) {
     window.open(
       `${WEB_URL}/login?provider=${provider}`,
     )
diff --git a/src/renderer/src/lib/client.ts b/src/renderer/src/lib/client.ts
index d3a8ec723..d3ab8c878 100644
--- a/src/renderer/src/lib/client.ts
+++ b/src/renderer/src/lib/client.ts
@@ -1,8 +1,8 @@
 import { createClient } from "@egoist/tipc/renderer"
 import type { Router } from "@main/tipc"
 
-export const tipcClient = window.electron ?
+export const tipcClient = ELECTRON ?
   createClient<Router>({
-    ipcInvoke: window.electron.ipcRenderer.invoke,
+    ipcInvoke: window.electron!.ipcRenderer.invoke,
   }) :
   null
diff --git a/src/renderer/src/lib/native-menu.ts b/src/renderer/src/lib/native-menu.ts
index 5a1dc5eb8..4598c82bb 100644
--- a/src/renderer/src/lib/native-menu.ts
+++ b/src/renderer/src/lib/native-menu.ts
@@ -20,7 +20,7 @@ export const showNativeMenu = async (
     el.dataset.contextMenuOpen = "true"
   }
 
-  if (!window.electron) {
+  if (!ELECTRON) {
     document.dispatchEvent(
       new CustomEvent(CONTEXT_MENU_SHOW_EVENT_KEY, {
         detail: {
diff --git a/src/renderer/src/main.tsx b/src/renderer/src/main.tsx
index 36fcadc3f..5f24c8174 100644
--- a/src/renderer/src/main.tsx
+++ b/src/renderer/src/main.tsx
@@ -16,7 +16,7 @@ await initializeApp().finally(() => {
 
 const $container = document.querySelector("#root") as HTMLElement
 
-if (window.electron && getOS() === "Windows") {
+if (ELECTRON && getOS() === "Windows") {
   $container.style.borderRadius = "12px"
   $container.style.overflow = "hidden"
   $container.style.paddingTop = "24px"
diff --git a/src/renderer/src/modules/entry-column/index.tsx b/src/renderer/src/modules/entry-column/index.tsx
index 6abd7d5fb..e1108917c 100644
--- a/src/renderer/src/modules/entry-column/index.tsx
+++ b/src/renderer/src/modules/entry-column/index.tsx
@@ -212,7 +212,7 @@ const ListHeader: FC<{
   const headerTitle = useFeedHeaderTitle()
   const os = getOS()
 
-  const titleAtBottom = window.electron && os === "macOS"
+  const titleAtBottom = ELECTRON && os === "macOS"
   const isInCollectionList = feedId === FEED_COLLECTION_LIST
 
   const titleInfo = !!headerTitle && (
diff --git a/src/renderer/src/modules/entry-column/video-item.tsx b/src/renderer/src/modules/entry-column/video-item.tsx
index c8bd5e582..dedddbc09 100644
--- a/src/renderer/src/modules/entry-column/video-item.tsx
+++ b/src/renderer/src/modules/entry-column/video-item.tsx
@@ -13,7 +13,7 @@ import { useMemo, useRef, useState } from "react"
 import { ReactVirtuosoItemPlaceholder } from "../../components/ui/placeholder"
 import type { UniversalItemProps } from "./types"
 
-const ViewTag = window.electron ? "webview" : "iframe"
+const ViewTag = ELECTRON ? "webview" : "iframe"
 
 export function VideoItem({ entryId, entryPreview, translation }: UniversalItemProps) {
   const entry = useEntry(entryId) || entryPreview
diff --git a/src/renderer/src/modules/feed-column/index.tsx b/src/renderer/src/modules/feed-column/index.tsx
index e87099d7a..e3ab1e182 100644
--- a/src/renderer/src/modules/feed-column/index.tsx
+++ b/src/renderer/src/modules/feed-column/index.tsx
@@ -139,7 +139,7 @@ export function FeedColumn({ children }: PropsWithChildren) {
   )
 
   const normalStyle =
-    !window.electron || window.electron.process.platform !== "darwin"
+    !ELECTRON || window.electron!.process.platform !== "darwin"
 
   const unreadByView = useUnreadByView()
 
diff --git a/src/renderer/src/modules/settings/tabs/apperance.tsx b/src/renderer/src/modules/settings/tabs/apperance.tsx
index 415445b43..82925effd 100644
--- a/src/renderer/src/modules/settings/tabs/apperance.tsx
+++ b/src/renderer/src/modules/settings/tabs/apperance.tsx
@@ -43,7 +43,7 @@ export const SettingAppearance = () => {
               label="Dark Mode"
               checked={isDark}
               onCheckedChange={(e) => {
-                if (window.electron) {
+                if (ELECTRON) {
                   tipcClient?.setAppearance(e ? "dark" : "light")
                 } else {
                   setDarkInWebApp(e ? "dark" : "light")
@@ -66,7 +66,7 @@ export const SettingAppearance = () => {
             },
             {
               disabled:
-                !window.electron || !["macOS", "Linux"].includes(getOS()),
+                !ELECTRON || !["macOS", "Linux"].includes(getOS()),
               label: "Dock Badge",
               key: "showDockBadge",
               onChange: (value) => setUISetting("showDockBadge", value),
@@ -81,7 +81,7 @@ export const SettingAppearance = () => {
               type: "title",
               value: "Content",
             },
-            !!window.electron && Fonts,
+            !!ELECTRON && Fonts,
 
             ShikiTheme,
             {
diff --git a/src/renderer/src/modules/settings/tabs/general.tsx b/src/renderer/src/modules/settings/tabs/general.tsx
index 304ac0898..ab777b267 100644
--- a/src/renderer/src/modules/settings/tabs/general.tsx
+++ b/src/renderer/src/modules/settings/tabs/general.tsx
@@ -114,7 +114,7 @@ export const SettingGeneral = () => {
           ]}
         />
 
-        {/* {window.electron && (
+        {/* {ELECTRON&& (
           <SettingSwitch
             label="Launch Follow at Login"
             checked={loginSetting}
diff --git a/src/renderer/src/pages/(external)/login.tsx b/src/renderer/src/pages/(external)/login.tsx
index c5547a428..1bafc21bd 100644
--- a/src/renderer/src/pages/(external)/login.tsx
+++ b/src/renderer/src/pages/(external)/login.tsx
@@ -22,7 +22,7 @@ function Login() {
   const urlParams = new URLSearchParams(location.search)
   const provider = urlParams.get("provider")
   useEffect(() => {
-    if (!window.electron && provider) {
+    if (!ELECTRON && provider) {
       if (status === "authenticated") {
         signOut()
       }
diff --git a/src/renderer/src/pages/(external)/redirect.tsx b/src/renderer/src/pages/(external)/redirect.tsx
index b9281b4d8..066a1e061 100644
--- a/src/renderer/src/pages/(external)/redirect.tsx
+++ b/src/renderer/src/pages/(external)/redirect.tsx
@@ -18,7 +18,7 @@ export function Component() {
   useEffect(() => {
     if (onceRef.current) return
     onceRef.current = true
-    if (window.electron) {
+    if (ELECTRON) {
       navigate("/")
     } else {
       getCallbackUrl().then((url) => {
diff --git a/src/renderer/src/pages/(main)/layout.tsx b/src/renderer/src/pages/(main)/layout.tsx
index 019708ff0..13e06148c 100644
--- a/src/renderer/src/pages/(main)/layout.tsx
+++ b/src/renderer/src/pages/(main)/layout.tsx
@@ -51,7 +51,7 @@ export function Component() {
             open
             title="Login"
           >
-            <LoginModalContent runtime={window.electron ? "app" : "browser"} />
+            <LoginModalContent runtime={ELECTRON ? "app" : "browser"} />
           </DeclarativeModal>
         </RootPortal>
       )}
diff --git a/src/renderer/src/providers/root-providers.tsx b/src/renderer/src/providers/root-providers.tsx
index 601c1a4cf..01408c6f6 100644
--- a/src/renderer/src/providers/root-providers.tsx
+++ b/src/renderer/src/providers/root-providers.tsx
@@ -48,6 +48,6 @@ export const RootProviders: FC<PropsWithChildren> = ({ children }) => (
 
 const Devtools = () => (
   <>
-    {!window.electron && <ReactQueryDevtools buttonPosition="bottom-left" client={queryClient} />}
+    {!ELECTRON && <ReactQueryDevtools buttonPosition="bottom-left" client={queryClient} />}
   </>
 )
diff --git a/src/renderer/src/router.tsx b/src/renderer/src/router.tsx
index 58dbd784e..8e11e6a6f 100644
--- a/src/renderer/src/router.tsx
+++ b/src/renderer/src/router.tsx
@@ -9,7 +9,7 @@ import { buildGlobRoutes } from "./lib/route-builder"
 const globTree = import.meta.glob("./pages/**/*.tsx")
 const tree = buildGlobRoutes(globTree)
 
-let routerCreator = window.electron ? createHashRouter : createBrowserRouter
+let routerCreator = ELECTRON ? createHashRouter : createBrowserRouter
 if (window.SENTRY_RELEASE) {
   routerCreator = wrapCreateBrowserRouter(routerCreator)
 }
diff --git a/src/renderer/src/tipc.ts b/src/renderer/src/tipc.ts
index 1f39dac38..986ae45e5 100644
--- a/src/renderer/src/tipc.ts
+++ b/src/renderer/src/tipc.ts
@@ -1,7 +1,7 @@
 import { createEventHandlers } from "@egoist/tipc/renderer"
 import type { RendererHandlers } from "@main/renderer-handlers"
 
-export const handlers = window.electron ?
+export const handlers = ELECTRON ?
   createEventHandlers<RendererHandlers>({
     on: (channel, callback) => {
       const remover = window.electron!.ipcRenderer.on(channel, callback)
diff --git a/vite.config.ts b/vite.config.ts
index dd2d3f1fa..97ae6b0a5 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -50,5 +50,6 @@ export default defineConfig({
     ),
 
     DEBUG: process.env.DEBUG === "true",
+    ELECTRON: "false",
   },
 })