#Relação entre FlowEngine e Plugins

O FlowEngine não é um plugin, mas sim uma API central fornecida para que os plugins a utilizem, conectando as capacidades centrais com as extensões de negócio. No NocoBase 2.0, todas as APIs estão centralizadas no FlowEngine, e os plugins podem acessar o FlowEngine através de this.engine.

class PluginHello extends Plugin {
  async load() {
    this.engine.registerModelLoaders({ ... });
  }
}

#Context: Capacidades Globais Gerenciadas Centralmente

O FlowEngine oferece um Context centralizado que reúne as APIs necessárias para diversos cenários, por exemplo:

class PluginHello extends Plugin {
  async load() {
    // Extensão de rota
    this.engine.context.router;

    // Fazer uma requisição
    this.engine.context.api.request();

    // Relacionado à internacionalização (i18n)
    this.engine.context.i18n;
    this.engine.context.t('Hello');
  }
}

Observação: O Context no 2.0 resolve os seguintes problemas da versão 1.x:

• Contexto disperso, chamadas inconsistentes
• O contexto era perdido entre diferentes árvores de renderização do React
• Só podia ser usado dentro de componentes React

Para mais detalhes, consulte o capítulo FlowContext.

#Apelidos de Atalho em Plugins

Para simplificar as chamadas, o FlowEngine oferece alguns apelidos na instância do plugin:

• this.context → equivalente a this.engine.context
• this.router → equivalente a this.engine.context.router

#Exemplo: Estendendo a Rota

import { createMockClient, Plugin } from '@nocobase/client';

class PluginHelloModel extends Plugin {
  async afterAdd() {}
  async beforeLoad() {}
  async load() {
    this.router.add('root', {
      path: '/',
      element: <div>Hello</div>,
    });
  }
}

// Para cenários de exemplo e teste
const app = createMockClient({
  plugins: [PluginHelloModel],
});

export default app.getRootComponent();

Neste exemplo:

• O plugin estende a rota para o caminho / usando o método this.router.add;
• createMockClient fornece uma aplicação mock limpa para facilitar a demonstração e os testes;
• app.getRootComponent() retorna o componente raiz, que pode ser montado diretamente na página.