#ctx.libs

ctx.libs adalah namespace terpadu library bawaan RunJS, berisi library umum seperti React, Ant Design, dayjs, lodash. Tidak perlu import atau loading async, dapat langsung digunakan melalui ctx.libs.xxx.

#Skenario Penggunaan

#Daftar Library Bawaan

#Alias Tingkat Atas

Untuk kompatibilitas dengan kode historis, sebagian library juga diekspos di tingkat atas: ctx.React, ctx.ReactDOM, ctx.antd, ctx.dayjs. Direkomendasikan menggunakan ctx.libs.xxx secara seragam, untuk pemeliharaan dan pencarian dokumentasi yang lebih mudah.

#Lazy Loading

lodash, formula, math, dll. menggunakan lazy loading: saat pertama kali mengakses ctx.libs.lodash baru memicu dynamic import, kemudian menggunakan cache. React, antd, dayjs, antdIcons sudah pre-set oleh konteks, langsung dapat digunakan saat diakses.

#Contoh

#Render React dan Ant Design

const { Button, Card } = ctx.libs.antd;

ctx.render(
  <Card title="Judul">
    <Button type="primary">Klik</Button>
  </Card>
);

#Menggunakan Hooks

const { React } = ctx.libs;
const { useState } = React;
const { Button } = ctx.libs.antd;

const App = () => {
  const [count, setCount] = useState(0);
  return <Button onClick={() => setCount((c) => c + 1)}>{count}</Button>;
};
ctx.render(<App />);

#Menggunakan Ikon

const { Button } = ctx.libs.antd;
const { UserOutlined, HeartOutlined } = ctx.libs.antdIcons;

ctx.render(<Button icon={<UserOutlined />}>User</Button>);

#Pengolahan Tanggal dayjs

const now = ctx.libs.dayjs();
const formatted = now.format('YYYY-MM-DD HH:mm:ss');
ctx.message.info(formatted);

#Function Utility lodash

const user = { profile: { name: 'Alice' } };
const name = ctx.libs.lodash.get(user, 'profile.name', 'Unknown');

#Kalkulasi Formula formula

const values = [1, 2, 3, 4];
const sum = ctx.libs.formula.SUM(values);
const avg = ctx.libs.formula.AVERAGE(values);

#Ekspresi Matematika math

const result = ctx.libs.math.evaluate('2 + 3 * 4');
// result === 14

#Hal yang Perlu Diperhatikan

• Mencampur dengan ctx.importAsync: jika memuat React eksternal melalui ctx.importAsync('react@19'), JSX akan menggunakan instance tersebut; saat ini jangan dicampur dengan ctx.libs.antd, antd perlu dimuat sesuai dengan versi React tersebut (seperti ctx.importAsync('antd@5.x'), ctx.importAsync('@ant-design/icons@5.x')).
• Multiple instance React: jika muncul "Invalid hook call" atau hook dispatcher null, biasanya disebabkan oleh multiple instance React. Sebelum membaca ctx.libs.React atau memanggil Hooks, jalankan await ctx.importAsync('react@versi') terlebih dahulu untuk memastikan menggunakan React yang sama dengan halaman.

#Terkait

• ctx.importAsync() - Memuat modul ESM eksternal sesuai kebutuhan (seperti React, Vue versi tertentu)
• ctx.render() - Merender konten ke container