@intlayer/docs 5.8.1 → 6.0.0-canary.1

package/docs/de/testing.md

@@ -0,0 +1,200 @@
+---
+createdAt: 2025-03-01
+updatedAt: 2025-09-20
+title: Testen Ihres Inhalts
+description: Entdecken Sie, wie Sie Ihre Inhalte mit Intlayer testen können.
+keywords:
+  - Testen
+  - Intlayer
+  - Internationalisierung
+  - CMS
+  - Content-Management-System
+  - Visueller Editor
+slugs:
+  - doc
+  - testing
+---
+
+# Testen Ihres Inhalts
+
+Dieser Leitfaden zeigt, wie Sie automatisch überprüfen können, ob Ihre Wörterbücher vollständig sind, fehlende Übersetzungen vor der Veröffentlichung erkennen und die lokalisierte Benutzeroberfläche in Ihrer App testen.
+
+---
+
+## Was Sie testen können
+
+- **Fehlende Übersetzungen**: CI schlägt fehl, wenn für ein Wörterbuch erforderliche Sprachversionen fehlen.
+- **Lokalisierte UI-Darstellung**: Komponenten mit einem bestimmten Sprachprovider rendern und sichtbaren Text/Attribute überprüfen.
+- **Build-Zeit Prüfungen**: Führen Sie lokal eine schnelle Prüfung über die CLI durch.
+
+---
+
+## Schnellstart: Prüfung über CLI
+
+Führen Sie die Prüfung vom Projektstammverzeichnis aus durch:
+
+```bash
+npx intlayer content test
+```
+
+Nützliche Optionen:
+
+- `--env-file [Pfad]`: lädt Umgebungsvariablen aus einer Datei.
+- `-e, --env [Name]`: wählt ein Umgebungsprofil aus.
+- `--base-dir [Pfad]`: legt das Basisverzeichnis der App für die Auflösung fest.
+- `--verbose`: zeigt ausführliche Protokolle an.
+- `--prefix [Label]`: fügt den Protokollzeilen ein Präfix hinzu.
+
+Hinweis: Die CLI gibt einen detaillierten Bericht aus, beendet sich jedoch bei Fehlern nicht mit einem Fehlercode. Für CI-Gates fügen Sie einen Unit-Test (siehe unten) hinzu, der sicherstellt, dass keine erforderlichen Sprachversionen fehlen.
+
+---
+
+## Programmatischer Test (Vitest/Jest)
+
+Verwenden Sie die Intlayer CLI API, um sicherzustellen, dass keine Übersetzungen für Ihre erforderlichen Sprachversionen fehlen.
+
+```ts fileName=i18n.test.ts
+/* @vitest-environment node */
+import { listMissingTranslations } from "intlayer/cli";
+import { describe, expect, it } from "vitest";
+
+describe("Übersetzungen", () => {
+  it("hat keine fehlenden erforderlichen Sprachversionen", () => {
+    const result = listMissingTranslations();
+
+    if (result.missingRequiredLocales.length > 0) {
+      // Hilfreich, wenn der Test lokal oder in CI fehlschlägt
+      console.log(result.missingTranslations);
+    }
+
+    expect(result.missingRequiredLocales).toHaveLength(0);
+  });
+});
+```
+
+Jest-Äquivalent:
+
+```ts fileName=i18n.test.ts
+import { listMissingTranslations } from "intlayer/cli";
+
+test("hat keine fehlenden erforderlichen Sprachversionen", () => {
+  const result = listMissingTranslations();
+
+  if (result.missingRequiredLocales.length > 0) {
+    // eslint-disable-next-line no-console
+    console.log(result.missingTranslations);
+  }
+
+  expect(result.missingRequiredLocales).toHaveLength(0);
+});
+```
+
+Wie es funktioniert:
+
+- Intlayer liest Ihre Konfiguration (locales, requiredLocales) und deklarierte Wörterbücher aus und meldet dann:
+  - `missingTranslations`: pro Schlüssel, welche Sprachversionen fehlen und aus welcher Datei.
+  - `missingLocales`: Vereinigung aller fehlenden Sprachversionen.
+  - `missingRequiredLocales`: Teilmenge beschränkt auf `requiredLocales` (oder alle Sprachversionen, wenn `requiredLocales` nicht gesetzt ist).
+
+---
+
+## Testen der lokalisierten Benutzeroberfläche (React / Next.js)
+
+Rendern Sie Komponenten unter einem Intlayer-Provider und prüfen Sie den sichtbaren Inhalt.
+
+React-Beispiel (Testing Library):
+
+```tsx
+import { IntlayerProvider } from "react-intlayer/client";
+import { render, screen } from "@testing-library/react";
+import { MyComponent } from "./MyComponent";
+
+test("renders localized title in English", () => {
+  render(
+    <IntlayerProvider locale="en-US">
+      <MyComponent />
+    </IntlayerProvider>
+  );
+
+  expect(screen.getByText("Erwarteter englischer Titel")).toBeInTheDocument();
+});
+```
+
+Next.js (App Router) Beispiel: Verwenden Sie den Framework-Wrapper:
+
+```tsx
+import { IntlayerClientProvider } from "next-intlayer/client";
+import { render, screen } from "@testing-library/react";
+import { MyPage } from "./MyPage";
+
+test("rendert lokalisierten Überschrift auf Französisch", () => {
+  render(
+    <IntlayerClientProvider locale="fr-FR">
+      <MyPage />
+    </IntlayerClientProvider>
+  );
+  expect(
+    screen.getByRole("heading", { name: "Titre attendu" })
+  ).toBeInTheDocument();
+});
+```
+
+Tipps:
+
+- Wenn Sie rohe Zeichenkettenwerte für Attribute benötigen (z. B. `aria-label`), greifen Sie auf das `.value`-Feld zu, das von `useIntlayer` in React zurückgegeben wird.
+- Behalten Sie Wörterbücher in der Nähe der Komponenten für einfachere Unit-Tests und Bereinigung bei.
+
+---
+
+## Kontinuierliche Integration
+
+Fügen Sie einen Test hinzu, der den Build fehlschlagen lässt, wenn erforderliche Übersetzungen fehlen.
+
+`package.json`:
+
+```json
+{
+  "scripts": {
+    "test:i18n": "vitest run -c"
+  }
+}
+```
+
+GitHub Actions Beispiel:
+
+```yaml
+name: CI
+on: [push, pull_request]
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - run: npm ci
+      - run: npm run test:i18n
+```
+
+Optional: Führen Sie die CLI-Prüfung für eine menschenlesbare Zusammenfassung neben den Tests aus:
+
+```bash
+npx intlayer content test --verbose
+```
+
+---
+
+## Fehlerbehebung
+
+- Stellen Sie sicher, dass Ihre Intlayer-Konfiguration `locales` und (optional) `requiredLocales` definiert.
+- Wenn Ihre Anwendung dynamische oder entfernte Wörterbücher verwendet, führen Sie die Tests in einer Umgebung aus, in der die Wörterbücher verfügbar sind.
+- Für gemischte Monorepos verwenden Sie `--base-dir`, um die CLI auf das richtige Anwendungs-Stammverzeichnis zu verweisen.
+
+---
+
+## Dokumentationsverlauf
+
+| Version | Datum      | Änderungen           |
+| ------- | ---------- | -------------------- |
+| 6.0.0   | 2025-09-20 | Einführung von Tests |

package/docs/en/CI_CD.md

@@ -23,7 +23,7 @@ Intlayer allows the automatic generation of translations for your content declar
 
 ## Using the CMS
 
-With Intlayer, you can adopt a workflow where only a single locale is declared locally, while all translations are managed remotely through the CMS. This allows content and translations to be completely detached from the codebase, offering more flexibility for content editors and enabling hot content reloading (no need to rebuild the application to apply changes).
+With Intlayer, you can adopt a workflow where only a single locale is declared locally, while all translations are managed remotely through the CMS. This allows content and translations to be completely detached from the codebase, offering more flexibility for content editors and enabling Live Sync (no need to rebuild the application to apply changes).
 
 ### Example Configuration
 
@@ -37,12 +37,10 @@ const config: IntlayerConfig = {
     defaultLocale: Locales.ENGLISH,
   },
   editor: {
-    dictionaryPriorityStrategy: "distant_first", // Remote content takes priority
-
-    applicationURL: process.env.APPLICATION_URL, // Application URL used by the CMS
-
-    clientId: process.env.INTLAYER_CLIENT_ID, // CMS credentials
+    // CMS credentials if you use the CMS
+    clientId: process.env.INTLAYER_CLIENT_ID,
     clientSecret: process.env.INTLAYER_CLIENT_SECRET,
+    liveSync: true,
   },
   ai: {
     applicationContext: "This is a test application", // Helps ensure consistent translation generation

package/docs/en/autoFill.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-03-13
-updatedAt: 2025-06-29
+updatedAt: 2025-09-20
 title: Auto Fill
 description: Learn how to use auto fill functionality in Intlayer to automatically populate content based on predefined patterns. Follow this documentation to implement auto fill features efficiently in your project.
 keywords:
@@ -132,6 +132,8 @@ This will generate two separate files:
 - `src/components/example/example.fr.content.json`
 - `src/components/example/example.es.content.json`
 
+> In this case, if the object does not contain all locales, Intlayer skip the generation of the remaining locales.
+
 ## Filter Specific Locale Autofill
 
 Using an object for the `autoFill` field allows you to apply filters and generate only specific locale files.
@@ -157,9 +159,10 @@ You can use variables inside the `autoFill` path to dynamically resolve the targ
 **Available variables:**
 
 - `{{locale}}` – Locale code (e.g. `fr`, `es`)
+- `{{fileName}}` – File name (e.g. `index`)
 - `{{key}}` – Dictionary key (e.g. `example`)
 
-```ts fileName="src/components/example/example.content.ts"
+```ts fileName="src/components/example/index.content.ts"
 const exampleContent = {
   key: "example",
   autoFill: "/messages/{{locale}}/{{key}}.content.json",
@@ -174,8 +177,25 @@ This will generate:
 - `/messages/fr/example.content.json`
 - `/messages/es/example.content.json`
 
+```ts fileName="src/components/example/index.content.ts"
+const exampleContent = {
+  key: "example",
+  autoFill: "./{{fileName}}.content.json",
+  content: {
+    // Your content
+  },
+};
+```
+
+This will generate:
+
+- `./index.content.json`
+- `./index.content.json`
+
 ## Doc History
 
-| Version | Date       | Changes      |
-| ------- | ---------- | ------------ |
-| 5.5.10  | 2025-06-29 | Init history |
+| Version | Date       | Changes                     |
+| ------- | ---------- | --------------------------- |
+| 6.0.0   | 2025-09-20 | Add global configuration    |
+| 6.0.0   | 2025-09-17 | Add `{{fileName}}` variable |
+| 5.5.10  | 2025-06-29 | Init history                |

package/docs/en/configuration.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-13
-updatedAt: 2025-07-25
+updatedAt: 2025-09-16
 title: Configuration
 description: Learn how to configure Intlayer for your application. Understand the various settings and options available to customize Intlayer to your needs.
 keywords:
@@ -46,6 +46,7 @@ const config: IntlayerConfig = {
     locales: [Locales.ENGLISH],
   },
   content: {
+    autoFill: "./{{fileName}}.content.json",
     contentDir: ["src", "../ui-library"],
   },
   middleware: {
@@ -134,7 +135,6 @@ Defines settings related to internationalization, including available locales an
 #### Properties
 
 - **locales**:
-
   - _Type_: `string[]`
   - _Default_: `['en']`
   - _Description_: The list of supported locales in the application.
@@ -148,7 +148,6 @@ Defines settings related to internationalization, including available locales an
   - _Note_: If empty, all locales are required in `strict` mode.
   - _Note_: Ensure required locales are also defined in the `locales` field.
 - **strictMode**:
-
   - _Type_: `string`
   - _Default_: `inclusive`
   - _Description_: Ensure strong implementations of internationalized content using typescript.
@@ -157,7 +156,6 @@ Defines settings related to internationalization, including available locales an
   - _Note_: If set to "loose", the translation `t` function will accept any existing locale.
 
 - **defaultLocale**:
-
   - _Type_: `string`
   - _Default_: `'en'`
   - _Description_: The default locale used as a fallback if the requested locale is not found.
@@ -173,7 +171,6 @@ Defines settings related to the integrated editor, including server port and act
 #### Properties
 
 - **applicationURL**:
-
   - _Type_: `string`
   - _Default_: `http://localhost:3000`
   - _Description_: The URL of the application. Used to restrict the origin of the editor for security reasons.
@@ -184,13 +181,11 @@ Defines settings related to the integrated editor, including server port and act
   - _Note_: The URL of the application. Used to restrict the origin of the editor for security reasons. If set to `'*'`, the editor is accessible from any origin.
 
 - **port**:
-
   - _Type_: `number`
   - _Default_: `8000`
   - _Description_: The port used by the visual editor server.
 
 - **editorURL**:
-
   - _Type_: `string`
   - _Default_: `'http://localhost:8000'`
   - _Description_: The URL of the editor server. Used to restrict the origin of the editor for security reasons.
@@ -200,7 +195,6 @@ Defines settings related to the integrated editor, including server port and act
   - _Note_: The URL of the editor server to reach from the application. Used to restrict the origins that can interact with the application for security reasons. If set to `'*'`, the editor is accessible from any origin. Should be set if port is changed, or if the editor is hosted on a different domain.
 
 - **cmsURL**:
-
   - _Type_: `string`
   - _Default_: `'https://intlayer.org'`
   - _Description_: The URL of the Intlayer CMS.
@@ -208,14 +202,12 @@ Defines settings related to the integrated editor, including server port and act
   - _Note_: The URL of the Intlayer CMS.
 
 - **backendURL**:
-
   - _Type_: `string`
   - _Default_: `https://back.intlayer.org`
   - _Description_: The URL of the backend server.
   - _Example_: `http://localhost:4000`
 
 - **enabled**:
-
   - _Type_: `boolean`
   - _Default_: `true`
   - _Description_: Indicates if the application interact with the visual editor.
@@ -223,7 +215,6 @@ Defines settings related to the integrated editor, including server port and act
   - _Note_: If true, the editor will be able to interact with the application. If false, the editor will not be able to interact with the application. In any case, the editor can only be enabled by the visual editor. Disabling the editor for specific environments is a way to enforce the security.
 
 - **clientId**:
-
   - _Type_: `string` | `undefined`
   - _Default_: `undefined`
   - _Description_: clientId and clientSecret allow the intlayer packages to authenticate with the backend using oAuth2 authentication. An access token is used to authenticate the user related to the project. To get an access token, go to https://intlayer.org/dashboard/project and create an account.
@@ -231,27 +222,39 @@ Defines settings related to the integrated editor, including server port and act
   - _Note_: Important: The clientId and clientSecret should be kept secret and not shared publicly. Please ensure to keep them in a secure location, such as environment variables.
 
 - **clientSecret**:
-
   - _Type_: `string` | `undefined`
   - _Default_: `undefined`
   - _Description_: clientId and clientSecret allow the intlayer packages to authenticate with the backend using oAuth2 authentication. An access token is used to authenticate the user related to the project. To get an access token, go to https://intlayer.org/dashboard/project and create an account.
   - _Example_: `true`
   - _Note_: Important: The clientId and clientSecret should be kept secret and not shared publicly. Please ensure to keep them in a secure location, such as environment variables.
 
-- **hotReload**:
+- **dictionaryPriorityStrategy**:
+  - _Type_: `string`
+  - _Default_: `'local_first'`
+  - _Description_: The strategy to prioritize dictionaries in the case of both local and distant dictionaries being present. If set to `'distant_first'`, the application will prioritize distant dictionaries over local dictionaries. If set to `'local_first'`, the application will prioritize local dictionaries over distant dictionaries.
+  - _Example_: `'distant_first'`
 
+- **liveSync**:
   - _Type_: `boolean`
   - _Default_: `false`
-  - _Description_: Indicates if the application server should hot reload the locale configurations when a change is detected.
+  - _Description_: Indicates if the application server should hot reload the content of the application when a change is detected on the CMS / Visual Editor / Backend.
   - _Example_: `true`
   - _Note_: For example, when a new dictionary is added or updated, the application will update the content to display in the page.
-  - _Note_: Because the hot reloading needs an continuous connection to the server, it is only available for clients of the `enterprise` plan.
+  - _Note_: Live sync need to externalize the content of the application to another server. That means that it can slightly impact the performance of the application. To limit this, we recommand to host the application and the live sync server on the same machine. Also, the combination of live sync and `optimize` can apply a consequent number of requests to the live sync server. Depending of your infrastructure, we recommand to test both options and their combination.
 
-- **dictionaryPriorityStrategy**:
+- **liveSyncPort**:
+  - _Type_: `number`
+  - _Default_: `4000`
+  - _Description_: The port of the live sync server.
+  - _Example_: `4000`
+  - _Note_: The port of the live sync server.
+
+- **liveSyncURL**:
   - _Type_: `string`
-  - _Default_: `'local_first'`
-  - _Description_: The strategy to prioritize dictionaries in the case of both local and distant dictionaries being present. If set to `'distant_first'`, the application will prioritize distant dictionaries over local dictionaries. If set to `'local_first'`, the application will prioritize local dictionaries over distant dictionaries.
-  - _Example_: `'distant_first'`
+  - _Default_: `'http://localhost:{liveSyncPort}'`
+  - _Description_: The URL of the live sync server.
+  - _Example_: `'https://example.com'`
+  - _Note_: Point to localhost by default but can be changed to any URL in the case of a remote live sync server.
 
 ### Middleware Configuration
 
@@ -260,7 +263,6 @@ Settings that control middleware behavior, including how the application handles
 #### Properties
 
 - **headerName**:
-
   - _Type_: `string`
   - _Default_: `'x-intlayer-locale'`
   - _Description_: The name of the HTTP header used to determine the locale.
@@ -268,7 +270,6 @@ Settings that control middleware behavior, including how the application handles
   - _Note_: This is useful for API-based locale determination.
 
 - **cookieName**:
-
   - _Type_: `string`
   - _Default_: `'intlayer-locale'`
   - _Description_: The name of the cookie used to store the locale.
@@ -276,7 +277,6 @@ Settings that control middleware behavior, including how the application handles
   - _Note_: Used to persist the locale across sessions.
 
 - **prefixDefault**:
-
   - _Type_: `boolean`
   - _Default_: `false`
   - _Description_: Whether to include the default locale in the URL.
@@ -286,7 +286,6 @@ Settings that control middleware behavior, including how the application handles
     - If `false` and `defaultLocale = 'en'`: path = `/dashboard` or `/fr/dashboard`
 
 - **basePath**:
-
   - _Type_: `string`
   - _Default_: `''`
   - _Description_: The base path for the application URLs.
@@ -298,7 +297,6 @@ Settings that control middleware behavior, including how the application handles
     - If the base path is not set, the URL will be `https://example.com/en`
 
 - **serverSetCookie**:
-
   - _Type_: `string`
   - _Default_: `'always'`
   - _Description_: Rule for setting the locale cookie on the server.
@@ -307,7 +305,6 @@ Settings that control middleware behavior, including how the application handles
   - _Note_: Controls whether the locale cookie is set on every request or never.
 
 - **noPrefix**:
-
   - _Type_: `boolean`
   - _Default_: `false`
   - _Description_: Whether to omit the locale prefix from URLs.
@@ -320,7 +317,6 @@ Settings that control middleware behavior, including how the application handles
       - If `noPrefix = true`: URL will be `https://example.com`
 
 - **detectLocaleOnPrefetchNoPrefix**:
-
   - _Type_: `boolean`
   - _Default_: `false`
   - _Description_: Controls whether locale detection occurs during Next.js prefetch requests.
@@ -352,14 +348,24 @@ Settings related to content handling within the application, including directory
 
 #### Properties
 
-- **watch**:
+- **autoFill**:
+  - _Type_: `boolean | string | { [key in Locales]?: string }`
+  - _Default_: `undefined`
+  - _Description_: Indicate how the content should be automatically filled using AI. Can be declared globally in the `intlayer.config.ts` file.
+  - _Example_: true
+  - _Example_: `'./{{fileName}}.content.json'`
+  - _Example_: `{ fr: './{{fileName}}.fr.content.json', es: './{{fileName}}.es.content.json' }`
+  - _Note_: The auto fill configuration. It can be:
+    - boolean: Enable auto fill for all locales
+    - string: Path to a single file or template with variables
+    - object: Per-locale file paths
 
+- **watch**:
   - _Type_: `boolean`
   - _Default_: `process.env.NODE_ENV === 'development'`
   - _Description_: Indicates if Intlayer should watch for changes in the content declaration files in the app to rebuild the related dictionaries.
 
 - **fileExtensions**:
-
   - _Type_: `string[]`
   - _Default_: `['.content.ts', '.content.js', '.content.cjs', '.content.mjs', '.content.json', '.content.tsx', '.content.jsx']`
   - _Description_: File extensions to look for when building dictionaries.
@@ -367,7 +373,6 @@ Settings related to content handling within the application, including directory
   - _Note_: Customizing file extensions can help avoid conflicts.
 
 - **baseDir**:
-
   - _Type_: `string`
   - _Default_: `process.cwd()`
   - _Description_: The base directory for the project.
@@ -375,26 +380,22 @@ Settings related to content handling within the application, including directory
   - _Note_: This is used to resolve all Intlayer-related directories.
 
 - **dictionaryOutput**:
-
   - _Type_: `string[]`
   - _Default_: `['intlayer']`
   - _Description_: The type of dictionary output to use, e.g., `'intlayer'` or `'i18next'`.
 
 - **contentDir**:
-
   - _Type_: `string[]`
   - _Default_: `['.']`
   - _Example_: `['src', '../../ui-library', require.resolve("@my-package/content")]`
   - _Description_: The directory path where content is stored.
 
 - **dictionariesDir**:
-
   - _Type_: `string`
   - _Default_: `'.intlayer/dictionaries'`
   - _Description_: The directory path for storing intermediate or output results.
 
 - **moduleAugmentationDir**:
-
   - _Type_: `string`
   - _Default_: `'.intlayer/types'`
   - _Description_: Directory for module augmentation, allowing better IDE suggestions and type checking.
@@ -402,21 +403,18 @@ Settings related to content handling within the application, including directory
   - _Note_: Be sure to include this in `tsconfig.json`.
 
 - **unmergedDictionariesDir**:
-
   - _Type_: `string`
   - _Default_: `'.intlayer/unmerged_dictionary'`
   - _Description_: The directory for storing unmerged dictionaries.
   - _Example_: `'translations'`
 
 - **dictionariesDir**:
-
   - _Type_: `string`
   - _Default_: `'.intlayer/dictionary'`
   - _Description_: The directory for storing localization dictionaries.
   - _Example_: `'translations'`
 
 - **i18nextResourcesDir**:
-
   - _Type_: `string`
   - _Default_: `'i18next_dictionary'`
   - _Description_: The directory for storing i18n dictionaries.
@@ -424,14 +422,12 @@ Settings related to content handling within the application, including directory
   - _Note_: Ensure this directory is configured for the i18next output type.
 
 - **typesDir**:
-
   - _Type_: `string`
   - _Default_: `'types'`
   - _Description_: The directory for storing dictionary types.
   - _Example_: `'intlayer-types'`
 
 - **mainDir**:
-
   - _Type_: `string`
   - _Default_: `'main'`
   - _Description_: The directory where main application files are stored.
@@ -450,7 +446,6 @@ Settings that control the logger, including the prefix to use.
 #### Properties
 
 - **mode**:
-
   - _Type_: `string`
   - _Default_: `default`
   - _Description_: Indicates the mode of the logger.
@@ -459,7 +454,6 @@ Settings that control the logger, including the prefix to use.
   - _Note_: The mode of the logger. Verbose mode will log more information, but can be used for debugging purposes. Disabled mode will disable the logger.
 
 - **prefix**:
-
   - _Type_: `string`
   - _Default_: `'[intlayer] '`
   - _Description_: The prefix of the logger.
@@ -487,7 +481,6 @@ Intlayer supports multiple AI providers for enhanced flexibility and choice. Cur
 #### Properties
 
 - **provider**:
-
   - _Type_: `string`
   - _Default_: `'openai'`
   - _Description_: The provider to use for the AI features of Intlayer.
@@ -496,7 +489,6 @@ Intlayer supports multiple AI providers for enhanced flexibility and choice. Cur
   - _Note_: Different providers may require different API keys and have different pricing models.
 
 - **model**:
-
   - _Type_: `string`
   - _Default_: None
   - _Description_: The model to use for the AI features of Intlayer.
@@ -504,7 +496,6 @@ Intlayer supports multiple AI providers for enhanced flexibility and choice. Cur
   - _Note_: The specific model to use varies by provider.
 
 - **temperature**:
-
   - _Type_: `number`
   - _Default_: None
   - _Description_: The temperature controls the randomness of the AI's responses.
@@ -512,7 +503,6 @@ Intlayer supports multiple AI providers for enhanced flexibility and choice. Cur
   - _Note_: A higher temperature will make the AI more creative and less predictable.
 
 - **apiKey**:
-
   - _Type_: `string`
   - _Default_: None
   - _Description_: Your API key for the selected provider.
@@ -537,7 +527,6 @@ Build options apply to the `@intlayer/babel` and `@intlayer/swc` plugins.
 #### Properties
 
 - **optimize**:
-
   - _Type_: `boolean`
   - _Default_: `process.env.NODE_ENV === 'production'`
   - _Description_: Controls whether the build should be optimized.
@@ -548,21 +537,21 @@ Build options apply to the `@intlayer/babel` and `@intlayer/swc` plugins.
   - _Note_: Ensure all keys are declared statically in the `useIntlayer` calls. e.g. `useIntlayer('navbar')`.
 
 - **importMode**:
-
-  - _Type_: `'static' | 'dynamic' | 'async'`
+  - _Type_: `'static' | 'dynamic' | 'live'`
   - _Default_: `'static'`
   - _Description_: Controls how dictionaries are imported.
   - _Example_: `'dynamic'`
   - _Note_: Available modes:
     - "static": Dictionaries are imported statically. Replaces `useIntlayer` with `useDictionary`.
     - "dynamic": Dictionaries are imported dynamically using Suspense. Replaces `useIntlayer` with `useDictionaryDynamic`.
-    - "async": Dictionaries are imported dynamically asynchronously. Replaces `useIntlayer` with `await useDictionaryAsync`.
+    - "live": Dictionaries are fetched dynamically using the live sync API. Replaces `useIntlayer` with `useDictionaryFetch`.
   - _Note_: Dynamic imports rely on Suspense and may slightly impact rendering performance.
   - _Note_: If disabled all locales will be loaded at once, even if they are not used.
   - _Note_: This option relies on the `@intlayer/babel` and `@intlayer/swc` plugins.
   - _Note_: Ensure all keys are declared statically in the `useIntlayer` calls. e.g. `useIntlayer('navbar')`.
   - _Note_: This option will be ignored if `optimize` is disabled.
-  - _Note_: In most cases, `"dynamic"` will be used for React applications, `"async"` for Vue.js applications.
+  - _Note_: If set to "live", only the dictionaries that are including remote content, and set as "live" flags will be transformed as live mode. Others will be imported dynamically as "dynamic" mode to optimize the number of fetch queries, and load performance.
+  - _Note_: Live mode will use the live sync API to fetch the dictionaries. If the API call fails, the dictionaries will be imported dynamically as "dynamic" mode.
   - _Note_: This option will not impact the `getIntlayer`, `getDictionary`, `useDictionary`, `useDictionaryAsync` and `useDictionaryDynamic` functions.
 
 - **traversePattern**:
@@ -576,8 +565,10 @@ Build options apply to the `@intlayer/babel` and `@intlayer/swc` plugins.
 
 ## Doc History
 
-| Version | Date       | Changes                                                  |
-| ------- | ---------- | -------------------------------------------------------- |
-| 5.6.1   | 2025-07-25 | Replace `activateDynamicImport` with `importMode` option |
-| 5.6.0   | 2025-07-13 | Change default contentDir from `['src']` to `['.']`      |
-| 5.5.11  | 2025-06-29 | Add `docs` commands                                      |
+| Version | Date       | Changes                                                                                 |
+| ------- | ---------- | --------------------------------------------------------------------------------------- |
+| 6.0.0   | 2025-09-16 | Add `live` import mode                                                                  |
+| 6.0.0   | 2025-09-04 | Replace `hotReload` field by `liveSync` and add `liveSyncPort` and `liveSyncURL` fields |
+| 5.6.1   | 2025-07-25 | Replace `activateDynamicImport` with `importMode` option                                |
+| 5.6.0   | 2025-07-13 | Change default contentDir from `['src']` to `['.']`                                     |
+| 5.5.11  | 2025-06-29 | Add `docs` commands                                                                     |