refactor: react-shadow 제거 및 dev, prod 환경에 따른 entry 분기 처리 로직 제거

kangju2000 · Oct 6, 2024 · 929c2b9 · 929c2b9
1 parent b84bfce
commit 929c2b9
Show file tree

Hide file tree

Showing 9 changed files with 72 additions and 96 deletions.
diff --git a/manifest.config.ts b/manifest.config.ts
@@ -7,51 +7,54 @@ const [major, minor, patch, label = '0'] = packageJson.version.replace(/[^\d.-]+
 
 const isDev = process.env.NODE_ENV === 'development'
 
-export default defineManifest(async () => ({
-  manifest_version: 3,
-  name: isDev
-    ? '[DEV] Gachon Tools - 과제 대시보드 · 사이버캠퍼스 어시스턴트'
-    : 'Gachon Tools - 과제 대시보드 · 사이버캠퍼스 어시스턴트',
-  description: packageJson.description,
-  version: label === '0' ? `${major}.${minor}.${patch}` : `${major}.${minor}.${patch}.${label}`,
-  version_name: packageJson.version,
-  action: {
-    default_title: 'popup',
-    default_popup: 'src/popup/index.html',
-    default_icon: {
-      '16': 'assets/logo16.png',
-      '48': 'assets/logo48.png',
-      '128': 'assets/logo128.png',
-    },
-  },
-  icons: {
-    '16': 'assets/logo16.png',
-    '48': 'assets/logo48.png',
-    '128': 'assets/logo128.png',
-  },
-  background: {
-    service_worker: 'src/background/index.ts',
-    type: 'module',
-  },
-  content_scripts: [
-    {
-      matches: UNIVERITY_LINK_LIST.map(univ => `${univ}/*`),
-      exclude_matches: UNIVERITY_LINK_LIST.map(univ => [
-        `${univ}/login.php*`,
-        `${univ}/mod/ubfile/viewer.php*`,
-        `${univ}/mod/vod/viewer.php*`,
-      ]).flat(),
-      js: isDev ? ['src/content/index.dev.tsx'] : ['src/content/index.prod.tsx'],
-      run_at: 'document_start',
-    },
-  ],
-  options_page: 'src/options/index.html',
-  web_accessible_resources: [
-    {
-      resources: ['assets/js/*.js', 'assets/css/*.css', '*.webp', '*.png', '*.jpg', '*.jpeg', '*.gif'],
-      matches: ['*://*/*'],
-    },
-  ],
-  host_permissions: UNIVERITY_LINK_LIST.map(univ => `${univ}/*`),
-  permissions: ['storage', 'unlimitedStorage', 'scripting', 'activeTab'],
-}))
+export default defineManifest(
+  async () =>
+    ({
+      manifest_version: 3,
+      name: isDev
+        ? '[DEV] Gachon Tools - 과제 대시보드 · 사이버캠퍼스 어시스턴트'
+        : 'Gachon Tools - 과제 대시보드 · 사이버캠퍼스 어시스턴트',
+      description: packageJson.description,
+      version: label === '0' ? `${major}.${minor}.${patch}` : `${major}.${minor}.${patch}.${label}`,
+      version_name: packageJson.version,
+      action: {
+        default_title: 'popup',
+        default_popup: 'src/popup/index.html',
+        default_icon: {
+          '16': 'assets/logo16.png',
+          '48': 'assets/logo48.png',
+          '128': 'assets/logo128.png',
+        },
+      },
+      icons: {
+        '16': 'assets/logo16.png',
+        '48': 'assets/logo48.png',
+        '128': 'assets/logo128.png',
+      },
+      background: {
+        service_worker: 'src/background/index.ts',
+        type: 'module',
+      },
+      content_scripts: [
+        {
+          matches: UNIVERITY_LINK_LIST.map(univ => `${univ}/*`),
+          exclude_matches: UNIVERITY_LINK_LIST.map(univ => [
+            `${univ}/login.php*`,
+            `${univ}/mod/ubfile/viewer.php*`,
+            `${univ}/mod/vod/viewer.php*`,
+          ]).flat(),
+          js: ['src/content/index.tsx'],
+          run_at: 'document_start',
+        },
+      ],
+      options_page: 'src/options/index.html',
+      web_accessible_resources: [
+        {
+          resources: ['assets/js/*.js', 'assets/css/*.css', '*.webp', '*.png', '*.jpg', '*.jpeg', '*.gif'],
+          matches: ['*://*/*'],
+        },
+      ],
+      host_permissions: UNIVERITY_LINK_LIST.map(univ => `${univ}/*`),
+      permissions: ['storage', 'unlimitedStorage', 'scripting', 'activeTab'],
+    }) as const,
+)
diff --git a/package.json b/package.json
@@ -26,7 +26,6 @@
     "react-error-boundary": "^4.0.13",
     "react-hot-toast": "^2.4.1",
     "react-hotkeys-hook": "^4.4.1",
-    "react-shadow": "^20.4.0",
     "tailwind-merge": "^2.5.2",
     "zustand": "^4.5.5"
   },

diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -1,4 +1,4 @@
-export const SHADOW_ID = 'gachon-tools-shadow-host'
+export const SHADOW_HOST_ID = 'gachon-tools-shadow-host'
 
 export const TAB_LIST = ['진행중인 과제', '모든 과제']
 

diff --git a/src/content/index.dev.tsx b/src/content/index.dev.tsx
diff --git a/src/content/index.prod.tsx → src/content/index.tsx b/src/content/index.prod.tsx → src/content/index.tsx
@@ -1,3 +1,4 @@
+import { createRoot } from 'react-dom/client'
 import cropperStyles from 'react-easy-crop/react-easy-crop.css?inline'
 
 import { App } from './App'
@@ -8,8 +9,8 @@ function initApp() {
   // remove scroll to top button
   document.getElementById('back-top')?.remove()
 
-  const root = createShadowRoot([styles, cropperStyles])
-  root.render(<App />)
+  const shadowRoot = createShadowRoot([styles, cropperStyles])
+  createRoot(shadowRoot).render(<App />)
 }
 
 if (document.readyState === 'loading') {

diff --git a/src/hooks/useShadowRoot.ts b/src/hooks/useShadowRoot.ts
@@ -1,12 +1,12 @@
 import { useEffect, useState } from 'react'
 
-import { SHADOW_ID } from '@/constants'
+import { SHADOW_HOST_ID } from '@/constants'
 
 export function useShadowRoot(): ShadowRoot | null {
   const [shadowRoot, setShadowRoot] = useState<ShadowRoot | null>(null)
 
   useEffect(() => {
-    const hostElement = document.querySelector(`#${SHADOW_ID}`)
+    const hostElement = document.querySelector(`#${SHADOW_HOST_ID}`)
     if (hostElement && hostElement.shadowRoot) {
       setShadowRoot(hostElement.shadowRoot)
     }

diff --git a/src/options/index.tsx b/src/options/index.tsx
@@ -1,11 +1,13 @@
+import { createRoot } from 'react-dom/client'
+
 import { Options } from './Options'
 import { ContentThemeProvider } from '@/components/ContentThemeProvider'
 import styles from '@/styles/index.css?inline'
 import createShadowRoot from '@/utils/createShadowRoot'
 
-const root = createShadowRoot([styles])
+const shadowRoot = createShadowRoot([styles])
 
-root.render(
+createRoot(shadowRoot).render(
   <ContentThemeProvider>
     <Options />
   </ContentThemeProvider>,

diff --git a/src/popup/index.tsx b/src/popup/index.tsx
@@ -1,11 +1,13 @@
+import { createRoot } from 'react-dom/client'
+
 import Popup from './Popup'
 import { ContentThemeProvider } from '@/components/ContentThemeProvider'
 import styles from '@/styles/index.css?inline'
 import createShadowRoot from '@/utils/createShadowRoot'
 
-const root = createShadowRoot([styles])
+const shadowRoot = createShadowRoot([styles])
 
-root.render(
+createRoot(shadowRoot).render(
   <ContentThemeProvider>
     <Popup />
   </ContentThemeProvider>,

diff --git a/src/utils/createShadowRoot.tsx b/src/utils/createShadowRoot.tsx
@@ -1,27 +1,16 @@
-import { createRoot } from 'react-dom/client'
+import { SHADOW_HOST_ID } from '@/constants'
 
-import { SHADOW_ID } from '@/constants'
-
-export default function createShadowRoot(styles: string[], options: { root?: HTMLElement } = {}) {
-  const isDev = import.meta.env.MODE === 'development'
-  const root = options.root || document.createElement('div')
-  root.setAttribute('id', SHADOW_ID)
-  const shadowRoot = root.attachShadow({ mode: 'open' })
+export default function createShadowRoot(styles: string[]): ShadowRoot {
+  const host = document.createElement('div')
+  host.setAttribute('id', SHADOW_HOST_ID)
+  const shadowRoot = host.attachShadow({ mode: 'open' })
 
   const globalStyleSheet = new CSSStyleSheet()
   globalStyleSheet.replaceSync(styles.join('\n'))
 
   shadowRoot.adoptedStyleSheets = [globalStyleSheet]
 
-  if (isDev) {
-    const styleElement = document.querySelector('style[data-vite-dev-id]')
-
-    if (styleElement) {
-      shadowRoot.appendChild(styleElement)
-    }
-  }
-
-  document.body.appendChild(root)
+  document.body.appendChild(host)
 
-  return createRoot(shadowRoot)
+  return shadowRoot
 }