chore(i18n): bump i18n from v1 to v2

package.json

@@ -20,7 +20,7 @@
     "@fontsource/fira-sans": "^5.0.12",
     "@solid-primitives/clipboard": "^1.5.7",
     "@solid-primitives/event-listener": "^2.3.0",
-    "@solid-primitives/i18n": "^1.4.1",
+    "@solid-primitives/i18n": "^2.0.0",
     "@solid-primitives/keyed": "^1.2.0",
     "@solid-primitives/media": "^2.2.5",
     "@solid-primitives/resize-observer": "^2.0.22",

src/components/ConnectionsSettingsModal.tsx

@@ -1,6 +1,5 @@
 import { createForm } from '@felte/solid'
 import { validator } from '@felte/validator-zod'
-import { useI18n } from '@solid-primitives/i18n'
 import { IconX } from '@tabler/icons-solidjs'
 import type {
   DragEventHandler,
@@ -27,6 +26,7 @@ import {
   MODAL,
   TAILWINDCSS_SIZE,
 } from '~/constants'
+import { useI18n } from '~/i18n'
 import {
   allConnections,
   clientSourceIPTags,
@@ -45,7 +45,7 @@ const TagClientSourceIPWithNameForm: Component = () => {
     sourceIP: z.string().nonempty(),
   })
 
-  const [t] = useI18n()
+  const { t } = useI18n()
 
   const { form, reset } = createForm<z.infer<typeof schema>>({
     extend: validator({ schema }),
@@ -113,7 +113,7 @@ export const ConnectionsSettingsModal = (props: {
   onVisibleChange: (value: ConnectionsTableColumnVisibility) => void
 }) => {
   const modalID = MODAL.CONNECTIONS_SETTINGS
-  const [t] = useI18n()
+  const { t } = useI18n()
   const [activeKey, setActiveKey] =
     createSignal<CONNECTIONS_TABLE_ACCESSOR_KEY | null>(null)
 

src/components/Header.tsx

@@ -1,4 +1,3 @@
-import { useI18n } from '@solid-primitives/i18n'
 import { A, useLocation } from '@solidjs/router'
 import {
   IconFileStack,
@@ -14,6 +13,7 @@ import {
 import { For, ParentComponent, Show, createSignal } from 'solid-js'
 import { Button, LogoText } from '~/components'
 import { LANG, ROUTES, themes } from '~/constants'
+import { useI18n } from '~/i18n'
 import { setCurTheme } from '~/signals'
 
 const Nav: ParentComponent<{ href: string; tooltip: string }> = ({
@@ -62,7 +62,7 @@ const ThemeSwitcher = () => (
 )
 
 export const Header = () => {
-  const [t, { locale }] = useI18n()
+  const { t, locale } = useI18n()
   const navs = () => [
     {
       href: ROUTES.Overview,

src/components/Latency.tsx

@@ -1,10 +1,10 @@
-import { useI18n } from '@solid-primitives/i18n'
 import { Show, createEffect, createMemo, createSignal } from 'solid-js'
 import { LATENCY_QUALITY_MAP_HTTP } from '~/constants'
+import { useI18n } from '~/i18n'
 import { latencyQualityMap, useProxies } from '~/signals'
 
 export const Latency = (props: { name?: string }) => {
-  const [t] = useI18n()
+  const { t } = useI18n()
   const { latencyMap } = useProxies()
   const [textClassName, setTextClassName] = createSignal('')
   const latency = createMemo(() => {

src/components/LogsSettingsModal.tsx

@@ -1,4 +1,3 @@
-import { useI18n } from '@solid-primitives/i18n'
 import { IconX } from '@tabler/icons-solidjs'
 import { For } from 'solid-js'
 import { Button, ConfigTitle } from '~/components'
@@ -8,6 +7,7 @@ import {
   MODAL,
   TAILWINDCSS_SIZE,
 } from '~/constants'
+import { useI18n } from '~/i18n'
 import {
   logLevel,
   logMaxRows,
@@ -19,7 +19,7 @@ import {
 
 export const LogsSettingsModal = () => {
   const modalID = MODAL.LOGS_SETTINGS
-  const [t] = useI18n()
+  const { t } = useI18n()
 
   return (
     <dialog id={modalID} class="modal modal-bottom sm:modal-middle">

src/components/ProxiesSettingsModal.tsx

@@ -1,8 +1,8 @@
-import { useI18n } from '@solid-primitives/i18n'
 import { IconX } from '@tabler/icons-solidjs'
 import { For } from 'solid-js'
 import { Button, ConfigTitle } from '~/components'
 import { MODAL, PROXIES_ORDERING_TYPE, PROXIES_PREVIEW_TYPE } from '~/constants'
+import { useI18n } from '~/i18n'
 import {
   autoCloseConns,
   hideUnAvailableProxies,
@@ -20,7 +20,7 @@ import {
 
 export const ProxiesSettingsModal = () => {
   const modalID = MODAL.PROXIES_SETTINGS
-  const [t] = useI18n()
+  const { t } = useI18n()
 
   return (
     <dialog id={modalID} class="modal modal-bottom sm:modal-middle">

src/components/SubscriptionInfo.tsx

@@ -1,7 +1,7 @@
-import { useI18n } from '@solid-primitives/i18n'
 import byteSize from 'byte-size'
 import dayjs from 'dayjs'
 import { toFinite } from 'lodash'
+import { useI18n } from '~/i18n'
 import type { SubscriptionInfo as ISubscriptionInfo } from '~/types'
 
 const getSubscriptionsInfo = (subscriptionInfo: ISubscriptionInfo) => {
@@ -14,13 +14,13 @@ const getSubscriptionsInfo = (subscriptionInfo: ISubscriptionInfo) => {
   const percentage = toFinite((((Download + Upload) / Total) * 100).toFixed(2))
 
   const expirePrefix = () => {
-    const [t] = useI18n()
+    const { t } = useI18n()
 
     return t('expire')
   }
 
   const expireStr = () => {
-    const [t] = useI18n()
+    const { t } = useI18n()
 
     if (Expire === 0) {
       return t('noExpire')

src/i18n/dict.ts

@@ -1,7 +1,10 @@
+import { Flatten } from '@solid-primitives/i18n'
 import { LANG } from '~/constants'
 import en from './en'
 import zh from './zh'
 
+export type Dict = Flatten<typeof en>
+
 export default {
   [LANG.EN]: en,
   [LANG.ZH]: zh,

src/i18n/index.tsx

@@ -1,43 +1,32 @@
-import { I18nContext, createI18nContext, useI18n } from '@solid-primitives/i18n'
+import * as i18n from '@solid-primitives/i18n'
 import { makePersisted } from '@solid-primitives/storage'
-import dayjs from 'dayjs'
-import { ParentComponent, createEffect, createSignal } from 'solid-js'
+import { createMemo, createSignal } from 'solid-js'
 import { LANG } from '~/constants'
 import dict from './dict'
 
-const useLanguage = () => {
-  const [lang, setLang] = makePersisted(
-    createSignal(
-      Reflect.has(dict, navigator.language) ? navigator.language : LANG.EN,
+const [curLocale, setCurLocale] = makePersisted(
+  createSignal<LANG>(
+    Reflect.has(dict, navigator.language)
+      ? (navigator.language as LANG)
+      : LANG.EN,
   ),
   {
     name: 'lang',
     storage: localStorage,
   },
-  )
+)
 
-  return { lang, setLang }
+const locale = (localeName?: LANG) => {
+  if (localeName) {
+    return setCurLocale(localeName)
+  }
+
+  return curLocale()
 }
 
-const I18nUpdater: ParentComponent = (props) => {
-  const { setLang } = useLanguage()
-  const [, { locale }] = useI18n()
+export const useI18n = () => {
+  const curDict = createMemo(() => i18n.flatten(dict[curLocale()]))!
+  const t = i18n.translator(() => curDict())
 
-  createEffect(() => {
-    setLang(locale())
-    dayjs.locale(locale())
-  })
-
-  return props.children
-}
-
-export const I18nProvider: ParentComponent = (props) => {
-  const { lang } = useLanguage()
-  const value = createI18nContext(dict, lang())
-
-  return (
-    <I18nContext.Provider value={value}>
-      <I18nUpdater>{props.children}</I18nUpdater>
-    </I18nContext.Provider>
-  )
+  return { t, locale }
 }

src/i18n/zh.ts

@@ -1,3 +1,5 @@
+import { Dict } from '~/i18n/dict'
+
 export default {
   add: '添加',
   overview: '概览',
@@ -97,4 +99,4 @@ export default {
   version: '版本',
   expire: '到期时间',
   noExpire: '不限时',
-}
+} satisfies Dict

src/main.tsx

@@ -7,17 +7,14 @@ import 'dayjs/locale/zh-cn'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { render } from 'solid-js/web'
 import { App } from '~/App'
-import { I18nProvider } from '~/i18n'
 
 dayjs.extend(relativeTime)
 
 render(
   () => (
-    <I18nProvider>
     <Router source={hashIntegration()}>
       <App />
     </Router>
-    </I18nProvider>
   ),
   document.getElementById('root')!,
 )

src/pages/Config.tsx

@@ -1,6 +1,5 @@
 import { createForm } from '@felte/solid'
 import { validator } from '@felte/validator-zod'
-import { useI18n } from '@solid-primitives/i18n'
 import { useNavigate } from '@solidjs/router'
 import {
   For,
@@ -28,6 +27,7 @@ import {
 } from '~/apis'
 import { Button, ConfigTitle } from '~/components'
 import { MODE_OPTIONS, ROUTES, themes } from '~/constants'
+import { useI18n } from '~/i18n'
 import {
   autoSwitchTheme,
   favDayTheme,
@@ -48,7 +48,7 @@ const dnsQueryFormSchema = z.object({
 })
 
 const DNSQueryForm = () => {
-  const [t] = useI18n()
+  const { t } = useI18n()
   const request = useRequest()
 
   const { form, isSubmitting } = createForm<z.infer<typeof dnsQueryFormSchema>>(
@@ -111,7 +111,7 @@ const configFormSchema = z.object({
 })
 
 const ConfigForm = () => {
-  const [t] = useI18n()
+  const { t } = useI18n()
   const navigate = useNavigate()
 
   const portList = [
@@ -267,7 +267,7 @@ const ConfigForm = () => {
 }
 
 const ConfigForXd = () => {
-  const [t] = useI18n()
+  const { t } = useI18n()
 
   return (
     <div class="grid grid-cols-2 place-items-center gap-4">
@@ -354,7 +354,7 @@ const Versions = () => {
 }
 
 export default () => {
-  const [t] = useI18n()
+  const { t } = useI18n()
 
   return (
     <div class="mx-auto flex max-w-screen-md flex-col gap-4">

src/pages/Connections.tsx

@@ -1,5 +1,4 @@
 import { writeClipboard } from '@solid-primitives/clipboard'
-import { useI18n } from '@solid-primitives/i18n'
 import { makePersisted } from '@solid-primitives/storage'
 import {
   IconInfoSmall,
@@ -46,6 +45,7 @@ import {
 } from '~/components'
 import { CONNECTIONS_TABLE_ACCESSOR_KEY, MODAL } from '~/constants'
 import { formatTimeFromNow } from '~/helpers'
+import { useI18n } from '~/i18n'
 import {
   allConnections,
   clientSourceIPTags,
@@ -78,7 +78,7 @@ const fuzzyFilter: FilterFn<Connection> = (row, columnId, value, addMeta) => {
 }
 
 export default () => {
-  const [t] = useI18n()
+  const { t } = useI18n()
 
   const [activeTab, setActiveTab] = createSignal(ActiveTab.activeConnections)
   const { activeConnections, closedConnections, paused, setPaused } =
@@ -346,7 +346,7 @@ export default () => {
           </div>
 
           <select
-            class="select join-item select-bordered select-primary"
+            class="join-item select select-bordered select-primary"
             onChange={(e) => setSourceIPFilter(e.target.value)}
           >
             <option value="">{t('all')}</option>

src/pages/Logs.tsx

@@ -1,4 +1,3 @@
-import { useI18n } from '@solid-primitives/i18n'
 import { makePersisted } from '@solid-primitives/storage'
 import {
   IconSettings,
@@ -20,6 +19,7 @@ import { For, Index, createEffect, createMemo, createSignal } from 'solid-js'
 import { twMerge } from 'tailwind-merge'
 import { Button, LogsSettingsModal } from '~/components'
 import { LOG_LEVEL, MODAL } from '~/constants'
+import { useI18n } from '~/i18n'
 import { logsTableSize, tableSizeClassName, useWsRequest } from '~/signals'
 import { logLevel, logMaxRows } from '~/signals/config'
 import { Log } from '~/types'
@@ -40,7 +40,7 @@ const fuzzyFilter: FilterFn<LogWithSeq> = (row, columnId, value, addMeta) => {
 }
 
 export default () => {
-  const [t] = useI18n()
+  const { t } = useI18n()
   let seq = 1
   const [logs, setLogs] = createSignal<LogWithSeq[]>([])
 

src/pages/Overview.tsx

@@ -1,4 +1,3 @@
-import { useI18n } from '@solid-primitives/i18n'
 import { makeTimer } from '@solid-primitives/timer'
 import type { ApexOptions } from 'apexcharts'
 import byteSize from 'byte-size'
@@ -14,6 +13,7 @@ import {
   createSignal,
 } from 'solid-js'
 import { CHART_MAX_XAXIS, DEFAULT_CHART_OPTIONS } from '~/constants'
+import { useI18n } from '~/i18n'
 import { latestConnectionMsg, useWsRequest } from '~/signals'
 
 const TrafficWidget: ParentComponent<{ label: JSX.Element }> = (props) => (
@@ -26,7 +26,7 @@ const TrafficWidget: ParentComponent<{ label: JSX.Element }> = (props) => (
 )
 
 export default () => {
-  const [t] = useI18n()
+  const { t } = useI18n()
 
   const [traffics, setTraffics] = createSignal<{ down: number; up: number }[]>(
     [],

src/pages/Proxies.tsx

@@ -1,4 +1,3 @@
-import { useI18n } from '@solid-primitives/i18n'
 import {
   IconBrandSpeedtest,
   IconReload,
@@ -22,6 +21,7 @@ import {
   sortProxiesByOrderingType,
   useStringBooleanMap,
 } from '~/helpers'
+import { useI18n } from '~/i18n'
 import {
   hideUnAvailableProxies,
   proxiesOrderingType,
@@ -34,7 +34,7 @@ enum ActiveTab {
 }
 
 export default () => {
-  const [t] = useI18n()
+  const { t } = useI18n()
   const {
     proxies,
     selectProxyInGroup,

src/pages/Rules.tsx

@@ -1,9 +1,9 @@
-import { useI18n } from '@solid-primitives/i18n'
 import { IconReload } from '@tabler/icons-solidjs'
 import { For, Show, createSignal, onMount } from 'solid-js'
 import { twMerge } from 'tailwind-merge'
 import { Button } from '~/components'
 import { formatTimeFromNow, useStringBooleanMap } from '~/helpers'
+import { useI18n } from '~/i18n'
 import { useRules } from '~/signals'
 
 enum ActiveTab {
@@ -12,7 +12,7 @@ enum ActiveTab {
 }
 
 export default () => {
-  const [t] = useI18n()
+  const { t } = useI18n()
   const {
     rules,
     ruleProviders,

src/pages/Setup.tsx

@@ -1,6 +1,5 @@
 import { createForm } from '@felte/solid'
 import { validator } from '@felte/validator-zod'
-import { useI18n } from '@solid-primitives/i18n'
 import { useNavigate } from '@solidjs/router'
 import { IconX } from '@tabler/icons-solidjs'
 import ky from 'ky'
@@ -10,6 +9,7 @@ import { v4 as uuid } from 'uuid'
 import { z } from 'zod'
 import { Button } from '~/components'
 import { transformEndpointURL } from '~/helpers'
+import { useI18n } from '~/i18n'
 import {
   endpointList,
   selectedEndpoint,
@@ -23,7 +23,7 @@ const schema = z.object({
 })
 
 export default () => {
-  const [t] = useI18n()
+  const { t } = useI18n()
   const navigate = useNavigate()
 
   const onSetupSuccess = (id: string) => {