Piecewise templates are appropriate in some situations. They generally involve splitting all components of every template across several files, and they have very limited logic. However, used correctly, they can be much simpler and cleaner than the equivalent in most other template languages.
Here’s an example. Consider this layout.pwp:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{{ title }} – My Blog</title>
</head>
<body>
{{ body }}
</body>
</html>
And this example.pwp:
<div id="articles">
{{ article < @articles }}
</div>
This article.pwp:
<article class="blog-post">
<h2>{{ @title }}</h2>
<div class="body">
{{ @body | }}
</div>
<div class="comments">
{{ @comments.length }} comment{{ @comments.length | s }}
{{ comment < @comments }}
</div>
</article>
This comment.pwp:
<article class="comment">
<h4>{{ @title }}</h4>
<div class="body">
{{ @body | }}
</div>
</article>
You could put them together like this:
"use strict";
var piecewise = require("piecewise");
piecewise.filters.s = function(n) {
return n === 1 ? "" : "s";
};
var templates = new piecewise.DirectoryLoader(__dirname);
var example = templates.load("layout", {
title: "All Articles",
body: templates.read("example")
});
console.log(example.render({
articles: [
{
title: "Example post",
body: "<p>Hello, world!</p>",
comments: [
{
title: "Foo",
body: "bar"
},
{
title: "Baz",
body: "qux"
}
]
}
]
}));
This renders… in a way that I hope you can infer from context.
Here are the {{/}}-delimited “expressions” available:
{{ @value.path | filter1 | filter2 | … }} – runs value.path through any number of filters. If no filters are provided, generic HTML-escaping is used; to disable this, add a trailing |, e.g. {{ @body | }} as seen above.{{ template }} – includes a template named template.{{ template @value.path }} – includes a template if value.path in the context is truthy according to JavaScript. The new template inherits the paren’t context.{{ template ! @value.path }} – the same as above, but negated.{{ template < @value.path }} – includes template for each item in the array or array-like object at value.path in the context. The context for each included template is the current item.{{ {{ }} – the literal text {{.And here are the built-in filters, which can be removed, extended, or modified through the exported filters object:
html – the default filter when none are provided; escapes <, >, ", and &.url – escapes using the JavaScript function encodeURIComponent.text – escapes <, >, and & to HTML entities.attr – escapes " and & to HTML entities.Please keep everything nice and functional and use double-quotes in your HTML, or things are liable to break in unexpected ways and behave differently across any versions.
You don’t have to put everything in a different file; consider writing a loader for XML, for example! It’s fun. Don’t be afraid to look at piecewise.js; it’s only about 300 lines.
FAQs
Templates that are appropriate sometimes.
We found that piecewise demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
A supply chain attack on Axios introduced a malicious dependency, plain-crypto-js@4.2.1, published minutes earlier and absent from the project’s GitHub releases.
Research
Malicious versions of the Telnyx Python SDK on PyPI delivered credential-stealing malware via a multi-stage supply chain attack.
Security News
TeamPCP is partnering with ransomware group Vect to turn open source supply chain attacks on tools like Trivy and LiteLLM into large-scale ransomware operations.