Yeni Intlayer v9 - Yenilikler Neler?

Intlayer v9'a hoş geldiniz! Bu ana sürüm, büyük i18n kütüphaneleri (react-i18next, next-intl, vue-i18n vb.) için sunulan Compat Adapter Paketleri ile Intlayer'a geçiş sürecini basitleştirmede dev bir adımı temsil ediyor ve zengin içerik yapıları için destek ekliyor: Koleksiyonlar (Collections), Varyantlar (Variants) ve Dinamik Kayıtlar (Dynamic Records).

İçindekiler

Compat Adapter Paketleri

Popüler i18n kütüphanelerinden Intlayer'a geçiş yapmak artık her zamankinden daha kolay. Standart i18n kütüphaneleriyle birebir aynı genel API'leri (public APIs) sunan ancak çalışma zamanında (runtime) tüm çeviri işlerini Intlayer'a devreden beş adet uyumluluk (compat) paketi oluşturduk.

Sıkı Tiplendirme ile Aynı Genel API'yi Sunma

İçe aktarmaları (imports) değiştirerek, minimum kod değişikliğiyle Intlayer'ın tüm avantajlarından (gerçek sözlüklerinize karşı derleme zamanı tip güvenliği dahil) yararlanabilirsiniz:

• @intlayer/i18next
• @intlayer/react-i18next
• @intlayer/next-intl
• @intlayer/next-i18next
• @intlayer/vue-i18n

Örneğin, sadece şunu değiştirin:

import { useTranslation } from "react-i18next";

şuna:

import { useTranslation } from "@intlayer/react-i18next";

Anahtarlarınız artık Intlayer sözlüklerinize karşı sıkı bir şekilde tiplendirilecek (strictly typed) ve IDE'nizde tam nokta yolu (dot-path) otomatik tamamlama desteği sunacak!

Bundler Alias Eklentileri (Vite, Next.js, Turbopack)

Tüm içe aktarma ifadelerinizi manuel olarak yeniden yazmadan geçiş yapabilmenizi sağlamak için, her compat adapter paketi /plugin alt yolu altında özel bir bundler eklentisi (Vite veya Next.js) içerir.

Bu eklentiler, derleme zamanında (build time) mevcut içe aktarmaları (örneğin react-i18next veya next-intl) otomatik olarak @intlayer/* eşdeğerlerine dönüştürür.

Next.js (Webpack / Turbopack) Örneği

withIntlayer yerine, Next.js yapılandırmanızı compat eklentisi ile sarmalayın:

import { createNextI18nPlugin } from "@intlayer/next-i18next/plugin";import type { NextConfig } from "next";const withIntlayer = createNextI18nPlugin();const nextConfig: NextConfig = {};export default withIntlayer(nextConfig);

Vite (React, Vue, Solid, Svelte) Örneği

import vueI18nVitePlugin from "@intlayer/vue-i18n/plugin";export default defineConfig({  plugins: [vueI18nVitePlugin()],});

Ortaklaştırılmış Çalışma Zamanı Çözümleyicisi (Mutualized Runtime Resolver)

Tüm compat adapter'lar artık çeviri çözümlemesini tek ve son derece optimize edilmiş bir çalışma zamanı ayrıştırıcısı (runtime parser) üzerinden yönlendiriyor: @intlayer/core/messageFormat.

• Mesaj Değişkeni Ekleme (Interpolate Message): Standart {{var}} (boşluklar ve nokta yolları), ICU biçimlendirilmiş argümanlar ({v, number, percent} vb.) ve yalın {var} şablonlarını çözümler.
• Mesaj Düğümü Çözümleyici (Message Node Resolver): İç içe geçmiş düğümleri çözümler: insert(), plural() (CLDR çoğul kuralları), enu() (numaralandırma), gender(), HTML etiketleri, diziler ve çağrılabilir fonksiyon düğümleri.
• Tokenized Tag Parser: Zengin metin (rich-text) oluşturmayı kutudan çıktığı gibi desteklemek için satır içi XML/HTML etiketlerini ve numaralandırılmış etiketleri (örneğin, <1>children</1>) destekler.

Özellik Detayları: Koleksiyonlar, Varyantlar ve Dinamik Kayıtlar

Intlayer v9, statik anahtar-değer nesnelerinin ötesine geçerek sözlüklerin uçtan uca tam tiplendirilmiş dinamik düzen yapıları tanımlamasına olanak tanır.

1. Koleksiyonlar (Collections)

CMS tarafından yönetilen sıralı öğelerin bir listesini tanımlayın (örneğin SSS'ler, ürünler veya blog listeleri):

import { t, type Dictionary } from "intlayer";export default {  key: "faq",  content: [    {      question: t({        tr: "Intlayer nedir?",        en: "What is Intlayer?",        fr: "Qu'est-ce qu'Intlayer ?",      }),      answer: t({        tr: "Bir i18n araç kiti.",        en: "An i18n toolkit.",        fr: "Une boîte à outils i18n.",      }),    },  ],} satisfies Dictionary;

Kullanım:

// Tüm öğeleri getirconst allFaqs = useIntlayer("faq"); // -> { question: string, answer: string }[]// Dizine göre tek bir öğe getirconst faq = useIntlayer("faq", { item: 1 }); // -> { question: string, answer: string }

2. Varyantlar (Variants)

A/B testleri, mevsimsel başlıklar, özellik bayrakları (feature flags) veya özel açılış sayfaları sunun:

import { t, type Dictionary } from "intlayer";export default {  key: "hero-banner",  variant: "default",  content: {    control: t({ tr: "Hoş geldiniz", en: "Welcome", fr: "Bienvenue" }),    black_friday: t({      tr: "Şimdi alışveriş yap",      en: "Shop now",      fr: "Acheter maintenant",    }),  },} satisfies Dictionary;

Kullanım:

const banner = useIntlayer("hero-banner", { variant: "black_friday" });

3. Dinamik Kayıtlar (Dynamic Records)

Girdileri çalışma zamanında sorgu kimlikleri (query IDs) aracılığıyla dinamik olarak yüklenen sözlükler tanımlayın:

import { t, type Dictionary } from "intlayer";export default {  key: "product-copy",  meta: {    id: "prod_123",    category: "books",  },  content: {    title: t({ tr: "Temiz Kod", en: "Clean Code", fr: "Code Propre" }),  },} satisfies Dictionary;

Kullanım:

// Yalnızca talep edilen öğeyi dinamik olarak getirir (Suspense gerektirir)const product = useIntlayer("product-copy", {  id: "prod_123",  category: "books",});

Dinamik Yükleme ve Bundle Boyutu Optimizasyonları

Bundle boyutlarını son derece küçük tutmak için Intlayer v9 dinamik tembel yüklemeyi (dynamic lazy loading) destekler.

Yapılandırmanızda importMode değerini 'dynamic' veya 'fetch' olarak ayarlayın:

export default {  dictionary: {    importMode: "dynamic", // "static" | "dynamic" | "fetch"  },};

Derleme zamanında, @intlayer/swc ve @intlayer/babel dosyalarınızı tarar ve useIntlayer / getIntlayer çağrılarını tree-shakeable sarmalayıcılarla (useDictionary / useDictionaryDynamic) değiştirir. Yalnızca seçilen koleksiyon öğesi, varyant veya dil (locale) için gerekli olan içerik yüklenir, böylece üretim (production) bundle'ınızın kullanılmayan çevirileri içermesi engellenir.

v8'den Geçiş Notları

v8'den yükseltme yapıyorsanız, v9'un yıkıcı değişiklikler (breaking changes) içermediğini unutmayın. Ancak işte temel değişiklikler:

• Diller ve Lehçeler (Locales & Dialects): Harici i18n bağımlılıkları kullanıyorsanız, içe aktarmaları otomatik olarak yeniden yazmak için yapılandırmanıza veya bundler kurulumunuza ilgili compat adapter eklentilerini ekleyin.
• Özel Seçiciler (Custom Selectors): useIntlayer çağrılırken, ikinci parametre artık { locale, item, variant, id } içeren bir seçenek nesnesine ayrılmıştır. Daha önce doğrudan bir dil (locale) dizesi geçirdiyseniz bunu yapmaya devam edebilirsiniz, ancak gelişmiş seçimler için seçenekler nesnesini kullanmanız önerilir.

Faydalı bağlantılar

• Compat Adapter Paketleri Kılavuzu
• Dinamik Sözlükler - Koleksiyonlar, Varyantlar ve Dinamik Kayıtlar
• Yapılandırma Referansı