@intlayer/docs 7.4.0 → 7.5.0-canary.1

package/docs/de/dictionary/content_file.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-02-07
-updatedAt: 2025-09-20
+updatedAt: 2025-12-13
 title: Inhaltsdatei
 description: Erfahren Sie, wie Sie die Erweiterungen für Ihre Inhaltsdeklarationsdateien anpassen können. Folgen Sie dieser Dokumentation, um Bedingungen effizient in Ihrem Projekt umzusetzen.
 keywords:
@@ -12,6 +12,9 @@ slugs:
   - concept
   - content
 history:
+  - version: 7.5.0
+    date: 2025-12-13
+    changes: Unterstützung für ICU- und i18next-Formate hinzugefügt
   - version: 6.0.0
     date: 2025-09-20
     changes: Felddokumentation hinzugefügt
@@ -386,6 +389,26 @@ Array von Zeichenketten zur Kategorisierung und Organisation von Wörterbüchern
 }
 ```
 
+#### `format` ('intlayer' | 'icu' | 'i18next')
+
+Gibt den Formatierer an, der für den Wörterbuchinhalt verwendet werden soll. Dies ermöglicht die Verwendung verschiedener Nachrichtenformatierungssyntaxen.
+
+- `'intlayer'`: Der Standard-Intlayer-Formatierer.
+- `'icu'`: Verwendet ICU-Nachrichtenformatierung.
+- `'i18next'`: Verwendet i18next-Nachrichtenformatierung.
+
+**Beispiel:**
+
+```typescript
+{
+  key: "my-dictionary",
+  format: "icu",
+  content: {
+    message: "Hello {name}, you have {count, plural, one {# message} other {# messages}}"
+  }
+}
+```
+
 #### `locale` (LocalesValues)
 
 Wandelt das Wörterbuch in ein pro-Locale-Wörterbuch um, bei dem jedes im Inhalt deklarierte Feld automatisch in einen Übersetzungsknoten umgewandelt wird. Wenn diese Eigenschaft gesetzt ist:

package/docs/de/intlayer_with_astro.md

@@ -2,7 +2,7 @@
 createdAt: 2024-03-07
 updatedAt: 2025-10-03
 title: Wie Sie Ihre Astro übersetzen – i18n-Leitfaden 2025
-description: Erfahren Sie, wie Sie Internationalisierung (i18n) zu Ihrer Vite- und React-Anwendung mit Intlayer hinzufügen. Folgen Sie dieser Anleitung, um Ihre App mehrsprachig zu machen.
+description: Erfahren Sie, wie Sie Internationalisierung (i18n) zu Ihrer Astro-Website mit Intlayer hinzufügen. Folgen Sie dieser Anleitung, um Ihre Website mehrsprachig zu machen.
 keywords:
   - Internationalisierung
   - Dokumentation

package/docs/de/intlayer_with_express.md

@@ -2,7 +2,7 @@
 createdAt: 2024-08-11
 updatedAt: 2025-06-29
 title: Wie Sie Ihre Express backend übersetzen – i18n-Leitfaden 2025
-description: Entdecken Sie, wie Sie Ihre vite-Backend mehrsprachig gestalten können. Befolgen Sie die Dokumentation, um sie zu internationalisieren (i18n) und zu übersetzen.
+description: Entdecken Sie, wie Sie Ihre Express-Backend mehrsprachig gestalten können. Befolgen Sie die Dokumentation, um sie zu internationalisieren (i18n) und zu übersetzen.
 keywords:
   - Internationalisierung
   - Dokumentation

package/docs/de/intlayer_with_nestjs.md

@@ -2,7 +2,7 @@
 createdAt: 2025-09-09
 updatedAt: 2025-09-09
 title: Wie Sie Ihre Nest backend übersetzen – i18n-Leitfaden 2025
-description: Entdecken Sie, wie Sie Ihr Vite-Backend mehrsprachig machen. Folgen Sie der Dokumentation, um es zu internationalisieren (i18n) und zu übersetzen.
+description: Entdecken Sie, wie Sie Ihr NestJS-Backend mehrsprachig machen. Folgen Sie der Dokumentation, um es zu internationalisieren (i18n) und zu übersetzen.
 keywords:
   - Internationalisierung
   - Dokumentation

package/docs/de/intlayer_with_next-i18next.md

@@ -580,6 +580,7 @@ const config: IntlayerConfig = {
   },
   plugins: [
     syncJSON({
+      format: "i18next",
       source: ({ locale }) => `./locales/${locale}.json`,
     }),
   ],

package/docs/de/intlayer_with_next-intl.md

@@ -419,6 +419,7 @@ const config: IntlayerConfig = {
   plugins: [
     // Synchronisieren Sie Ihre Ordnerstruktur pro Namespace mit Intlayer
     syncJSON({
+      format: "icu",
       source: ({ key, locale }) => `./locales/${locale}/${key}.json`, // Pfad zu den JSON-Übersetzungsdateien
     }),
   ],

package/docs/de/intlayer_with_tanstack.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-09-09
-updatedAt: 2025-09-09
+updatedAt: 2025-12-11
 title: Wie Sie Ihre Tanstack Start übersetzen – i18n-Leitfaden 2025
 description: Erfahren Sie, wie Sie Internationalisierung (i18n) zu Ihrer Tanstack Start-Anwendung mit Intlayer hinzufügen. Folgen Sie dieser umfassenden Anleitung, um Ihre App mehrsprachig mit lokalisierungsbewusstem Routing zu machen.
 keywords:
@@ -648,17 +648,6 @@ export function NotFoundComponent() {
 }
 ```
 
-```tsx fileName="src/routes/__root.tsx"
-import { createRootRoute } from "@tanstack/react-router";
-
-// Die Root-Route dient als Layout auf oberster Ebene
-// Sie behandelt 404s nicht direkt - das wird an untergeordnete Routen delegiert
-// Dies hält die Root einfach und ermöglicht es locale-bewussten Routen, ihre eigene 404-Logik zu verwalten
-export const Route = createRootRoute({
-  component: Outlet,
-});
-```
-
 ```tsx fileName="src/routes/{-$locale}/route.tsx"
 import { createFileRoute, Outlet, redirect } from "@tanstack/react-router";
 import { validatePrefix } from "intlayer";

package/docs/de/plugins/sync-json.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-03-13
-updatedAt: 2025-10-05
+updatedAt: 2025-12-13
 title: Sync JSON Plugin
 description: Synchronisieren Sie Intlayer-Wörterbücher mit Drittanbieter-i18n-JSON-Dateien (i18next, next-intl, react-intl, vue-i18n und mehr). Behalten Sie Ihr bestehendes i18n bei und verwenden Sie Intlayer, um Ihre Nachrichten zu verwalten, zu übersetzen und zu testen.
 keywords:
@@ -24,12 +24,15 @@ slugs:
   - sync-json
 youtubeVideo: https://www.youtube.com/watch?v=MpGMxniDHNg
 history:
+  - version: 7.5.0
+    date: 2025-12-13
+    changes: Unterstützung für ICU- und i18next-Formate hinzugefügt
   - version: 6.1.6
     date: 2025-10-05
     changes: Erste Dokumentation des Sync JSON Plugins
 ---
 
-# Sync JSON (i18n-Brücken)
+# Sync JSON (i18n-Brücken) - Sync JSON mit ICU / i18next-Unterstützung
 
 <iframe title="Wie Sie Ihre JSON-Übersetzungen mit Intlayer synchronisiert halten" class="m-auto aspect-[16/9] w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/MpGMxniDHNg?autoplay=0&amp;origin=http://intlayer.org&amp;controls=0&amp;rel=1"/>
 
@@ -105,9 +108,27 @@ syncJSON({
   source: ({ key, locale }) => string, // erforderlich
   location?: string, // optionales Label, Standard: "plugin"
   priority?: number, // optionale Priorität zur Konfliktlösung, Standard: 0
+  format?: 'intlayer' | 'icu' | 'i18next', // optionaler Formatierer, Standard: 'intlayer'
 });
 ```
 
+#### `format` ('intlayer' | 'icu' | 'i18next')
+
+Gibt den Formatierer an, der für den Wörterbuchinhalt bei der Synchronisierung von JSON-Dateien verwendet werden soll. Dies ermöglicht die Verwendung verschiedener Nachrichtenformatierungssyntaxen, die mit verschiedenen i18n-Bibliotheken kompatibel sind.
+
+- `'intlayer'`: Der Standard-Intlayer-Formatierer (Standard).
+- `'icu'`: Verwendet ICU-Nachrichtenformatierung (kompatibel mit Bibliotheken wie react-intl, vue-i18n).
+- `'i18next'`: Verwendet i18next-Nachrichtenformatierung (kompatibel mit i18next, next-i18next, Solid-i18next).
+
+**Beispiel:**
+
+```ts
+syncJSON({
+  source: ({ key, locale }) => `./locales/${locale}/${key}.json`,
+  format: "i18next", // i18next-Formatierung für Kompatibilität verwenden
+}),
+```
+
 ## Mehrere JSON-Quellen und Priorität
 
 Sie können mehrere `syncJSON`-Plugins hinzufügen, um verschiedene JSON-Quellen zu synchronisieren. Dies ist nützlich, wenn Sie mehrere i18n-Bibliotheken oder unterschiedliche JSON-Strukturen in Ihrem Projekt haben.
@@ -134,6 +155,7 @@ export default defineConfig({
   plugins: [
     // Primäre JSON-Quelle (höchste Priorität)
     syncJSON({
+      format: "i18next",
       source: ({ key, locale }) => `./locales/${locale}/${key}.json`,
       location: "main-translations",
       priority: 10,
@@ -141,6 +163,7 @@ export default defineConfig({
 
     // Fallback-JSON-Quelle (niedrigere Priorität)
     syncJSON({
+      format: "i18next",
       source: ({ locale }) => `./fallback-locales/${locale}.json`,
       location: "fallback-translations",
       priority: 5,
@@ -148,6 +171,7 @@ export default defineConfig({
 
     // Legacy-JSON-Quelle (niedrigste Priorität)
     syncJSON({
+      format: "i18next",
       source: ({ locale }) => `/my/other/app/legacy/${locale}/messages.json`,
       location: "legacy-translations",
       priority: 1,
@@ -178,6 +202,7 @@ import { syncJSON } from "@intlayer/sync-json-plugin";
 export default {
   plugins: [
     syncJSON({
+      format: "i18next",
       source: ({ key, locale }) => `./locales/${locale}/${key}.json`,
     }),
   ],

package/docs/en/cli/index.md

@@ -103,6 +103,10 @@ To see how to configure available locales, or other parameters, refer to the [co
 
 ## Run intlayer commands
 
+### Authentication
+
+- **[Login](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/login.md)** - Authenticate with the Intlayer CMS and get access credentials
+
 ### Core Commands
 
 - **[Build Dictionaries](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/build.md)** - Build your dictionaries from content declaration files
@@ -144,6 +148,7 @@ To see how to configure available locales, or other parameters, refer to the [co
 
 ```json fileName="package.json"
 "scripts": {
+  "intlayer:login": "npx intlayer login",
   "intlayer:build": "npx intlayer build",
   "intlayer:watch": "npx intlayer build --watch",
   "intlayer:push": "npx intlayer push",

package/docs/en/cli/login.md

@@ -0,0 +1,157 @@
+---
+createdAt: 2025-12-16
+updatedAt: 2025-12-16
+title: CLI - Login
+description: Learn how to use the Intlayer CLI login command to authenticate with the Intlayer CMS and obtain access credentials.
+keywords:
+  - CLI
+  - Login
+  - Authentication
+  - CMS
+  - Intlayer
+  - Credentials
+slugs:
+  - doc
+  - concept
+  - cli
+  - login
+---
+
+# Intlayer CLI Login Command
+
+---
+
+## Description
+
+The `login` command of the Intlayer CLI allows you to authenticate with the Intlayer CMS. This command automatically opens your default browser to complete the authentication process and receive the necessary credentials (Client ID and Client Secret) to use Intlayer services.
+
+## Usage
+
+```bash
+npx intlayer login [options]
+```
+
+or
+
+```bash
+intlayer login [options]
+```
+
+## Options
+
+### `--cms-url <url>`
+
+Specify the URL of the Intlayer CMS to connect to for authentication.
+
+- **Type**: `string`
+- **Default**: The value configured in `intlayer.config.*` or `https://intlayer.org`
+- **Example**:
+
+```bash
+npx intlayer login --cms-url https://intlayer.org
+```
+
+### Configuration Options
+
+You can also use common configuration options:
+
+- `--env-file <path>`: Path to the environment file
+- `-e, --env <env>`: Execution environment
+- `--base-dir <dir>`: Base directory of the project
+- `--verbose`: Enable detailed output (default: true)
+- `--prefix <prefix>`: Prefix for logs
+
+## How It Works
+
+1. **Local Server Start**: The command starts a local HTTP server on a random port to receive credentials from the CMS
+2. **Browser Opening**: The command automatically opens your default browser to the CMS login URL
+3. **Authentication**: Complete authentication in the browser using your Intlayer account
+4. **Credentials Reception**: The local server receives the Client ID and Client Secret from the CMS
+5. **Instructions**: The command displays instructions for configuring credentials in your project
+
+## Output
+
+After a successful login, the command will display:
+
+1. **The received credentials** (Client ID and Client Secret)
+2. **Instructions for the `.env` file**:
+
+```bash
+INTLAYER_CLIENT_ID=your_client_id
+INTLAYER_CLIENT_SECRET=your_client_secret
+```
+
+3. **Instructions for the Intlayer configuration file**:
+
+```typescript
+{
+  editor: {
+    cmsURL: 'https://intlayer.org',
+    clientId: process.env.INTLAYER_CLIENT_ID,
+    clientSecret: process.env.INTLAYER_CLIENT_SECRET,
+  },
+}
+```
+
+## Manual Configuration
+
+If the browser doesn't open automatically, you can manually visit the URL displayed in the terminal.
+
+## Examples
+
+### Login with Custom CMS URL
+
+```bash
+npx intlayer login --cms-url https://custom-cms.example.com
+```
+
+### Login with Specific Environment File
+
+```bash
+npx intlayer login --env-file .env.production
+```
+
+### Login in Verbose Mode
+
+```bash
+npx intlayer login --verbose
+```
+
+## Troubleshooting
+
+### Browser Doesn't Open
+
+If the browser doesn't open automatically, copy the URL displayed in the terminal and open it manually in your browser.
+
+### Connection Issues
+
+If you encounter connection issues, verify:
+
+1. That the CMS URL is correct
+2. That your internet connection is working properly
+3. That there are no firewalls blocking the connection
+
+### Credentials Not Received
+
+If credentials are not received:
+
+1. Make sure you completed the authentication process in the browser
+2. Verify that the local port is not blocked
+3. Try the command again
+
+## Next Steps
+
+After completing the login:
+
+1. Add the credentials to your `.env` file
+2. Configure your `intlayer.config.*` file with the credentials
+3. Use CLI commands to manage your dictionaries:
+   - [`npx intlayer push`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/push.md) - Push dictionaries to the CMS
+   - [`npx intlayer pull`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/pull.md) - Pull dictionaries from the CMS
+   - [`npx intlayer fill`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/fill.md) - Fill missing translations
+
+## See Also
+
+- [CLI Documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/index.md)
+- [Intlayer Configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/configuration.md)
+- [Intlayer CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)

package/docs/en/configuration.md

@@ -14,6 +14,9 @@ slugs:
   - concept
   - configuration
 history:
+  - version: 7.5.0
+    date: 2025-12-17
+    changes: Add `buildMode` option
   - version: 7.0.0
     date: 2025-10-25
     changes: Add `dictionary` configuration
@@ -103,6 +106,7 @@ const config: IntlayerConfig = {
     applicationContext: "This is a test application",
   },
   build: {
+    mode: "auto",
     importMode: "dynamic",
   },
 };
@@ -668,6 +672,15 @@ Build options apply to the `@intlayer/babel` and `@intlayer/swc` plugins.
 
 #### Properties
 
+- **mode**:
+  - _Type_: `'auto' | 'manual'`
+  - _Default_: `'auto'`
+  - _Description_: Controls the mode of the build.
+  - _Example_: `'manual'`
+  - _Note_: If 'auto', the build will be enabled automatically when the application is built.
+  - _Note_: If 'manual', the build will be set only when the build command is executed.
+  - _Note_: Can be used to disable dictionaries build, for instance when execution on Node.js environment should be avoided.
+
 - **optimize**:
   - _Type_: `boolean`
   - _Default_: `undefined`

package/docs/en/dictionary/content_file.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-02-07
-updatedAt: 2025-09-20
+updatedAt: 2025-12-13
 title: Content File
 description: Learn how to customize the extensions for your content declaration files. Follow this documentation to implement conditions efficiently in your project.
 keywords:
@@ -12,6 +12,9 @@ slugs:
   - concept
   - content
 history:
+  - version: 7.5.0
+    date: 2025-12-13
+    changes: Add ICU and i18next format support
   - version: 7.0.0
     date: 2025-10-23
     changes: Rename `autoFill` to `fill`
@@ -387,6 +390,26 @@ Array of strings for categorizing and organizing dictionaries. Tags provide addi
 }
 ```
 
+#### `format` ('intlayer' | 'icu' | 'i18next')
+
+Specifies the formatter to use for the dictionary content. This allows using different message formatting syntaxes.
+
+- `'intlayer'`: The default Intlayer formatter.
+- `'icu'`: Uses ICU message formatting.
+- `'i18next'`: Uses i18next message formatting.
+
+**Example:**
+
+```typescript
+{
+  key: "my-dictionary",
+  format: "icu",
+  content: {
+    message: "Hello {name}, you have {count, plural, one {# message} other {# messages}}"
+  }
+}
+```
+
 #### `locale` (LocalesValues)
 
 Transforms the dictionary into a per-locale dictionary where each field declared in the content will be automatically transformed into a translation node. When this property is set:

package/docs/en/index.md

@@ -98,6 +98,7 @@ We’ve built Intlayer with flexibility in mind, offering seamless integration a
 - **[Intlayer with React CRA](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_create_react_app.md)**
 - **[Intlayer with Vite + React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_vite+react.md)**
 - **[Intlayer with React Router v7](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_react_router_v7.md)**
+- **[Intlayer with React Router v7 (fs routes)](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_react_router_v7_fs_routes.md)**
 - **[Intlayer with Tanstack Start](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_tanstack.md)**
 - **[Intlayer with React Native and Expo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_react_native+expo.md)**
 - **[Intlayer with Lynx and React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_lynx+react.md)**

package/docs/en/intlayer_with_astro.md

@@ -2,7 +2,7 @@
 createdAt: 2024-03-07
 updatedAt: 2025-10-03
 title: How to translate your Astro app – i18n guide 2025
-description: Learn how to add internationalization (i18n) to your Vite and React application using Intlayer. Follow this guide to make your app multilingual.
+description: Learn how to add internationalization (i18n) to your Astro website using Intlayer. Follow this guide to make your site multilingual.
 keywords:
   - Internationalization
   - Documentation

package/docs/en/intlayer_with_express.md

@@ -2,7 +2,7 @@
 createdAt: 2025-08-23
 updatedAt: 2025-08-23
 title: How to translate your Express backend – i18n guide 2025
-description: Discover how to make your vite backend multilingual. Follow the documentation to internationalize (i18n) and translate it.
+description: Discover how to make your Express backend multilingual. Follow the documentation to internationalize (i18n) and translate it.
 keywords:
   - Internationalization
   - Documentation

package/docs/en/intlayer_with_nestjs.md

@@ -2,7 +2,7 @@
 createdAt: 2025-09-09
 updatedAt: 2025-09-09
 title: How to translate your Nest backend – i18n guide 2025
-description: Discover how to make your vite backend multilingual. Follow the documentation to internationalize (i18n) and translate it.
+description: Discover how to make your NestJS backend multilingual. Follow the documentation to internationalize (i18n) and translate it.
 keywords:
   - Internationalization
   - Documentation
@@ -15,7 +15,6 @@ slugs:
   - environment
   - nest
 applicationTemplate: https://github.com/AydinTheFirst/nestjs-intlayer
-author: AydinTheFirst
 history:
   - version: 5.8.0
     date: 2025-09-09

package/docs/en/intlayer_with_next-i18next.md

@@ -580,6 +580,7 @@ const config: IntlayerConfig = {
   },
   plugins: [
     syncJSON({
+      format: "i18next",
       source: ({ locale }) => `./locales/${locale}.json`,
     }),
   ],

package/docs/en/intlayer_with_next-intl.md

@@ -419,6 +419,7 @@ const config: IntlayerConfig = {
   plugins: [
     // Keep your per-namespace folder structure in sync with Intlayer
     syncJSON({
+      format: "icu",
       source: ({ key, locale }) => `./locales/${locale}/${key}.json`,
     }),
   ],

package/docs/en/intlayer_with_tanstack.md

@@ -220,17 +220,17 @@ const appContent = {
       }),
     },
     meta: {
+      title: t({
+        en: "Welcome to Intlayer + TanStack Router",
+        es: "Bienvenido a Intlayer + TanStack Router",
+        fr: "Bienvenue à Intlayer + TanStack Router",
+      }),
       description: t({
         en: "This is an example of using Intlayer with TanStack Router",
         es: "Este es un ejemplo de uso de Intlayer con TanStack Router",
         fr: "Ceci est un exemple d'utilisation d'Intlayer avec TanStack Router",
       }),
     },
-    title: t({
-      en: "Welcome to Intlayer + TanStack Router",
-      es: "Bienvenido a Intlayer + TanStack Router",
-      fr: "Bienvenue à Intlayer + TanStack Router",
-    }),
   },
   key: "app",
 } satisfies Dictionary;
@@ -512,10 +512,11 @@ function LayoutComponent() {
   useI18nHTMLAttributes(); // add this line
 
   const { locale } = Route.useParams();
+  const { defaultLocale } = useLocale();
 
   return (
     <IntlayerProvider
-      locale={locale} // If no locale included as a parameter, the default locale will be used
+      locale={locale ?? defaultLocale} // If no locale included as a parameter, the default locale will be used
     >
       <Outlet />
     </IntlayerProvider>
@@ -645,17 +646,6 @@ export function NotFoundComponent() {
 }
 ```
 
-```tsx fileName="src/routes/__root.tsx"
-import { createRootRoute } from "@tanstack/react-router";
-
-// The root route serves as the top-level layout
-// It doesn't handle 404s directly - that's delegated to child routes
-// This keeps the root simple and lets locale-aware routes manage their own 404 logic
-export const Route = createRootRoute({
-  component: Outlet,
-});
-```
-
 ```tsx fileName="src/routes/{-$locale}/route.tsx"
 import { createFileRoute, Outlet, redirect } from "@tanstack/react-router";
 import { validatePrefix } from "intlayer";