[WIP!] A safe HTML embedded domain specific language for templating
JavaScript
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
macros
src
test
tools
.gitignore
.hgignore
.npmignore
.travis.yml
LICENCE
Makefile
README.md
jsdoc.conf.json
package.json

README.md

helm

Build Status NPM version Dependencies Status experimental

A safe HTML templating embedded domain specific language.

Example

var _    = require('helm').build
var text = require('helm').text
var attr = require('helm').makeAttr

function link(a){
  return _('a', [attr('class', ['link']), attr('href', a.url)], [text(a.text)])
}

var items = [
  { url: '/example/a', text: 'Something' }
, { url: '/example/b', text: 'More stuff' }
]

var page = _('html', [], [
            , _('head', [], [
               , _('title', [], [text('Helm')])
               , _('meta', [attr('charset', 'utf-8')])])
            , _('body'
               , _('div', [ attr('id', 'content')
                          , attr('class', ['item-list', 'simple-list'])]
                  , items.map(link)))])

Or with the Sweet.js macros:

var _    = require('helm').build
var text = require('helm').text
var seq  = require('helm').htmlSeq

function link(a){
  return $helm `<a class=(["link"]) href=(a.url)>(text(a.text))</a>`
}

var items = [
  { url: '/example/a', text: 'Something' }
, { url: '/example/b', text: 'More stuff' }
]

var page = $helm `
  <html>
    <head>
      <title>Helm</title>
      <meta charset="utf-8" />
    </head>
    <body>
      <div id="content" class=(["item-list", "simple-list"])>
        (seq(items.map(link)))
      </div>
    </body>
  </html>
`

All resulting in this HTML structure:

<html>
  <head>
    <title>Helm</title>
    <meta charset="utf-8">
  </head>
  <body>
    <div id="content" class="item-list simple-list">
      <a class="link" href="/example/a">Something</a>
      <a class="link" href="/example/b">More stuff</a>
    </div>
  </body>
</html>

Installing

The easiest way is to grab it from NPM. If you're running in a Browser environment, you can use Browserify

$ npm install helm

Using with CommonJS

If you're not using NPM, Download the latest release, and require the helm.umd.js file:

var Helm = require('helm')

Using with AMD

Download the latest release, and require the helm.umd.js file:

require(['helm'], function(Helm) {
  ( ... )
})

Using without modules

Download the latest release, and load the helm.umd.js file. The properties are exposed in the global Helm object:

<script src="/path/to/helm.umd.js"></script>

Compiling from source

If you want to compile this library from the source, you'll need Git, Make, Node.js, and run the following commands:

$ git clone git://github.com/robotlolita/helm.git
$ cd helm
$ npm install
$ make bundle

This will generate the dist/helm.umd.js file, which you can load in any JavaScript environment.

Documentation

You can read the documentation online or build it yourself:

$ git clone git://github.com/robotlolita/helm.git
$ cd helm
$ npm install
$ make documentation

Then open the file docs/index.html in your browser.

Platform support

This library assumes an ES5 environment, but can be easily supported in ES3 platforms by the use of shims. Just include es5-shim :)

Acknowledgements

Licence

Copyright (c) 2014 Quildreen Motta.

Released under the MIT licence.