Echo JS 0.11.0

What’s the difference with preact, Inferno, SnabbDOM?

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

aren't you the same guy who made hyperapp? Why are you competing against your own library?

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.

@jbucaran - hello! :-)

Picodom, Ultradom, Superfine.. I'm getting dizzy trying to keep up with the name changes ;-) Have you settled on the name now?

thanks, foxdonut

Is there a way to patch a node without use render function ?
If the app is 20 nodes deep, the deeper node have to rerender the root node to update ?

repo: https://github.com/Kornflexx/superfine-test

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.