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

Intlayer v8 में आपका स्वागत है! यह रिलीज़ डेवलपर अनुभव को बेहतर बनाने (स्वचालित सामग्री पहचान के साथ), डेटा अखंडता सुनिश्चित करने (स्कीमा सत्यापन के साथ), और डिक्शनरी प्रबंधन पर अधिक नियंत्रण प्रदान करने पर केंद्रित है।

सामग्री तालिका

रिच सामग्री विकास: Markdown और HTML

Intlayer v8 रिच सामग्री को संभालने के तरीके में बड़े सुधार लाता है, HTML नोड्स (जो v7 में नहीं थे) पेश करता है और Markdown नोड्स (जो v7 में थे लेकिन अब उन्नत किए गए हैं) के साथ API को एकीकृत करता है।

एकीकृत .use() API

हमने Markdown और HTML नोड्स दोनों के लिए .use() विधि पेश की है। यह विधि आपको रेंडरिंग के दौरान उपयोग किए जाने वाले HTML टैग या घटकों को कस्टमाइज़ करने की अनुमति देती है।

• घटक प्रतिस्थापन: आप आसानी से HTML टैग या कस्टम घटकों को अपने स्वयं के फ्रेमवर्क घटकों से बदल सकते हैं (उदा., <a> को NextLink से या <CustomCmp> को React घटक से बदलें)।
• टाइप सुरक्षा: घटक प्रदान करने के लिए सभी फ़ंक्शन पूरी तरह से टाइप किए गए हैं, यह सुनिश्चित करते हुए कि आप सही प्रॉप्स प्राप्त करते हैं।

डिफ़ॉल्ट रेंडरिंग व्यवहार

v7 में, यदि कोई प्रदाता परिभाषित नहीं था, तो Markdown नोड्स को कच्ची स्ट्रिंग्स के रूप में रेंडर किया जाता था, जिन्हें अक्सर पार्स करने के लिए बाहरी लाइब्रेरी की आवश्यकता होती थी।

v8 में, Intlayer अपना स्वयं का आंतरिक Markdown पार्सर शामिल करता है। डिफ़ॉल्ट रूप से, Markdown नोड्स अब बिना किसी बाहरी लाइब्रेरी की आवश्यकता के सीधे HTML के रूप में रेंडर किए जाते हैं।

नए रेंडरर और प्रदाता यूटिलिटीज

हमने आपको मानक useIntlayer प्रवाह के बाहर अधिक नियंत्रण देने के लिए नए स्टैंडअलोन रेंडरर फ़ंक्शन और घटक पेश किए हैं।

• Markdown: MarkdownRenderer, useMarkdownRenderer, renderMarkdown (नोट: MarkdownProvider v7 में मौजूद था लेकिन अब इन नए टूल्स के साथ एकीकृत होता है)।
• HTML: HTMLRenderer, useHTMLRenderer, renderHTML, HTMLProvider

उदाहरण: Markdown रेंडरिंग टूल्स

import { MarkdownRenderer } from "react-intlayer/markdown";

<MarkdownRenderer
forceBlock={true}
components={{
  h1: ({ children }) => <h1 className="text-2xl">{children}</h1>
}}
>
{"# मेरा शीर्षक"}
</MarkdownRenderer>

import { useMarkdownRenderer } from "react-intlayer/markdown";

const renderMarkdown = useMarkdownRenderer({
components: {
  h1: ({ children }) => <h1 className="text-red-500">{children}</h1>
}
});

return <div>{renderMarkdown("# मेरा शीर्षक")}</div>;

import { renderMarkdown } from "react-intlayer/markdown";

const html = renderMarkdown("# मेरा शीर्षक", {
forceBlock: true
});

<script setup>
import { MarkdownRenderer } from "vue-intlayer/markdown";
</script>

<template>
<MarkdownRenderer :forceBlock="true" content="# मेरा शीर्षक" />
</template>

<script>
import { MarkdownRenderer } from "svelte-intlayer/markdown";
</script>

<MarkdownRenderer forceBlock={true} value="# मेरा शीर्षक" />

<script>
import { useMarkdownRenderer } from "svelte-intlayer/markdown";
const render = useMarkdownRenderer();
</script>

{@html render("# मेरा शीर्षक")}

<script>
import { renderMarkdown } from "svelte-intlayer/markdown";
</script>

{@html renderMarkdown("# मेरा शीर्षक")}

import { Component } from "@angular/core";
import { IntlayerMarkdownService } from "angular-intlayer";

@Component({ ... })
export class MyComponent {
constructor(private markdownService: IntlayerMarkdownService) {}

render(markdown: string) {
  return this.markdownService.renderMarkdown(markdown);
}
}

import { MarkdownRenderer } from "solid-intlayer/markdown";

<MarkdownRenderer forceBlock={true}>
{"# मेरा शीर्षक"}
</MarkdownRenderer>

import { useMarkdownRenderer } from "solid-intlayer/markdown";

const render = useMarkdownRenderer();

return <div>{render("# मेरा शीर्षक")}</div>;

import { renderMarkdown } from "solid-intlayer/markdown";

return <div>{renderMarkdown("# मेरा शीर्षक")}</div>;

import { MarkdownRenderer } from "preact-intlayer/markdown";

<MarkdownRenderer forceBlock={true}>
{"# मेरा शीर्षक"}
</MarkdownRenderer>

import { useMarkdownRenderer } from "preact-intlayer/markdown";

const render = useMarkdownRenderer();

return <div>{render("# मेरा शीर्षक")}</div>;

import { renderMarkdown } from "preact-intlayer/markdown";

return <div>{renderMarkdown("# मेरा शीर्षक")}</div>;

उदाहरण: HTML रेंडरिंग टूल्स

import { HTMLRenderer } from "react-intlayer/html";

<HTMLRenderer
components={{
  p: ({ children }) => <p className="mb-4">{children}</p>
}}
>
{"<p>Hello World</p>"}
</HTMLRenderer>

import { useHTMLRenderer } from "react-intlayer/html";

const renderHTML = useHTMLRenderer({
components: {
  strong: ({ children }) => <b className="font-bold">{children}</b>
}
});

return <div>{renderHTML("<p>नमस्ते <strong>दुनिया</strong></p>")}</div>;

import { renderHTML } from "react-intlayer/html";

const html = renderHTML("<p>Hello World</p>");

<script setup>
import { HTMLRenderer } from "vue-intlayer/html";
</script>

<template>
<HTMLRenderer content="<p>Hello World</p>" />
</template>

<script>
import { HTMLRenderer } from "svelte-intlayer/html";
</script>

<HTMLRenderer value="<p>Hello World</p>" />

<script>
import { useHTMLRenderer } from "svelte-intlayer/html";
const render = useHTMLRenderer();
</script>

{@html render("<p>Hello World</p>")}

<script>
import { renderHTML } from "svelte-intlayer/html";
</script>

{@html renderHTML("<p>Hello World</p>")}

<div [innerHTML]="'<p>Hello World</p>'"></div>

import { HTMLRenderer } from "solid-intlayer/html";

<HTMLRenderer>
{"<p>Hello World</p>"}
</HTMLRenderer>

import { useHTMLRenderer } from "solid-intlayer/html";

const render = useHTMLRenderer();

return <div>{render("<p>Hello World</p>")}</div>;

import { renderHTML } from "solid-intlayer/html";

return <div>{renderHTML("<p>Hello World</p>")}</div>;

import { HTMLRenderer } from "preact-intlayer/html";

<HTMLRenderer>
{"<p>Hello World</p>"}
</HTMLRenderer>

import { useHTMLRenderer } from "preact-intlayer/html";

const render = useHTMLRenderer();

return <div>{render("<p>Hello World</p>")}</div>;

import { renderHTML } from "preact-intlayer/html";

return <div>{renderHTML("<p>Hello World</p>")}</div>;

अधिक जानकारी के लिए, देखें HTML सामग्री दस्तावेज़ और Markdown दस्तावेज़।

YAML और Markdown सामग्री फ़ाइलें (v8.10.0)

अब आप सीधे .content.md और .content.yaml फ़ाइल एक्सटेंशन का उपयोग करके सामग्री घोषित कर सकते हैं। यह लंबी सामग्री, ब्लॉग, दस्तावेज़ और गोपनीयता नीतियों के लिए बिल्कुल सही है।

ये फ़ाइलें विज़ुअल एडिटर (Visual Editor) से पूरी तरह से संपादन योग्य हैं, जो गैर-तकनीकी टीम के सदस्यों के लिए एक सुव्यवस्थित वर्कफ़्लो प्रदान करती हैं।

अधिक जानकारी के लिए, YAML सामग्री फ़ाइल दस्तावेज़ और Markdown सामग्री फ़ाइल दस्तावेज़ देखें।

कस्टम URL पुनर्लेखन

Intlayer v8 कस्टम URL पुनर्लेखन (Custom URL Rewrites) के लिए समर्थन पेश करता है, जिससे आप ऐसी भाषा-विशिष्ट पथ परिभाषित कर सकते हैं जो मानक /locale/path संरचना से भिन्न होते हैं। यह स्थानीय SEO को बेहतर बनाने और गैर-अंग्रेजी बोलने वालों के लिए अधिक प्राकृतिक उपयोगकर्ता अनुभव प्रदान करने के लिए एक शक्तिशाली विशेषता है।

v8 में मुख्य सुधार:

• फ्रेमवर्क फ़ॉर्मेटर्स: नए nextjsRewrite, svelteKitRewrite, reactRouterRewrite, vueRouterRewrite, solidRouterRewrite, tanstackRouterRewrite, nuxtRewrite, और viteRewrite प्रत्येक राउटर के लिए स्वाभाविक पैटर्न सिंटैक्स प्रदान करने के लिए।
• useRewriteURL हुक: एक नया क्लाइंट-साइड हुक जो बिना राउटर नेविगेशन ट्रिगर किए एड्रेस बार को "सुंदर" स्थानीयकृत URL में चुपचाप सुधारता है।
• स्वचालित SEO रीडायरेक्ट्स: अंतर्निहित प्रॉक्सी अब स्वचालित रूप से उपयोगकर्ताओं को मैन्युअल रूप से टाइप किए गए कैनोनिकल पथों (उदा., /fr/about) से उनके सुंदर स्थानीयकृत संस्करणों (उदा., /fr/a-propos) पर रीडायरेक्ट करते हैं।

उदाहरण कॉन्फ़िगरेशन:

import { Locales, type IntlayerConfig } from "intlayer";
import { nextjsRewrite } from "intlayer/routing";

const config: IntlayerConfig = {
internationalization: {
  locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
  defaultLocale: Locales.ENGLISH,
},
routing: {
  mode: "prefix-no-default",
  rewrite: nextjsRewrite({
    "/[locale]/about": {
      fr: "/[locale]/a-propos",
      es: "/[locale]/acerca-de",
    },
    "/[locale]/products/[id]": {
      fr: "/[locale]/produits/[id]",
      es: "/[locale]/productos/[id]",
    },
  }),
},
};

export default config;

import { Locales, type IntlayerConfig } from "intlayer";
import { reactRouterRewrite } from "intlayer/routing";

const config: IntlayerConfig = {
internationalization: {
  locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
  defaultLocale: Locales.ENGLISH,
},
routing: {
  mode: "prefix-all",
  rewrite: reactRouterRewrite({
    "/:locale/about": {
      fr: "/:locale/a-propos",
      es: "/:locale/acerca-de",
    },
    "/:locale/products/:id": {
      fr: "/:locale/produits/:id",
      es: "/:locale/productos/:id",
    },
  }),
},
};

export default config;

import { Locales, type IntlayerConfig } from "intlayer";
import { viteRewrite } from "intlayer/routing";

const config: IntlayerConfig = {
internationalization: {
  locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
  defaultLocale: Locales.ENGLISH,
},
routing: {
  mode: "prefix-all",
  rewrite: viteRewrite({
    "/:locale/about": {
      fr: "/:locale/a-propos",
      es: "/:locale/acerca-de",
    },
    "/:locale/products/:id": {
      fr: "/:locale/produits/:id",
      es: "/:locale/productos/:id",
    },
  }),
},
};

export default config;

import { Locales, type IntlayerConfig } from "intlayer";
import { nuxtRewrite } from "intlayer/routing";

const config: IntlayerConfig = {
internationalization: {
  locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
  defaultLocale: Locales.ENGLISH,
},
routing: {
  mode: "prefix-all",
  rewrite: nuxtRewrite({
    "/[locale]/about": {
      fr: "/[locale]/a-propos",
      es: "/[locale]/acerca-de",
    },
    "/[locale]/products/[id]": {
      fr: "/[locale]/produits/[id]",
      es: "/[locale]/productos/[id]",
    },
  }),
},
};

export default config;

import { Locales, type IntlayerConfig } from "intlayer";
import { svelteKitRewrite } from "intlayer/routing";

const config: IntlayerConfig = {
internationalization: {
  locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
  defaultLocale: Locales.ENGLISH,
},
routing: {
  mode: "prefix-all",
  rewrite: svelteKitRewrite({
    "/[locale]/about": {
      fr: "/[locale]/a-propos",
      es: "/[locale]/acerca-de",
    },
    "/[locale]/products/[id]": {
      fr: "/[locale]/produits/[id]",
      es: "/[locale]/productos/[id]",
    },
  }),
},
};

export default config;

यह विशेषता Intlayer प्रॉक्सी के माध्यम से Next.js और Vite में डिफ़ॉल्ट रूप से समर्थित है, और इसे अन्य राउटर्स जैसे TanStack Router, React Router, Vue Router, SvelteKit, और Solid Router में आसानी से एकीकृत किया जा सकता है।

अधिक जानकारी और एकीकरण मार्गदर्शिकाओं के लिए, देखें कस्टम URL पुनर्लेखन दस्तावेज़।

उन्नत इनसर्शन मान (Enhanced Insertion Values)

v8 में, इनसर्शन मान अब स्ट्रिंग और नंबर के अलावा React तत्वों (या Vue नोड्स) को भी स्वीकार कर सकते हैं। यह आपको अपने इनसर्शन टेम्प्लेट्स में सीधे समृद्ध, इंटरैक्टिव घटकों को इंजेक्ट करने की अनुमति देता है।

Intlayer अब इनसर्शन के भीतर नेस्टेड React और Preact नोड्स को मजबूती से संभालता है, यह सुनिश्चित करते हुए कि जटिल UI संरचनाएं संरक्षित रहें और सही ढंग से रेंडर हों।

उदाहरण:

import { insert } from "intlayer";

export default {
  key: "my-key",
  content: {
    myInsertion: insert("Hi {{name}}"),
  },
};

import { useIntlayer } from "next-intlayer";

const { myInsertion } = useIntlayer("my-key");

return (
<div>
  {myInsertion({
    name: 2, // number
    // or
    name: "John", // string
    // or
    name: <span>John</span>, // React तत्व
  })}
</div>
);

import { useIntlayer } from "react-intlayer";

const { myInsertion } = useIntlayer("my-key");

return (
<div>
  {myInsertion({
    name: 2, // number
    // or
    name: "John", // string
    // or
    name: <span>John</span>, // React तत्व
  })}
</div>
);

<script setup>
import { h } from "vue";
import { useIntlayer } from "vue-intlayer";

const { myInsertion } = useIntlayer("my-key");
</script>

<template>
<div>
  <component
    :is="myInsertion({
      name: 2,
      // or
      name: 'John',
      // or
      name: h('span', 'John'),
    })"
  />
</div>
</template>

import { useIntlayer } from "preact-intlayer";

const { myInsertion } = useIntlayer("my-key");

return (
<div>
  {myInsertion({
    name: 2, // number
    // or
    name: "John", // string
    // or
    name: <span>John</span>, // Preact तत्व
  })}
</div>
);

import { useIntlayer } from "solid-intlayer";

const { myInsertion } = useIntlayer("my-key");

return (
<div>
  {myInsertion({
    name: 2, // number
    // or
    name: "John", // string
    // or
    name: <span>John</span>, // Solid तत्व
  })}
</div>
);

<script>
import { useIntlayer } from "svelte-intlayer";

const { myInsertion } = useIntlayer("my-key");
</script>

<div>
{myInsertion({
  name: 2, // number
  // or
  name: "John", // string
})}
</div>

import { Component } from "@angular/core";
import { useIntlayer } from "angular-intlayer";

@Component({
selector: "app-insertion-example",
template: `
  <div>
    {{ content().myInsertion({
      name: 'John'
    }) }}
  </div>
`,
})
export class InsertionExampleComponent {
content = useIntlayer("my-key");
}

Unicode CLDR बहुवचन नियम (v8.8.0)

Unicode CLDR प्रोजेक्ट द्वारा परिभाषित बहुवचन नियमों के आधार पर एक नया plural नोड हेल्पर पेश किया गया है, जो जटिल भाषाओं के लिए समर्थन में सुधार करता है।

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

const openingsContent = {
  key: "total_openings",
  content: {
    totalOpenings: t({
      en: plural({
        one: "{{count}} opening",
        other: "{{count}} openings",
      }),
      fr: plural({
        one: "{{count}} offre",
        other: "{{count}} offres",
      }),
    }),
  },
} satisfies Dictionary;

export default openingsContent;

इसके बाद आप अपने फ्रेमवर्क घटक में गतिशील रूप से (dynamically) काउंट पास कर सकते हैं:

import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
  const { totalOpenings } = useIntlayer("total_openings");

  return (
    <div>
      {/* अंग्रेजी में:                                  */}
      {/*  count=0  → "0 openings"   (other)           */}
      {/*  count=1  → "1 opening"    (one)             */}
      {/*  count=2  → "2 openings"   (other)           */}
      {/*  count=21 → "21 openings"  (other)           */}
      <p>{totalOpenings(count)}</p>
    </div>
  );
};

अधिक जानकारी के लिए, बहुवचनीकरण दस्तावेज़ (Pluralization Documentation) देखें।

सामग्री स्कीमा सत्यापन

Intlayer v8 शब्दकोशों (dictionaries) के लिए स्कीमा सत्यापन पेश करता है। अब आप Zod का उपयोग करके अपने कॉन्फ़िगरेशन में पुन: प्रयोज्य सत्यापन स्कीमा परिभाषित कर सकते हैं और उन्हें अपनी सामग्री फ़ाइलों पर लागू कर सकते हैं। यह सुनिश्चित करता है कि आपकी सामग्री हमेशा अपेक्षित संरचना का पालन करे, बिल्ड समय पर त्रुटियों को पकड़ ले।

1. स्कीमा परिभाषित करें

अपने स्कीमा intlayer.config.ts में परिभाषित करें:

import { z } from "zod";

export default {
  schemas: {
    "seo-metadata": z.object({
      title: z.string().min(50).max(60),
      description: z.string().min(150).max(160),
    }),
  },
};

2. डिक्शनरी पर स्कीमा लागू करें

अपनी डिक्शनरी परिभाषा में स्कीमा कुंजी का संदर्भ लें:

import { type Dictionary } from "intlayer";

const aboutPageMetaContent = {
  key: "about-page-meta",
  schema: "seo-metadata", // <--
  content: {
    title: "हमारी कंपनी के बारे में - हमारे बारे में और जानें",
    description: "हमारी कंपनी के मिशन, मूल्यों और टीम की खोज करें।",
  },
} satisfies Dictionary;

export default aboutPageMetaContent;

यदि सामग्री स्कीमा से मेल नहीं खाती (उदा., शीर्षक बहुत छोटा है), तो बिल्ड प्रक्रिया त्रुटि उत्पन्न करेगी।

TypeScript: IntlayerNode प्रिमिटिव एक्सेसर्स (Primitive Accessors)

सामग्री नोड्स पर सीधे प्रिमिटिव जावास्क्रिप्ट विधियों (primitive JavaScript methods) को कॉल करने की अनुमति देने के लिए IntlayerNode प्रकार को अपडेट किया गया है। यह आपकी स्थानीयकृत सामग्री के साथ सीधे बातचीत करना संभव बनाता है जैसे कि यह एक मानक स्ट्रिंग, नंबर, बूलियन या एरे प्रिमिटिव हो।

React, Preact, Solid, Svelte, Vue, और Angular में समर्थित।

स्ट्रिंग उदाहरण (String Example)

content.placeholder; // IntlayerNode<string> लौटाता है
content.placeholder.value; // string लौटाता है
content.placeholder.toString(); // string लौटाता है
content.placeholder.toLowerCase(); // string लौटाता है
String(content.placeholder); // string लौटाता है
content.placeholder.toUpperCase(); // अपरकेस स्ट्रिंग लौटाता है
content.placeholder.replace("a", "b"); // संशोधित स्ट्रिंग लौटाता है

एरे उदाहरण (Array Example)

content.myArrayOfString             // IntlayerNode<Array<string>> लौटाता है
content.myArrayOfString.find(...)   // तत्व (element) लौटाता है
content.myArrayOfString.join(', ')  // संयुक्त स्ट्रिंग लौटाता है

उन्नत स्वचालित सामग्री पहचान

v8 में, Intlayer आपकी सामग्री स्ट्रिंग्स में मार्कडाउन सिंटैक्स, HTML टैग और वेरिएबल इनसर्शन को बुद्धिमानी से पहचानता है। इसका मतलब है कि आप अक्सर md(), html(), या insert() जैसे सहायक कार्यों को छोड़ सकते हैं।

यह व्यवहार डिफ़ॉल्ट रूप से सक्षम है। अब आप इस पहचान को या तो वैश्विक स्तर पर अपने intlayer.config.ts में या प्रति डिक्शनरी के आधार पर सूक्ष्म रूप से ट्यून कर सकते हैं।

सूक्ष्म नियंत्रण

आप विशिष्ट प्रकार के परिवर्तनों को सक्षम या अक्षम कर सकते हैं:

export default {
  dictionary: {
    // contentAutoTransformation: false (default)
    contentAutoTransformation: {
      markdown: true,
      html: true,
      insertion: false, // स्वचालित इनसर्शन पहचान अक्षम करें
    },
  },
};

v7 व्यवहार (मैनुअल रैपिंग):

import { md, insert } from "intlayer";

export default {
  key: "my-key",
  content: {
    myMarkdown: md("## Hello World"),
    myInsertion: insert("Hi {{name}}"),
  },
};

v8 व्यवहार (स्वचालित पहचान):

export default {
  key: "my-key",
  contentAutoTransformation: true, // डिक्शनरी परिभाषा या intlayer.config.ts में वैश्विक स्तर पर भी सेट किया जा सकता है
  content: {
    myMarkdown: "## Hello World", // स्वचालित रूप से मार्कडाउन के रूप में पहचाना गया
    myHTML: "<p>Hello World</p>", // स्वचालित रूप से HTML के रूप में पहचाना गया
    myInsertion: "Hi {{name}}", // स्वचालित रूप से इनसर्शन के रूप में पहचाना गया
  },
};

अंतर्निहित JSON परिणाम समान रहता है, रेंडरिंग के लिए आवश्यक समृद्ध प्रकार की जानकारी को सुरक्षित रखते हुए:

{
  "key": "my-key",
  "content": {
    "myMarkdown": {
      "nodeType": "markdown",
      "markdown": "## Hello World"
    },
    "myHTML": {
      "nodeType": "html",
      "html": "<p>Hello World</p>"
    },
    "myInsertion": {
      "nodeType": "insertion",
      "insertion": "Hi {{name}}"
    }
  }
}

स्थानीयकरण: नया useIntl हुक

React, Next.js और Vue में अब एक नया useIntl() हुक उपलब्ध है। यह एक स्थानीय-बद्ध Intl ऑब्जेक्ट प्रदान करता है जो स्वचालित रूप से नंबर, तिथियों और बहुत कुछ को फॉर्मेट करने के लिए वर्तमान भाषा का उपयोग करता है, बिना मैन्युअल रूप से लोकेल पास करने की आवश्यकता के।

import { useIntl } from "next-intlayer";

const intl = useIntl();

const formattedPrice = new intl.NumberFormat({
style: "currency",
currency: "USD",
}).format(123.45);

import { useIntl } from "react-intlayer";

const intl = useIntl();

const formattedPrice = new intl.NumberFormat({
style: "currency",
currency: "USD",
}).format(123.45);

<script setup>
import { useIntl } from "vue-intlayer";

const intl = useIntl();

const formattedPrice = new intl.NumberFormat({
style: "currency",
currency: "USD",
}).format(123.45);
</script>

import { useIntl } from "preact-intlayer";

const intl = useIntl();

const formattedPrice = new intl.NumberFormat({
style: "currency",
currency: "USD",
}).format(123.45);

import { useIntl } from "solid-intlayer";

const intl = useIntl();

const formattedPrice = new intl.NumberFormat({
style: "currency",
currency: "USD",
}).format(123.45);

<script>
import { useIntl } from "svelte-intlayer";

const intl = useIntl();

const formattedPrice = new intl.NumberFormat({
  style: "currency",
  currency: "USD",
}).format(123.45);
</script>

import { Component, computed } from "@angular/core";
import { useIntl } from "angular-intlayer";

@Component({
selector: "app-intl-example",
template: `<div>{{ formattedPrice() }}</div>`,
})
export class IntlExampleComponent {
intl = useIntl();

formattedPrice = computed(() =>
  new (this.intl().NumberFormat)({
    style: "currency",
    currency: "USD",
  }).format(123.45)
);
}

टूलिंग: VSCode एक्सटेंशन सुधार

Intlayer VSCode एक्सटेंशन को आपके अंतर्राष्ट्रीयकरण वर्कफ़्लो को सुव्यवस्थित करने के लिए v8 में बड़े अपडेट प्राप्त हुए हैं:

• प्रारंभिक समय: प्रोजेक्ट खोलते समय प्रदर्शन में सुधार।
• कैशिंग: लगभग तात्कालिक सत्यापन और ऑटोकम्प्लीशन के लिए उन्नत कैशिंग लेयर।
• अनुपयोगी कुंजियाँ और डुप्लिकेट कुंजियाँ पहचान: आपके शब्दकोशों में अनुपयोगी कुंजियों और डुप्लिकेट कुंजियों को स्वचालित रूप से पहचानने की नई विशेषताएं, जो आपकी सामग्री को साफ़ और कुशल रखने में आपकी सहायता करती हैं।

टूलिंग: C++ वॉचर और OXC-आधारित LSP (v8.12.0)

Intlayer v8.12.0 डेवलपर अनुभव में बड़े सुधार लाता है:

• Parcel Watcher: सामग्री वॉचर (content watcher) को chokidar से @parcel/watcher पर माइग्रेट कर दिया गया है, जो तेज़ अपडेट और काफी कम मेमोरी खपत प्रदान करने के लिए मूल C++ फ़ाइल वॉचिंग का लाभ उठाता है।
• नया लैंग्वेज सर्वर प्रोटोकॉल (LSP): एक बिल्कुल नया LSP अब उपलब्ध है। OXC-आधारित पार्सिंग के साथ निर्मित, यह आपके IDE और AI एजेंटों को useIntlayer('my-key') कॉल को उनकी संबंधित .content फ़ाइलों के साथ सहजता से जोड़ने में मदद करता है, और इसके विपरीत भी।

अधिक जानकारी के लिए, LSP दस्तावेज़ देखें।

कंपाइलर अनुकूलन

Intlayer v8 में मार्कडाउन और HTML कंपाइलर के लिए एक नई कैशिंग लेयर शामिल है। यह सुनिश्चित करता है कि एक ही कॉन्फ़िगरेशन के साथ समान सामग्री स्ट्रिंग्स केवल एक बार पार्स की जाती हैं, जिससे री-रेंडर के दौरान या कई स्थानों पर समान सामग्री का उपयोग करते समय ओवरहेड काफी कम हो जाता है।

const {
intlayerExtractBabelPlugin,
intlayerOptimizeBabelPlugin,
getExtractPluginOptions,
getOptimizePluginOptions,
} = require('@intlayer/babel');

module.exports = {
presets: ['next/babel'],
plugins: [
  // घटकों से सामग्री को शब्दकोशों में निकालें
  [intlayerExtractBabelPlugin, getExtractPluginOptions()],
  // useIntlayer को सीधे शब्दकोश आयात से बदलकर आयात अनुकूलित करें
  [intlayerOptimizeBabelPlugin, getOptimizePluginOptions()],
],
};

import { defineConfig } from 'vite';
import { intlayer, intlayerCompiler } from "vite-intlayer";

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

प्रायोगिक बिल्ड अनुकूलन: Minify और Purge (v8.7.0)

Intlayer v8.7.0 आपके प्रोडक्शन बंडल को अनुकूलित करने के लिए डिज़ाइन की गई आपकी intlayer.config.ts में नई प्रायोगिक बिल्ड सुविधाएँ पेश करता है:

• डिक्शनरी मिनिफिकेशन (Dictionary Minification): आकार घटाने के लिए डिक्शनरी फ़ाइलों को छोटा (minify) करता है।
• अनुपयोगी कुंजी पर्जिंग (Unused Key Purging): डिक्शनरी से अनुपयोगी अनुवाद कुंजियों को स्कैन और हटाता है, सक्रिय कुंजियों का नाम बदलकर छोटे वर्णों में कर देता है (उदा. "products" -> "a", "pricing" -> "b")। यह बंडल के आकार को 5% तक कम कर देता है।
• TypeScript जांच अक्षम करें: संकलन (compilation) चरण के दौरान TypeScript टाइपचेकिंग को अक्षम करके बिल्ड को तेज़ करें।

import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [Locales.ENGLISH, Locales.FRENCH],
    defaultLocale: Locales.ENGLISH,
  },
  dictionary: {
    importMode: "dynamic",
  },
  build: {
    /**
     * बंडल के आकार को कम करने के लिए डिक्शनरी को छोटा (minify) करें।
     */
    minify: true,

    /**
     * डिक्शनरी में अनुपयोगी कुंजियों को हटाएँ (purge करें)
     */
    purge: true,

    /**
     * इंगित करता है कि क्या बिल्ड को TypeScript प्रकारों की जांच करनी चाहिए
     */
    checkTypes: false,
  },
};

export default config;

लचीलापन: एकीकृत आयात मोड (Unified Import Mode)

live बूलियन प्रॉपर्टी को अधिक व्यापक importMode प्रॉपर्टी के पक्ष में हटा दिया गया है। यह शब्दकोशों को लोड करने के तरीके की स्पष्ट परिभाषा की अनुमति देता है: स्थिर रूप से, गतिशील रूप से, या लाइव सिंक के माध्यम से।

मोड (Modes)

• static (डिफ़ॉल्ट): डिक्शनरी को बिल्ड समय पर बंडल किया जाता है। प्रदर्शन के लिए सर्वोत्तम।
• dynamic: शब्दकोश रनटाइम पर लोड किया जाता है (उदा., JSON फेच या सस्पेंस के माध्यम से)।
• fetch: डिक्शनरी रनटाइम पर CMS/सर्वर से प्राप्त की जाती है और सिंक्रनाइज़ की जाती है।

माइग्रेशन:

नोट: Intlayer v8 में, importMode प्रॉपर्टी को build कॉन्फ़िगरेशन से intlayer.config.ts में dictionary कॉन्फ़िगरेशन में ले जाया गया है। यह आपको अपने सभी शब्दकोशों के लिए एक डिफ़ॉल्ट आयात मोड परिभाषित करने की अनुमति देता है, जबकि अभी भी प्रति-शब्दकोश आधार पर इसे ओवरराइड करने में सक्षम है।

वैश्विक कॉन्फ़िगरेशन उदाहरण:

export default {
  dictionary: {
    importMode: "dynamic", // वैश्विक डिफ़ॉल्ट
  },
  // ...
};

डिक्शनरी उदाहरण:

export default {
    key: 'my-key',
    importMode: "fetch", // वैश्विक कॉन्फ़िग को ओवरराइड करता है
    content: { ... }
}

शब्दकोश स्थान नियंत्रण (Dictionary Location Control)

v8 शब्दकोशों के रहने और वे कैसे सिंक्रनाइज़ होते हैं, इसे स्पष्ट रूप से प्रबंधित करने के लिए location प्रॉपर्टी पेश करता है। यह स्थानीय फ़ाइलों और दूरस्थ CMS सामग्री दोनों से जुड़े हाइब्रिड वर्कफ़्लो के लिए विशेष रूप से उपयोगी है।

विकल्प

• local: शब्दकोश केवल स्थानीय रूप से मौजूद है। इसे दूरस्थ CMS पर पुश नहीं किया जाएगा।
• remote: शब्दकोश को दूरस्थ रूप से प्रबंधित किया जाता है। एक बार CMS पर पुश करने के बाद, इसे स्थानीय से अलग कर दिया जाएगा। दूरस्थ शब्दकोश को CMS से खींचा (pull) जाएगा।
• local_and_remote: शब्दकोश दोनों स्थानों पर मौजूद है। स्थानीय परिवर्तन पुश किए जाते हैं, और दूरस्थ परिवर्तन खींचे (pull) जाते हैं (सिंक्रनाइज़ किए जाते हैं)।

उदाहरण:

export default {
    key: 'my-key',
    location: "local", // इस शब्दकोश को केवल स्थानीय रखें
    content: { ... }
}

सिस्टम कॉन्फ़िगरेशन पृथक्करण

Intlayer v8 सामग्री स्रोतों के कॉन्फ़िगरेशन को आंतरिक सिस्टम और आउटपुट पथों से अलग करता है। यह content प्रॉपर्टी को व्यवस्थित करता है और यह स्पष्ट करता है कि कौन सी सेटिंग्स उपयोगकर्ता प्रबंधन के लिए हैं बनाम जो Intlayer सिस्टम द्वारा प्रबंधित की जाती हैं।

निम्नलिखित प्रॉपर्टीज को content से intlayer.config.ts में एक नई system प्रॉपर्टी में स्थानांतरित कर दिया गया है:

• dictionariesDir
• moduleAugmentationDir
• unmergedDictionariesDir
• typesDir
• mainDir
• configDir
• cacheDir
• outputFilesPatternWithPath

v7 व्यवहार:

export default {
  content: {
    contentDir: ["src"],
    dictionariesDir: ".intlayer/dictionary", // स्रोत कॉन्फ़िग के साथ मिश्रित
  },
};

v8 व्यवहार:

export default {
  content: {
    contentDir: ["src"],
  },
  system: {
    dictionariesDir: ".intlayer/dictionary", // स्पष्ट रूप से अलग
  },
};

सामग्री और कोड निर्देशिका पृथक्करण

Intlayer v8 सामग्री परिभाषा फ़ाइलों के कॉन्फ़िगरेशन को कोड परिवर्तन के कॉन्फ़िगरेशन से अलग करता है। यह अधिक सटीक निगरानी और स्कैनिंग की अनुमति देता, जिससे बिल्ड प्रदर्शन में सुधार होता है।

पहले, contentDir का उपयोग .content.* फ़ाइलों को देखने और useIntlayer कॉल्स के लिए कोड स्कैन करने दोनों के लिए किया जाता था। अब:

• contentDir: विशेष रूप से आपकी सामग्री घोषणा फ़ाइलों के लिए।
• codeDir: विशेष रूप से आपके एप्लिकेशन कोड के लिए जिसे परिवर्तन की आवश्यकता है (उदा., प्रूनिंग, अनुकूलन)।

माइग्रेशन:

यदि आपने पहले contentDir सेट किया था, तो Intlayer v8 इसे codeDir के लिए डिफ़ॉल्ट के रूप में भी उपयोग करेगा, लेकिन एक चेतावनी लॉग करेगा। आपको अपने कॉन्फ़िगरेशन में codeDir को स्पष्ट रूप से परिभाषित करना चाहिए।

v7 व्यवहार:

export default {
  content: {
    contentDir: ["src", "@packages/design-system"], // सामग्री और कोड दोनों के लिए उपयोग किया जाता है
  },
};

v8 व्यवहार:

export default {
  content: {
    contentDir: ["src/content", "@packages/design-system"], // केवल यहाँ src/content/*.content.* फ़ाइलों और @packages/design-system/dist/*.content.* फ़ाइलों की निगरानी करें
    codeDir: ["src", "@packages/design-system"], // केवल यहाँ कोड परिवर्तन के लिए स्कैन करें और @packages/design-system/src/*.content.* फ़ाइलों को स्कैन करें
  },
};

फ्रेमवर्क: Svelte सुधार

Svelte में मार्कडाउन और HTML सामग्री अब स्ट्रिंगिफ़ाइड होने पर स्वचालित रूप से HTML में पार्स हो जाती है। यह Svelte के {@html} सिंटैक्स के साथ उपयोग करना बहुत आसान बनाता है, क्योंकि अब आप सीधे सामग्री नोड पास कर सकते हैं।

Angular समर्थन: Vite बंडलर (v8.11.0)

Angular उपयोगकर्ताओं के लिए, Intlayer अब एक नए कस्टम esbuild प्लगइन के माध्यम से मूल रूप से Vite बंडलर का समर्थन करता, जिससे विकास और बिल्ड समय तेज़ हो जाता है।

कॉन्फ़िगरेशन के विवरण के लिए, Angular पर्यावरण दस्तावेज़ (Angular Environment Documentation) देखें।

साइटमैप जनरेशन (v8.6.0)

Intlayer अब आपके लोकेल्स और राउटिंग मोड के आधार पर स्वचालित रूप से साइटमैप जेनरेट करता है। यह विशेष रूप से TanStack Router जैसे राउटर आर्किटेक्चर में SEO अनुकूलन के लिए उपयोगी है:

import { createFileRoute } from "@tanstack/react-router";
import { generateSitemap } from "intlayer";

const SITE_URL = (
  import.meta.env.VITE_SITE_URL ?? "http://localhost:3000"
).replace(/\/$/, "");

export const Route = createFileRoute("/sitemap.xml")({
  server: {
    handlers: {
      GET: async () => {
        const sitemap = generateSitemap(
          [
            { path: "/", changefreq: "daily", priority: 1.0 },
            { path: "/about", changefreq: "monthly", priority: 0.8 },
          ],
          { siteUrl: SITE_URL }
        );

        return new Response(sitemap, {
          headers: { "Content-Type": "application/xml" },
        });
      },
    },
  },
});

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

कॉन्फ़िगरेशन परिवर्तन

• live प्रॉपर्टी: शब्दकोशों में live प्रॉपर्टी को हटा दिया गया है। इसके बजाय importMode: 'fetch' का उपयोग करें।
• importMode: कॉन्फ़िगरेशन में build.importMode प्रॉपर्टी को हटा दिया गया है। इसके बजाय dictionary.importMode का उपयोग करें।
• contentDir और codeDir: contentDir अब विशेष रूप से सामग्री फ़ाइलों के लिए है। कोड परिवर्तन के लिए एक नई codeDir प्रॉपर्टी जोड़ी गई है। यदि codeDir सेट नहीं है, तो Intlayer contentDir पर वापस आ जाएगा और एक चेतावनी लॉग करेगा।
• स्कीमा सत्यापन: नई schema विशेषता का उपयोग करने के लिए, सुनिश्चित करें कि आपने अपने प्रोजेक्ट में zod स्थापित किया है।

उपयोगी लिंक

• Configuration Reference
• Content File Documentation
• HTML Content Documentation
• Markdown Content Documentation
• Custom URL Rewrites Documentation