htnl
v1.0.1
Published
Hyper Text Node Language: An easy approach to Node.js Server Side Rendering
Downloads
11
Maintainers
jman0519Readme
Hyper Text Node Language
Use Case
Hyper Text Node Language is an extreamly lightweight library for easly rendering HTML using Node.js.
Usage
How to Render a File
HTNL provides one simple method for rendering files
let htnl = new Htnl();
let html = htnl.renderFile("./superModulare.htnl");
// now serve that rendered file how ever you chooseHow to Render a String
HTNL also provides a slightly more complex render function. It is recommend to use renderFile so HTNL can determine the path of src attributes more reliably
let htnl = new Htnl();
let html = htnl.render(`
<body>
<import type="htnl" src="./reusableHtml/header.html"></import>
<h1>Welcome to the home page!</h1>
<import type="htnl" src="./reusableHtml/footer.html"></import>
</body>
`,
"./frontend");
// note that this path defaults to ./
// in this case however, HTNL would look for a file at ./frontend/reusableHTML/header.html
// now serve that rendered file how ever you chooseHTNL Tags
HTNL provies two tag functionalities
- Copying and pasting reusable HTML (or css or js) chuncks into a HTNL document via the import tag (see the examples above)
- Using Node.js runtime in HTNL files to generate HTML using the script tag
<body>
<script type="htnl">
console.log("this will be run in my node.js environment");
return "<h1>This header was rendered from HTNL to HTML</h1>";
</script>
<!-- or you can run it from a local file -->
<script type="htnl" src="./getVarsFromServer.js"></script>
</body>Recommendations
- Prefer htnl.renderFile() over htnl.render() so .htnl files can find paths relative to themselves, not what ever file is rendering them.
- The script tag is great for getting variables from your server without needing to make an api endpoint.
- The script tag can also generate complex html with the aid of jsdom. This provides the benifit of SEO optimization, full page load times, and modularity while keeping the ease/simplicity associated with client side rendering.