How would you pretty-print an HBS file? Here are some examples of cases that aren't quite cut-and-dry

component-with-many-properties.hbs

{{! All on one line? }}
{{#some-component className='foo bar bax' foo='bar' baz='foo bar baz' somethingElse='some other really long thing'}}

{{/some-component}}

{{! One property per line? (One level of indentation) }}
{{#some-component
  className='foo bar bax'
  foo='bar'
  baz='foo bar baz'
  somethingElse='some other really long thing'
}}

{{/some-component}}

{{! One property per line? (Two levels of indentation) }}
{{! I think this is my favorite because two levels make it more clear where the component begins }}
{{#some-component
    className='foo bar bax'
    foo='bar'
    baz='foo bar baz'
    somethingElse='some other really long thing'
}}

{{/some-component}}

helpers-in-properties.hbs

{{#some-component foo=(if someCondition 'some property' 'some other property') bar='baz'}}
{{/some-component}}

{{! vs }}

{{#some-component
    foo=(if someCondition
      'some property'
      'some other property')
    bar='baz'
}}
{{/some-component}}

{{! vs }}

{{#some-component
    foo=(if someCondition
      'some property'
      'some other property'
    )
    bar='baz'
}}
{{/some-component}}

{{! Also, what do you do with hash helpers? }}

{{#some-component foo=(hash some='prop' other='prop') bar='baz'}}
{{/some-component}}

{{#some-component
    foo=(hash
      some='prop'
      other='prop')
    bar='baz'
}}
{{/some-component}}

{{#some-component
    foo=(hash
      some='prop'
      other='prop'
    )
    bar='baz'
}}
{{/some-component}}

yield-with-many-props.hbs

{{#some-component
    className='foo bar bax'
    foo='bar'
    baz='foo bar baz'
    somethingElse='some other really long thing' as |foo|
}}
{{/some-component}}

{{! vs }}

{{#some-component
    className='foo bar bax'
    foo='bar'
    baz='foo bar baz'
    somethingElse='some other really long thing'
    as |foo|
}}
{{/some-component}}

All "helpers" can be broken down to the same features, so the if case and the hash case aren't really different. It's just and example of a helper that only takes positional params, and one that only takes named params. So, the questions are really

• Where do you put the name of the helper?
• How do you format positional params (like the if helper, which is only positional params)
• How do you format named params (like the hash helper, which is only named params)
• How would you format a helper that uses both positional and named params?
  • Might be worth looking into whether named params have to come after positional ones -- I'm not sure if they can be interwoven, but that's something the printer might want to fix if it's even possible to always put positional params first)
• Where do you put the trailing ) -- in line with the final "part" of the helper? On its own line? I think I like having it on its own line better. You might want to look into Lisp-style languages to see how they normally format expressions, since the HBS helper syntax is close to a Lisp syntax itself

Something else to think about -- components can have positional params as well. Helpers and components may not actually be different -- they probably follow the same rules. An inline component vs. a helper aren't actually different from the HBS file perspective and would be parsed the same way. For example, is the following an inline component or helper?

{{some-component somePositionalParameter prop='value'}}

No way to know. The difference from a parsing perspective only comes into play for block components like:

{{#some-component somePositionalParameter prop='value'}}
{{/some-component}}

Another thing to think about: the "named block RFC" will add new syntax that doesn't currently exist in Ember,, but should be accounted for (eventually)

https://github.com/emberjs/rfcs/blob/master/text/0226-named-blocks.md

And yet another thing to think about: Ember will be switching to PascalCase for component names, a la React

<SomeComponent somePositionalParam prop='value'>
</SomeComponent>

This is (somewhat) similar to JSX but is really still Handlebars. Just another thing to think about since components in that form will also (eventually) need support. I can't find a link to anything referencing this at the moment, but I know this change was made to Glimmer and will eventually come to Ember once it can interoperate with Glimmer components.