Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Tiny but featured hypertext markup code generator for node and browsers
LiveScript CoffeeScript
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
src
test
.gitignore
.npmignore
.travis.yml
Gruntfile.coffee
LICENSE
README.md
bower.json
htgen.js
htgen.min.js
package.json

README.md

htgen

Build Status Dependency Status

About

htgen is a tiny but featured hypertext markup code generator for JavaScript environments. It was designed to be extremly easy to use and easy to embed in templating engines

Features

  • Tiny: 400 SLOC, 1KB gzipped
  • Simple and elegant API with method chaining and DSL
  • Minified or pretty well indented code generation
  • Runs over node and the browser
  • No third party dependencies
  • No DOM required
  • Well tested

Installation

Node.js

$ npm install htgen

Browser

Via Bower package manager

$ bower install htgen

Or loading the script remotely (just for testing or development)

<script src="//rawgithub.com/h2non/htgen/master/htgen.js"></script>

Environments

  • Node.js
  • Chrome
  • Firefox
  • Safari
  • Opera >= 11.6
  • IE >= 9

API

Example

var ht = require('htgen')

// nested functions calls
ht('.container#main', { attr: 'value' },
  ht('ul', { styles: { 'z-index': 10 } },
    ht('li', 'one'),
    ht('li', 'another')))
  .render()

// method chaining
ht('p')
  .child('span', 'text')
  .child('span', 'hi')
  .attr('class', 'normal')
  .render()

// using methods shortcuts
ht('ul')
  .c('li',
    // you can interpolate it as well in concat string expressions
    // it overrides the prototype inherited toString() method
    ht('p.link', 'click ' + ht('a', { href: 'http://i.am' }, 'here')))
  .c('li', 
    ht('p', 'some text'))
  .a('class', 'list')
  // make it pretty!
  .r({ pretty: true, indent: 4 })

// self-closed tags
ht('!img')

// doctypes definition
ht('doctype') // default to '<!DOCTYPE html>'
ht('doctype xml')

// dynamic
var fruits = { a: 'Apple', b: 'Banana', c: 'Coco' }
ht('table.pretty',
  ht('tr', ht('th'), ht('th', 'fruit')),
  Object.keys(fruits).map(function (n) {
    return ht('tr', 
      ht('th', n),
      ht('td', fruits[n])
    )
  })
).render(true)

Doctypes alias

html => <!DOCTYPE html>
xml => <?xml version="1.0" encoding="utf-8" ?>
transitional => <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
strict => <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
frameset => <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
1.1 => <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
basic => <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
mobile => <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">

htgen(name, [ attrs, child ])

Creates a new node and return an instance of Node

Name argument can be expressed like name.class1.class2#id, that is a short cut for setting the class and id attributes

htgen.Node(name, [ attrs, child ])

attributes

Type: object

Store the node attributes, if are defined

tag

Type: string

Store the node tag name

childNodes

Type: array

Store the node child nodes instances

parent

Type: object

If the current node is a child node, this points to the parent node instance

selfClosed

Type: boolean

If the current node tag is self-closed, this attribute will be `true

child(name, [ attrs, child ])

Alias: c Chainable: yes

Creates a new child node

cchild(name, [ attrs, child ])

Alias: cc Chainable: yes

Creates and push new child node, but changes the chain call to the instance of the created child node

render([ options ])

Alias: r Return: string

Render and return a string of the current node and all of its child nodes

See the supported render options bellow. You can aditionally simply pass true to render prettified code with default options

attr(name, value)

Alias: a Chainable: yes

Add new attribute to the current node. name argument can be an object with key-value maps

push(node)

Chainable: yes

Add a new child node

hasParent()

Return: boolean

Returns true if the current node has parent node, otherwise false

hasChild()

Return: boolean

Returns true if the current node has child nodes, otherwise false

latest()

Alias: l Return: Node

Return the latest pushed child node

htgen.Generator(node, [ options ])

options

Generator supported options:

  • pretty: Generate a well-indented code. Default to false
  • size: Initial indent size. Default to 0
  • indent: Indent spaces. Default to 2
  • tabs: Use tabs instead of spaces to indent. Default to false

render()

Return: string

renderAttrs()

Return: string

renderChild()

Return: string

Render the current node child nodes, if they exist

indent()

Return: string

Return the string equivalent to the applied indentation characters

Contributing

htgen is completely written in LiveScript. Take a look to the language documentation if you are new with it. Please, follow the LiveScript language conventions defined in the coding style guide

You must add new test cases for any feature or refactor you do, also keep in mind to follow the same design/code patterns that already exist

Development

Only node.js is required for development

Clone/fork this repository

$ git clone git@github.com:h2non/htgen.git && cd htgen

Install package dependencies

$ npm install

Run tests

$ npm test

Coding zen mode

$ grunt dev [--force]

Distribution release

$ grunt release

To Do

  • JSON map
  • HTML entities convert

License

Copyright (c) Tomas Aparicio

Released under the MIT license

Bitdeli Badge

Something went wrong with that request. Please try again.