https://github.com/devlop/komponent
Minimalistic frontend component framework
https://github.com/devlop/komponent
framework frontend javascript typescript
Last synced: 14 days ago
JSON representation
Minimalistic frontend component framework
- Host: GitHub
- URL: https://github.com/devlop/komponent
- Owner: devlop
- License: mit
- Created: 2021-01-17T05:40:21.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2021-04-11T17:41:29.000Z (about 5 years ago)
- Last Synced: 2024-04-23T20:44:03.918Z (about 2 years ago)
- Topics: framework, frontend, javascript, typescript
- Language: JavaScript
- Homepage:
- Size: 117 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# komponent
bare bones frontend framework for working with frontend components.
# Installing
using npm
```bash
npm install @devlop-ab/komponent
```
# Usage
Create an instance, then register a component for every selector you want to enhance.
```js
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.
```js
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.
```js
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.