odinho / diffhtml

diffHTML is a library that assists with creating user interfaces using JavaScript

diffHTML: A JavaScript View Layer

Stable version: 0.9.2

diffHTML is a library that assists with creating user interfaces using JavaScript. These interfaces can be: applications, games, data visualizations, or anything else that you may want to render in a web browser.

This repository is a mono-repo structured with the Lerna CLI tool. This makes it easier to support continuous integration, consistent versioning, and working on the various diffHTML tools.

Click here to go directly to the diffHTML library source

Features

• Parses real HTML and supports JSX & Tagged Templates.
• Efficient minimal rendering that utilizes object pooling.
• Web and React-compatible stateful components.
• View and debug your code using the Chrome DevTools extension.
• Transition hooks monitor DOM changes an are similar to mutation events.
• Powerful middleware extends diffHTML with additional features.

Packages

The following list of packages are nested in the /packages folder. They can be tested globally or independently by using npm test at the root directory level or any specific nested package level.

• diffhtml

  npm install diffhtml

  The core library for creating user interfaces. Contains a full build and smaller runtime build (which excludes HTML parser, tagged templates, and performance metrics).

• diffhtml-render-to-string

  npm install diffhtml-render-to-string

  Use with diffHTML to render your Virtual Trees to strings. This is useful for server-side rendering and testing.

• babel-plugin-transform-diffhtml

  npm install babel-plugin-transform-diffhtml

  Converts HTML found in tagged template strings to createTree calls and allows you to shave bytes off your builds by switching to the diffhtml-runtime.

• diffhtml-components

  npm install diffhtml-components

  Provides stateful React-like and Web Component classes with a consistent API. If you're looking for better React parity, refer to the diffhtml-react-compat package.

• diffhtml-middleware-logger

  npm install diffhtml-middleware-logger

  Logs out diffHTML state from the start and end of every render transaction.

• diffhtml-middleware-synthetic-events

  npm install diffhtml-middleware-synthetic-events

  Changes the event binding from inline event handlers like onclick = fn to use addEventListener. Hooks are attached to the body element and coordinates events using delegation.

• diffhtml-middleware-inline-transitions

  npm install diffhtml-middleware-inline-transitions

  By default diffHTML provides transition hooks at a global level. This middleware turns them into scoped, performant, event hooks.

• diffhtml-middleware-verify-state

  npm install diffhtml-middleware-verify-state

  Asserts that a render properly updated the old Virtual Tree and the DOM. Will recursively search for inconsistencies, displays warnings unless debugging is enabled, then it throws errors instead.

• diffhtml-prollyfill

  npm install diffhtml-prollyfill
  

  Use directly in place of diffhtml. The term prollyfill means I'd like to see it be a standard some day, but is currently not under any consideration. Click here for the "prollyfill" origin tweet.

• diffhtml-react-compat

  npm install diffhtml-react-compat
  

  This is a compatibility package meant to be a drop-in replacement for the modules: react and react-dom. It wraps the diffHTML Components package as the base for the component constructors. It then layers additional React-specific APIs.

• diffhtml-website

  The source for the www.diffhtml.org website, powered by: Node and NodeGit.