Reactivity

Declare state

signal(initialValue)

Uses signal to create reactive state. Each time the signal is updated, the view is automatically re-rendered:

Declare state

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

component("my-component", () => {
  const name = signal("Juan Cristobal");
  return html`<h1>Hello ${name}!</h1>`;
});

Update state

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

component("my-component", () => {
  const name = signal("Juan Cristobal");
  name("Xiomara"); // Updates the value
  return html`<h1>Hello ${name}!</h1>`;
});

The component is shown below:

Computed state

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

component("my-component", () => {
  const count = signal(10);
  const doubleCount1 = () => count() * 2; // arrow function
  const doubleCount2 = computed(() => count() * 2); //using computed

  return html`
    <div>
      <div>${doubleCount1()}</div>
      <div>${doubleCount2()}</div>
    </div>
  `;
});

The component is shown below: