svelte-intlayer 7.3.5 → 7.3.7

package/dist/client/useDictionaryDynamic.d.ts

@@ -1,10 +1,15 @@
 import type { Dictionary, DictionaryKeys, LocalesValues, StrictModeLocaleMap } from '@intlayer/types';
 import { type Readable } from 'svelte/store';
+import type { DeepTransformContent } from '../plugins';
 /**
- * Svelte hook for handling dynamic dictionary loading
- * @param dictionaryPromise Promise-based dictionary content
- * @param key Dictionary key for caching
- * @param locale Target locale (optional)
- * @returns Reactive store with loaded dictionary content
+ * Svelte hook for dynamic dictionary loading
+ * Loads dictionary content asynchronously and returns a reactive store.
+ *
+ * @param dictionaryPromise - Object mapping locales to import functions (e.g. { en: () => import(...) })
+ * @param locale - Optional fixed locale. If not provided, follows the global intlayerStore.
+ * @returns Readable store with the loaded dictionary content
  */
-export declare const useDictionaryDynamic: <T extends Dictionary, K extends DictionaryKeys>(dictionaryPromise: StrictModeLocaleMap<() => Promise<T>>, key: K, locale?: LocalesValues) => Readable<T | null>;
+export declare function useDictionaryDynamic<T extends Dictionary>(dictionaryPromise: StrictModeLocaleMap<() => Promise<T>>, _key: DictionaryKeys, locale?: LocalesValues): Readable<DeepTransformContent<T['content']> & {
+    isLoading: boolean;
+    error: Error | null;
+}>;

package/dist/client/useDictionaryDynamic.js

@@ -1,38 +1,89 @@
-import { derived, writable } from 'svelte/store';
+import { derived } from 'svelte/store';
+import { getDictionary } from '../getDictionary';
 import { getIntlayerContext } from './intlayerContext';
 import { intlayerStore } from './intlayerStore';
+// Proxy that returns itself for any property access to handle nested paths during loading
+const recursiveProxy = new Proxy(() => { }, {
+    get: (_target, prop) => {
+        if (prop === Symbol.toPrimitive) {
+            return () => undefined;
+        }
+        if (prop === 'toString') {
+            return () => '';
+        }
+        if (prop === 'then') {
+            return undefined;
+        }
+        return recursiveProxy;
+    },
+    apply: () => recursiveProxy,
+});
 /**
- * Svelte hook for handling dynamic dictionary loading
- * @param dictionaryPromise Promise-based dictionary content
- * @param key Dictionary key for caching
- * @param locale Target locale (optional)
- * @returns Reactive store with loaded dictionary content
+ * Svelte hook for dynamic dictionary loading
+ * Loads dictionary content asynchronously and returns a reactive store.
+ *
+ * @param dictionaryPromise - Object mapping locales to import functions (e.g. { en: () => import(...) })
+ * @param locale - Optional fixed locale. If not provided, follows the global intlayerStore.
+ * @returns Readable store with the loaded dictionary content
  */
-export const useDictionaryDynamic = (dictionaryPromise, key, locale) => {
+export function useDictionaryDynamic(dictionaryPromise, _key, locale) {
     const context = getIntlayerContext();
-    const dictionaryStore = writable(null);
-    // Create a derived store that loads the dictionary when locale changes
-    return derived([intlayerStore], ([$store]) => {
-        const targetLocale = locale ?? context?.locale ?? $store.locale;
-        // Load dictionary for the target locale asynchronously
-        const loadDictionary = async () => {
+    const localeStore = derived(intlayerStore, ($store) => locale ?? context?.locale ?? $store.locale);
+    return derived(localeStore, ($locale, set) => {
+        // Set loading state immediately with proxy
+        set(new Proxy({ isLoading: true, error: null }, {
+            get: (_target, prop) => {
+                if (prop === 'isLoading')
+                    return true;
+                if (prop === 'error')
+                    return null;
+                // For any other property, return the recursive proxy
+                // to allow nested access without errors
+                return recursiveProxy;
+            },
+        }));
+        let isCancelled = false;
+        const load = async () => {
             try {
-                const dictionaryLoader = dictionaryPromise[targetLocale];
-                if (dictionaryLoader) {
-                    const loadedDictionary = await dictionaryLoader();
-                    dictionaryStore.set(loadedDictionary);
-                }
-                else {
-                    dictionaryStore.set(null);
+                // Access the loader for the current locale
+                // dictionaryPromise is indexed by locale
+                const loader = dictionaryPromise[$locale];
+                if (!loader) {
+                    return;
                 }
+                const dict = await loader();
+                if (isCancelled)
+                    return;
+                const content = getDictionary(dict, $locale);
+                set({
+                    ...content,
+                    isLoading: false,
+                    error: null,
+                });
             }
             catch (error) {
-                console.error(`Failed to load dictionary for key: ${String(key)}`, error);
-                dictionaryStore.set(null);
+                if (isCancelled)
+                    return;
+                console.error(error);
+                set({
+                    isLoading: false,
+                    error: error,
+                });
             }
         };
-        loadDictionary();
-        // Return the current state, actual loading happens asynchronously
-        return null;
-    });
-};
+        load();
+        return () => {
+            isCancelled = true;
+        };
+    }, 
+    // Initial value
+    new Proxy({ isLoading: true, error: null }, {
+        get: (_target, prop) => {
+            if (prop === 'isLoading')
+                return true;
+            if (prop === 'error')
+                return null;
+            return recursiveProxy;
+        },
+    }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-intlayer",
-  "version": "7.3.5",
+  "version": "7.3.7",
   "description": "Easily internationalize i18n your Svelte applications with type-safe multilingual content management.",
   "keywords": [
     "intlayer",
@@ -68,12 +68,12 @@
     "typecheck": "tsc --noEmit --project tsconfig.types.json"
   },
   "dependencies": {
-    "@intlayer/api": "7.3.5",
-    "@intlayer/config": "7.3.5",
-    "@intlayer/core": "7.3.5",
-    "@intlayer/editor": "7.3.5",
-    "@intlayer/types": "7.3.5",
-    "@intlayer/unmerged-dictionaries-entry": "7.3.5"
+    "@intlayer/api": "7.3.7",
+    "@intlayer/config": "7.3.7",
+    "@intlayer/core": "7.3.7",
+    "@intlayer/editor": "7.3.7",
+    "@intlayer/types": "7.3.7",
+    "@intlayer/unmerged-dictionaries-entry": "7.3.7"
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^7.0.0",