# Listeners

You can also add some basic listeners to the registry.

There are four self explanatory listeners:

  • componentAdded
  • componentRemoved
  • entityCreated
  • entityRemoved

You can register listeners with on* methods on the registry and unregister with off* methods.

The component* listeners accept listeners like:

<T extends keyof Components>(entity: Entity, name: T, component: Components[T]) => void

and the entity* listeners:

(entity: Entity) => void

For example:

type Components = {
  Name: {
    value: string;
  };
  SomeComponent: {};
};

import { createRegistry } from '@youniverse-center/ecsjs';

const reg = createRegistry<Components>();

reg.onEntityCreated((entity) => {
  console.log(`Entity ${entity.id} created.`);
});

reg.onEntityRemoved((entity) => {
  console.log(`Entity ${entity.id} removed`);
});

reg.onComponentAdded((entity, componentName, component) => {
  console.log(
    `Component "${componentName}" added to entity ${entity.id}`,
    component
  );
}, []);

reg.onComponentRemoved((entity, componentName, component) => {
  console.log(
    `Component "${componentName}" removed from entity ${entity.id}`,
    component
  );
});

const entityA = reg.createEntity();
entityA.addComponent('Name', { value: 'Entity A' });

const entityB = reg.createEntity();
const entityC = reg.createEntity();

entityB.addComponent('Name', { value: 'Entity B' });
entityB.addComponent('SomeComponent', {});
entityC.addComponent('Name', { value: 'Entity C' });
entityC.addComponent('SomeComponent', {});

entityC.removeComponent('SomeComponent');

reg.removeEntity(entityB.id);
reg.removeEntity(entityC.id);

will result in console

Entity 1 created.
Component "Name" added to entity 1 { value: 'Entity A' }
Entity 2 created.
Entity 3 created.
Component "Name" added to entity 2 { value: 'Entity B' }
Component "SomeComponent" added to entity 2 {}
Component "Name" added to entity 3 { value: 'Entity C' }
Component "SomeComponent" added to entity 3 {}
Component "SomeComponent" removed from entity 3 {}
Entity 2 removed
Component "Name" removed from entity 2 { value: 'Entity B' }
Component "SomeComponent" removed from entity 2 {}
Entity 3 removed
Component "Name" removed from entity 3 { value: 'Entity C' }

TIP

entityRemoved event is fired before removing components, so you have access to all components of that entity when the removeEntity was called.