#Plugin

Dans NocoBase, le plugin client (Client Plugin) est le moyen principal pour étendre et personnaliser les fonctionnalités front-end. Vous pouvez hériter de la classe de base Plugin fournie par @nocobase/client-v2 dans src/client-v2/plugin.tsx du répertoire de votre plugin, puis enregistrer routes, modèles et autres ressources dans les méthodes du cycle de vie comme load().

La plupart du temps, seul load() vous concerne — la logique principale est en général enregistrée à l'étape load().

#Structure de base

// src/client-v2/plugin.tsx
import { Plugin } from '@nocobase/client-v2';

export class PluginHelloClient extends Plugin {
  async afterAdd() {
    // Exécuté après l'ajout du plugin
    console.log('Plugin added');
  }

  async beforeLoad() {
    // Exécuté avant le load() de tous les plugins
    console.log('Before load');
  }

  async load() {
    // Exécuté au chargement du plugin : enregistrer routes, modèles, etc.
    console.log('Plugin loaded');
  }
}

export default PluginHelloClient;

#Cycle de vie

À chaque rafraîchissement du navigateur ou initialisation de l'application, le plugin exécute séquentiellement afterAdd() → beforeLoad() → load() :

En général, écrire load() suffit pour développer un plugin client.

#Que faire dans load()

load() est le point d'entrée principal pour enregistrer les fonctionnalités du plugin. Opérations courantes :

Enregistrer des routes de page :

async load() {
  // Enregistrer une page indépendante
  this.router.add('hello', {
    path: '/hello',
    componentLoader: () => import('./pages/HelloPage'),
  });

  // Enregistrer une page de configuration de plugin (menu + page)
  this.pluginSettingsManager.addMenuItem({
    key: 'hello-settings',
    title: this.t('Configuration Hello'),
    icon: 'SettingOutlined',
  });
  this.pluginSettingsManager.addPageTabItem({
    menuKey: 'hello-settings',
    key: 'index',
    title: this.t('Configuration Hello'),
    componentLoader: () => import('./pages/HelloSettingPage'),
  });
}

Voir Router - routage pour l'utilisation détaillée.

Enregistrer un FlowModel :

async load() {
  this.flowEngine.registerModelLoaders({
    HelloModel: {
      // Import dynamique : le module n'est chargé que la première fois que ce model est utilisé
      loader: () => import('./HelloModel'),
    },
  });
}

registerModelLoaders utilise le chargement à la demande (import dynamique) ; le module n'est chargé qu'à la première utilisation du modèle. C'est la méthode d'enregistrement recommandée. Voir FlowEngine pour l'utilisation détaillée.

#Propriétés courantes du plugin

Dans une classe de plugin, les propriétés suivantes sont accessibles directement via this :

Si vous avez besoin d'accéder à plus de capacités NocoBase (par exemple api, t(i18n), logger), récupérez-les via this.context :

async load() {
  const { api, t, logger } = this.context;
}

Pour plus de capacités du contexte, voir Context.

#Liens connexes

• Router - routage — Enregistrer des routes de page et des pages de configuration de plugin
• Développement de Component — Comment écrire les composants React montés sur les routes
• Context — Utiliser les capacités intégrées de NocoBase via le contexte
• FlowEngine — Enregistrer des composants visuellement configurables tels que blocs, champs ou actions
• Écrire votre premier plugin — Créer un plugin de zéro