handlebars-lang / handlebars-lang/handlebars.js

Empty string should not be truthy for block sections

Open
#2,177 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
18.7k
Forks
2.1k
PR merge metrics
No merged PRs in 30d

Description

In Mustache templates it's common to use a block section to conditionally output a tag or attribute only if it has content:

```hbs
{{#notes}}

{{notes}}

{{/notes}}
```

```hbs
Click me
```

```hbs
{{#user}}
{{name}}{{^name}}Anonymous{{/name}}
{{/user}}
```

However, Handlebars.js currently treats an empty string as truthy for block sections, which [breaks templates like these](https://handlebarsjs.com/playground.html#format=1¤tExample=%7B%22template%22%3A%22%7B%7B%23notes%7D%7D%3Cp%20class%3D%5C%22notes%5C%22%3E%7B%7Bnotes%7D%7D%3C%2Fp%3E%7B%7B%2Fnotes%7D%7D%5Cn%3Cbutton%7B%7B%23id%7D%7D%20id%3D%5C%22%7B%7B%20id%20%7D%7D%5C%22%7B%7B%2Fid%7D%7D%3EClick%20me%3C%2Fbutton%3E%5Cn%5Cn%7B%7B%23user%7D%7D%5Cn%20%20%7B%7Bname%7D%7D%7B%7B%5Ename%7D%7D%3Ci%3EAnonymous%3C%2Fi%3E%7B%7B%2Fname%7D%7D%5Cn%7B%7B%2Fuser%7D%7D%22%2C%22partials%22%3A%5B%5D%2C%22input%22%3A%22%7B%5Cn%20%20%20%20notes%3A%20%5C%22%5C%22%2C%5Cn%20%20%20%20id%3A%20%5C%22%5C%22%2C%5Cn%20%20%20%20user%3A%20%7B%5Cn%20%20%20%20%20%20%20%20name%3A%20%5C%22%5C%22%5Cn%20%20%20%20%7D%5Cn%7D%22%2C%22output%22%3A%22%3Cp%20class%3D%5C%22notes%5C%22%3E%3C%2Fp%3E%5Cn%3Cbutton%20id%3D%5C%22%5C%22%3EClick%20me%3C%2Fbutton%3E%5Cn%5Cn%20%20%5Cn%22%2C%22preparationScript%22%3A%22%22%2C%22handlebarsVersion%22%3A%224.7.9%22%7D).

In order to use Handlebars, all these templates would have to be modified to use the `#if` or `#unless` helper instead, which is a significant challenge for larger projects with many templates.

There was previously some discussion about this in #731. However, that was focused on the number `0` rather than the case of an empty string.

The source for the current behavior is in [block-helper-missing.js](https://github.com/handlebars-lang/handlebars.js/blob/master/lib/handlebars/helpers/block-helper-missing.js). `false`, `null`, `undefined`, and an empty array are treated as falsy, but an empty string is not. Instead, a blank string renders the block with the context changed to the empty string, which seems unexpected and not useful.

## Motivation

I'm the maintainer of PHP Handlebars, which currently matches the Handlebars.js behavior for block sections. However, the treatment of empty strings has been a roadblock for the Wikimedia design system, which has many Mustache templates that would break.

Contributor guide

Open the contributing guide

Research direction

Start by reading lib/handlebars/helpers/block-helper-missing.js, the source identified in the issue, and inspect the existing block-section tests. Run the relevant test suite to compare current handling of empty strings with false, null, undefined, and empty arrays; done means empty-string sections no longer render while the other documented cases remain correct.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Active
Clarity
Clearly specified
Newbie friendliness
68/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.