@intlayer/docs 8.12.5-canary.0 → 9.0.0-canary.2

package/docs/it/dictionary/translation.md

@@ -85,7 +85,10 @@ export default config;
 
 ## Utilizzo delle Traduzioni nei Componenti React
 
-Con `react-intlayer`, puoi utilizzare le traduzioni nei componenti React. Ecco un esempio:
+<Tabs group="framework">
+  <Tab label="React" value="react">
+
+With `react-intlayer`, you can use translations in React components. Here's an example:
 
 ```jsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
@@ -104,7 +107,158 @@ const MyComponent: FC = () => {
 export default MyComponent;
 ```
 
-Questo componente recupera la traduzione corrispondente in base alla locale corrente impostata nella tua applicazione.
+This component fetches the corresponding translation based on the current locale set in your application.
+
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+
+With `next-intlayer`, you can use translations in React Server Components or Client Components. Here's an example in a Client Component:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+"use client";
+
+import type { FC } from "react";
+import { useIntlayer } from "next-intlayer";
+
+const MyComponent: FC = () => {
+  const content = useIntlayer("multi_lang");
+
+  return (
+    <div>
+      <p>{content.welcomeMessage}</p>
+    </div>
+  );
+};
+
+export default MyComponent;
+```
+
+  </Tab>
+  <Tab label="Vue" value="vue">
+
+With `vue-intlayer`, you can use translations in Vue components. Here's an example:
+
+```vue fileName="**/*.vue"
+<script setup lang="ts">
+import { useIntlayer } from "vue-intlayer";
+
+const content = useIntlayer("multi_lang");
+</script>
+
+<template>
+  <div>
+    <p>{{ content.welcomeMessage }}</p>
+  </div>
+</template>
+```
+
+  </Tab>
+  <Tab label="Svelte" value="svelte">
+
+With `svelte-intlayer`, you can use translations in Svelte components. The hook returns a Svelte store. Here's an example:
+
+```svelte fileName="**/*.svelte"
+<script lang="ts">
+import { useIntlayer } from "svelte-intlayer";
+
+const content = useIntlayer("multi_lang");
+</script>
+
+<div>
+  <p>{$content.welcomeMessage}</p>
+</div>
+```
+
+  </Tab>
+  <Tab label="Preact" value="preact">
+
+With `preact-intlayer`, you can use translations in Preact components. Here's an example:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { FC } from "preact";
+import { useIntlayer } from "preact-intlayer";
+
+const MyComponent: FC = () => {
+  const content = useIntlayer("multi_lang");
+
+  return (
+    <div>
+      <p>{content.welcomeMessage}</p>
+    </div>
+  );
+};
+
+export default MyComponent;
+```
+
+  </Tab>
+  <Tab label="Solid" value="solid">
+
+With `solid-intlayer`, you can use translations in SolidJS components. Here's an example:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { Component } from "solid-js";
+import { useIntlayer } from "solid-intlayer";
+
+const MyComponent: Component = () => {
+  const content = useIntlayer("multi_lang");
+
+  return (
+    <div>
+      <p>{content.welcomeMessage}</p>
+    </div>
+  );
+};
+
+export default MyComponent;
+```
+
+  </Tab>
+  <Tab label="Angular" value="angular">
+
+With `angular-intlayer`, you can use translations in Angular components. Here's an example:
+
+```typescript fileName="app.component.ts" codeFormat="typescript"
+import { Component } from "@angular/core";
+import { useIntlayer } from "angular-intlayer";
+
+@Component({
+  selector: "app-my-component",
+  template: `
+    <div>
+      <p>{{ content().welcomeMessage }}</p>
+    </div>
+  `,
+})
+export class MyComponent {
+  content = useIntlayer("multi_lang");
+}
+```
+
+  </Tab>
+  <Tab label="Vanilla JS" value="vanilla">
+
+With `vanilla-intlayer`, you can use translations by subscribing to content changes. Here's an example:
+
+```typescript fileName="**/*.ts" codeFormat={["typescript", "esm"]}
+import { installIntlayer, useIntlayer } from "vanilla-intlayer";
+
+installIntlayer();
+
+const content = useIntlayer("multi_lang").onChange((newContent) => {
+  document.getElementById("welcome-message")!.textContent = String(
+    newContent.welcomeMessage
+  );
+});
+
+// Initial render
+document.getElementById("welcome-message")!.textContent = String(
+  content.welcomeMessage
+);
+```
+
+  </Tab>
+</Tabs>
 
 ## Oggetti di Contenuto Personalizzati
 

package/docs/it/dynamic_dictionaries/collections.md

@@ -14,7 +14,7 @@ slugs:
   - concept
   - collections
 history:
-  - version: 8.13.0
+  - version: 9.0.0
     date: 2026-06-12
     changes: "Rilascio della funzionalità delle collezioni di dizionari"
 author: aymericzip

package/docs/it/dynamic_dictionaries/dynamic_content.md

@@ -15,7 +15,7 @@ slugs:
   - concept
   - dynamic-records
 history:
-  - version: 8.13.0
+  - version: 9.0.0
     date: 2026-06-12
     changes: "Rilascio della funzionalità di contenuto dinamico"
 author: aymericzip

package/docs/it/dynamic_dictionaries/index.md

@@ -15,7 +15,7 @@ slugs:
   - concept
   - dynamic-dictionaries
 history:
-  - version: 8.13.0
+  - version: 9.0.0
     date: 2026-06-12
     changes: "Rilascio della funzionalità dei dizionari dinamici"
 author: aymericzip

package/docs/it/dynamic_dictionaries/variants.md

@@ -15,7 +15,7 @@ slugs:
   - concept
   - variants
 history:
-  - version: 8.13.0
+  - version: 9.0.0
     date: 2026-06-12
     changes: "Rilascio della funzionalità delle varianti di dizionari"
 author: aymericzip

package/docs/it/intlayer_with_vite+react.md

@@ -843,54 +843,6 @@ bun run build # Or bun run dev
 
 </Steps>
 
-### Configurare TypeScript
-
-Intlayer utilizza l'augmentation dei moduli per sfruttare i vantaggi di TypeScript e rendere il tuo codice più robusto.
-
-![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
-
-![Translation error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
-
-Assicurati che la tua configurazione TypeScript includa i tipi generati automaticamente.
-
-```json5 fileName="tsconfig.json"
-{
-  // ... Le tue configurazioni TypeScript esistenti
-  "include": [
-    // ... Le tue configurazioni TypeScript esistenti
-    ".intlayer/**/*.ts", // Includi i tipi generati automaticamente
-  ],
-}
-```
-
-### Configurazione Git
-
-Si consiglia di ignorare i file generati da Intlayer. Questo ti permette di evitare di committarli nel tuo repository Git.
-
-Per farlo, puoi aggiungere le seguenti istruzioni al tuo file `.gitignore`:
-
-```bash
-#  Ignora i file generati da Intlayer
-.intlayer
-```
-
-### Estensione VS Code
-
-Per migliorare la tua esperienza di sviluppo con Intlayer, puoi installare l'estensione ufficiale **Intlayer VS Code Extension**.
-
-[Installa dal Marketplace di VS Code](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
-
-Questa estensione offre:
-
-- **Completamento automatico** per le chiavi di traduzione.
-- **Rilevamento errori in tempo reale** per le traduzioni mancanti.
-- **Anteprime inline** del contenuto tradotto.
-- **Azioni rapide** per creare e aggiornare facilmente le traduzioni.
-
-Per maggiori dettagli su come utilizzare l'estensione, consulta la [documentazione dell'estensione Intlayer per VS Code](https://intlayer.org/doc/vs-code-extension).
-
----
-
 ### (Opzionale) Sitemap e robots.txt (generazione in build)
 
 Intlayer espone utilità - `generateSitemap` e `getMultilingualUrls` - per formattare `sitemap.xml` multilingue e `robots.txt` pronti per i crawler e scriverli automaticamente in `public/`. Di solito si esegue un piccolo script Node **prima** di Vite (ad esempio hook npm `predev` / `prebuild`) così che i file siano presenti in build o in sviluppo.

package/docs/it/migration_from_i18next_to_intlayer.md

@@ -16,7 +16,7 @@ slugs:
   - migration
   - i18next
 history:
-  - version: 8.13.0
+  - version: 9.0.0
     date: 2026-06-05
     changes: "Init history"
 author: aymericzip

package/docs/it/migration_from_next-i18next_to_intlayer.md

@@ -19,7 +19,7 @@ slugs:
   - migration
   - next-i18next
 history:
-  - version: 8.13.0
+  - version: 9.0.0
     date: 2026-06-05
     changes: "Init history"
 author: aymericzip

package/docs/it/migration_from_next-intl_to_intlayer.md

@@ -17,7 +17,7 @@ slugs:
   - migration
   - next-intl
 history:
-  - version: 8.13.0
+  - version: 9.0.0
     date: 2026-06-05
     changes: "Init history"
 author: aymericzip

package/docs/it/migration_from_nuxtjs_i18n_to_intlayer.md

@@ -18,7 +18,7 @@ slugs:
   - migration
   - nuxtjs-i18n
 history:
-  - version: 8.13.0
+  - version: 9.0.0
     date: 2026-06-05
     changes: "Init history"
 author: aymericzip

package/docs/it/migration_from_react-i18next_to_intlayer.md

@@ -18,7 +18,7 @@ slugs:
   - migration
   - react-i18next
 history:
-  - version: 8.13.0
+  - version: 9.0.0
     date: 2026-06-05
     changes: "Init history"
 author: aymericzip

package/docs/it/migration_from_vue-i18n_to_intlayer.md

@@ -17,7 +17,7 @@ slugs:
   - migration
   - vue-i18n
 history:
-  - version: 8.13.0
+  - version: 9.0.0
     date: 2026-06-05
     changes: "Init history"
 author: aymericzip

package/docs/it/releases/v8.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-09-22
-updatedAt: 2026-01-26
+updatedAt: 2026-06-14
 title: Nuovo Intlayer v8 - Novità
 description: Scopri le novità di Intlayer v8. Miglioramenti significativi nella Developer Experience, nella validazione dei contenuti e nella gestione dei dizionari.
 keywords:
@@ -409,6 +409,16 @@ Per maggiori dettagli, consulta la [Documentazione dei contenuti HTML](https://g
 
 ---
 
+## File di contenuto YAML e Markdown (v8.10.0)
+
+Ora puoi dichiarare i contenuti direttamente utilizzando le estensioni di file `.content.md` e `.content.yaml`. Questo è perfetto per contenuti di lunga forma, blog, documentazione e politiche sulla privacy.
+
+Questi file sono completamente modificabili dall'Editor Visuale, fornendo un flusso di lavoro semplificato per i membri del team non tecnici.
+
+Per maggiori dettagli, consulta la [Documentazione sui file di contenuto YAML](https://intlayer.org/doc/concept/content#yaml-content-file) e la [Documentazione sui file di contenuto Markdown](https://intlayer.org/doc/concept/content/markdown).
+
+---
+
 ## Riscritture URL personalizzate
 
 Intlayer v8 introduce il supporto per le **Riscritture URL personalizzate**, che ti permettono di definire percorsi specifici per ogni locale che differiscono dalla struttura standard `/locale/path`. Questa è una funzionalità potente per migliorare la SEO locale e offrire un'esperienza utente più naturale per i parlanti non inglesi.
@@ -753,6 +763,70 @@ export default {
   </Tab>
 </Tabs>
 
+---
+
+## Regole di Pluralizzazione Unicode CLDR (v8.8.0)
+
+È stato introdotto un nuovo helper per nodi `plural` basato sulle regole di pluralizzazione definite dal Progetto Unicode CLDR, migliorando il supporto per le lingue complesse.
+
+```typescript fileName="src/openings.content.ts"
+import { plural, t, type Dictionary } from "intlayer";
+
+const openingsContent = {
+  key: "total_openings",
+  content: {
+    totalOpenings: t({
+      en: plural({
+        one: "{{count}} opening",
+        other: "{{count}} openings",
+      }),
+      fr: plural({
+        one: "{{count}} offre",
+        other: "{{count}} offres",
+      }),
+      it: plural({
+        // Added Italian translation
+        one: "{{count}} offerta",
+        other: "{{count}} offerte",
+      }),
+    }),
+  },
+} satisfies Dictionary;
+
+export default openingsContent;
+```
+
+Puoi quindi passare il conteggio dinamicamente nel componente del tuo framework:
+
+```tsx
+import type { FC } from "react";
+import { useIntlayer } from "react-intlayer";
+
+const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
+  const { totalOpenings } = useIntlayer("total_openings");
+
+  return (
+    <div>
+      {/* In English:                                  */}
+      {/*  count=0  → "0 openings"   (other)           */}
+      {/*  count=1  → "1 opening"    (one)             */}
+      {/*  count=2  → "2 openings"   (other)           */}
+      {/*  count=21 → "21 openings"  (other)           */}
+      {/* In Italian:                                  */}
+      {/*  count=0  → "0 offerte"    (other)           */}
+      {/*  count=1  → "1 offerta"    (one)             */}
+      {/*  count=2  → "2 offerte"    (other)           */}
+      {/*  count=21 → "21 offerte"   (other)           */}
+      <p>{totalOpenings(count)}</p>
+    </div>
+  );
+};
+```
+
+Per maggiori informazioni, consulta la [Documentazione sulla Pluralizzazione](https://intlayer.org/doc/concept/content/plural).
+
+---
+
 ## Validazione dello schema di contenuto
 
 Intlayer v8 introduce la validazione degli schemi per i dizionari. Ora puoi definire schemi di validazione riutilizzabili nella tua configurazione utilizzando Zod e applicarli ai tuoi file di contenuto. Questo garantisce che i tuoi contenuti rispettino sempre la struttura prevista, intercettando gli errori in fase di build.
@@ -797,9 +871,37 @@ Se il contenuto non corrisponde allo schema (ad esempio, il titolo è troppo cor
 
 ---
 
+## TypeScript: Accessori Primitivi IntlayerNode
+
+Il tipo `IntlayerNode` è stato aggiornato per consentire di chiamare metodi JavaScript primitivi direttamente sui nodi di contenuto. Questo rende possibile interagire con il tuo contenuto localizzato direttamente come se fosse una stringa, un numero, un booleano o un array primitivo standard.
+
+Supportato su React, Preact, Solid, Svelte, Vue e Angular.
+
+### Esempio Stringa
+
+```typescript
+content.placeholder; // Restituisce IntlayerNode<string>
+content.placeholder.value; // Restituisce stringa
+content.placeholder.toString(); // Restituisce stringa
+content.placeholder.toLowerCase(); // Restituisce stringa
+String(content.placeholder); // Restituisce stringa
+content.placeholder.toUpperCase(); // Restituisce stringa in maiuscolo
+content.placeholder.replace("a", "b"); // Restituisce stringa modificata
+```
+
+### Esempio Array
+
+```typescript
+content.myArrayOfString             // Restituisce IntlayerNode<Array<string>>
+content.myArrayOfString.find(...)   // Restituisce elemento
+content.myArrayOfString.join(', ')  // Restituisce stringa unita
+```
+
+---
+
 ### Rilevamento automatico del contenuto potenziato
 
-Nella v8, Intlayer rileva in modo intelligente la sintassi Markdown, i tag HTML e le inserzioni di variabili nelle stringhe di contenuto. Questo significa che spesso puoi omettere funzioni helper come `md()`, `html()` o `insert()`.
+Nella v8, Intlayer rileva in modo intelligente la sintassi Markdown, i tag HTML e le inserzioni di variabili nelle stringhe di contenuto. Questo significa che spesso puoi omettere funzioni helper come `md()`, `html()`, o `insert()`.
 
 Questo comportamento è abilitato per impostazione predefinita. Ora puoi perfezionare questo rilevamento globalmente nel tuo `intlayer.config.ts` o per singolo dizionario.
 
@@ -1002,6 +1104,17 @@ L'estensione Intlayer per VSCode riceve aggiornamenti importanti nella v8 per se
 
 ---
 
+## Tooling: C++ Watcher & LSP basato su OXC (v8.12.0)
+
+Intlayer v8.12.0 apporta importanti miglioramenti alla developer experience:
+
+- **Parcel Watcher**: Il watcher dei contenuti è stato migrato da `chokidar` a `@parcel/watcher`, sfruttando il file watching nativo in C++ per fornire aggiornamenti più rapidi e un consumo di memoria significativamente inferiore.
+- **Nuovo Language Server Protocol (LSP)**: È ora disponibile un LSP completamente nuovo. Costruito con parsing basato su OXC, aiuta il tuo IDE e gli agenti AI a collegare senza soluzione di continuità le chiamate `useIntlayer('my-key')` con i loro file `.content` corrispondenti, e viceversa.
+
+Per maggiori dettagli, consulta la [Documentazione LSP](https://intlayer.org/doc/lsp).
+
+---
+
 ## Ottimizzazioni del compilatore
 
 Intlayer v8 include un nuovo layer di caching per il compilatore Markdown e HTML. Questo garantisce che stringhe di contenuto identiche con la stessa configurazione vengano analizzate solo una volta, riducendo significativamente l'overhead durante i re-render o quando lo stesso contenuto è utilizzato in più punti.
@@ -1057,6 +1170,48 @@ Intlayer v8 include un nuovo layer di caching per il compilatore Markdown e HTML
 
 ---
 
+## Ottimizzazioni sperimentali della build: Minify & Purge (v8.7.0)
+
+Intlayer v8.7.0 introduce nuove funzionalità di build sperimentali nel tuo `intlayer.config.ts` progettate per ottimizzare il tuo bundle di produzione:
+
+- **Minificazione del dizionario**: Minifica i file del dizionario per ridurne le dimensioni.
+- **Pulizia delle chiavi inutilizzate**: Scansiona e rimuove le chiavi di traduzione inutilizzate dai dizionari, rinominando le chiavi attive con caratteri brevi (es. `"products" -> "a"`, `"pricing" -> "b"`). Questo riduce le dimensioni del bundle fino al 5%.
+- **Disabilita i controlli TypeScript**: Accelera le build disabilitando il controllo dei tipi TypeScript durante la fase di compilazione.
+
+```typescript fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH],
+    defaultLocale: Locales.ENGLISH,
+  },
+  dictionary: {
+    importMode: "dynamic",
+  },
+  build: {
+    /**
+     * Minify the dictionaries to reduce the bundle size.
+     */
+    minify: true,
+
+    /**
+     * Purge the unused keys in dictionaries
+     */
+    purge: true,
+
+    /**
+     * Indicates if the build should check TypeScript types
+     */
+    checkTypes: false,
+  },
+};
+
+export default config;
+```
+
+---
+
 ## Flessibilità: Modalità di importazione unificata
 
 La proprietà booleana `live` è stata deprecata a favore di una proprietà più completa, `importMode`. Questo consente di definire esplicitamente come devono essere caricati i dizionari: staticamente, dinamicamente o tramite sincronizzazione live.
@@ -1204,6 +1359,49 @@ Il contenuto Markdown e HTML in Svelte ora viene automaticamente convertito in H
 
 ---
 
+## Supporto Angular: Vite Bundler (v8.11.0)
+
+Per gli utenti Angular, Intlayer ora supporta nativamente il bundler Vite tramite un nuovo plugin esbuild personalizzato, accelerando i tempi di sviluppo e di build.
+
+Per i dettagli sulla configurazione, consulta la [Documentazione dell'ambiente Angular](https://intlayer.org/doc/environment/angular).
+
+---
+
+## Generazione della Sitemap (v8.6.0)
+
+Intlayer ora genera automaticamente le sitemap in base alle tue locali e alla modalità di routing. Questo è particolarmente utile per l'ottimizzazione SEO in architetture di router come TanStack Router:
+
+```typescript fileName="src/routes/sitemap.xml.ts"
+import { createFileRoute } from "@tanstack/react-router";
+import { generateSitemap } from "intlayer";
+
+const SITE_URL = (
+  import.meta.env.VITE_SITE_URL ?? "http://localhost:3000"
+).replace(/\/$/, "");
+
+export const Route = createFileRoute("/sitemap.xml")({
+  server: {
+    handlers: {
+      GET: async () => {
+        const sitemap = generateSitemap(
+          [
+            { path: "/", changefreq: "daily", priority: 1.0 },
+            { path: "/about", changefreq: "monthly", priority: 0.8 },
+          ],
+          { siteUrl: SITE_URL }
+        );
+
+        return new Response(sitemap, {
+          headers: { "Content-Type": "application/xml" },
+        });
+      },
+    },
+  },
+});
+```
+
+---
+
 ## Note di migrazione dalla v7
 
 ### Modifiche alla configurazione