From d288a56e004457ec1143ed5df369d38ea1b4169b Mon Sep 17 00:00:00 2001 From: Nicholas Yang Date: Mon, 11 Apr 2022 16:11:09 -0400 Subject: [PATCH 01/10] feature: Added formatting for self-closing JSX element --- .../src/jsx/expressions/tag_expression.rs | 4 ++-- .../src/jsx/tag/self_closing_element.rs | 22 ++++++++++++++++--- 2 files changed, 21 insertions(+), 5 deletions(-) diff --git a/crates/rome_js_formatter/src/jsx/expressions/tag_expression.rs b/crates/rome_js_formatter/src/jsx/expressions/tag_expression.rs index 9a087014556..c85c2778663 100644 --- a/crates/rome_js_formatter/src/jsx/expressions/tag_expression.rs +++ b/crates/rome_js_formatter/src/jsx/expressions/tag_expression.rs @@ -1,9 +1,9 @@ +use crate::formatter_traits::FormatTokenAndNode; use crate::{FormatElement, FormatResult, Formatter, ToFormatElement}; use rome_js_syntax::JsxTagExpression; -use rome_rowan::AstNode; impl ToFormatElement for JsxTagExpression { fn to_format_element(&self, formatter: &Formatter) -> FormatResult { - Ok(formatter.format_verbatim(self.syntax())) + self.tag().format(formatter) } } diff --git a/crates/rome_js_formatter/src/jsx/tag/self_closing_element.rs b/crates/rome_js_formatter/src/jsx/tag/self_closing_element.rs index 007fcaaf756..57c57bd264b 100644 --- a/crates/rome_js_formatter/src/jsx/tag/self_closing_element.rs +++ b/crates/rome_js_formatter/src/jsx/tag/self_closing_element.rs @@ -1,9 +1,25 @@ -use crate::{FormatElement, FormatResult, Formatter, ToFormatElement}; +use crate::formatter_traits::FormatTokenAndNode; +use crate::group_elements; +use crate::{ + format_elements, soft_block_indent, soft_line_break_or_space, FormatElement, FormatResult, + Formatter, ToFormatElement, +}; use rome_js_syntax::JsxSelfClosingElement; -use rome_rowan::AstNode; impl ToFormatElement for JsxSelfClosingElement { fn to_format_element(&self, formatter: &Formatter) -> FormatResult { - Ok(formatter.format_verbatim(self.syntax())) + let mut attributes = Vec::new(); + for attribute in self.attributes() { + attributes.push(attribute.format(formatter)?); + attributes.push(soft_line_break_or_space()); + } + + Ok(format_elements![ + self.l_angle_token().format(formatter)?, + self.name().format(formatter)?, + group_elements(soft_block_indent(concat_elements(attributes))), + self.slash_token().format(formatter)?, + self.r_angle_token().format(formatter)? + ]) } } From 8c9c8a42d2bc1d8357f6c5c33f6718625e12623b Mon Sep 17 00:00:00 2001 From: Nicholas Yang Date: Mon, 21 Mar 2022 17:14:36 -0400 Subject: [PATCH 02/10] test: Added a test for self closing elements --- .../tests/specs/jsx/self_closing.jsx | 28 ++++++ .../tests/specs/jsx/self_closing.jsx.snap | 98 +++++++++++++++++++ .../src/jsx/tag/self_closing_element.rs | 5 +- 3 files changed, 129 insertions(+), 2 deletions(-) create mode 100644 crates/rome_formatter/tests/specs/jsx/self_closing.jsx create mode 100644 crates/rome_formatter/tests/specs/jsx/self_closing.jsx.snap diff --git a/crates/rome_formatter/tests/specs/jsx/self_closing.jsx b/crates/rome_formatter/tests/specs/jsx/self_closing.jsx new file mode 100644 index 00000000000..70408ee698b --- /dev/null +++ b/crates/rome_formatter/tests/specs/jsx/self_closing.jsx @@ -0,0 +1,28 @@ +; + +; + +; +; +; + + { + setCode(evn.target.value); + }} + style={{ fontSize: 12, height: "100vh", fontFamily: + "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace", + }} +/> diff --git a/crates/rome_formatter/tests/specs/jsx/self_closing.jsx.snap b/crates/rome_formatter/tests/specs/jsx/self_closing.jsx.snap new file mode 100644 index 00000000000..d0718de4356 --- /dev/null +++ b/crates/rome_formatter/tests/specs/jsx/self_closing.jsx.snap @@ -0,0 +1,98 @@ +--- +source: crates/rome_formatter/tests/spec_test.rs +assertion_line: 197 +expression: self_closing.jsx + +--- +# Input +; + +; + +; +; +; + + { + setCode(evn.target.value); + }} + style={{ fontSize: 12, height: "100vh", fontFamily: + "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace", + }} +/> + +============================= +# Outputs +## Output 1 +----- +Indent style: Tab +Line width: 80 +----- +; + +; + +; +; +; + + { + setCode(evn.target.value); + }} + style={{ fontSize: 12, height: "100vh", fontFamily: + "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace", + }} +/>; + + +## Unimplemented nodes/tokens + +"Foo " => 1..5 +"Foo " => 11..25 +"LineWidthInput " => 31..46 +"lineWidth={lineWidth} " => 46..68 +"setLineWidth={setLineWidth} " => 68..96 +"IndentStyleSelect " => 101..119 +"indentWidth={indentWidth} " => 119..145 +"setIndentWidth={setIndentWidth} " => 145..177 +"indentStyle={indentStyle} " => 177..203 +"setIndentStyle={setIndentStyle}" => 203..234 +"SourceTypeSelect" => 240..256 +"\n\tisTypeScript={isTypeScript}" => 256..285 +"\n\n\tsetIsTypeScript={setIsTypeScript}" => 285..321 +"\n\n\tisJsx={isJsx}" => 321..337 +"\n\n\tsetIsJsx={setIsJsx}" => 337..359 +"CodeEditor" => 366..376 +"\n\tvalue={code}" => 376..390 +"\n\tlanguage=\"js\"" => 390..405 +"\n\tplaceholder=\"Enter JS here\"" => 405..434 +"\n\tonChange={(evn) => {\n\t\tsetCode(evn.target.value);\n\t}}" => 434..489 +"\n\tstyle={{ fontSize: 12, height: \"100vh\", fontFamily:\n\t\t\t\"ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace\",\n\t}}" => 489..629 + diff --git a/crates/rome_js_formatter/src/jsx/tag/self_closing_element.rs b/crates/rome_js_formatter/src/jsx/tag/self_closing_element.rs index 57c57bd264b..30305326dbf 100644 --- a/crates/rome_js_formatter/src/jsx/tag/self_closing_element.rs +++ b/crates/rome_js_formatter/src/jsx/tag/self_closing_element.rs @@ -1,8 +1,8 @@ use crate::formatter_traits::FormatTokenAndNode; use crate::group_elements; use crate::{ - format_elements, soft_block_indent, soft_line_break_or_space, FormatElement, FormatResult, - Formatter, ToFormatElement, + format_elements, soft_block_indent, soft_line_break_or_space, space_token, FormatElement, + FormatResult, Formatter, ToFormatElement, }; use rome_js_syntax::JsxSelfClosingElement; @@ -17,6 +17,7 @@ impl ToFormatElement for JsxSelfClosingElement { Ok(format_elements![ self.l_angle_token().format(formatter)?, self.name().format(formatter)?, + space_token(), group_elements(soft_block_indent(concat_elements(attributes))), self.slash_token().format(formatter)?, self.r_angle_token().format(formatter)? From d03c3676fa923048a8087b14c19ce1e5d88ce3e9 Mon Sep 17 00:00:00 2001 From: Nicholas Yang Date: Tue, 5 Apr 2022 12:48:53 -0400 Subject: [PATCH 03/10] fix: Removed attributes from test --- .../tests/specs/jsx/self_closing.jsx | 28 --- .../tests/specs/jsx/self_closing.jsx.snap | 98 --------- .../tests/specs/jsx/self_closing.jsx | 15 ++ .../binary-expressions/inline-jsx.js.snap.new | 36 ++++ .../prettier/js/comments/issues.js.snap.new | 162 ++++++++++++++ .../prettier/js/ignore/ignore-2.js.snap.new | 55 +++++ .../break-parent.js.snap.new | 64 ++++++ .../js/strings/template-literals.js.snap.new | 198 ++++++++++++++++++ 8 files changed, 530 insertions(+), 126 deletions(-) delete mode 100644 crates/rome_formatter/tests/specs/jsx/self_closing.jsx delete mode 100644 crates/rome_formatter/tests/specs/jsx/self_closing.jsx.snap create mode 100644 crates/rome_js_formatter/tests/specs/jsx/self_closing.jsx create mode 100644 crates/rome_js_formatter/tests/specs/prettier/js/binary-expressions/inline-jsx.js.snap.new create mode 100644 crates/rome_js_formatter/tests/specs/prettier/js/comments/issues.js.snap.new create mode 100644 crates/rome_js_formatter/tests/specs/prettier/js/ignore/ignore-2.js.snap.new create mode 100644 crates/rome_js_formatter/tests/specs/prettier/js/last-argument-expansion/break-parent.js.snap.new create mode 100644 crates/rome_js_formatter/tests/specs/prettier/js/strings/template-literals.js.snap.new diff --git a/crates/rome_formatter/tests/specs/jsx/self_closing.jsx b/crates/rome_formatter/tests/specs/jsx/self_closing.jsx deleted file mode 100644 index 70408ee698b..00000000000 --- a/crates/rome_formatter/tests/specs/jsx/self_closing.jsx +++ /dev/null @@ -1,28 +0,0 @@ -; - -; - -; -; -; - - { - setCode(evn.target.value); - }} - style={{ fontSize: 12, height: "100vh", fontFamily: - "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace", - }} -/> diff --git a/crates/rome_formatter/tests/specs/jsx/self_closing.jsx.snap b/crates/rome_formatter/tests/specs/jsx/self_closing.jsx.snap deleted file mode 100644 index d0718de4356..00000000000 --- a/crates/rome_formatter/tests/specs/jsx/self_closing.jsx.snap +++ /dev/null @@ -1,98 +0,0 @@ ---- -source: crates/rome_formatter/tests/spec_test.rs -assertion_line: 197 -expression: self_closing.jsx - ---- -# Input -; - -; - -; -; -; - - { - setCode(evn.target.value); - }} - style={{ fontSize: 12, height: "100vh", fontFamily: - "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace", - }} -/> - -============================= -# Outputs -## Output 1 ------ -Indent style: Tab -Line width: 80 ------ -; - -; - -; -; -; - - { - setCode(evn.target.value); - }} - style={{ fontSize: 12, height: "100vh", fontFamily: - "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace", - }} -/>; - - -## Unimplemented nodes/tokens - -"Foo " => 1..5 -"Foo " => 11..25 -"LineWidthInput " => 31..46 -"lineWidth={lineWidth} " => 46..68 -"setLineWidth={setLineWidth} " => 68..96 -"IndentStyleSelect " => 101..119 -"indentWidth={indentWidth} " => 119..145 -"setIndentWidth={setIndentWidth} " => 145..177 -"indentStyle={indentStyle} " => 177..203 -"setIndentStyle={setIndentStyle}" => 203..234 -"SourceTypeSelect" => 240..256 -"\n\tisTypeScript={isTypeScript}" => 256..285 -"\n\n\tsetIsTypeScript={setIsTypeScript}" => 285..321 -"\n\n\tisJsx={isJsx}" => 321..337 -"\n\n\tsetIsJsx={setIsJsx}" => 337..359 -"CodeEditor" => 366..376 -"\n\tvalue={code}" => 376..390 -"\n\tlanguage=\"js\"" => 390..405 -"\n\tplaceholder=\"Enter JS here\"" => 405..434 -"\n\tonChange={(evn) => {\n\t\tsetCode(evn.target.value);\n\t}}" => 434..489 -"\n\tstyle={{ fontSize: 12, height: \"100vh\", fontFamily:\n\t\t\t\"ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace\",\n\t}}" => 489..629 - diff --git a/crates/rome_js_formatter/tests/specs/jsx/self_closing.jsx b/crates/rome_js_formatter/tests/specs/jsx/self_closing.jsx new file mode 100644 index 00000000000..c4e3bd8efe1 --- /dev/null +++ b/crates/rome_js_formatter/tests/specs/jsx/self_closing.jsx @@ -0,0 +1,15 @@ +; + +; + +; +; +; + + diff --git a/crates/rome_js_formatter/tests/specs/prettier/js/binary-expressions/inline-jsx.js.snap.new b/crates/rome_js_formatter/tests/specs/prettier/js/binary-expressions/inline-jsx.js.snap.new new file mode 100644 index 00000000000..1e5946d738c --- /dev/null +++ b/crates/rome_js_formatter/tests/specs/prettier/js/binary-expressions/inline-jsx.js.snap.new @@ -0,0 +1,36 @@ +--- +source: crates/rome_js_formatter/tests/prettier_tests.rs +assertion_line: 153 +expression: inline-jsx.js + +--- +# Input +```js +const user = renderedUser ||
; + +const user2 = renderedUser || shouldRenderUser &&
; + +const avatar = hasAvatar && ; + +const avatar2 = (hasAvatar || showPlaceholder) && ; + +``` + +# Output +```js +const user = renderedUser ||
; + +const user2 = renderedUser || ( + shouldRenderUser &&
+); + +const avatar = hasAvatar && ; + +const avatar2 = (hasAvatar || showPlaceholder) && ; + +``` + + diff --git a/crates/rome_js_formatter/tests/specs/prettier/js/comments/issues.js.snap.new b/crates/rome_js_formatter/tests/specs/prettier/js/comments/issues.js.snap.new new file mode 100644 index 00000000000..6ba41a9b4e6 --- /dev/null +++ b/crates/rome_js_formatter/tests/specs/prettier/js/comments/issues.js.snap.new @@ -0,0 +1,162 @@ +--- +source: crates/rome_js_formatter/tests/prettier_tests.rs +assertion_line: 153 +expression: issues.js + +--- +# Input +```js +// Does not need to break as it fits in 80 columns +this.call(a, /* comment */ b); + +// Comments should either stay at the end of the line or always before, but +// not one before and one after. +throw new ProcessSystemError({ + code: acc.error.code, // Alias of errno + originalError: acc.error, // Just in case. +}); + +// Missing one level of indentation because of the comment +const rootEpic = (actions, store) => ( + combineEpics(...epics)(actions, store) + // Log errors and continue. + .catch((err, stream) => { + getLogger().error(err); + return stream; + }) +); + +// optional trailing comma gets moved all the way to the beginning +const regex = new RegExp( + '^\\s*' + // beginning of the line + 'name\\s*=\\s*' + // name = + '[\'"]' + // opening quotation mark + escapeStringRegExp(target.name) + // target name + '[\'"]' + // closing quotation mark + ',?$', // optional trailing comma +); + +// The comment is moved and doesn't trigger the eslint rule anymore +import path from 'path'; // eslint-disable-line nuclide-internal/prefer-nuclide-uri + +// Comments disappear in-between MemberExpressions +Observable.of(process) + // Don't complete until we say so! + .merge(Observable.never()) + // Get the errors. + .takeUntil(throwOnError ? errors.flatMap(Observable.throw) : errors) + .takeUntil(exit); + +// Comments disappear inside of JSX +
+ {/* Some comment */} +
; + +// Comments in JSX tag are placed in a non optimal way +
; + +// Comments disappear in empty blocks +if (1) { + // Comment +} + +// Comments trigger invalid JavaScript in-between else if +if (1) { +} +// Comment +else { + +} + +// The comment makes the line break in a weird way +const result = asyncExecute('non_existing_command', /* args */ []); + +// The closing paren is printed on the same line as the comment +foo({} + // Hi +); + +``` + +# Output +```js +// Does not need to break as it fits in 80 columns +this.call(a, /* comment */ b); + +// Comments should either stay at the end of the line or always before, but +// not one before and one after. +throw new ProcessSystemError({ + code: acc.error.code, // Alias of errno + originalError: acc.error, // Just in case. +}); + +// Missing one level of indentation because of the comment +const rootEpic = (actions, store) => ( + combineEpics(...epics)(actions, store) + // Log errors and continue. + .catch( + (err, stream) => { + getLogger().error(err); + return stream; + }, + ) +); + +// optional trailing comma gets moved all the way to the beginning +const regex = new RegExp( + "^\\s*" + // beginning of the line + "name\\s*=\\s*" + // name = + '[\'"]' + // opening quotation mark + escapeStringRegExp(target.name) + // target name + '[\'"]' + // closing quotation mark + ",?$", // optional trailing comma +); + +// The comment is moved and doesn't trigger the eslint rule anymore +import path from "path"; // eslint-disable-line nuclide-internal/prefer-nuclide-uri + +// Comments disappear in-between MemberExpressions +Observable + .of(process) + // Don't complete until we say so! + .merge(Observable.never()) + // Get the errors. + .takeUntil(throwOnError ? errors.flatMap(Observable.throw) : errors) + .takeUntil(exit); + +// Comments disappear inside of JSX +
+ {/* Some comment */} +
; + +// Comments in JSX tag are placed in a non optimal way +
; + +// Comments disappear in empty blocks +if (1) { + // Comment +} + +// Comments trigger invalid JavaScript in-between else if +if (1) { +} +// Comment +else { +} + +// The comment makes the line break in a weird way +const result = asyncExecute("non_existing_command", /* args */ []); + +// The closing paren is printed on the same line as the comment +foo( + {}, + // Hi +); + +``` + + diff --git a/crates/rome_js_formatter/tests/specs/prettier/js/ignore/ignore-2.js.snap.new b/crates/rome_js_formatter/tests/specs/prettier/js/ignore/ignore-2.js.snap.new new file mode 100644 index 00000000000..926d69ea614 --- /dev/null +++ b/crates/rome_js_formatter/tests/specs/prettier/js/ignore/ignore-2.js.snap.new @@ -0,0 +1,55 @@ +--- +source: crates/rome_js_formatter/tests/prettier_tests.rs +assertion_line: 153 +expression: ignore-2.js + +--- +# Input +```js +// #8736 + +function HelloWorld() { + return ( +
+ test +
+ ); +} + +a =
+a =
+a =
+a =
+a =
+ +``` + +# Output +```js +// #8736 + +function HelloWorld() { + return ( +
+ test +
+ ); +} + +a =
; +a =
; +a =
; +a =
; +a =
; + +``` + + diff --git a/crates/rome_js_formatter/tests/specs/prettier/js/last-argument-expansion/break-parent.js.snap.new b/crates/rome_js_formatter/tests/specs/prettier/js/last-argument-expansion/break-parent.js.snap.new new file mode 100644 index 00000000000..01db462ced4 --- /dev/null +++ b/crates/rome_js_formatter/tests/specs/prettier/js/last-argument-expansion/break-parent.js.snap.new @@ -0,0 +1,64 @@ +--- +source: crates/rome_js_formatter/tests/prettier_tests.rs +assertion_line: 153 +expression: break-parent.js + +--- +# Input +```js +({ + processors: [ + require("autoprefixer", { + browsers: ["> 1%", "last 2 versions", "ie >= 11", "Firefox ESR"] + }), + require("postcss-url")({ + url: url => + url.startsWith("/") || /^[a-z]+:/.test(url) ? url : `/static/${url}` + }) + ] +}); + +true + ? test({ + a: 1 + }) + :
; + +``` + +# Output +```js +({ + processors: [ + require( + "autoprefixer", + { browsers: ["> 1%", "last 2 versions", "ie >= 11", "Firefox ESR"] }, + ), + require("postcss-url")({ + url: (url) => + url.startsWith("/") || /^[a-z]+:/.test(url) ? url : `/static/${url}`, + }), + ], +}); + +true ? test({ a: 1 }) :
; + +``` + + diff --git a/crates/rome_js_formatter/tests/specs/prettier/js/strings/template-literals.js.snap.new b/crates/rome_js_formatter/tests/specs/prettier/js/strings/template-literals.js.snap.new new file mode 100644 index 00000000000..e2f3aca88c2 --- /dev/null +++ b/crates/rome_js_formatter/tests/specs/prettier/js/strings/template-literals.js.snap.new @@ -0,0 +1,198 @@ +--- +source: crates/rome_js_formatter/tests/prettier_tests.rs +assertion_line: 153 +expression: template-literals.js + +--- +# Input +```js +foo(`a long string ${ 1 + 2 + 3 + 2 + 3 + 2 + 3 + 2 + 3 + 2 + 3 + 2 + 3 + 2 + 3 + 2 + 3 } with expr`); + +const x = `a long string ${ 1 + 2 + 3 + 2 + 3 + 2 + 3 + 2 + 3 + 2 + 3 + 2 + ( function() {return 3 })() + 3 + 2 + 3 + 2 + 3 } with expr`; + +foo(`a long string ${ 1 + 2 + 3 + 2 + 3 + 2 + 3 + 2 + 3 + 2 + 3 + 2 + ( function() { + const x = 5; + + return x; + })() + 3 + 2 + 3 + 2 + 3 } with expr`); + +pipe.write( + `\n ${chalk.dim(`\u203A and ${more} more ${more} more ${more} more ${more}`)}`, +); + +// https://github.com/prettier/prettier/issues/1662#issue-230406820 +const content = ` +const env = ${ JSON.stringify({ + assetsRootUrl: env.assetsRootUrl, + env: env.env, + role: "client", + adsfafa: "sdfsdff", + asdfasff: "wefwefw", + fefef: "sf sdfs fdsfdsf s dfsfds" +}, null, "\t") }); +`; + +// https://github.com/prettier/prettier/issues/821#issue-210557749 +f(`${{ + a: 4, + b: 9, +}}`); + +// https://github.com/prettier/prettier/issues/1183#issue-220863505 +const makeBody = (store, assets, html) => + `${ + ReactDOMServer.renderToStaticMarkup( + + ) + }` + +// https://github.com/prettier/prettier/issues/1626#issue-229655106 +const Bar = styled.div` + color: ${props => (props.highlight.length > 0 ? palette(['text', 'dark', 'tertiary'])(props) : palette(['text', 'dark', 'primary'])(props))} !important; +` + +``` + +# Output +```js +foo( + `a long string ${ + 1 + + 2 + + 3 + + 2 + + 3 + + 2 + + 3 + + 2 + + 3 + + 2 + + 3 + + 2 + + 3 + + 2 + + 3 + + 2 + + 3 + } with expr`, +); + +const x = `a long string ${ + 1 + + 2 + + 3 + + 2 + + 3 + + 2 + + 3 + + 2 + + 3 + + 2 + + 3 + + 2 + + (function () { + return 3; + })() + + 3 + + 2 + + 3 + + 2 + + 3 +} with expr`; + +foo( + `a long string ${ + 1 + + 2 + + 3 + + 2 + + 3 + + 2 + + 3 + + 2 + + 3 + + 2 + + 3 + + 2 + + (function () { + const x = 5; + + return x; + })() + + 3 + + 2 + + 3 + + 2 + + 3 + } with expr`, +); + +pipe.write( + `\n ${chalk.dim(`\u203A and ${more} more ${more} more ${more} more ${more}`)}`, +); + +// https://github.com/prettier/prettier/issues/1662#issue-230406820 +const content = ` +const env = ${JSON.stringify( + { + assetsRootUrl: env.assetsRootUrl, + env: env.env, + role: "client", + adsfafa: "sdfsdff", + asdfasff: "wefwefw", + fefef: "sf sdfs fdsfdsf s dfsfds", + }, + null, + "\t", +)}); +`; + +// https://github.com/prettier/prettier/issues/821#issue-210557749 +f(`${{ a: 4, b: 9 }}`); + +// https://github.com/prettier/prettier/issues/1183#issue-220863505 +const makeBody = (store, assets, html) => + `${ReactDOMServer.renderToStaticMarkup( + , + )}`; + +// https://github.com/prettier/prettier/issues/1626#issue-229655106 +const Bar = styled.div` + color: ${ + (props) => ( + props.highlight.length > 0 ? palette(["text", "dark", "tertiary"])(props) : palette([ + "text", "dark", "primary", + ])(props) + ) +} !important; +`; + +``` + + From 57df30b5909cb6c4fe305829ce5f8ded79a83361 Mon Sep 17 00:00:00 2001 From: Nicholas Yang Date: Tue, 5 Apr 2022 14:41:41 -0400 Subject: [PATCH 04/10] Updating prettier tests --- .../specs/prettier/js/big-int/literal.js.snap | 2 +- .../js/binary-expressions/inline-jsx.js.snap | 7 +- .../binary-expressions/inline-jsx.js.snap.new | 36 ---- .../specs/prettier/js/comments/issues.js.snap | 4 +- .../prettier/js/comments/issues.js.snap.new | 162 -------------- .../specs/prettier/js/ignore/ignore-2.js.snap | 12 +- .../prettier/js/ignore/ignore-2.js.snap.new | 55 ----- .../break-parent.js.snap | 18 +- .../break-parent.js.snap.new | 64 ------ .../js/strings/template-literals.js.snap | 16 +- .../js/strings/template-literals.js.snap.new | 198 ------------------ 11 files changed, 32 insertions(+), 542 deletions(-) delete mode 100644 crates/rome_js_formatter/tests/specs/prettier/js/binary-expressions/inline-jsx.js.snap.new delete mode 100644 crates/rome_js_formatter/tests/specs/prettier/js/comments/issues.js.snap.new delete mode 100644 crates/rome_js_formatter/tests/specs/prettier/js/ignore/ignore-2.js.snap.new delete mode 100644 crates/rome_js_formatter/tests/specs/prettier/js/last-argument-expansion/break-parent.js.snap.new delete mode 100644 crates/rome_js_formatter/tests/specs/prettier/js/strings/template-literals.js.snap.new diff --git a/crates/rome_js_formatter/tests/specs/prettier/js/big-int/literal.js.snap b/crates/rome_js_formatter/tests/specs/prettier/js/big-int/literal.js.snap index a0323dec7c1..6254b492e90 100644 --- a/crates/rome_js_formatter/tests/specs/prettier/js/big-int/literal.js.snap +++ b/crates/rome_js_formatter/tests/specs/prettier/js/big-int/literal.js.snap @@ -1,4 +1,4 @@ ---- + source: crates/rome_js_formatter/tests/prettier_tests.rs assertion_line: 57 expression: literal.js diff --git a/crates/rome_js_formatter/tests/specs/prettier/js/binary-expressions/inline-jsx.js.snap b/crates/rome_js_formatter/tests/specs/prettier/js/binary-expressions/inline-jsx.js.snap index 25fdd5cd1ef..1e5946d738c 100644 --- a/crates/rome_js_formatter/tests/specs/prettier/js/binary-expressions/inline-jsx.js.snap +++ b/crates/rome_js_formatter/tests/specs/prettier/js/binary-expressions/inline-jsx.js.snap @@ -1,6 +1,6 @@ --- source: crates/rome_js_formatter/tests/prettier_tests.rs -assertion_line: 151 +assertion_line: 153 expression: inline-jsx.js --- @@ -26,7 +26,10 @@ const user2 = renderedUser || ( const avatar = hasAvatar && ; -const avatar2 = (hasAvatar || showPlaceholder) && ; +const avatar2 = (hasAvatar || showPlaceholder) && ; ``` diff --git a/crates/rome_js_formatter/tests/specs/prettier/js/binary-expressions/inline-jsx.js.snap.new b/crates/rome_js_formatter/tests/specs/prettier/js/binary-expressions/inline-jsx.js.snap.new deleted file mode 100644 index 1e5946d738c..00000000000 --- a/crates/rome_js_formatter/tests/specs/prettier/js/binary-expressions/inline-jsx.js.snap.new +++ /dev/null @@ -1,36 +0,0 @@ ---- -source: crates/rome_js_formatter/tests/prettier_tests.rs -assertion_line: 153 -expression: inline-jsx.js - ---- -# Input -```js -const user = renderedUser ||
; - -const user2 = renderedUser || shouldRenderUser &&
; - -const avatar = hasAvatar && ; - -const avatar2 = (hasAvatar || showPlaceholder) && ; - -``` - -# Output -```js -const user = renderedUser ||
; - -const user2 = renderedUser || ( - shouldRenderUser &&
-); - -const avatar = hasAvatar && ; - -const avatar2 = (hasAvatar || showPlaceholder) && ; - -``` - - diff --git a/crates/rome_js_formatter/tests/specs/prettier/js/comments/issues.js.snap b/crates/rome_js_formatter/tests/specs/prettier/js/comments/issues.js.snap index 7e5ab957267..6ba41a9b4e6 100644 --- a/crates/rome_js_formatter/tests/specs/prettier/js/comments/issues.js.snap +++ b/crates/rome_js_formatter/tests/specs/prettier/js/comments/issues.js.snap @@ -1,6 +1,8 @@ --- source: crates/rome_js_formatter/tests/prettier_tests.rs +assertion_line: 153 expression: issues.js + --- # Input ```js @@ -131,7 +133,7 @@ Observable // Comments in JSX tag are placed in a non optimal way
; // Comments disappear in empty blocks diff --git a/crates/rome_js_formatter/tests/specs/prettier/js/comments/issues.js.snap.new b/crates/rome_js_formatter/tests/specs/prettier/js/comments/issues.js.snap.new deleted file mode 100644 index 6ba41a9b4e6..00000000000 --- a/crates/rome_js_formatter/tests/specs/prettier/js/comments/issues.js.snap.new +++ /dev/null @@ -1,162 +0,0 @@ ---- -source: crates/rome_js_formatter/tests/prettier_tests.rs -assertion_line: 153 -expression: issues.js - ---- -# Input -```js -// Does not need to break as it fits in 80 columns -this.call(a, /* comment */ b); - -// Comments should either stay at the end of the line or always before, but -// not one before and one after. -throw new ProcessSystemError({ - code: acc.error.code, // Alias of errno - originalError: acc.error, // Just in case. -}); - -// Missing one level of indentation because of the comment -const rootEpic = (actions, store) => ( - combineEpics(...epics)(actions, store) - // Log errors and continue. - .catch((err, stream) => { - getLogger().error(err); - return stream; - }) -); - -// optional trailing comma gets moved all the way to the beginning -const regex = new RegExp( - '^\\s*' + // beginning of the line - 'name\\s*=\\s*' + // name = - '[\'"]' + // opening quotation mark - escapeStringRegExp(target.name) + // target name - '[\'"]' + // closing quotation mark - ',?$', // optional trailing comma -); - -// The comment is moved and doesn't trigger the eslint rule anymore -import path from 'path'; // eslint-disable-line nuclide-internal/prefer-nuclide-uri - -// Comments disappear in-between MemberExpressions -Observable.of(process) - // Don't complete until we say so! - .merge(Observable.never()) - // Get the errors. - .takeUntil(throwOnError ? errors.flatMap(Observable.throw) : errors) - .takeUntil(exit); - -// Comments disappear inside of JSX -
- {/* Some comment */} -
; - -// Comments in JSX tag are placed in a non optimal way -
; - -// Comments disappear in empty blocks -if (1) { - // Comment -} - -// Comments trigger invalid JavaScript in-between else if -if (1) { -} -// Comment -else { - -} - -// The comment makes the line break in a weird way -const result = asyncExecute('non_existing_command', /* args */ []); - -// The closing paren is printed on the same line as the comment -foo({} - // Hi -); - -``` - -# Output -```js -// Does not need to break as it fits in 80 columns -this.call(a, /* comment */ b); - -// Comments should either stay at the end of the line or always before, but -// not one before and one after. -throw new ProcessSystemError({ - code: acc.error.code, // Alias of errno - originalError: acc.error, // Just in case. -}); - -// Missing one level of indentation because of the comment -const rootEpic = (actions, store) => ( - combineEpics(...epics)(actions, store) - // Log errors and continue. - .catch( - (err, stream) => { - getLogger().error(err); - return stream; - }, - ) -); - -// optional trailing comma gets moved all the way to the beginning -const regex = new RegExp( - "^\\s*" + // beginning of the line - "name\\s*=\\s*" + // name = - '[\'"]' + // opening quotation mark - escapeStringRegExp(target.name) + // target name - '[\'"]' + // closing quotation mark - ",?$", // optional trailing comma -); - -// The comment is moved and doesn't trigger the eslint rule anymore -import path from "path"; // eslint-disable-line nuclide-internal/prefer-nuclide-uri - -// Comments disappear in-between MemberExpressions -Observable - .of(process) - // Don't complete until we say so! - .merge(Observable.never()) - // Get the errors. - .takeUntil(throwOnError ? errors.flatMap(Observable.throw) : errors) - .takeUntil(exit); - -// Comments disappear inside of JSX -
- {/* Some comment */} -
; - -// Comments in JSX tag are placed in a non optimal way -
; - -// Comments disappear in empty blocks -if (1) { - // Comment -} - -// Comments trigger invalid JavaScript in-between else if -if (1) { -} -// Comment -else { -} - -// The comment makes the line break in a weird way -const result = asyncExecute("non_existing_command", /* args */ []); - -// The closing paren is printed on the same line as the comment -foo( - {}, - // Hi -); - -``` - - diff --git a/crates/rome_js_formatter/tests/specs/prettier/js/ignore/ignore-2.js.snap b/crates/rome_js_formatter/tests/specs/prettier/js/ignore/ignore-2.js.snap index c5dd8f2550e..926d69ea614 100644 --- a/crates/rome_js_formatter/tests/specs/prettier/js/ignore/ignore-2.js.snap +++ b/crates/rome_js_formatter/tests/specs/prettier/js/ignore/ignore-2.js.snap @@ -1,6 +1,6 @@ --- source: crates/rome_js_formatter/tests/prettier_tests.rs -assertion_line: 151 +assertion_line: 153 expression: ignore-2.js --- @@ -44,11 +44,11 @@ function HelloWorld() { ); } -a =
; -a =
; -a =
; -a =
; -a =
; +a =
; +a =
; +a =
; +a =
; +a =
; ``` diff --git a/crates/rome_js_formatter/tests/specs/prettier/js/ignore/ignore-2.js.snap.new b/crates/rome_js_formatter/tests/specs/prettier/js/ignore/ignore-2.js.snap.new deleted file mode 100644 index 926d69ea614..00000000000 --- a/crates/rome_js_formatter/tests/specs/prettier/js/ignore/ignore-2.js.snap.new +++ /dev/null @@ -1,55 +0,0 @@ ---- -source: crates/rome_js_formatter/tests/prettier_tests.rs -assertion_line: 153 -expression: ignore-2.js - ---- -# Input -```js -// #8736 - -function HelloWorld() { - return ( -
- test -
- ); -} - -a =
-a =
-a =
-a =
-a =
- -``` - -# Output -```js -// #8736 - -function HelloWorld() { - return ( -
- test -
- ); -} - -a =
; -a =
; -a =
; -a =
; -a =
; - -``` - - diff --git a/crates/rome_js_formatter/tests/specs/prettier/js/last-argument-expansion/break-parent.js.snap b/crates/rome_js_formatter/tests/specs/prettier/js/last-argument-expansion/break-parent.js.snap index bd13a4cdc79..01db462ced4 100644 --- a/crates/rome_js_formatter/tests/specs/prettier/js/last-argument-expansion/break-parent.js.snap +++ b/crates/rome_js_formatter/tests/specs/prettier/js/last-argument-expansion/break-parent.js.snap @@ -1,6 +1,6 @@ --- source: crates/rome_js_formatter/tests/prettier_tests.rs -assertion_line: 149 +assertion_line: 153 expression: break-parent.js --- @@ -50,14 +50,14 @@ true }); true ? test({ a: 1 }) :
; + a={123412342314} + b={123412341234} + c={123412341234} + d={123412341234} + e={123412341234} + f={123412341234} + g={123412341234} +/>; ``` diff --git a/crates/rome_js_formatter/tests/specs/prettier/js/last-argument-expansion/break-parent.js.snap.new b/crates/rome_js_formatter/tests/specs/prettier/js/last-argument-expansion/break-parent.js.snap.new deleted file mode 100644 index 01db462ced4..00000000000 --- a/crates/rome_js_formatter/tests/specs/prettier/js/last-argument-expansion/break-parent.js.snap.new +++ /dev/null @@ -1,64 +0,0 @@ ---- -source: crates/rome_js_formatter/tests/prettier_tests.rs -assertion_line: 153 -expression: break-parent.js - ---- -# Input -```js -({ - processors: [ - require("autoprefixer", { - browsers: ["> 1%", "last 2 versions", "ie >= 11", "Firefox ESR"] - }), - require("postcss-url")({ - url: url => - url.startsWith("/") || /^[a-z]+:/.test(url) ? url : `/static/${url}` - }) - ] -}); - -true - ? test({ - a: 1 - }) - :
; - -``` - -# Output -```js -({ - processors: [ - require( - "autoprefixer", - { browsers: ["> 1%", "last 2 versions", "ie >= 11", "Firefox ESR"] }, - ), - require("postcss-url")({ - url: (url) => - url.startsWith("/") || /^[a-z]+:/.test(url) ? url : `/static/${url}`, - }), - ], -}); - -true ? test({ a: 1 }) :
; - -``` - - diff --git a/crates/rome_js_formatter/tests/specs/prettier/js/strings/template-literals.js.snap b/crates/rome_js_formatter/tests/specs/prettier/js/strings/template-literals.js.snap index 54b23cad9e6..e2f3aca88c2 100644 --- a/crates/rome_js_formatter/tests/specs/prettier/js/strings/template-literals.js.snap +++ b/crates/rome_js_formatter/tests/specs/prettier/js/strings/template-literals.js.snap @@ -1,6 +1,6 @@ --- source: crates/rome_js_formatter/tests/prettier_tests.rs -assertion_line: 149 +assertion_line: 153 expression: template-literals.js --- @@ -167,19 +167,19 @@ f(`${{ a: 4, b: 9 }}`); const makeBody = (store, assets, html) => `${ReactDOMServer.renderToStaticMarkup( , + />, )}`; // https://github.com/prettier/prettier/issues/1626#issue-229655106 diff --git a/crates/rome_js_formatter/tests/specs/prettier/js/strings/template-literals.js.snap.new b/crates/rome_js_formatter/tests/specs/prettier/js/strings/template-literals.js.snap.new deleted file mode 100644 index e2f3aca88c2..00000000000 --- a/crates/rome_js_formatter/tests/specs/prettier/js/strings/template-literals.js.snap.new +++ /dev/null @@ -1,198 +0,0 @@ ---- -source: crates/rome_js_formatter/tests/prettier_tests.rs -assertion_line: 153 -expression: template-literals.js - ---- -# Input -```js -foo(`a long string ${ 1 + 2 + 3 + 2 + 3 + 2 + 3 + 2 + 3 + 2 + 3 + 2 + 3 + 2 + 3 + 2 + 3 } with expr`); - -const x = `a long string ${ 1 + 2 + 3 + 2 + 3 + 2 + 3 + 2 + 3 + 2 + 3 + 2 + ( function() {return 3 })() + 3 + 2 + 3 + 2 + 3 } with expr`; - -foo(`a long string ${ 1 + 2 + 3 + 2 + 3 + 2 + 3 + 2 + 3 + 2 + 3 + 2 + ( function() { - const x = 5; - - return x; - })() + 3 + 2 + 3 + 2 + 3 } with expr`); - -pipe.write( - `\n ${chalk.dim(`\u203A and ${more} more ${more} more ${more} more ${more}`)}`, -); - -// https://github.com/prettier/prettier/issues/1662#issue-230406820 -const content = ` -const env = ${ JSON.stringify({ - assetsRootUrl: env.assetsRootUrl, - env: env.env, - role: "client", - adsfafa: "sdfsdff", - asdfasff: "wefwefw", - fefef: "sf sdfs fdsfdsf s dfsfds" -}, null, "\t") }); -`; - -// https://github.com/prettier/prettier/issues/821#issue-210557749 -f(`${{ - a: 4, - b: 9, -}}`); - -// https://github.com/prettier/prettier/issues/1183#issue-220863505 -const makeBody = (store, assets, html) => - `${ - ReactDOMServer.renderToStaticMarkup( - - ) - }` - -// https://github.com/prettier/prettier/issues/1626#issue-229655106 -const Bar = styled.div` - color: ${props => (props.highlight.length > 0 ? palette(['text', 'dark', 'tertiary'])(props) : palette(['text', 'dark', 'primary'])(props))} !important; -` - -``` - -# Output -```js -foo( - `a long string ${ - 1 + - 2 + - 3 + - 2 + - 3 + - 2 + - 3 + - 2 + - 3 + - 2 + - 3 + - 2 + - 3 + - 2 + - 3 + - 2 + - 3 - } with expr`, -); - -const x = `a long string ${ - 1 + - 2 + - 3 + - 2 + - 3 + - 2 + - 3 + - 2 + - 3 + - 2 + - 3 + - 2 + - (function () { - return 3; - })() + - 3 + - 2 + - 3 + - 2 + - 3 -} with expr`; - -foo( - `a long string ${ - 1 + - 2 + - 3 + - 2 + - 3 + - 2 + - 3 + - 2 + - 3 + - 2 + - 3 + - 2 + - (function () { - const x = 5; - - return x; - })() + - 3 + - 2 + - 3 + - 2 + - 3 - } with expr`, -); - -pipe.write( - `\n ${chalk.dim(`\u203A and ${more} more ${more} more ${more} more ${more}`)}`, -); - -// https://github.com/prettier/prettier/issues/1662#issue-230406820 -const content = ` -const env = ${JSON.stringify( - { - assetsRootUrl: env.assetsRootUrl, - env: env.env, - role: "client", - adsfafa: "sdfsdff", - asdfasff: "wefwefw", - fefef: "sf sdfs fdsfdsf s dfsfds", - }, - null, - "\t", -)}); -`; - -// https://github.com/prettier/prettier/issues/821#issue-210557749 -f(`${{ a: 4, b: 9 }}`); - -// https://github.com/prettier/prettier/issues/1183#issue-220863505 -const makeBody = (store, assets, html) => - `${ReactDOMServer.renderToStaticMarkup( - , - )}`; - -// https://github.com/prettier/prettier/issues/1626#issue-229655106 -const Bar = styled.div` - color: ${ - (props) => ( - props.highlight.length > 0 ? palette(["text", "dark", "tertiary"])(props) : palette([ - "text", "dark", "primary", - ])(props) - ) -} !important; -`; - -``` - - From d26f850626452f745ebfb110145fc346072533ab Mon Sep 17 00:00:00 2001 From: Nicholas Yang Date: Tue, 5 Apr 2022 16:25:31 -0400 Subject: [PATCH 05/10] fix: fixing test --- .../tests/specs/prettier/js/big-int/literal.js.snap | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/crates/rome_js_formatter/tests/specs/prettier/js/big-int/literal.js.snap b/crates/rome_js_formatter/tests/specs/prettier/js/big-int/literal.js.snap index 6254b492e90..3a4d3a503a0 100644 --- a/crates/rome_js_formatter/tests/specs/prettier/js/big-int/literal.js.snap +++ b/crates/rome_js_formatter/tests/specs/prettier/js/big-int/literal.js.snap @@ -1,6 +1,6 @@ - +--- source: crates/rome_js_formatter/tests/prettier_tests.rs -assertion_line: 57 +assertion_line: 153 expression: literal.js --- From b1e4f0986fa661dd09d21f2ed7cb13320e861d9f Mon Sep 17 00:00:00 2001 From: Nicholas Yang Date: Tue, 5 Apr 2022 16:40:09 -0400 Subject: [PATCH 06/10] feature: Added formatting for type argument in self closing element --- .../src/jsx/tag/self_closing_element.rs | 8 +++ .../tests/specs/jsx/self_closing.jsx.snap | 50 +++++++++++++++++++ 2 files changed, 58 insertions(+) create mode 100644 crates/rome_js_formatter/tests/specs/jsx/self_closing.jsx.snap diff --git a/crates/rome_js_formatter/src/jsx/tag/self_closing_element.rs b/crates/rome_js_formatter/src/jsx/tag/self_closing_element.rs index 30305326dbf..726f3241657 100644 --- a/crates/rome_js_formatter/src/jsx/tag/self_closing_element.rs +++ b/crates/rome_js_formatter/src/jsx/tag/self_closing_element.rs @@ -4,6 +4,7 @@ use crate::{ format_elements, soft_block_indent, soft_line_break_or_space, space_token, FormatElement, FormatResult, Formatter, ToFormatElement, }; +use rome_formatter::empty_element; use rome_js_syntax::JsxSelfClosingElement; impl ToFormatElement for JsxSelfClosingElement { @@ -14,9 +15,16 @@ impl ToFormatElement for JsxSelfClosingElement { attributes.push(soft_line_break_or_space()); } + let type_arguments = self + .type_arguments() + .map(|arg| arg.format(formatter)) + .transpose()? + .unwrap_or_else(empty_element); + Ok(format_elements![ self.l_angle_token().format(formatter)?, self.name().format(formatter)?, + type_arguments, space_token(), group_elements(soft_block_indent(concat_elements(attributes))), self.slash_token().format(formatter)?, diff --git a/crates/rome_js_formatter/tests/specs/jsx/self_closing.jsx.snap b/crates/rome_js_formatter/tests/specs/jsx/self_closing.jsx.snap new file mode 100644 index 00000000000..28c20b66e56 --- /dev/null +++ b/crates/rome_js_formatter/tests/specs/jsx/self_closing.jsx.snap @@ -0,0 +1,50 @@ +--- +source: crates/rome_js_formatter/tests/spec_test.rs +assertion_line: 198 +expression: self_closing.jsx + +--- +# Input +; + +; + +; +; +; + + + +============================= +# Outputs +## Output 1 +----- +Indent style: Tab +Line width: 80 +----- +; + +; + +; +; +; + +; + + +## Unimplemented nodes/tokens + +"Foo " => 1..5 +"Foo " => 11..25 +"LineWidthInput " => 31..46 +"IndentStyleSelect" => 51..68 +"SourceTypeSelect" => 75..91 +"CodeEditor" => 99..109 + From 659bbd373448f3503d9df838b4d1b37ad7e73e2a Mon Sep 17 00:00:00 2001 From: Nicholas Yang Date: Wed, 6 Apr 2022 14:51:11 -0400 Subject: [PATCH 07/10] Switched to using `format_or_empty` --- .../src/jsx/tag/self_closing_element.rs | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/crates/rome_js_formatter/src/jsx/tag/self_closing_element.rs b/crates/rome_js_formatter/src/jsx/tag/self_closing_element.rs index 726f3241657..1748c3ae189 100644 --- a/crates/rome_js_formatter/src/jsx/tag/self_closing_element.rs +++ b/crates/rome_js_formatter/src/jsx/tag/self_closing_element.rs @@ -1,10 +1,9 @@ -use crate::formatter_traits::FormatTokenAndNode; +use crate::formatter_traits::{FormatOptionalTokenAndNode, FormatTokenAndNode}; use crate::group_elements; use crate::{ format_elements, soft_block_indent, soft_line_break_or_space, space_token, FormatElement, FormatResult, Formatter, ToFormatElement, }; -use rome_formatter::empty_element; use rome_js_syntax::JsxSelfClosingElement; impl ToFormatElement for JsxSelfClosingElement { @@ -15,11 +14,7 @@ impl ToFormatElement for JsxSelfClosingElement { attributes.push(soft_line_break_or_space()); } - let type_arguments = self - .type_arguments() - .map(|arg| arg.format(formatter)) - .transpose()? - .unwrap_or_else(empty_element); + let type_arguments = self.type_arguments().format_or_empty(formatter)?; Ok(format_elements![ self.l_angle_token().format(formatter)?, From e4197d756fc82434ee1168ac7179b5dc270e484a Mon Sep 17 00:00:00 2001 From: Nicholas Yang Date: Mon, 11 Apr 2022 15:33:14 -0400 Subject: [PATCH 08/10] Added jsx name formatting --- .../rome_js_formatter/src/jsx/auxiliary/name.rs | 4 ++-- .../src/jsx/auxiliary/namespace_name.rs | 17 ++++++++++++++--- .../src/jsx/auxiliary/reference_identifier.rs | 4 ++-- .../src/jsx/objects/member_name.rs | 17 ++++++++++++++--- .../tests/specs/jsx/self_closing.jsx.snap | 10 ---------- 5 files changed, 32 insertions(+), 20 deletions(-) diff --git a/crates/rome_js_formatter/src/jsx/auxiliary/name.rs b/crates/rome_js_formatter/src/jsx/auxiliary/name.rs index ce51a15d74d..e1524da5c28 100644 --- a/crates/rome_js_formatter/src/jsx/auxiliary/name.rs +++ b/crates/rome_js_formatter/src/jsx/auxiliary/name.rs @@ -1,9 +1,9 @@ +use crate::formatter_traits::FormatTokenAndNode; use crate::{FormatElement, FormatResult, Formatter, ToFormatElement}; use rome_js_syntax::JsxName; -use rome_rowan::AstNode; impl ToFormatElement for JsxName { fn to_format_element(&self, formatter: &Formatter) -> FormatResult { - Ok(formatter.format_verbatim(self.syntax())) + self.value_token().format(formatter) } } diff --git a/crates/rome_js_formatter/src/jsx/auxiliary/namespace_name.rs b/crates/rome_js_formatter/src/jsx/auxiliary/namespace_name.rs index afc02c8e75f..9ed31fe370f 100644 --- a/crates/rome_js_formatter/src/jsx/auxiliary/namespace_name.rs +++ b/crates/rome_js_formatter/src/jsx/auxiliary/namespace_name.rs @@ -1,9 +1,20 @@ +use crate::formatter_traits::FormatTokenAndNode; use crate::{FormatElement, FormatResult, Formatter, ToFormatElement}; -use rome_js_syntax::JsxNamespaceName; -use rome_rowan::AstNode; +use rome_formatter::format_elements; +use rome_js_syntax::{JsxNamespaceName, JsxNamespaceNameFields}; impl ToFormatElement for JsxNamespaceName { fn to_format_element(&self, formatter: &Formatter) -> FormatResult { - Ok(formatter.format_verbatim(self.syntax())) + let JsxNamespaceNameFields { + namespace, + colon_token, + name, + } = self.as_fields(); + + Ok(format_elements![ + namespace.format(formatter)?, + colon_token.format(formatter)?, + name.format(formatter)? + ]) } } diff --git a/crates/rome_js_formatter/src/jsx/auxiliary/reference_identifier.rs b/crates/rome_js_formatter/src/jsx/auxiliary/reference_identifier.rs index 3a41fad484a..60f814b86e5 100644 --- a/crates/rome_js_formatter/src/jsx/auxiliary/reference_identifier.rs +++ b/crates/rome_js_formatter/src/jsx/auxiliary/reference_identifier.rs @@ -1,9 +1,9 @@ +use crate::formatter_traits::FormatTokenAndNode; use crate::{FormatElement, FormatResult, Formatter, ToFormatElement}; use rome_js_syntax::JsxReferenceIdentifier; -use rome_rowan::AstNode; impl ToFormatElement for JsxReferenceIdentifier { fn to_format_element(&self, formatter: &Formatter) -> FormatResult { - Ok(formatter.format_verbatim(self.syntax())) + self.value_token().format(formatter) } } diff --git a/crates/rome_js_formatter/src/jsx/objects/member_name.rs b/crates/rome_js_formatter/src/jsx/objects/member_name.rs index 71ee0414a0c..157613214ac 100644 --- a/crates/rome_js_formatter/src/jsx/objects/member_name.rs +++ b/crates/rome_js_formatter/src/jsx/objects/member_name.rs @@ -1,9 +1,20 @@ +use crate::formatter_traits::FormatTokenAndNode; use crate::{FormatElement, FormatResult, Formatter, ToFormatElement}; -use rome_js_syntax::JsxMemberName; -use rome_rowan::AstNode; +use rome_formatter::format_elements; +use rome_js_syntax::{JsxMemberName, JsxMemberNameFields}; impl ToFormatElement for JsxMemberName { fn to_format_element(&self, formatter: &Formatter) -> FormatResult { - Ok(formatter.format_verbatim(self.syntax())) + let JsxMemberNameFields { + object, + dot_token, + member, + } = self.as_fields(); + + Ok(format_elements![ + object.format(formatter)?, + dot_token.format(formatter)?, + member.format(formatter)?, + ]) } } diff --git a/crates/rome_js_formatter/tests/specs/jsx/self_closing.jsx.snap b/crates/rome_js_formatter/tests/specs/jsx/self_closing.jsx.snap index 28c20b66e56..6b67e10dd4c 100644 --- a/crates/rome_js_formatter/tests/specs/jsx/self_closing.jsx.snap +++ b/crates/rome_js_formatter/tests/specs/jsx/self_closing.jsx.snap @@ -38,13 +38,3 @@ Line width: 80 ; - -## Unimplemented nodes/tokens - -"Foo " => 1..5 -"Foo " => 11..25 -"LineWidthInput " => 31..46 -"IndentStyleSelect" => 51..68 -"SourceTypeSelect" => 75..91 -"CodeEditor" => 99..109 - From c3e4e319b8687bbda9d8c541e555203d0aa250c9 Mon Sep 17 00:00:00 2001 From: Nicholas Yang Date: Tue, 12 Apr 2022 10:11:45 -0400 Subject: [PATCH 09/10] fix: Test spec output --- crates/rome_js_formatter/tests/specs/jsx/self_closing.jsx.snap | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/crates/rome_js_formatter/tests/specs/jsx/self_closing.jsx.snap b/crates/rome_js_formatter/tests/specs/jsx/self_closing.jsx.snap index 6b67e10dd4c..10f5aa60016 100644 --- a/crates/rome_js_formatter/tests/specs/jsx/self_closing.jsx.snap +++ b/crates/rome_js_formatter/tests/specs/jsx/self_closing.jsx.snap @@ -1,6 +1,6 @@ --- source: crates/rome_js_formatter/tests/spec_test.rs -assertion_line: 198 +assertion_line: 223 expression: self_closing.jsx --- @@ -27,6 +27,7 @@ expression: self_closing.jsx ----- Indent style: Tab Line width: 80 +Quote style: Double Quotes ----- ; From 7eb3e9fdba1d533a400e51eee3ac55990008d823 Mon Sep 17 00:00:00 2001 From: Nicholas Yang Date: Tue, 12 Apr 2022 10:44:16 -0400 Subject: [PATCH 10/10] fix: switched to join_elements --- .../src/jsx/tag/self_closing_element.rs | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/crates/rome_js_formatter/src/jsx/tag/self_closing_element.rs b/crates/rome_js_formatter/src/jsx/tag/self_closing_element.rs index 1748c3ae189..a2a509d7a07 100644 --- a/crates/rome_js_formatter/src/jsx/tag/self_closing_element.rs +++ b/crates/rome_js_formatter/src/jsx/tag/self_closing_element.rs @@ -4,15 +4,15 @@ use crate::{ format_elements, soft_block_indent, soft_line_break_or_space, space_token, FormatElement, FormatResult, Formatter, ToFormatElement, }; +use rome_formatter::join_elements; use rome_js_syntax::JsxSelfClosingElement; impl ToFormatElement for JsxSelfClosingElement { fn to_format_element(&self, formatter: &Formatter) -> FormatResult { - let mut attributes = Vec::new(); - for attribute in self.attributes() { - attributes.push(attribute.format(formatter)?); - attributes.push(soft_line_break_or_space()); - } + let attributes = join_elements( + soft_line_break_or_space(), + formatter.format_nodes(self.attributes())?, + ); let type_arguments = self.type_arguments().format_or_empty(formatter)?; @@ -21,7 +21,8 @@ impl ToFormatElement for JsxSelfClosingElement { self.name().format(formatter)?, type_arguments, space_token(), - group_elements(soft_block_indent(concat_elements(attributes))), + group_elements(soft_block_indent(attributes)), + space_token(), self.slash_token().format(formatter)?, self.r_angle_token().format(formatter)? ])