Traduzioni dei File di Dichiarazione del Contenuto con Compilazione Automatica

I file di dichiarazione del contenuto con compilazione automatica sono un modo per velocizzare il tuo flusso di lavoro di sviluppo.

Il meccanismo di compilazione automatica funziona attraverso una relazione master-slave tra i file di dichiarazione dei contenuti. Quando il file principale (master) viene aggiornato, Intlayer applicherà automaticamente tali modifiche ai file di dichiarazione derivati (compilati automaticamente).

import { Locales, type Dictionary } from "intlayer";const exampleContent = {  key: "example",  locale: Locales.ENGLISH,  autoFill: "./example.content.json",  content: {    contentExample: "Questo è un esempio di contenuto", // esempio di contenuto  },} satisfies Dictionary;export default exampleContent;

Ecco un file di dichiarazione dei contenuti per locale che utilizza l'istruzione autoFill.

Quindi, quando esegui il seguente comando:

npx intlayer fill --file 'src/components/example/example.content.ts'

Intlayer genererà automaticamente il file di dichiarazione derivato in src/components/example/example.content.json, compilando tutte le localizzazioni non già dichiarate nel file principale.

{  "key": "example",  "content": {    "contentExample": {      "nodeType": "translation",      "translation": {        "fr": "Ceci est un exemple de contenu",        "es": "Este es un ejemplo de contenido",      },    },  },}

Successivamente, entrambi i file di dichiarazione saranno uniti in un unico dizionario, accessibile tramite il consueto hook useIntlayer("example") (react) / composable (vue).

Formato del File Compilato Automaticamente

Il formato consigliato per i file di dichiarazione compilati automaticamente è JSON, che aiuta a evitare vincoli di formattazione. Tuttavia, Intlayer supporta anche i formati .ts, .js, .mjs, .cjs e altri.

const exampleContent = {  key: "example",  autoFill: "./example.filled.content.ts",  content: {    // Il tuo contenuto  },};

Questo genererà il file in:

src/components/example/example.filled.content.ts

La generazione dei file .js, .ts e simili funziona come segue:

• Se il file esiste già, Intlayer lo analizzerà usando l'AST (Abstract Syntax Tree) per individuare ogni campo e inserire eventuali traduzioni mancanti.
• Se il file non esiste, Intlayer lo genererà utilizzando il modello predefinito di file di dichiarazione del contenuto.

Percorsi Assoluti

Il campo autoFill supporta anche percorsi assoluti.

const exampleContent = {  key: "example",  autoFill: "/messages/example.content.json",  content: {    // Il tuo contenuto  },};

Questo genererà il file in:

/messages/example.content.json

Generazione Automatica di File di Dichiarazione Contenuti Per Locale

Il campo autoFill supporta anche la generazione di file di dichiarazione contenuti per locale.

const exampleContent = {  key: "example",  autoFill: {    fr: "./example.fr.content.json",    es: "./example.es.content.json",  },  content: {    // Il tuo contenuto  },};

Questo genererà due file separati:

• src/components/example/example.fr.content.json
• src/components/example/example.es.content.json

In questo caso, se l'oggetto non contiene tutte le localizzazioni, Intlayer salta la generazione delle localizzazioni rimanenti.

Filtrare l'Autocompletamento per Localizzazione Specifica

Usare un oggetto per il campo autoFill permette di applicare filtri e generare solo file di localizzazione specifici.

const exampleContent = {  key: "example",  autoFill: {    fr: "./example.fr.content.json",  },  content: {    // Il tuo contenuto  },};

Questo genererà solo il file di traduzione in francese.

Variabili di Percorso

Puoi usare variabili all'interno del percorso autoFill per risolvere dinamicamente i percorsi di destinazione per i file generati.

Variabili disponibili:

• {{locale}} – Codice della localizzazione (es. fr, es)
• {{fileName}} – Nome del file (es. index)
• {{key}} – Chiave del dizionario (es. example)

const exampleContent = {  key: "example",  autoFill: "/messages/{{locale}}/{{key}}.content.json",  content: {    // Il tuo contenuto  },};

Questo genererà:

• /messages/fr/example.content.json
• /messages/es/example.content.json

const exampleContent = {  key: "example",  autoFill: "./{{fileName}}.content.json",  content: {    // Il tuo contenuto  },};

Questo genererà:

• ./index.content.json
• ./index.content.json