hbs2htl

0.0.6 • Public • Published

hbs2htl

Converts handlebar templates to HTL (sightly)

How to use?

Install

npm install --save hbs2htl

Import

const Hbs2htl = require('hbs2htl');

Compile

const hbs2htl = new Hbs2htl(`
<div>
    {{#if this}}
        {{this.prop}}
    {{/if}}
</div>`, { 
    template: 'mySightlyTemplate'
});
console.log(hbs2htl.html); // Compatible HTL template
/**
 * Output:
 * 
 * <sly data-sly-template.mySightlyTemplate="${@ data}">
 *     <div>
 *         <sly data-sly-test="${data}">
 *             ${data.prop} 
 *         </sly>
 *     </div>
 * </sly>
 */

Compiling unknown expressions

You can write your own transformations to compile unkown expressions. This is useful if you are using custom helpers.

Handlebars:

{{#eachCustom this}}
   {{this}}
{{/eachCustom}}

Default output:

<hbs-eachCustom data-$0="this">
  ${data}
</hbs-eachCustom>

To transform this you can use transform function.

console.log((new Hbs2htl(hbsText, {
    transform({ tag, props, event }) {
        if (event === 'onopentag') {
            return '...';
        }
        if (event === 'onclosetag') {
            return '</...>';
        }
    }
})).html);

Transform function is called only for unknown handlebar expressions.

DISCLAIMER

This package is still in a very early stage and is extremely buggy. Don't use this package in production yet. Your contributions are welcome! Help us improve this project.

Dependencies (1)

Dev Dependencies (0)

    Package Sidebar

    Install

    npm i hbs2htl

    Weekly Downloads

    1

    Version

    0.0.6

    License

    MIT

    Unpacked Size

    17 kB

    Total Files

    7

    Last publish

    Collaborators

    • scssyworks