0.12.0: Polymorphic binding, SVG/AutoML support, readonly properties, performance optimizations, etc.

[Tao-VanJS]

Hi fellow VanJSers,

I'm happy to announce the release of VanJS 0.12.0. 🎉🎉🎉

0.12.0 is a major release, with the implementation of several long-waited features as well as some performance optimizations.

1. Polymorphic binding

If you use VanJS to build reusable components, it's desirable for the users to specify both state and non-state property values while building the components. For instance, for a reusable Button component like that:

const Button = ({color, ...}) = button(
  ...
)

it would be desirable for Button to accept both static color value and color state. If the property value is being used as the property value of a DOM element, or as a child node, things can work out of the box. However, prior to this release, State-derived properties and van.bind only support state objects as dependencies, which means if the color property is used like that:

button({
  style: {deps: [color], f: color => `background-color: ${color};`},
  ...
}, ...)

you can only pass-in state objects for color property, as non-state objects won't work for State-derived properties. This release solves the issue by allowing both state and non-state property values being used as dependencies for State-derived properties and van.bind. With this feature, you can build both static and dynamic Button components:

const Button = ({color, text, onclick}) => button({
  style: {deps: [color], f: color => `background-color: ${color};`},
  onclick,
}, text)

const App = () => {
  const colorState = van.state("green")
  const textState = van.state("Turn Red")

  const turnRed = () => {
    colorState.val = "red"
    textState.val = "Turn Green"
    onclickState.val = turnGreen
  }
  const turnGreen = () => {
    colorState.val = "green"
    textState.val = "Turn Red"
    onclickState.val = turnRed
  }
  const onclickState = van.state(turnRed)

  return span(
    Button({color: "yellow", text: "Click Me", onclick: () => alert("Clicked")}), " ",
    Button({color: colorState, text: textState, onclick: onclickState}),
  )
}

Try on jsfiddle

2. SVG/MathML support

In this release, we introduce a new function van.tagsNS to support the creation of SVG, MathML or other HTML elements with namespaceURI. For instance, you can build a smiley face with SVG elements now:

const {circle, path, svg} = van.tagsNS("http://www.w3.org/2000/svg")

const Smiley = () => svg({width: "16px", viewBox: "0 0 50 50"},
  circle({cx: "25", cy: "25", "r": "20", stroke: "black", "stroke-width": "2", fill: "yellow"}),
  circle({cx: "16", cy: "20", "r": "2", stroke: "black", "stroke-width": "2", fill: "black"}),
  circle({cx: "34", cy: "20", "r": "2", stroke: "black", "stroke-width": "2", fill: "black"}),
  path({"d": "M 15 30 Q 25 40, 35 30", stroke: "black", "stroke-width": "2", fill: "transparent"}),
)

Try on jsfiddle

and also math formulas with MathML elements:

const {math, mi, mn, mo, mrow, msup} = van.tagsNS("http://www.w3.org/1998/Math/MathML")

const Euler = () => math(
  msup(mi("e"), mrow(mi("i"), mi("π"))), mo("+"), mn("1"), mo("="), mn("0"),
)

Try on jsfiddle

Great thanks to @andrewgryan for providing the intial draft implementation of this feature.

3. Support readonly properties while creating HTML elements

Prior to this release, readonly properties of HTML elements (e.g.: the list property of an <input> element) can't be set properly. This release solves the problem. Thus the code below will work now:

const Datalist = () => div(
  label({for: "ice-cream-choice"}, "Choose a flavor: "),
  input({
    list: "ice-cream-flavors",
    id: "ice-cream-choice",
    name: "ice-cream-choice",
  }),
  datalist(
    {id: "ice-cream-flavors"},
    option({value: "Chocolate"}),
    option({value: "Coconut"}),
    option({value: "Mint"}),
    option({value: "Strawberry"}),
    option({value: "Vanilla"}),
  )
)

Try on jsfiddle

4. Performance optimizations

In this release, we replace forEach call with for (... of ...) loops for better performance. Meanwhile, we disable the terser optimization for wrap_func_args as the optimization is obsolete in newer browser versions.

With all the added features and performance optimizations, the minimized bundle size increases slightly to 1.3kB (1365 bytes), while still holding the title of the smallest reactive UI framework in the world.

❤️ Hope you can enjoy!

[Tao-VanJS]

0.12.1 was just released.

0.12.1 is a minor release of VanJS.

In this release, we support null and undefined as the child node of tag functions and van.add. null or undefined valued children will be simply ignored in tag functions and van.tag. This feature is added as a result of feedback from multiple VanJS users as they mentioned the feature can make the user-side code easier in certain circumstances. This feature also makes VanJS's behavior consistent between static child node and child node with state bindings (where null or undefined means the removal of the node).

[Tao-VanJS]

0.12.2 was just released.

0.12.2 is a minor release of VanJS, here are the changes:

• Allowing null-valued state objects being used as the child node of tag functions and van.add. This is a bug fix of the 0.12.1 release.
• Bundle size reduction: specifically optimizing the bundle size for features added in 0.12.0 and 0.12.1 releases. With the optimization implemented, we saved 38 bytes in the minimized bundle. The total size of minimized bundle is at 1333 bytes (1.3 kB).

[Tao-VanJS]

0.12.3 was just released.

0.12.3 is a minor release of VanJS. In this release, we disallow null as prop values in tag functions in van.d.ts.

As of 0.12.3, null is not supported as prop values in tag functions. Thus this release updates van.d.ts file to keep it consistent.

Supporting null as prop values in tag functions is a planned feature in 1.0.0 release. Thus the restriction will be removed in 1.0.0 release.

[Tao-VanJS]

0.12.4 was just released.

0.12.4 is a minor release. In this release, we fixed a typo in the comments of van.d.ts. There was no change in the actual implementation.