htmling 167

Polymer / HTML5 templating syntax for node.js

codemix/htmling

Written in JavaScript by 3 contributors

Contribute

Need Support?


we offer maintenance, support and development services for all our open source projects.

Contact Us

HTMLing

Build Status

Polymer compatible HTML5 based templating syntax for node.js. Render your templates server-side using the same syntax as in the browser, with no virtual DOM trickery required.

For a full demonstration, please see htmling-demo-app.

Installation

via npm

npm install htmling

Example

Turns this:

<!doctype html>
<html>
  <head>
    <title>{{title}}</title>
    <meta name="description" content="{{description}}">
  </head>
  <body>
    <h1>{{title}}</h1>
    <ul>
    <template repeat="{{user in users}}">
      <li>{{user.name}}</li>
    </template>
    </ul>
  </body>
</html>

plus this:

{
  "title": "User List",
  "description": "A list of users",
  "users": [
    {
      "name": "Alice"
    },
    {
      "name": "George"
    }
  ]
}

into this:

<!doctype html>
<html>
  <head>
    <title>User List</title>
    <meta name="description" content="A list of users">
  </head>
  <body>
    <h1>User List</h1>
    <ul>
      <li>Alice</li>
      <li>George</li>
    </ul>
  </body>
</html>

How it works

Unlike similar libraries, HTMLing does not require a virtual DOM such as jsDOM. Instead, HTMLing parses .html files and transforms them into very efficient executable JavaScript functions. It uses a parser written in PEG.js which emits a standard Mozilla Parser API AST with some custom node types. The compiler then uses estraverse to convert these custom node types to standard JavaScript expressions. Finally, the result is passed to escodegen which converts the AST into executable JavaScript.

This compilation process happens only once, and the resulting JavaScript is extremely efficient.

Usage

HTMLing is easy to integrate with your existing build process, either via the command line or library interfaces.

CLI

HTMLing ships with a small command line interface:

Compile an individual file

The compiled output will be written to STDOUT

htmling ./file.html

Compile an individual file to a destination

The compiled output will be written to compiled.js.

htmling -o ./compiled.js ./file.html

Compile a directory hierarchy

Compile a nested directory structure to a directory called compiled. The output directory will be created if it does not already exist, and the resulting folder structure will match that of the input.

htmling -o ./compiled ./pages

Compile a directory hierarchy to a single file

Compile a nested directory structure to a single called compiled.js

htmling -c -o ./compiled.js ./pages

As a Library

It's also possible to use HTMLing as a library:

Compile a string

var HTMLing = require('htmling');

var template = HTMLing.string('Hello {{name}}');

console.log(template.render({name: 'Charles'})); // "Hello Charles"

Compile a file

var template = HTMLing.file('./index.html');
console.log(template.render());

Compile a directory

var templates = HTMLing.dir('./pages');
console.log(templates.render('index.html', {}))

Using as an express view engine

HTMLing has support for express.js.

var HTMLing = require('htmling');
app.configure(function(){
  app.engine('html', HTMLing.express(__dirname + '/views/'));
  app.set('view engine', 'html');
});

In development mode, you'll probably want to enable the watch option. This will reload your templates when they change on disk:

var HTMLing = require('htmling');
app.configure(function(){
  app.engine('html', HTMLing.express(__dirname + '/views/', {watch: true}));
  app.set('view engine', 'html');
});

License

MIT, see LICENSE.md.





44 other JavaScript projects


fast.jsJavaScript 2930

Faster user-land reimplementations for several common builtin native JavaScript functions.

babel-plugin-typecheckJavaScript 823

Static and runtime type checking for JavaScript in the form of a Babel plugin.

babel-plugin-closure-eliminationJavaScript 223

A Babel plugin which eliminates closures from your JavaScript wherever possible.

orientoJavaScript 212

Former official node.js driver for OrientDB. Fast, lightweight, uses the binary protocol. Now deprecated.

babel-plugin-macrosJavaScript 184

Hygienic, non-syntactic macros for JavaScript via a Babel plugin.

babel-plugin-contractsJavaScript 128

Design by Contract for JavaScript via a Babel plugin.

YiiBlocksJavaScript 70

A set of building blocks that provide common functions for Yii web applications

contractualJavaScript 52

Unobtrusive, backwards compatible, syntactic sugar for Design by contract in JavaScript.

gitignore-parserJavaScript 34

A simple .gitignore parser for node.js

modelingJavaScript 14

Fast and flexible data models for node.js and the browser.

binary-protocolJavaScript 13

Easy, fast, writers and readers for implementing custom binary protocols in node.js.

YiiJSJavaScript 11

A port of the Yii PHP framework to JavaScript

url-routeJavaScript 10

Web component providing URL routing

validatingJavaScript 10

Quick and easy validators for node.js and the browser.

babel-plugin-traceJavaScript 6

This is a Babel plugin which adds a straightforward, declarative syntax for adding debug logging to JavaScript applications.

mallocJavaScript 6

Simple malloc() & free() implementation for node.js, built on top of array buffers.

geonames-importerJavaScript 6

Imports geonames data into elasticsearch

dispatchingJavaScript 5

Tiny routing / dispatch library for node and the browser.

atomicbuffersJavaScript 5

Atomic `readInt32()`, `writeInt32()`, `readUInt32()` and `writeUInt32()` for node.js buffers.

castingJavaScript 5

Tiny type casting library for node.js and the browser.

classingJavaScript 5

Fluent classes for node.js and the browser.

mimingJavaScript 3

Processing and formatting for various mime types.

bootstrap-tooltipJavaScript 1

Twitter Bootstrap Tooltip plugin packaged for component.js instead of bower

oriento-query-builderJavaScript 1

A standalone query builder for OrientDB, designed for node.js/io.js and the browser.

bootstrap-transitionJavaScript 1

Twitter Bootstrap Transition plugin packaged for component.js instead of bower

obligationsJavaScript 1

Tiny JavaScript library for preconditions and postconditions, intended for use with Contractual.

bootstrap-buttonJavaScript

Twitter Bootstrap Button plugin packaged for component.js instead of bower

bootstrap-popoverJavaScript

Twitter Bootstrap Popover plugin packaged for component.js instead of bower

bootstrap-scrollspyJavaScript

Twitter Bootstrap Scrollspy plugin packaged for component.js instead of bower

bootstrap-tabJavaScript

Twitter Bootstrap Tab plugin packaged for component.js instead of bower

bootstrap-dropdownJavaScript

Twitter Bootstrap Dropdown plugin packaged for component.js instead of bower

bootstrap-carouselJavaScript

Twitter Bootstrap Carousel plugin packaged for component.js instead of bower

webrtc-playgroundJavaScript

WebRTC sample code. For testing purposes only.

flex-basicJavaScript

A basic Flex App setup for video broadcasting

cover.jsJavaScript

JQuery plugin for covering/uncovering DOM elements

bootstrap-modalJavaScript

Twitter Bootstrap Modal plugin packaged for component.js instead of bower

bootstrap-alertJavaScript

Twitter Bootstrap Alert plugin packaged for component.js instead of bower

bootstrap-affixJavaScript

Twitter Bootstrap Affix plugin packaged for component.js instead of bower

ProductManagerJavaScript

A Sample CRUD application structured by Backbone js and backed by a node restfull api.

bootstrap-collapseJavaScript

Twitter Bootstrap Collapse plugin packaged for component.js instead of bower

bootstrap-componentJavaScript

Twitter Bootstrap packaged for component.js instead of bower

bootstrap-typeaheadJavaScript

Twitter Bootstrap Typeahead plugin packaged for component.js instead of bower

elevatorJavaScript

http://samsonradu.github.io/elevator/

tabinetJavaScript

A popular romanian card game