@intlayer/docs 7.0.7 → 7.0.8-canary.0

package/docs/id/dictionary/enumeration.md

@@ -0,0 +1,245 @@
+---
+createdAt: 2025-08-23
+updatedAt: 2025-08-23
+title: Enumerasi
+description: Temukan cara mendeklarasikan dan menggunakan enumerasi di situs web multibahasa Anda. Ikuti langkah-langkah dalam dokumentasi online ini untuk mengatur proyek Anda dalam beberapa menit.
+keywords:
+  - Enumerasi
+  - Internasionalisasi
+  - Dokumentasi
+  - Intlayer
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - doc
+  - concept
+  - content
+  - enumeration
+history:
+  - version: 5.5.10
+    date: 2025-06-29
+    changes: Inisialisasi riwayat
+---
+
+# Enumerasi / Plurialisasi
+
+## Cara Enumerasi Bekerja
+
+Di Intlayer, enumerasi dicapai melalui fungsi `enu`, yang memetakan kunci tertentu ke konten yang sesuai. Kunci-kunci ini dapat mewakili nilai numerik, rentang, atau pengenal khusus. Ketika digunakan dengan React Intlayer atau Next Intlayer, konten yang tepat secara otomatis dipilih berdasarkan locale aplikasi dan aturan yang telah ditentukan.
+
+## Menyiapkan Enumerasi
+
+Untuk menyiapkan enumerasi dalam proyek Intlayer Anda, Anda perlu membuat modul konten yang mencakup definisi enumerasi. Berikut adalah contoh enumerasi sederhana untuk jumlah mobil:
+
+```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+import { enu, type Dictionary } from "intlayer";
+
+const carEnumeration = {
+  key: "car_count",
+  content: {
+    numberOfCar: enu({
+      "<-1": "Kurang dari minus satu mobil",
+      "-1": "Minus satu mobil",
+      "0": "Tidak ada mobil",
+      "1": "Satu mobil",
+      ">5": "Beberapa mobil",
+      ">19": "Banyak mobil",
+      "fallback": "Nilai cadangan", // Opsional
+    }),
+  },
+} satisfies Dictionary;
+
+export default carEnumeration;
+```
+
+```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
+import { enu } from "intlayer";
+
+/** @type {import('intlayer').Dictionary} */
+const carEnumeration = {
+  key: "car_count",
+  content: {
+    numberOfCar: enu({
+      "<-1": "Kurang dari minus satu mobil",
+      "-1": "Minus satu mobil",
+      "0": "Tidak ada mobil",
+      "1": "Satu mobil",
+      ">5": "Beberapa mobil",
+      ">19": "Banyak mobil",
+      "fallback": "Nilai cadangan", // Opsional
+    }),
+  },
+};
+
+export default carEnumeration;
+```
+
+```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
+const { enu } = require("intlayer");
+
+/** @type {import('intlayer').Dictionary} */
+const carEnumeration = {
+  key: "car_count",
+  content: {
+    numberOfCar: enu({
+      "<-1": "Kurang dari minus satu mobil",
+      "-1": "Minus satu mobil",
+      "0": "Tidak ada mobil",
+      "1": "Satu mobil",
+      ">5": "Beberapa mobil",
+      ">19": "Banyak mobil",
+      "fallback": "Nilai cadangan", // Opsional
+    }),
+  },
+};
+
+module.exports = carEnumeration;
+```
+
+```json fileName="**/*.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "car_count",
+  "content": {
+    "numberOfCar": {
+      "nodeType": "enumeration",
+      "enumeration": {
+        "<-1": "Kurang dari minus satu mobil",
+        "-1": "Minus satu mobil",
+        "0": "Tidak ada mobil",
+        "1": "Satu mobil",
+        ">5": "Beberapa mobil",
+        ">19": "Banyak mobil",
+        "fallback": "Nilai cadangan" // Opsional
+      }
+    }
+  }
+}
+```
+
+Dalam contoh ini, `enu` memetakan berbagai kondisi ke konten spesifik. Ketika digunakan dalam komponen React, Intlayer dapat secara otomatis memilih konten yang sesuai berdasarkan variabel yang diberikan.
+
+> Urutan deklarasi penting dalam enumerasi Intlayer. Deklarasi valid pertama adalah yang akan dipilih. Jika beberapa kondisi berlaku, pastikan mereka diurutkan dengan benar untuk menghindari perilaku yang tidak diinginkan.
+
+> Jika tidak ada fallback yang dideklarasikan, fungsi akan mengembalikan `undefined` jika tidak ada kunci yang cocok.
+
+## Menggunakan Enumerasi dengan React Intlayer
+
+Untuk menggunakan enumerasi dalam komponen React, Anda dapat memanfaatkan hook `useIntlayer` dari paket `react-intlayer`. Hook ini mengambil konten yang tepat berdasarkan ID yang ditentukan. Berikut adalah contoh cara menggunakannya:
+
+```tsx fileName="**/*.tsx" codeFormat="typescript"
+import type { FC } from "react";
+import { useIntlayer } from "react-intlayer";
+
+const CarComponent: FC = () => {
+  const { numberOfCar } = useIntlayer("car_count");
+
+  return (
+    <div>
+      <p>
+        {
+          numberOfCar(0) // Output: Tidak ada mobil
+        }
+      </p>
+      <p>
+        {
+          numberOfCar(6) // Output: Beberapa mobil
+        }
+      </p>
+      <p>
+        {
+          numberOfCar(20) // Output: Banyak mobil
+        }
+      </p>
+      <p>
+        {
+          numberOfCar(0.01) // Output: Nilai cadangan
+        }
+      </p>
+    </div>
+  );
+};
+```
+
+```javascript fileName="**/*.mjx" codeFormat="esm"
+import { useIntlayer } from "react-intlayer";
+
+const CarComponent = () => {
+  const { numberOfCar } = useIntlayer("car_count");
+
+  return (
+    <div>
+      <p>
+        {
+          numberOfCar(0) // Output: Tidak ada mobil
+        }
+      </p>
+      <p>
+        {
+          numberOfCar(6) // Output: Beberapa mobil
+        }
+      </p>
+      <p>
+        {
+          numberOfCar(20) // Output: Banyak mobil
+        }
+      </p>
+      <p>
+        {
+          numberOfCar(0.01) // Output: Nilai fallback
+        }
+      </p>
+    </div>
+  );
+};
+
+export default CarComponent;
+```
+
+```javascript fileName="**/*.cjs" codeFormat="commonjs"
+const { useIntlayer } = require("react-intlayer");
+
+const CarComponent = () => {
+  const { numberOfCar } = useIntlayer("car_count");
+
+  return (
+    <div>
+      <p>
+        {
+          numberOfCar(0) // Output: Tidak ada mobil
+        }
+      </p>
+      <p>
+        {
+          numberOfCar(6) // Output: Beberapa mobil
+        }
+      </p>
+      <p>
+        {
+          numberOfCar(20) // Output: Banyak mobil
+        }
+      </p>
+      <p>
+        {
+          numberOfCar(0.01) // Output: Nilai cadangan
+        }
+      </p>
+    </div>
+  );
+};
+
+module.exports = CarComponent;
+```
+
+Dalam contoh ini, komponen secara dinamis menyesuaikan outputnya berdasarkan jumlah mobil. Konten yang benar dipilih secara otomatis, tergantung pada rentang yang ditentukan.
+
+## Sumber Daya Tambahan
+
+Untuk informasi lebih rinci tentang konfigurasi dan penggunaan, lihat sumber daya berikut:
+
+- [Dokumentasi Intlayer CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_cli.md)
+- [Dokumentasi React Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_with_create_react_app.md)
+- [Dokumentasi Next Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_with_nextjs_15.md)
+
+Sumber daya ini memberikan wawasan lebih lanjut tentang pengaturan dan penggunaan Intlayer di berbagai lingkungan dan dengan berbagai framework.

package/docs/id/dictionary/file.md

@@ -0,0 +1,237 @@
+---
+createdAt: 2025-03-13
+updatedAt: 2025-06-29
+title: File
+description: Pelajari cara menyematkan file eksternal ke dalam kamus konten Anda menggunakan fungsi `file`. Dokumentasi ini menjelaskan bagaimana Intlayer menghubungkan dan mengelola konten file secara dinamis.
+keywords:
+  - File
+  - Internasionalisasi
+  - Dokumentasi
+  - Intlayer
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - doc
+  - concept
+  - content
+  - file
+history:
+  - version: 5.5.10
+    date: 2025-06-29
+    changes: Inisialisasi riwayat
+---
+
+# Konten File / Menyematkan File di Intlayer
+
+Di Intlayer, fungsi `file` memungkinkan penyematan konten file eksternal ke dalam sebuah kamus. Pendekatan ini memastikan bahwa Intlayer mengenali file sumber, memungkinkan integrasi mulus dengan Intlayer Visual Editor dan CMS.
+
+## Mengapa menggunakan `file` daripada `import`, `require`, atau `fs`?
+
+Berbeda dengan metode pembacaan file seperti `import`, `require`, atau `fs`, menggunakan `file` mengasosiasikan file dengan kamus, memungkinkan Intlayer untuk melacak dan memperbarui konten secara dinamis saat file diedit. Dengan demikian, penggunaan `file` akan memberikan integrasi yang lebih baik dengan Intlayer Visual Editor dan CMS.
+
+## Menyiapkan Konten File
+
+Untuk menyematkan konten file dalam proyek Intlayer Anda, gunakan fungsi `file` dalam modul konten. Berikut adalah contoh yang menunjukkan berbagai implementasi.
+
+```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+import { file, type Dictionary } from "intlayer";
+
+const myFileContent = {
+  key: "my_key",
+  content: {
+    myFile: file("./path/to/file.txt"),
+  },
+} satisfies Dictionary;
+
+export default myFileContent;
+```
+
+```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
+import { file } from "intlayer";
+
+/** @type {import('intlayer').Dictionary} */
+// Mendefinisikan konten file dengan tipe Dictionary dari Intlayer
+const myFileContent = {
+  key: "my_key",
+  content: {
+    myFile: file("./path/to/file.txt"), // Menggunakan fungsi file untuk mengasosiasikan file
+  },
+};
+
+export default myFileContent;
+```
+
+```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
+const { file } = require("intlayer");
+
+/** @type {import('intlayer').Dictionary} */
+// Mendefinisikan konten file dengan tipe Dictionary dari Intlayer
+const myFileContent = {
+  key: "my_key",
+  content: {
+    myFile: file("./path/to/file.txt"), // Menggunakan fungsi file untuk mengasosiasikan file
+  },
+};
+
+module.exports = myFileContent;
+```
+
+```json5 fileName="**/*.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "my_key",
+  "content": {
+    "myFile": {
+      "nodeType": "file",
+      "value": "./path/to/file.txt",
+    },
+  },
+}
+```
+
+## Menggunakan Konten File di React Intlayer
+
+Untuk menggunakan konten file yang disematkan dalam komponen React, impor dan gunakan hook `useIntlayer` dari paket `react-intlayer`. Ini mengambil konten dari kunci yang ditentukan dan memungkinkan konten tersebut ditampilkan secara dinamis.
+
+```tsx fileName="**/*.tsx" codeFormat="typescript"
+import type { FC } from "react";
+import { useIntlayer } from "react-intlayer";
+
+const FileComponent: FC = () => {
+  const { myFile } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <pre>{myFile}</pre>
+    </div>
+  );
+};
+
+export default FileComponent;
+```
+
+```javascript fileName="**/*.mjx" codeFormat="esm"
+import { useIntlayer } from "react-intlayer";
+
+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");
+
+const FileComponent = () => {
+  const { myFile } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <pre>{myFile}</pre>
+    </div>
+  );
+};
+
+module.exports = FileComponent;
+```
+
+## Contoh Markdown Multibahasa
+
+Untuk mendukung file Markdown yang dapat diedit dalam berbagai bahasa, Anda dapat menggunakan `file` bersama dengan `t()` dan `md()` untuk mendefinisikan versi bahasa yang berbeda dari sebuah file konten Markdown.
+
+```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+import { file, t, md, type Dictionary } from "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"),
+      })
+    ),
+  },
+} satisfies Dictionary;
+
+export default myMultilingualContent;
+```
+
+```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
+import { file, t, md } from "intlayer";
+
+/** @type {import('intlayer').Dictionary} */
+// Mendefinisikan konten multibahasa dengan kunci dan isi yang berbeda berdasarkan bahasa
+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"),
+      })
+    ),
+  },
+};
+
+export default myMultilingualContent;
+
+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"),
+      })
+    ),
+  },
+};
+```
+
+Pengaturan ini memungkinkan konten diambil secara dinamis berdasarkan preferensi bahasa pengguna. Saat digunakan di Intlayer Visual Editor atau CMS, sistem akan mengenali bahwa konten berasal dari file Markdown yang ditentukan dan memastikan konten tersebut tetap dapat diedit.
+
+## Jenis-jenis path yang berbeda
+
+Saat menggunakan fungsi `file`, Anda dapat menggunakan berbagai jenis path untuk menentukan file yang akan disematkan.
+
+- `file("./path/to/file.txt")` - Path relatif terhadap file saat ini
+- `file("path/to/file.txt")` - Path relatif terhadap direktori root proyek
+- `file("/users/username/path/to/file.txt")` - Path absolut
+
+## Cara Intlayer Menangani Konten File
+
+Fungsi `file` didasarkan pada modul `fs` Node.js untuk membaca konten file yang ditentukan dan memasukkannya ke dalam dictionary. Saat digunakan bersama dengan Intlayer Visual Editor atau CMS, Intlayer dapat melacak hubungan antara dictionary dan file. Ini memungkinkan Intlayer untuk:
+
+- Mengenali bahwa konten berasal dari file tertentu.
+- Secara otomatis memperbarui konten dictionary ketika file yang terhubung diedit.
+- Memastikan sinkronisasi antara file dan kamus, menjaga integritas konten.
+
+## Sumber Daya Tambahan
+
+Untuk detail lebih lanjut tentang konfigurasi dan penggunaan penyematan file di Intlayer, lihat sumber daya berikut:
+
+- [Dokumentasi Intlayer CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_cli.md)
+- [Dokumentasi React Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_with_create_react_app.md)
+- [Dokumentasi Next Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_with_nextjs_15.md)
+- [Dokumentasi Konten Markdown](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/dictionary/markdown.md)
+- [Dokumentasi Konten Terjemahan](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/dictionary/translation.md)
+
+Sumber daya ini memberikan wawasan lebih lanjut tentang embedding file, manajemen konten, dan integrasi Intlayer dengan berbagai framework.

package/docs/id/dictionary/function_fetching.md

@@ -0,0 +1,214 @@
+---
+createdAt: 2025-08-23
+updatedAt: 2025-08-23
+title: Pengambilan Fungsi
+description: Temukan cara mendeklarasikan dan menggunakan pengambilan fungsi di situs web multibahasa Anda. Ikuti langkah-langkah dalam dokumentasi online ini untuk mengatur proyek Anda dalam beberapa menit.
+keywords:
+  - Pengambilan Fungsi
+  - Internasionalisasi
+  - Dokumentasi
+  - Intlayer
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - doc
+  - concept
+  - content
+  - function-fetching
+history:
+  - version: 5.5.10
+    date: 2025-06-29
+    changes: Inisialisasi riwayat
+---
+
+# Pengambilan Fungsi
+
+Intlayer memungkinkan Anda untuk mendeklarasikan fungsi konten dalam modul konten Anda, yang dapat bersifat sinkron atau asinkron. Ketika aplikasi dibangun, Intlayer menjalankan fungsi-fungsi ini untuk mendapatkan hasil dari fungsi tersebut. Nilai yang dikembalikan harus berupa objek JSON atau nilai sederhana seperti string atau angka.
+
+> Peringatan: pengambilan fungsi saat ini tidak tersedia dalam deklarasi konten JSON dan file deklarasi konten jarak jauh.
+
+## Deklarasi Fungsi
+
+Berikut adalah contoh pengambilan konten fungsi sinkron sederhana:
+
+```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+import type { Dictionary } from "intlayer";
+
+const functionContent = {
+  key: "function_content",
+  content: {
+    text: () => "This is the content rendered by a function",
+  },
+} satisfies Dictionary;
+
+export default functionContent;
+```
+
+```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
+/** @type {import('intlayer').Dictionary} */
+const functionContent = {
+  key: "function_content",
+  content: {
+    text: () => "Ini adalah konten yang dirender oleh sebuah fungsi",
+  },
+};
+
+export default functionContent;
+```
+
+```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
+/** @type {import('intlayer').Dictionary} */
+const functionContent = {
+  key: "function_content",
+  content: {
+    text: () => "Ini adalah konten yang dirender oleh sebuah fungsi",
+  },
+};
+
+module.exports = functionContent;
+```
+
+```json fileName="**/*.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "function_content",
+  "content": {
+    "text": "Ini adalah konten yang dirender oleh sebuah fungsi"
+  }
+}
+```
+
+Dalam contoh ini, kunci `text` berisi sebuah fungsi yang mengembalikan sebuah string. Konten ini dapat dirender dalam komponen React Anda menggunakan paket interpreter Intlayer seperti `react-intlayer`.
+
+## Pengambilan Fungsi Asinkron
+
+Selain fungsi sinkron, Intlayer mendukung fungsi asinkron, memungkinkan Anda untuk mengambil data dari sumber eksternal atau mensimulasikan pengambilan data dengan data tiruan (mock data).
+
+Berikut adalah contoh fungsi asinkron yang mensimulasikan pengambilan dari server:
+
+```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+import { setTimeout } from "node:timers/promises";
+import type { Dictionary } from "intlayer";
+
+const fakeFetch = async (): Promise<string> => {
+  // Tunggu selama 200ms untuk mensimulasikan pengambilan dari server
+  return await setTimeout(200).then(
+    () => "Ini adalah konten yang diambil dari server"
+  );
+};
+
+const asyncFunctionContent = {
+  key: "async_function",
+  content: { text: fakeFetch },
+} satisfies Dictionary;
+
+export default asyncFunctionContent;
+```
+
+```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
+import { setTimeout } from "node:timers/promises";
+
+/** @type {import('intlayer').Dictionary} */
+const fakeFetch = async () => {
+  // Tunggu selama 200ms untuk mensimulasikan pengambilan dari server
+  await setTimeout(200);
+  return "Ini adalah konten yang diambil dari server";
+};
+
+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 () => {
+  // Tunggu selama 200ms untuk mensimulasikan pengambilan dari server
+  await setTimeout(200);
+  return "Ini adalah konten yang diambil dari server";
+};
+
+const asyncFunctionContent = {
+  key: "async_function",
+  content: { text: fakeFetch },
+};
+
+module.exports = asyncFunctionContent;
+```
+
+```plaintext fileName="**/*.content.json" contentDeclarationFormat="json"
+Tidak ada cara untuk mengambil konten dari file JSON, gunakan file .ts atau .js sebagai gantinya
+```
+
+Dalam kasus ini, fungsi `fakeFetch` meniru penundaan untuk mensimulasikan waktu respons server. Intlayer menjalankan fungsi asinkron dan menggunakan hasilnya sebagai konten untuk kunci `text`.
+
+## Menggunakan Konten Berbasis Fungsi dalam Komponen React
+
+Untuk menggunakan konten berbasis fungsi dalam komponen React, Anda perlu mengimpor `useIntlayer` dari `react-intlayer` dan memanggilnya dengan ID konten untuk mengambil konten tersebut. Berikut adalah contohnya:
+
+```typescript fileName="**/*.jsx" codeFormat="typescript"
+import type { FC } from "react";
+import { useIntlayer } from "react-intlayer";
+
+const MyComponent: FC = () => {
+  const functionContent = useIntlayer("function_content");
+  const asyncFunctionContent = useIntlayer("async_function_content");
+
+  return (
+    <div>
+      <p>{functionContent.text}</p>
+      {/* Output: Ini adalah konten yang dirender oleh sebuah fungsi */}
+      <p>{asyncFunctionContent.text}</p>
+      {/* Output: Ini adalah konten yang diambil dari server */}
+    </div>
+  );
+};
+
+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>
+      {/* Output: Ini adalah konten yang dirender oleh sebuah fungsi */}
+      <p>{asyncFunctionContent.text}</p>
+      {/* Output: Ini adalah konten yang diambil dari server */}
+    </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>
+      {/* Output: Ini adalah konten yang dirender oleh sebuah fungsi */}
+      <p>{asyncFunctionContent.text}</p>
+      {/* Output: Ini adalah konten yang diambil dari server */}
+    </div>
+  );
+};
+
+module.exports = MyComponent;
+```