dprint-plugin-typescript
dprint-plugin-typescript copied to clipboard
Published
20 hours ago •
dprint
dprint
Investigate feedback and fix issues related to JSX elements
See here https://github.com/dprint/dprint-plugin-typescript/issues/19#issuecomment-767702524
Edit... Copy and pasted over for better tracking:
- [x] tests/jsx/comments/eslint-disable.js
- [ ] tests/jsx/comments/in-end-tag.js (very specific cases)
- [x] tests/jsx/spread/attribute.js
- [x] tests/jsx/significant-space/test.js
- [ ] tests/jsx/fragment/fragment (not idempotent)
- [x] tests/jsx/jsx/quotes
- [x] tests/jsx/text-wrap/test
From https://github.com/denoland/deno/issues/7870
Here are some examples - top is denofmt, bottom is prettier:
1
<div
class="bg-gradient-to-tr from-teal-500 to-teal-700 h-14 my-6"
>
<div
class="flex justify-between items-center max-w-screen-lg mx-auto px-4 sm:px-6 md:px-8"
>
<a class="flex items-center" href="/dashboard" title="Go to dasboard">
<img src="/img/logo.svg" alt="logo" class="w-20 h-20 -my-3" />
<span class="ml-3 text-white text-3xl font-extrabold tracking-wide">
foo site
</span>
</a>
{user && <a href="/account" title="Go to account page">
<ProfileImage class="w-10 h-10" />
</a>}
</div>
</div>
<div class="bg-gradient-to-tr from-teal-500 to-teal-700 h-14 my-6">
<div class="flex justify-between items-center max-w-screen-lg mx-auto px-4 sm:px-6 md:px-8">
<a class="flex items-center" href="/dashboard" title="Go to dasboard">
<img src="/img/logo.svg" alt="logo" class="w-20 h-20 -my-3" />
<span class="ml-3 text-white text-3xl font-extrabold tracking-wide">
foo site
</span>
</a>
{user && (
<a href="/account" title="Go to account page">
<ProfileImage class="w-10 h-10" />
</a>
)}
</div>
</div>
2
function App(props: AppProps) {
return <AuthProvider>
{props.children}
</AuthProvider>;
}
function App(props: AppProps) {
return <AuthProvider>{props.children}</AuthProvider>;
}
3
<html lang="en">
<head>
<meta charSet="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
{props.children}
</body>
</html>
<html lang="en">
<head>
<meta charSet="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>{props.children}</body>
</html>
4
<Page>
{user
? <>
<div class="flex">
<ProfileImage class="w-16 h-16" />
<div class="ml-4 flex flex-col justify-center">
<p class="font-medium text-xl">{user.name}</p>
<p class="text-gray-800">{user.login}</p>
</div>
</div>
<button
onClick={(e) => signout()}
className="h-6 sm:h-8 w-32 rounded text-md sm:text-lg font-semibold
tracking-wider focus:outline-none
transition duration-150 ease-in-out mt-8
text-black bg-gradient-to-r from-teal-400 to-teal-300 focus:text-white focus:bg-teal-500
active:text-white active:bg-teal-500"
>
SIGN OUT
</button>
</>
: <div></div>}
</Page>
<Page>
{user ? (
<>
<div class="flex">
<ProfileImage class="w-16 h-16" />
<div class="ml-4 flex flex-col justify-center">
<p class="font-medium text-xl">{user.name}</p>
<p class="text-gray-800">{user.login}</p>
</div>
</div>
<button
onClick={(e) => signout()}
className="h-6 sm:h-8 w-32 rounded text-md sm:text-lg font-semibold
tracking-wider focus:outline-none
transition duration-150 ease-in-out mt-8
text-black bg-gradient-to-r from-teal-400 to-teal-300 focus:text-white focus:bg-teal-500
active:text-white active:bg-teal-500"
>
SIGN OUT
</button>
</>
) : (
<div></div>
)}
</Page>
