@intlayer/docs 8.7.6 → 8.7.8-canary.0

package/docs/ar/dictionary/file.md

@@ -32,7 +32,7 @@ history:
 
 لتضمين محتوى ملف في مشروع Intlayer الخاص بك، استخدم دالة `file` في وحدة المحتوى. فيما يلي أمثلة توضح تطبيقات مختلفة.
 
-```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
 import { file, type Dictionary } from "intlayer";
 
 const myFileContent = {
@@ -45,34 +45,6 @@ const myFileContent = {
 export default myFileContent;
 ```
 
-```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
-import { file } from "intlayer";
-
-/** @type {import('intlayer').Dictionary} */
-const myFileContent = {
-  key: "my_key",
-  content: {
-    myFile: file("./path/to/file.txt"),
-  },
-};
-
-export default myFileContent;
-```
-
-```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
-const { file } = require("intlayer");
-
-/** @type {import('intlayer').Dictionary} */
-const myFileContent = {
-  key: "my_key",
-  content: {
-    myFile: file("./path/to/file.txt"),
-  },
-};
-
-module.exports = myFileContent;
-```
-
 ```json5 fileName="**/*.content.json" contentDeclarationFormat="json"
 {
   "$schema": "https://intlayer.org/schema.json",
@@ -90,7 +62,7 @@ module.exports = myFileContent;
 
 لاستخدام محتوى ملف مضمن في مكون React، قم باستيراد واستخدام الخطاف `useIntlayer` من حزمة `react-intlayer`. هذا يسترجع المحتوى من المفتاح المحدد ويسمح بعرضه بشكل ديناميكي.
 
-```tsx fileName="**/*.tsx" codeFormat="typescript"
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
 import { useIntlayer } from "react-intlayer";
 
@@ -107,45 +79,11 @@ const FileComponent: FC = () => {
 export default FileComponent;
 ```
 
-```javascript fileName="**/*.mjx" codeFormat="esm"
-import { useIntlayer } from "react-intlayer";
-
-// مكون لعرض محتوى الملف باستخدام React و esm
-const FileComponent = () => {
-  const { myFile } = useIntlayer("my_key");
-
-  return (
-    <div>
-      <pre>{myFile}</pre>
-    </div>
-  );
-};
-
-export default FileComponent;
-```
-
-```javascript fileName="**/*.cjs" codeFormat="commonjs"
-const { useIntlayer } = require("react-intlayer");
-
-// مكون لعرض محتوى الملف باستخدام React و commonjs
-const FileComponent = () => {
-  const { myFile } = useIntlayer("my_key");
-
-  return (
-    <div>
-      <pre>{myFile}</pre>
-    </div>
-  );
-};
-
-module.exports = FileComponent;
-```
-
 ## مثال على ملفات Markdown متعددة اللغات
 
 لدعم ملفات Markdown القابلة للتحرير متعددة اللغات، يمكنك استخدام `file` مع `t()` و `md()` لتعريف نسخ مختلفة من ملف محتوى Markdown بلغات متعددة.
 
-```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
 import { file, t, md, type Dictionary } from "intlayer";
 
 const myMultilingualContent = {
@@ -165,44 +103,6 @@ const myMultilingualContent = {
 export default myMultilingualContent;
 ```
 
-```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
-import { file, t, md } from "intlayer";
-
-/** @type {import('intlayer').Dictionary} */
-const myMultilingualContent = {
-  key: "my_multilingual_key",
-  content: {
-    myContent: md(
-      t({
-        ar: file("src/components/test.ar.md"),
-        en: file("src/components/test.en.md"),
-        fr: file("src/components/test.fr.md"),
-        es: file("src/components/test.es.md"),
-      })
-    ),
-  },
-};
-
-export default myMultilingualContent;
-```
-
-```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
-const { file, t, md } = require("intlayer");
-
-const myMultilingualContent = {
-  key: "my_multilingual_key",
-  content: {
-    myContent: md(
-      t({
-        en: file("src/components/test.en.md"),
-        fr: file("src/components/test.fr.md"),
-        es: file("src/components/test.es.md"),
-      })
-    ),
-  },
-};
-```
-
 يتيح هذا الإعداد استرجاع المحتوى بشكل ديناميكي بناءً على تفضيل لغة المستخدم. عند استخدامه في محرر Intlayer المرئي أو نظام إدارة المحتوى (CMS)، سيتعرف النظام على أن المحتوى يأتي من ملفات Markdown المحددة ويضمن بقاؤها قابلة للتحرير.
 
 ## كيف يتعامل Intlayer مع محتوى الملفات

package/docs/ar/dictionary/function_fetching.md

@@ -32,7 +32,7 @@ history:
 
 إليك مثال على دالة متزامنة بسيطة تقوم بجلب المحتوى:
 
-```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
 import type { Dictionary } from "intlayer";
 
 const functionContent = {
@@ -45,32 +45,6 @@ const functionContent = {
 export default functionContent;
 ```
 
-```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
-/** @type {import('intlayer').Dictionary} */
-// تعريف محتوى الدالة
-const functionContent = {
-  key: "function_content",
-  content: {
-    text: () => "هذا هو المحتوى الذي تم عرضه بواسطة دالة",
-  },
-};
-
-export default functionContent;
-```
-
-```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
-/** @type {import('intlayer').Dictionary} */
-// تعريف محتوى الدالة
-const functionContent = {
-  key: "function_content",
-  content: {
-    text: () => "هذا هو المحتوى الذي تم عرضه بواسطة دالة",
-  },
-};
-
-module.exports = functionContent;
-```
-
 ```json fileName="**/*.content.json" contentDeclarationFormat="json"
 {
   "$schema": "https://intlayer.org/schema.json",
@@ -89,7 +63,7 @@ module.exports = functionContent;
 
 فيما يلي مثال على دالة غير متزامنة تحاكي جلب بيانات من الخادم:
 
-```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
 import { setTimeout } from "node:timers/promises";
 import type { Dictionary } from "intlayer";
 
@@ -108,42 +82,6 @@ const asyncFunctionContent = {
 export default asyncFunctionContent;
 ```
 
-```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
-import { setTimeout } from "node:timers/promises";
-
-/** @type {import('intlayer').Dictionary} */
-const fakeFetch = async () => {
-  // الانتظار لمدة 200 مللي ثانية لمحاكاة جلب البيانات من الخادم
-  await setTimeout(200);
-  return "هذا هو المحتوى الذي تم جلبه من الخادم";
-};
-
-const asyncFunctionContent = {
-  key: "async_function",
-  content: { text: fakeFetch },
-};
-
-export default asyncFunctionContent;
-```
-
-```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
-const { setTimeout } = require("node:timers/promises");
-
-/** @type {import('intlayer').Dictionary} */
-const fakeFetch = async () => {
-  // الانتظار لمدة 200 مللي ثانية لمحاكاة جلب البيانات من الخادم
-  await setTimeout(200);
-  return "هذا هو المحتوى الذي تم جلبه من الخادم";
-};
-
-const asyncFunctionContent = {
-  key: "async_function",
-  content: { text: fakeFetch },
-};
-
-module.exports = asyncFunctionContent;
-```
-
 ```plaintext fileName="**/*.content.json" contentDeclarationFormat="json"
 لا توجد طريقة لجلب المحتوى من ملف JSON، استخدم ملف .ts أو .js بدلاً من ذلك
 ```
@@ -154,7 +92,7 @@ module.exports = asyncFunctionContent;
 
 لاستخدام المحتوى المعتمد على الدوال في مكون React، تحتاج إلى استيراد `useIntlayer` من `react-intlayer` واستدعاؤه مع معرف المحتوى لاسترجاع المحتوى. إليك مثالاً:
 
-```typescript fileName="**/*.jsx" codeFormat="typescript"
+```typescript fileName="**/*.jsx" codeFormat={["typescript", "esm", "commonjs"]}
 import type { FC } from "react";
 import { useIntlayer } from "react-intlayer";
 
@@ -174,43 +112,3 @@ const MyComponent: FC = () => {
 
 export default MyComponent;
 ```
-
-```javascript fileName="**/*.mjx" codeFormat="esm"
-import { useIntlayer } from "react-intlayer";
-
-const MyComponent = () => {
-  const functionContent = useIntlayer("function_content");
-  const asyncFunctionContent = useIntlayer("async_function_content");
-
-  return (
-    <div>
-      <p>{functionContent.text}</p>
-      {/* المخرجات: هذا هو المحتوى الذي تم عرضه بواسطة دالة */}
-      <p>{asyncFunctionContent.text}</p>
-      {/* المخرجات: هذا هو المحتوى الذي تم جلبه من الخادم */}
-    </div>
-  );
-};
-
-export default MyComponent;
-```
-
-```javascript fileName="**/*.cjs" codeFormat="commonjs"
-const { useIntlayer } = require("react-intlayer");
-
-const MyComponent = () => {
-  const functionContent = useIntlayer("function_content");
-  const asyncFunctionContent = useIntlayer("async_function_content");
-
-  return (
-    <div>
-      <p>{functionContent.text}</p>
-      {/* المخرجات: هذا هو المحتوى الذي تم عرضه بواسطة دالة */}
-      <p>{asyncFunctionContent.text}</p>
-      {/* المخرجات: هذا هو المحتوى الذي تم جلبه من الخادم */}
-    </div>
-  );
-};
-
-module.exports = MyComponent;
-```

package/docs/ar/dictionary/gender.md

@@ -32,7 +32,7 @@ history:
 
 لإعداد المحتوى القائم على النوع الاجتماعي في مشروع Intlayer الخاص بك، قم بإنشاء وحدة محتوى تتضمن تعريفات النوع الخاصة بك. فيما يلي أمثلة بصيغ مختلفة.
 
-```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
 import { gender, type Dictionary } from "intlayer";
 
 const myGenderContent = {
@@ -49,42 +49,6 @@ const myGenderContent = {
 export default myGenderContent;
 ```
 
-```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
-import { gender } from "intlayer";
-
-/** @type {import('intlayer').Dictionary} */
-const myGenderContent = {
-  key: "my_key",
-  content: {
-    myGender: gender({
-      male: "محتواي للمستخدمين الذكور",
-      female: "محتواي للمستخدمين الإناث",
-      fallback: "محتواي عندما لا يتم تحديد النوع", // اختياري
-    }),
-  },
-};
-
-export default myGenderContent;
-```
-
-```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
-const { gender } = require("intlayer");
-
-/** @type {import('intlayer').Dictionary} */
-const myGenderContent = {
-  key: "my_key",
-  content: {
-    myGender: gender({
-      male: "محتواي للمستخدمين الذكور",
-      female: "محتواي للمستخدمين الإناث",
-      fallback: "محتواي عندما لا يتم تحديد النوع", // اختياري
-    }),
-  },
-};
-
-module.exports = myGenderContent;
-```
-
 ```json5 fileName="**/*.content.json" contentDeclarationFormat="json"
 {
   "$schema": "https://intlayer.org/schema.json",
@@ -108,7 +72,7 @@ module.exports = myGenderContent;
 
 لاستخدام المحتوى المعتمد على النوع داخل مكون React، قم باستيراد واستخدام الخطاف `useIntlayer` من حزمة `react-intlayer`. يقوم هذا الخطاف بجلب المحتوى للمفتاح المحدد ويسمح لك بتمرير النوع لاختيار المخرجات المناسبة.
 
-```tsx fileName="**/*.tsx" codeFormat="typescript"
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
 import { useIntlayer } from "react-intlayer";
 
@@ -160,108 +124,6 @@ const GenderComponent: FC = () => {
 export default GenderComponent;
 ```
 
-```javascript fileName="**/*.mjx" codeFormat="esm"
-import { useIntlayer } from "react-intlayer";
-
-const GenderComponent = () => {
-  const { myGender } = useIntlayer("my_key");
-
-  return (
-    <div>
-      <p>
-        {
-          /* المخرجات: محتواي للمستخدمين الذكور */
-          myGender("male")
-        }
-      </p>
-      <p>
-        {
-          /* المخرجات: محتواي للمستخدمين الإناث */
-          myGender("female")
-        }
-      </p>
-      <p>
-        {
-          /* المخرجات: محتواي للمستخدمين الذكور */
-          myGender("m")
-        }
-      </p>
-      <p>
-        {
-          /* المخرجات: محتواي للمستخدمين الإناث */
-          myGender("f")
-        }
-      </p>
-      <p>
-        {
-          /* المخرجات: محتواي عندما لا يتم تحديد النوع */
-          myGender("")
-        }
-      </p>
-      <p>
-        {
-          /* المخرجات: محتواي عندما لا يتم تحديد النوع */
-          myGender(undefined)
-        }
-      </p>
-    </div>
-  );
-};
-
-export default GenderComponent;
-```
-
-```javascript fileName="**/*.cjs" codeFormat="commonjs"
-const { useIntlayer } = require("react-intlayer");
-
-const GenderComponent = () => {
-  const { myGender } = useIntlayer("my_key");
-
-  return (
-    <div>
-      <p>
-        {
-          /* المخرجات: محتواي للمستخدمين الذكور */
-          myGender("male")
-        }
-      </p>
-      <p>
-        {
-          /* المخرجات: محتواي للمستخدمين الإناث */
-          myGender("female")
-        }
-      </p>
-      <p>
-        {
-          /* المخرجات: محتواي للمستخدمين الذكور */
-          myGender("m")
-        }
-      </p>
-      <p>
-        {
-          /* المخرجات: محتواي للمستخدمين الإناث */
-          myGender("f")
-        }
-      </p>
-      <p>
-        {
-          /* المخرجات: محتواي عندما لا يتم تحديد الجنس */
-          myGender("")
-        }
-      </p>
-      <p>
-        {
-          /* المخرجات: محتواي عندما لا يتم تحديد الجنس */
-          myGender(undefined)
-        }
-      </p>
-    </div>
-  );
-};
-
-module.exports = GenderComponent;
-```
-
 ## موارد إضافية
 
 لمزيد من المعلومات التفصيلية حول التهيئة والاستخدام، يرجى الرجوع إلى الموارد التالية:

package/docs/ar/dictionary/insertion.md

@@ -41,7 +41,7 @@ history:
   <Tab label="التغليف اليدوي" value="manual-wrapping">
     استخدم دالة `insert` لإعلان محتوى الإدراج بشكل صريح.
 
-    ```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+    ```typescript fileName="**/*.content.ts" contentDeclarationFormat=["typescript", "esm", "cjs"]
     import { insert, type Dictionary } from "intlayer";
 
     const myInsertionContent = {
@@ -99,7 +99,7 @@ history:
   <Tab label="الكشف التلقائي" value="automatic-detection">
     إذا كان النص يحتوي على مؤشرات إدراج شائعة (مثل `{{name}}`)، سيقوم Intlayer بتحويله تلقائيًا.
 
-    ```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+    ```typescript fileName="**/*.content.ts" contentDeclarationFormat=["typescript", "esm", "cjs"]
     import { type Dictionary } from "intlayer";
 
     const myInsertionContent = {
@@ -153,7 +153,7 @@ history:
 
 لاستخدام محتوى الإدراج داخل مكون React، قم باستيراد واستخدام الخطاف `useIntlayer` من حزمة `react-intlayer`. يقوم هذا الخطاف باسترجاع المحتوى للمفتاح المحدد ويسمح لك بتمرير كائن يربط كل عنصر نائب في المحتوى بالقيمة التي ترغب في عرضها.
 
-```tsx fileName="**/*.tsx" codeFormat="typescript"
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
 import { useIntlayer } from "react-intlayer";
 
@@ -181,60 +181,6 @@ const InsertionComponent: FC = () => {
 export default InsertionComponent;
 ```
 
-```javascript fileName="**/*.mjx" codeFormat="esm"
-import { useIntlayer } from "react-intlayer";
-
-const InsertionComponent = () => {
-  const { myInsertion } = useIntlayer("my_key");
-
-  return (
-    <div>
-      <p>
-        {
-          /* الإخراج: "مرحبًا، اسمي جون وعمري 30 سنة!" */
-          myInsertion({ name: "John", age: "30" })
-        }
-      </p>
-      <p>
-        {
-          /* يمكنك إعادة استخدام نفس الإدراج بقيم مختلفة */
-          myInsertion({ name: "Alice", age: "25" })
-        }
-      </p>
-    </div>
-  );
-};
-
-export default InsertionComponent;
-```
-
-```javascript fileName="**/*.cjs" codeFormat="commonjs"
-const { useIntlayer } = require("react-intlayer");
-
-const InsertionComponent = () => {
-  const { myInsertion } = useIntlayer("my_key");
-
-  return (
-    <div>
-      <p>
-        {
-          /* الإخراج: "مرحبًا، اسمي جون وعمري 30 سنة!" */
-          myInsertion({ name: "John", age: "30" })
-        }
-      </p>
-      <p>
-        {
-          /* يمكنك إعادة استخدام نفس الإدراج بقيم مختلفة */
-          myInsertion({ name: "Alice", age: "25" })
-        }
-      </p>
-    </div>
-  );
-};
-
-module.exports = InsertionComponent;
-```
-
 ## الموارد الإضافية
 
 لمزيد من المعلومات التفصيلية حول التكوين والاستخدام، يرجى الرجوع إلى الموارد التالية: