registerComponent

registerComponent(ComponentClass: BaseConstructor): void

Registers a component and its merged family, then scans the document for matching elements.

Usage

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

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

registerComponent(Slider);

Parameters

• ComponentClass — a class extending Base, with a config.name.

Return value

• void. It is a registration, not an instantiation: the elements that match get their instances through the ordinary pipeline, and there is no list of instances to hand back. Use getInstances() if you need them.

It registers the family too

config.components is walked in one loop, so one call covers a whole tree:

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

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

class Accordion extends Base {
  static config = {
    name: 'Accordion',
    components: { AccordionItem },
  };
}

// Registers both.
registerComponent(Accordion);

A thunk in config.components is deferred rather than resolved, and becomes a lazy entry of the same registry under its key. See Autoloading.

The name comes from the merged config

Like the instance's $id and the instance-map key it publishes itself under. A subclass that extends a component with extra config and forgets to rename therefore collides with the name it inherited, rather than registering under undefined.

One name, one entry

As with customElements.define(). A second registration under a name already taken gives a registry.conflict warning and is ignored.

The exception is a lazy child declared by several parents: that is the normal case, and it is first wins, quietly. A token two components genuinely claim is caught by the class-name check when the import lands.

Registering a class you cannot edit

Do it in expression position:

registerComponent(
  class extends Vendor {
    static config = { name: 'CompactVendor', options: { compact: Boolean } };
  },
);

What it does not do

• It does not construct anything itself. The registry does, when the DOM and the mount strategy agree.
• It does not take a name or a selector. config.name is the only name, and arbitrary selectors are removed.
• It does not take a promise or a thunk. Use registerManifest() for a lazy entry.
• It has no inverse on a page. resetRegistry() exists for tests only — see /test.

@component

The decorator writes static config and calls this function in one step:

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

@component({ name: 'Slider', refs: ['next'] })
class Slider extends Base {}

See @component.