refactor: getting config from server

Author: hywax

app.vue

@@ -5,14 +5,14 @@
 </template>
 
 <script setup lang="ts">
-const siteConfig = useSiteConfig()
+const { $settings } = useNuxtApp()
 const colorMode = useColorMode()
 const { locale } = useI18n()
 
-colorMode.preference = siteConfig.theme || 'system'
-locale.value = siteConfig.lang
+colorMode.preference = $settings.theme || 'system'
+locale.value = $settings.lang
 
 useHead({
-  title: siteConfig.title,
+  title: $settings.title,
 })
 </script>

pages/index.vue

@@ -1,7 +1,7 @@
 <template>
-  <template v-if="siteConfig.services.length">
+  <template v-if="$services.length">
     <Group
-      v-for="(group, key) in siteConfig.services"
+      v-for="(group, key) in $services"
       :key="key"
       v-bind="group"
     />
@@ -19,5 +19,5 @@
 </template>
 
 <script setup lang="ts">
-const siteConfig = useSiteConfig()
+const { $services } = useNuxtApp()
 </script>

plugins/settings.ts

@@ -0,0 +1,10 @@
+import type { CompleteConfig } from '~/types'
+
+export default defineNuxtPlugin(async () => {
+  const asyncData = await useFetch<CompleteConfig>('/api/settings')
+  const { services, ...settings } = asyncData.data.value!
+
+  return {
+    provide: { services, settings },
+  }
+})

server/api/settings.ts

@@ -0,0 +1,7 @@
+import type { CompleteConfig } from '~/types'
+
+export default defineEventHandler(async () => {
+  const storage = useStorage('main')
+
+  return await storage.getItem<CompleteConfig>('config')
+})

server/plugins/0.update-checker.ts

@@ -1,17 +1,12 @@
-export default defineNitroPlugin(async (nitroApp) => {
-  const localConfig = await getLocalConfig()
+export default defineNitroPlugin(async () => {
+  const localConfig = await loadLocalConfig()
 
   if (!localConfig) {
-    console.error('Config not loaded!')
+    logger.error('Config not loaded!')
     return
   }
 
-  // Provide full config to backend
-  const storage = useStorage()
+  const storage = useStorage('main')
+  await storage.setItem('config', localConfig)
   await storage.setItem('services', extractServicesFromConfig(localConfig))
-
-  // Provide safely config to frontend
-  nitroApp.hooks.hook('site-config:init', ({ siteConfig }) => {
-    siteConfig.push(extractSafelyConfig(localConfig))
-  })
 })

server/plugins/1.config-loader.ts

@@ -1,6 +1,7 @@
 import crypto from 'node:crypto'
 import yaml from 'yaml'
-import type { BaseService, Config } from '~/types'
+import defu from 'defu'
+import type { BaseService, CompleteConfig } from '~/types'
 
 type draftService = Omit<BaseService, 'id'>
 
@@ -11,18 +12,27 @@ function determineServiceId(items: draftService[]): BaseService[] {
   }))
 }
 
-export async function getLocalConfig(): Promise<Config | null> {
+export function getDefaultConfig(): CompleteConfig {
+  return {
+    title: 'Mafl',
+    lang: 'en',
+    theme: 'system',
+    services: [],
+  }
+}
+
+export async function loadLocalConfig(): Promise<CompleteConfig> {
   const storage = useStorage('data')
   const file = 'config.yml'
 
   try {
     if (!await storage.hasItem(file)) {
-      return null
+      return getDefaultConfig()
     }
 
     const raw = await storage.getItem<string>(file)
     const config = yaml.parse(raw || '') || {}
-    const services: Config['services'] = []
+    const services: CompleteConfig['services'] = []
 
     if (Array.isArray(config.services)) {
       services.push({
@@ -39,22 +49,26 @@ export async function getLocalConfig(): Promise<Config | null> {
       }
     }
 
-    return {
-      ...config,
-      services,
-    }
+    return defu({ ...config, services }, getDefaultConfig())
   } catch (e) {
     // ...
   }
 
-  return null
+  return getDefaultConfig()
+}
+
+export async function getLocalConfig(): Promise<CompleteConfig | null> {
+  const storage = useStorage('main')
+  await storage.getKeys()
+
+  return storage.getItem<CompleteConfig>('config')
 }
 
 /**
  * Safely retrieves a list of services for frontend.
  * Omit "secrets" fields.
  */
-export function extractSafelyConfig(config: Config) {
+export function extractSafelyConfig(config: CompleteConfig) {
   return JSON.parse(JSON.stringify(
     config, (key, val) => key === 'secrets' ? undefined : val,
   ))
@@ -63,7 +77,7 @@ export function extractSafelyConfig(config: Config) {
 /**
  * Create Map services
  */
-export function extractServicesFromConfig(config: Config): Record<string, BaseService> {
+export function extractServicesFromConfig(config: CompleteConfig): Record<string, BaseService> {
   return config.services.reduce<Record<string, BaseService>>((acc, group) => {
     for (const item of group.items) {
       acc[item.id] = item

server/utils/config.ts

@@ -10,7 +10,7 @@ export async function getService<T>(event: H3Event): Promise<T> {
     })
   }
 
-  const storage = useStorage()
+  const storage = useStorage('main')
   const services = await storage.getItem<Record<string, T>>('services')
 
   if (!services || !Object.hasOwn(services, id)) {

server/utils/services.ts

@@ -7,7 +7,9 @@ export interface ServicesGroup {
 
 export interface Config {
   title?: string
-  lang: 'en' | 'ru',
+  lang: 'en' | 'ru'
   theme?: 'system' | 'light' | 'dark' | 'deep'
   services: ServicesGroup[]
 }
+
+export type CompleteConfig = Required<Config>