Templating

Method html

Minimal template

Import the main API and define a simple component:

import { component, html } from "esor";

component("my-component", () => {
  return html`<h1>Hello World!</h1>`;
});

Styling

How to apply styles inline, through objects or <style></style> or <link/> tags inside the template.

import { component, html } from "esor";

component("my-component", () => {
  return html`
    <div class="container">
      <link href="./app.css" rel="stylesheet" />

      <h1 class="title">I am text</h1>
      <button style=${{ fontSize: "10rem", color: "brown" }}>
        I am a button
      </button>

      <input
        style="color: green; font-size: 2rem; font-weight: bold; width: 100%;"
        value="I am an input"
      />
    </div>

    <style>
      .title {
        color: red;
      }
    </style>
  `;
});

The component is shown below:

Using the Vite packer

import { component, html } from "esor";
import css from "./app.css?raw";

component("colors-loops", () => {
  const colors = ["red", "blue", "green", "yellow"];
  return html`
    <div class="container">
      <ul>
        ${colors.map((color) => html`<li key=${color}>${color}</li>`)}
      </ul>
    </div>

    <style>
      ${css}
    </style>
  `;
});

Loop

Iterate over arrays to generate lists, using expressions that map elements to DOM nodes.

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

component("colors-loops", () => {
  const colors = ["red", "blue", "green", "yellow"];
  return html`
    <ul>
      ${colors.map((color) => html`<li key=${color}>${color}</li>`)}
    </ul>
  `;
});

The component is shown below:

Loop Reactive

Use of signals to create reactive lists that are automatically updated when the status changes.

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

component("emoji-list", () => {
  const items = signal(["🎁", "📦", "🚚", "💪", "🐽", "🐸", "🐻", "🪱", "🪳"]);

  const cycle = () => {
    const newItems = [...items()];
    newItems.unshift(newItems.pop());
    items(newItems);
  };

  return html`
    <h2>Emoji List</h2>
    <ul>
      ${() => items().map((item) => html`<li key=${item}>${item}</li>`)} // wrap
      in function arrow to show the changes
    </ul>
    <button onclick=${cycle}>Cycle Emoji</button>
  `;
});

The component is shown below:

Events

Event management (e.g. clicks) to update status and react to user interaction.

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

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

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

INFO

ADVICE: Always wrap signal readings in functions ${() => count(count() + 1)} to ensure that the system reacts to changes.

Dom Ref

Various approaches for handling references to DOM elements:

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

component("counter-app", () => {
  const inputRef = { current: null };
  onMount(() => inputRef.current?.focus());
  return html` <input ref=${inputRef} placeholder="Write something..." /> `;
});

With assignment

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

component("counter-app", () => {
  let inputRef;
  onMount(() => inputRef.focus());
  return html`
    <input ref=${(el) => (inputRef = el)} placeholder="Write something..." />
  `;
});

With ref method

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

component("my-component", () => {
  const inputElement = ref();
  onMount(() => inputElement().focus());
  return html`<input ref=${inputElement} placeholder="Write something..." />`;
});

The component is shown below:

Conditional

Conditional rendering to display different content depending on the state.

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

const TRAFFIC_LIGHTS = ["red", "orange", "green"];

component("template-conditional", () => {
  const lightIndex = signal(0);
  const nextLight = () =>
    lightIndex((lightIndex() + 1) % TRAFFIC_LIGHTS.length);

  return html`
    <button onclick=${nextLight}>Next light</button>

    Light is:
    <p style=${() => "color: " + TRAFFIC_LIGHTS[lightIndex()]}>
      ${() => TRAFFIC_LIGHTS[lightIndex()]}
    </p>

    <p>
      You must ${() =>
        TRAFFIC_LIGHTS[lightIndex()] === "red" && html`<span>STOP</span>`} ${() =>
        TRAFFIC_LIGHTS[lightIndex()] === "orange" &&
        html`<span>SLOW DOWN</span>`} ${() =>
        TRAFFIC_LIGHTS[lightIndex()] === "green" && html`<span>GO</span>`}
    </p>
  `;
});

The component is shown below: