fix: rework and extract cache utils (#3590)

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

Author: BobbieGoede

build.config.ts

@@ -9,6 +9,7 @@ export default defineBuildConfig({
     '@rspack/core',
     'oxc-parser',
     '@babel/parser',
+    'unstorage',
     'unplugin-vue-router',
     'unplugin-vue-router/options'
   ]

package.json

@@ -108,6 +108,7 @@
     "ufo": "^1.6.1",
     "unplugin": "^2.3.2",
     "unplugin-vue-router": "^0.12.0",
+    "unstorage": "^1.16.0",
     "vue-i18n": "^11.1.3",
     "vue-router": "^4.5.0"
   },

pnpm-lock.yaml

@@ -6,7 +6,8 @@ import { defineNitroPlugin } from 'nitropack/runtime'
 import { tryUseI18nContext, createI18nContext } from './context'
 import { createDefaultLocaleDetector, createUserLocaleDetector } from './utils/locale-detector'
 import { pickNested } from './utils/messages-utils'
-import { getAllMergedMessages, getMergedMessages, isLocaleWithFallbacksCacheable } from './utils/messages'
+import { isLocaleWithFallbacksCacheable } from './utils/cache'
+import { getAllMergedMessages, getMergedMessages } from './utils/messages'
 import { getFallbackLocaleCodes } from '../shared/messages'
 // @ts-expect-error virtual file
 import { appId } from '#internal/nuxt.config.mjs'

src/runtime/server/plugin.ts

@@ -1,9 +1,11 @@
 import { deepCopy } from '@intlify/shared'
 import { defineCachedEventHandler } from 'nitropack/runtime'
-import { getRouterParam, createError, H3Event, defineEventHandler } from 'h3'
+import { getRouterParam, createError, defineEventHandler } from 'h3'
 import { useI18nContext } from '../context'
 import { getMergedMessages } from '../utils/messages'
 
+import type { H3Event } from 'h3'
+
 /**
  * Load messages for the specified locale event parameter
  */

src/runtime/server/routes/messages.ts

@@ -0,0 +1,78 @@
+import { useStorage } from 'nitropack/runtime'
+import { prefixStorage } from 'unstorage'
+import { localeLoaders } from '#internal/i18n/options.mjs'
+
+export interface CacheOptions<T = any, ArgsT extends unknown[] = any[]> {
+  name?: string
+  getKey: (...args: ArgsT) => string
+  shouldBypassCache: (...args: ArgsT) => boolean
+  group?: string
+  /**
+   * Number of seconds to cache the response. Defaults to 1.
+   */
+  maxAge?: number
+}
+
+const storage = prefixStorage(useStorage(), 'i18n')
+type CachedValue<T> = { ttl: number; value: T; mtime: number }
+
+/**
+ * Create a cached function
+ * Adapted from nitropack/runtime `cachedFunction`
+ */
+export function cachedFunctionI18n<T, ArgsT extends unknown[] = any[]>(
+  fn: (...args: ArgsT) => T | Promise<T>,
+  opts: CacheOptions<T, ArgsT>
+): (...args: ArgsT) => Promise<T> {
+  opts = { maxAge: 1, ...opts }
+  const pending: { [key: string]: Promise<T> } = {}
+
+  async function get(key: string, resolver: () => T | Promise<T>) {
+    const isPending = pending[key]
+
+    if (!isPending) {
+      pending[key] = Promise.resolve(resolver())
+    }
+
+    try {
+      return await pending[key]
+    } finally {
+      // Ensure we always clean up, whether the promise resolved or rejected.
+      delete pending[key]
+    }
+  }
+
+  return async (...args) => {
+    const key = [opts.name, opts.getKey(...args)].join(':').replace(/:\/$/, ':index')
+    const maxAge = opts.maxAge ?? 1
+    const isCacheable = !opts.shouldBypassCache(...args) && maxAge >= 0
+
+    const cache = isCacheable && (await storage.getItemRaw<CachedValue<T>>(key))
+    if (!cache || cache.ttl < Date.now()) {
+      pending[key] = Promise.resolve(fn(...args))
+      const value = await get(key, () => fn(...args))
+
+      if (isCacheable) {
+        await storage.setItemRaw(key, { ttl: Date.now() + maxAge * 1000, value, mtime: Date.now() })
+      }
+
+      return value
+    }
+
+    return cache.value
+  }
+}
+
+/**
+ * Check if the loaders for the specified locale are all cacheable
+ */
+export function isLocaleCacheable(locale: string) {
+  return localeLoaders[locale] != null && localeLoaders[locale].every(loader => loader.cache !== false)
+}
+
+/**
+ * Check if the loaders for the specified locale and fallback locales are all cacheable
+ */
+export function isLocaleWithFallbacksCacheable(locale: string, fallbackLocales: string[]) {
+  return isLocaleCacheable(locale) && fallbackLocales.every(fallbackLocale => isLocaleCacheable(fallbackLocale))
+}

src/runtime/server/utils/cache.ts

@@ -1,7 +1,7 @@
 import { deepCopy } from '@intlify/shared'
-import { cachedFunction, useStorage } from 'nitropack/runtime'
 import { localeLoaders } from '#internal/i18n/options.mjs'
 import { getLocaleMessagesMerged } from '../../shared/messages'
+import { cachedFunctionI18n, isLocaleCacheable, isLocaleWithFallbacksCacheable } from './cache'
 
 import type { LocaleMessages } from '@intlify/core'
 import type { DefineLocaleMessage } from '@intlify/h3'
@@ -16,8 +16,8 @@ const _getMessages = async (locale: string) => {
 /**
  * Load messages for the specified locale (cached)
  */
-const _getMessagesCached = cachedFunction(_getMessages, {
-  name: 'i18n:loadMessages',
+const _getMessagesCached = cachedFunctionI18n(_getMessages, {
+  name: 'messages',
   maxAge: !__I18N_CACHE__ ? -1 : 60 * 60 * 24,
   getKey: locale => locale,
   shouldBypassCache: locale => !isLocaleCacheable(locale)
@@ -30,77 +30,57 @@ const _getMessagesCached = cachedFunction(_getMessages, {
  */
 const getMessages = import.meta.dev ? _getMessages : _getMessagesCached
 
-const storage = useStorage('i18n')
-type MessagesCached = { ttl: number; value: LocaleMessages<DefineLocaleMessage> }
-/**
- * Load messages for the specified locale and merge with fallback locales in the shape of `{ [locale]: { ... } }`
- * @param locale - The locale to load messages for
- * @param fallbackLocales - The fallback locales to merge with
- */
-export const getMergedMessages = async (locale: string, fallbackLocales: string[]) => {
-  const cacheKey = `merged:${locale}-[${fallbackLocales.join('-')}]`
-  const isCacheable = isLocaleWithFallbacksCacheable(locale, fallbackLocales)
+const _getMergedMessages = async (locale: string, fallbackLocales: string[]) => {
+  const merged = {} as LocaleMessages<DefineLocaleMessage>
 
-  const cache = isCacheable && (await storage.getItemRaw<MessagesCached>(cacheKey))
-  if (!cache || cache.ttl < Date.now()) {
-    const merged = {} as LocaleMessages<DefineLocaleMessage>
-
-    try {
-      if (fallbackLocales.length > 0) {
-        const messages = await Promise.all(fallbackLocales.map(getMessages))
-        for (const message of messages) {
-          deepCopy(message, merged)
-        }
+  try {
+    if (fallbackLocales.length > 0) {
+      const messages = await Promise.all(fallbackLocales.map(getMessages))
+      for (const message of messages) {
+        deepCopy(message, merged)
       }
+    }
 
-      const message = await getMessages(locale)
-      deepCopy(message, merged)
+    const message = await getMessages(locale)
+    deepCopy(message, merged)
 
-      if (isCacheable) {
-        await storage.setItemRaw(cacheKey, { ttl: Date.now() + 1000 * 5, value: merged })
-      }
-      return merged
-    } catch (e) {
-      throw new Error('Failed to merge messages: ' + (e as Error).message)
-    }
+    return merged
+  } catch (e) {
+    throw new Error('Failed to merge messages: ' + (e as Error).message)
   }
-
-  return cache.value
 }
 
-export const getAllMergedMessages = async (locales: string[]) => {
-  const cacheKey = `merged-full:${locales.join('-')}`
-  const isCacheable = locales.every(locale => isLocaleCacheable(locale))
+/**
+ * Load messages for the specified locale and merge with fallback locales in the shape of `{ [locale]: { ... } }`
+ * @param locale - The locale to load messages for
+ * @param fallbackLocales - The fallback locales to merge with
+ */
+export const getMergedMessages = cachedFunctionI18n(_getMergedMessages, {
+  name: 'merged-single',
+  maxAge: !__I18N_CACHE__ ? -1 : 60 * 60 * 24,
+  getKey: (locale, fallbackLocales) => `${locale}-[${[...new Set(fallbackLocales)].sort().join('-')}]`,
+  shouldBypassCache: (locale, fallbackLocales) => !isLocaleWithFallbacksCacheable(locale, fallbackLocales)
+})
 
-  const cache = isCacheable && (await storage.getItemRaw<MessagesCached>(cacheKey))
-  if (!cache || cache.ttl < Date.now()) {
-    const merged = {} as LocaleMessages<DefineLocaleMessage>
+const _getAllMergedMessages = async (locales: string[]) => {
+  const merged = {} as LocaleMessages<DefineLocaleMessage>
 
-    try {
-      const messages = await Promise.all(locales.map(getMessages))
-      for (const message of messages) {
-        deepCopy(message, merged)
-      }
+  try {
+    const messages = await Promise.all(locales.map(getMessages))
 
-      if (isCacheable) {
-        await storage.setItemRaw(cacheKey, { ttl: Date.now() + 1000 * 5, value: merged })
-      }
-      return merged
-    } catch (e) {
-      throw new Error('Failed to merge messages: ' + (e as Error).message)
+    for (const message of messages) {
+      deepCopy(message, merged)
     }
-  }
 
-  return cache.value
-}
-
-/**
- * Check if the loaders for the specified locale are all cacheable
- */
-export function isLocaleCacheable(locale: string) {
-  return localeLoaders[locale] != null && localeLoaders[locale].every(loader => loader.cache !== false)
+    return merged
+  } catch (e) {
+    throw new Error('Failed to merge messages: ' + (e as Error).message)
+  }
 }
 
-export function isLocaleWithFallbacksCacheable(locale: string, fallbackLocales: string[]) {
-  return isLocaleCacheable(locale) && fallbackLocales.every(fallbackLocale => isLocaleCacheable(fallbackLocale))
-}
+export const getAllMergedMessages = cachedFunctionI18n(_getAllMergedMessages, {
+  name: 'merged-all',
+  maxAge: !__I18N_CACHE__ ? -1 : 60 * 60 * 24,
+  getKey: locales => locales.join('-'),
+  shouldBypassCache: locales => !locales.every(locale => isLocaleCacheable(locale))
+})