Skip to content
A templating system for node
JavaScript
Find file
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
examples/simple
node_modules
src Added preloading optimization
tests
LICENCE
README.md
package.json

README.md

Trinity

A simple templating mechanism, that keeps the purity of HTML, CSS & JS.

Heavy work in progress!

Status: alpha

RoadMap:

  • client support
  • replace jsdom with a super fast, super light weight DOM4 implementation

Example

Simple example

More complete examples

Your HTML template

// html/base.html
<div>
  <p> Some content </p>
  <p class="container"></p>
</div>

The associated CSS. This is a nice place to put your CSS, all the CSS will be minified for you

// css/base.css
p {
    color: blue
}

p.container {
    color: red
}

Your view logic, using plain old DOM

// js/base.js
var p = frag.firstChild.getElementsByClassName("container")[0];
p.textContent = data.text;
var fragment = load("child", data);
var div = frag.firstChild;
div.appendChild(fragment);

Another HTML template, this is a small shell

// html/child.html
<p></p>

Another piece of view logic

// js/child.js
frag.firstChild.textContent = "Another p that was loaded!";

The express server

// server.js
var express = require("express"),
    trinity = require("../../src/trinity.js");

var app = express.createServer();

trinity.punchExpress();
trinity.set("path", __dirname + "/trinity/");

app.get("/", function (req, res) {
    res.render("base", { text: "win" });
});

app.listen(8080);

Motivation

  • Seperations of concerns. Most templates don't split HTML and view logic
  • Works on server & client
  • Uses the DOM API everyone knows and loves
  • Really simple API
  • Recursively loading and manipulating more DOM fragments

Doesn't plates already solve this? Plates makes you dump hooks in your HTML to bind data too. This breaks seperations of concerns. Plates also doesn't let you organize your code into trinities of HTML/CSS/JS that you can inherit and mix & match.

Documentation

trinity(uri, data, cb)

Trinity takes an uri to a HTML resource, a data object and a callback.

It creates a Document based on Static.x

It will then load the HTML at the uri as a fragment and pass it to the JS at the uri.

The javascript file at the uri get's 3 "globals" injected into it.

  • frag The documentfragment build of the HTML
  • data The data object passed into trinity
  • load A blocking load function, takes (uri, data) as paramaters and returns a documentfragment

The CSS file at the uri is string appended to a single CSS node in <head>.

The cb is of format (error, domFragment, load)

load(uri, data, cb)

The load function has the same format as the trinity and can be called to load more HTML/CSS/JS documents as document fragments.

Load does not create a Document based on static.x

The cb parameter takes a format of (error, domFragment)

Inside the JS files of a trinity the load function is blocking and takes (uri, data) as parameters and returns the document fragment.

static.x

Trinity allows you to define a static html / css / js file. These will be loaded by the trinity function.

The intend is that the static HTML is your master page, and that the static CSS / JS are your bundled & minified production js files.

The HTML that is created for you is the static html page with two extra nodes, a script node pointing at static.js and a style node pointing at static.css

trinity.config

You can configure some variables.

{
    static: name of static file, default is "static",
    publicPath: the public folder path to your trinity templates, the default is 
        "trinity". This means that a request to /static.css becomes trinity/static.css
    path: the path to your trinity folder. For example __dirname + "/trinity/". It has no
        default.
}

trinity.punchExpress

duck punches express by overwriting res.render to use trinity.

The default behaviour is to load the trinity with the uri and json you pass. And append the document fragment returned from the trinity to the body.

Only works nicely if static.html defines a <body></body> and all your trinities don't define <body></body>

trinity.send(res, error, fragment)

Trinity has a default send function that's used in combination with express. By default it appends the rendered document fragment to the end of the body.

Overwrite this function to have your own rendering logic

installation

npm install trinity

tests

nodeunit tests/

contributors

  • Raynos

MIT Licenced.

Something went wrong with that request. Please try again.