Awesome Open Source
Awesome Open Source

<±/> diffHTML

Build Status Coverage Status

Latest version: 1.0.0-beta.28

diffHTML is an extremely lightweight and optimized HTML parser and Virtual DOM specifically designed for modern web UIs. These interfaces can be applications, games, data visualizations, or anything that you may want to render in a web browser or Node.

The core package works like a library, where you can import just one function and have a fully reactive VDOM rendering engine. When you opt into more functions and use the companion packages you get a framework for structuring your ideas.

Features

  • Parses real HTML and supports JSX & Tagged Templates.
  • Memory efficient VDOM rendering that utilizes object pooling.
  • Transitions for animations and hooking into DOM changes.
  • Powerful middleware extends diffHTML with additional features.
  • React-like Components which can be rendered as Web Components.
  • A lite build which has a smaller size, meant for optimizing production code.

Works great with legacy and modern browsers, Node.js, Deno, and with whatever your favorite JavaScript runtime is.

Packages

The following list of modules are nested in the /packages folder. They form the foundation of the diffHTML ecosystem.

  • diffhtml

    npm install diffhtml
    

    The core public API for creating user interfaces. Contains a standard build which includes everything, and a smaller optimized build that excludes the HTML parser and performance metrics, which is useful for those who want to minimize the filesize.

  • diffhtml-components

    npm install diffhtml-components
    

    Provides constructors and middleware for rendering stateful/stateless components seamlessly. The API will be very familiar to anyone who has used React as the class methods and structure are the same.

  • babel-plugin-transform-diffhtml

    npm install babel-plugin-transform-diffhtml
    

    Transforms your input into function calls. This eliminates the need for runtime parsing. This is similar to how React compiles down JSX.

  • diffhtml-middleware-inline-transitions

    npm install diffhtml-middleware-inline-transitions
    

    By default diffHTML invokes transition hooks globally to all elements. This middleware turns them into scoped, performant, event hooks that are bound inline on the markup tags.

  • diffhtml-middleware-linter

    npm install diffhtml-middleware-linter
    

    This module will run various linting rules on your input to ensure you are writing valid/well-formed HTML. This was inspired by and uses rules from the HTMLHint project.

  • 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. Events are attached to the body element and coordinated to children through delegation.

  • diffhtml-middleware-service-worker

    npm install diffhtml-middleware-service-worker
    

    Helps with the creation of a service worker for PWAs, available as a convenience to make development more friendlier.

  • diffhtml-website

    The source for the www.diffhtml.org website.

Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,074,125
Html (246,537
Reactjs (164,470
Dom (10,531
Devtools (6,259
Webcomponents (3,722
Web Framework (2,248
Virtual Dom (984
Compat (609
Html Parser (451
Diffhtml (7
Dom Components (6