tessl/npm-dustjs-helpers

Context helpers that extend the core Dust.js templating system with conditional logic, mathematical operations, and iteration utilities.

Overview

Eval results

Files

Iteration Control

Name: tessl/npm-dustjs-helpers
Author: tessl

Iteration and context helpers that control rendering flow within loops and provide access to iteration metadata for advanced template logic.

Capabilities

Loop Position Helpers

Helpers that detect position within iteration loops and render content conditionally based on the current position.

/**
 * First helper - renders content only for the first item in a loop
 * Checks if context.stack.index === 0
 */
{@first}
  Content for first item only
{/first}

/**
 * Last helper - renders content only for the last item in a loop
 * Checks if context.stack.index === context.stack.of - 1
 */
{@last}
  Content for last item only
{/last}

/**
 * Separator helper - renders content between items, except after the last item
 * Renders for all items except when context.stack.index === context.stack.of - 1
 */
{@sep}
  Separator content
{/sep}

Usage Examples:

// Basic list with separators
{#items}
  <span>{name}</span>{@sep}, {/sep}
{/items}
<!-- Output: "Item1, Item2, Item3" -->

// List with special first/last formatting
<ul>
{#menuItems}
  {@first}<li class="first">{/first}
  {@last}<li class="last">{/last}
  {^first}{^last}<li>{/last}{/first}
    <a href="{url}">{title}</a>
  </li>
{/menuItems}
</ul>

// Complex navigation with separators
{#breadcrumbs}
  <a href="{url}">{title}</a>
  {@sep} &gt; {/sep}
  {@last}<strong>{title}</strong>{/last}
{/breadcrumbs}

// Table rows with alternating classes
{#users}
  <tr{@first} class="first"{/first}{@last} class="last"{/last}>
    <td>{name}</td>
    <td>{email}</td>
  </tr>
{/users}

Size Calculation Helper

Helper that calculates and outputs the size/length of various data types for template logic and display.

/**
 * Size helper - calculates size/length of the target value
 * @param key - Value to calculate size of (required)
 */
{@size key="target_value"/}

Size Calculation Rules:

Falsy values and true: Returns 0
Numbers: Returns the number as-is
Arrays: Returns array.length
Strings: Returns string.length
Objects: Returns count of enumerable properties
Functions: Calls function and returns length of result

Usage Examples:

// Display array length
<p>You have {@size key="{items}"/} items in your cart</p>

// Display string length
<p>Your message is {@size key="{message}"/} characters long</p>

// Conditional rendering based on size
{@size key="{notifications}"}
  {@gt value="0"}
    You have {@size key="{notifications}"/} new notifications
  {/gt}
{/@size}

// Object property count
<p>User profile has {@size key="{user}"/} fields completed</p>

// Complex size-based logic
{@select}
  {@eq key="{@size key=items/}" value="0"}
    <p>No items found</p>
  {/eq}
  {@eq key="{@size key=items/}" value="1"}
    <p>One item found</p>
  {/eq}
  {@gt key="{@size key=items/}" value="1"}
    <p>Multiple items found ({@size key="{items}"/} total)</p>
  {/gt}
{/select}

// Using size with iteration variables
{#products}
  Product {$idx} of {@size key="{$smarty.section.products.total}"/}
{/products}

Type-Specific Examples:

// Array size
{@size key="{['a','b','c']}"/}
<!-- Output: 3 -->

// String size
{@size key="hello"/}
<!-- Output: 5 -->

// Object size (counts enumerable properties)
{@size key="{user}"/}
<!-- Output: number of properties in user object -->

// Number passthrough
{@size key="42"/}
<!-- Output: 42 -->

// Falsy values
{@size key=""/}        <!-- Output: 0 -->
{@size key="false"/}   <!-- Output: 0 -->
{@size key="null"/}    <!-- Output: 0 -->
{@size key="true"/}    <!-- Output: 0 -->

Advanced Iteration Patterns

Combining iteration helpers with conditional logic for sophisticated loop control:

// Numbered list with special formatting
{#items}
  {@first}<ol>{/first}
  <li>
    {name}
    {@size key="{subitems}"}
      {@gt value="0"} ({@size key="{subitems}"/} subitems){/gt}
    {/@size}
  </li>
  {@last}</ol>{/last}
{/items}

// Grid layout with row detection
{#products}
  {@math key="{$idx}" method="mod" operand="3"}
    {@eq value="0"}<div class="row">{/eq}
  {/math}

  <div class="col">{name}</div>

  {@math key="{$idx}" method="mod" operand="3"}
    {@eq value="2"}</div>{/eq}
    {@last}
      {@ne value="2"}</div>{/ne}
    {/last}
  {/math}
{/products}

// Smart comma separation with "and"
{#tags}
  {name}
  {@sep}
    {@math key="{$idx}" method="add" operand="2"}
      {@eq key="{@size key=tags/}" value="{.}"}and {/eq}
      {@ne key="{@size key=tags/}" value="{.}"}, {/ne}
    {/math}
  {/sep}
{/tags}

Install with Tessl CLI