Hoquet NPM | npm.io

hoquet

JavaScript HTML templating with s-expressions.

Installation

Install with npm:

$ npm install --save hoquet

Example

var hoquet = require('hoquet');

function layout(c) {
  return [
      "html", [
          "head",
          ["title", c.title],
          c.styles.map(function(href) {
              return ["link", {
                  rel: "stylesheet",
                  type: "text/css",
                  href: href
              }];
          }),
          c.head
      ],
      ["body", c.body]
  ];
}

var index = layout({title: "My Page",
                    styles: ["styles/reset.css",
                             "styles/main.css"],
                    body: ["div",
                           ["h1", "A message"]
                           ["p", "Hello World"]],
                    head: [["meta", {"name":"description",
                                     "content":"hello"}],
                           ["/js/lib/foo.js",
                            "/js/main.js"].map(function(src) {
                               return ["script", { src: src }];
                           })]});

API

.render

function that takes a structured array or a variable list of structured arrays and converts them into a String of HTML.

e.g.

    var hoquet = require('hoquet');
    
    hoquet.render(['p','foo'],['p','bar']);
    // <p>foo</p><p>bar</p>
    
    hoquet.render([['p','foo'],['p','bar']]);
    // <p>foo</p><p>bar</p>
    
    hoquet.render([[[[[['p','foo'],['p','bar']]]]]]);
    // <p>foo</p><p>bar</p>

    
    hoquet.render(['p', 'This is a ', ['span', 'paragraph'], ' with a span']);
    // <p>This is a <span>paragraph</span> with a span</p>

    hoquet.render(['div',{id: 'foo', class: 'bar'}, null]);
    //<div id="foo" class="bar"></div>

    hoquet.render(['meta', {foo: 'bar'}]);
    // <meta foo="bar" />

    hoquet.render(['ul', ['bread', 'milk', 'eggs'].map(function(x) {
      return(['li', x]);
    })]);
    // <ul><li>bread</li><li>milk</li><li>eggs</li></ul>