chore: define `ELECTRON` macro to tree shake code (#142)

Signed-off-by: Innei <i@innei.in>
2024-07-19 16:32:02 +08:00 · 2024-07-19 16:32:02 +08:00 · 74959ca54d
parent c8a8fb94e2
commit 74959ca54d
24 changed files with 34 additions and 31 deletions
--- 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",
    },
  },
 })
--- 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
--- 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 (
--- 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(
        [
--- 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={() => {
--- 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
  }
--- 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

--- 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)
--- 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}`,
    )
--- 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
--- 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: {
--- 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"
--- 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 && (
--- 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
--- 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()

--- 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,
            {
--- 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}
--- 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()
      }
--- 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) => {
--- 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>
      )}
--- 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} />}
  </>
 )
--- 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)
 }
--- 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)
--- a/vite.config.ts
+++ b/vite.config.ts
@ -50,5 +50,6 @@ export default defineConfig({
    ),

    DEBUG: process.env.DEBUG === "true",
+    ELECTRON: "false",
  },
 })