Echo JS 0.11.0

<~>

kirilloid 87 days ago. link 2 points
What’s the difference with preact, Inferno, SnabbDOM?
jbucaran 87 days ago. link 1 point
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
  )
njiv 85 days ago. link 1 point
anything with just reconciliation, i.e. just JSX and render function, without methods and state? minimal but fast
Hartbeatnt 87 days ago. link 2 points
aren't you the same guy who made hyperapp? Why are you competing against your own library?
jbucaran 87 days ago. link 2 points
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.
foxdonut 68 days ago. link 1 point
@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
jbucaran 84 days ago. link 1 point
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.