perf: better types

.npmrc

@@ -2,3 +2,4 @@ strict-peer-dependencies=true
 auto-install-peers=true
 link-workspace-packages=false
 registry=https://registry.npmjs.org/
+ignore-workspace-root-check=true

README.md

@@ -73,14 +73,15 @@ i18next
   })
 
 setupI18n({
+  i18n: i18next,
   onLocaleChange: () => {
     root.render(
       <React.StrictMode>
         <App />
       </React.StrictMode>,
     )
   },
-  setQueryOnChange: {
+  setQuery: {
     lookupTarget,
   }
 })

package.json

@@ -60,7 +60,7 @@
     "vite": ">=4.0.0"
   },
   "dependencies": {
-    "@minko-fe/lodash-pro": "^0.0.62",
+    "clone-deep": "^4.0.1",
     "debug": "^4.3.4",
     "depth": "^0.1.1",
     "fs-extra": "^11.1.1",
@@ -73,6 +73,7 @@
   "devDependencies": {
     "@minko-fe/eslint-config": "1.2.32",
     "@minko-fe/tsconfig": "^1.2.32",
+    "@types/clone-deep": "^4.0.1",
     "@types/debug": "^4.1.7",
     "@types/fs-extra": "^11.0.1",
     "@types/parse-glob": "^3.0.29",

playground/spa/src/main.tsx

@@ -10,6 +10,7 @@ import './index.css'
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
 
 const lookupTarget = 'lang'
+const fallbackLng = 'en'
 
 i18next
   .use(LanguageDetector)
@@ -26,7 +27,7 @@ i18next
     interpolation: {
       escapeValue: false,
     },
-    fallbackLng: 'en',
+    fallbackLng,
     detection: {
       order: ['querystring', 'cookie', 'localStorage', 'sessionStorage', 'navigator'],
       caches: ['localStorage', 'sessionStorage', 'cookie'],
@@ -46,4 +47,5 @@ setupI18n({
       </React.StrictMode>,
     )
   },
+  fallbackLng,
 })

src/client/index.ts

@@ -4,19 +4,18 @@ import { name as PKGNAME } from '../../package.json'
 
 export interface I18nSetupOptions {
   i18n: i18n
-  setQueryOnChange?: {
-    lookupTarget: string
-  }
-  onLocaleChange: () => void
+  fallbackLng: string
+  onLocaleChange: (lng?: string) => void
+  setQuery?:
+    | {
+        lookupTarget: string
+      }
+    | boolean
 }
 
 function setupI18n(options: I18nSetupOptions) {
-  const { onLocaleChange, setQueryOnChange, i18n } = options || {}
+  const { onLocaleChange, setQuery, i18n, fallbackLng } = options || {}
 
-  let fallbackLng = i18n.store.options.fallbackLng as string
-  if (typeof fallbackLng === 'boolean') {
-    fallbackLng = ''
-  }
   const lng = i18n.language || fallbackLng
   let currentLng: string | undefined = lng
 
@@ -49,7 +48,7 @@ function setupI18n(options: I18nSetupOptions) {
   }
 
   async function setLangAttrs(lang: string) {
-    if (setQueryOnChange) {
+    if (setQuery) {
       /**
        * NOTE:
        * If you need to specify the language setting for headers, such as the `fetch` API, set it here.
@@ -58,11 +57,14 @@ function setupI18n(options: I18nSetupOptions) {
        * axios.defaults.headers.common['Accept-Language'] = lang
        */
       document.querySelector('html')?.setAttribute('lang', lang)
-      const { lookupTarget } = setQueryOnChange
-      const queryString = (await import('query-string')).default
-      const query = queryString.parse(location.search)
-      query[lookupTarget] = lang
-      history.replaceState({ query }, '', queryString.stringifyUrl({ url: window.location.href, query }))
+
+      if (typeof setQuery === 'object') {
+        const { lookupTarget } = setQuery
+        const queryString = (await import('query-string')).default
+        const query = queryString.parse(location.search)
+        query[lookupTarget] = lang
+        history.replaceState({ query }, '', queryString.stringifyUrl({ url: window.location.href, query }))
+      }
     }
   }
 
@@ -87,7 +89,7 @@ function setupI18n(options: I18nSetupOptions) {
 
   load(lng, () => {
     // Notify UI framewrok render
-    onLocaleChange()
+    onLocaleChange(lng)
   })
 }
 

src/index.ts

@@ -7,7 +7,7 @@ import glob from 'tiny-glob'
 import stripDirs from 'strip-dirs'
 import depth from 'depth'
 import fs from 'fs-extra'
-import { cloneDeep } from '@minko-fe/lodash-pro'
+import cloneDeep from 'clone-deep'
 import createDebug from 'debug'
 import { name as PKGNAME } from '../package.json'