Gestión de eventos

Jutro está configurado para manejar y enviar eventos desde su aplicación de Jutro para eventos, como cuando un usuario hace clic en el botón Cancelar en un formulario o cuando va a una página determinada. Para acceder a estas funciones:

1. Agregue el paquete @jutro/events a su archivo package.json.
2. Utilice la siguiente importación en su código:

import {
  publish,
  subscribe,
  unsubscribe,
  UnsubscribeAll,
  JUTRO_TOPICS,
} from '@jutro/events';

Jutro proporciona tipos de eventos predeterminados para sus componentes, que se definen en un objeto llamado JUTRO_TOPICS:

const JUTRO_TOPICS = {
  COMPONENT_LOADED: 'JUTRO_TOPICS.COMPONENT_LOADED',
  VALUE_CHANGED: 'JUTRO_TOPICS.VALUE_CHANGED',
  FIELD_BLUR: 'JUTRO_TOPICS.FIELD_BLUR',
  ROUTE_CHANGED: 'JUTRO_TOPICS.ROUTE_CHANGED',
  FETCH_REQUEST: 'JUTRO_TOPICS.FETCH_REQUEST',
  FETCH_RESPONSE: 'JUTRO_TOPICS.FETCH_RESPONSE',
  FETCH_ERROR: 'JUTRO_TOPICS.FETCH_ERROR',
  UNKNOWN_ERROR: 'JUTRO_TOPICS.UNKNOWN_ERROR',
  BUTTON_CLICKED: 'JUTRO_TOPICS.BUTTON_CLICKED',
  LINK_CLICKED: 'JUTRO_TOPICS.LINK_CLICKED',
};

Publicación de eventos

Puede publicar eventos con el método publish. El método publish, que normalmente se utiliza dentro de una función onclick() o onchange() en su código, acepta dos parámetros:

• topic. Sting que contiene el nombre del tema.
• event: Evento que se desencadenó, en forma de objeto con la información relevante.

publish('ACCOUNT_CREATED', dataObj);

Los siguientes componentes heredados publican eventos de forma predeterminada:

• AppSwitcher
• AsyncLink
• Ruta de navegación
• DropdownMenuButton
• ErrorBoundary
• ErrorNotice
• InlineNotification
• Modal
• NavBar
• NotificationAction
• PopoverContainer
• Notificación de sistema (toast)
• TreeView
• Asistente

Los componentes creados a partir de Jutro 10.0 no publican eventos de forma predeterminada; sin embargo, los componentes heredados, como los enumerados en la sección anterior, sí lo hacen. Para desactivar todas las configuraciones predeterminadas de publicación de eventos, agregue JUTRO_DISABLE_AUTO_EVENTS_PUBLISHING=true al archivo .env en la raíz de su aplicación de Jutro. Cuando se establece en true, o cuando esté creando un nuevo evento, primero debe publicar el evento y, luego, suscribirse para realizar un seguimiento del evento.

Note: Se recomienda establecer JUTRO_DISABLE_AUTO_EVENTS_PUBLISHING=true en su archivo .env para garantizar una experiencia coherente en todos los eventos de componentes.

Suscripción a eventos

Puede realizar un seguimiento de los eventos utilizando el método subscribe. Se aceptan dos parámetros:

• topics. Nombre de tema o una lista de nombres de temas a los que suscribirse, utilizando uno de los siguientes tipos de datos:
  • string. Un solo nombre de tema.
  • strings []. Matriz de nombres de temas.
  • object. Pares clave-valor en los que el valor es un nombre de tema.
• handler. Función que se ejecutará cuando se reciba el evento. El controlador recibe el evento desencadenado, así como el nombre del tema en forma de string.

El método subscribe devuelve un handle que se puede usar para finalizar la suscripción de un agente de escucha específico.

// registers one topic
subscribe(JUTRO_TOPICS.ROUTE_CHANGED, (event) => console.log(event));

// registers a subset of Jutro topics
subscribe(
  [JUTRO_TOPICS.VALUE_CHANGED, JUTRO_TOPICS.FIELD_BLUR],
  (event, topic) => console.log(topic, event)
);

// registers all Jutro topics
subscribe(JUTRO_TOPICS, (event, topic) => console.log(topic, event));

Anulación de suscripción a eventos individuales

Puede anular la suscripción de agentes de escucha individuales utilizando el método unsubscribe. Se acepta un parámetro:

• handle. El controlador se utiliza para anular la suscripción a un agente de escucha específico.

// subscribe will return handles
// then you can unsubscribe a single listener
const handle = subscribe(JUTRO_TOPICS.ROUTE_CHANGED, () =>
  console.log('event fired')
);
unsubscribe(handle);

const [valueChangeHandle, blurHandle] = subscribe(
  [JUTRO_TOPICS.VALUE_CHANGED, JUTRO_TOPICS.FIELD_BLUR],
  () => console.log('event fired')
);
unsubscribe(valueChangeHandle);
unsubscribe(blurHandle);

const handles = subscribe(JUTRO_TOPICS, () => console.log('event fired'));
unsubscribe(handles[JUTRO_TOPICS.ROUTE_CHANGED]);

Anulación de suscripción a temas completos o eliminación de todos los agentes de escucha

Puede anular la suscripción de temas completos o eliminar en su totalidad a todos los agentes de escucha mediante el método UnsubscribeAll. Se acepta un parámetro:

• topic. Un nombre de tema que utilice uno de los siguientes tipos de datos:
  • string. Un solo nombre de tema.
  • strings []. Matriz de nombres de temas.
  • object. Pares clave-valor en los que el valor es un nombre de tema.

// unsubscribe all listeners from one topic
UnsubscribeAll(JUTRO_TOPICS.ROUTE_CHANGED);

// unsubscribe all listeners from a subset of Jutro topics
UnsubscribeAll([JUTRO_TOPICS.VALUE_CHANGED, JUTRO_TOPICS.FIELD_BLUR]);

// unsubscribe all listeners from Jutro topics
UnsubscribeAll(JUTRO_TOPICS);

// unsubscribe all existing topics
UnsubscribeAll();

Creación de un proveedor de eventos personalizado

Puede crear su propia instancia de EventProvider, sin embargo, no se adjuntará a los eventos predeterminados de Jutro. Esto puede ser útil en sus casos de prueba.

import { EventProvider } from '@jutro/events';

const provider = new EventProvider();

provider.publish(...)
provider.subscribe(...)
provider.unsubscribe(...)
provider.UnsubscribeAll(...)