refactor(i18n): update to @solid-primitives/i18n v2 (#109)

* chore(deps): update to vite@6

* fix(useDownload): correct token parameter handling

* chore(deps): update to typescript@5

* chore(deps): update to @solid-primitives/i18n@2

* feat(i18n): update usage to @solid-primitives/i18n@2

* fix(useT): remove log added in dev

Author: xrgzs

package.json

@@ -42,24 +42,24 @@
     "@types/qrcode": "^1.5.5",
     "@types/sha256": "^0.2.2",
     "@types/streamsaver": "^2.0.5",
-    "@vitejs/plugin-legacy": "^4.1.1",
+    "@vitejs/plugin-legacy": "^6.1.1",
     "husky": "^9.0.0",
     "lint-staged": "^16.0.0",
     "prettier": "3.6.2",
     "rollup-plugin-copy": "^3.5.0",
-    "terser": "^5.42.0",
-    "typescript": "^4.9.5",
-    "vite": "^4.5.14",
+    "terser": "^5.43.1",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.5",
     "vite-plugin-dynamic-base": "^0.4.9",
-    "vite-plugin-solid": "^2.11.6"
+    "vite-plugin-solid": "^2.11.7"
   },
   "dependencies": {
     "@egjs/view360": "4.0.0-beta.7",
     "@github/webauthn-json": "^2.1.1",
     "@hope-ui/solid": "0.6.7",
     "@monaco-editor/loader": "^1.5.0",
     "@pdfslick/solid": "^3.0.0",
-    "@solid-primitives/i18n": "^1.4.1",
+    "@solid-primitives/i18n": "^2.2.1",
     "@solid-primitives/keyboard": "^1.3.1",
     "@solid-primitives/storage": "^1.3.11",
     "@solidjs/router": "^0.9.1",

pnpm-lock.yaml

@@ -10,17 +10,15 @@ import {
   Switch,
 } from "solid-js"
 import { Portal } from "solid-js/web"
+import { Error, FullScreenLoading } from "~/components"
 import { useLoading, useRouter, useT } from "~/hooks"
-import { globalStyles } from "./theme"
-import { bus, r, handleRespWithoutAuthAndNotify, base_path } from "~/utils"
 import { setSettings } from "~/store"
-import { Error, FullScreenLoading } from "~/components"
+import { setArchiveExtensions } from "~/store/archive"
+import { Resp } from "~/types"
+import { base_path, bus, handleRespWithoutAuthAndNotify, r } from "~/utils"
 import { MustUser } from "./MustUser"
 import "./index.css"
-import { useI18n } from "@solid-primitives/i18n"
-import { initialLang, langMap, loadedLangs } from "./i18n"
-import { PEmptyResp, PResp, Resp } from "~/types"
-import { setArchiveExtensions } from "~/store/archive"
+import { globalStyles } from "./theme"
 
 const Home = lazy(() => import("~/pages/home/Layout"))
 const Manage = lazy(() => import("~/pages/manage"))
@@ -30,7 +28,6 @@ const Test = lazy(() => import("~/pages/test"))
 const App: Component = () => {
   const t = useT()
   globalStyles()
-  const [, { add }] = useI18n()
   const isRouting = useIsRouting()
   const { to, pathname } = useRouter()
   const onTo = (path: string) => {
@@ -48,10 +45,6 @@ const App: Component = () => {
   const [err, setErr] = createSignal<string[]>([])
   const [loading, data] = useLoading(() =>
     Promise.all([
-      (async () => {
-        add(initialLang, (await langMap[initialLang]()).default)
-        loadedLangs.add(initialLang)
-      })(),
       (async () => {
         handleRespWithoutAuthAndNotify(
           (await r.get("/public/settings")) as Resp<Record<string, string>>,

src/app/App.tsx

@@ -1,51 +1,56 @@
-import { createI18nContext } from "@solid-primitives/i18n"
-import { createSignal } from "solid-js"
+import * as i18n from "@solid-primitives/i18n"
+import { createResource, createSignal } from "solid-js"
+export { i18n }
 
-interface Language {
-  code: string
-  lang: string
-}
+// glob search by Vite
 const langs = import.meta.glob("~/lang/*/index.json", {
   eager: true,
   import: "lang",
 })
-const languages: Language[] = []
-
-for (const path in langs) {
-  const name = path.split("/")[3]
-  languages.push({
-    code: name,
-    lang: langs[path] as string,
-  })
-}
+
+// all available languages
+export const languages = Object.keys(langs).map((langPath) => {
+  const langCode = langPath.split("/")[3]
+  const langName = langs[langPath] as string
+  return { code: langCode, lang: langName }
+})
+
+// determine browser's default language
+const userLang = navigator.language.toLowerCase()
 const defaultLang =
+  languages.find((lang) => lang.code.toLowerCase() === userLang)?.code ||
   languages.find(
-    (lang) => lang.code.toLowerCase() === navigator.language.toLowerCase(),
-  )?.code ||
-  languages.find(
-    (lang) =>
-      lang.code.toLowerCase().split("-")[0] ===
-      navigator.language.toLowerCase().split("-")[0],
+    (lang) => lang.code.toLowerCase().split("-")[0] === userLang.split("-")[0],
   )?.code ||
   "en"
 
-export let initialLang = localStorage.getItem("lang") ?? ""
-if (!initialLang || !languages.find((lang) => lang.code === initialLang)) {
+// Get initial language from localStorage or fallback to defaultLang
+export let initialLang = localStorage.getItem("lang") ?? defaultLang
+
+if (!languages.some((lang) => lang.code === initialLang)) {
   initialLang = defaultLang
 }
 
-// store lang and import
-export const langMap: Record<string, any> = {}
-const imports = import.meta.glob("~/lang/*/entry.ts")
-for (const path in imports) {
-  const name = path.split("/")[3]
-  langMap[name] = imports[path]
+// Type imports
+// use `type` to not include the actual dictionary in the bundle
+import type * as en from "~/lang/en/entry"
+
+export type Lang = keyof typeof langs
+export type RawDictionary = typeof en.dict
+export type Dictionary = i18n.Flatten<RawDictionary>
+
+// Fetch and flatten the dictionary
+const fetchDictionary = async (locale: Lang): Promise<Dictionary> => {
+  try {
+    const dict: RawDictionary = (await import(`~/lang/${locale}/entry.ts`)).dict
+    return i18n.flatten(dict) // Flatten dictionary for easier access to keys
+  } catch (err) {
+    console.error(`Error loading dictionary for locale: ${locale}`, err)
+    throw new Error(`Failed to load dictionary for ${locale}`)
+  }
 }
 
-export const loadedLangs = new Set<string>()
-
-const i18n = createI18nContext({}, initialLang)
-
-const [currentLang, setLang] = createSignal(initialLang)
+// Signals to track current language and dictionary state
+export const [currentLang, setCurrentLang] = createSignal<Lang>(initialLang)
 
-export { languages, i18n, currentLang, setLang }
+export const [dict] = createResource(currentLang, fetchDictionary)

src/app/i18n.ts

@@ -1,9 +1,7 @@
 import { HopeProvider, NotificationsProvider } from "@hope-ui/solid"
-import { I18nContext } from "@solid-primitives/i18n"
 import { ErrorBoundary, Suspense } from "solid-js"
 import { Error, FullScreenLoading } from "~/components"
 import App from "./App"
-import { i18n } from "./i18n"
 import { globalStyles, theme } from "./theme"
 
 const Index = () => {
@@ -16,13 +14,11 @@ const Index = () => {
           return <Error msg={`System error: ${err}`} h="100vh" />
         }}
       >
-        <I18nContext.Provider value={i18n}>
-          <NotificationsProvider duration={3000}>
-            <Suspense fallback={<FullScreenLoading />}>
-              <App />
-            </Suspense>
-          </NotificationsProvider>
-        </I18nContext.Provider>
+        <NotificationsProvider duration={3000}>
+          <Suspense fallback={<FullScreenLoading />}>
+            <App />
+          </Suspense>
+        </NotificationsProvider>
       </ErrorBoundary>
     </HopeProvider>
   )

src/app/index.tsx

@@ -9,9 +9,8 @@ import {
   Spinner,
   useColorModeValue,
 } from "@hope-ui/solid"
-import { useI18n } from "@solid-primitives/i18n"
 import { createSignal, For, Show } from "solid-js"
-import { langMap, languages, loadedLangs, setLang } from "~/app/i18n"
+import { Lang, languages, setCurrentLang } from "~/app/i18n"
 // import { TbLanguageHiragana } from "solid-icons/tb";
 import { IoLanguageOutline } from "solid-icons/io"
 import { Portal } from "solid-js/web"
@@ -21,16 +20,8 @@ const [fetchingLang, setFetchingLang] = createSignal(false)
 export const SwitchLanguage = <C extends ElementType = "button">(
   props: MenuTriggerProps<C>,
 ) => {
-  const [, { locale, add }] = useI18n()
-  const switchLang = async (lang: string) => {
-    if (!loadedLangs.has(lang)) {
-      setFetchingLang(true)
-      add(lang, (await langMap[lang]()).default)
-      setFetchingLang(false)
-      loadedLangs.add(lang)
-    }
-    locale(lang)
-    setLang(lang)
+  const switchLang = async (lang: Lang) => {
+    setCurrentLang(lang)
     localStorage.setItem("lang", lang)
   }
 

src/components/SwitchLanguage.tsx

@@ -26,7 +26,7 @@ async function getSaveDir(rpc_url: string, rpc_secret: string) {
     id: Math.random().toString(),
     jsonrpc: "2.0",
     method: "aria2.getGlobalOption",
-    params: ["token:" + rpc_secret ?? ""],
+    params: ["token:" + (rpc_secret ?? "")],
   })
   console.log(resp)
   if (resp.status === 200) {
@@ -140,7 +140,7 @@ export const useDownload = () => {
                 jsonrpc: "2.0",
                 method: "aria2.addUri",
                 params: [
-                  "token:" + aria2_rpc_secret ?? "",
+                  "token:" + (aria2_rpc_secret ?? ""),
                   [res[key].url],
                   {
                     out: res[key].name,

src/hooks/useDownload.ts

@@ -1,25 +1,35 @@
-import { useI18n } from "@solid-primitives/i18n"
+import { dict, i18n, languages } from "~/app/i18n"
 import { firstUpperCase } from "~/utils"
 
-const useT = () => {
-  const [t] = useI18n()
+export const useT = () => {
+  const t = i18n.translator(dict)
+  const tt = (key: string, params?: i18n.BaseTemplateArgs) => {
+    return i18n.resolveTemplate ? i18n.resolveTemplate(key, params) : t(key)
+  }
   return (
     key: string,
-    params?: Record<string, string> | undefined,
+    params?: i18n.BaseTemplateArgs | undefined,
     defaultValue?: string | undefined,
   ) => {
-    const value = t(key, params, defaultValue)
-    if (!value) {
-      if (import.meta.env.DEV) return key
-      let lastDotIndex = key.lastIndexOf(".")
-      if (lastDotIndex === key.length - 1) {
-        lastDotIndex = key.lastIndexOf(".", lastDotIndex - 1)
-      }
-      const last = key.slice(lastDotIndex + 1)
-      return firstUpperCase(last).split("_").join(" ")
-    }
-    return value
+    const value = params
+      ? (tt(key, params) as string | undefined)
+      : (t(key) as string | undefined)
+
+    if (value) return value
+
+    if (defaultValue) return defaultValue
+
+    if (import.meta.env.DEV) return key
+
+    return formatKeyAsDisplay(key)
   }
 }
 
-export { useT }
+const formatKeyAsDisplay = (key: string): string => {
+  let lastDotIndex = key.lastIndexOf(".")
+  if (lastDotIndex === key.length - 1) {
+    lastDotIndex = key.lastIndexOf(".", lastDotIndex - 1)
+  }
+  const last = key.slice(lastDotIndex + 1)
+  return firstUpperCase(last).split("_").join(" ")
+}

src/hooks/useT.ts

@@ -1,7 +1,31 @@
-const jsons = import.meta.glob("./*.json", { eager: true, import: "default" })
-const langs: any = {}
-for (const path in jsons) {
-  const name = path.split("/")[1].split(".")[0]
-  langs[name] = jsons[path]
+import br from "./br.json"
+import drivers from "./drivers.json"
+import global from "./global.json"
+import home from "./home.json"
+import index from "./index.json"
+import indexes from "./indexes.json"
+import login from "./login.json"
+import manage from "./manage.json"
+import metas from "./metas.json"
+import settings_other from "./settings_other.json"
+import settings from "./settings.json"
+import storages from "./storages.json"
+import tasks from "./tasks.json"
+import users from "./users.json"
+
+export const dict = {
+  br,
+  drivers,
+  global,
+  home,
+  index,
+  indexes,
+  login,
+  manage,
+  metas,
+  settings_other,
+  settings,
+  storages,
+  tasks,
+  users,
 }
-export default langs