Instantiation

Usage

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

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

const component = new Component(document.querySelector('.component'));
component.$mount();

Parameters

• element (HTMLElement): the root element of the component/application

Return value

Returns an instance of the class not yet mounted.

Recommended

Use the registerComponent(Component) function to register and mount components independently — no need for a monolithic App class.

TIP

Use the $register(nameOrSelector?: string) static method to instantiate multiple instances on elements matching a name (e.g. [data-component="<name>"]) or a CSS selector.

TIP

Use the createApp(Base, rootElement) function when you need to configure global features (breakpoints, attributes, blocking) or access the root app instance.

Examples

Using registerComponent (recommended)

Register and mount components independently:

app.js

import { registerComponent } from '@studiometa/js-toolkit';
import Component from './Component.js';

registerComponent(Component);

Component.js

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

export default class Component extends Base {
  static config = {
    name: 'Component',
  };
}

Using createApp

Use createApp when you need to configure global features or access the root app instance:

app.js

import { Base, createApp } from '@studiometa/js-toolkit';
import Component from './Component.js';

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

export default createApp(App);

Component.js

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

export default class Component extends Base {
  static config = {
    name: 'Component',
  };
}