mancha
v0.5.2
Published
Javscript HTML rendering engine
Downloads
261
Maintainers
omtinezReadme
mancha
mancha is an HTML rendering library. It can work as a command-line tool, imported as a Javascript
function, or as a Gulp plugin.
Examples
Here are some of the things you can use mancha for.
Replace simple variables using {{ value }} format
index.html:
<span>Hello {{ name }}</span>Command:
npx mancha --input="./index.html" --vars='{"name": "World"}'Result:
<div>Hello World</div>Include files from a relative path using the <include> tag
hello-name.html:
<span>Hello {{ name }}</span>index.html:
<div>
<include src="./hello-name.html" data-name="World"></include>
</div>Command:
npx mancha --input="./index.html"Result:
<div>
<span>Hello World</span>
</div>Usage
Client Side Rendering (CSR)
To use mancha on the client (browser), use the mancha.js bundled file available via unpkg.
<body>
<span>Hello, {{ name }}!</span>
</body>
<script src="//unpkg.com/mancha" data-name="John" target="body" init></script>Script tag attributes:
init: whether to automatically render upon script loaddata-name: dataset atribute, wheredata-{{key}}will be replaced with the attribute's valuetarget: comma-separated document elements to render e.g. "body" or "head,body" (defaults to "body")
For a more complete example, see examples/browser.
Compile Time Server Side Rendering (SSR)
To use mancha on the server at compile time, you can use the npx mancha command. For example,
if this is your project structure:
src/
├─ components/
| ├─ main.tpl.html
| ├─ footer.tpl.html
├─ index.html
├─ vars.jsonYou can run the following command to compile the site into a public folder:
npx mancha --input="./src/index.html" --vars="$(cat vars.json)" --output="./public"For a more complete example, see examples/compiled.
On Demand Server Side Rendering (SSR)
You can also use mancha as part of your server's request handling. Assuming a similar folder
structure as described in the previous section, the following express node server would render
the HTML code on demand for each incoming request:
import express from "express";
import { renderLocalPath } from "mancha";
import vars from "./vars.json";
const app = express();
app.get("/", async (req, res) => {
const html = await renderLocalPath("src/index.html", vars);
res.set("Content-Type", "text/html");
res.send(html);
});
app.listen(process.env.PORT || 8080);For a more complete example, see examples/rendered.
Web Worker Runtime Server Side Rendering (SSR)
For servers hosted as worker runtimes, such as Cloudflare Workers, you will need to import a
stripped down version of mancha that does not have the ability to read local files. Any HTML files
will need to be separately hosted by a static server, although you can also generate strings
containing HTML on demand.
import { renderRemotePath } from "mancha/dist/core"
const VARS = {...};
const HTML_ROOT = "https://example.com/html";
self.addEventListener('fetch', async event => {
const content = await renderRemotePath(`${HTML_ROOT}/index.html`, VARS);
event.respondWith(new Response(content, { headers: {"Content-Type": "text/html"} }))
});For a more complete example, see examples/wrangler.
Compile Time gulpfile Scripts
To use mancha in your gulpfile, you can do the following:
import { mancha } from "mancha/dist/gulp";
gulp.src(...).pipe(mancha({"myvar": "myval"})).pipe(...)The first argument consists of a dictionary of <key, value> pairs of literal string replacements.
key will become {{ key }} before replacing it with value in the processed files. For example,
if we passed {"name": "World"} as the argument:
Source:
<div>Hello {{ name }}</div>Result:
<div>Hello World</div>