Templates and Binding

Element uses tagged template literals for creating reactive DOM elements. The html() function processes these templates and sets up automatic updates.

Basic Syntax

const [title, setTitle] = createSignal("Hello World!");

const template = html`
  <div class="container">
    <h1>${title}</h1>
    <p>Lorem ipsum dolor sit amet...</p>
  </div>
`;

Binding Types

Element supports different types of bindings:

1. Text Binding

const [text, setText] = createSignal("Lorem ipsum dolor sit amet...");
const template = html`<p>${text}</p>`;

2. Attribute Binding

const [className, setClassName] = createSignal("link-wrapper");
const [url, setUrl] = createSignal("https://github.com");

const template = html`
  <div class="${className}">
    <a href="${url}">Link</a>
  </div>
`;

3. Property Binding

const [isChecked, setIsChecked] = createSignal(true);
const [inputValue, setInputValue] = createSignal(
  "Lorem ipsum dolor sit amet..."
);

const template = html`
  <div>
    <input
      type="checkbox"
      checked="${isChecked}"
      onchange="${(e) => console.log(e.target.checked)}"
    />
    <input
      type="text"
      value="${inputValue}"
      oninput="${(e) => console.log(e.target.value)}"
    />
  </div>
`;

Supported DOM Properties

properties:
  - checked
  - defaultChecked
  - defaultSelected
  - defaultValue
  - disabled
  - hidden
  - innerHTML
  - innerText
  - readOnly
  - required
  - selected
  - textContent
  - value

4. Event Binding

const [count, setCount] = createSignal(0);

const template = html`
  <button type="button" onclick="${() => setCount(count() + 1)}">
    Count: ${count}
  </button>
`;

Supported DOM Events

events:
  - onblur
  - onchange
  - onclick
  - oncontextmenu
  - ondblclick
  - onfocus
  - oninput
  - onkeydown
  - onkeypress
  - onkeyup
  - onmousedown
  - onmousemove
  - onmouseout
  - onmouseover
  - onmouseup
  - onresize
  - onscroll
  - onsubmit

Built-in Components

Element provides built-in components for common patterns:

Conditional Rendering

import { If, IfOrElse } from "@dmnchzl/element";

const [loading, setLoading] = createSignal(true);
const [user, setUser] = createSignal<{ name: string } | null>(null);

// Simple conditional
const loadingTemplate = If(loading, (isLoading) => html`<div>Loading...</div>`);

// Complex conditional
const userTemplate = IfOrElse(
  user,
  (value) => html`<h2>Hi ${value.name}!</h2>`,
  () => html`<h2>Welcome 👋</h2>`
);

List Rendering

import { For } from "@dmnchzl/element";

const [fruits, setFruits] = createSignal([
  { id: "A", name: "Apple" },
  { id: "B", name: "Banana" },
  { id: "C", name: "Cherry" },
]);

const listTemplate = For(
  fruits,
  (fruit, index) => html`<li>${index + 1}. ${fruit.name}</li>`
);