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
- 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.
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.
-
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).
-
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. -
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.
-
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 useaddEventListener
. Hooks are attached to thebody
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.
-
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. -
npm install diffhtml-react-compat
This is a compatibility package meant to be a drop-in replacement for the modules:
react
andreact-dom
. It wraps the diffHTML Components package as the base for the component constructors. It then layers additional React-specific APIs. -
The source for the www.diffhtml.org website, powered by: Node and NodeGit.