Elm-like API sample

This page is a one approach of creating API layer top of ef.js.

Considerations

Bundle size or runtime performance

If you going to use this API style, you’ll face a trade-off between increased bundle size and function call overhead. By defining everything as separated functions, there is virtually zero runtime overhead but bundle size would definitely increases.

import { el } from "@pocka/ef";

export function div(setups = [], children = []) {
  return el("div", setups, children);
}

export const p = el.bind(null, "p");

// Enumerate every HTML/SVG/MathML tag...

On the other hand, using Proxy object like in this page, would bring performance penalty on every function call, although you can avoid this cost by declaring each tag as a function eagerly (see main.ts). You need to choose based on which approach is best suitable for your project.