@intlayer/docs 8.11.2 → 8.12.0-canary.0

package/docs/it/intlayer_with_vanilla.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-03-31
-updatedAt: 2026-05-06
-title: i18n Vanilla JS - Come tradurre un'app Vanilla JS nel 2026
-description: Scopri come rendere multilingue il tuo sito web Vanilla JS. Segui la documentazione per internazionalizzarlo (i18n) e tradurlo.
+updatedAt: 2026-05-31
+title: "Vanilla JS i18n - Guida completa per tradurre la tua applicazione"
+description: "Niente più i18next. La guida 2026 per creare un'applicazione Vanilla JS multilingue (i18n). Traduci con agenti AI e ottimizza la dimensione del bundle, SEO e prestazioni."
 keywords:
   - Internazionalizzazione
   - Documentazione
@@ -57,28 +57,62 @@ history:
 
 <TOC/>
 
-## Cos'è Intlayer?
+## Perché Intlayer rispetto alle alternative?
 
-**Intlayer** è un'innovativa libreria di internazionalizzazione (i18n) open-source progettata per semplificare il supporto multilingue nelle moderne applicazioni web.
+Rispetto alle soluzioni principali come `i18next` o `i18n.js`, Intlayer è una soluzione dotata di ottimizzazioni integrate come:
 
-Con Intlayer, puoi:
+<AccordionGroup>
 
-- **Gestire facilmente le traduzioni** utilizzando dizionari dichiarativi a livello di componente.
-- **Localizzare dinamicamente metadati**, rotte e contenuti.
-- **Garantire il supporto TypeScript** con tipi autogenerati, migliorando l'autocompletamento e il rilevamento degli errori.
-- **Beneficiare di funzionalità avanzate**, come il rilevamento e il cambio dinamico della lingua.
+<Accordion header="Copertura completa Vanilla JS">
 
-Questa guida dimostra come utilizzare Intlayer in un'applicazione Vanilla JavaScript **senza utilizzare un gestore di pacchetti o un bundler** (come Vite, Webpack, ecc.).
+Intlayer è ottimizzato per funzionare perfettamente con Vanilla JavaScript offrendo **gestione dei contenuti indipendente dal framework**, **supporto TypeScript** e tutte le funzionalità necessarie per scalare l'internazionalizzazione (i18n).
 
-Se la tua applicazione utilizza un bundler (come Vite), ti consigliamo di seguire la [Guida Vite + Vanilla JS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_with_vite+vanilla.md) invece.
+</Accordion>
 
-Utilizzando il bundle standalone, puoi importare Intlayer direttamente nei tuoi file HTML tramite un singolo file JavaScript, rendendolo perfetto per progetti legacy o semplici siti statici.
+<Accordion header="Dimensione del bundle">
+
+Invece di caricare enormi file JSON nelle tue pagine, carica solo il contenuto necessario. Intlayer aiuta a **ridurre le dimensioni del bundle e della pagina fino al 50%**.
+
+</Accordion>
+
+<Accordion header="Manutenibilità">
+
+L'ambito del contenuto dell'applicazione **facilita la manutenzione** per applicazioni su larga scala. Puoi duplicare o eliminare una singola cartella di funzionalità senza l'onere mentale di rivedere l'intera codebase dei contenuti. Inoltre, Intlayer è **completamente tipizzato (fully typed)** per garantire l'accuratezza dei tuoi contenuti.
+
+</Accordion>
+
+<Accordion header="Agente IA">
+
+La co-localizzazione dei contenuti **riduce il contesto necessario** dai Large Language Models (LLM). Intlayer viene fornito anche con una suite di strumenti, come una **CLI** per verificare le traduzioni mancanti,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** e **[capacità dell'agente](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, per rendere l'esperienza dello sviluppatore (DX) ancora più fluida per gli agenti IA.
+
+</Accordion>
+
+<Accordion header="Automazione">
+
+Utilizza l'automazione per tradurre nella tua pipeline CI/CD utilizzando il LLM di tua scelta al costo del tuo provider di intelligenza artificiale. Intlayer offre anche un **compilatore** per automatizzare l'estrazione dei contenuti, nonché una [piattaforma web](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) per aiutare a **tradurre in background**.
+
+</Accordion>
+
+<Accordion header="Prestazione">
+
+La connessione di enormi file JSON ai componenti può portare a problemi di prestazioni e reattività. Intlayer ottimizza il caricamento dei contenuti in fase di compilazione.
+
+</Accordion>
+
+<Accordion header="Scalabilità con nessuno sviluppatore">
+
+Più di una semplice soluzione i18n, Intlayer fornisce un **[editor visivo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** self-hosted e un **[CMS completo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** per aiutarti gestisci i tuoi contenuti multilingue in **tempo reale**, semplificando la collaborazione con traduttori, copywriter e altri membri del team. I contenuti possono essere archiviati localmente e/o in remoto.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
 ## Guida passo-passo per configurare Intlayer in un'applicazione Vanilla JS
 
-### Passaggio 1: Installazione delle dipendenze
+<Steps>
+
+<Step number={1} title="Installazione delle dipendenze">
 
 Installa i pacchetti necessari utilizzando npm:
 
@@ -138,7 +172,9 @@ bun x intlayer build
 
 > L'esportazione del raggruppamento (bundling) della CLI `intlayer standalone` produce una build ottimizzata mediante il tree-shaking dei pacchetti non utilizzati, delle lingue e della logica non essenziale (come reindirizzamenti o prefissi) specifica per la tua configurazione.
 
-### Passaggio 2: Configurazione del progetto
+</Step>
+
+<Step number={2} title="Configurazione del progetto">
 
 Crea un file di configurazione per configurare le lingue della tua applicazione:
 
@@ -162,7 +198,9 @@ export default config;
 
 > Attraverso questo file di configurazione, puoi impostare URL localizzati, reindirizzamento middleware, nomi dei cookie, la posizione e l'estensione delle tue dichiarazioni di contenuto, disabilitare i log di Intlayer nella console e altro ancora. Per un elenco completo dei parametri disponibili, fai riferimento alla [documentazione di configurazione](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/configuration.md).
 
-### Passaggio 3: Importare il bundle nel tuo HTML
+</Step>
+
+<Step number={3} title="Importare il bundle nel tuo HTML">
 
 Una volta generato il bundle `intlayer.js`, puoi importarlo nel tuo file HTML:
 
@@ -186,7 +224,9 @@ Una volta generato il bundle `intlayer.js`, puoi importarlo nel tuo file HTML:
 
 Il bundle espone `Intlayer` e `VanillaIntlayer` come oggetti globali su `window`.
 
-### Passaggio 4: Bootstrap Intlayer nel tuo punto di ingresso
+</Step>
+
+<Step number={4} title="Bootstrap Intlayer nel tuo punto di ingresso">
 
 Nel tuo `src/main.js`, chiama `installIntlayer()` **prima** che venga renderizzato qualsiasi contenuto, in modo che il singleton globale della lingua sia pronto.
 
@@ -206,7 +246,9 @@ installIntlayer();
 installIntlayerMarkdown();
 ```
 
-### Passaggio 5: Dichiarare il Contenuto
+</Step>
+
+<Step number={5} title="Dichiarare il Contenuto">
 
 Crea e gestisci le tue dichiarazioni di contenuto per memorizzare le traduzioni:
 
@@ -284,7 +326,9 @@ export default appContent;
 >
 > Per maggiori dettagli, fai riferimento alla [documentazione sulla dichiarazione dei contenuti](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/dictionary/content_file.md).
 
-### Passaggio 6: Utilizzare Intlayer nel tuo JavaScript
+</Step>
+
+<Step number={6} title="Utilizzare Intlayer nel tuo JavaScript">
 
 L'oggetto `window.VanillaIntlayer` fornisce helper API: `useIntlayer(key, locale?)` restituisce il contenuto tradotto per una data chiave.
 
@@ -318,7 +362,9 @@ document.querySelector(".read-the-docs").textContent = String(
 > img.alt = content.viteLogoLabel.value;
 > ```
 
-### (Opzionale) Passaggio 7: Cambiare la lingua del tuo contenuto
+</Step>
+
+<Step number={7} title="Cambiare la lingua del tuo contenuto" isOptional={true}>
 
 Per cambiare la lingua del tuo contenuto, usa la funzione `setLocale` esposta da `useLocale`.
 
@@ -353,7 +399,9 @@ export function setupLocaleSwitcher(container) {
 }
 ```
 
-### (Opzionale) Passaggio 8: Cambiare gli attributi HTML di lingua e direzione
+</Step>
+
+<Step number={8} title="Cambiare gli attributi HTML di lingua e direzione" isOptional={true}>
 
 Aggiorna gli attributi `lang` e `dir` del tag `<html>` per corrispondere alla lingua corrente per l'accessibilità e la SEO.
 
@@ -371,7 +419,9 @@ useLocale({
 });
 ```
 
-### (Opzionale) Passaggio 9: Caricamento lazy dei dizionari per lingua
+</Step>
+
+<Step number={9} title="Caricamento lazy dei dizionari per lingua" isOptional={true}>
 
 Se desideri caricare i dizionari in modo lazy per lingua, puoi usare `useDictionaryDynamic`. Questo è utile se non vuoi raggruppare tutte le traduzioni nel file iniziale `intlayer.js`.
 
@@ -393,6 +443,9 @@ const unsubscribe = useDictionaryDynamic(
 ```
 
 > Nota: `useDictionaryDynamic` richiede che i dizionari siano disponibili come file ESM separati. Questo approccio viene in genere utilizzato se si dispone di un server web che serve i dizionari.
+> </Step>
+
+</Steps>
 
 ### Configurare TypeScript
 

package/docs/it/intlayer_with_vite+lit.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-03-23
-updatedAt: 2026-05-06
-title: i18n Vite + Lit - Come tradurre un'app Lit nel 2026
-description: Scopri come rendere multilingue il tuo sito web Vite e Lit. Segui la documentazione per internazionalizzarlo (i18n) e tradurlo.
+updatedAt: 2026-05-31
+title: "Vite + Lit i18n - Guida completa per tradurre la tua applicazione"
+description: "Niente più i18next. La guida 2026 per creare un'applicazione Vite + Lit multilingue (i18n). Traduci con agenti AI e ottimizza la dimensione del bundle, SEO e prestazioni."
 keywords:
   - Internazionalizzazione
   - Documentazione
@@ -57,22 +57,62 @@ history:
 
 <TOC/>
 
-## Cos'è Intlayer?
+## Perché Intlayer rispetto alle alternative?
 
-**Intlayer** è un'innovativa libreria di internazionalizzazione (i18n) open-source progettata per semplificare il supporto multilingue nelle moderne applicazioni web.
+Rispetto alle soluzioni principali come `lit-localize` o `i18next`, Intlayer è una soluzione dotata di ottimizzazioni integrate come:
 
-Con Intlayer, puoi:
+<AccordionGroup>
 
-- **Gestire facilmente le traduzioni** utilizzando dizionari dichiarativi a livello di componente.
-- **Localizzare dinamicamente metadati**, rotte e contenuti.
-- **Garantire il supporto TypeScript** con tipi autogenerati, migliorando l'autocompletamento e il rilevamento degli errori.
-- **Beneficiare di funzionalità avanzate**, come il rilevamento e la commutazione dinamica della lingua.
+<Accordion header="Copertura completamente illuminata">
+
+Intlayer è ottimizzato per funzionare perfettamente con Lit offrendo **ambito del contenuto a livello di componente Web**, **supporto TypeScript** e tutte le funzionalità necessarie per ridimensionare l'internazionalizzazione (i18n).
+
+</Accordion>
+
+<Accordion header="Dimensione del bundle">
+
+Invece di caricare enormi file JSON nelle tue pagine, carica solo il contenuto necessario. Intlayer aiuta a **ridurre le dimensioni del bundle e della pagina fino al 50%**.
+
+</Accordion>
+
+<Accordion header="Manutenibilità">
+
+L'ambito del contenuto dell'applicazione **facilita la manutenzione** per applicazioni su larga scala. Puoi duplicare o eliminare una singola cartella di funzionalità senza l'onere mentale di rivedere l'intera codebase dei contenuti. Inoltre, Intlayer è **completamente tipizzato (fully typed)** per garantire l'accuratezza dei tuoi contenuti.
+
+</Accordion>
+
+<Accordion header="Agente IA">
+
+La co-localizzazione dei contenuti **riduce il contesto necessario** dai Large Language Models (LLM). Intlayer viene fornito anche con una suite di strumenti, come una **CLI** per verificare le traduzioni mancanti,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** e **[capacità dell'agente](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, per rendere l'esperienza dello sviluppatore (DX) ancora più fluida per gli agenti IA.
+
+</Accordion>
+
+<Accordion header="Automazione">
+
+Utilizza l'automazione per tradurre nella tua pipeline CI/CD utilizzando il LLM di tua scelta al costo del tuo provider di intelligenza artificiale. Intlayer offre anche un **compilatore** per automatizzare l'estrazione dei contenuti, nonché una [piattaforma web](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) per aiutare a **tradurre in background**.
+
+</Accordion>
+
+<Accordion header="Prestazione">
+
+La connessione di enormi file JSON ai componenti può portare a problemi di prestazioni e reattività. Intlayer ottimizza il caricamento dei contenuti in fase di compilazione.
+
+</Accordion>
+
+<Accordion header="Scalabilità con nessuno sviluppatore">
+
+Più di una semplice soluzione i18n, Intlayer fornisce un **[editor visivo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** self-hosted e un **[CMS completo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** per aiutarti gestisci i tuoi contenuti multilingue in **tempo reale**, semplificando la collaborazione con traduttori, copywriter e altri membri del team. I contenuti possono essere archiviati localmente e/o in remoto.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
 ## Guida passo-passo per configurare Intlayer in un'applicazione Vite e Lit
 
-### Passaggio 1: Installare le dipendenze
+<Steps>
+
+<Step number={1} title="Installare le dipendenze">
 
 Installa i pacchetti necessari utilizzando npm:
 
@@ -110,7 +150,9 @@ bun x intlayer init
 - **vite-intlayer**
   Include il plugin Vite per integrare Intlayer con il [bundler Vite](https://vite.dev/guide/why.html#why-bundle-for-production), oltre al middleware per rilevare la lingua preferita dell'utente, gestire i cookie e gestire il reindirizzamento degli URL.
 
-### Passaggio 2: Configurazione del progetto
+</Step>
+
+<Step number={2} title="Configurazione del progetto">
 
 Crea un file di configurazione per impostare le lingue della tua applicazione:
 
@@ -134,7 +176,9 @@ export default config;
 
 > Attraverso questo file di configurazione, puoi impostare URL localizzati, reindirizzamento middleware, nomi dei cookie, la posizione e l'estensione delle tue dichiarazioni di contenuto, disabilitare i log di Intlayer nella console e altro ancora. Per un elenco completo dei parametri disponibili, consulta la [documentazione sulla configurazione](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/configuration.md).
 
-### Passaggio 3: Integrare Intlayer nella configurazione di Vite
+</Step>
+
+<Step number={3} title="Integrare Intlayer nella configurazione di Vite">
 
 Aggiungi il plugin intlayer nella tua configurazione.
 
@@ -150,7 +194,9 @@ export default defineConfig({
 
 > Il plugin Vite `intlayer()` viene utilizzato per integrare Intlayer con Vite. Garantisce la creazione dei file di dichiarazione dei contenuti e li monitora in modalità di sviluppo. Definisce le variabili d'ambiente Intlayer all'interno dell'applicazione Vite. Inoltre, fornisce alias per ottimizzare le prestazioni.
 
-### Passaggio 4: Bootstrap di Intlayer nel tuo punto di ingresso
+</Step>
+
+<Step number={4} title="Bootstrap di Intlayer nel tuo punto di ingresso">
 
 Chiama `installIntlayer()` **prima** che vengano registrati elementi personalizzati, in modo che il singleton globale della lingua sia pronto quando il primo elemento si connette.
 
@@ -175,7 +221,9 @@ installIntlayerMarkdown();
 import "./my-element.js";
 ```
 
-### Passaggio 5: Dichiarare il contenuto
+</Step>
+
+<Step number={5} title="Dichiarare il contenuto">
 
 Crea e gestisci le tue dichiarazioni di contenuto per memorizzare le traduzioni:
 
@@ -261,7 +309,9 @@ export default appContent;
 >
 > Per ulteriori dettagli, consulta la [documentazione sulla dichiarazione dei contenuti](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/dictionary/content_file.md).
 
-### Passaggio 6: Utilizzare Intlayer nel tuo LitElement
+</Step>
+
+<Step number={6} title="Utilizzare Intlayer nel tuo LitElement">
 
 Usa `useIntlayer` all'interno di un `LitElement`. Restituisce un proxy `ReactiveController` che attiva automaticamente i re-render ogni volta che la lingua attiva cambia: non è richiesta alcuna configurazione aggiuntiva.
 
@@ -306,7 +356,9 @@ export class MyElement extends LitElement {
 > html`<img alt=${String(content.viteLogo)} />`;
 > ```
 
-### (Opzionale) Passaggio 7: Cambiare la lingua del contenuto
+</Step>
+
+<Step number={7} title="Cambiare la lingua del contenuto" isOptional={true}>
 
 Per cambiare la lingua del contenuto, usa il metodo `setLocale` esposto dal controller `useLocale`.
 
@@ -341,7 +393,9 @@ export class LocaleSwitcher extends LitElement {
 }
 ```
 
-### (Opzionale) Passaggio 8: Renderizzare contenuti Markdown e HTML
+</Step>
+
+<Step number={8} title="Renderizzare contenuti Markdown e HTML" isOptional={true}>
 
 Intlayer supporta le dichiarazioni di contenuto `md()` e `html()`. In Lit, l'output compilato viene iniettato come HTML grezzo tramite la direttiva `unsafeHTML`.
 
@@ -391,7 +445,9 @@ export class MyElement extends LitElement {
 > [!TIP]
 > `String(content.editNote)` chiama `toString()` sull'`IntlayerNode`, che restituisce la stringa Markdown grezza. Passala a `compileMarkdown` per ottenere una stringa HTML, quindi caricala con la direttiva `unsafeHTML` di Lit.
 
-### (Opzionale) Passaggio 9: Aggiungere il routing localizzato alla tua applicazione
+</Step>
+
+<Step number={9} title="Aggiungere il routing localizzato alla tua applicazione" isOptional={true}>
 
 Per creare rotte uniche per ogni lingua (utile per la SEO), puoi utilizzare un router lato client insieme agli helper `localeMap` / `localeFlatMap` di Intlayer e al plugin Vite `intlayerProxy` per il rilevamento della lingua lato server.
 
@@ -411,7 +467,9 @@ export default defineConfig({
 });
 ```
 
-### (Opzionale) Passaggio 10: Cambiare l'URL quando la lingua cambia
+</Step>
+
+<Step number={10} title="Cambiare l'URL quando la lingua cambia" isOptional={true}>
 
 Per aggiornare l'URL del browser quando la lingua cambia, utilizza `useRewriteURL` insieme al selettore di lingua:
 
@@ -449,7 +507,9 @@ export class LocaleSwitcher extends LitElement {
 }
 ```
 
-### (Opzionale) Passaggio 11: Commutare gli attributi di lingua e direzione HTML
+</Step>
+
+<Step number={11} title="Commutare gli attributi di lingua e direzione HTML" isOptional={true}>
 
 Aggiorna gli attributi `lang` e `dir` del tag `<html>` per farli corrispondere alla lingua corrente per l'accessibilità e la SEO.
 
@@ -474,7 +534,9 @@ export class MyElement extends LitElement {
 }
 ```
 
-### (Opzionale) Passaggio 12: Estrarre il contenuto dei tuoi componenti
+</Step>
+
+<Step number={12} title="Estrarre il contenuto dei tuoi componenti" isOptional={true}>
 
 Se hai una base di codice esistente, trasformare migliaia di file può richiedere molto tempo.
 
@@ -514,6 +576,10 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
+</Step>
+
+</Steps>
+
 ### (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.