komponent

bare bones frontend framework for working with frontend components.

Installing

using npm

npm install @devlop-ab/komponent

Usage

Create an instance, then register a component for every selector you want to enhance.

import komponent from '@devlop-ab/komponent';

const component = komponent({
    // scopeSelector: '[class^="component"]',
});

component('[data-component="dropdown"]', function (element) {
    // `this` is a Komponent instance scoped to `element`
});

Each registered callback runs once per matching element. Elements present at registration are initialized immediately (or, if the document is still loading, once DOMContentLoaded fires).

Dynamic components

Elements added to the DOM after registration (AJAX responses, template clones, markup rendered by another component) are not picked up automatically unless you opt in.

refresh

refresh() re-scans for matching elements and initializes any new ones. Pass an element to limit the scan to that subtree, or omit it to scan the whole document. Already-initialized elements are skipped.

const component = komponent({});

component('[data-component="dropdown"]', callback);

// after inserting new markup
component.refresh();              // scan the whole document
component.refresh(container);     // scan only `container` and its descendants

observe

Set observe: true to have komponent watch the DOM with a MutationObserver and initialize matching elements as they appear, with no manual refresh(). It is opt-in and off by default.

const component = komponent({
    observe: true,
});

Teardown

Removing a component's element from the DOM does not detach event listeners that were registered with addEventListener on targets outside the component (for example window or document). Call remove() on the Komponent instance before discarding its element, otherwise those listeners leak.