Echo JS 0.11.0

preact (4kB) is a pre-fiber React clone covering most of the API. Inferno (8kB) is more advanced than preact. Both have an opinion about state management, e.g., `setState` and heavily promote local component state.

Superfine (1.1kB) and SnabbDOM (2.3kB) are similar in concept, purely functional, but the way you create elements with Superfine is closer to React and JSX is supported out of the box.

This is an example in SnabbDOM:

  import h from "snabbdom/h"
  import snabbdom from "snabbdom"
  import snabbClass from "snabbdom/modules/class"
  import snabbProps from "snabbdom/modules/props"
  import snabbEvents from "snabbdom/modules/eventlisteners"

  const patch = snabbdom.init([snabbClass, snabbProps, snabbEvents])
  const container = document.getElementById("container")

  // First patch...
  let node = patch(
    container,
    h(
      "div#container.two.classes",
      {
        on: {
          click: someFn
        }
      },
      [h("a", { props: { href: "/foo" } }, "I'll take you places!")]
    )
  )

  // Second patch...
  node = patch(
    node,
    h("div#container.two.classes", { on: { click: anotherEventHandler } }, [
      h("a", { props: { href: "/bar" } }, "I'll take you places!")
    ])
  )


And the same in Superfine.


  import { h, render } from "superfine"

  const container = document.getElementById("container")

  // First patch...
  let node = render(
    null,
    h("div", { id: "container", class: "two classes", onclick: someFn }, [
      h("a", { href: "/foo" }, "I'll take you places!")
    ]),
    container
  )

  // Second patch...
  node = render(
    node,
    h(
      "div",
      { id: "container", class: "two classes", onclick: anotherEventHandler },
      [h("a", { href: "/bar" }, "I'll take you places!")]
    ),
    container
  )

anything with just reconciliation, i.e. just JSX and render function, without methods and state? minimal but fast