@hopin/render
`hopin-render` uses mustache rendering with a set of wrappers to make it easier to group templates and partials as "components" with CSS and JS. This allows CSS and JS to be loaded in a "best practice-y" way.
Installation
npm install @hopin/render --save
Usage in Node
There are two approaches to using @hopin/render, create a template file and
use that to generate your HTML or use a string and use that as a template.
Template Files
Create a template file, in this case template.tmpl, with any scripts, styles or partials
you want to include:
---
styles:
inline:
- ./inline-styles-for-template-tmpl.css
sync:
- ./sync-styles-for-template-tmpl.css
async:
- ./async-styles-for-template-tmpl.css
scripts:
inline:
- ./inline-scripts-for-template-tmpl.js
sync:
- ./sync-scripts-for-template-tmpl.js
async:
- ./async-scripts-for-template-tmpl.js
partials:
- ./templates/nav.tmpl
---
<html>
<head>
<title>Example page title</title>
<!-- Load all inline and sync styles in head of document -->
{{hopin_headAssets}}
</head>
<body>
{{> "./templates/nav.tmpl"}}
<main>
<!-- TODO: Add main content here -->
</main>
<!-- Load inline, sync, async scripts and async styles -->
{{hopin_bodyAssets}}
</body>
</html>Tell hopin to compile the template and render it.
const {compileFile} = require('@hopin/render');
const templatePath = path.join(__dirname, 'template.tmpl');
const template = await compileFile(templatePath);
const data = {
hello: 'world',
};
const options = {
styles: {
inline: ['/* Add Inline CSS Here */'],
sync: ['/synchronous-styles-here.css'],
async: ['/asynchronous-styles-here.css'],
},
scripts: {
inline: ['/* Add Inline JS Here */'],
sync: ['/synchronous-scripts-here.css'],
async: ['/asynchronous-scripts-here.css'],
},
};
const htmlString = await template.render(data, options);
console.log(htmlString);Render from Strirng
const {compile} = require('@hopin/render');
const tmplString = `
---
styles:
inline:
- /user/matt/site/styles/index.css
---
{{hopin_headAssets}}
{{hopin_bodyAssets}}
`;
const template = await compile(tmpString);
const result = await template.render();You can pass in an option "relative path" variable to the compile function so paths for styles and scripts can be relative.
const {compile} = require('@hopin/render');
const tmplString = `
---
styles:
inline:
- styles/index.css
---
{{hopin_headAssets}}
{{hopin_bodyAssets}}
`;
const template = await compile(tmpString, '/user/matt/site/');
const result = await template.render();