8.2.0

Improve the documentation, rewrite quickstart, examples, and other tweaks.

8.1.0

• Mirror Hyperapp VDOM shape (jorgebucaran/hyperapp@8e6a490).
• Set pkg.main to index.js and don't minify just for CDN usage.
• Fix bug in internal createNode function (#183).
  • Forgot to update replaced vnodes in the vdom while appending children.

8.0.0

Superfine 8 is smaller, faster, and more memory efficient than every Superfine that came before. This rewrite is heavily based on Hyperapp's latest VDOM modifications, but it doesn't come without a cost, so let's break it down. 🎱🛸

Text nodes

The most important thing to be aware of is that now we use a new text function to create text nodes.

import { h, text } from "superfine"

const hello = h("h1", {}, text("Hello"))

Nested arrays

Another important change is that h no longer flattens nested arrays. So if you were doing something like this:

import { h, text } from "superfine"

const fruitView = (list) => list.map((item) => h("li", {}, text(item)))

const favoriteFruitView = () =>
  h("section", {}, [
    h("h1", {}, "My Favorite Fruit"),
    fruitView(["apple", "grapes", "melon", "mango"]),
  ])

you should do instead:

import { h, text } from "superfine"

const fruitView = (list) => list.map((item) => h("li", {}, text(item)))

const favoriteFruitView = () =>
  h("section", {}, [
    h("h1", {}, "My Favorite Fruit"),
    ...fruitView(["apple", "grapes", "melon", "mango"]),
  ])

or just:

import { h, text } from "superfine"

const fruitView = (list) => list.map((item) => h("li", {}, text(item)))

const favoriteFruitView = () =>
  h("section", {}, [
    h("h1", {}, "My Favorite Fruit"),
    h("ul", {}, fruitView(["apple", "grapes", "melon", "mango"])),
  ])

JSX

These changes are not backward compatible with previous JSX support and Superfine is no longer compatible with JSX "out of the box". But you can still use JSX by wrapping h to handle variable arguments and nested arrays. Here's a way to do that:

import { h, text, patch } from "superfine"

const jsxify = (h) => (type, props, ...children) =>
  typeof type === "function"
    ? type(props, children)
    : h(
        type,
        props || {},
        []
          .concat(...children)
          .map((any) =>
            typeof any === "string" || typeof any === "number" ? text(any) : any
          )
      )

const jsx = jsxify(h) /** @jsx jsx */

7.0.0

• Simplify patch usage (read the quickstart for details).
  • New signature: patch(dom, vdom) (no need to keep track of the old DOM anymore).
  • Revert to replacing/recycling the DOM node with the rendered VDOM.
  • Remove recycle function as the behavior is now built-in.
• Remove lifecycle events (see #167 and jorgebucaran/hyperapp#717 for alternatives and discussion).
• Remove xlink:* support as SVG 2 now works in Safari (mostly).
• Remove built-in style attribute-as-object support; use a string instead. If what you have is an object, build the style string yourself:

  const styleToString = style =>
    Object.keys(style).reduce(
      (str, key) =>
        `${str}${key.replace(/[A-Z]/g, "-$&").toLowerCase()}:${style[key]};`,
      ""
    )

6.0.0

• Use faster reconciliation algorithm.
  • Rename render to patch.
  • Fix delayed element removals in onremove ocassionally failing.
  • Improve handling DOM attributes: draggable, spellcheck, and translate.
• Add new recycle export function, enabling you to patch over server-side rendered markup instead of rendering your view from scratch.
• Improve SVG and add xlink:* support.
• Bring back built-in pure JSX component support.

5.0.0

• Rename the project to Superfine.
• Rename the exported window global to window.superfine.
• Bring back the old render signature render(lastNode, nextNode, container).
  • We used to store the reference to the last node in the container's first element child. Now is up to you to do it. As a result 5.0.0 is thinner and less magical.

3.0.0

• Fix asynchronously removal of elements (#107).
• Replace patch with new render function and a simpler signature. Support for patching a specific element directly and SSR recycling has been removed. 100% client-side apps. The render function is essentially an overly simplified ReactDOM.render, without component lifecycle.
  • Remove built-in JSX functional component support.
• Fix unexpected reordering after keyed removal (#68).
• Don't double up event listeners when reusing elements.
• Bring back h.

2.0.0

• Rename h to createNode.
• Store the DOM element the first time you use patch, so you don't have to.
• Add server-side rendered (SSR) DOM recycling. The first time you patch a DOM element, we'll attempt to reuse the element and its children (instead of creating everything from scratch) enabling SEO optimization and improving your application time-to-interactive.

1.0.0

• Add type declarations for TypeScript.
• Add the ability to return a function (thunk) from onremove that receives a function remove you can use to remove the element inside a callback, e.g. after a fade-out animation.