0.0.1-alpha.4 • Published 8 years ago

temply-core v0.0.1-alpha.4

Weekly downloads
2
License
MIT
Repository
github
Last release
8 years ago

temply-core

NPM Version NPM Downloads Travis Build Coverage Status

A non-invasive, pure HTML templating framework.

This is the core framework underpinning Temply Web.

Why bother

There are just so many templating frameworks out there, right?

So, why bother?

Well, on the one hand it's all about "I'll do this my way" thing, granted. On the other hand, I missed a framework that just wouldn't mess with the HTML structure or syntax.

So, the fundamental approach to templating in Temply is to preserve the original HTML template and move the code out to small, atomic units of JS code to transform it: let's call these plugins.

What you get

Take this HTML snippet:

<div class="cms-data-some-plugin">
  <a href="#">Some placeholder text</a>
</div>

Temply will lookup all cms-* class names and call a plugin with that name.

A plugin is a JS file living inside plugins folder, and it looks like this:

module.exports = function(data, $element, callback) {
	$element.text('Hello world!');
	callback(data);
}

Which will produce the following HTML result:

<div class="cms-data-some-plugin">
  <a href="#">Hello world!</a>
</div>

What plugins do and how they work

A plugin is just a JS file at the plugins folder that begins with cms-.

It must export a function like so:

module.exports = function(data, $element, callback) { ...

It gets 3 parameters:

  • data: An object with information the plugin might use to render something.
  • $element: The HTML element the plugin is invoked from. It is wrapped in a Cheerio object to manipulate the HTML at will.
  • callback: Because async, right?. A plugin must call this function, passing data to the next plugin.

Data and Render plugins

There are 2 categories of plugins: data and render. Both have the same structure, but it's nice to separate concerns.

Data plugins will be devoted to getting information (databases, REST apis) and passing it along with callback(data).

Render plugins will tipically use data object passed by parameter and render it.

### Plugins execution model

Plugins are called in-order, like in HTML Tree Traversal in-order.

The idea is that preceding cms-data plugins pass along valuable data to subsequent cms-render plugins. That's it.

License

MIT