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

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

www.youtube.com

Open embedded page in fullscreen

विषय-सूची

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/react-intl
• @intlayer/next-i18next
• @intlayer/vue-i18n
• @intlayer/lingui

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

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

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

1. Collections

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

import { t, type Dictionary } from "intlayer";

export default {
  key: "faq",
  item: 1,
  content: {
    question: t({ en: "What is Intlayer?", fr: "Qu'est-ce qu'Intlayer ?" }),
    answer: t({ en: "An i18n toolkit.", fr: "Une boîte à outils i18n." }),
  },
} satisfies Dictionary;

import { t, type Dictionary } from "intlayer";

export default {
  key: "faq",
  item: 2,
  content: {
    question: t({ en: "Is it free?", fr: "Est-ce gratuit ?" }),
    answer: t({ en: "Yes, open-source.", fr: "Oui, open-source." }),
  },
} satisfies Dictionary;

उपयोग:

// Fetch all items as an array
const allFaqs = useIntlayer("faq"); // -> { question: string, answer: string }[]

// Fetch a single item by index
const faq = useIntlayer("faq", { item: 2 }); // -> { question: string, answer: string }

2. Variants

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

स्ट्रिंग वेरिएंट (उदा. 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" });

ऑब्जेक्ट वेरिएंट (उदा. डायनेमिक रिकॉर्ड्स)

import { t, type Dictionary } from "intlayer";

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

उपयोग:

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

@intlayer/analytics: कंटेंट एक्सपोज़र ट्रैकिंग और A/B टेस्टिंग

एक नया वैकल्पिक पैकेज, @intlayer/analytics, आपको बताता है कि आपके विज़िटर्स को वास्तव में कौन-सी सामग्री दिखाई जा रही है — और Collections & Variants के साथ यह चक्र पूरा करता है, जिससे आप कंटेंट पर A/B टेस्ट कर सकते हैं और प्रत्येक वेरिएंट के लिए कन्वर्ज़न माप सकते हैं।

• प्रोवाइडर-स्तर ट्रैकिंग: IntlayerProvider (React / Next.js / React Native) लोड, रूट परिवर्तन और लोकेल परिवर्तन पर स्वचालित रूप से page_view इवेंट रिकॉर्ड करता है।
• नोड-स्तर ट्रैकिंग: हर useIntlayer रिज़ॉल्यूशन एक content_exposure इवेंट रिपोर्ट करता है — कौन-सी डिक्शनरी की, की-पाथ, लोकेल, और (यदि लागू हो) कौन-सा A/B वेरिएंट दिखाया गया। फ्लश विंडो के भीतर एक ही नोड के बार-बार एक्सपोज़र को एक इवेंट में मिला दिया जाता है।
• डिटरमिनिस्टिक A/B असाइनमेंट: getVariant(experimentKey, variants) बिना सर्वर राउंड-ट्रिप के हर सेशन को एक वेरिएंट असाइन करता है, इसलिए पहले रेंडर से पहले कोई फ़्लिकर नहीं होता।
• useConversion(): सेशन जिस वेरिएंट के संपर्क में आया, उसे एक लक्ष्य (साइनअप, क्लिक, खरीद…) से जोड़ता है।
• इंस्टॉल न होने पर शून्य लागत: @intlayer/editor जैसा ही tree-shakeable पैटर्न — try/catch में लिपटा हुआ डायनामिक import(), साथ ही एक बिल्ड-टाइम एनवायरनमेंट वेरिएबल (INTLAYER_ANALYTICS_ENABLED) जो इसे उपयोग न करने वाले ऐप्स के लिए पूरे इंटीग्रेशन को डेड-कोड के रूप में हटा देता है।
• कोई नया कॉन्फ़िगरेशन स्कीमा नहीं: मौजूदा editor.backendURL (इंजेशन एंडपॉइंट / सेल्फ-होस्टिंग) और editor.clientId (प्रोजेक्ट की, जो सक्षम करने का स्विच भी है) का पुनः उपयोग करता है।
• गोपनीयता का सम्मान: सेशन का अनाम हैशिंग (SHA-256, कोई रॉ आईडी संग्रहीत नहीं), कोई IP संग्रहण नहीं, केवल मोटे तौर पर देश-स्तरीय भू-स्थान, लगभग हर 20 सेकंड में बैच में भेजे गए अनुरोध।
• डैशबोर्ड: एक नया Analytics पेज (प्रोजेक्ट चुनने के बाद साइडबार में दिखता है) सक्रिय उपयोगकर्ता, आज के उपयोगकर्ता, पिछले 7/30/90 दिनों के उपयोगकर्ता, विज़िटर इवोल्यूशन ग्राफ़, और लोकेल बनाम लोकेशन ब्रेकडाउन दिखाता है।

npm install @intlayer/analytics

आज React, Next.js, और React Native (react-intlayer के माध्यम से) के लिए उपलब्ध है; अन्य फ्रेमवर्क बाइंडिंग्स (Vue, Svelte, Angular, …) की योजना बनाई गई है, जो @intlayer/editor के समान रोलआउट पैटर्न का पालन करेंगी। पूर्ण गाइड के लिए Analytics दस्तावेज़ देखें।

Vite Plugin: बंडल्ड Compiler & Proxy

intlayer() Vite plugin अब compiler और locale-routing proxy को सीधे बंडल करता है, इसलिए अधिकांश projects को vite.config.ts में केवल एक ही plugin की आवश्यकता है:

import { defineConfig } from "vite";
import { intlayer } from "vite-intlayer";

export default defineConfig({
  plugins: [intlayer()],
});

• Compiler: जब compiler.enabled को true पर सेट किया जाता है और compiler.output path कॉन्फ़िगर की जाती है तो स्वचालित रूप से सक्रिय हो जाता है। आपको अब intlayerCompiler() को अलग से रजिस्टर करने की आवश्यकता नहीं है।
• Proxy: नए routing.enableProxy option (true डिफ़ॉल्ट रूप से) के आधार पर स्वचालित रूप से सक्रिय हो जाता है। यह development, preview, और production SSR में locale detection / redirect / rewrite middleware को wire करता है। आपको अब intlayerProxy() को अलग से रजिस्टर करने की आवश्यकता नहीं है।

routing.enableProxy विकल्प

एक नया routing.enableProxy विकल्प नियंत्रित करता है कि locale-routing proxy को plug किया गया है या नहीं। यह डिफ़ॉल्ट रूप से true होता है। इसे disable करें जब आप locale routing को स्वयं handle करना चाहते हैं:

import type { IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  routing: {
    enableProxy: false, // डिफ़ॉल्ट: true
  },
};

export default config;

स्टैंडअलोन intlayerCompiler() और intlayerProxy() plugins advanced setups के लिए exported रहते हैं। उन्हें intlayer() के साथ register करना सुरक्षित है — प्रत्येक plugin स्वयं को deduplicate करता है और केवल एक बार चलता है।

कंपाइलर डिफ़ॉल्ट रूप से अक्षम

Intlayer v9 से, कंपाइलर डिफ़ॉल्ट रूप से अक्षम है (compiler.enabled अब डिफ़ॉल्ट रूप से false है)। अपनी .content.ts फ़ाइलों के बिल्ड-टाइम एक्सट्रैक्शन को सक्षम करने के लिए, अपने कॉन्फ़िगरेशन में compiler.enabled: true सेट करें:

import type { IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  compiler: {
    enabled: true, // डिफ़ॉल्ट: false — v9 से कंपाइलर को सक्षम करने के लिए आवश्यक
    output: ({ fileName }) => `./${fileName}.content.ts`,
  },
};

export default config;

जब कंपाइलर अक्षम होता है, तो Intlayer बिल्ड-टाइम एक्सट्रैक्शन चरण को छोड़ देता है और आपके पहले से घोषित डिक्शनरीज़ पर निर्भर करता है। इसे केवल तभी सक्षम करें जब आप चाहते हैं कि बंडलर प्लगइन (@intlayer/swc, @intlayer/babel, या intlayer() Vite प्लगइन) सामग्री को स्वचालित रूप से एक्सट्रैक्ट करे।

React Native: सिंगल-पैकेज इम्पोर्ट

React Native या Expo ऐप में, अब आपको react-intlayer और react-native-intlayer दोनों के बीच तालमेल बिठाने की ज़रूरत नहीं है। react-native-intlayer पैकेज अब पूर्ण react-intlayer API को फिर से निर्यात करता है (हुक्स, यूटिलिटीज, और /format, /html, और /markdown सबपाथ), और इसका IntlayerProvider स्वचालित रूप से React Native पॉलीफ़िल्स लागू करता है।

सभी चीज़ें एकल react-native-intlayer पैकेज से इम्पोर्ट करें:

import {
  IntlayerProvider,
  useIntlayer,
  useLocale,
} from "react-native-intlayer";

npm install intlayer react-native-intlayer

react-intlayer से इम्पोर्ट करना काम करता रहेगा, लेकिन react-native-intlayer अब React Native के लिए अनुशंसित एकल प्रवेश बिंदु है — इसका प्रदाता वे पॉलीफ़िल्स प्रदान करता है जो वेब-उन्मुख react-intlayer प्रदाता नहीं करता है।

CMS SDK: Intlayer को हेडलेस कंटेंट डेटाबेस के रूप में उपयोग करें

Intlayer v9 में @intlayer/api के भीतर एक साफ़, स्वतः-प्रमाणित SDK शामिल है, जिससे आप CMS के साथ प्रोग्रामेटिक रूप से इंटरैक्ट कर सकते हैं — प्रोजेक्ट्स प्राप्त करें, डिक्शनरीज़ प्राप्त करें, और उन्हें अपने सर्वर, स्क्रिप्ट्स या CI से पुश या अपडेट करें। प्रमाणीकरण (OAuth2 client_credentials) आपके लिए संभाला और रिफ्रेश किया जाता है।

SDK को दो अलग-अलग इम्पोर्ट्स में विभाजित किया गया है ताकि आपके बंडल में केवल वही डोमेन शामिल हों जिन्हें आप वास्तव में उपयोग करते हैं:

1. createIntlayerCMS — एक हल्का ऑथेंटिकेटर जो क्रेडेंशियल्स और प्रबंधित टोकन रखता है (कोई डोमेन क्लाइंट बंडल नहीं होता)।
2. dictionaryEndpoint, projectEndpoint, … — प्रति-डोमेन एंडपॉइंट बाइंडर, प्रत्येक अपने स्वयं के सब-पाथ से इम्पोर्ट किया जाता है।

import { createIntlayerCMS } from "@intlayer/api";
import { dictionaryEndpoint } from "@intlayer/api/dictionary";

// कॉन्फ़िगरेशन वैकल्पिक है: क्रेडेंशियल्स INTLAYER_CLIENT_ID /
// INTLAYER_CLIENT_SECRET पर फ़ॉलबैक करते हैं, जिन्हें `@intlayer/config/built` हल करता है।
const cms = createIntlayerCMS();

// पढ़ें
const { data: dictionaries } = await dictionaryEndpoint(cms).getDictionaries();

// लिखें — CMS को डेटाबेस की तरह उपयोग करें
await dictionaryEndpoint(cms).pushDictionaries([myDictionary]);

सुरक्षा: CMS क्रेडेंशियल्स आपके कंटेंट पर लिखने की अनुमति देते हैं। ऑथेंटिकेटर हमेशा केवल सर्वर साइड पर ही बनाएं — clientId / clientSecret को कभी ब्राउज़र पर न भेजें।

स्व-होस्टिंग (Self-Hosting)

Intlayer v9 एक ही कमांड से अपना स्वयं का Intlayer इंस्टेंस चलाने के लिए प्रथम-श्रेणी समर्थन प्रदान करता है — किसी Intlayer Cloud खाते की आवश्यकता नहीं है।

curl -fsSL https://intlayer.org/install.sh | sh

इंस्टॉलर एक docker-compose.yml और एक .env डाउनलोड करता है, आवश्यक सीक्रेट्स (secrets) को स्वचालित रूप से जनरेट करता है, और docker compose up -d चलाता है। सब कुछ — डैशबोर्ड, API, डेटाबेस, ऑब्जेक्ट स्टोरेज, और ट्रांजेक्शनल ईमेल — कंटेनर्स में स्थानीय रूप से चलता है।

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

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

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

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

• Compat Adapter Packages Guide
• Dynamic Dictionaries - Collections & Variants
• Analytics - कंटेंट एक्सपोज़र ट्रैकिंग और A/B टेस्टिंग
• Configuration Reference
• CMS SDK - @intlayer/api के साथ प्रोग्रामेटिक एक्सेस
• स्व-होस्टिंग गाइड