📦 component-lifecycle

A lightweight, framework‑agnostic lifecycle engine for DOM components with typed events, a strict state machine, and ergonomic event APIs.

👉 Full documentation: https://palcarazm.github.io/component-lifecycle/

✨ Features

• Full lifecycle: init → attach → dispose → destroy
• Strict finite state machine with validated transitions
• Typed events with static prefixes (on, once, off)
• Framework‑agnostic and dependency‑free
• Introspection: current state, allowed transitions, history
• TypeScript‑first design

🚀 Installation

npm install component-lifecycle

🧩 Quick Start

import { Component } from "component-lifecycle";

class MyComponent extends Component<"my-component"> {
    protected readonly PREFIX = "my-component";

    protected onInit() {
        console.log("initialized");
    }
}

const element = document.querySelector("#my-element");
const c = new MyComponent(element);

c.init();

🎧 Typed Events

const c = new MyComponent(element);

c.on("my-component:initialized", (ev) => {
    console.log(ev.detail.component);
});

Collaborators welcome!

• :sos: Do you need some help? Open a thread in GitHub Discussions Q&A
• :bug: Do you find a bug? Open an issue in GitHub bug report
• :bulb: Do you have a great idea? Open an issue in GitHub feature request
• :computer: Do you know how to fix a bug? Open a pull request in GitHub pull request.

¿Do you like the project? Give us a :star: in GitHub.