{"id":26322993,"url":"https://github.com/devlop/komponent","last_synced_at":"2026-05-20T15:14:24.418Z","repository":{"id":57107951,"uuid":"330322898","full_name":"devlop/komponent","owner":"devlop","description":"Minimalistic frontend component framework","archived":false,"fork":false,"pushed_at":"2021-04-11T17:41:29.000Z","size":120,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-04-23T20:44:03.918Z","etag":null,"topics":["framework","frontend","javascript","typescript"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/devlop.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-01-17T05:40:21.000Z","updated_at":"2021-04-11T17:40:48.000Z","dependencies_parsed_at":"2022-08-20T17:11:24.806Z","dependency_job_id":null,"html_url":"https://github.com/devlop/komponent","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devlop%2Fkomponent","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devlop%2Fkomponent/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devlop%2Fkomponent/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devlop%2Fkomponent/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devlop","download_url":"https://codeload.github.com/devlop/komponent/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243762249,"owners_count":20343979,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["framework","frontend","javascript","typescript"],"created_at":"2025-03-15T17:16:07.091Z","updated_at":"2026-05-20T15:14:24.414Z","avatar_url":"https://github.com/devlop.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://www.npmjs.org/package/@devlop-ab/komponent\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/@devlop-ab/komponent.svg\" alt=\"Latest Stable Version\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://github.com/devlop/komponent/blob/main/LICENSE.md\"\u003e\u003cimg src=\"https://img.shields.io/badge/license-MIT-green\" alt=\"License\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n# komponent\n\nbare bones frontend framework for working with frontend components.\n\n# Installing\n\nusing npm\n\n```bash\nnpm install @devlop-ab/komponent\n```\n\n# Usage\n\nCreate an instance, then register a component for every selector you want to enhance.\n\n```js\nimport komponent from '@devlop-ab/komponent';\n\nconst component = komponent({\n    // scopeSelector: '[class^=\"component\"]',\n});\n\ncomponent('[data-component=\"dropdown\"]', function (element) {\n    // `this` is a Komponent instance scoped to `element`\n});\n```\n\nEach registered callback runs once per matching element. Elements present at\nregistration are initialized immediately (or, if the document is still loading,\nonce `DOMContentLoaded` fires).\n\n# Dynamic components\n\nElements added to the DOM after registration (AJAX responses, template clones,\nmarkup rendered by another component) are not picked up automatically unless you\nopt in.\n\n## refresh\n\n`refresh()` re-scans for matching elements and initializes any new ones. Pass an\nelement to limit the scan to that subtree, or omit it to scan the whole document.\nAlready-initialized elements are skipped.\n\n```js\nconst component = komponent({});\n\ncomponent('[data-component=\"dropdown\"]', callback);\n\n// after inserting new markup\ncomponent.refresh();              // scan the whole document\ncomponent.refresh(container);     // scan only `container` and its descendants\n```\n\n## observe\n\nSet `observe: true` to have komponent watch the DOM with a `MutationObserver`\nand initialize matching elements as they appear, with no manual `refresh()`.\nIt is opt-in and off by default.\n\n```js\nconst component = komponent({\n    observe: true,\n});\n```\n\n# Teardown\n\nRemoving a component's element from the DOM does not detach event listeners that\nwere registered with `addEventListener` on targets outside the component (for\nexample `window` or `document`). Call `remove()` on the Komponent instance before\ndiscarding its element, otherwise those listeners leak.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevlop%2Fkomponent","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevlop%2Fkomponent","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevlop%2Fkomponent/lists"}