This release centers around the addition of the universal JSX transform and runtime generator to enable custom renderers. This opens up whole new worlds of possibility with the opportunity to support new platforms beyond the web.

New Features

Custom Renderers

This release adds support custom renderers through a new "universal" transform. Solid now provides a sub module solid-js/universal that exports a createRenderer method that allows you to create your own runtimes. This will enable things like native mobile and desktop, canvas and webgl, or even rendering to the terminal. This is still new so very much looking for feedback.

// example custom dom renderer
import { createRenderer } from "solid-js/universal";

const PROPERTIES = new Set(["className", "textContent"]);

export const {
  render,
  effect,
  memo,
  createComponent,
  createElement,
  createTextNode,
  insertNode,
  insert,
  spread,
  setProp,
  mergeProps
} = createRenderer({
  createElement(string) {
    return document.createElement(string);
  },
  createTextNode(value) {
    return document.createTextNode(value);
  },
  replaceText(textNode, value) {
    textNode.data = value;
  },
  setProperty(node, name, value) {
    if (name === "style") Object.assign(node.style, value);
    else if (name.startsWith("on")) node[name.toLowerCase()] = value;
    else if (PROPERTIES.has(name)) node[name] = value;
    else node.setAttribute(name, value);
  },
  insertNode(parent, node, anchor) {
    parent.insertBefore(node, anchor);
  },
  isTextNode(node) {
    return node.type === 3;
  },
  removeNode(parent, node) {
    parent.removeChild(node);
  },
  getParentNode(node) {
    return node.parentNode;
  },
  getFirstChild(node) {
    return node.firstChild;
  },
  getNextSibling(node) {
    return node.nextSibling;
  }
});

Working example here.

Spreads Added to Solid's html

It's been a long time coming but Solid's Tagged Template Literals now support element and component spreads using htm inspired syntax.

html`<div ...${props} />`

Fixes

Dynamic Spreads now work on Components

Previously spreads on components would only track property changes on bound objects and not when the whole object changed. This now works:

<MyComponent {...getStuff()} />

ClassList properly merges multiple classnames in the key

It is common in libraries like Tailwind to apply multiple classes at the same time. There was an issue where true and false resolutions were cancelling each other out. This would only set text-sm.

<div
  classList={{
    "px-2.5 py-1.5 text-xs": false,
    "px-3 py-2 text-sm": false,
    "px-4 py-2 text-sm": true,
    "px-4 py-2 text-base": false,
    "px-6 py-3 text-base": false
  }}
/>

Consistent handling of HTMLEntities

Things like   used to render differently depending if in elements or components(or fragments). This has been made consistent across all three.

Various improvements to Types and Transitions

A lot of bugs from the last minor release were around Transitions that have been addressed. And as always Types have been gradually improving.