Wjst in the Browser

Most of Wjst works in the browser in the same way that Wjst works within node.js. The only exception to this is that Wjst is unable to look up files by their path name, unless you directly tell Wjst what each template's path name is before hand.

In short, Wjst cannot resolve the directive {% extends "./myfile.html" %} and {% include "./myfile.html" %} without first having already been told about ./myfile.html.

The best way to work around this is to first pre-compile your templates using the Wjst command-line interface.

• Compile each template into JavaScript files. Assign a method name to the output that will be globally available in your browser.

$ wjst compile myfile.html --method-name=myfile > myfile.js

• Include Wjst and your myfile.js in your web page.

<script src="wjst.min.js"></script>
<script src="myfile.js"></script>

• Pre-run the template to prime Wjst's cache.

wjst.run(myfile, {}, '/myfile.html');

• Now, you are ready to render a template in-browser that can extend myfile.html

const tpl = '{% extends "./myfile.html" %}{% block content %}{{ stuff }}{% endblock %}';
const output = wjst.render(tpl, { filename: '/tpl', locals: { stuff: 'awesome' }});
document.querySelector('#foo').innerHTML = output;