Release 0.3.1

[wavesoft]

This PR is WIP for merging the 0.3.1 development branch.

🗑 Removed features

In order to maintain the 512 byte constraint, some features had to be sacrificed. So we picked the ones with the smallest impact.

• DOM elements as VDOM elements: You can no longer return an HTML element in the place of a VDOM element.

  Instead, you can inject it in a container with a mount hook:

  function MyComponent(_, _, _, hooks) {
      hooks.m.push(container => container.appendChild( dom ));
      return H("div");
  }

✨ New Features

• Accepting null as properties, to make the library JSX-friendly

  H("div", null, ...children);

• Adding support for keyed updates, implicitly, by maintaining a state copy in the VDOM element

  function Component(state) {
  if (!state.elm) state.elm = H("div", "Keyed");
  return H("div", state.elm);
  }

• Adding support for raw elements (eg. pure HTML elements), for which no deeper reconciliation will occur.

  function RawElement(state, _, _, hooks) {
    hooks.r = 1; // Enable raw mode
    return H("div", {
       innerHTML: "<p>Raw HTML</p>"
    });
  }

🔌 Plug-ins

Starting from this version, I have started to introduce plug-ins. That being snippets that can be included aside of the main library that enhance the base functionality, or provide some sort of compatibility layer with other libraries.

Keyed Plugin

The keyed plugin, enables keyed updates in a similar manner to React, or other VDom libraries. This means updating only objects whose key matches the key property.

To use this plug-in, just source the dist/plugin-keyed.min.js and install it where you need it like so:

function Container(props, state) {
  const {components} = props;
  // The function `K` accepts the component state and an array of components that
  // contain the `key` property, and returns the same array of components, with their
  // state correctly manipulated.
  return H("div", K(state, components));
}

Note that if you are only interested into maintaining the state when re-ordering stateful components you don't need this plugin.