refactor(popup): add useBrowser hook; avoid importing everywhere (#400

)

src/popup/Popup.tsx

@@ -1,5 +1,9 @@
 import { MainLayout } from '@/popup/components/layout/MainLayout'
-import { PopupContextProvider, TranslationContextProvider } from './lib/context'
+import {
+  BrowserContextProvider,
+  PopupContextProvider,
+  TranslationContextProvider
+} from './lib/context'
 import { LazyMotion, domAnimation } from 'framer-motion'
 import React from 'react'
 import browser from 'webextension-polyfill'
@@ -50,11 +54,13 @@ const router = createMemoryRouter(routes)
 export const Popup = () => {
   return (
     <LazyMotion features={domAnimation} strict>
-      <TranslationContextProvider browser={browser}>
-        <PopupContextProvider>
-          <RouterProvider router={router} />
-        </PopupContextProvider>
-      </TranslationContextProvider>
+      <BrowserContextProvider browser={browser}>
+        <TranslationContextProvider>
+          <PopupContextProvider>
+            <RouterProvider router={router} />
+          </PopupContextProvider>
+        </TranslationContextProvider>
+      </BrowserContextProvider>
     </LazyMotion>
   )
 }

src/popup/components/layout/header.tsx

@@ -1,11 +1,8 @@
 import React, { useContext, useMemo } from 'react'
 import { Link, useLocation } from 'react-router-dom'
-import browser from 'webextension-polyfill'
 import { ArrowBack, Settings } from '../Icons'
 import { ROUTES_PATH } from '@/popup/Popup'
-import { PopupStateContext } from '@/popup/lib/context'
-
-const Logo = browser.runtime.getURL('assets/images/logo.svg')
+import { PopupStateContext, useBrowser } from '@/popup/lib/context'
 
 const NavigationButton = () => {
   const location = useLocation()
@@ -28,6 +25,9 @@ const NavigationButton = () => {
 }
 
 export const Header = () => {
+  const browser = useBrowser()
+  const Logo = browser.runtime.getURL('assets/images/logo.svg')
+
   return (
     <header className="flex h-8 flex-row items-center justify-between">
       <div className="flex flex-row items-center gap-3">

src/popup/lib/context.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
-import browser, { type Browser } from 'webextension-polyfill'
+import React, { type PropsWithChildren } from 'react'
+import type { Browser } from 'webextension-polyfill'
 import { getContextData } from '@/popup/lib/messages'
 import { tFactory, type Translation } from '@/shared/helpers'
 import type { DeepNonNullable, PopupStore } from '@/shared/types'
@@ -12,6 +12,7 @@ import {
   type BackgroundToPopupMessage
 } from '@/shared/messages'
 
+// #region PopupState
 export enum ReducerActionType {
   SET_DATA = 'SET_DATA',
   TOGGLE_WM = 'TOGGLE_WM',
@@ -102,6 +103,7 @@ interface PopupContextProviderProps {
 }
 
 export function PopupContextProvider({ children }: PopupContextProviderProps) {
+  const browser = useBrowser()
   const [isLoading, setIsLoading] = React.useState(true)
   const [state, dispatch] = React.useReducer(reducer, {} as PopupState)
 
@@ -133,7 +135,7 @@ export function PopupContextProvider({ children }: PopupContextProviderProps) {
     return () => {
       browser.runtime.onMessage.removeListener(listener)
     }
-  }, [])
+  }, [browser])
 
   React.useEffect(() => {
     const port = browser.runtime.connect({ name: CONNECTION_NAME })
@@ -150,7 +152,7 @@ export function PopupContextProvider({ children }: PopupContextProviderProps) {
     return () => {
       port.disconnect()
     }
-  }, [dispatch])
+  }, [browser])
 
   if (isLoading) {
     return <>Loading</>
@@ -162,16 +164,30 @@ export function PopupContextProvider({ children }: PopupContextProviderProps) {
     </PopupStateContext.Provider>
   )
 }
+// #endregion
 
-const TranslationContext = React.createContext<Translation>((v: string) => v)
+// #region Browser
+const BrowserContext = React.createContext<Browser>({} as Browser)
 
-export const TranslationContextProvider = ({
+export const BrowserContextProvider = ({
   browser,
   children
-}: {
-  browser: Browser
-  children: React.ReactNode
-}) => {
+}: PropsWithChildren<{ browser: Browser }>) => {
+  return (
+    <BrowserContext.Provider value={browser}>
+      {children}
+    </BrowserContext.Provider>
+  )
+}
+
+export const useBrowser = () => React.useContext(BrowserContext)
+// #endregion
+
+// #region Translation
+const TranslationContext = React.createContext<Translation>((v: string) => v)
+
+export const TranslationContextProvider = ({ children }: PropsWithChildren) => {
+  const browser = useBrowser()
   const t = tFactory(browser)
 
   return (
@@ -182,3 +198,4 @@ export const TranslationContextProvider = ({
 }
 
 export const useTranslation = () => React.useContext(TranslationContext)
+// #endregion

src/popup/pages/MissingHostPermission.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
-import browser from 'webextension-polyfill'
 import { PERMISSION_HOSTS } from '@/shared/defines'
 import { WarningSign } from '@/popup/components/Icons'
-import { useTranslation } from '@/popup/lib/context'
+import { useBrowser, useTranslation } from '@/popup/lib/context'
 
 export const Component = () => {
+  const browser = useBrowser()
   const t = useTranslation()
   return (
     <div className="rounded-md bg-orange-50 p-4 text-sm">