zpt
Version:
Zenon Page Templates - JS (ZPT-JS)
55 lines (49 loc) • 1.79 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>Using ZPT-JS and node.js</title>
<script type="module" src="../js/zpt.js"></script>
<script type="text/javascript" src="../lib/syntaxHighlighter/lib.js"></script>
<link rel="stylesheet" type="text/css" href="../docs.css">
<link rel="stylesheet" type="text/css" href="../lib/syntaxHighlighter/theme.css">
</head>
<body>
<div data-use-macro="'page@templates.html'">
<div data-fill-slot="'page-header'">
<h1>ZPT-JS tutorial - Using ZPT-JS and node.js</h1>
<ul>
<li><a href="#node">Using ZPT-JS and node.js</a>.</li>
</ul>
</div>
<article data-fill-slot="'article'">
<h2 data-attributes="id 'node'">Using ZPT-JS and node.js</h2>
<p>
That's OK. But... how can we use ZPT-JS at the server side (using <a href="https://nodejs.org/">node.js</a>)? <a href="https://www.npmjs.com/package/jsdom">jsdom</a> is needed when no browser is available:
</p>
<pre class="brush: js">
var jsdom = require( 'jsdom' );
var { JSDOM } = jsdom;
// Build JSDOM instance
var dom = new JSDOM(
'<!doctype html>'
+ '<html>'
+ '<body><h1 data-content="'hello, world!'">a text</h1></body>'
+ '</html>'
);
// Init some important vars
var window = dom.window;
var document = window.document;
global.window = window;
// Parse template
import { zpt } from './zpt-esm.js';
zpt.run({
root: document.body,
dictionary: {}
});
console.log( 'Done!' );
</pre>
</article>
</div>
</body>
</html>