Handlebars by Pug

Pug mixins for the outputting of the Handlebars code instead of plain HTML.

• Installation
• Functionality
  • Works with Plain Handlebars
    • Conditionals
      • If--Handlebars
      • Else--Handlebars
      • ElseIf--Handlebars
    • Each--Handlebars
      • Custom Iterable Context Variable Name
      • Custom Iterable Context Variable Name and Index Variable Name
    • With--Handlebars
      • Basic Usage
      • Conditional Usage
    • Depends on @yamato-daiwa/handlebars-extensions
      • Conditionals
        • IfNonEmptyArray--Handlebars
        • IfNonEmptyObject--Handlebars
        • Switch--Handlebars/Case--Handlebars
      • For String Values
        • AreStringsEqual--HandlebarsHelper
      • For Numeric Values

        • IfGreaterThan--Handlebars

        • IfSmallerThan--Handlebars

Installation

npm i handlebars-by-pug -D -E

Functionality

Works with Plain Handlebars

Conditionals

If--Handlebars

dl

  dt.UserProfile-Profile-KeyCell Full Name
  dd.UserProfile-Profile-ValueCell {{ fullName }}

  +If--Handlebars("phoneNumber")
    dt.UserProfile-Profile-KeyCell Phone number
    dd.UserProfile-Profile-ValueCell {{ phoneNumber }}

Output (formatted):

<dl>
    
  <dt class="UserProfile-Profile-KeyCell">Full Name</dt>
  <dd class="UserProfile-Profile-ValueCell">{{ fullName }}</dd>
    
  {{#if phoneNumber}}
    <dt class="UserProfile-Profile-KeyCell">Phone number</dt>
    <dd class="UserProfile-Profile-ValueCell">{{ phoneNumber }}</dd>
  {{/if}}
    
</dl>

Else--Handlebars

⚠️ Warning: The +Else--Handlebars mixin invocation must be below +If--Handlebars level.

❌ Wrong:

dl
  
  dt.UserProfile-Profile-KeyCell Phone number
  dd.UserProfile-Profile-ValueCell
    +If--Handlebars("phoneNumber")
      | {{ phoneNumber }} 
    +Else--Handlebars
      | (No specified)

✅ Correct:

dl
  
  dt.UserProfile-Profile-KeyCell Phone number
  dd.UserProfile-Profile-ValueCell
    +If--Handlebars("phoneNumber")
      | {{ phoneNumber }} 
      +Else--Handlebars
        | (No specified)

Output (formatted):

<dl>

  <dt class="UserProfile-Profile-KeyCell">Phone number</dt>
  <dd class="UserProfile-Profile-ValueCell">
    {{#if phoneNumber}}
      {{ phoneNumber }} 
    {{else}}
      (No specified)
    {{/if}}
  </dd>

</dl>

ElseIf--Handlebars

⚠️ Warning: Similarly to +Else--Handlebars, the ElseIf--Handlebars mixin invocation must be below +If--Handlebars level. Also, each nested ElseIf--Handlebars or +Else--Handlebars must be in level deeper than the previous one.

❌ Wrong:

+If--Handlebars("conditionA")

  | Condition A is true

+ElseIf--Handlebars("conditionB")

  | Condition B is true

+ElseIf--Handlebars("conditionC")

  | Condition C is true

+Else--Handlebars

  | No condition matched

✅ Correct:

+If--Handlebars("conditionA")

  | Condition A is true

  +ElseIf--Handlebars("conditionB")

    | Condition B is true

    +ElseIf--Handlebars("conditionC")

      | Condition C is true

      +Else--Handlebars

        | No condition matched

Output (formatted):

{{#if conditionA}}
  Condition A is true
{{else}}
  {{#if conditionB}}
    Condition B is true
  {{else}}
    {{#if conditionC}}
      Condition C is true
    {{else}}
      No condition matched
    {{/if}}
  {{/if}}
{{/if}}

Each--Handlebars

Basic Usage

ul

  +Each--Handlebars("items")
  
    li {{ this }}

Output (formatted):

<ul>
  {{#each items}}
    <li>{{ this }}</li>
  {{/each}}
</ul>

Custom Iterable Context Variable Name

ul

  +Each--Handlebars({ iterableVariableName: "items", iterableContextVariableName: "item" })
  
    li {{ item }}

Output (formatted):

<ul>
  {{#each items as |item|}}
    <li>{{ item }}</li>
  {{/each}}
</ul>

Custom Iterable Context Variable Name and Index Variable Name

ul

  +Each--Handlebars({ 
    iterableVariableName: "items", 
    iterableContextVariableName: "item",
    indexVariableName: "itemIndex"
  })
  
    li {{ itemIndex }}: {{ item }}

Output (formatted):

<ul>
  {{#each items as |item itemIndex|}}
    <li>{{ itemIndex }}: {{ item }}</li>
  {{/each}}
</ul>

⚠️ Warning: Please note that only mentioned above combinations of properties of object-type parameter are valid. The error will be thrown is any other combination will be specified.

With--Handlebars

Basic Usage

+With--Handlebars("user")

  | {{firstname}} {{lastname}}

Output (formatted):

{{#with person}}
  {{firstname}} {{lastname}}
{{/with}}

Conditional Usage

The with-statement can ba conditionally generated or no. Such functionality demanded in cases when developing the Pug component it is unknown at advance on which depth level desired variable will be. In below example we are not know will be the "user" variable on current level or it will be the context:

mixin UserEditor(options)

  -
  
    const {
    
      /** @type { string | undefined } */
      userTemplateDataVariableName
    
    } = options ?? {};

  +With--Handlebars({
    mustSurroundByWithHelperIf: typeof userTemplateDataVariableName !== "undefined",
    parameterName: userTemplateDataVariableName
  })
  
    | {{firstname}} {{lastname}}

Output for userTemplateDataVariableName with "user" value (formatted):

{{#with user}}
  {{firstname}} {{lastname}}
{{/with}}

Output for userTemplateDataVariableName with undefined value (formatted):

{{firstname}} {{lastname}}

Depends on @yamato-daiwa/handlebars-extensions

To make it work, install @yamato-daiwa/handlebars-extensions and enable desired helpers.

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

Conditionals

IfNonEmptyArray--Handlebars

Depends on IsNonEmptyArrayHandlebarsHelper /isNonEmptyArray.

Unlike JavaScript, is conditional statements Handlebars considers the empty array as false. If you are fine with it, maybe you don't need this helper. And if you want to express "I am expecting either non-empty or empty array but nothing more", you can use this helper:

+IfNonEmptyArray--Handlebars("items")

  ul

    +Each--Handlebars("items")
  
      li {{ this }}

Output (formatted):

{{#isNonEmptyArray items}}
  <ul>
    {{#each items}}
      <li>{{ this }}</li>
    {{/each}}
  </ul>
{{/isNonEmptyArray}}

IfNonEmptyObject--Handlebars

Depends on IsNonEmptyObjectHandlebarsHelper/isNonEmptyObject.

dl

  +IfNonEmptyObject--Handlebars("socialNetworkProfilesURIs")
    dt Social networks
    dd 
      ul
        +Each--Handlebars("socialNetworkProfilesURIs")
          li {{@key}}

Output (formatted):

<dl>
  {{#isNonEmptyObject socialNetworkProfilesURIs}}
    <dt>Social networks</dt>
    <dd>
      <ul>
        {{#each socialNetworkProfilesURIs}}
          <li>{{@key}}</li>
        {{/each}}
      </ul>
    </dd>
  {{/isNonEmptyObject}}
</dl>

Switch--Handlebars/Case--Handlebars

Depends on SwitchCaseHandlebarsHelpers.

+Switch--Handlebars("dayOfWeekNumber__numerationFrom0AsSunday")

  +Case--Handlebars(0)

    | Sunday

  +Case--Handlebars(1)

    | Monday

  +Case--Handlebars(2)

    | Tuesday

  +Case--Handlebars(3)

    | Wednesday

  +Case--Handlebars(4)

    | Thursday

  +Case--Handlebars(5)

    | Friday

  +Case--Handlebars(6)

    | Saturday

Output (formatted):

{{#switch dayOfWeekNumber__numerationFrom0AsSunday}}
  {{#case 0}}Sunday{{/case}}
  {{#case 1}}Monday{{/case}}
  {{#case 2}}Tuesday{{/case}}
  {{#case 3}}Wednesday{{/case}}
  {{#case 4}}Thursday{{/case}}
  {{#case 5}}Friday{{/case}}
  {{#case 6}}Saturday{{/case}}
{{/switch}}

For String Values

AreStringsEqual--HandlebarsHelper

ul
  
  +Each--Handlebars("socialNetworkProfilesURIs")
    
    li

      +AreStringsEqual--HandlebarsHelper("@key", "facebook")
        a(href=`{{ this }}`)
          svg
            // The SVG code of teh Facebook icon ...

      +AreStringsEqual--HandlebarsHelper("@key", "instagram")
        a(href=`{{ this }}`)
          svg
            // The SVG code of teh Instagram icon ...

      +AreStringsEqual--HandlebarsHelper("@key", "twitter")
        a(href=`{{ this }}`)
          svg
            // The SVG code of teh Twitter icon ...

Output (formatted):

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

For Numeric Values

IfGreaterThan--Handlebars

+IfGreaterThan--Handlebars("user.warnings_count", "USER_WARNINGS_LIMIT")

  div Sorry, you are unable to post the messages because of warnings limit.  

Output (formatted):

{{#isGreaterThan user.warnings_count USER_WARNINGS_LIMIT}}
  <div>Sorry, you are unable to post the messages because of warnings limit.</div>
{{/isGreaterThan}}

IfSmallerThan--Handlebars

+IfSmallerThan--Handlebars("user.karmaPoints", "USER_MINIMAL_KARMA_POINTS_FOR_POSTING")

  div Sorry, you are unable to post the messages because of warnings limit.  

Output (formatted):

{{#isSmallerThan user.warnings_count USER_WARNINGS_LIMIT}}
  <div>Sorry, you are have not enough karma points to post the message. Please increase the karma points and come back.</div>
{{/isSmallerThan}}