Komponentor

A lightweight JavaScript framework for building modular web applications with HTML-based components, a component tree, hash routing, and optional headless intents.

Features

• Components - Load HTML by URL into a host element; optional init_komponent(komponent, data) script; no build step.
• Component tree - Parent/child hierarchy with cascade destroy.
• Replace host - Option replaceHost: true to replace the host element with the component root (host removed; id copied for selectors).
• Scan - Auto-mount components from data-komponent="url|key=val" markers in the DOM.
• Hash router - Map hash paths to components; mount in an outlet with route params.
• Intents - Headless "components" (no DOM node): load HTML, run init, optionally attach UI via the manager; can be part of the tree (destroy with parent).
• jQuery optional - Core works without jQuery; jQuery is used only as a helper when present.

Repository contents

Module	File(s)	Description
Komponentor	src/komponentor.js	Single-file runtime: mount, scan, route, intent, context lifecycle.
KSimpleViews	src/ksimpleviews.js	KModel + KView: template rendering (Handlebars or built-in {{key}} fallback). Requires jQuery.

The build (esbuild) outputs to dist/: each script has a development (e.g. komponentor.js) and a minified (e.g. komponentor.min.js) version, both with source maps.

Quick start

1. Include the script (and optionally jQuery):

<div id="app"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="path/to/komponentor.js"></script>
<script>
  komponentor.config.debug = true;
  komponentor.config.baseUrl = "/";
  komponentor.root("#app", "components/welcome.html");
</script>

2. Define a component (e.g. components/welcome.html):

<div class="welcome">
  <h1>Hello</h1>
</div>
<script>
  function init_komponent(komponent, data) {
    // komponent.find("h1"), komponent.ctx.on(...), etc.
  }
</script>

3. Use the router (optional):

komponentor.route({
  outlet: "#app",
  routes: {
    "#/": "components/home.html",
    "#/about": "components/about.html",
  },
  notFound: "components/404.html",
});
komponentor.navigate("#/about");

API (single-file Komponentor)

Method	Description
komponentor.root(host, urlOrOpts)	Set app root; replace previous root.
komponentor.mount(host, urlOrOpts)	Mount a component on host. Options include replaceHost: true (replace host with component root).
komponentor.scan(container?, { parent?, replaceExisting? })	Mount all [data-komponent] in container.
komponentor.route({ outlet, routes, notFound })	Configure and start hash router.
komponentor.navigate(hash)	Set location.hash.
komponentor.intent(urlOrOpts).data(...).send({ parent? })	Run a headless intent (no DOM); optional parent for tree lifecycle.
komponentor.runIntent(url, data, { parent? })	Convenience wrapper for intent.

Component marker in HTML: data-komponent="/path/to/file.html|key=value".

Build

Build is powered by esbuild. Each file in src/ is built to dist/ as both a development and a minified bundle (with source maps).

npm install
npm run build

Output: dist/<name>.js and dist/<name>.min.js for each src/<name>.js. Use npm run watch to rebuild on change.

Documentation

• docs/komponentor.md - Komponentor: API, config, mount/scan, Context, Komponent, Intent, router.
• docs/ksimpleviews.md - KSimpleViews: KModel, KView, getKModel, templates, lifecycle.
• docs/HOW-TO-GUIDE.md - Single-file Komponentor: setup, mount, scan, router, intents, nested components, events.

Example pages are in docs/examples/.

Author

Sergiu Voicu · Logimaxx Systems SRL

License

MIT (see LICENSE).