⚡ h Function in SeraJS

The h function is a lightweight helper used to create DOM elements or component trees in plain JavaScript. It allows you to build UIs without using JSX syntax.

---

🧠 What It Does

The h function:

• Creates HTML/SVG elements or calls functional components.
• Accepts children as variadic arguments.
• Normalizes props and appends children properly.
• Supports full integration with SeraJS reactivity (signals, effects, memos).

---

📥 Function Signature

h(type, props?, ...children)

Parameter	Description
type	A string like "div", "svg", or a component function.
props	An optional object with attributes, styles, events, etc.
children	Zero or more child elements, strings, functions, or nodes.

---

🔧 How It Works

Props Handling

• If props is null or undefined, it defaults to {}.

• If children are passed:

  • A single child is assigned directly: props.children = child
  • Multiple children are grouped in an array: props.children = [child1, child2, ...]

Component or Element Creation

• If type is a function, it’s treated as a component and invoked with props.

• If type is a string, a DOM element is created and:

  • props are applied (class, style, events, etc.)
  • Children are inserted and made reactive if functions.

---

✅ Example

const element = h(
  "div",
  { className: "box" },
  "Hello ",
  h("span", null, "World")
);

Output:

<div class="box">Hello <span>World</span></div>

---

🧪 Reactive Example

import { setSignal, h } from "serajs";

const [getCount, setCount] = setSignal(0);

const App = () =>
  h(
    "div",
    { className: "app" },
    h("h1", null, "Count: ", () => getCount()),
    h("button", { onClick: () => setCount((c) => c + 1) }, "Increment")
  );

document.body.appendChild(App());

Output: Live-updating count that reacts to button clicks.

---

🧵 Summary

Feature	Description
DOM creation	Works with HTML & SVG
Component rendering	Accepts functional components
Props & Events	Supports className, style, event handlers
Variadic children	Automatically handled
Reactive support	Integrates with signals, memos, effects