API Design

[pearmini]

Overview

The fast, 3KB JavaScript framework for "echoing" reactive UI in functional style.

• No Compiling, but Fine-tune Reactivity and No Virtual DOM
• Structural Code, but Nicely Reusable Logic and Flexible Organization of Concerns
• No Transpiling, but Readable Template and Fully TS Support

UI = f(template, reactive)

import Echo, {X} from "echox";

const Counter = EchoX.component(
  X.div()(
    X.button({onclick: (x) => x.increment})("👍"),
    X.button({onclick: (x) => x.decrement})("👎"),
    X.span()((x) => x.value),
  ),
  Echo.reactive()
    .state("value", () => 0)
    .state("increment", (x) => () => x.value++)
    .state("decrement", (x) => () => x.value--),
);

Echo.mount(document.body, Counter());

For more out of the box usage and simpler scenario:

import * as X from "echox-html";

const node = X.html`<reactive
  value=${X.state(() => 0)} 
  decrement=${X.state((x) => () => x.value--)} 
  increment=${X.state((x) => () => x.value++)}
>
  <button onclick=${(x) => x.increment}>👍</button>
  <button onclick=${(x) => x.decrement}>👎</button>
  <span>${(x) => x.value}</span>
</reactive>`;

document.body.append(node);

• Hypertext Literal
• HTM
• [email protected]
• D3
• Vanjs

[pearmini]

State

Echo.render(
  X.span()((t) => t.text),
  Echo.reactive().state("text", "hello world"),
);

Echo.render(
  X.div()(
    X.button({$click: (t) => t.value++})("👍"),
    X.button({$click: (t) => t.value--})("👎"),
    X.span()((t) => t.value),
  ),
  Echo.reactive().state("value", 0),
);

Echo.render(
  X.fragment()(
    X.p()("Original message: ", (t) => t.message),
    X.p()("Computed reversed message: ", (t) => t.reversed),
  ),
  Echo.reactive()
    .state("message", "hello")
    .computed("reversed", (t) => t.message.split("").reverse().join("")),
);

[pearmini]

Bindings

Echo.render(
  X.span()((t) => t.text),
  Echo.reactive().state("text", "hello world"),
);

Echo.render(
  X.button({disabled: (t) => t.disabled})("Button"),
  Echo.reactive().state("disabled", true),
);

Echo.render(
  X.span({style: (t) => `background: ${t.background}; font-size: 20px`})("Hello World"),
  Echo.reactive().state("background", "steelblue"),
);

[pearmini]

List rendering

Echo.render(
  X.ul()(
    Echo.For({each: (t) => t.items})(
      X.li()((item) => item.$index + "-" + item.message),
    ),
  ),
  Echo.reactive().state("items", () => [{message: "Foo"}, {message: "Bar"}]),
);

Echo.render(
  X.ul()(
    Echo.For({each: (t) => t.items})(
      X.li()(
        X.span()((item) => item.$index + "-" + item.message),
        Echo.For({each: (item) => item.tags})(
          X.span()((tag) => tag)
        ),
      ),
    ),
  ),
  Echo.reactive().state("items", () => [
    {message: "Foo", tags: ["A", "B", "C"]},
    {message: "Bar", tags: ["B", "C", "D"]},
  ]),
);

[pearmini]

Conditional Rendering

Echo.render(
  X.div()(
    Echo.Match()(
      Echo.Arm({test: (d) => d.random > 0.5})(X.div()("A")),
      Echo.Arm({test: (d) => d.random > 0.3})(X.div()("B")),
      Echo.Arm()(X.div()("C")),
    ),
  ),
  Echo.reactive().state("random", () => Math.random()),
);

Echo.render(
  X.div()(
    Echo.Match({value: (d) => d.name})(
      Echo.Arm({test: "A"})(X.div()("a")),
      Echo.Arm({test: "B"})(X.div()("b")),
      Echo.Arm()(X.div()("c")),
    ),
  ),
  Echo.reactive()
    .state("random", () => Math.random())
    .computed("name", (d) => (d.random > 0.5 ? "A" : d.random > 0.3 ? "B" : "C")),
);

Echo.render(
  X.div()(
    Echo.Match({test: (d) => d.random > 0.5})(
      X.div()("A"),
      X.div()("B"),
    ),
  ),
  Echo.reactive().state("random", () => Math.random()),
);

[pearmini]

Events

Echo.render(
  X.fragment()(
    X.button({$click: (t) => t.value++})("👍"),
    X.button({$click: (t) => t.value--})("👎"),
    X.span()((t) => t.value),
  ),
  Echo.reactive().state("value", 0),
);

[pearmini]

Refs & Effects

Echo.render(
  X.span({ref: "span"})("Hello World"),
  Echo.reactive()
    .ref("span", null)
    .effect((t) => (t.span.style.color = "#ececec")),
);

[pearmini]

Components

const Label = Echo.component(
  X.span({style: (t) => `font-size: 20px; color: ${t.color}`})(
    (t) => t.children,
  ),
  Echo.reactive().prop("color"),
)

Echo.render(
  Label({color: (t) => t.color})("hello world"),
  Echo.reactive().state("color", "red"),
);

[pearmini]

Methods

Echo.render(
  X.div()(
    X.button({$click: (t) => t.increment()})("👍"),
    X.button({$click: (t) => t.decrement()})("👎"),
    X.span()((t) => t.value),
  ),
  Echo.reactive().state("value", 0),
);

[pearmini]

Composition

const useMouse = Echo.reactive()
  .state("x", 0)
  .state("y", 0)
  .effect((t) => {
    const mousemove = (e) => ((t.x = e.clientX), (t.y = e.clientY));
    document.addEventListener("mousemove", mousemove);
    return () => document.removeEventListener("mousemove", mousemove);
  });

Echo.render(
  X.span()(
    "X: ",
    (t) => t.mouse.x,
    ", Y: ",
    (t) => t.mouse.y,
  ),
  Echo.reactive().trait("mouse", () => useMouse()),
);

[pearmini]

Slots

const Layout = Echo.component(
  X.div()(
    X.header()(Echo.Slot({name: "header"})),
    X.body()(Echo.Slot({name: "body"})),
    X.footer()(Echo.Slot({name: "footer"})),
  ),
  Echo.reactive().prop("header").prop("body").prop("footer"),
);

Echo.render(
  Layout({
    header: X.span()("Header"),
    body: X.span()("Body"),
    footer: X.span()("Footer"),
  }),
);