svelte-intlayer 9.5.10 → 9.5.11

package/dist/client/useDictionaryDynamic.js

@@ -31,14 +31,14 @@ const loadingProxy = () => new Proxy({ isLoading: true, error: null }, {
     },
 });
 /** Merges the resolved content with the loading/error state. */
-const withState = (value) => {
+const withState = (value, isLoading = false) => {
     if (Array.isArray(value)) {
-        return Object.assign(value.slice(), { isLoading: false, error: null });
+        return Object.assign(value.slice(), { isLoading, error: null });
     }
     if (value && typeof value === 'object') {
-        return { ...value, isLoading: false, error: null };
+        return { ...value, isLoading, error: null };
     }
-    return { isLoading: false, error: null };
+    return { isLoading, error: null };
 };
 /**
  * Svelte hook for dynamic dictionary loading.
@@ -70,7 +70,15 @@ export function useDictionaryDynamic(dictionaryPromise, key, localeOrSelector) {
         ? localeOrSelector.locale
         : localeOrSelector;
     const localeStore = derived(intlayerStore, ($store) => explicitLocale ?? context?.locale ?? $store.locale);
+    // Once content has resolved, a locale switch keeps it on screen (flagged as
+    // loading) until the new chunk lands. Falling back to `loadingProxy()` would
+    // blank every text node for a frame before rendering the target locale.
+    let resolvedContent;
     return derived(localeStore, ($locale, set) => {
+        const publish = (content) => {
+            resolvedContent = content;
+            set(withState(content));
+        };
         // A build-tool plugin may have resolved this locale's dictionary while
         // the entry point evaluated. Publishing it synchronously lets the store
         // open on real content — otherwise every dynamic dictionary starts on
@@ -78,11 +86,12 @@ export function useDictionaryDynamic(dictionaryPromise, key, localeOrSelector) {
         // each, even when nothing has to be fetched.
         const preloadedDictionary = getPreloadedDictionary(dictionaryPromise, $locale);
         if (preloadedDictionary) {
-            set(withState(getDictionary(preloadedDictionary, $locale)));
+            publish(getDictionary(preloadedDictionary, $locale));
             return;
         }
-        // Set loading state immediately with proxy
-        set(loadingProxy());
+        set(resolvedContent === undefined
+            ? loadingProxy()
+            : withState(resolvedContent, true));
         let isCancelled = false;
         const load = async () => {
             try {
@@ -106,7 +115,7 @@ export function useDictionaryDynamic(dictionaryPromise, key, localeOrSelector) {
                 }
                 if (isCancelled)
                     return;
-                set(withState(resolved));
+                publish(resolved);
             }
             catch (error) {
                 if (isCancelled)

package/dist/client/useDictionaryDynamic.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/client/useDictionaryDynamic.test.js

@@ -0,0 +1,47 @@
+import { get } from 'svelte/store';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+vi.mock('@intlayer/config/built', () => {
+    const internationalization = { defaultLocale: 'en', locales: ['en', 'fr'] };
+    return { internationalization, default: { internationalization } };
+});
+vi.mock('./intlayerContext', () => ({
+    getIntlayerContext: () => undefined,
+}));
+// Interpretation is covered elsewhere: expose the raw content.
+vi.mock('../getDictionary', () => ({
+    getDictionary: (dictionary) => dictionary.content,
+}));
+import { intlayerStore } from './intlayerStore';
+import { useDictionaryDynamic } from './useDictionaryDynamic';
+/** Loader map whose chunks resolve only when the test says so. */
+const createDeferredLoaders = () => {
+    const resolvers = new Map();
+    const createLoader = (locale) => () => new Promise((resolve) => {
+        resolvers.set(locale, resolve);
+    });
+    return {
+        loaders: { en: createLoader('en'), fr: createLoader('fr') },
+        resolve: (locale, title) => resolvers.get(locale)?.({ key: 'message', content: { title } }),
+    };
+};
+const flushPromises = () => new Promise((resolve) => setTimeout(resolve, 0));
+describe('useDictionaryDynamic', () => {
+    afterEach(() => {
+        intlayerStore.reset();
+    });
+    it('keeps the resolved content, flagged as loading, while the next locale loads', async () => {
+        const { loaders, resolve } = createDeferredLoaders();
+        const content = useDictionaryDynamic(loaders, 'message');
+        const unsubscribe = content.subscribe(() => { });
+        expect(get(content).isLoading).toBe(true);
+        resolve('en', 'Hello');
+        await flushPromises();
+        expect(get(content)).toMatchObject({ title: 'Hello', isLoading: false });
+        intlayerStore.setLocale('fr');
+        expect(get(content)).toMatchObject({ title: 'Hello', isLoading: true });
+        resolve('fr', 'Bonjour');
+        await flushPromises();
+        expect(get(content)).toMatchObject({ title: 'Bonjour', isLoading: false });
+        unsubscribe();
+    });
+});

package/dist/renderIntlayerNode.d.ts

@@ -1,13 +1,22 @@
+import type { ResolvedEditor } from '@intlayer/types/module_augmentation';
 type IntlayerNodeProps = {
     value: any;
     component: any;
     props: Record<string, any>;
     additionalProps?: Record<string, any>;
 };
-export type IntlayerNode<T, AdditionalProps = Record<string, any>> = {
+type IntlayerNodeComponent<T> = {
     new (...args: any[]): any;
     (anchor: any, props: any): any;
     value: T;
-} & AdditionalProps & T;
+};
+/**
+ * Content node returned by `useIntlayer`: a component (`<Title />`).
+ *
+ * Without the editor it is also typed as its value, so it can be used wherever
+ * a string is expected. With the editor, it renders the editable selector, so
+ * string usages must go through `.value`.
+ */
+export type IntlayerNode<T, AdditionalProps = Record<string, any>> = ResolvedEditor<IntlayerNodeComponent<T> & AdditionalProps & T, IntlayerNodeComponent<T> & AdditionalProps>;
 export declare const renderIntlayerNode: <T, AdditionalProps = Record<string, any>>(args: IntlayerNodeProps) => IntlayerNode<T, AdditionalProps>;
 export {};

package/dist/renderIntlayerNode.js

@@ -1,4 +1,3 @@
-// import type { ResolvedEditor } from '@intlayer/types/module_augmentation';
 import { getIntlayerNodePrototype } from '@intlayer/core/utils';
 import IntlayerNodeWrapper from './IntlayerNodeWrapper.svelte';
 export const renderIntlayerNode = (args) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-intlayer",
-  "version": "9.5.10",
+  "version": "9.5.11",
   "description": "Easily internationalize i18n your Svelte applications with type-safe multilingual content management.",
   "keywords": [
     "intlayer",
@@ -83,11 +83,11 @@
     "typecheck": "tsc --noEmit --project tsconfig.types.json"
   },
   "dependencies": {
-    "@intlayer/api": "9.5.10",
-    "@intlayer/config": "9.5.10",
-    "@intlayer/core": "9.5.10",
-    "@intlayer/editor": "9.5.10",
-    "@intlayer/types": "9.5.10"
+    "@intlayer/api": "9.5.11",
+    "@intlayer/config": "9.5.11",
+    "@intlayer/core": "9.5.11",
+    "@intlayer/editor": "9.5.11",
+    "@intlayer/types": "9.5.11"
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "7.0.1",
@@ -109,7 +109,7 @@
     "svelte": ">=5.0.0"
   },
   "optionalDependencies": {
-    "@intlayer/analytics": "9.5.10"
+    "@intlayer/analytics": "9.5.11"
   },
   "engines": {
     "node": ">=14.18"