@hopin/render
    TypeScript icon, indicating that this package has built-in type declarations

    5.0.0 • Public • Published

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

    Keywords

    Install

    npm i @hopin/render

    DownloadsWeekly Downloads

    3

    Version

    5.0.0

    License

    Apache-2.0

    Unpacked Size

    49.4 kB

    Total Files

    44

    Last publish

    Collaborators

    • gauntface
    • hopin-user