refactor: extract $

src/platforms/GitHub/DOMHelper.ts

@@ -1,7 +1,8 @@
 import { raiseError } from 'analytics'
 import { Clippy, ClippyClassName } from 'components/Clippy'
 import * as React from 'react'
-import { $, formatClass, parseIntFromElement } from 'utils/DOMHelper'
+import { $ } from 'utils/$'
+import { formatClass, parseIntFromElement } from 'utils/DOMHelper'
 import { renderReact, run } from 'utils/general'
 import { CopyFileButton, copyFileButtonClassName } from './CopyFileButton'
 

src/platforms/GitHub/hooks/useEnterpriseStatBarStyleFix.ts

@@ -1,5 +1,5 @@
 import { useEffect } from 'react'
-import { $ } from 'utils/DOMHelper'
+import { $ } from 'utils/$'
 import * as DOMHelper from '../DOMHelper'
 import { GitHub } from '../index'
 

src/platforms/GitHub/index.ts

@@ -1,8 +1,8 @@
 import { useConfigs } from 'containers/ConfigsContext'
 import { GITHUB_OAUTH } from 'env'
 import { Base64 } from 'js-base64'
+import { $ } from 'utils/$'
 import { configRef } from 'utils/config/helper'
-import { $ } from 'utils/DOMHelper'
 import { resolveGitModules } from 'utils/gitSubmodule'
 import { sortFoldersToFront } from 'utils/treeParser'
 import * as API from './API'

src/platforms/Gitea/DOMHelper.ts

@@ -1,5 +1,5 @@
 import { raiseError } from 'analytics'
-import { $ } from 'utils/DOMHelper'
+import { $ } from 'utils/$'
 
 export function isInRepoPage() {
   const repoHeaderSelector = '.repo-header'

src/platforms/Gitee/DOMHelper.ts

@@ -1,7 +1,8 @@
 import { raiseError } from 'analytics'
 import { Clippy, ClippyClassName } from 'components/Clippy'
 import * as React from 'react'
-import { $, formatClass } from 'utils/DOMHelper'
+import { $ } from 'utils/$'
+import { formatClass } from 'utils/DOMHelper'
 import { renderReact } from 'utils/general'
 
 export function isInRepoPage() {

src/utils/$.ts

@@ -0,0 +1,20 @@
+export function $(selector: string): HTMLElement | null
+export function $<T1>(selector: string, existCallback: (element: HTMLElement) => T1): T1 | null
+export function $<T1, T2>(
+  selector: string,
+  existCallback: (element: HTMLElement) => T1,
+  otherwise: () => T2,
+): T1 | T2
+export function $<T2>(
+  selector: string,
+  existCallback: undefined | null,
+  otherwise: () => T2,
+): HTMLElement | T2
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function $(selector: string, existCallback?: any, otherwise?: any) {
+  const element = document.querySelector(selector)
+  if (element) {
+    return existCallback ? existCallback(element) : element
+  }
+  return otherwise ? otherwise() : null
+}

src/utils/DOMHelper.ts

@@ -2,6 +2,8 @@
  * this helper helps manipulating DOM
  */
 
+import { $ } from './$'
+
 export const rootElementID = 'gitako-root'
 export const gitakoDescriptionTarget = document.documentElement
 
@@ -23,27 +25,6 @@ export function setBodyIndent(shouldShowGitako: boolean) {
   gitakoDescriptionTarget.setAttribute(spacingAttributeName, `${shouldShowGitako}`)
 }
 
-export function $(selector: string): HTMLElement | null
-export function $<T1>(selector: string, existCallback: (element: HTMLElement) => T1): T1 | null
-export function $<T1, T2>(
-  selector: string,
-  existCallback: (element: HTMLElement) => T1,
-  otherwise: () => T2,
-): T1 | T2
-export function $<T2>(
-  selector: string,
-  existCallback: undefined | null,
-  otherwise: () => T2,
-): HTMLElement | T2
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function $(selector: string, existCallback?: any, otherwise?: any) {
-  const element = document.querySelector(selector)
-  if (element) {
-    return existCallback ? existCallback(element) : element
-  }
-  return otherwise ? otherwise() : null
-}
-
 /**
  * DOM Structure after calling the `insert*MountPoint` functions
  *