Skip to content

Latest commit

 

History

History
103 lines (69 loc) · 3.98 KB

ECOSYSTEM.md

File metadata and controls

103 lines (69 loc) · 3.98 KB
Raw

The Incremental DOM Ecosystem

The page contains a list of tools and libraries that use or can be used with Incremental DOM. If you have something that you have worked on and would like to share, please feel free to send us a pull request to add it here.

Templating Languages

Closure Compiler Templates

We are building a new JavaScript backend for the Closure Templates templating language. Follow along on Github.

{template .helloWorld}
  <h1>Hello World!</h1>
{/template}

JSX

You can also use React's JSX syntax using this Babel plugin.

function render() {
  return <h1>Hello World</h1>
}

superviews.js

superviews.js is a template language that closely maps to the incremental-dom API. It includes conditionals, iteration, interpolation and supported output for both ES6 and CommonJS.

Try it out live in your browser

<p if="showMe" class="{cssClass}">
  <span style="{ color: foo, width: bar }">{name}</span>
</p>

starplate

starplate is a fast template and view engine built on top of the incremental-dom API. It makes use of ES6 template strings for interpolation, parse5 for DOM traversal, and incremental-dom for DOM patches.

Consider the following rudimentary example for rendering and updating a clock.

import {View} from 'starplate';
const clock = new View('<section>Time <span class="time">${time}</span></section>')
clock.render(document.body);
setInterval(_ => clock.update({time: Date()}, 1000);

khufu

khufu is a template engine with a concise indentation-based syntax, and integration with redux:

view main():
  <div.counter-body>
    store @counter = Counter
    <input disabled size="6" value=@counter>
    <input type="button" value="+">
       link {click} incr(1) -> @counter

Khufu is a little bit more than a template engine as it allows you to add create local redux stores. This allows tracking local state like whether an accordion is expanded or whether a tooltip is shown without additional javascript boilerplate. The library implements useful scoping rules for stores as well as for styles included into the template.

And khufu supports hot reload!

jsonml2idom

jsonml2idom - JSONML to Incremental DOM interpreter.

function app(state) {
  return ['h1', 'Hello World!']
}

IncrementalDOM.patch(root, jsonml2idom, app(state))

Create your own

If you work on a templating language we'd love to see Incremental DOM adopted as an alternative backend for it. This isn’t easy, we are still working on ours and will for a while, but we're super happy to help with it.

Here's an example.

Libraries

Skate

Skate is library that leverages Incremental DOM to encourage functional web components.

FerrugemJS

FerrugemJS is a library inspired by Aurelia and React using Incremental DOM with superviews.js as a template language.

Metal.js

Metal.js is a JavaScript library for building UI components in a solid, flexible way. It leverages Incremental DOM and currently supports both Closure Templates and JSX syntax.