diffHTML

v1.0.0-beta.20

An easy-to-use Virtual DOM built for the web!


Components

Components are useful when you have parts of your interface that you wish to reuse or structure. There many popular component frameworks, with React being one of the most popular ones. diffHTML provides component features that mimic what you'd find in React, but in many different ways that are very flexible.


Overview

In order to use components, you must install/fetch the components package. This contains middleware which will render functions, stateless classes, and stateful classes. Unlike middleware, this package will automatically hook its middleware into the running diffHTML build.

Using components in diffHTML always requires installing or including the base package:

npm install --save diffhtml-components

If you need to import React components, install the compat package:

npm install --save diffhtml-react-compat

This will allow you to point react and react-dom in your project to this package and get the same functionality with diffHTML.

There are two primary packages for components: diffhtml-components and diffhtml-react-compat .Unlike other frameworks diffHTML is extremely flexible with what you can return, and allows for seamless JSX integration, top-level fragments, and supports stateless classes that do not need to extend from a base class.

Function component

import { html, innerHTML } from 'diffhtml';

function MyComponent(props) {
  return html`
    <div>Some prop = ${props.someProp}</div>
  `;
}

innerHTML(document.body, html`<${MyComponent} someProp="value" />`);

Class component

import { html, innerHTML } from 'diffhtml';

class MyComponent {
  render(props) {
    return html`
      <div>Some prop = ${props.someProp}</div>
    `;
  }
}

innerHTML(document.body, html`<${MyComponent} someProp="value" />`);


Lifecycle hooks

The following hooks will be called during the respective mounting and unmounting flow. You do not need to extend from Component to use these hooks. Simple classes can just define them as methods and they will be called.

Hooks

componentWillMount

import { html, innerHTML } from 'diffhtml';
import { Component } from 'diffhtml-components';

class WillMountComponent extends Component {
  render() {
    return html`
      <div><h1>Hello world</h1></div>
    `;
  }

  componentWillMount() {
    console.log('Component has mounted');
  }
}

innerHTML(document.body, html`<${WillMountComponent} />`);

componentDidUpdate

componentWillReceiveProps

shouldComponentUpdate

componentWillUnmount


Component

The stateful class component, which is used by importing the Component class.

import { Component } from 'diffhtml-components';

Once you have this base class, you can extend your ES6 class to get access to sub-tree rendering. A component render result is treated as a fragment, and are compared with previous results. All top-level elements are tracked and efficient diffing is applied against the previously rendered contents.

import { innerHTML, html } from 'diffhtml-components';
import { Component } from 'diffhtml-components';

class ListComponent extends Component {
  render({ items }) {
    return html`
      ${items.map(item => html`
        <li>${item}</li>
      `)}
    `;
  }
}

innerHTML(document.body, html`
  <ul>
    <${ListComponent} items=${['List item 1', 'List item 2']} />
  </ul>
`);

Props

These are incoming values that map to the props you set using the element attributes. Like in React, there will be a children prop automatically added which maps to the passed in child elements. You can access props on this.props or in the render(props) {} method.

PropTypes

State

forceUpdate

setState


Web Component

The WebComponent implementation is nearly identical to the standard Component , except this points to an HTML element, children are rendered into the Shadow DOM, and when props and attributes are set on an element that match propTypes cause an automatic re-render.

import { WebComponent } from 'diffhtml-components';


JSX

JSX is supported out-of-the-box.


React Compat

This experimental module aims to replicate the public API surface-area of React that is sufficient to execute and render components from that ecosystem. The reason this is important, is that diffHTML should be able to adopt and help contribute back to the community that it borrows so much from. It also helps keep down the level of fragmentation required and initial investment if someone wants to try out diffHTML in an existing React project.

You can install it by running:

npm install diffhtml-react-compat
Edit on GitHub