wavesoft/dot-dom v0.3.1

on GitHub

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