refactor: project structure

hbljm · May 2, 2023 · 2333b09 · 2333b09
1 parent b6d6339
commit 2333b09
Show file tree

Hide file tree

Showing 44 changed files with 233 additions and 229 deletions.
diff --git a/build.mjs b/build.mjs
@@ -10,10 +10,10 @@ async function esbuildBrowserExtension() {
     await esbuild.build({
         target: ['es2015', 'safari11'],
         entryPoints: [
-            'src/content_script/index.tsx',
-            'src/background/index.ts',
-            'src/options/index.tsx',
-            'src/popup/index.tsx',
+            'src/browser-extension/content_script/index.tsx',
+            'src/browser-extension/background/index.ts',
+            'src/browser-extension/options/index.tsx',
+            'src/browser-extension/popup/index.tsx',
         ],
         bundle: true,
         outdir: browserExtensionOutDir,

diff --git a/dist/userscript/index.js b/dist/userscript/index.js
diff --git a/src/background/index.ts → src/browser-extension/background/index.ts b/src/background/index.ts → src/browser-extension/background/index.ts
diff --git a/src/content_script/consts.ts → ...rowser-extension/content_script/consts.ts b/src/content_script/consts.ts → ...rowser-extension/content_script/consts.ts
diff --git a/src/content_script/index.tsx → ...rowser-extension/content_script/index.tsx b/src/content_script/index.tsx → ...rowser-extension/content_script/index.tsx
@@ -1,16 +1,16 @@
-import * as utils from '../common/utils'
+import * as utils from '../../common/utils'
 import React from 'react'
-import icon from './assets/images/icon.png'
+import icon from '../../common/assets/images/icon.png'
 import { popupCardID, popupCardMaxWidth, popupCardMinWidth, popupThumbID, zIndex } from './consts'
-import { PopupCard } from './PopupCard'
+import { PopupCard } from '../../common/components/PopupCard'
 import { calculateMaxXY, getContainer, queryPopupCardElement, queryPopupThumbElement } from './utils'
 import { create } from 'jss'
 import preset from 'jss-preset-default'
 import { JssProvider, createGenerateId } from 'react-jss'
 import { Client as Styletron } from 'styletron-engine-atomic'
 import { createRoot, Root } from 'react-dom/client'
 import hotkeys from 'hotkeys-js'
-import '../i18n.js'
+import '../../common/i18n.js'
 
 let root: Root | null = null
 const generateId = createGenerateId()

diff --git a/src/content_script/utils.ts → ...browser-extension/content_script/utils.ts b/src/content_script/utils.ts → ...browser-extension/content_script/utils.ts
@@ -1,7 +1,3 @@
-import { createParser } from 'eventsource-parser'
-import { backgroundFetch } from '../common/background-fetch'
-import { userscriptFetch } from '../common/userscript-polyfill'
-import { isDesktopApp, isUserscript } from '../common/utils'
 import { containerID, documentPadding, popupCardID, popupThumbID, zIndex } from './consts'
 
 function attachEventsToContainer($container: HTMLElement) {
@@ -59,46 +55,6 @@ export async function queryPopupCardElement(): Promise<HTMLDivElement | null> {
     return $container.shadowRoot?.querySelector(`#${popupCardID}`) as HTMLDivElement | null
 }
 
-interface FetchSSEOptions extends RequestInit {
-    onMessage(data: string): void
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    onError(error: any): void
-    fetcher?: (input: string, options: RequestInit) => Promise<Response>
-}
-
-export async function fetchSSE(input: string, options: FetchSSEOptions) {
-    const { onMessage, onError, ...fetchOptions } = options
-
-    const fetcher =
-        options.fetcher ?? (isUserscript() ? userscriptFetch : !isDesktopApp() ? backgroundFetch : window.fetch)
-
-    const resp = await fetcher(input, fetchOptions)
-    if (resp.status !== 200) {
-        onError(await resp.json())
-        return
-    }
-
-    const parser = createParser((event) => {
-        if (event.type === 'event') {
-            onMessage(event.data)
-        }
-    })
-    const reader = resp.body.getReader()
-    try {
-        // eslint-disable-next-line no-constant-condition
-        while (true) {
-            const { done, value } = await reader.read()
-            if (done) {
-                break
-            }
-            const str = new TextDecoder().decode(value)
-            parser.feed(str)
-        }
-    } finally {
-        reader.releaseLock()
-    }
-}
-
 export function calculateMaxXY($popupCard: HTMLElement): number[] {
     const { innerWidth, innerHeight } = window
     const { scrollLeft, scrollTop } = document.documentElement

diff --git a/src/options/index.tsx → src/browser-extension/options/index.tsx b/src/options/index.tsx → src/browser-extension/options/index.tsx
@@ -1,8 +1,8 @@
 import React from 'react'
 import { createRoot } from 'react-dom/client'
-import { Settings } from '../popup/Settings'
+import { Settings } from '../../common/components/Settings'
 import { Client as Styletron } from 'styletron-engine-atomic'
-import '../i18n.js'
+import '../../common/i18n.js'
 
 const engine = new Styletron()
 

diff --git a/src/popup/index.css → src/browser-extension/popup/index.css b/src/popup/index.css → src/browser-extension/popup/index.css
diff --git a/src/popup/index.tsx → src/browser-extension/popup/index.tsx b/src/popup/index.tsx → src/browser-extension/popup/index.tsx
@@ -1,8 +1,8 @@
 import React from 'react'
 import { createRoot } from 'react-dom/client'
-import { PopupCard } from '../content_script/PopupCard'
+import { PopupCard } from '../../common/components/PopupCard'
 import { Client as Styletron } from 'styletron-engine-atomic'
-import '../i18n.js'
+import '../../common/i18n.js'
 import './index.css'
 
 const engine = new Styletron({

diff --git a/src/popup/assets/images/beams.jpg → src/common/assets/images/beams.jpg b/src/popup/assets/images/beams.jpg → src/common/assets/images/beams.jpg
diff --git a/src/content_script/assets/images/icon.png → src/common/assets/images/icon-large.png b/src/content_script/assets/images/icon.png → src/common/assets/images/icon-large.png
diff --git a/src/popup/assets/images/icon.png → src/common/assets/images/icon.png b/src/popup/assets/images/icon.png → src/common/assets/images/icon.png
diff --git a/...ent_script/assets/images/party-popper.gif → src/common/assets/images/party-popper.gif b/...ent_script/assets/images/party-popper.gif → src/common/assets/images/party-popper.gif
diff --git a/src/content_script/assets/images/rocket.gif → src/common/assets/images/rocket.gif b/src/content_script/assets/images/rocket.gif → src/common/assets/images/rocket.gif
diff --git a/src/components/ErrorFallback.tsx → src/common/components/ErrorFallback.tsx b/src/components/ErrorFallback.tsx → src/common/components/ErrorFallback.tsx
diff --git a/src/components/Form/form.ts → src/common/components/Form/form.ts b/src/components/Form/form.ts → src/common/components/Form/form.ts
diff --git a/src/components/Form/index.module.css → src/common/components/Form/index.module.css b/src/components/Form/index.module.css → src/common/components/Form/index.module.css
diff --git a/src/components/Form/index.ts → src/common/components/Form/index.ts b/src/components/Form/index.ts → src/common/components/Form/index.ts
diff --git a/src/components/Form/item.tsx → src/common/components/Form/item.tsx b/src/components/Form/item.tsx → src/common/components/Form/item.tsx
diff --git a/src/components/Form/typings.ts → src/common/components/Form/typings.ts b/src/components/Form/typings.ts → src/common/components/Form/typings.ts
diff --git a/src/components/Form/validators.ts → src/common/components/Form/validators.ts b/src/components/Form/validators.ts → src/common/components/Form/validators.ts
diff --git a/src/components/IpLocationNotification.tsx → ...mon/components/IpLocationNotification.tsx b/src/components/IpLocationNotification.tsx → ...mon/components/IpLocationNotification.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
 import { Trans } from 'react-i18next'
 import { Notification, KIND as NOTIFICATION_KIND } from 'baseui-sd/notification'
 import { StyledLink } from 'baseui-sd/link'
-import { IpLocation, getIpLocationInfo } from '../common/geo'
+import { IpLocation, getIpLocationInfo } from '../geo'
 
 export default function IpLocationNotification() {
     const [ipLocation, setIpLocation] = useState<IpLocation | null>(null)

diff --git a/src/content_script/PopupCard.tsx → src/common/components/PopupCard.tsx b/src/content_script/PopupCard.tsx → src/common/components/PopupCard.tsx
@@ -5,45 +5,45 @@ import { Client as Styletron } from 'styletron-engine-atomic'
 import { Provider as StyletronProvider } from 'styletron-react'
 import { BaseProvider, Theme } from 'baseui-sd'
 import { Textarea } from 'baseui-sd/textarea'
-import icon from './assets/images/icon.png'
 import { createUseStyles } from 'react-jss'
 import { AiOutlineTranslation, AiOutlineFileSync } from 'react-icons/ai'
 import { IoSettingsOutline, IoColorPaletteOutline } from 'react-icons/io5'
 import { TbArrowsExchange, TbCsv } from 'react-icons/tb'
 import { MdOutlineSummarize, MdOutlineAnalytics, MdCode, MdOutlineGrade, MdGrade } from 'react-icons/md'
 import { StatefulTooltip } from 'baseui-sd/tooltip'
-import { detectLang, supportLanguages } from './lang'
-import { translate, TranslateMode } from './translate'
+import { detectLang, supportLanguages } from '../lang'
+import { translate, TranslateMode } from '../translate'
 import { Select, Value, Option } from 'baseui-sd/select'
 import { CopyToClipboard } from 'react-copy-to-clipboard'
 import { RxCopy, RxEraser, RxReload, RxSpeakerLoud } from 'react-icons/rx'
-import { calculateMaxXY, queryPopupCardElement } from './utils'
+import { calculateMaxXY, queryPopupCardElement } from '../../browser-extension/content_script/utils'
 import { clsx } from 'clsx'
 import { Button } from 'baseui-sd/button'
 import { ErrorBoundary } from 'react-error-boundary'
 import { ErrorFallback } from '../components/ErrorFallback'
-import { defaultAPIURL, exportToCsv, isDesktopApp, isFirefox, isTauri } from '../common/utils'
-import { Settings } from '../popup/Settings'
-import { documentPadding } from './consts'
+import { defaultAPIURL, exportToCsv, isDesktopApp, isFirefox, isTauri } from '../utils'
+import { Settings } from './Settings'
+import { documentPadding } from '../../browser-extension/content_script/consts'
 import Dropzone from 'react-dropzone'
 import { RecognizeResult, createWorker } from 'tesseract.js'
 import { BsTextareaT } from 'react-icons/bs'
 import { FcIdea } from 'react-icons/fc'
-import rocket from './assets/images/rocket.gif'
-import partyPopper from './assets/images/party-popper.gif'
+import icon from '../assets/images/icon.png'
+import rocket from '../assets/images/rocket.gif'
+import partyPopper from '../assets/images/party-popper.gif'
 import { Event } from '@tauri-apps/api/event'
 import SpeakerMotion from '../components/SpeakerMotion'
 import IpLocationNotification from '../components/IpLocationNotification'
-import { HighlightInTextarea } from '../common/highlight-in-textarea'
+import { HighlightInTextarea } from '../highlight-in-textarea'
 import LRUCache from 'lru-cache'
-import { ISettings, IThemedStyleProps } from '../common/types'
-import { useTheme } from '../common/hooks/useTheme'
-import { speak } from '../common/tts'
-import { Tooltip } from '../components/Tooltip'
-import { useSettings } from '../common/hooks/useSettings'
+import { ISettings, IThemedStyleProps } from '../types'
+import { useTheme } from '../hooks/useTheme'
+import { speak } from '../tts'
+import { Tooltip } from './Tooltip'
+import { useSettings } from '../hooks/useSettings'
 import Vocabulary from './Vocabulary'
-import { LocalDB, VocabularyItem } from '../common/db'
-import { useCollectedWordTotal } from '../common/hooks/useCollectedWordTotal'
+import { LocalDB, VocabularyItem } from '../db'
+import { useCollectedWordTotal } from '../hooks/useCollectedWordTotal'
 import { Modal } from 'baseui-sd/modal'
 import * as Sentry from '@sentry/react'
 import ReactGA from 'react-ga4'

diff --git a/src/popup/Settings.tsx → src/common/components/Settings.tsx b/src/popup/Settings.tsx → src/common/components/Settings.tsx
@@ -1,36 +1,35 @@
 import { useCallback, useEffect, useState } from 'react'
 import _ from 'underscore'
-import icon from './assets/images/icon.png'
-import beams from './assets/images/beams.jpg'
+import icon from '../assets/images/icon-large.png'
+import beams from '../assets/images/beams.jpg'
 import toast, { Toaster } from 'react-hot-toast'
-import * as utils from '../common/utils'
+import * as utils from '../utils'
 import { Client as Styletron } from 'styletron-engine-atomic'
 import { Provider as StyletronProvider } from 'styletron-react'
 import { BaseProvider } from 'baseui-sd'
 import { Input } from 'baseui-sd/input'
-import { createForm } from '../components/Form'
-import formStyles from 'inline:../components/Form/index.module.css'
+import { createForm } from './Form'
+import formStyles from 'inline:./Form/index.module.css'
 import { Button } from 'baseui-sd/button'
-import './index.css'
-import { TranslateMode, Provider, APIModel } from '../content_script/translate'
+import { TranslateMode, Provider, APIModel } from '../translate'
 import { Select, Value, Option } from 'baseui-sd/select'
 import { Checkbox } from 'baseui-sd/checkbox'
-import { supportLanguages } from '../content_script/lang'
+import { supportLanguages } from '../lang'
 import { useRecordHotkeys } from 'react-hotkeys-hook'
 import { createUseStyles } from 'react-jss'
 import clsx from 'clsx'
-import { ISettings, IThemedStyleProps, ThemeType } from '../common/types'
-import { useTheme } from '../common/hooks/useTheme'
+import { ISettings, IThemedStyleProps, ThemeType } from '../types'
+import { useTheme } from '../hooks/useTheme'
 import { IoCloseCircle } from 'react-icons/io5'
 import { useTranslation } from 'react-i18next'
-import AppConfig from '../../package.json'
-import { useSettings } from '../common/hooks/useSettings'
-import { langCode2TTSLang } from '../common/tts'
+import AppConfig from '../../../package.json'
+import { useSettings } from '../hooks/useSettings'
+import { langCode2TTSLang } from '../tts'
 import { RiDeleteBin5Line } from 'react-icons/ri'
 import { IoMdAdd } from 'react-icons/io'
-import { TTSProvider } from '../common/tts/types'
-import { getEdgeVoices } from '../common/tts/edge-tts'
-import { backgroundFetch } from '../common/background-fetch'
+import { TTSProvider } from '../tts/types'
+import { getEdgeVoices } from '../tts/edge-tts'
+import { backgroundFetch } from '../background-fetch'
 
 const langOptions: Value = supportLanguages.reduce((acc, [id, label]) => {
     return [

diff --git a/src/components/SpeakerMotion.tsx → src/common/components/SpeakerMotion.tsx b/src/components/SpeakerMotion.tsx → src/common/components/SpeakerMotion.tsx
diff --git a/src/components/Tooltip.tsx → src/common/components/Tooltip.tsx b/src/components/Tooltip.tsx → src/common/components/Tooltip.tsx
diff --git a/src/content_script/Vocabulary.tsx → src/common/components/Vocabulary.tsx b/src/content_script/Vocabulary.tsx → src/common/components/Vocabulary.tsx
@@ -1,25 +1,25 @@
 import { useCallback, useEffect, useMemo, useState, useRef } from 'react'
 import { Button } from 'baseui-sd/button'
-import { useTheme } from '../common/hooks/useTheme'
+import { useTheme } from '../hooks/useTheme'
 import { createUseStyles } from 'react-jss'
 import { StatefulTooltip } from 'baseui-sd/tooltip'
-import { IThemedStyleProps } from '../common/types'
+import { IThemedStyleProps } from '../types'
 import { MdOutlineGrade, MdGrade } from 'react-icons/md'
 import { useTranslation } from 'react-i18next'
 import { FaDice } from 'react-icons/fa'
 import { AiOutlineCloseCircle } from 'react-icons/ai'
 import { Select } from 'baseui-sd/select'
 import { FcIdea } from 'react-icons/fc'
 import { toast } from 'react-hot-toast'
-import { translate } from './translate'
+import { translate } from '../translate'
 import CopyToClipboard from 'react-copy-to-clipboard'
 import { RxCopy } from 'react-icons/rx'
 import { format } from 'date-fns'
-import { LocalDB, VocabularyItem } from '../common/db'
-import { useCollectedWordTotal } from '../common/hooks/useCollectedWordTotal'
+import { LocalDB, VocabularyItem } from '../db'
+import { useCollectedWordTotal } from '../hooks/useCollectedWordTotal'
 import { RiPictureInPictureExitLine } from 'react-icons/ri'
-import { Tooltip } from '../components/Tooltip'
-import { isDesktopApp } from '../common/utils'
+import { Tooltip } from './Tooltip'
+import { isDesktopApp } from '../utils'
 
 const RANDOM_SIZE = 10
 const MAX_WORDS = 50

diff --git a/src/i18n.d.ts → src/common/i18n.d.ts b/src/i18n.d.ts → src/common/i18n.d.ts
diff --git a/src/i18n.js → src/common/i18n.js b/src/i18n.js → src/common/i18n.js
diff --git a/src/i18n/locales/en/translation.json → src/common/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json → src/common/i18n/locales/en/translation.json
diff --git a/src/i18n/locales/ja/translation.json → src/common/i18n/locales/ja/translation.json b/src/i18n/locales/ja/translation.json → src/common/i18n/locales/ja/translation.json
diff --git a/src/i18n/locales/th/translation.json → src/common/i18n/locales/th/translation.json b/src/i18n/locales/th/translation.json → src/common/i18n/locales/th/translation.json
diff --git a/src/i18n/locales/zh-Hans/translation.json → ...mon/i18n/locales/zh-Hans/translation.json b/src/i18n/locales/zh-Hans/translation.json → ...mon/i18n/locales/zh-Hans/translation.json
diff --git a/src/i18n/locales/zh-Hant/translation.json → ...mon/i18n/locales/zh-Hant/translation.json b/src/i18n/locales/zh-Hant/translation.json → ...mon/i18n/locales/zh-Hant/translation.json
diff --git a/src/content_script/lang.ts → src/common/lang.ts b/src/content_script/lang.ts → src/common/lang.ts
diff --git a/src/content_script/translate.ts → src/common/translate.ts b/src/content_script/translate.ts → src/common/translate.ts
diff --git a/src/common/types.ts b/src/common/types.ts
@@ -1,5 +1,5 @@
 import { Theme } from 'baseui-sd/theme'
-import { TranslateMode, Provider } from '../content_script/translate'
+import { TranslateMode, Provider } from './translate'
 import { TTSProvider } from './tts/types'
 
 /* eslint-disable @typescript-eslint/no-explicit-any */

diff --git a/src/common/utils.ts b/src/common/utils.ts
@@ -1,4 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import { createParser } from 'eventsource-parser'
+import { backgroundFetch } from './background-fetch'
+import { userscriptFetch } from './userscript-polyfill'
 import { BaseDirectory, writeTextFile } from '@tauri-apps/api/fs'
 import { IBrowser, ISettings } from './types'
 
@@ -194,3 +197,43 @@ export async function exportToCsv<T extends Record<string, string | number>>(fil
         }
     }
 }
+
+interface FetchSSEOptions extends RequestInit {
+    onMessage(data: string): void
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    onError(error: any): void
+    fetcher?: (input: string, options: RequestInit) => Promise<Response>
+}
+
+export async function fetchSSE(input: string, options: FetchSSEOptions) {
+    const { onMessage, onError, ...fetchOptions } = options
+
+    const fetcher =
+        options.fetcher ?? (isUserscript() ? userscriptFetch : !isDesktopApp() ? backgroundFetch : window.fetch)
+
+    const resp = await fetcher(input, fetchOptions)
+    if (resp.status !== 200) {
+        onError(await resp.json())
+        return
+    }
+
+    const parser = createParser((event) => {
+        if (event.type === 'event') {
+            onMessage(event.data)
+        }
+    })
+    const reader = resp.body.getReader()
+    try {
+        // eslint-disable-next-line no-constant-condition
+        while (true) {
+            const { done, value } = await reader.read()
+            if (done) {
+                break
+            }
+            const str = new TextDecoder().decode(value)
+            parser.feed(str)
+        }
+    } finally {
+        reader.releaseLock()
+    }
+}
diff --git a/src/electron/renderer/App.tsx b/src/electron/renderer/App.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { PopupCard } from '../../content_script/PopupCard'
+import { PopupCard } from '../../common/components/PopupCard'
 import { Client as Styletron } from 'styletron-engine-atomic'
 
 const engine = new Styletron({

diff --git a/src/electron/renderer/index.tsx b/src/electron/renderer/index.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import { createRoot } from 'react-dom/client'
 import { App } from './App'
 
-import '../../i18n.js'
+import '../../common/i18n.js'
 
 const root = createRoot(document.getElementById('root')!)
 

diff --git a/src/tauri/App.tsx b/src/tauri/App.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react'
-import { PopupCard } from '../content_script/PopupCard'
+import { PopupCard } from '../common/components/PopupCard'
 import { Client as Styletron } from 'styletron-engine-atomic'
 import { appWindow } from '@tauri-apps/api/window'
 import { listen, Event } from '@tauri-apps/api/event'

diff --git a/src/tauri/index.html b/src/tauri/index.html
@@ -12,6 +12,10 @@
         <script src="index.js" type="application/javascript" defer></script>
         <title>OpenAI Translator</title>
         <style>
+            html, body {
+                margin: 0px;
+                padding: 0px;
+            }
             body {
                 overscroll-behavior: none;
                 scrollbar-width: none;

diff --git a/src/tauri/index.tsx b/src/tauri/index.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import { createRoot } from 'react-dom/client'
 import { App } from './App'
 
-import '../i18n.js'
+import '../common/i18n.js'
 
 const root = createRoot(document.getElementById('root')!)
 

diff --git a/src/tauri/thumb.tsx b/src/tauri/thumb.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { createRoot } from 'react-dom/client'
-import icon from '../content_script/assets/images/icon.png'
+import icon from '../common/assets/images/icon.png'
 import { useTheme } from '../common/hooks/useTheme'
 import { BaseProvider } from 'baseui-sd'