v0.3.1

The major highlights of this release is the support of keyed updates, JSX and raw elements. To compensate, the support of returning raw HTML elements in place of VDom elements has been deprecated.

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);

• 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);

• 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! VNode state now carried in the VDom instance

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

• NEW! Unreconcilable node support (raw nodes)

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

• NEW! Keyed updates (via the keyed plugin)

  function MyComponent(props, state) {
    const { values } = props;
    const components = values.map(value => {
      H(ValueRenderer, {
        key: value,
        value: value
      });
    })
  
    // Synchronize state of components, based on their key
    return H('div', K(state, components))
  }

Changelog

• ADDED: Adding support for brotli compression in the build scripts.
• ADDED: Mirroring component state both in the DOM element and the VDOM structure.
• ADDED: Adding support for plugins in the build scripts.
• ADDED: Adding keyed plugin, that can be used to enable keyed updates.
• CHANGED: Signature of H() in order to accept null as properties.

For keeping the 512 byte thresshold

• CHANGED:
• REMOVED: Support for returning plain HTMLElement in place of a VDom element. Instead, you can use the lifecycle methods:

  const ComplexThing = (props, state, setState, hooks) => {
     // Called when the component is mounted, passing the DOM element as argument
     hooks.m.push(containerElement => {
        FancyEditor.initialize(containerElement);
     });
     // Called when the component is unmounted
     hooks.u.push(containerElement => {
        FancyEditor.deinitilize(containerElement);
     });
     return H('div');
  }
  
  R(H(ComplexThing), document.body);

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.

v0.2.2

In this release most of the major issues have been addressed and the core API is stabilised.

Changelog

• ADDED: Not updating DOM properties if they are already the same. This fixes an issue with the <input /> elements not being updated properly.

• ADDED: NPM-glue script for properly importing dot-dom from npm.

• ADDED: Correctly passing-through the createElement function properties and methods through the Proxy. This fixes an issue with H.apply.

• ADDED: Support for shallow arrays as H children. For example:

  H('div', 'foo', ['bar', 'baz'])
  // .. is the same as ...
  H('div', 'foo', 'bar', 'baz')

For keeping the 512 byte thresshold

• REMOVED: Not excluding .C from being applied as property to the DOM element. This saves a few bytes and having this extra property in the DOM element instance is not really affecting any visual behaviour.

v0.2.1

Starting from this release, the pre-defined set of HTML tags is now removed. You will now have to manually specify the tags you are going to use, by extracting them from H. For example:

// v0.1.0
R(div('Hello world'), document.body);

// v0.2.1
const {div} = H;
R(div('Hello world'), document.body);

Changelog

• ADDED: Introduced child reconciliation algorithm
• ADDED: Custom tag expansion shorthands
• REMOVED: Pre-defined HTML Tag shorthands.

v0.1.0

First alpha release