v0.3.0

This is the first public release with most of the ideal features included. This API version is fully compatible with the 0.2.2 version of the library.

Features included:

• React's createElement (as H) and ReactDOM render (as R):

  R(H('div', 'Hello world'), document.body);

• Tag shorthands via H deconstructuring:

  const { div, span, button } = H;

• Class shorthands when using the tags:

  R(div.someClass.anotherClass("Hello world"), document.body);

• Stateless components

  const Greeter = (props) => 
     H('div', `Hello ${props.name}`)
  
  R(H(Greeter, {name: "John"}), document.body);

• Stateful components

  const Clicker = (props, state, setState) => 
     H('button', {
        onClick() {
           setState({ clicks: (state.clicks || 0) + 1);
        }
     }, `I am clicked ${state.clicks || 0} times`)
  
  R(H(Clicker), document.body);

• NEW! Component lifecycle methods

  const LifecycleAware = (props, state, setState, hooks) => {
     hooks.m.push(() => { setState({ mounted: "yes" }); });
     return H('div', `mounted=${state.mounted || "no"}`);
  }
  
  R(H(LifecycleAware), document.body);

• NEW! Higher-order components

  const Greeter = (props) => 
     H('div', `Hello ${props.name}`)
  
  const NameBob = (wrappedComponent) => (props) =>
     H(wrappedComponent, {name: "bob"})
  
  R(H(NameBob(Greeter)), document.body);

• NEW! Raw DOM Nodes as Virtual Nodes

  const ComplexThing = () => {
     const container = document.createElement('div');
     FancyEditor.initialize(container);
     return container;
  }
  
  R(H(ComplexThing), document.body);

Changelog

• ADDED: Lifecycle methods (mount, unmount and update) via the hooks fourth argument on the components.
• ADDED: DOM elements can now be used as virtual nodes.
• ADDED: 24 more unit tests to ensure code better code quality.
• FIXED: Collapsing nested components. This enables high-order component to be constructed.
• CHANGED: Using gulp-uglify-es (with terser) instead of the harmony branch of uglify-2.0 for the build script. This reduces the compressed archive even more, giving more room for features.

For keeping the 512 byte thresshold

• CHANGED: Using property $ as the key differentiator of virtual DOM nodes. It is now prohibited to use this key as property name.