refactor: sync platform resolution

src/components/AccessDeniedDescription.tsx

@@ -1,10 +1,9 @@
-import { usePlatform } from 'containers/PlatformContext'
 import { GITHUB_OAUTH } from 'env'
+import { platform } from 'platforms'
 import { GitHub } from 'platforms/GitHub'
 import * as React from 'react'
 
 export function AccessDeniedDescription({ hasToken }: { hasToken: boolean }) {
-  const platform = usePlatform()
   return (
     <div className={'description'}>
       <h5>Access Denied</h5>

src/components/FileExplorer.tsx

@@ -3,10 +3,10 @@ import { LoadingIndicator } from 'components/LoadingIndicator'
 import { Node } from 'components/Node'
 import { SearchBar } from 'components/SearchBar'
 import { useConfigs } from 'containers/ConfigsContext'
-import { usePlatform } from 'containers/PlatformContext'
 import { connect } from 'driver/connect'
 import { FileExplorerCore } from 'driver/core'
 import { ConnectorState, Props } from 'driver/core/FileExplorer'
+import { platform } from 'platforms'
 import * as React from 'react'
 import { useEvent, usePrevious } from 'react-use'
 import { FixedSizeList as List, ListChildComponentProps, ListProps } from 'react-window'
@@ -200,7 +200,6 @@ function ListView({
     }
   }, [listRef.current, focusedNode])
 
-  const platform = usePlatform()
   const lastNodeLength = usePrevious(nodes.length)
   React.useEffect(() => {
     if (listRef.current && !focusedNode && lastNodeLength !== nodes.length) {

src/components/Gitako.tsx

@@ -1,19 +1,16 @@
 import { SideBar } from 'components/SideBar'
 import { ConfigsContext, ConfigsContextWrapper } from 'containers/ConfigsContext'
-import { PlatformContextWrapper } from 'containers/PlatformContext'
 import * as React from 'react'
 import { ErrorBoundary } from './ErrorBoundary'
 
 export function Gitako() {
   return (
     <ErrorBoundary>
-      <PlatformContextWrapper>
-        <ConfigsContextWrapper>
-          <ConfigsContext.Consumer>
-            {configContext => configContext && <SideBar configContext={configContext} />}
-          </ConfigsContext.Consumer>
-        </ConfigsContextWrapper>
-      </PlatformContextWrapper>
+      <ConfigsContextWrapper>
+        <ConfigsContext.Consumer>
+          {configContext => configContext && <SideBar configContext={configContext} />}
+        </ConfigsContext.Consumer>
+      </ConfigsContextWrapper>
     </ErrorBoundary>
   )
 }

src/components/Resizable.tsx

@@ -1,6 +1,6 @@
 import { HorizontalResizeHandler } from 'components/ResizeHandler'
 import { useConfigs } from 'containers/ConfigsContext'
-import { usePlatform } from 'containers/PlatformContext'
+import { platform } from 'platforms'
 import * as React from 'react'
 import { useWindowSize } from 'react-use'
 import { cx } from 'utils/cx'
@@ -33,7 +33,6 @@ export function Resizable({ baseSize, className, children }: React.PropsWithChil
     configContext.set({ sideBarWidth: size })
   }, [size])
 
-  const platform = usePlatform()
   platform.useResizeStylesheets(size)
 
   const onResize = React.useCallback((size: number) => {

src/components/SideBar.tsx

@@ -7,7 +7,6 @@ import { Resizable } from 'components/Resizable'
 import { SettingsBar } from 'components/settings/SettingsBar'
 import { ToggleShowButton } from 'components/ToggleShowButton'
 import { useConfigs } from 'containers/ConfigsContext'
-import { usePlatform } from 'containers/PlatformContext'
 import { connect } from 'driver/connect'
 import { SideBarCore } from 'driver/core'
 import { ConnectorState, Props } from 'driver/core/SideBar'
@@ -23,7 +22,6 @@ import * as keyHelper from 'utils/keyHelper'
 const RawGitako: React.FC<Props & ConnectorState> = function RawGitako(props) {
   const configContext = useConfigs()
   const accessToken = props.configContext.val.access_token
-  const platform = usePlatform()
 
   const intelligentToggle = configContext.val.intelligentToggle
   React.useEffect(() => {

src/components/settings/AccessTokenSettings.tsx

@@ -1,7 +1,7 @@
 import { Button, TextInput } from '@primer/components'
 import { wikiLinks } from 'components/settings/SettingsBar'
 import { useConfigs } from 'containers/ConfigsContext'
-import { usePlatform } from 'containers/PlatformContext'
+import { platform } from 'platforms'
 import { Gitee } from 'platforms/Gitee'
 import * as React from 'react'
 import { useStates } from 'utils/hooks/useStates'
@@ -17,7 +17,6 @@ export function AccessTokenSettings(props: React.PropsWithChildren<Props>) {
   const useAccessToken = useStates('')
   const useAccessTokenHint = useStates<React.ReactNode>('')
   const focusInput = useStates(false)
-  const platform = usePlatform()
 
   const { val: accessTokenHint } = useAccessTokenHint
   const { val: accessToken } = useAccessToken

src/components/settings/SettingsBar.tsx

@@ -1,7 +1,7 @@
 import { Link } from '@primer/components'
 import { Icon } from 'components/Icon'
-import { usePlatform } from 'containers/PlatformContext'
 import { VERSION } from 'env'
+import { platform } from 'platforms'
 import { GitHub } from 'platforms/GitHub'
 import * as React from 'react'
 import { useStates } from 'utils/hooks/useStates'
@@ -29,7 +29,6 @@ function SettingsBarContent() {
   const useReloadHint = useStates<React.ReactNode>('')
   const { val: reloadHint } = useReloadHint
 
-  const platform = usePlatform()
   const moreFields: SimpleField[] =
     platform === GitHub
       ? [

src/containers/PlatformContext.tsx

@@ -1,17 +0,0 @@
-import { resolvePlatformP } from 'platforms'
-import { dummyPlatformForTypeSafety } from 'platforms/dummyPlatformForTypeSafety'
-import * as React from 'react'
-
-const PlatformContext = React.createContext<Platform>(dummyPlatformForTypeSafety)
-
-export function PlatformContextWrapper({ children }: React.PropsWithChildren<{}>) {
-  const [platform, setPlatform] = React.useState(dummyPlatformForTypeSafety)
-  React.useEffect(() => {
-    resolvePlatformP.then(setPlatform)
-  }, [])
-  return <PlatformContext.Provider value={platform}>{children}</PlatformContext.Provider>
-}
-
-export function usePlatform() {
-  return React.useContext(PlatformContext)
-}

src/content.tsx

@@ -1,35 +1,33 @@
 import { withErrorLog } from 'analytics'
 import { Gitako } from 'components/Gitako'
 import { addMiddleware } from 'driver/connect'
-import { platform, resolvePlatformP } from 'platforms'
+import { platform } from 'platforms'
 import * as React from 'react'
 import * as ReactDOM from 'react-dom'
 import './content.scss'
 
-resolvePlatformP.then(() => {
-  if (platform.resolveMeta()) {
-    addMiddleware(withErrorLog)
+if (platform.resolveMeta()) {
+  addMiddleware(withErrorLog)
 
-    function init() {
-      // injects a copy of stylesheets so that other extensions(e.g. dark reader) could read
-      function injectStyles(url: string) {
-        var linkElement = document.createElement('link')
-        linkElement.rel = 'stylesheet'
-        linkElement.setAttribute('href', url)
-        document.head.appendChild(linkElement)
-      }
-
-      injectStyles(browser.extension.getURL('content.css'))
-
-      const SideBarElement = document.createElement('div')
-      document.body.appendChild(SideBarElement)
-      ReactDOM.render(<Gitako />, SideBarElement)
+  function init() {
+    // injects a copy of stylesheets so that other extensions(e.g. dark reader) could read
+    function injectStyles(url: string) {
+      var linkElement = document.createElement('link')
+      linkElement.rel = 'stylesheet'
+      linkElement.setAttribute('href', url)
+      document.head.appendChild(linkElement)
     }
 
-    if (document.readyState === 'loading') {
-      document.addEventListener('DOMContentLoaded', init)
-    } else {
-      init()
-    }
+    injectStyles(browser.extension.getURL('content.css'))
+
+    const SideBarElement = document.createElement('div')
+    document.body.appendChild(SideBarElement)
+    ReactDOM.render(<Gitako />, SideBarElement)
   }
-})
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init)
+  } else {
+    init()
+  }
+}

src/platforms/GitHub/index.ts

@@ -1,5 +1,5 @@
-import { usePlatform } from 'containers/PlatformContext'
 import { GITHUB_OAUTH } from 'env'
+import { platform } from 'platforms'
 import * as React from 'react'
 import { useEvent } from 'react-use'
 import { bodySpacingClassName } from 'utils/DOMHelper'
@@ -167,7 +167,6 @@ export const GitHub: Platform = {
 }
 
 export function useGitHubAttachCopySnippetButton(copySnippetButton: boolean) {
-  const platform = usePlatform()
   const attachCopySnippetButton = React.useCallback(
     function attachCopySnippetButton() {
       if (platform !== GitHub) return
@@ -180,7 +179,6 @@ export function useGitHubAttachCopySnippetButton(copySnippetButton: boolean) {
 }
 
 export function useGitHubAttachCopyFileButton(copyFileButton: boolean) {
-  const platform = usePlatform()
   const attachCopyFileButton = React.useCallback(
     function attachCopyFileButton() {
       if (platform !== GitHub) return

src/platforms/Gitee/index.ts

@@ -1,5 +1,5 @@
-import { usePlatform } from 'containers/PlatformContext'
 import { GITEE_OAUTH } from 'env'
+import { platform } from 'platforms'
 import * as React from 'react'
 import { useEvent } from 'react-use'
 import { bodySpacingClassName } from 'utils/DOMHelper'
@@ -168,7 +168,6 @@ export const Gitee: Platform = {
 }
 
 export function useGiteeAttachCopySnippetButton(copySnippetButton: boolean) {
-  const platform = usePlatform()
   const attachCopySnippetButton = React.useCallback(
     function attachCopySnippetButton() {
       if (platform !== Gitee) return

src/platforms/index.ts

@@ -1,4 +1,3 @@
-import * as storageHelper from 'utils/storageHelper'
 import { dummyPlatformForTypeSafety } from './dummyPlatformForTypeSafety'
 import { Gitee } from './Gitee'
 import { GitHub } from './GitHub'
@@ -8,51 +7,23 @@ const platformsMap: Record<'GitHub' | 'Gitee', { platform: Platform; hosts: stri
   Gitee: { platform: Gitee, hosts: ['gitee.com'] },
 }
 
-const CustomDomainsStorageKey = 'CUSTOM_DOMAINS'
-async function loadCustomDomains() {
-  const config = await storageHelper.get([CustomDomainsStorageKey])
-  if (config) {
-    const { [CustomDomainsStorageKey]: customDomains } = config
-    type CustomDomains = Record<string, string> // domain -> Platform
-    if (customDomains) {
-      Object.keys(customDomains as CustomDomains).forEach(domain => {
-        if (customDomains[domain] in platformsMap) {
-          platformsMap[customDomains[domain] as keyof typeof platformsMap].hosts.push(domain)
-        }
-      })
-    }
-  }
-}
-loadCustomDomains()
-
-async function resolvePlatform(): Promise<Platform> {
+function resolvePlatform() {
   for (const { hosts, platform } of Object.values(platformsMap)) {
-    if (hosts.some(host => host === window.location.host)) {
+    if (hosts.some(host => host === window.location.host || platform.resolveMeta())) {
       return platform
     }
   }
   return dummyPlatformForTypeSafety
 }
 
-let $platform: Platform = dummyPlatformForTypeSafety
-
-export const resolvePlatformP = resolvePlatform()
-resolvePlatformP.then(platform => ($platform = platform))
-
-export async function getPlatformName() {
-  await resolvePlatformP
+export function getPlatformName() {
   const keys = Object.keys(platformsMap) as (keyof typeof platformsMap)[]
   for (const key of keys) {
-    const { platform } = platformsMap[key]
-    if (platform === $platform) return key
+    if (platform === platformsMap[key].platform) return key
   }
 }
 
-export const platform: Platform = new Proxy<Platform>(dummyPlatformForTypeSafety, {
-  get(target, key: keyof Platform) {
-    return $platform[key]
-  },
-})
+export const platform = resolvePlatform()
 
 export const errors = {
   SERVER_FAULT: 'Server Fault',