Yeni Intlayer v6 - Yenilikler neler?

Intlayer v6'ya hoş geldiniz! Bu sürüm performans, geliştirici deneyimi ve güvenilirliğe odaklanıyor. Aşağıda, geçiş notları ve kopyala-yapıştır yapılabilir örneklerle birlikte önemli noktalar yer almaktadır.

Öne Çıkanlar

• Yeni komut: npx intlayer content test eksik çevirileri tespit etmek için
• Yeni global autoFill seçeneği ile eksik çeviriler otomatik olarak oluşturulur
• Fill komutu varsayılan olarak mevcut çevirileri atlar: npx intlayer fill
• VS Code eklentisi: yeni Intlayer Aktivite Çubuğu (Arama & Sözlükler), araç çubuğu/bağlam menüsü işlemleri, otomatik görünürlük, Fill/Test komutları
• Promise paralelleştirmesi sayesinde 10 kat daha hızlı derlemeler
• Uygulama başlangıcında yeniden getirmeyi önlemek için uzak sözlük önbellekleme
• Geliştirilmiş günlükleme: davranışı incelemek için log.mode: 'verbose' ayarlayın
• Sözlük sorunlarında uygulama çökmelerini önlemek için daha güçlü doğrulama
• CMS ile canlı güncellemeler için build.importMode = 'live' ve pnpm intlayer live kullanımı
• Düzeltmeler: Vue.js entegrasyonu, Lynx adaptörü, Windows'ta Görsel Editör

Yeni: Eksik çevirileri test etme

Projenizi hızlıca denetleyerek hangi anahtarların/dillerin eksik olduğunu bulun.

npx intlayer content test

Çıktı:

pnpm intlayer content testEksik çeviriler: - blog-data       - Japonca (ja), Korece (ko), Çince (zh), Almanca (de), İtalyanca (it) - src/components/BlogPage/blogData.content.ts - demo-page       - Fransızca (fr), İtalyanca (it)                                         - src/components/DemoPage/demo.content.ts - locale-switcher - İtalyanca (it), Portekizce (pt)                                       - src/components/LocaleSwitcher/localeSwitcher.content.tsDiller: İngilizce (en), Rusça (ru), Japonca (ja), Fransızca (fr), Korece (ko), Çince (zh), İspanyolca (es), Almanca (de), Arapça (ar), İtalyanca (it), İngiliz İngilizcesi (en-GB), Portekizce (pt), Hintçe (hi)Gerekli diller: İngilizce (en)Eksik diller: Japonca (ja), Korece (ko), Çince (zh), Almanca (de), İtalyanca (it), Fransızca (fr), Portekizce (pt)Gerekli eksik diller: -Toplam eksik diller: 7Toplam gerekli eksik diller: 0

Daha fazla seçenek için CLI dokümantasyonuna bakınız: CLI referansı → "Eksik çevirileri test et". Ayrıca Test Etme rehberine de göz atabilirsiniz.

Yeni: Eksik çevirileri tamamlamak için global autoFill

Artık auto-fill özelliğini global olarak etkinleştirebilirsiniz, böylece eksik çevirisi olan herhangi bir sözlük otomatik olarak tamamlanır.

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: {    // Tüm sözlükler için eksik çevirileri otomatik oluştur    autoFill: "./{{fileName}}.content.ts",    //    // autoFill: "/messages/{{locale}}/{{key}}/{{fileName}}.content.json",    //    // autoFill: true, // "./{{fileName}}.content.json" kullanımı gibi tüm sözlükler için eksik çevirileri otomatik oluştur    //    // autoFill: {    //   en: "./{{fileName}}.en.content.json",    //   fr: "./{{fileName}}.fr.content.json",    //   es: "./{{fileName}}.es.content.json",    // },  },};export default config;

İçerik dosyalarındaki autoFill alanını kullanarak her sözlük için ince ayar yapmaya devam edebilirsiniz. Tam referans için doc/autoFill ve doc/dictionary/content_file dosyalarına bakınız.

Fill komutu: daha güvenli varsayılanlar

Fill komutu artık varsayılan olarak sadece eksik çevirileri doldurur ve mevcut içeriği atlar.

npx intlayer fill

İşlenecek sözlük anahtarları: access-key-creation-form-schema, doc-search-metadata, doc-search-page  - [access-key-creation-form-schema]      Sözlüğün dosya yolu yok. Atlanıyor.  - [access-key-creation-form-schema]      İçerik bildirimi işleniyor: src/components/Dashboard/ProjectForm/AccessKey/useAccessKeyCreationFormSchema.content.ts  - [access-key-creation-form-schema]      Doldurulacak yerel ayar yok - Sözlük atlanıyor  - [doc-search-metadata]                  Sözlüğün dosya yolu yok. Atlanıyor.  - [doc-search-metadata]                  İçerik bildirimi işleniyor: src/app/[locale]/(docs)/doc/search/metadata.content.ts  - [doc-search-metadata]                  Doldurulacak yerel ayar yok - Sözlük atlanıyor  - [doc-search-page]                      Sözlüğün dosya yolu yok. Atlanıyor.  - [doc-search-page]                      İçerik bildirimi işleniyor: src/app/[locale]/(docs)/doc/search/page.content.ts  - [doc-search-page]                     [Rusça (ru)]                   İngilizce (en) dilinden Rusça (ru) diline sözlük çevirisi hazırlanıyor[intlayer]  src/app/[locale]/(docs)/doc/search/page.content.ts dosyasına Prettier biçimlendirmesi uygulandı  - [doc-search-page]                      İçerik bildirimi src/app/[locale]/(docs)/doc/search/page.content.ts dosyasına yazıldı

CI örnekleri CI/CD sayfasında mevcuttur.

Güncellenmiş VS Code eklentisi

Eklenti artık Aktivite Çubuğunda özel bir Intlayer sekmesi ve çeşitli iş akışı iyileştirmeleri içermektedir:

• İki görünüm içeren Intlayer Aktivite Çubuğu:
  • Canlı sözlük/içerik araması için Arama web görünümü (intlayer.searchBar)
  • Ortamları, sözlükleri ve katkıda bulunan dosyaları listeleyen Sözlükler ağacı (intlayer.dictionaries)
• Sözlükler görünümünde araç çubuğu: Derle, Çek, Gönder, Doldur, Yenile, Test Et, Sözlük Dosyası Oluştur
• Bağlam menüleri: Sözlüklerde Çek/Gönder; dosyalarda Doldur
• Otomatik gösterim: Geçerli düzenleyici dosyası, uygun olduğunda Sözlükler ağacında vurgulanır
• Komut Paletinden kullanılabilen yeni komutlar: Sözlükleri Doldur ve Sözlükleri Test Et

Detaylar için Resmi VS Code Eklentisi dokümantasyonuna bakınız.

Performans: 10× daha hızlı

• Yerel ve uzak sözlüklerin paralel çözümü
• Uzak sözlükler, uygulama başlangıcında yeniden getirilmemesi için önbelleğe alınır

npx intlayer build

Çıktı:

[intlayer]  Intlayer hazırlanıyor (v6.0.1)[intlayer]  Sözlükler:[intlayer]  ✓ Yerel içerik: 163/163[intlayer]  ✓ Uzak içerik: 100/100[intlayer]   - access-key-creation-form             [yerel: ✔ oluşturuldu] [uzak: ✔ içe aktarıldı][intlayer]   - access-key-creation-form-schema      [yerel: ✔ oluşturuldu] [uzak: ✔ içe aktarıldı][intlayer]   - access-key-form                      [yerel: ✔ oluşturuldu] [uzak: ✔ içe aktarıldı][intlayer]   - ai-ab-testing-section                                 [uzak: ✔ içe aktarıldı][intlayer]   - application-not-running-view         [yerel: ✔ oluşturuldu] [uzak: ✔ içe aktarıldı][intlayer]   - application-template-message         [yerel: ✔ oluşturuldu] [uzak: ✔ alındı][intlayer]   - aside-navigation                     [yerel: ✔ oluşturuldu] [uzak: ✔ içe aktarıldı][intlayer]   - ask-reset-password                   [yerel: ✔ oluşturuldu] [uzak: ✔ içe aktarıldı][intlayer]   - ask-reset-password-schema            [yerel: ✔ oluşturuldu] [uzak: ✔ içe aktarıldı][intlayer]   - otomatik tamamlama bölümü               [yerel: ✔ oluşturuldu] [uzak: ✔ alındı][intlayer]   - mevcut teknoloji bölümü                  [yerel: ✔ oluşturuldu] [uzak: ✔ içe aktarıldı][intlayer]   - blog verisi                              [yerel: ✔ oluşturuldu][intlayer]   - blog meta verisi                         [yerel: ✔ oluşturuldu][intlayer]   - blog navigasyon listesi                  [yerel: ✔ oluşturuldu] [uzak: ✔ içe aktarıldı][intlayer]   - blog sayfası                             [uzak: ✔ alındı][intlayer]   - blog arama meta verisi                   [yerel: ✔ oluşturuldu] [uzak: ✔ içe aktarıldı][intlayer]   - blog arama sayfası                       [yerel: ✔ oluşturuldu] [uzak: ✔ içe aktarıldı]...[intlayer]  İçerik yüklendi  (Toplam: 8401ms - Yerel: 4050ms - Uzak: 4222ms)

Günlükleme iyileştirmeleri

Günlükleme sistemi, derleme ve çalışma zamanı dönüşümleri sırasında neler olduğunu daha ayrıntılı şekilde sağlamak için geliştirildi.

Derleme ve çalışma zamanı dönüşümleri sırasında neler olduğunu daha iyi anlamak için ayrıntılı günlükleri etkinleştirin.

export default {  log: {    mode: "verbose", // seçenekler: "default" | "verbose" | "disabled"  },};

Tüm günlükleme seçenekleri için Yapılandırma sayfasına bakınız.

Daha güçlü doğrulama

Sözlük işleme artık daha sağlam doğrulama yapmaktadır. Bir sözlük işlenemediğinde, Intlayer uygulamanızın çökmesini önler ve uygulanabilir hataları gösterir.

CMS ile Canlı Güncellemeler (Üretim Güvenli)

Canlı içerik güncellemelerini (örneğin, editoryal güncellemeler) uygulamanızı yeniden derlemeden üretimde sunun.

1. Canlı import modunu etkinleştirin:

import { type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  build: {    importMode: "live", // "static" | "dynamic" | "live"  },  editor: {    liveSync: true, // sunucu tarafında canlı senkronizasyonu etkinleştir  },};export default config;

2. Uygulamanızı çalıştırın ve canlı işlemi yan yana yürütün:

npx intlayer live --process 'vite preview'

Notlar:

• Sadece canlı mod kullanımı için işaretlenmiş sözlükler canlı olarak alınacaktır. Diğerleri performans için optimize edilmiştir.
• Canlı API erişilemezse dinamik import'a geri dönülür.

Tam rehberlik için CMS ve Canlı Senkronizasyon ve Yapılandırma sayfalarına bakın.

Geçiş notları

• Kaldırıldı: dictionaryOutput (önceden i18next veya next-intl). Bu, gelecekteki sürümlerde takılabilir adaptörler olarak geri gelecek. Yapılandırmanızdan bu alanı kaldırın.
• İlgili kaldırma: i18nextResourcesDir (bkz. doc/configuration değişiklik günlüğü).
• Eksik çevirileri toplu olarak oluşturmak için yeni global content.autoFill seçeneğini tercih edin.
• Eksik çeviriler için PR'ları kontrol etmek amacıyla npx intlayer content test komutunu kullanın.
• Ayrıntılı tanılama için log.mode = 'verbose' olarak ayarlayın.

Düzeltmeler

• Vue.js entegrasyon kararlılığı
• Lynx adaptör iyileştirmeleri
• Windows üzerinde Görsel Düzenleyici

Faydalı bağlantılar

• CLI referansı
• Otomatik doldurma
• Yapılandırma
• İçerik dosyası referansı
• Resmi VS Code Eklentisi
• CMS ve Canlı Senkronizasyon