esor

Fast, light and modern

All the power of Web Components and more in just 3 KB.

---

Esor is a lightweight and efficient JavaScript framework for building reactive user interfaces, leveraging native Web Components, signal-based reactivity, and an optimized templating engine.

🔥 Main Features

• Native Web Components: Encapsulated components using Shadow DOM.
• Signal-based Reactivity: Inspired by SolidJS, with functions like signal, effect, and computed.
• Declarative Templating: Template syntax similar to lit-html.
• Efficient DOM Reconciliation: Optimized updates without a Virtual DOM.
• Lifecycle & Events: Modular hooks and event management.
• Optimal Speed: Performance-centric architecture.
• Simple API: Familiar patterns from React and SolidJS.
• No Compilation Required.

📖 More Information

Learn more on our Esor Website ➞.

---

🔘 Badges

You can also check out some awesome libraries in the awesome-esor list 😎.

---

📦 Installation

Install Esor using npm or yarn:

npm install esor
# or
yarn add esor

---

⚛️ Basic Usage

Below is an example of a counter using the new API:

import { component, html, signal } from "esor";

component("my-counter", () => {
  const count = signal(0);

  return html`
    <div>
      <p>Counter: ${count()}</p>
      <button onclick=${() => count(count() + 1)}>Increment</button>
    </div>
  `;
});

Note:
In the new API, the signal function is used to create reactive values. To retrieve the current value, call count(), and to update it, call count(newValue).

Use it in your HTML like this:

<my-counter></my-counter>

---

📚 Documentation

For more detailed information about the API, please check the official documentation.

---

🫶🏻 Contribute

Contributions are welcome! Please review our Contribution Guidelines before submitting a pull request.

---

🔖 License

This project is distributed under the MIT license. See the LICENSE file for more details.