https://github.com/littlstar/starplate

Lightning fast template and view engine built on top of Incremental DOM and Babel (ES6 Templates + Incremental DOM working together)
https://github.com/littlstar/starplate

Last synced: about 2 months ago
JSON representation

Lightning fast template and view engine built on top of Incremental DOM and Babel (ES6 Templates + Incremental DOM working together)

• Host: GitHub
• URL: https://github.com/littlstar/starplate
• Owner: littlstar
• License: mit
• Created: 2015-10-12T22:39:50.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2016-02-02T15:50:20.000Z (over 8 years ago)
• Last Synced: 2024-07-18T05:36:44.999Z (2 months ago)
• Language: JavaScript
• Homepage:
• Size: 693 KB
• Stars: 68
• Watchers: 16
• Forks: 6
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Starplate

Starplate is a lightning fast template and view engine built on top of

[incremental-dom](https://github.com/google/incremental-dom) and Babel.

Think ES6 Templates + Incremental DOM working

together. DOM travseral is made possible with

[parse5](https://github.com/inikulin/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:

```sh

$ 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](https://github.com/duojs/duo) then consider using a plugin

like [duo-babel](https://github.com/babel/duo-babel). You can grab the

latest standalone build from the [dist/](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.

```js

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.

```js

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(

      'Time #{time}'

    ), {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