@intlayer/docs 8.12.5-canary.0 → 9.0.0-canary.10

package/docs/hi/dictionary/translation.md

@@ -85,22 +85,47 @@ export default config;
 
 ## React कंपोनेंट्स में अनुवाद का उपयोग करना
 
-`react-intlayer` के साथ, आप React कंपोनेंट्स में अनुवादों का उपयोग कर सकते हैं। यहाँ एक उदाहरण है:
+<Tabs group="framework">
+  <Tab label="React" value="react">
+
+With `react-intlayer`, you can use translations in React components. Here's an example:
 
 ```jsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
 import { useIntlayer } from "react-intlayer";
 
-javascript fileName="**/*.tsx" codeFormat="typescript"
+const MyComponent: FC = () => {
+  const content = useIntlayer("multi_lang");
+
+  return (
+    <div>
+      <p>{content.welcomeMessage}</p>
+    </div>
+  );
+};
+
+export default MyComponent;
+```
+
+This component fetches the corresponding translation based on the current locale set in your application.
+
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+
+With `next-intlayer`, you can use translations in React Server Components or Client Components. Here's an example in a Client Component:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+"use client";
+
 import type { FC } from "react";
-import { useIntlayer } from "react-intlayer";
+import { useIntlayer } from "next-intlayer";
 
 const MyComponent: FC = () => {
   const content = useIntlayer("multi_lang");
 
   return (
     <div>
-      <p>{content.welcomeMessage}</p> {/* वर्तमान भाषा के अनुसार स्वागत संदेश दिखाता है */}
+      <p>{content.welcomeMessage}</p>
     </div>
   );
 };
@@ -108,65 +133,129 @@ const MyComponent: FC = () => {
 export default MyComponent;
 ```
 
-यह कॉम्पोनेंट आपके एप्लिकेशन में सेट वर्तमान लोकल के आधार पर संबंधित अनुवाद प्राप्त करता है।
+  </Tab>
+  <Tab label="Vue" value="vue">
 
-## कस्टम कंटेंट ऑब्जेक्ट्स
+With `vue-intlayer`, you can use translations in Vue components. Here's an example:
 
-`intlayer` अनुवाद के लिए कस्टम कंटेंट ऑब्जेक्ट्स का समर्थन करता है, जिससे आप अधिक जटिल संरचनाओं को परिभाषित कर सकते हैं और टाइप सुरक्षा सुनिश्चित कर सकते हैं। यहाँ एक कस्टम ऑब्जेक्ट के साथ उदाहरण दिया गया है:
+```vue fileName="**/*.vue"
+<script setup lang="ts">
+import { useIntlayer } from "vue-intlayer";
 
-```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
-import { t, type Dictionary } from "intlayer";
+const content = useIntlayer("multi_lang");
+</script>
 
-interface ICustomContent {
-  title: string;
-  content: string;
-}
+<template>
+  <div>
+    <p>{{ content.welcomeMessage }}</p>
+  </div>
+</template>
+```
 
-const customContent = {
-  key: "custom_content",
-  content: {
-    profileText: t<ICustomContent>({
-      en: {
-        title: "Page Title",
-        content: "Page Content",
-      },
-      fr: {
-        title: "Titre de la Page",
-        content: "Contenu de la Page",
-      },
-      es: {
-        title: "Título de la Página",
-        content: "Contenido de la Página",
-      },
-    }),
-  },
-} satisfies Dictionary;
+  </Tab>
+  <Tab label="Svelte" value="svelte">
 
-export default customContent;
+With `svelte-intlayer`, you can use translations in Svelte components. The hook returns a Svelte store. Here's an example:
+
+```svelte fileName="**/*.svelte"
+<script lang="ts">
+import { useIntlayer } from "svelte-intlayer";
+
+const content = useIntlayer("multi_lang");
+</script>
+
+<div>
+  <p>{$content.welcomeMessage}</p>
+</div>
 ```
 
-```json fileName="**/*.content.json" contentDeclarationFormat="json"
-{
-  "$schema": "https://intlayer.org/schema.json",
-  "key": "custom_content",
-  "content": {
-    "profileText": {
-      "nodeType": "translation",
-      "translation": {
-        "en": {
-          "title": "Page Title",
-          "content": "पृष्ठ सामग्री"
-        },
-        "fr": {
-          "title": "पृष्ठ का शीर्षक",
-          "content": "पृष्ठ की सामग्री"
-        },
-        "es": {
-          "title": "पृष्ठ का शीर्षक",
-          "content": "पृष्ठ की सामग्री"
-        }
-      }
-    }
-  }
+  </Tab>
+  <Tab label="Preact" value="preact">
+
+With `preact-intlayer`, you can use translations in Preact components. Here's an example:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { FC } from "preact";
+import { useIntlayer } from "preact-intlayer";
+
+const MyComponent: FC = () => {
+  const content = useIntlayer("multi_lang");
+
+  return (
+    <div>
+      <p>{content.welcomeMessage}</p>
+    </div>
+  );
+};
+
+export default MyComponent;
+```
+
+  </Tab>
+  <Tab label="Solid" value="solid">
+
+With `solid-intlayer`, you can use translations in SolidJS components. Here's an example:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { Component } from "solid-js";
+import { useIntlayer } from "solid-intlayer";
+
+const MyComponent: Component = () => {
+  const content = useIntlayer("multi_lang");
+
+  return (
+    <div>
+      <p>{content.welcomeMessage}</p>
+    </div>
+  );
+};
+
+export default MyComponent;
+```
+
+  </Tab>
+  <Tab label="Angular" value="angular">
+
+With `angular-intlayer`, you can use translations in Angular components. Here's an example:
+
+```typescript fileName="app.component.ts" codeFormat="typescript"
+import { Component } from "@angular/core";
+import { useIntlayer } from "angular-intlayer";
+
+@Component({
+  selector: "app-my-component",
+  template: `
+    <div>
+      <p>{{ content().welcomeMessage }}</p>
+    </div>
+  `,
+})
+export class MyComponent {
+  content = useIntlayer("multi_lang");
 }
 ```
+
+  </Tab>
+  <Tab label="Vanilla JS" value="vanilla">
+
+With `vanilla-intlayer`, you can use translations by subscribing to content changes. Here's an example:
+
+```typescript fileName="**/*.ts" codeFormat={["typescript", "esm"]}
+import { installIntlayer, useIntlayer } from "vanilla-intlayer";
+
+installIntlayer();
+
+const content = useIntlayer("multi_lang").onChange((newContent) => {
+  document.getElementById("welcome-message")!.textContent = String(
+    newContent.welcomeMessage
+  );
+});
+
+// Initial render
+document.getElementById("welcome-message")!.textContent = String(
+  content.welcomeMessage
+);
+```
+
+  </Tab>
+</Tabs>

package/docs/hi/dynamic_dictionaries/collections.md

@@ -14,7 +14,7 @@ slugs:
   - concept
   - collections
 history:
-  - version: 8.13.0
+  - version: 9.0.0
     date: 2026-06-12
     changes: "संग्रह डिक्शनरी सुविधा का विमोचन"
 author: aymericzip

package/docs/hi/dynamic_dictionaries/index.md

@@ -1,13 +1,12 @@
 ---
 createdAt: 2026-06-12
-updatedAt: 2026-06-12
-title: डायनेमिक डिक्शनरीज़
-description: लचीली, रनटाइम-संचालित i18n सामग्री के निर्माण के लिए Intlayer की तीन डायनेमिक डिक्शनरी सुविधाओं — संग्रह, वेरिएंट और डायनेमिक रिकॉर्ड का अवलोकन।
+updatedAt: 2026-06-26
+title: डायनेमिक डिक्शनरी
+description: Intlayer की डायनेमिक डिक्शनरी सुविधाओं — कलेक्शन और वैरिएंट — का अवलोकन, लचीली, रनटाइम-संचालित i18n सामग्री बनाने के लिए।
 keywords:
-  - डायनेमिक डिक्शनरीज़
-  - संग्रह
-  - वेरिएंट
-  - डायनेमिक रिकॉर्ड
+  - डायनेमिक डिक्शनरी
+  - कलेक्शन
+  - वैरिएंट
   - Intlayer
   - अंतर्राष्ट्रीयकरण
 slugs:
@@ -15,34 +14,41 @@ slugs:
   - concept
   - dynamic-dictionaries
 history:
-  - version: 8.13.0
+  - version: 9.0.0
     date: 2026-06-12
-    changes: "डायनेमिक डिक्शनरी सुविधा का विमोचन"
+    changes: "डायनेमिक डिक्शनरी सुविधा का रिलीज़"
+  - version: 9.1.0
+    date: 2026-06-26
+    changes: "डायनेमिक रिकॉर्ड को वैरिएंट में मिला दिया गया — अब `variant` एक स्ट्रिंग या ऑब्जेक्ट स्वीकार करता है"
 author: aymericzip
 ---
 
-# डायनेमिक डिक्शनरीज़
+# डायनेमिक डिक्शनरी
 
-Intlayer सामग्री को व्यक्त करने के लिए तीन तंत्रों का समर्थन करता है जो प्रति कुंजी एकल स्थिर डिक्शनरी से परे जाते हैं। प्रत्येक को सामग्री फ़ाइल में **शीर्ष-स्तरीय मेटाडेटा फ़ील्ड** के माध्यम से घोषित किया जाता है; किसी रैपर फ़ंक्शन की आवश्यकता नहीं होती है।
+Intlayer ऐसी सामग्री व्यक्त करने के लिए दो तंत्रों का समर्थन करता है जो प्रति key एक ही स्थिर डिक्शनरी से आगे जाती है। प्रत्येक को सामग्री फ़ाइल में एक **शीर्ष-स्तरीय मेटाडेटा फ़ील्ड** के माध्यम से घोषित किया जाता है; किसी रैपर फ़ंक्शन की आवश्यकता नहीं है।
 
-| विशेषता                                                                                                                   | मेटाडेटा फ़ील्ड   | `useIntlayer` में चयनकर्ता |
-| ------------------------------------------------------------------------------------------------------------------------- | ----------------- | -------------------------- |
-| [संग्रह](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/dynamic_dictionaries/collections.md)               | `item: N`         | `{ item: N }`              |
-| [वेरिएंट](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/dynamic_dictionaries/variants.md)                 | `variant: "name"` | `{ variant: "name" }`      |
-| [डायनेमिक रिकॉर्ड](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/dynamic_dictionaries/dynamic_content.md) | `meta: { id, … }` | `{ id, … }`                |
+| सुविधा                                                                                                       | मेटाडेटा फ़ील्ड                         | `useIntlayer` में सेलेक्टर                      |
+| ------------------------------------------------------------------------------------------------------------ | --------------------------------------- | ----------------------------------------------- |
+| [कलेक्शन](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/dynamic_dictionaries/collections.md) | `item: N`                               | `{ item: N }`                                   |
+| [वैरिएंट](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/dynamic_dictionaries/variants.md)    | `variant: "name"` _या_ `variant: { … }` | `{ variant: "name" }` _या_ `{ variant: { … } }` |
 
-तीनों भाषा विकल्प (locale) तर्क के साथ मिलकर काम करते हैं और `importMode` के माध्यम से चुनिंदा / आलसी (lazy) लोडिंग का समर्थन करते हैं।
+दोनों locale तर्क के साथ संयोजित होते हैं और `importMode` के माध्यम से चयनात्मक / आलसी लोडिंग का समर्थन करते हैं।
 
 ## कब किसका उपयोग करें
 
-- **संग्रह (Collections)** — अलग फ़ाइलों में प्रबंधित वस्तुओं की क्रमबद्ध सूची (FAQ प्रविष्टियां, ब्लॉग पोस्ट, उत्पाद)।
-- **वेरिएंट (Variants)** — A/B परीक्षण, मौसमी बैनर, या फीचर फ़्लैग के लिए नामांकित सामग्री विकल्प।
-- **डायनेमिक रिकॉर्ड (Dynamic records)** — अपारदर्शी आईडी द्वारा रनटाइम पर प्राप्त सामग्री (CMS रिकॉर्ड, उपयोगकर्ता-विशिष्ट प्रतिलिपि)।
+- **कलेक्शन** — अलग-अलग फ़ाइलों में प्रबंधित आइटम की क्रमबद्ध सूची (FAQ प्रविष्टियाँ, ब्लॉग पोस्ट, उत्पाद)।
+- **वैरिएंट** — नामित या संरचित सामग्री विकल्प:
+  - A/B परीक्षण, मौसमी बैनर या फ़ीचर फ़्लैग के लिए एक **स्ट्रिंग** वैरिएंट;
+  - CMS रिकॉर्ड, उपयोगकर्ता-विशिष्ट सामग्री, या फ़ील्ड के सेट द्वारा संबोधित किसी भी सामग्री के लिए एक **ऑब्जेक्ट** वैरिएंट (पूर्व "डायनेमिक रिकॉर्ड")।
 
-## चयनकर्ता स्पष्टीकरण
+> पुराने संस्करण रिकॉर्ड-कुंजीबद्ध सामग्री के लिए एक अलग `meta` फ़ील्ड प्रदान करते थे। इसे `variant` में मिला दिया गया है: `meta` का उपयोग करने के बजाय `variant` में एक **ऑब्जेक्ट** पास करें।
 
-जब किसी डिक्शनरी पर एकाधिक चयनकर्ता मौजूद होते हैं, तो रिज़ॉल्यूशन का क्रम होता है:
+## सेलेक्टर असंदिग्धीकरण
+
+एक key एक साथ दोनों आयाम घोषित कर सकती है (उदा. एक कलेक्शन जिसके प्रत्येक आइटम का एक वैरिएंट हो)। इन्हें इस क्रम में हल किया जाता है:
 
 ```
-variant → meta → item
+variant → item
 ```
+
+इस प्रकार, किसी variant × item key पर `{ variant: "promo" }` सभी promo आइटम को एक array के रूप में लौटाता है, और `{ item: 2 }` जोड़ने से यह एक ही प्रविष्टि तक सीमित हो जाता है।