Support Handlebars

[suchipi]

I am opening this issue to track Handlebars support. It was previously tracked in #1882 but that was closed when we added HTML support, so this issue is for Handlebars only.

[buschtoens]

Am I correct in assuming, that work has already started in language-handlebars, but is not usable yet?

[suchipi]

@buschtoens yes

[peterjmag]

For anyone who might be watching this, you can already try this out like so:

yarn prettier '**/*.hbs' --parser glimmer

Stolen from @ikatyang's comment here: #3534 (comment).

[ikatyang]

Please note that the glimmer printer is currently unrelated to the HTML printer, which means their formatting rules are not the same. To support Handlebars, we need to somehow combine them together, see #5511 (comment) for more info.

[peterjmag]

Ah thanks for the clarification @ikatyang! Is my previous comment misleading then? I'm happy to edit it if that's the case.

[mydea]

I've tried this on our codebase (with --parser glimmer), and in general it seemed to be working quite well, except for one issue: It removes all blank lines, which makes the resulting code rather hard to understand, sometimes. Was this a conscious decision? It is at odds with this: https://prettier.io/docs/en/rationale.html#empty-lines and how this works in JS/CSS.

[lydell]

@mydea That does not sound intended. Please share an example on the playground.

[mydea]

Hmm, I can't select the glimmer parser there, as far as I can see?

But what it does is format this:

{{test}}

{{other-test}}


{{final-test}}

to

{{test}}
{{other-test}}
{{final-test}}

[lydell]

Ah, sorry, I didn't know glimmer wasn't available there.

[Alonski]

I think adding Glimmer support to the playground should be done anyways so that we can at least experiment with it there.

I would really love to make this official.

[mfeckie]

When processing conditionals the parser / formatter takes liberties with multi level nesting. On occasion it combines the conditions in ways that end up with broken logic.

Example here https://prettier.io/playground/#N4Igxg9gdgLgprEAuExgGICuUA2cDO+ABPgNYCWADgCJwwCG5OAvswDpRFFr4yYBm-VhzQB6bHkLCoAHgAm5AG5EwOeoQC8bEPTAxy0fNoB8HLmnTl+JCAFs4ANXoAncvQBGeaV3PB8duABaSFtKaAQYb25gOBx8OCjfS2t-eydXDy92Th8uGXdMGBhoIjl6BkD4XmDofnJnW0CCopLoVXIwUg00SjhnfggGlVr62yJ+ejiE5lMc3KSrGzSXN09ps3ncmXIVNU1tCfH6QOc4flP8AAsjwPxKcigTGVFyWc3cgGFT8oeAcyIAHRAjabNCxeKJd4fEYNEHzMRWSF5UTNYpQN4+MFTJHRZJLRwrTLrObwvwBGqhcKwHFYiHZd64xbkeC2fA4raUDEMrgABTw6jguw6pDhm2enNFmOALyE9PeFjgumuzLgrKI6iIAB8VbZNeypakghAYJc+hSwlAIkQdRodfracTufLgABPOiBehQY2m5zmqmROWg6WKsCXGnSxGB6IyyEySi7dT4LQgQYmQbirlEfKFNGlcrHKowQIKfC2ciEJo5kqqRPJ04AKzgem0RDaOGF3WAvX6gzGDabAeM1HLZcIz1R0AxCNlHGeCkUxhAABoU5R9IZkKAXM4IAB3HkuBD4ZA6RQQchyZcgdzOXSkOgAZUouj+yBgzkwcBXlxgthwAHVLhVO5dDgB8j2ZJRmRdE8wEIK8HniZwYB5W9flsehkAmKYV3rfAAA8ACFb06R96HsAAZB44CwyZ4lwgiHz+PAAEVMGNGikGw+iQGfZwkJPX521sexnCvShXFgf8LxNZAAA4AAYVwkiB4n-W9KBPCSCD6RQaJXU4AEdMHqOBUPodDMK4uivxAeIyzfD9bPwZi4DYjjaJwkAGHcaS5FkpAACYV3fRh2ygX5oREqyQC9S0r0weIABUPGPazsWYIA

[alexander-akait]

@mfeckie yep, it is bug, better create new issue, also feel free to send a PR with fix (it is easy)

[mfeckie]

@evilebottnawi If I knew how .. I would love to fix it. Happy to open new issue too

[mfeckie]

Another one - removes whitespace between helpers and text in ways that alter the rendered output

Playground here

https://prettier.io/playground/#N4Igxg9gdgLgprEAuEACdqA8AbAlqgEwEMYiBaeAZxjICc4jLoA+AHSgw2GAGJcAzVEwC2cAHQwAFrigBzAL7z2nTvwi1U3EeNzxhi5Su5xslOAY4r0mSgAciHMNkaUAvKxBxhtmAE8PbJZW6GShZIZWmAD0dg6BVtxRAhac0XjMIAA0IBA+uNCUyKBEtLQQAO4ACiUIhShEAG4QuARZIABGtERgANZwMADK9mAyssgwtACucNmSMMLYAOrSVMNwA7W6uA26vsjglIXZMma0MJVdssJEyPxEpjMgAFaUAB4AQl29-QNEogAyMjgt3uZmyL1eA1G2DgAEVJhB4CCHtl7LRTvtZHhhKJaG1bLQZDBFi0pMgABwABlRZTMiy6tn2BLgpwawOy9AAjpNcPQLkQrjckHcUSAzMJcOMpo9KNC4QikcLQY9SO0SQQyUgAEzZCZEXB4OQAYQgOKFICg0HZIEmZgAKkR2nURWZFEA

[pmccloghrylaing]

Why is Glimmer being used as the parser instead of Handlebars? Just realised Handlebars ignores HTML. Looks like Glimmer only supports a subset of Handlebars.

Playground link to illustrate: https://prettier.io/playground/#N4Igxg9gdgLgprEAuEAeAznMMCW0AEYANgIbroC8AOiACokBG6wwAxDgGb4cCuRRAXwH56TALRje-FgHpOQmgD4qUfGvwsAfq0UABAA4kATrhJExDIhDABrIbIPHT5y9ZuaFUVDMzY8UZSgQABoQCH1caHRkUGMjCAB3AAVjBGiUEgA3CBwAExCQBiMSWzgYAGVDMBwoAHNkGCMeOFCACxgAWyIAdVaceHQquHK0-pxM-oBPZHByAprMEyTi2o6SZA4zTFCAK3QADwAhYtKKkg64ABkauA2tlpA9-fKa2qI4AEUeCHg7om2QIYjIsZm8cB0LkYCvojDUYN08jBWsgABwABlCMIgmG6xX0MxhcEWmVuoSMcAAjjwcOTliRVuskJt-g9MB0cA0mqzXu8vj9bkz7qEYIwEbkkcgAEzC4o4IivADCEAhjJAUGgpJAPEwonSzMwQiAA
(On a side note playground doesn't allow you to select glimmer - I had to start with one of the other playground links)

[Alonski]

@pmccloghrylaing I'm not sure that is valid Handlebars. At least not anything that I have ever seen.

[pmccloghrylaing]

@Alonski Handlebars doesn't complain about it - @partial-block is really useful if you're creating components and Glimmer doesn't seem to support #if in an attribute value either. The difference is that Handlebars doesn't care about any non-handlebars code - it just gets treated as text - while Glimmer needs to parse the HTML as well and will only support certain Handlebars operations depending on the context.

Here's another example of valid Handlebars that I wouldn't expect Glimmer to support:

<{{#if href}}a href="{{href}}"{{else}}span{{/if}}>...</{{#if href}}a{{else}}span{{/if}}>

[Alonski]

@pmccloghrylaing ok now I understand you. Maybe this should be called language glimmer then. Or something else. They aren't 100% compatible

[macgyver]

Is there any plan for handlebars support? it seems like Glimmer is on a path to be supported but, as was pointed out, Glimmer !== Handlebars.

[alexander-akait]

@macgyver we have plugin api, so you can start this as plugin right now

[gossi]

I realized today, this is stripping the tilde character: ~

Prettier 1.19.1
Playground link

--parser glimmer

Input:

    <li data-test-reason>
      {{#if some.thing}}
        for {{~some.item~}}
      {{else}}
        <span class="empty">
          ----
        </span>
      {{/if}}
    </li>

Output:

<li data-test-reason>
  {{#if some.thing}}
    for{{some.item}}
  {{else}}
    <span class="empty">
      ----
    </span>
  {{/if}}
</li>

Original Report: mfeckie/handlebars-formatter#18

[ghost]

@gossi thanks for finding that! A few of us created this issue for asynchronous project management around glimmer + prettier: jgwhite#1
If this specific issue is not tracked there we definitely should add it!

[thorn0]

There is no plans to add support for Handlebars outside of Glimmer's subset. Prettier's plugin API can be used to create a plugin for it.

Glimmer is tracked in #4908 and jgwhite#1.