Core Concepts

Reactivity

Sigment uses fine-grained reactivity, meaning only the specific parts of the DOM that need to update will change. This avoids virtual DOM diffing and improves performance.

Creating Elements

Elements are created using tag functions like div(), button(), etc. These functions accept optional props and children:

div({ id: "myDiv" }, "Hello world")
// or without props
div("Hello world")

Dynamic Custom Elements with addsigment

Sigment allows adding custom tag functions dynamically via addsigment. For example, to add a new tag function product(), call:

addsigment("product");

After calling this, you can create elements with product() just like built-in tags. Both with or without props:

product({ class: "item" }, "Product name")
// or
product("Product name")

In TypeScript, you can declare the type for these custom tags globally:

declare global {
  function product(props: Props<"div">, ...children: Child[]): HTMLElement;
  function product(...children: Child[]): HTMLElement;
}

Note: Using addsigment is optional. Most common use cases work with built-in tag functions.