Yamato Daiwa Handlebars Extensions

Some helpers for the Handlebars template engine.

Installation

npm i @yamato-daiwa/handlebars-extensions -E

Usage

Each helper function of this package has been wrapped by the object. Most of these objects has single key/value pair where the key is the name of the helper function and the value is the helper function itself. For example, areStringsEqual helper function has been wrapped to AreStringsEqualHandlebarsHelper object, where the areStringsEqual is the key. To register the helpers such this one, use the spread operator:

import { create as initializeHandlebarsTemplateEngine } from "express-handlebars";
import { 
  AreStringsEqualHandlebarsHelper,
  IsEmptyObjectHandlebarsHelper,
  IsNonEmptyObjectHandlebarsHelper
} from "@yamato-daiwa/handlebars-extensions";

const handlebarsTemplateEngine = initializeHandlebarsTemplateEngine({
  helpers: {
    ...AreStringsEqualHandlebarsHelper,
    ...IsEmptyObjectHandlebarsHelper,
    ...IsNonEmptyObjectHandlebarsHelper
  }
});

Why it is impossible to export just the function itself without object wrapper?

Because if to export, for example, the areStringsEquals as

export { areStringsEquals } from "@yamato-daiwa/handlebars-extensions"

it is unclear outside the Handlebars files that areStringsEquals is the helper function indented to be used in the Handlebars, not the common function which could be safely used in normal TypeScript/JavaScript.

Functionality

Arrays

IsEmptyArrayHandlebarsHelper / isEmptyArray

{{#isEmptyArray items}}

  <p>Out of stock</p>
    
{{/isEmptyArray}}

IsNonEmptyArrayHandlebarsHelper / isNonEmptyArray

{{#ifGreaterThan x 0}}
  <!-- Content to display if x < 0 -->
{{else}}
  <!-- Content to display if x >= 0 -->
{{/ifGreaterThan}}

Numbers

IsGreaterThanHandlebarsHelper / isGreaterThan

{{#ifGreaterThan x 0}}
  <!-- Content to display if x > 0 -->
{{else}}
  <!-- Content to display if x <= 0 -->
{{/ifGreaterThan}}

IsSmallerThanHandlebarsHelper / isSmallerThan

{{#isSmallerThan x 0}}
  <!-- Content to display if x < 0 -->
{{else}}
  <!-- Content to display if x >= 0 -->
{{/isSmallerThan}}

Objects

IsEmptyObjectHandlebarsHelper / isEmptyObject

{{#isEmptyObject socialNetworkProfilesURIs}}

  <p>No social networks profiles registered</p>
    
{{/isEmptyObject}}

IsNonEmptyObjectHandlebarsHelper / isNonEmptyObject

<dl>
    
  <dt>Full Name</dt>
  <dd>{{ fullName }}</dd>
    
  {{#isNonEmptyObject socialNetworkProfilesURIs}}
    <dt>Social networks</dt>
    <dd>
      <ul>
           
        {{#each socialNetworkProfilesURIs}}
           
          <li>
              
            {{#areStringsEqual @key "facebook"}}
              <a href="{{ this }}">
                <svg>
                  <!-- The SVG code of teh Facebook icon ... -->
                </svg>
              </a>
            {{/areStringsEqual}}
                 
            {{#areStringsEqual @key "instagram"}}
             <a href="{{ this }}">
              <svg>
                <!-- The SVG code of teh Instagram icon ...-->
              </svg>
             </a>
            {{/areStringsEqual}}
              
            {{#areStringsEqual @key "twitter"}}
              <a href="{{ this }}">
                <svg>
                  <!-- The SVG code of teh Twitter icon ...-->
                </svg>
              </a>
            {{/areStringsEqual}}
              
          </li>
        
        {{/each}}
          
      </ul>
        
    </dd>
  {{/isNonEmptyObject}}
    
</dl>

ToJSON_HandlebarsHelper / toJSON

<div data-user="{{{ toJSON user }}}"></div>

Other

AreStringsEqualHandlebarsHelper / areStringsEqual

{{#areStringsEqual familyName givenName}}

  <p>The family name is even with given name?!</p>
    
{{/areStringsEqual}}