diff --git a/changelog_unreleased/handlebars/14067.md b/changelog_unreleased/handlebars/14067.md new file mode 100644 index 000000000000..6edfdfc9426a --- /dev/null +++ b/changelog_unreleased/handlebars/14067.md @@ -0,0 +1,57 @@ +#### Group params in opening block statements (#14067 by @jamescdavis) + +This is a follow-up to #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 stable }} +{{#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 main }} +{{#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}} +``` diff --git a/src/language-handlebars/printer-glimmer.js b/src/language-handlebars/printer-glimmer.js index 19249ff52a9a..55277f4c8e8d 100644 --- a/src/language-handlebars/printer-glimmer.js +++ b/src/language-handlebars/printer-glimmer.js @@ -30,6 +30,10 @@ const { isWhitespaceNode, } = require("./utils.js"); +/** + * @typedef {import("../document").Doc} Doc + */ + const NEWLINES_TO_PRESERVE_MAX = 2; // Formatter based on @glimmerjs/syntax's built-in test formatter: @@ -529,27 +533,24 @@ function printInverseBlockClosingMustache(node) { function printOpenBlock(path, print) { const node = path.getValue(); + /** @type {Doc[]} */ + const parts = []; - const openingMustache = printOpeningBlockOpeningMustache(node); - const closingMustache = printOpeningBlockClosingMustache(node); - - const attributes = [printPath(path, print)]; - - const params = printParams(path, print); - if (params) { - attributes.push(line, params); + const paramsDoc = printParams(path, print); + if (paramsDoc) { + parts.push(group(paramsDoc)); } if (isNonEmptyArray(node.program.blockParams)) { - const block = printBlockParams(node.program); - attributes.push(line, block); + parts.push(printBlockParams(node.program)); } return group([ - openingMustache, - indent(attributes), + printOpeningBlockOpeningMustache(node), + printPath(path, print), + parts.length > 0 ? indent([line, join(line, parts)]) : "", softline, - closingMustache, + printOpeningBlockClosingMustache(node), ]); } @@ -564,24 +565,18 @@ function printElseBlock(node, options) { function printElseIfLikeBlock(path, print, ifLikeKeyword) { const node = path.getValue(); - let blockParams = []; - - if (isNonEmptyArray(node.program.blockParams)) { - blockParams = [line, printBlockParams(node.program)]; - } - const parentNode = path.getParentNode(1); return group([ printInverseBlockOpeningMustache(parentNode), - indent( - group([ - group(["else", line, ifLikeKeyword]), - line, - printParams(path, print), - ]) - ), - indent(blockParams), + ["else", " ", ifLikeKeyword], + indent([ + line, + group(printParams(path, print)), + ...(isNonEmptyArray(node.program.blockParams) + ? [line, printBlockParams(node.program)] + : []), + ]), softline, printInverseBlockClosingMustache(parentNode), ]); diff --git a/tests/format/handlebars/block-statement/__snapshots__/jsfmt.spec.js.snap b/tests/format/handlebars/block-statement/__snapshots__/jsfmt.spec.js.snap index 8894daaed253..b519b203c234 100644 --- a/tests/format/handlebars/block-statement/__snapshots__/jsfmt.spec.js.snap +++ b/tests/format/handlebars/block-statement/__snapshots__/jsfmt.spec.js.snap @@ -17,6 +17,10 @@ printWidth: 80 Hello {{/block}} +{{#block param param param param param param param param param param param hashKey=hashValue as |blockParam|}} + Hello +{{/block}} + {{#block param param param param param param param hashKey=HashValue hashKey=hashValue}} Hello {{/block}} @@ -71,14 +75,7 @@ printWidth: 80 }}{{/block}} {{#block - param - param - param - param - param - param - param - hashKey=hashValue + param param param param param param param hashKey=hashValue as |blockParam| }} Hello @@ -92,26 +89,24 @@ printWidth: 80 param param param - hashKey=HashValue + param + param + param + param hashKey=hashValue + as |blockParam| }} Hello {{/block}} {{#block - param - param - param - param - param - param - param - param - param - param - param - param - param + param param param param param param param hashKey=HashValue hashKey=hashValue +}} + Hello +{{/block}} + +{{#block + param param param param param param param param param param param param param }} Hello {{/block}} @@ -294,6 +289,24 @@ printWidth: 80 {{f}} {{/when}} +{{#when abcdefghijklmnopqrstuvwxy abcdefghijklmnopqrstuvwxy abcdefghijklmnopqrstuvwxy as |b|}} + {{b}} +{{else when abcdefghijklmnopqrstuvwxy abcdefghijklmnopqrstuvwxy abcdefghijklmnopqrstuvwxy as |d|}} + {{d}} +{{/when}} + +{{#when abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz as |b|}} + {{b}} +{{else when abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz as |d|}} + {{d}} +{{/when}} + +{{#abcdefghijklmnopqrstuvwxyz-abcdefghijklmnopqrstuvwxyz-abcdefghijklmnopqrst param param param as |foo|}} + 1 +{{else abcdefghijklmnopqrstuvwxyz-abcdefghijklmnopqrstuvwxyz-abcdefghijklmnopqrst param param param as |bar|}} + 2 +{{/abcdefghijklmnopqrstuvwxyz-abcdefghijklmnopqrstuvwxyz-abcdefghijklmnopqrst}} + =====================================output=====================================

{{#when isAtWork}} @@ -419,7 +432,8 @@ printWidth: 80 as |b| }} {{b}} -{{else when abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnop +{{else when + abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnop as |d| }} {{d}} @@ -429,6 +443,46 @@ printWidth: 80 }} {{f}} {{/when}} + +{{#when + abcdefghijklmnopqrstuvwxy abcdefghijklmnopqrstuvwxy abcdefghijklmnopqrstuvwxy + as |b| +}} + {{b}} +{{else when + abcdefghijklmnopqrstuvwxy abcdefghijklmnopqrstuvwxy abcdefghijklmnopqrstuvwxy + as |d| +}} + {{d}} +{{/when}} + +{{#when + abcdefghijklmnopqrstuvwxyz + abcdefghijklmnopqrstuvwxyz + abcdefghijklmnopqrstuvwxyz + as |b| +}} + {{b}} +{{else when + abcdefghijklmnopqrstuvwxyz + abcdefghijklmnopqrstuvwxyz + abcdefghijklmnopqrstuvwxyz + as |d| +}} + {{d}} +{{/when}} + +{{#abcdefghijklmnopqrstuvwxyz-abcdefghijklmnopqrstuvwxyz-abcdefghijklmnopqrst + param param param + as |foo| +}} + 1 +{{else abcdefghijklmnopqrstuvwxyz-abcdefghijklmnopqrstuvwxyz-abcdefghijklmnopqrst + param param param + as |bar| +}} + 2 +{{/abcdefghijklmnopqrstuvwxyz-abcdefghijklmnopqrstuvwxyz-abcdefghijklmnopqrst}} ================================================================================ `; diff --git a/tests/format/handlebars/block-statement/block-statement.hbs b/tests/format/handlebars/block-statement/block-statement.hbs index 78b7e47d7cc5..b050884afd40 100644 --- a/tests/format/handlebars/block-statement/block-statement.hbs +++ b/tests/format/handlebars/block-statement/block-statement.hbs @@ -9,6 +9,10 @@ Hello {{/block}} +{{#block param param param param param param param param param param param hashKey=hashValue as |blockParam|}} + Hello +{{/block}} + {{#block param param param param param param param hashKey=HashValue hashKey=hashValue}} Hello {{/block}} diff --git a/tests/format/handlebars/block-statement/custom-else.hbs b/tests/format/handlebars/block-statement/custom-else.hbs index 72580285e949..7b5225cb89c8 100644 --- a/tests/format/handlebars/block-statement/custom-else.hbs +++ b/tests/format/handlebars/block-statement/custom-else.hbs @@ -126,3 +126,21 @@ {{else when abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz as |f|}} {{f}} {{/when}} + +{{#when abcdefghijklmnopqrstuvwxy abcdefghijklmnopqrstuvwxy abcdefghijklmnopqrstuvwxy as |b|}} + {{b}} +{{else when abcdefghijklmnopqrstuvwxy abcdefghijklmnopqrstuvwxy abcdefghijklmnopqrstuvwxy as |d|}} + {{d}} +{{/when}} + +{{#when abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz as |b|}} + {{b}} +{{else when abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz as |d|}} + {{d}} +{{/when}} + +{{#abcdefghijklmnopqrstuvwxyz-abcdefghijklmnopqrstuvwxyz-abcdefghijklmnopqrst param param param as |foo|}} + 1 +{{else abcdefghijklmnopqrstuvwxyz-abcdefghijklmnopqrstuvwxyz-abcdefghijklmnopqrst param param param as |bar|}} + 2 +{{/abcdefghijklmnopqrstuvwxyz-abcdefghijklmnopqrstuvwxyz-abcdefghijklmnopqrst}} diff --git a/tests/format/handlebars/block-statement/print-width-5/__snapshots__/jsfmt.spec.js.snap b/tests/format/handlebars/block-statement/print-width-5/__snapshots__/jsfmt.spec.js.snap new file mode 100644 index 000000000000..8b868949a482 --- /dev/null +++ b/tests/format/handlebars/block-statement/print-width-5/__snapshots__/jsfmt.spec.js.snap @@ -0,0 +1,81 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`custom-else.hbs - {"printWidth":5} format 1`] = ` +====================================options===================================== +parsers: ["glimmer"] +printWidth: 5 + | printWidth +=====================================input====================================== +{{#when a}} + 1 +{{else when c}} + 2 +{{else}} + 3 +{{/when}} + +{{#when a as |b|}} + {{b}} +{{else when c as |d|}} + {{d}} +{{else}} + 3 +{{/when}} + +=====================================output===================================== +{{#when + a +}} + 1 +{{else when + c +}} + 2 +{{else}} + 3 +{{/when}} + +{{#when + a + as |b| +}} + {{b}} +{{else when + c + as |d| +}} + {{d}} +{{else}} + 3 +{{/when}} +================================================================================ +`; + +exports[`if-else.hbs - {"printWidth":5} format 1`] = ` +====================================options===================================== +parsers: ["glimmer"] +printWidth: 5 + | printWidth +=====================================input====================================== +{{#if a}} + 1 +{{else if b}} + 2 +{{else}} + 3 +{{/if}} + +=====================================output===================================== +{{#if + a +}} + 1 +{{else if + b +}} + 2 +{{else}} + 3 +{{/if}} +================================================================================ +`; diff --git a/tests/format/handlebars/block-statement/print-width-5/custom-else.hbs b/tests/format/handlebars/block-statement/print-width-5/custom-else.hbs new file mode 100644 index 000000000000..5f0e48dea282 --- /dev/null +++ b/tests/format/handlebars/block-statement/print-width-5/custom-else.hbs @@ -0,0 +1,15 @@ +{{#when a}} + 1 +{{else when c}} + 2 +{{else}} + 3 +{{/when}} + +{{#when a as |b|}} + {{b}} +{{else when c as |d|}} + {{d}} +{{else}} + 3 +{{/when}} diff --git a/tests/format/handlebars/block-statement/print-width-5/if-else.hbs b/tests/format/handlebars/block-statement/print-width-5/if-else.hbs new file mode 100644 index 000000000000..bc0ab1884a9e --- /dev/null +++ b/tests/format/handlebars/block-statement/print-width-5/if-else.hbs @@ -0,0 +1,7 @@ +{{#if a}} + 1 +{{else if b}} + 2 +{{else}} + 3 +{{/if}} diff --git a/tests/format/handlebars/block-statement/print-width-5/jsfmt.spec.js b/tests/format/handlebars/block-statement/print-width-5/jsfmt.spec.js new file mode 100644 index 000000000000..63b9732fdf80 --- /dev/null +++ b/tests/format/handlebars/block-statement/print-width-5/jsfmt.spec.js @@ -0,0 +1 @@ +run_spec(__dirname, ["glimmer"], { printWidth: 5 });