---
source: crates/rome_formatter_test/src/snapshot_builder.rs
info:
  test_file: jsx/element.jsx
---

# Input

```jsx
// Single string attribute
<div tooltip="A very long tooltip text that would otherwise make the attribute break onto the same line but it is not because of the single string layout"></div>;

// Not single string because of the new line
a = <div tooltip="A very long tooltip text that would otherwise make the attribute break
					onto the same line but it is not because of the single string layout"></div>;

// Inline
a = <ASuperLongComponentNameThatWouldBreakButDoesntSinceTheComponent></ASuperLongComponentNameThatWouldBreakButDoesntSinceTheComponent>;

// IndentAttributes
a = <ASuperLongComponentNameThatWouldBreakButDoesntSinceTheComponent a b  c d></ASuperLongComponentNameThatWouldBreakButDoesntSinceTheComponent>;

// Empty
a = <div></div>;
<>


</>;

// Not empty
a = <div> </div>;

// Template
a = <div>{`A Long Tempalte String That uses ${5 + 4} that will eventually break across multiple lines ${40 / 3 * 45}`}</div>;

// Meaningful text after self closing element adds a hard line break
a = <div><pre className="h-screen overflow-y-scroll" />adefg</div>;

// Meaningful text after a non-self closing element should add a soft line break
b = a = <div><pre className="h-screen overflow-y-scroll">a</pre>abcd</div>;

// A word right before a self-closing element inserts a hard line break
a = <div>ab<br/></div>;

// A Word not right before a self-closing element inserts a soft line break.
a = <div>ab<pre>text</pre></div>;

// whitespaces
c = <div>a{' '}{' '}{' '}{' '}{' '}{' '}{' '}{' '}b{' '}{' '}{' '}{' '}{' '}{' '}</div>;

c2 = <div>a{' '}{' '}{' '}{' '}{' '}{' '}{' '}{' '}<div></div>content{' '}{' '}{' '}{' '}{' '}{' '}</div>;

// this group should fit one line jsx whitespaces are hidden
b =
	<div>
		<a></a>

		{' '}

		<a></a>

		{' '}
		1
	</div>;

// this group should break first tag and show only first jsx whitespace
b1 =
	<div>
		<a>
			{`
12312
12312
			`}
		</a>

		{' '}

		<a></a>

		{' '}
		1
	</div>;

// this group fit one line and hide jsx whitespace
b2 =
	<>
		<a>123
		</a>

		{' '}
		1
	</>;

// this group break group and show jsx whitespace
b3 =
	<>
		<a>{`
123`}
		</a>

		{' '}
		1
	</>;

const b4 = <div>
	Text <a data-very-long-prop-breakline-rome-playground data-other>
	some link
</a>{' '}
	| some other text,{' '}
</div>;

b5 =
	<div>
		<br /> long text long text long text long text long text long text long text long text<link>url</link> long text long text
	</div>;

<div><div></div><a> jumps over the lazy dog </a></div>;

const Essay = () => <div>The films of Wong Kar-Wai exemplify the synthesis of French New Wave cinema—specifically the unrelenting
	experimental technique and fascination with American/western culture—with more conventional melodramatic, romantic narratives.</div>;

function Tabs() {
	return <Tabs>
		<TabList>
			<Tab selectedClassName="bg-slate-300">Input</Tab>
			<Tab selectedClassName="bg-slate-300">Settings</Tab>
			<Tab selectedClassName="bg-slate-300">Formatter Output</Tab>
			<Tab selectedClassName="bg-slate-300">CST</Tab>
			<Tab selectedClassName="bg-slate-300">AST</Tab>
			<Tab selectedClassName="bg-slate-300">Rome IR</Tab>
			<Tab selectedClassName="bg-slate-300">Prettier IR</Tab>
			<Tab disabled={errors === ""} selectedClassName="bg-slate-300">
				Errors
			</Tab>
		</TabList>
		<TabPanel>
			<CodeEditor
				value={code}
				language={language}
				placeholder="Enter some code here"
				onChange={(evn) => {
					setPlaygroundState((state) => ({
						...state,
						code: evn.target.value,
					}));
				}}
				style={{
					fontSize: 12,
					height: "100vh",
					fontFamily:
						"ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace",
				}}
			/>
		</TabPanel>
		<TabPanel>
			<SettingsMenu
				setPlaygroundState={setPlaygroundState}
				settings={settings}
			/>
		</TabPanel>
		<TabPanel>
			<h1>Rome</h1>
			<CodeEditor
				value={formatted_code}
				language={language}
				placeholder="Rome Output"
				style={{
					fontSize: 12,
					height: "40vh",
					overflowY: "scroll",
					fontFamily:
						"ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace",
				}}
			/>
			<h1>Prettier</h1>
			<CodeEditor
				value={prettierOutput.code}
				language={language}
				placeholder="Prettier Output"
				style={{
					fontSize: 12,
					height: "50vh",
					overflowY: "scroll",
					fontFamily:
						"ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace",
				}}
			/>
		</TabPanel>
		<TabPanel>
			<TreeView
				tree={cst}
				treeStyle={treeStyle}
				setPlaygroundState={setPlaygroundState}
			/>
		</TabPanel>
		<TabPanel>
			<TreeView
				tree={ast}
				treeStyle={treeStyle}
				setPlaygroundState={setPlaygroundState}
			/>
		</TabPanel>
		<TabPanel>
			<pre className="h-screen overflow-y-scroll">{formatter_ir}</pre>
		</TabPanel>
		<TabPanel>
			<pre className="h-screen overflow-y-scroll">{prettierOutput.ir}</pre>
		</TabPanel>
		<TabPanel>
					<pre className="h-screen overflow-y-scroll whitespace-pre-wrap text-red-500 text-xs">
						{errors}
					</pre>
		</TabPanel>
	</Tabs>;
}

function LoginForm() {
	return <form onChange={
		e => {
			e.preventDefault();
			console.log("Submitted form!")}
	}>
		<input value={username} onChange={e => setUsername(e.target.value)} />
		<input type="password" value={password} onChange={e => setPassword(e.target.value)} />
	</form>
}

function MapoTofuRecipe() {
	return <ul>
		Mapo tofu recipe
		<li>2 packets soft or silken tofu</li>
		<li>1 tablespoon minced garlic</li>
		<li>1 tablespoon minced ginger </li>
		<li>2 tablespoons doubanjiang</li>
		<li>1 tablespoon douchi</li>
		<li>1 tablespoon corn or potato starch</li>
		<li>2 scallions or jiu cai</li>
		<li>6 ounces of ground beef or pork</li>
	</ul>
}

<Route path="/" component={<HomePage />} />;

let component = <div> La Haine dir. Mathieu Kassovitz </div>;

let component = (
	<div> Uncle Boonmee Who Can Recall His Past Lives dir. Apichatpong Weerasethakul </div>
);

(<div>Badlands</div>).property;

let bar = <div>
	{foo(() => <div> the quick brown fox jumps over the lazy dog and then jumps over the lazy cat and then over the lazy fish. </div>)}
</div>;

<Component // here is a comment
	className={bar} index={0} name="Component" // here is another comment
></Component>;

// spacing
let a = <a>{' '}</a>
let b = <a>{" "}</a>

// comments
let a = <a>{ /* comment */ " " /* comment */ }</a>;
let a = <a>{  " "
	/* comment */ }</a>;
let a = <a>{ /* comment */ " " }</a>;

// in array
const breadcrumbItems = [
	(
		<Breadcrumb.Item key="home">
			<Link to="/">Home</Link>
		</Breadcrumb.Item>
	),
].concat(extraBreadcrumbItems);

function Component() {
	return (
		<Test
			prop={value}
			// comment
		/>
	);
}

let b = (
	<section>
		<div>
			aVeryLongCOntentThat
		</div // comment
	>
	</section>
);


let a = (
	</*comment3*/Test
		// comment before attribute
		/*comment1*/prop/*comment2*/=/*comment3*/{/*comment4*/value /*comment5*/}/*comment6*/
		// comment after attribute
	>
		<Test
			// comment before attribute
			/*comment1*/prop/*comment2*/=/*comment3*/{/*comment4*/value /*comment5*/}/*comment6*/
			// comment after attribute
		/>
	</Test>
);

function Component() {
	return (
		<div>
			{fn(data)}{' '}
			<Component />
		</div>
	);
}

// jsx whitespace {' '} adds meaningful jsx text
function Component() {
	return (
		<div>
			{fn(datadatadatadatadatadatadatadatadatadatadatadatadatadatadatadata)}{' '}
			<Component />
		</div>
	);
}

// not jsx whitespace doesn't add meaningful jsx text
function Component() {
	return (
		<div>
			{fn(datadatadatadatadatadatadatadatadatadatadatadatadatadatadatadata)}{'  '}
			<Component />
		</div>
	);
}

```


=============================

# Outputs

## Output 1

-----
Indent style: Tab
Line width: 80
Quote style: Double Quotes
Quote properties: As needed
Trailing comma: All
Semicolons: Always
-----

```jsx
// Single string attribute
<div tooltip="A very long tooltip text that would otherwise make the attribute break onto the same line but it is not because of the single string layout"></div>;

// Not single string because of the new line
a = (
	<div
		tooltip="A very long tooltip text that would otherwise make the attribute break
					onto the same line but it is not because of the single string layout"
	></div>
);

// Inline
a = (
	<ASuperLongComponentNameThatWouldBreakButDoesntSinceTheComponent></ASuperLongComponentNameThatWouldBreakButDoesntSinceTheComponent>
);

// IndentAttributes
a = (
	<ASuperLongComponentNameThatWouldBreakButDoesntSinceTheComponent
		a
		b
		c
		d
	></ASuperLongComponentNameThatWouldBreakButDoesntSinceTheComponent>
);

// Empty
a = <div></div>;
<></>;

// Not empty
a = <div> </div>;

// Template
a = (
	<div>{`A Long Tempalte String That uses ${
		5 + 4
	} that will eventually break across multiple lines ${(40 / 3) * 45}`}</div>
);

// Meaningful text after self closing element adds a hard line break
a = (
	<div>
		<pre className="h-screen overflow-y-scroll" />
		adefg
	</div>
);

// Meaningful text after a non-self closing element should add a soft line break
b = a = (
	<div>
		<pre className="h-screen overflow-y-scroll">a</pre>abcd
	</div>
);

// A word right before a self-closing element inserts a hard line break
a = (
	<div>
		ab
		<br />
	</div>
);

// A Word not right before a self-closing element inserts a soft line break.
a = (
	<div>
		ab<pre>text</pre>
	</div>
);

// whitespaces
c = <div>a b </div>;

c2 = (
	<div>
		a <div></div>content{" "}
	</div>
);

// this group should fit one line jsx whitespaces are hidden
b = (
	<div>
		<a></a> <a></a> 1
	</div>
);

// this group should break first tag and show only first jsx whitespace
b1 = (
	<div>
		<a>
			{`
12312
12312
			`}
		</a>{" "}
		<a></a> 1
	</div>
);

// this group fit one line and hide jsx whitespace
b2 = (
	<>
		<a>123</a> 1
	</>
);

// this group break group and show jsx whitespace
b3 = (
	<>
		<a>
			{`
123`}
		</a>{" "}
		1
	</>
);

const b4 = (
	<div>
		Text{" "}
		<a data-very-long-prop-breakline-rome-playground data-other>
			some link
		</a>{" "}
		| some other text,{" "}
	</div>
);

b5 = (
	<div>
		<br /> long text long text long text long text long text long text long text
		long text<link>url</link> long text long text
	</div>
);

<div>
	<div></div>
	<a> jumps over the lazy dog </a>
</div>;

const Essay = () => (
	<div>
		The films of Wong Kar-Wai exemplify the synthesis of French New Wave
		cinema—specifically the unrelenting experimental technique and fascination
		with American/western culture—with more conventional melodramatic, romantic
		narratives.
	</div>
);

function Tabs() {
	return (
		<Tabs>
			<TabList>
				<Tab selectedClassName="bg-slate-300">Input</Tab>
				<Tab selectedClassName="bg-slate-300">Settings</Tab>
				<Tab selectedClassName="bg-slate-300">Formatter Output</Tab>
				<Tab selectedClassName="bg-slate-300">CST</Tab>
				<Tab selectedClassName="bg-slate-300">AST</Tab>
				<Tab selectedClassName="bg-slate-300">Rome IR</Tab>
				<Tab selectedClassName="bg-slate-300">Prettier IR</Tab>
				<Tab disabled={errors === ""} selectedClassName="bg-slate-300">
					Errors
				</Tab>
			</TabList>
			<TabPanel>
				<CodeEditor
					value={code}
					language={language}
					placeholder="Enter some code here"
					onChange={(evn) => {
						setPlaygroundState((state) => ({
							...state,
							code: evn.target.value,
						}));
					}}
					style={{
						fontSize: 12,
						height: "100vh",
						fontFamily:
							"ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace",
					}}
				/>
			</TabPanel>
			<TabPanel>
				<SettingsMenu
					setPlaygroundState={setPlaygroundState}
					settings={settings}
				/>
			</TabPanel>
			<TabPanel>
				<h1>Rome</h1>
				<CodeEditor
					value={formatted_code}
					language={language}
					placeholder="Rome Output"
					style={{
						fontSize: 12,
						height: "40vh",
						overflowY: "scroll",
						fontFamily:
							"ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace",
					}}
				/>
				<h1>Prettier</h1>
				<CodeEditor
					value={prettierOutput.code}
					language={language}
					placeholder="Prettier Output"
					style={{
						fontSize: 12,
						height: "50vh",
						overflowY: "scroll",
						fontFamily:
							"ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace",
					}}
				/>
			</TabPanel>
			<TabPanel>
				<TreeView
					tree={cst}
					treeStyle={treeStyle}
					setPlaygroundState={setPlaygroundState}
				/>
			</TabPanel>
			<TabPanel>
				<TreeView
					tree={ast}
					treeStyle={treeStyle}
					setPlaygroundState={setPlaygroundState}
				/>
			</TabPanel>
			<TabPanel>
				<pre className="h-screen overflow-y-scroll">{formatter_ir}</pre>
			</TabPanel>
			<TabPanel>
				<pre className="h-screen overflow-y-scroll">{prettierOutput.ir}</pre>
			</TabPanel>
			<TabPanel>
				<pre className="h-screen overflow-y-scroll whitespace-pre-wrap text-red-500 text-xs">
					{errors}
				</pre>
			</TabPanel>
		</Tabs>
	);
}

function LoginForm() {
	return (
		<form
			onChange={(e) => {
				e.preventDefault();
				console.log("Submitted form!");
			}}
		>
			<input value={username} onChange={(e) => setUsername(e.target.value)} />
			<input
				type="password"
				value={password}
				onChange={(e) => setPassword(e.target.value)}
			/>
		</form>
	);
}

function MapoTofuRecipe() {
	return (
		<ul>
			Mapo tofu recipe
			<li>2 packets soft or silken tofu</li>
			<li>1 tablespoon minced garlic</li>
			<li>1 tablespoon minced ginger </li>
			<li>2 tablespoons doubanjiang</li>
			<li>1 tablespoon douchi</li>
			<li>1 tablespoon corn or potato starch</li>
			<li>2 scallions or jiu cai</li>
			<li>6 ounces of ground beef or pork</li>
		</ul>
	);
}

<Route path="/" component={<HomePage />} />;

let component = <div> La Haine dir. Mathieu Kassovitz </div>;

let component = (
	<div>
		{" "}
		Uncle Boonmee Who Can Recall His Past Lives dir. Apichatpong Weerasethakul{" "}
	</div>
);

(<div>Badlands</div>).property;

let bar = (
	<div>
		{foo(() => (
			<div>
				{" "}
				the quick brown fox jumps over the lazy dog and then jumps over the lazy
				cat and then over the lazy fish.{" "}
			</div>
		))}
	</div>
);

<Component // here is a comment
	className={bar}
	index={0}
	name="Component" // here is another comment
></Component>;

// spacing
let a = <a> </a>;
let b = <a> </a>;

// comments
let a = <a>{/* comment */ " " /* comment */}</a>;
let a = (
	<a>
		{
			" "
			/* comment */
		}
	</a>
);
let a = <a>{/* comment */ " "}</a>;

// in array
const breadcrumbItems = [
	<Breadcrumb.Item key="home">
		<Link to="/">Home</Link>
	</Breadcrumb.Item>,
].concat(extraBreadcrumbItems);

function Component() {
	return (
		<Test
			prop={value}
			// comment
		/>
	);
}

let b = (
	<section>
		<div>
			aVeryLongCOntentThat
		</div // comment
		>
	</section>
);

let a = (
	</*comment3*/ Test
		// comment before attribute
		/*comment1*/ prop /*comment2*/=/*comment3*/ {
			/*comment4*/ value /*comment5*/
		} /*comment6*/
		// comment after attribute
	>
		<Test
			// comment before attribute
			/*comment1*/ prop /*comment2*/=/*comment3*/ {
				/*comment4*/ value /*comment5*/
			} /*comment6*/
			// comment after attribute
		/>
	</Test>
);

function Component() {
	return (
		<div>
			{fn(data)} <Component />
		</div>
	);
}

// jsx whitespace {' '} adds meaningful jsx text
function Component() {
	return (
		<div>
			{fn(datadatadatadatadatadatadatadatadatadatadatadatadatadatadatadata)}{" "}
			<Component />
		</div>
	);
}

// not jsx whitespace doesn't add meaningful jsx text
function Component() {
	return (
		<div>
			{fn(datadatadatadatadatadatadatadatadatadatadatadatadatadatadatadata)}
			{"  "}
			<Component />
		</div>
	);
}
```

# Lines exceeding max width of 80 characters
```
    2: <div tooltip="A very long tooltip text that would otherwise make the attribute break onto the same line but it is not because of the single string layout"></div>;
    7: 		tooltip="A very long tooltip text that would otherwise make the attribute break
   14: 	<ASuperLongComponentNameThatWouldBreakButDoesntSinceTheComponent></ASuperLongComponentNameThatWouldBreakButDoesntSinceTheComponent>
  179: 							"ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace",
  200: 							"ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace",
  213: 							"ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace",
  238: 				<pre className="h-screen overflow-y-scroll whitespace-pre-wrap text-red-500 text-xs">
  287: 		Uncle Boonmee Who Can Recall His Past Lives dir. Apichatpong Weerasethakul{" "}
```