#ctx.libs

ctx.libs est l'espace de noms unifié pour les bibliothèques intégrées dans RunJS, contenant des bibliothèques couramment utilisées telles que React, Ant Design, dayjs et lodash. Aucun import ou chargement asynchrone n'est requis ; elles peuvent être utilisées directement via ctx.libs.xxx.

#Scénarios d'utilisation

#Aperçu des bibliothèques intégrées

#Alias de niveau supérieur

Pour la compatibilité avec le code hérité, certaines bibliothèques sont également exposées au niveau supérieur : ctx.React, ctx.ReactDOM, ctx.antd et ctx.dayjs. Il est recommandé d'utiliser systématiquement ctx.libs.xxx pour faciliter la maintenance et la recherche dans la documentation.

#Chargement différé (Lazy Loading)

lodash, formula et math utilisent le chargement différé : un import dynamique est déclenché uniquement lors du premier accès à ctx.libs.lodash, et le cache est réutilisé par la suite. React, antd, dayjs et antdIcons sont pré-configurés par le contexte et sont disponibles immédiatement.

#Exemples

#Rendu avec React et Ant Design

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

ctx.render(
  <Card title="Titre">
    <Button type="primary">Cliquez ici</Button>
  </Card>
);

#Utilisation des 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 />);

#Utilisation des icônes

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

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

#Traitement des dates avec dayjs

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

#Fonctions utilitaires avec lodash

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

#Calculs de formules

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

#Expressions mathématiques avec math.js

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

#Précautions

• Mélange avec ctx.importAsync : Si un React externe est chargé via ctx.importAsync('react@19'), le JSX utilisera cette instance. Dans ce cas, ne le mélangez pas avec ctx.libs.antd. Ant Design doit être chargé pour correspondre à cette version de React (ex : ctx.importAsync('antd@5.x'), ctx.importAsync('@ant-design/icons@5.x')).
• Instances multiples de React : Si l'erreur "Invalid hook call" se produit ou si le dispatcher de hook est nul, cela est généralement causé par la présence de plusieurs instances de React. Avant de lire ctx.libs.React ou d'appeler des Hooks, exécutez d'abord await ctx.importAsync('react@version') pour vous assurer que la même instance React est partagée avec la page.

#Voir aussi

• ctx.importAsync() - Charger des modules ESM externes à la demande (ex : versions spécifiques de React, Vue)
• ctx.render() - Rendre le contenu dans un conteneur