Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(render): Prettier cutting off templates under certain conditions #1843

Open
wants to merge 7 commits into
base: canary
Choose a base branch
from
Open

fix(render): Prettier cutting off templates under certain conditions #1843

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
5644118
chore(deps): bump next from 14.2.3 to 15.0.4 (#1810)
dependabot[bot] Dec 9, 2024
8c9f1b3
chore(deps): bump next from 14.2.3 to 15.0.4 (#1810)
dependabot[bot] Dec 9, 2024
2ef78e4
chore(deps): bump next from 14.2.3 to 15.0.4 (#1810)
dependabot[bot] Dec 9, 2024
ff0a481
add unit test to ensure the pretty function properly treats all white…
gabrielmfern Dec 26, 2024
6803791
fix problem causing #1785
gabrielmfern Dec 26, 2024
5764e2d
remove unused snapshot
gabrielmfern Dec 26, 2024
bca76ce
add changeset
gabrielmfern Dec 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/smart-bananas-lie.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@react-email/render": patch
---

Fix unstable rendering when prettifying with the Preview component
182 changes: 182 additions & 0 deletions packages/render/src/shared/utils/__snapshots__/pretty.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,182 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`pretty > should prettify Preview component's complex characters correctly 1`] = `
"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--$-->
<html dir="ltr" lang="en">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<meta name="x-apple-disable-message-reformatting" />
</head>
<div
style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0"
>
You&#x27;re now ready to make live transactions with Stripe!
<div>
 ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
</div>
</div>
<body
style='background-color:#f6f9fc;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif'
>
<table
align="center"
width="100%"
border="0"
cellpadding="0"
cellspacing="0"
role="presentation"
style="max-width:37.5em;background-color:#ffffff;margin:0 auto;padding:20px 0 48px;margin-bottom:64px"
>
<tbody>
<tr style="width:100%">
<td>
<table
align="center"
width="100%"
border="0"
cellpadding="0"
cellspacing="0"
role="presentation"
style="padding:0 48px"
>
<tbody>
<tr>
<td>
<img
alt="Stripe"
height="21"
src="/static/stripe-logo.png"
style="display:block;outline:none;border:none;text-decoration:none"
width="49"
/>
<hr
style="width:100%;border:none;border-top:1px solid #eaeaea;border-color:#e6ebf1;margin:20px 0"
/>
<p
style="font-size:16px;line-height:24px;margin:16px 0;color:#525f7f;text-align:left"
>
Thanks for submitting your account information.
You&#x27;re now ready to make live transactions with
Stripe!
</p>
<p
style="font-size:16px;line-height:24px;margin:16px 0;color:#525f7f;text-align:left"
>
You can view your payments and a variety of other
information about your account right from your dashboard.
</p>
<a
href="https://dashboard.stripe.com/login"
style="line-height:100%;text-decoration:none;display:block;max-width:100%;mso-padding-alt:0px;background-color:#656ee8;border-radius:5px;color:#fff;font-size:16px;font-weight:bold;text-align:center;width:100%;padding:10px 10px 10px 10px"
target="_blank"
><span
><!--[if mso
]><i
style="mso-font-width:500%;mso-text-raise:15"
hidden
>&#8202;</i
><!
[endif]--></span
><span
style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:7.5px"
>View your Stripe Dashboard</span
><span
><!--[if mso
]><i style="mso-font-width:500%" hidden
>&#8202;&#8203;</i
><!
[endif]--></span
></a
>
<hr
style="width:100%;border:none;border-top:1px solid #eaeaea;border-color:#e6ebf1;margin:20px 0"
/>
<p
style="font-size:16px;line-height:24px;margin:16px 0;color:#525f7f;text-align:left"
>
If you haven&#x27;t finished your integration, you might
find our<!-- -->
<a
href="https://stripe.com/docs"
style="color:#556cd6;text-decoration-line:none"
target="_blank"
>docs</a
>
<!-- -->handy.
</p>
<p
style="font-size:16px;line-height:24px;margin:16px 0;color:#525f7f;text-align:left"
>
Once you&#x27;re ready to start accepting payments,
you&#x27;ll just need to use your live<!-- -->
<a
href="https://dashboard.stripe.com/login?redirect=%2Fapikeys"
style="color:#556cd6;text-decoration-line:none"
target="_blank"
>API keys</a
>
<!-- -->instead of your test API keys. Your account can
simultaneously be used for both test and live requests, so
you can continue testing while accepting live payments.
Check out our<!-- -->
<a
href="https://stripe.com/docs/dashboard"
style="color:#556cd6;text-decoration-line:none"
target="_blank"
>tutorial about account basics</a
>.
</p>
<p
style="font-size:16px;line-height:24px;margin:16px 0;color:#525f7f;text-align:left"
>
Finally, we&#x27;ve put together a<!-- -->
<a
href="https://stripe.com/docs/checklist/website"
style="color:#556cd6;text-decoration-line:none"
target="_blank"
>quick checklist</a
>
<!-- -->to ensure your website conforms to card network
standards.
</p>
<p
style="font-size:16px;line-height:24px;margin:16px 0;color:#525f7f;text-align:left"
>
We&#x27;ll be here to help you with any step along the
way. You can find answers to most questions and get in
touch with us on our<!-- -->
<a
href="https://support.stripe.com/"
style="color:#556cd6;text-decoration-line:none"
target="_blank"
>support site</a
>.
</p>
<p
style="font-size:16px;line-height:24px;margin:16px 0;color:#525f7f;text-align:left"
>
— The Stripe team
</p>
<hr
style="width:100%;border:none;border-top:1px solid #eaeaea;border-color:#e6ebf1;margin:20px 0"
/>
<p
style="font-size:12px;line-height:16px;margin:16px 0;color:#8898aa"
>
Stripe, 354 Oyster Point Blvd, South San Francisco, CA
94080
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
<!--/$-->
"
`;
Binary file added packages/render/src/shared/utils/pretty.spec.ts
View file
Open in desktop
Binary file not shown.
4 changes: 2 additions & 2 deletions packages/render/src/shared/utils/pretty.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@ const defaults: Options = {
parser: "html",
};

export const pretty = (str: string, options: Options = {}) => {
return format(str, {
export const pretty = async (str: string, options: Options = {}) => {
return format(str.replaceAll("\0", ""), {
...defaults,
...options,
});
Expand Down
Loading