Echo JS 0.11.0

If I understand the question correctly, you want to be able to patch a node without using the provided render/patch function, probably using something like `this.setState` inside a component like React.


No, this is not possible. The best way to use superfine is with a single view function that takes the state and returns your application DOM tree.

Of course, you can break up your app into smaller views and even memoize those based in a fragment of the state, but that's outside the scope of what Superfine provides out of the box.

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
  )

Superfine is only a view layer. There's no notion of state management. Therefore it's considerably smaller (and simpler) than Hyperapp. Large parts of it are derived and adapted from Hyperapp's internal VDOM diff algorithm.