Intlayer v6 Baru - Apa yang Baru?

Selamat datang di Intlayer v6! Rilis ini fokus pada performa, pengalaman pengembang, dan keandalan. Berikut adalah sorotan utama, dengan catatan migrasi dan contoh yang bisa langsung disalin-tempel.

Sorotan

• Perintah baru: npx intlayer content test untuk mendeteksi terjemahan yang hilang
• Opsi global baru autoFill untuk menghasilkan terjemahan yang hilang secara otomatis
• Perintah Fill secara default melewati terjemahan yang sudah ada: npx intlayer fill
• Ekstensi VS Code: Intlayer Activity Bar baru (Pencarian & Kamus), toolbar/aksi konteks, auto-reveal, perintah Fill/Test
• Build 10× lebih cepat berkat paralelisasi promise
• Caching kamus jarak jauh untuk menghindari pengambilan ulang saat aplikasi mulai
• Logging yang ditingkatkan: atur log.mode: 'verbose' untuk memeriksa perilaku
• Validasi lebih kuat untuk mencegah aplikasi crash akibat masalah kamus
• Pembaruan langsung dengan CMS menggunakan build.importMode = 'live' dan pnpm intlayer live
• Perbaikan: integrasi Vue.js, adaptor Lynx, Visual Editor di Windows

Baru: Uji terjemahan yang hilang

Audit proyek Anda dengan cepat untuk menemukan kunci/lokal yang hilang.

npx intlayer content test

Output:

pnpm intlayer content testTerjemahan yang hilang: - blog-data       - Jepang (ja), Korea (ko), Cina (zh), Jerman (de), Italia (it) - src/components/BlogPage/blogData.content.ts - demo-page       - Prancis (fr), Italia (it)                                         - src/components/DemoPage/demo.content.ts - locale-switcher - Italia (it), Portugis (pt)                                       - src/components/LocaleSwitcher/localeSwitcher.content.tsLocales: Inggris (en), Rusia (ru), Jepang (ja), Prancis (fr), Korea (ko), Cina (zh), Spanyol (es), Jerman (de), Arab (ar), Italia (it), Inggris Britania (en-GB), Portugis (pt), Hindi (hi)Required locales: Inggris (en)Terjemahan yang hilang: Jepang (ja), Korea (ko), Cina (zh), Jerman (de), Italia (it), Prancis (fr), Portugis (pt)Terjemahan wajib yang hilang: -Total terjemahan yang hilang: 7Total terjemahan wajib yang hilang: 0

Lihat lebih banyak opsi di dokumen CLI: Referensi CLI → "Test missing translations". Serta panduan Testing.

Baru: autoFill global untuk melengkapi terjemahan yang hilang

Anda sekarang dapat mengaktifkan auto-fill secara global sehingga kamus apa pun dengan terjemahan yang hilang akan dilengkapi secara otomatis.

import { type IntlayerConfig, Locales } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,    requiredLocales: [Locales.ENGLISH, Locales.FRENCH],  },  content: {    // Menghasilkan terjemahan yang hilang secara otomatis untuk semua kamus    autoFill: "./{{fileName}}Filled.content.ts",    //    // autoFill: "/messages/{{locale}}/{{key}}/{{fileName}}.content.json",    //    // autoFill: true, // menghasilkan terjemahan yang hilang secara otomatis untuk semua kamus seperti menggunakan "./{{fileName}}.content.json"    //    // autoFill: {    //   en: "./{{fileName}}.en.content.json",    //   fr: "./{{fileName}}.fr.content.json",    //   es: "./{{fileName}}.es.content.json",    // },  },};export default config;

Isi otomatis terjemahan yang hilang menggunakan perintah npx intlayer fill.

Anda masih dapat menyempurnakan per kamus menggunakan field autoFill dalam file konten. Intlayer akan terlebih dahulu mempertimbangkan konfigurasi per kamus dan kemudian menggunakan konfigurasi global sebagai cadangan. Lihat referensi lengkap di Isi Otomatis dan Referensi file konten.

Perintah Fill: pengaturan default yang lebih aman

Perintah fill sekarang, secara default, hanya mengisi terjemahan yang hilang dan melewati konten yang sudah ada.

npx intlayer fill

Kunci kamus yang terpengaruh untuk diproses: access-key-creation-form-schema, doc-search-metadata, doc-search-page  - [access-key-creation-form-schema]      Kamus tidak memiliki jalur file. Melewati.  - [access-key-creation-form-schema]      Memproses deklarasi konten: src/components/Dashboard/ProjectForm/AccessKey/useAccessKeyCreationFormSchema.content.ts  - [access-key-creation-form-schema]      Tidak ada locale yang perlu diisi - Melewati kamus  - [doc-search-metadata]                  Kamus tidak memiliki jalur file. Melewati.  - [doc-search-metadata]                  Memproses deklarasi konten: src/app/[locale]/(docs)/doc/search/metadata.content.ts  - [doc-search-metadata]                  Tidak ada locale yang perlu diisi - Melewati kamus  - [doc-search-page]                      Kamus tidak memiliki jalur file. Melewati.  - [doc-search-page]                      Memproses deklarasi konten: src/app/[locale]/(docs)/doc/search/page.content.ts  - [doc-search-page]                     [Russian (ru)]                   Mempersiapkan terjemahan untuk kamus dari Bahasa Inggris (en) ke Bahasa Rusia (ru)[intlayer]  Menerapkan format Prettier ke src/app/[locale]/(docs)/doc/search/page.content.ts  - [doc-search-page]                      Deklarasi konten ditulis ke src/app/[locale]/(docs)/doc/search/page.content.ts

Contoh CI tersedia di CI/CD.

Ekstensi VS Code yang Diperbarui

Ekstensi sekarang menyertakan tab Intlayer khusus di Activity Bar dan beberapa peningkatan alur kerja:

• Activity Bar Intlayer dengan dua tampilan:
  • Tampilan web pencarian untuk pencarian kamus/konten secara langsung
  • Daftar pohon Kamus yang menampilkan lingkungan, kamus, dan file kontributor
• Toolbar pada tampilan Kamus: Build, Pull, Push, Fill, Refresh, Test, Buat File Kamus
• Menu konteks: Pull/Push pada kamus; Fill pada file
• Auto-reveal: file editor saat ini disorot dalam pohon Kamus jika berlaku
• Perintah baru tersedia dari Command Palette: Fill Dictionaries dan Test Dictionaries

Lihat detailnya di dokumentasi Official VS Code Extension.

Memperbarui server MCP untuk mendukung fitur baru.

• Auto-fill
• Menguji terjemahan yang hilang
• Pembaruan langsung
• Logging
• Validasi
• Catatan migrasi
• Dokumentasi

Server MCP membantu otomatisasi proyek yang menggunakan Intlayer. Menguji terjemahan yang hilang untuk kode yang dihasilkan secara otomatis. Ini membantu memahami konfigurasi Anda, dan menyematkan dokumentasi Intlayer di IDE Anda.

Performa: 10× lebih cepat

• Resolusi paralel kamus lokal dan jarak jauh
• Kamus jarak jauh di-cache untuk menghindari pengambilan ulang saat startup aplikasi

npx intlayer build

Output:

[intlayer]  Mempersiapkan Intlayer (v6.0.1)[intlayer]  Kamus:[intlayer]  ✓ Konten lokal: 163/163[intlayer]  ✓ Konten jarak jauh: 100/100[intlayer]   - access-key-creation-form             [lokal: ✔ dibangun] [jauh: ✔ diimpor][intlayer]   - access-key-form                      [lokal: ✔ dibangun] [jauh: ✔ diimpor][intlayer]   - ai-ab-testing-section                                 [distant: ✔ imported][intlayer]   - application-not-running-view         [local: ✔ built] [distant: ✔ imported][intlayer]   - available-techno-section             [local: ✔ built] [distant: ✔ imported][intlayer]   - blog-data                            [local: ✔ built][intlayer]   - blog-metadata                        [local: ✔ built][intlayer]   - blog-nav-list                        [local: ✔ built] [distant: ✔ imported][intlayer]   - blog-page                                             [distant: ✔ fetched][intlayer]   - blog-search-page                     [local: ✔ built] [distant: ✔ imported]...[intlayer]  Konten dimuat  (Total: 8401ms - Lokal: 4050ms - Jarak jauh: 4222ms)

Peningkatan logging

Sistem logging telah ditingkatkan untuk memberikan informasi yang lebih rinci tentang apa yang terjadi selama transformasi build dan runtime.

Aktifkan log verbose untuk lebih memahami apa yang terjadi selama transformasi build dan runtime.

export default {  log: {    mode: "verbose", // opsi: "default" | "verbose" | "disabled"  },};

Lihat Konfigurasi untuk semua opsi logging.

Validasi yang Lebih Kuat

Pemrosesan kamus sekarang melakukan validasi yang lebih kuat. Ketika sebuah kamus gagal diproses, Intlayer menghindari kerusakan pada aplikasi Anda dan menampilkan kesalahan yang dapat ditindaklanjuti.

Pembaruan Langsung dengan CMS (Aman untuk Produksi)

Sajikan pembaruan konten secara langsung (misalnya, pembaruan editorial) di produksi tanpa perlu membangun ulang aplikasi Anda.

1. Aktifkan mode impor langsung:

import { type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  build: {    importMode: "live", // "static" | "dynamic" | "live"  },  editor: {    liveSync: true, // aktifkan sinkronisasi langsung di sisi server  },};export default config;

2. Jalankan aplikasi Anda dan proses langsung secara berdampingan:

npx intlayer live --with 'vite preview'

Catatan:

• Hanya kamus yang ditandai untuk menggunakan mode langsung yang akan diambil secara langsung. Kamus lainnya dioptimalkan untuk performa.
• Akan kembali ke impor dinamis jika API langsung tidak dapat dijangkau.

Lihat CMS dan Live Sync dan Konfigurasi untuk panduan lengkap.

Proses paralel untuk memantau file di turbopack

Saat menggunakan Turbopack pada Next.js 14 ke atas sebagai server pengembangan Anda dengan perintah next dev --turbopack, perubahan kamus tidak akan terdeteksi secara otomatis secara default.

Keterbatasan ini terjadi karena Turbopack tidak dapat menjalankan plugin webpack secara paralel untuk memantau perubahan pada file konten Anda.

Untuk mengatasinya, kami menghapus perintah intlayer watch, dan menggunakan opsi --with untuk menjalankan server pengembangan dan pemantau build Intlayer secara bersamaan.

{  "scripts": {    "dev": "npx intlayer watch --with 'next dev --turbopack'",  },}

Catatan migrasi

• Dihapus: dictionaryOutput (sebelumnya i18next atau next-intl). Ini akan kembali sebagai adapter yang dapat dipasang pada versi mendatang. Hapus bidang ini dari konfigurasi Anda.
• Penghapusan terkait: i18nextResourcesDir (lihat changelog doc/configuration).
• Gunakan opsi global baru content.autoFill untuk menghasilkan terjemahan yang hilang secara massal.
• Gunakan npx intlayer content test untuk memeriksa PR terkait terjemahan yang hilang.
• Untuk diagnostik yang lebih rinci, atur log.mode = 'verbose'.
• Gunakan intlayer menggantikan intlayerPlugin dan intlayerProxy menggantikan intlayerProxyPlugin dalam konfigurasi Vite Anda.

Perbaikan

• Stabilitas integrasi Vue.js
• Peningkatan adapter Lynx
• Editor Visual di Windows

Catatan migrasi dari v6 ke v7

Periksa catatan migrasi dari v6 ke v7 untuk informasi lebih lanjut.

Tautan berguna

• Referensi CLI
• Auto‑fill
• Konfigurasi
• Referensi file konten
• Ekstensi VS Code Resmi
• CMS dan Sinkronisasi Langsung