JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
    • 0
  • Score
    100M100P100Q24423F
  • License ISC

Monitor .hbs (Handlebar) file for changes and execute specified .js file

Package Exports

  • hbsmon
  • hbsmon/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (hbsmon) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

hbsmon

Monitor .hbs (Handlebar) file for changes and execute specified .js

Installation

Install the package globally so you can use the hbsmon CLI command:

npm i -g hbsmon

Usage

Get help

hbsmon -h

Get version

hbsmon -V

Monitor .hbs file, run script file with template basename

hbsmon template
  • Monitor changes of template.hbs file and run template.js script
  • Template default extension: .hbs
  • Default JavaScript default extension .js
  • Default Javascript filename: template file basename

Monitor .hbs file, run specified script

hbsmon template create-page
  • Monitor changes of template.hbs file
  • Template default extension: .hbs
  • Default JavaScript default extension .js
  • Run javacript file: create-page.js

Quick demo

This example shows how you to monitor changes to a .hbs template file and run a script when the template file changes.

  1. Create a template.hbs file: this is the file template file you will monitor for changes
<body>
    <ul>
        {{#each items as |item|}}
        <li>
            <a href="{{{item.url}}}" title="">{{{item.text}}}</a>
        </li>
        {{/each}}
    </ul>
</body>
  1. Create a create.js file: this is the script you will invoke when template.hbs file changes.
const Handlebars = require('handlebars')
const fs = require('fs')

function render(source, data = {}) {
    let template = Handlebars.compile(source);
    return template(data);
}

let items = "First Second".split(/\s+/).map((label, idx) => {
    return {
        text: `${label} ${idx+1}`,
        url: `#`,
    }
})
let source = fs.readFileSync(`template.hbs`, "utf-8")
let output = render(source, {items: items})
fs.writeFileSync('result.html', output, "utf-8");
console.log(source);
  1. Install hbsmon globally, if not already installed.
npm i -g hbsmon

To check hbsmon is already installed, type hbsmon -V at the command prompt.

  1. Run hbsmon in a terminal
hbsmon template create
  1. In your IDE, open template.hbs and result.html

As you type changes to your template, the result.html also changes. When hbsmon detects a change in the .hbs file, it invokes the change.js script, which uses the .hbs file to create the result.html file.