Starplate

Starplate is a lightning fast template and view engine built on top of incremental-dom and Babel. Think ES6 Templates + Incremental DOM working together. DOM travseral is made possible with parse5.

Status

This is still new and lacks heavy testing. As this project matures its documentation and test will as well.

Installation

Install starplate with NPM:

$ npm install starplate --save

Usage

Starplate is written in ES6 and intended for use in browser environments. If you intend to use it with build systems like duo then consider using a plugin like duo-babel. You can grab the latest standalone build from the dist/ directory.

Examples

Template

The most basic example is the usage of the Template class. A Template instance represents a partial that may interpolate with data.

import { Template } from 'starplate'
const template = new Template('Hello ${name}')
const output = template.render({name: 'kinkajou'})
console.log(output) // Hello kinkajou

View

Consider the following subclass of the View. We define a clock that has an update() method that renders a new time. We call the .update() method every second.

import { Template, View } from 'starplate'

function getTime (date = new Date()) {
  const h = date.getHours(), m = date.getMinutes(), s = date.getSeconds()
  return `${h}:${m}:${s}`
}

class Clock extends View {
  constructor () {
    super(new Template(
      '<section>Time <span class="time">#{time}</span></section>'
    ), {time: getTime()})
  }

  update (date = new Date()) {
    return super.update({time: getTime(date)})
  }
}

const clock = new Clock()
clock.render(document.body)
setInterval(_ => clock.update(), 1000)

License

MIT

littlstar/starplate