@hopin/render

Module to render HTML, CSS and JS in a "best practice-y" way.

Stats

StarsIssuesVersionUpdatedCreatedSize
@hopin/render
175.0.02 years ago3 years agoMinified + gzip package size for @hopin/render in KB

Readme

@hopin/render

Travis Build Status Coverage Status

`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.

Steven Universe Nerd

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();

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.