Superfine Files

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.

:::js
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:

:::js
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:

:::js
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:

:::js
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:

:::js
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 */