@component

component(config: BaseConfig): (value, context) => void

Writes static config and calls registerComponent(), in one step.

Usage

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

@component({
  name: 'Slider',
  refs: ['next', 'items[]'],
  options: { speed: { type: Number, default: 1 } },
})
class Slider extends Base {
  onNextClick() {}
}

The class is registered as soon as it is defined, so there is no separate registration line to forget.

It merges with static config

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

@component({ name: 'Slider', refs: ['next'] })
class Slider extends Base {
  static config = { name: 'Slider', options: { speed: Number } };
}

They merge in a class initializer, which runs after the fields and inside the class definition, so registerComponent() on the next line reads the finished config.

The rules are the rules of $config:

Key	Merge rule
refs	union
options, components	entry by entry
a declared scalar	overrides

A key both sides declare differently is reported as component.config-conflict.

It is applied last

Among stacked class decorators, @component is applied last, so it registers a finished class. That is what lets a service mixin decorator sit under it:

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

@component({ name: 'Header' })
@withScroll()
class Header extends Base {
  scrolled() {}
}

The function form

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

class Slider extends Base {
  static config = { name: 'Slider', refs: ['next'] };
}

registerComponent(Slider);

Identical behaviour, no build step.