htnl
v1.0.1
Published
Hyper Text Node Language: An easy approach to Node.js Server Side Rendering
Downloads
8
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.