नया Intlayer v9 - क्या नया है?

Intlayer v9 में आपका स्वागत है! यह मेजर रिलीज़ प्रमुख i18n लाइब्रेरीज़ (react-i18next, next-intl, vue-i18n, आदि) के लिए Compat Adapter Packages के साथ Intlayer पर माइग्रेशन की राह को आसान बनाने में एक बड़ा मील का पत्थर है, और यह रिच कंटेंट स्ट्रक्चर्स: Collections, Variants, और Dynamic Records के लिए सपोर्ट जोड़ता है।

विषय-सूची

Compat Adapter Packages

लोकप्रिय i18n लाइब्रेरीज़ से Intlayer पर माइग्रेट करना अब पहले से कहीं अधिक आसान है। हमने पांच compat पैकेजेस बनाए हैं जो स्टैंडर्ड i18n लाइब्रेरीज़ के समान exact same public APIs को एक्सपोज़ करते हैं, लेकिन रनटाइम (runtime) पर सभी ट्रांसलेशन वर्क को Intlayer को सौंप (delegate) देते हैं।

Strict Typing के साथ समान Public API एक्सपोज़ करें

इंपोर्ट्स (imports) को बदलकर, आप न्यूनतम कोड परिवर्तनों के साथ Intlayer के सभी लाभ (आपके वास्तविक डिक्शनरीज़ के खिलाफ कंपाइल-टाइम टाइप सेफ्टी सहित) प्राप्त कर सकते हैं:

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

उदाहरण के लिए, बस इसे बदलें:

import { useTranslation } from "react-i18next";

इसमें:

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

आपके कीज़ (keys) अब आपके Intlayer डिक्शनरीज़ के खिलाफ strictly typed होंगे, जो आपके IDE में पूर्ण dot-path ऑटो-कम्प्लीशन प्रदान करेंगे!

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

बिना अपने सभी इंपोर्ट स्टेटमेंट्स को मैन्युअल रूप से दोबारा लिखे माइग्रेट करने की अनुमति देने के लिए, प्रत्येक compat एडाप्टर पैकेज में /plugin सबपाथ के तहत एक custom bundler plugin (Vite या Next.js) शामिल है।

ये प्लगइन्स बिल्ड टाइम (build time) पर मौजूदा इंपोर्ट्स (जैसे react-i18next या next-intl) को उनके @intlayer/* समकक्षों में स्वचालित रूप से रीराइट (rewrite) कर देते हैं।

Next.js (Webpack / Turbopack) का उदाहरण

withIntlayer के बजाय, अपने Next.js कॉन्फ़िगरेशन को compat प्लगइन के साथ रैप करें:

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) का उदाहरण

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

Mutualized Runtime Resolver

सभी compat एडाप्टर्स अब ट्रांसलेशन रिज़ॉल्यूशन को एक सिंगल, अत्यधिक ऑप्टिमाइज़्ड रनटाइम पार्सर के माध्यम से रूट करते हैं: @intlayer/core/messageFormat।

• Interpolate Message: यह स्टैंडर्ड {{var}} (whitespace और dot-paths), ICU फॉर्मेटेड आर्ग्युमेंट्स ({v, number, percent} आदि), और बेयर {var} टेम्पलेट्स को रिज़ॉल्व करता है।
• Message Node Resolver: यह नेस्टेड नोड्स को रिज़ॉल्व करता है: insert(), plural() (CLDR plural rules), enu() (enumeration), gender(), HTML टैग्स, एरेज़ (arrays), और कॉलेबल फ़ंक्शन नोड्स।
• Tokenized Tag Parser: यह आउट-ऑफ-द-बॉक्स रिच-टेक्स्ट रेंडरिंग को सक्षम करने के लिए इनलाइन XML/HTML टैग्स और नम्बर्ड टैग्स (जैसे, <1>children</1>) का समर्थन करता है।

Feature Spec: Collections, Variants & Dynamic Records

Intlayer v9 स्टैटिक की-वैल्यू ऑब्जेक्ट्स से आगे बढ़कर डिक्शनरीज़ को डायनेमिक लेआउट स्ट्रक्चर्स घोषित करने की अनुमति देता है जो एंड-टू-एंड पूरी तरह से टाइप्ड (typed) होते हैं।

1. Collections

ऑर्डर किए गए आइटम्स की एक CMS-मैनेज्ड सूची परिभाषित करें (जैसे FAQs, प्रोडक्ट्स, या ब्लॉग लिस्ट्स):

import { t, type Dictionary } from "intlayer";export default {  key: "faq",  content: [    {      question: t({        hi: "Intlayer क्या है?",        en: "What is Intlayer?",        fr: "Qu'est-ce qu'Intlayer ?",      }),      answer: t({        hi: "एक i18n टूलकिट।",        en: "An i18n toolkit.",        fr: "Une boîte à outils i18n.",      }),    },  ],} satisfies Dictionary;

उपयोग:

// सभी आइटम्स प्राप्त करेंconst allFaqs = useIntlayer("faq"); // -> { question: string, answer: string }[]// इंडेक्स द्वारा सिंगल आइटम प्राप्त करेंconst faq = useIntlayer("faq", { item: 1 }); // -> { question: string, answer: string }

2. Variants

A/B टेस्ट्स, सीज़नल हेडर्स, फ़ीचर फ़्लैग्स, या कस्टम लैंडिंग पेजेस डिलीवर करें:

import { t, type Dictionary } from "intlayer";export default {  key: "hero-banner",  variant: "default",  content: {    control: t({ hi: "स्वागत है", en: "Welcome", fr: "Bienvenue" }),    black_friday: t({      hi: "अभी खरीदें",      en: "Shop now",      fr: "Acheter maintenant",    }),  },} satisfies Dictionary;

उपयोग:

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

3. Dynamic Records

ऐसे डिक्शनरीज़ को परिभाषित करें जिनकी एंट्रीज़ रनटाइम पर क्वेरी IDs के माध्यम से डायनेमिक रूप से लोड होती हैं:

import { t, type Dictionary } from "intlayer";export default {  key: "product-copy",  meta: {    id: "prod_123",    category: "books",  },  content: {    title: t({ hi: "क्लीन कोड", en: "Clean Code", fr: "Code Propre" }),  },} satisfies Dictionary;

उपयोग:

// केवल अनुरोधित आइटम को डायनेमिक रूप से फ़ेच करता है (Suspense की आवश्यकता है)const product = useIntlayer("product-copy", {  id: "prod_123",  category: "books",});

Dynamic Loading और Bundle Size Optimizations

बंडल्स को बेहद छोटा रखने के लिए, Intlayer v9 डायनेमिक लेज़ी लोडिंग (dynamic lazy loading) का समर्थन करता है।

अपने कॉन्फ़िगरेशन में, importMode को 'dynamic' या 'fetch' पर सेट करें:

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

बिल्ड टाइम पर, @intlayer/swc और @intlayer/babel आपकी फ़ाइलों को स्कैन करते हैं और useIntlayer / getIntlayer कॉल्स को ट्री-शेकेबल (tree-shakeable) रैपर्स (useDictionary / useDictionaryDynamic) से बदल देते हैं। केवल चयनित कलेक्शन आइटम, वेरिएंट, या लोकेल के लिए आवश्यक कंटेंट ही लोड किया जाता है, जिससे आपके प्रोडक्शन बंडल में अप्रयुक्त (unused) ट्रांसलेशंस शामिल होने से बच जाते हैं।

v8 से माइग्रेशन नोट्स

यदि आप v8 से अपग्रेड कर रहे हैं, तो ध्यान दें कि v9 में कोई ब्रेकिंग बदलाव (breaking changes) शामिल नहीं हैं। लेकिन यहाँ मुख्य बदलाव दिए गए हैं:

• Locales & Dialects: यदि बाहरी i18n डिपेंडेंसीज़ का उपयोग कर रहे हैं, तो इंपोर्ट्स को स्वचालित रूप से रीराइट करने के लिए अपने कॉन्फ़िगरेशन या बंडलर सेटअप में उनके संबंधित compat एडाप्टर प्लगइन्स जोड़ें।
• Custom Selectors: useIntlayer को कॉल करते समय, दूसरा पैरामीटर अब एक ऑप्शन ऑब्जेक्ट के लिए आरक्षित है जिसमें { locale, item, variant, id } शामिल हैं। यदि आपने पहले सीधे लोकेल स्ट्रिंग पास की थी, तो आप अभी भी ऐसा कर सकते हैं, लेकिन उन्नत चयनों (advanced selections) के लिए ऑप्शंस ऑब्जेक्ट का उपयोग करने की अनुशंसा की जाती है।

उपयोगी लिंक्स

• Compat Adapter Packages Guide
• Dynamic Dictionaries - Collections, Variants & Dynamic Records
• Configuration Reference