Instantiation

See also

For getting started with component setup, see the Getting Started guide and Components guide.

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

The registerComponent(Component) function registers and mounts components independently — no need for a monolithic App class.

TIP

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

TIP

The createApp(Base, rootElement) function configures global features (breakpoints, attributes, blocking) and gives access to 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',
  };
}