fix: reduce unnecessary modularity, make useSetupApp SSR compatible, handle fallbacks properly, don't use aliased imports in distributed code, rename useBrowserLang to getBrowserLang (#646)

Co-authored-by: Kia King Ishii <[email protected]>

Author: brc-dd

lib/components/SDescText.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { useLinkifyIt } from 'sefirot/composables/Markdown'
 import { computed } from 'vue'
+import { useLinkifyIt } from '../composables/Markdown'
 import { useHasSlotContent } from '../composables/Utils'
 import SDescEmpty from './SDescEmpty.vue'
 

lib/composables/Api.ts

@@ -1,6 +1,6 @@
-import { useHttpConfig } from 'sefirot/stores/HttpConfig'
 import { type Ref, type WatchSource, ref, watch } from 'vue'
 import { Http } from '../http/Http'
+import { useHttpConfig } from '../stores/HttpConfig'
 import { tryOnMounted } from './Utils'
 
 export interface Query<Data = any> {

lib/composables/App.ts

@@ -1,22 +1,24 @@
-import { type HttpOptions } from 'sefirot/stores/HttpConfig'
-import { useSetupHttp } from './Http'
-import { type HasLang, useSetupLang } from './Lang'
-import { type HasTheme, useSetupTheme } from './Theme'
+import { type HttpOptions, useHttpConfig } from '../stores/HttpConfig'
+import { type Lang, getBrowserLang, provideLang } from './Lang'
+import { type Theme, useTheme } from './Theme'
 
-export interface SetupAppUser extends HasLang, HasTheme {}
+export interface SetupAppUser {
+  lang?: Lang
+  theme?: Theme
+}
 
 export interface SetupAppOptions {
   http?: HttpOptions
 }
 
 export function useSetupApp(): (user?: SetupAppUser | null, options?: SetupAppOptions) => void {
-  const setupLang = useSetupLang()
-  const setupTheme = useSetupTheme()
-  const setupHttp = useSetupHttp()
+  const theme = useTheme()
+  const httpConfig = useHttpConfig()
 
   return (user, options) => {
-    setupLang(user)
-    setupTheme(user)
-    setupHttp(user, options?.http)
+    const lang = user?.lang ?? getBrowserLang()
+    provideLang(lang)
+    if (user?.theme) { theme.value = user.theme }
+    httpConfig.apply({ lang, ...options?.http })
   }
 }

lib/composables/Http.ts

@@ -11,20 +11,8 @@ export interface TransMessages<T> {
   ja: T
 }
 
-export interface HasLang {
-  lang: Lang
-}
-
 export const SefirotLangKey: InjectionKey<Lang> = Symbol.for('sefirot-lang-key')
 
-export function useSetupLang(): (user?: HasLang | null) => void {
-  const browserLang = useBrowserLang()
-
-  return (user) => {
-    provideLang(user?.lang ?? browserLang)
-  }
-}
-
 export function provideLang(lang: Lang) {
   getCurrentInstance()!.appContext.app._context.provides[SefirotLangKey] = lang
 }
@@ -33,12 +21,16 @@ export function useLang(): Lang {
   return inject(SefirotLangKey, 'en')
 }
 
-export function useBrowserLang(): Lang {
-  const lang = navigator.language
-
+export function getBrowserLang(): Lang {
+  const lang = String(globalThis.navigator?.language || 'en')
   return lang.split('-')[0] === 'ja' ? 'ja' : 'en'
 }
 
+/** @deprecated use `getBrowserLang` instead */
+export function useBrowserLang(): Lang {
+  return getBrowserLang()
+}
+
 export function useTrans<T>(messages: TransMessages<T>): Trans<T> {
   const lang = useLang()
 

lib/composables/Lang.ts

@@ -3,18 +3,6 @@ import { type WritableComputedRef, computed } from 'vue'
 
 export type Theme = 'light' | 'dark'
 
-export interface HasTheme {
-  theme: Theme
-}
-
-export function useSetupTheme(): (user?: HasTheme | null) => void {
-  const theme = useTheme()
-
-  return (user) => {
-    theme.value = user?.theme ?? 'light'
-  }
-}
-
 export function useTheme(): WritableComputedRef<Theme> {
   const _isDark = useDark()