refactor: extract formatters for hash and class name

src/platforms/GitHub/DOMHelper.ts

@@ -1,7 +1,7 @@
 import { raiseError } from 'analytics'
 import { Clippy, ClippyClassName } from 'components/Clippy'
 import * as React from 'react'
-import { $ } from 'utils/DOMHelper'
+import { $, formatClass } from 'utils/DOMHelper'
 import { renderReact, run } from 'utils/general'
 import { CopyFileButton, copyFileButtonClassName } from './CopyFileButton'
 
@@ -147,7 +147,7 @@ export function getCodeElement() {
  */
 export function attachCopyFileBtn() {
   const removeButtons = () => {
-    const buttons = document.querySelectorAll(`.${copyFileButtonClassName}`)
+    const buttons = document.querySelectorAll(formatClass(copyFileButtonClassName))
     buttons.forEach(button => {
       button.parentElement?.removeChild(button)
     })
@@ -219,7 +219,7 @@ export function attachCopySnippet() {
           }
         }
         function removeAttachedOnes() {
-          const buttons = document.querySelectorAll(`.${ClippyClassName}`)
+          const buttons = document.querySelectorAll(formatClass(ClippyClassName))
           buttons.forEach(button => {
             button.parentElement?.removeChild(button)
           })

src/platforms/GitHub/index.ts

@@ -1,7 +1,8 @@
 import { useConfigs } from 'containers/ConfigsContext'
 import { GITHUB_OAUTH } from 'env'
 import { Base64 } from 'js-base64'
-import { run } from 'utils/general'
+import { formatID } from 'utils/DOMHelper'
+import { formatHash, run } from 'utils/general'
 import { resolveGitModules } from 'utils/gitSubmodule'
 import { sortFoldersToFront } from 'utils/treeParser'
 import * as API from './API'
@@ -339,7 +340,7 @@ async function getCommitTreeData(
   const getItemURL = (path: string) => {
     for (const doc of documents) {
       const id = doc.querySelector(`[data-path="${path}"]`)?.parentElement?.id
-      if (id) return `#${id}`
+      if (id) return formatID(id)
     }
   }
 
@@ -442,7 +443,3 @@ async function getPullRequestTreeData(
   return { root }
 }
 
-function formatHash(hash?: string) {
-  if (hash) return '#' + hash
-  return ''
-}

src/platforms/Gitee/DOMHelper.ts

@@ -1,7 +1,7 @@
 import { raiseError } from 'analytics'
 import { Clippy, ClippyClassName } from 'components/Clippy'
 import * as React from 'react'
-import { $ } from 'utils/DOMHelper'
+import { $, formatClass } from 'utils/DOMHelper'
 import { renderReact } from 'utils/general'
 
 export function isInRepoPage() {
@@ -70,7 +70,7 @@ export function attachCopySnippet() {
       readmeElement.addEventListener('mouseover', mouseOverCallback)
       return () => {
         readmeElement.removeEventListener('mouseover', mouseOverCallback)
-        const buttons = document.querySelectorAll(`.${ClippyClassName}`)
+        const buttons = document.querySelectorAll(formatClass(ClippyClassName))
         buttons.forEach(button => {
           button.parentElement?.removeChild(button)
         })

src/utils/DOMHelper.ts

@@ -60,7 +60,7 @@ export function $(selector: string, existCallback?: any, otherwise?: any) {
  */
 export function insertLogoMountPoint() {
   const logoID = 'gitako-logo-mount-point'
-  const logoSelector = '#' + logoID
+  const logoSelector = formatID(logoID)
   return $(logoSelector, undefined, function createLogoMountPoint() {
     const logoMountElement = document.createElement('div')
     logoMountElement.setAttribute('id', logoID)
@@ -142,3 +142,11 @@ export function setCSSVariable(name: string, value: string | undefined, element:
   if (value === undefined) element.style.removeProperty(name)
   else element.style.setProperty(name, value)
 }
+
+export function formatID(id: string) {
+  return `#${id}`
+}
+
+export function formatClass(className: string) {
+  return `.${className}`
+}

src/utils/general.ts

@@ -219,3 +219,8 @@ export function resolveDiffGraphMeta(additions: number, deletions: number, chang
     w = 5 - g - r
   return { g, r, w }
 }
+
+export function formatHash(hash?: string) {
+  if (hash) return '#' + hash
+  return ''
+}