#ctx.libs

ctx.libs là namespace thống nhất của các thư viện có sẵn trong RunJS, bao gồm các thư viện thường dùng như React, Ant Design, dayjs, lodash. Không cần import hoặc tải bất đồng bộ, có thể sử dụng trực tiếp qua ctx.libs.xxx.

#Kịch bản áp dụng

#Tổng quan thư viện có sẵn

#Alias top-level

Để tương thích với code lịch sử, một số thư viện cũng được expose ở top-level: ctx.React, ctx.ReactDOM, ctx.antd, ctx.dayjs. Khuyến nghị sử dụng đồng nhất ctx.libs.xxx, tiện cho việc bảo trì và tra cứu tài liệu.

#Lazy load

lodash, formula, math, v.v. sử dụng lazy load: chỉ khi truy cập ctx.libs.lodash lần đầu mới khởi tạo dynamic import, sau đó tái sử dụng cache. React, antd, dayjs, antdIcons được preset bởi ngữ cảnh, có thể truy cập ngay.

#Ví dụ

#Render với React và Ant Design

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

ctx.render(
  <Card title="标题">
    <Button type="primary">点击</Button>
  </Card>
);

#Sử dụng 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 />);

#Sử dụng icon

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

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

#Xử lý ngày tháng với dayjs

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

#Hàm công cụ lodash

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

#Tính toán công thức formula

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

#Biểu thức toán học math

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

#Lưu ý

• Sử dụng lẫn lộn với ctx.importAsync: Nếu đã tải React bên ngoài qua ctx.importAsync('react@19'), JSX sẽ sử dụng instance đó; tại thời điểm này không trộn lẫn với ctx.libs.antd, antd cần được tải kèm với phiên bản React đó (như ctx.importAsync('antd@5.x'), ctx.importAsync('@ant-design/icons@5.x')).
• Nhiều instance React: Nếu xuất hiện "Invalid hook call" hoặc hook dispatcher là null, thường do nhiều instance React gây ra. Trước khi đọc ctx.libs.React hoặc gọi Hooks, hãy thực thi await ctx.importAsync('react@phiên bản') trước để đảm bảo dùng chung instance React với page.

#Liên quan

• ctx.importAsync() - Tải module ESM bên ngoài theo nhu cầu (như React, Vue phiên bản chỉ định)
• ctx.render() - Render nội dung vào container