fix: resolve private runtime correctly from .env, close #424

Author: antfu

packages/devtools-kit/src/_types/rpc.ts

@@ -12,6 +12,7 @@ import type { InstallModuleReturn } from './server-ctx'
 export interface ServerFunctions {
   // Static RPCs (can be provide on production build in the future)
   getServerConfig(): NuxtOptions
+  getServerRuntimeConfig(): Record<string, any>
   getModuleOptions(): ModuleOptions
   getComponents(): Component[]
   getComponentsRelationships(): Promise<ComponentRelationship[]>

packages/devtools/client/.env

@@ -0,0 +1 @@
+NUXT_API_KEY=my-api-key

packages/devtools/client/composables/state.ts

@@ -30,6 +30,10 @@ export function useServerConfig() {
   return useAsyncState('getServerConfig', () => rpc.getServerConfig())
 }
 
+export function useServerRuntimeConfig() {
+  return useAsyncState('getServerRuntimeConfig', () => rpc.getServerRuntimeConfig())
+}
+
 export function useModuleOptions() {
   return useAsyncState('getModuleOptions', () => rpc.getModuleOptions())
 }

packages/devtools/client/nuxt.config.ts

@@ -36,8 +36,9 @@ export default defineNuxtConfig({
     fixture2: 'from nuxt.config.ts',
   },
   runtimeConfig: {
-    fixture3: 'private runtime config from nuxt.config.ts',
-    public: {
+    'fixture3': 'private runtime config from nuxt.config.ts',
+    'api-key': 'null',
+    'public': {
       fixture4: 'public runtime config from nuxt.config.ts',
     },
   },

packages/devtools/client/pages/modules/runtime-configs.vue

@@ -11,12 +11,12 @@ definePageMeta({
 })
 
 const client = useClient()
-const serverConfig = useServerConfig()
+const runtimeConfig = useServerRuntimeConfig()
 const payload = computed(() => client.value?.nuxt.payload)
 
 const privateConfig = computed(() => {
   const clone = {
-    ...serverConfig.value?.runtimeConfig,
+    ...runtimeConfig.value,
   }
   delete clone.public
   delete clone.app

packages/devtools/package.json

@@ -44,6 +44,7 @@
     "@nuxt/kit": "^3.7.4",
     "birpc": "^0.2.14",
     "consola": "^3.2.3",
+    "destr": "^2.0.1",
     "error-stack-parser-es": "^0.1.1",
     "execa": "^7.2.0",
     "fast-glob": "^3.3.1",
@@ -65,6 +66,7 @@
     "perfect-debounce": "^1.0.0",
     "pkg-types": "^1.0.3",
     "rc9": "^2.1.1",
+    "scule": "^1.0.0",
     "semver": "^7.5.4",
     "simple-git": "^3.20.0",
     "sirv": "^2.0.3",

packages/devtools/src/server-rpc/general.ts

@@ -5,6 +5,9 @@ import { resolveBuiltinPresets } from 'unimport'
 import { resolve } from 'pathe'
 import { colors } from 'consola/utils'
 import { logger } from '@nuxt/kit'
+import type { Nitro } from 'nitropack'
+import destr from 'destr'
+import { snakeCase } from 'scule'
 
 import type { ModuleOptions } from '@nuxt/schema'
 import type { AutoImportsWithMetadata, HookInfo, NuxtDevtoolsServerContext, ServerFunctions } from '../types'
@@ -75,6 +78,42 @@ export function setupGeneralRPC({ nuxt, options, refresh, openInEditorHooks }: N
     getServerConfig() {
       return nuxt.options
     },
+    getServerRuntimeConfig() {
+      // Ported from https://github.com/unjs/nitro/blob/88e79fcdb2a024c96a3d1fd272d0acbff0405013/src/runtime/config.ts#L31
+      // Since this operation happends on the Nitro runtime
+      const ENV_PREFIX = 'NITRO_'
+      const ENV_PREFIX_ALT = 'NUXT_'
+
+      function _getEnv(key: string) {
+        const envKey = snakeCase(key).toUpperCase()
+        return destr(process.env[ENV_PREFIX + envKey] ?? process.env[ENV_PREFIX_ALT + envKey])
+      }
+
+      function _isObject(input: unknown) {
+        return typeof input === 'object' && !Array.isArray(input)
+      }
+
+      function _applyEnv(obj: any, parentKey = '') {
+        for (const key in obj) {
+          const subKey = parentKey ? `${parentKey}_${key}` : key
+          const envValue = _getEnv(subKey)
+          if (_isObject(obj[key])) {
+            if (_isObject(envValue))
+              obj[key] = { ...obj[key], ...(envValue as any) }
+
+            _applyEnv(obj[key], subKey)
+          }
+          else {
+            obj[key] = envValue ?? obj[key]
+          }
+        }
+        return obj
+      }
+
+      const runtime = { ...nuxt.options.runtimeConfig }
+      _applyEnv(runtime)
+      return runtime
+    },
     getModuleOptions(): ModuleOptions {
       return options
     },