Events

Lifecycle events

mounted

Emitted when the instance is mounted.

import { Base } from '@studiometa/js-toolkit';

class App extends Base {
  static config = {
    name: 'App',
  };
}

const app = new App(document.body);

app.$on('mounted', () => {
  console.log('App is mounted');
});

updated

import { Base } from '@studiometa/js-toolkit';

class App extends Base {
  static config = {
    name: 'App',
  };
}

const app = new App(document.body);

app.$on('updated', () => {
  console.log('$update() has been called on this component');
});

destroyed

import { Base } from '@studiometa/js-toolkit';

class App extends Base {
  static config = {
    name: 'App',
  };
}

const app = new App(document.body);

app.$on('destroyed', () => {
  console.log('$destroy() has been called on this component');
});

terminated

import { Base } from '@studiometa/js-toolkit';

class App extends Base {
  static config = {
    name: 'App',
  };
}

const app = new App(document.body);

app.$on('terminated', () => {
  console.log('$terminate() has been called on this component');
});

Services events

keyed

import { Base } from '@studiometa/js-toolkit';

class App extends Base {
  static config = {
    name: 'App',
  };
}

const app = new App(document.body);

app.$on('keyed', () => {
  console.log('User is typing');
});

moved

import { Base } from '@studiometa/js-toolkit';

class App extends Base {
  static config = {
    name: 'App',
  };
}

const app = new App(document.body);

app.$on('moved', () => {
  console.log('User is moving their cursor');
});

resized

import { Base } from '@studiometa/js-toolkit';

class App extends Base {
  static config = {
    name: 'App',
  };
}

const app = new App(document.body);

app.$on('resized', () => {
  console.log('User is resizing the window');
});

scrolled

import { Base } from '@studiometa/js-toolkit';

class App extends Base {
  static config = {
    name: 'App',
  };
}

const app = new App(document.body);

app.$on('scrolled', () => {
  console.log('User is scrolling');
});

ticked

import { Base } from '@studiometa/js-toolkit';

class App extends Base {
  static config = {
    name: 'App',
  };
}

const app = new App(document.body);

app.$on('ticked', () => {
  console.log('The render loop has ticked');
});