chore: merge config at build time (#846)

* chore: merge config at build time

* comment

* Use ViteRestart to detect config changes (#865)

---------

Co-authored-by: streino <[email protected]>

Author: abulte

package-lock.json

@@ -80,6 +80,7 @@
     "unplugin-yaml": "^1.3.0",
     "vite": "^6.3.4",
     "vite-plugin-dynamic-import": "^1.6.0",
+    "vite-plugin-restart": "^1.0.0",
     "vite-plugin-vue-devtools": "^7.7.0",
     "vitest": "^3.0.9",
     "vue-tsc": "^2.2.0"

package.json

@@ -1,31 +1,5 @@
-import config from '@siteConfig/config.yaml'
-import merge from 'deepmerge'
-
-const mode = import.meta.env.MODE
-const site_id = import.meta.env.VITE_SITE_ID
-
-// Use Vite's import.meta.glob to conditionally load mode-specific configs
-// This will actually only include the specific config file of the current mode
-// thanks to vite.config.mts dynamicImport plugin
-const modeConfigs = import.meta.glob('@siteConfig/config.*.yaml', {
-  eager: true
-})
-
-// Try to find and merge mode-specific config
-let finalConfig = config
-const modeConfigKey = `/configs/${site_id}/config.${mode}.yaml`
-
-if (modeConfigs[modeConfigKey]) {
-  console.log(
-    `Loading and merging config for ${mode} with the default config of ${site_id}`
-  )
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const configForMode = (modeConfigs[modeConfigKey] as any).default
-  finalConfig = merge(config, configForMode)
-} else {
-  console.log(
-    `No specific config found for ${mode}, using default config of ${site_id}`
-  )
-}
-
-export default finalConfig
+// __APP_CONFIG__ is exported from {site_id}/config.*.yaml files in vite.config.mts
+// TODO: we should type the entire config here
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+declare const __APP_CONFIG__: any
+export default __APP_CONFIG__

src/config.ts

@@ -1,4 +1,5 @@
 import vue from '@vitejs/plugin-vue'
+import merge from 'deepmerge'
 import { readFileSync } from 'fs'
 import { load } from 'js-yaml'
 import { fileURLToPath, URL } from 'node:url'
@@ -7,6 +8,7 @@ import ViteYaml from 'unplugin-yaml/vite'
 import { defineConfig, loadEnv } from 'vite'
 import dynamicImport from 'vite-plugin-dynamic-import'
 import { createHtmlPlugin } from 'vite-plugin-html'
+import ViteRestart from 'vite-plugin-restart'
 import vueDevTools from 'vite-plugin-vue-devtools'
 
 import {
@@ -29,10 +31,33 @@ interface Config {
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd(), '')
   const configDir = `./configs/${env.VITE_SITE_ID}`
-  const configFileUrl = new URL(`${configDir}/config.yaml`, import.meta.url)
-  const config = load(readFileSync(configFileUrl, 'utf-8')) as Config
+  const configFiles = []
+
+  // Load base config
+  const mainConfigFile = `${configDir}/config.yaml`
+  configFiles.push(mainConfigFile)
+  let config = load(
+    readFileSync(new URL(mainConfigFile, import.meta.url), 'utf-8')
+  ) as Config
+
+  // Try to load and merge mode-specific config
+  const modeConfigFile = `${configDir}/config.${mode}.yaml`
+  configFiles.push(modeConfigFile)
+  try {
+    const modeConfig = load(
+      readFileSync(new URL(modeConfigFile, import.meta.url), 'utf-8')
+    ) as Config
+    config = merge(config, modeConfig)
+    console.log(`Merged ${mode} config at build time`)
+  } catch {
+    console.log(`No ${mode} config found, using default`)
+  }
+
   return {
     base: '/',
+    define: {
+      __APP_CONFIG__: JSON.stringify(config)
+    },
     plugins: [
       vueDevTools(),
       vue({
@@ -90,16 +115,10 @@ export default defineConfig(({ mode }) => {
               routeFile.includes(`custom/${env.VITE_SITE_ID}/routes.ts`)
             )
           }
-          // Include only the current mode's config file in the bundle
-          // to prevent /src/config.ts from including all config files before picking the right one
-          if (id.includes('/src/config.ts')) {
-            return files.filter((configFile) =>
-              configFile.includes(
-                `configs/${env.VITE_SITE_ID}/config.${mode}.yaml`
-              )
-            )
-          }
         }
+      }),
+      ViteRestart({
+        restart: configFiles
       })
     ],
     resolve: {