feat(vue-intlayer): add dynamic dictionary and loading functionality with useDictionaryDynamic and useLoadDynamic

Author: aymericzip

packages/vue-intlayer/src/client/index.ts

@@ -1,4 +1,6 @@
 export * from './installIntlayer';
 export * from './useDictionary';
+export * from './useDictionaryDynamic';
 export * from './useIntlayer';
+export * from './useLoadDynamic';
 export * from './useLocale';

packages/vue-intlayer/src/client/useDictionary.ts

@@ -15,6 +15,7 @@ export const useDictionary = <T extends Dictionary>(
   const localeTarget = computed(() => locale ?? intlayer?.locale?.value);
 
   /** a *stable* reactive dictionary object */
+  // @ts-expect-error - Fix Type instantiation is excessively deep and possibly infinite
   const content = reactive({}) as DeepTransformContent<T['content']>;
 
   /** whenever `key` or `locale` change, refresh the dictionary */

packages/vue-intlayer/src/client/useDictionaryDynamic.ts

@@ -0,0 +1,37 @@
+'use client';
+
+import type { LocalesValues } from '@intlayer/config/client';
+import type {
+  Dictionary,
+  DictionaryKeys,
+  LanguageContent,
+} from '@intlayer/core';
+import { computed, inject } from 'vue';
+import { INTLAYER_SYMBOL, IntlayerProvider } from './installIntlayer';
+import { useDictionary } from './useDictionary';
+import { useLoadDynamic } from './useLoadDynamic';
+
+/**
+ * On the server side, Hook that transform a dictionary and return the content
+ *
+ * If the locale is not provided, it will use the locale from the client context
+ */
+export const useDictionaryDynamic = <
+  T extends Dictionary,
+  K extends DictionaryKeys,
+>(
+  dictionaryPromise: LanguageContent<() => Promise<T>>,
+  key: K,
+  locale?: LocalesValues
+) => {
+  const intlayer = inject<IntlayerProvider>(INTLAYER_SYMBOL);
+
+  const localeTarget = computed(() => locale ?? intlayer?.locale?.value);
+
+  const dictionary = useLoadDynamic<T>(
+    `${String(key)}.${localeTarget.value}`,
+    dictionaryPromise[localeTarget.value]!()
+  ) as T;
+
+  return useDictionary(dictionary, localeTarget as any);
+};

packages/vue-intlayer/src/client/useLoadDynamic.ts

@@ -0,0 +1,38 @@
+import { reactive } from 'vue';
+
+/**
+ * A "synchronous" loader for a dynamically‐imported JSON (or anything).
+ *
+ * - Immediately returns a reactive object so that Vue can properly track changes.
+ * - When the Promise resolves, it replaces the object's properties with the real data.
+ */
+export const useLoadDynamic = <T extends Record<string, any>>(
+  key: string,
+  promise: Promise<T>
+): T => {
+  // A module‐level cache of Promises, so we only import once per key.
+  const cache: Map<string, Promise<T>> = (useLoadDynamic as any)._cache ||
+  ((useLoadDynamic as any)._cache = new Map());
+
+  // Hold the "current" value as a reactive object
+  // This starts as an empty object but Vue can track changes to it
+  const container = reactive({} as T);
+
+  if (!cache.has(key)) {
+    // Kick off the dynamic import & cache it
+    const p = promise.then((real) => {
+      // As soon as the import resolves, populate the container with the real data
+      Object.assign(container, real);
+      return real;
+    });
+    cache.set(key, p);
+  } else {
+    // If it's already in flight (or done), hook into it so that the container still updates
+    cache.get(key)!.then((real) => {
+      Object.assign(container, real);
+    });
+  }
+
+  // Return the reactive container directly - Vue can track all changes to it
+  return container as T;
+};