[handlebars] allow custom "else if"-like with block params #13930

jamescdavis · 2022-12-01T15:29:37Z

Description

This is a follow-up to #13507 to allow block params in custom "else if"-like blocks.

{{! Input }}
{{#when isAtWork as |work|}}
  Ship that
  {{work}}!
{{else when isReading as |book|}}
  You can finish
  {{book}}
  eventually...
{{else}}
  Go to bed!
{{/when}}

{{! Prettier stable }}
{{#when isAtWork as |work|}}
  Ship that
  {{work}}!
{{else when isReading}}
  You can finish
  {{book}}
  eventually...
{{else}}
  Go to bed!
{{/when}}

{{! Prettier main }}
{{#when isAtWork as |work|}}
  Ship that
  {{work}}!
{{else when isReading as |book|}}
  You can finish
  {{book}}
  eventually...
{{else}}
  Go to bed!
{{/when}}

Checklist

I’ve added tests to confirm my change works.
~~(If changing the API or CLI) I’ve documented the changes I’ve made (in the docs/ directory).~~
(If the change is user-facing) I’ve added my changes to changelog_unreleased/*/XXXX.md file following changelog_unreleased/TEMPLATE.md.
I’ve read the contributing guidelines.

✨Try the playground for this PR✨

--parser glimmer

CC: @dcyriller

fisker · 2022-12-05T02:52:07Z

I think we should allow break before isReading and as like printOpenBlock() do

Prettier pr-13930
Playground link

--parser glimmer
--print-width 20

Input:

{{#when isAtWork as |work|}}
  Ship that
  {{work}}!
{{else when isReading as |book|}}
  You can finish
  {{book}}
  eventually...
{{else}}
  Go to bed!
{{/when}}

Output:

{{#when
  isAtWork
  as |work|
}}
  Ship that
  {{work}}!
{{else when isReading as |book|}}
  You can finish
  {{book}}
  eventually...
{{else}}
  Go to bed!
{{/when}}

jamescdavis · 2022-12-05T23:44:06Z

@fisker I've added groups to allow breaking. I used nested groups rather than just a single group like in printOpenBlock() and IMHO it breaks a little nicer (try expanding your above playground example to --print-width 21).

If this looks good, I can follow up with the same treatment for printOpenBlock(), e.g. at --print-width 20 the above would be:

{{#when isAtWork
  as |work|
}}

but would break to

{{#when
  isAtWork
  as |work|
}}

at --print-width 15.

fisker · 2022-12-12T07:43:58Z

Can you add a test for it? You can use a long condition instead of setting printWidth option.

fisker

Thank you!

This PR contains the following updates: | Package | Type | Update | Change | |---|---|---|---| | [prettier](https://prettier.io) ([source](https://github.com/prettier/prettier)) | devDependencies | patch | [`2.8.1` -> `2.8.2`](https://renovatebot.com/diffs/npm/prettier/2.8.1/2.8.2) | --- ### Release Notes <details> <summary>prettier/prettier</summary> ### [`v2.8.2`](https://github.com/prettier/prettier/blob/HEAD/CHANGELOG.md#282) [Compare Source](prettier/prettier@2.8.1...2.8.2) [diff](prettier/prettier@2.8.1...2.8.2) ##### Don't lowercase link references ([#13155](prettier/prettier#13155) by [@DerekNonGeneric](https://github.com/DerekNonGeneric) & [@fisker](https://github.com/fisker))  ```markdown  We now don't strictly follow the release notes format suggested by [Keep a Changelog]. [Keep a Changelog]: https://example.com/  We now don't strictly follow the release notes format suggested by [Keep a Changelog]. [keep a changelog]: https://example.com/   <Same as input> ``` ##### Preserve self-closing tags ([#13691](prettier/prettier#13691) by [@dcyriller](https://github.com/dcyriller))  ```hbs {{! Input }} <div /> <div></div> <custom-component /> <custom-component></custom-component> <i /> <i></i> <Component /> <Component></Component> {{! Prettier 2.8.1 }} <div></div> <div></div> <custom-component></custom-component> <custom-component></custom-component> <i></i> <i></i> <Component /> <Component /> {{! Prettier 2.8.2 }} <div /> <div></div> <custom-component /> <custom-component></custom-component> <i /> <i></i> <Component /> <Component /> ``` ##### Allow custom "else if"-like blocks with block params ([#13930](prettier/prettier#13930) by [@jamescdavis](https://github.com/jamescdavis)) [#13507](prettier/prettier#13507) added support for custom block keywords used with `else`, but failed to allow block params. This updates printer-glimmer to allow block params with custom "else if"-like blocks.  ```hbs {{! Input }} {{#when isAtWork as |work|}} Ship that {{work}}! {{else when isReading as |book|}} You can finish {{book}} eventually... {{else}} Go to bed! {{/when}} {{! Prettier 2.8.1 }} {{#when isAtWork as |work|}} Ship that {{work}}! {{else when isReading}} You can finish {{book}} eventually... {{else}} Go to bed! {{/when}} {{! Prettier 2.8.2 }} {{#when isAtWork as |work|}} Ship that {{work}}! {{else when isReading as |book|}} You can finish {{book}} eventually... {{else}} Go to bed! {{/when}} ``` ##### Preserve empty lines between nested SCSS maps ([#13931](prettier/prettier#13931) by [@jneander](https://github.com/jneander))  ```scss /* Input */ $map: ( 'one': ( 'key': 'value', ), 'two': ( 'key': 'value', ), ) /* Prettier 2.8.1 */ $map: ( 'one': ( 'key': 'value', ), 'two': ( 'key': 'value', ), ) /* Prettier 2.8.2 */ $map: ( 'one': ( 'key': 'value', ), 'two': ( 'key': 'value', ), ) ``` ##### Fix missing parentheses when an expression statement starts with `let[` ([#14000](prettier/prettier#14000), [#14044](prettier/prettier#14044) by [@fisker](https://github.com/fisker), [@thorn0](https://github.com/thorn0))  ```jsx // Input (let[0] = 2); // Prettier 2.8.1 let[0] = 2; // Prettier 2.8.1 (second format) SyntaxError: Unexpected token (1:5) > 1 | let[0] = 2; | ^ 2 | // Prettier 2.8.2 (let)[0] = 2; ``` ##### Fix semicolon duplicated at the end of LESS file ([#14007](prettier/prettier#14007) by [@mvorisek](https://github.com/mvorisek))  ```less // Input @variable: { field: something; }; // Prettier 2.8.1 @variable: { field: something; }; ; // Prettier 2.8.2 @variable: { field: something; }; ``` ##### Fix no space after unary minus when followed by opening parenthesis in LESS ([#14008](prettier/prettier#14008) by [@mvorisek](https://github.com/mvorisek))  ```less // Input .unary_minus_single { margin: -(@a); } .unary_minus_multi { margin: 0 -(@a); } .binary_minus { margin: 0 - (@a); } // Prettier 2.8.1 .unary_minus_single { margin: - (@a); } .unary_minus_multi { margin: 0 - (@a); } .binary_minus { margin: 0 - (@a); } // Prettier 2.8.2 .unary_minus_single { margin: -(@a); } .unary_minus_multi { margin: 0 -(@a); } .binary_minus { margin: 0 - (@a); } ``` ##### Do not change case of property name if inside a variable declaration in LESS ([#14034](prettier/prettier#14034) by [@mvorisek](https://github.com/mvorisek))  ```less // Input @var: { preserveCase: 0; }; // Prettier 2.8.1 @var: { preservecase: 0; }; // Prettier 2.8.2 @var: { preserveCase: 0; }; ``` ##### Fix formatting for auto-accessors with comments ([#14038](prettier/prettier#14038) by [@fisker](https://github.com/fisker))  ```jsx // Input class A { @dec() // comment accessor b; } // Prettier 2.8.1 class A { @dec() accessor // comment b; } // Prettier 2.8.1 (second format) class A { @dec() accessor; // comment b; } // Prettier 2.8.2 class A { @dec() // comment accessor b; } ``` ##### Add parentheses for TSTypeQuery to improve readability ([#14042](prettier/prettier#14042) by [@onishi-kohei](https://github.com/onishi-kohei))  ```tsx // Input a as (typeof node.children)[number] a as (typeof node.children)[] a as ((typeof node.children)[number])[] // Prettier 2.8.1 a as typeof node.children[number]; a as typeof node.children[]; a as typeof node.children[number][]; // Prettier 2.8.2 a as (typeof node.children)[number]; a as (typeof node.children)[]; a as (typeof node.children)[number][]; ``` ##### Fix displacing of comments in default switch case ([#14047](prettier/prettier#14047) by [@thorn0](https://github.com/thorn0)) It was a regression in Prettier 2.6.0.  ```jsx // Input switch (state) { default: result = state; // no change break; } // Prettier 2.8.1 switch (state) { default: // no change result = state; break; } // Prettier 2.8.2 switch (state) { default: result = state; // no change break; } ``` ##### Support type annotations on auto accessors via `babel-ts` ([#14049](prettier/prettier#14049) by [@sosukesuzuki](https://github.com/sosukesuzuki)) [The bug that `@babel/parser` cannot parse auto accessors with type annotations](babel/babel#15205) has been fixed. So we now support it via `babel-ts` parser.  ```tsx class Foo { accessor prop: number; } ``` ##### Fix formatting of empty type parameters ([#14073](prettier/prettier#14073) by [@fisker](https://github.com/fisker))  ```jsx // Input const foo: bar</* comment */> = () => baz; // Prettier 2.8.1 Error: Comment "comment" was not printed. Please report this error! // Prettier 2.8.2 const foo: bar</* comment */> = () => baz; ``` ##### Add parentheses to head of `ExpressionStatement` instead of the whole statement ([#14077](prettier/prettier#14077) by [@fisker](https://github.com/fisker))  ```jsx // Input ({}).toString.call(foo) === "[object Array]" ? foo.forEach(iterateArray) : iterateObject(foo); // Prettier 2.8.1 ({}.toString.call(foo) === "[object Array]" ? foo.forEach(iterateArray) : iterateObject(foo)); // Prettier 2.8.2 ({}).toString.call(foo.forEach) === "[object Array]" ? foo.forEach(iterateArray) : iterateObject(foo); ``` ##### Fix comments after directive ([#14081](prettier/prettier#14081) by [@fisker](https://github.com/fisker))  ```jsx // Input "use strict" /* comment */; // Prettier 2.8.1 (with other js parsers except `babel`) Error: Comment "comment" was not printed. Please report this error! // Prettier 2.8.2 <Same as input> ``` ##### Fix formatting for comments inside JSX attribute ([#14082](prettier/prettier#14082) with by [@fisker](https://github.com/fisker))  ```jsx // Input function MyFunctionComponent() { <button label=/*old*/"new">button</button> } // Prettier 2.8.1 Error: Comment "old" was not printed. Please report this error! // Prettier 2.8.2 function MyFunctionComponent() { <button label=/*old*/ "new">button</button>; } ``` ##### Quote numeric keys for json-stringify parser ([#14083](prettier/prettier#14083) by [@fisker](https://github.com/fisker))  ```jsx // Input {0: 'value'} // Prettier 2.8.1 { 0: "value" } // Prettier 2.8.2 { "0": "value" } ``` ##### Fix removing commas from function arguments in maps ([#14089](prettier/prettier#14089) by [@sosukesuzuki](https://github.com/sosukesuzuki))  ```scss /* Input */ $foo: map-fn( ( "#{prop}": inner-fn($first, $second), ) ); /* Prettier 2.8.1 */ $foo: map-fn(("#{prop}": inner-fn($first $second))); /* Prettier 2.8.2 */ $foo: map-fn( ( "#{prop}": inner-fn($first, $second), ) ); ``` ##### Do not insert space in LESS property access ([#14103](prettier/prettier#14103) by [@fisker](https://github.com/fisker))  ```less // Input a { color: @colors[@white]; } // Prettier 2.8.1 a { color: @colors[ @white]; } // Prettier 2.8.2 <Same as input> ``` </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).  Co-authored-by: cabr2-bot <cabr2.help@gmail.com> Reviewed-on: https://codeberg.org/Calciumdibromid/CaBr2/pulls/1708 Reviewed-by: Epsilon_02 <epsilon_02@noreply.codeberg.org> Co-authored-by: Calciumdibromid Bot <cabr2_bot@noreply.codeberg.org> Co-committed-by: Calciumdibromid Bot <cabr2_bot@noreply.codeberg.org>

This PR contains the following updates: | Package | Type | Update | Change | |---|---|---|---| | [prettier](https://prettier.io) ([source](https://github.com/prettier/prettier)) | devDependencies | patch | [`2.8.3` -> `2.8.4`](https://renovatebot.com/diffs/npm/prettier/2.8.3/2.8.4) | --- ### Release Notes <details> <summary>prettier/prettier</summary> ### [`v2.8.4`](https://github.com/prettier/prettier/blob/HEAD/CHANGELOG.md#284) [Compare Source](prettier/prettier@2.8.3...2.8.4) [diff](prettier/prettier@2.8.3...2.8.4) ##### Fix leading comments in mapped types with `readonly` ([#13427](prettier/prettier#13427) by [@thorn0](https://github.com/thorn0), [@sosukesuzuki](https://github.com/sosukesuzuki))  ```tsx // Input type Type = { // comment readonly [key in Foo]; }; // Prettier 2.8.3 type Type = { readonly // comment [key in Foo]; }; // Prettier 2.8.4 type Type = { // comment readonly [key in Foo]; }; ``` ##### Group params in opening block statements ([#14067](prettier/prettier#14067) by [@jamescdavis](https://github.com/jamescdavis)) This is a follow-up to [#13930](prettier/prettier#13930) to establish wrapping consistency between opening block statements and else blocks by grouping params in opening blocks. This causes params to break to a new line together and not be split across lines unless the length of params exceeds the print width. This also updates the else block wrapping to behave exactly the same as opening blocks.  ```hbs {{! Input }} {{#block param param param param param param param param param param as |blockParam|}} Hello {{else block param param param param param param param param param param as |blockParam|}} There {{/block}} {{! Prettier 2.8.3 }} {{#block param param param param param param param param param param as |blockParam| }} Hello {{else block param param param param param param param param param param}} There {{/block}} {{! Prettier 2.8.4 }} {{#block param param param param param param param param param param as |blockParam| }} Hello {{else block param param param param param param param param param param as |blockParam| }} There {{/block}} ``` ##### Ignore files in `.sl/` ([#14206](prettier/prettier#14206) by [@bolinfest](https://github.com/bolinfest)) In [Sapling SCM](https://sapling-scm.com/), `.sl/` is the folder where it stores its state, analogous to `.git/` in Git. It should be ignored in Prettier like the other SCM folders. ##### Recognize `@satisfies` in Closure-style type casts ([#14262](prettier/prettier#14262) by [@fisker](https://github.com/fisker))  ```jsx // Input const a = /** @satisfies {Record<string, string>} */ ({hello: 1337}); const b = /** @type {Record<string, string>} */ ({hello: 1337}); // Prettier 2.8.3 const a = /** @satisfies {Record<string, string>} */ { hello: 1337 }; const b = /** @type {Record<string, string>} */ ({ hello: 1337 }); // Prettier 2.8.4 const a = /** @satisfies {Record<string, string>} */ ({hello: 1337}); const b = /** @type {Record<string, string>} */ ({hello: 1337}); ``` ##### Fix parens in inferred function return types with `extends` ([#14279](prettier/prettier#14279) by [@fisker](https://github.com/fisker))  ```ts // Input type Foo<T> = T extends ((a) => a is infer R extends string) ? R : never; // Prettier 2.8.3 (First format) type Foo<T> = T extends (a) => a is infer R extends string ? R : never; // Prettier 2.8.3 (Second format) SyntaxError: '?' expected. // Prettier 2.8.4 type Foo<T> = T extends ((a) => a is infer R extends string) ? R : never; ``` </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).  Co-authored-by: cabr2-bot <cabr2.help@gmail.com> Reviewed-on: https://codeberg.org/Calciumdibromid/CaBr2/pulls/1775 Reviewed-by: Epsilon_02 <epsilon_02@noreply.codeberg.org> Co-authored-by: Calciumdibromid Bot <cabr2_bot@noreply.codeberg.org> Co-committed-by: Calciumdibromid Bot <cabr2_bot@noreply.codeberg.org>

…13930)

add failing test for else if with block params

507835f

jamescdavis changed the title ~~add failing test for else if with block params~~ [handlebars] allow else if with block params Dec 1, 2022

jamescdavis changed the title ~~[handlebars] allow else if with block params~~ [handlebars] allow custom "else if" with block params Dec 1, 2022

allow block params in custom "else if"-like blocks

773eb07

jamescdavis changed the title ~~[handlebars] allow custom "else if" with block params~~ [handlebars] allow custom "else if"-like with block params Dec 1, 2022

jamescdavis force-pushed the allow_block_params_in_else_if branch 2 times, most recently from f2b3862 to 3964285 Compare December 1, 2022 17:11

add changelog entry

299bb7b

jamescdavis force-pushed the allow_block_params_in_else_if branch from 3964285 to 299bb7b Compare December 1, 2022 19:00

jamescdavis marked this pull request as ready for review December 1, 2022 19:51

use group to allow breaking

22a1096

jamescdavis force-pushed the allow_block_params_in_else_if branch from a15c9cf to 22a1096 Compare December 5, 2022 21:45

add tests for wrapping long custom else

97b47a1

fisker approved these changes Dec 12, 2022

View reviewed changes

fisker merged commit 40d0f27 into prettier:main Dec 15, 2022

jamescdavis deleted the allow_block_params_in_else_if branch December 18, 2022 21:53

jamescdavis mentioned this pull request Dec 27, 2022

[handlebars] group params in opening block statements #14067

Merged

4 tasks

sync-by-unito bot mentioned this pull request Feb 11, 2023

build(deps-dev): Bump prettier from 2.7.1 to 2.8.4 mangrovedao/mangrove-core#217

Merged

github-actions bot mentioned this pull request Jul 9, 2023

Upgrade renovate to get pnpm dependencies reported correctly AurorNZ/report-updated-dependencies#661

Merged

medikoo pushed a commit to medikoo/prettier-elastic that referenced this pull request Jan 4, 2024

[handlebars] allow custom "else if"-like with block params (prettier#…

e78a2ee

…13930)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[handlebars] allow custom "else if"-like with block params #13930

[handlebars] allow custom "else if"-like with block params #13930

jamescdavis commented Dec 1, 2022 •

edited

fisker commented Dec 5, 2022 •

edited

jamescdavis commented Dec 5, 2022

fisker commented Dec 12, 2022 •

edited

fisker left a comment

[handlebars] allow custom "else if"-like with block params #13930

[handlebars] allow custom "else if"-like with block params #13930

Conversation

jamescdavis commented Dec 1, 2022 • edited

Description

Checklist

fisker commented Dec 5, 2022 • edited

jamescdavis commented Dec 5, 2022

fisker commented Dec 12, 2022 • edited

fisker left a comment

Choose a reason for hiding this comment

jamescdavis commented Dec 1, 2022 •

edited

fisker commented Dec 5, 2022 •

edited

fisker commented Dec 12, 2022 •

edited