Skip to content

Commit 81c08e3

Browse files
gabrielmfernbukinoshitadependabot[bot]
committed
fix(render): Prettier cutting off templates under certain conditions (#1843)
Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Bu Kinoshita <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
1 parent ddedc0f commit 81c08e3

File tree

5 files changed

+172
-1
lines changed

5 files changed

+172
-1
lines changed

‎.changeset/smart-bananas-lie.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@react-email/render": patch
3+
---
4+
5+
Fix unstable rendering when prettifying with the Preview component

‎packages/render/src/shared/utils/__snapshots__/pretty.spec.ts.snap

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,158 @@ exports[`pretty > if mso syntax does not wrap 1`] = `
44
"<!--[if mso]><i style="mso-font-width:100%;mso-text-raise:12" hidden>&#8202;&#8202;</i><![endif]-->
55
"
66
`;
7+
8+
exports[`pretty > should prettify Preview component's complex characters correctly 1`] = `
9+
"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
10+
<!--$-->
11+
<html dir="ltr" lang="en">
12+
<head>
13+
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
14+
<meta name="x-apple-disable-message-reformatting" />
15+
</head>
16+
<div
17+
style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0">
18+
You&#x27;re now ready to make live transactions with Stripe!
19+
<div>
20+
 ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
21+
</div>
22+
</div>
23+
<body
24+
style='background-color:#f6f9fc;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif'>
25+
<table
26+
align="center"
27+
width="100%"
28+
border="0"
29+
cellpadding="0"
30+
cellspacing="0"
31+
role="presentation"
32+
style="max-width:37.5em;background-color:#ffffff;margin:0 auto;padding:20px 0 48px;margin-bottom:64px">
33+
<tbody>
34+
<tr style="width:100%">
35+
<td>
36+
<table
37+
align="center"
38+
width="100%"
39+
border="0"
40+
cellpadding="0"
41+
cellspacing="0"
42+
role="presentation"
43+
style="padding:0 48px">
44+
<tbody>
45+
<tr>
46+
<td>
47+
<img
48+
alt="Stripe"
49+
height="21"
50+
src="/static/stripe-logo.png"
51+
style="display:block;outline:none;border:none;text-decoration:none"
52+
width="49" />
53+
<hr
54+
style="width:100%;border:none;border-top:1px solid #eaeaea;border-color:#e6ebf1;margin:20px 0" />
55+
<p
56+
style="font-size:16px;line-height:24px;margin:16px 0;color:#525f7f;text-align:left">
57+
Thanks for submitting your account information.
58+
You&#x27;re now ready to make live transactions with
59+
Stripe!
60+
</p>
61+
<p
62+
style="font-size:16px;line-height:24px;margin:16px 0;color:#525f7f;text-align:left">
63+
You can view your payments and a variety of other
64+
information about your account right from your dashboard.
65+
</p>
66+
<a
67+
href="https://dashboard.stripe.com/login"
68+
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"
69+
target="_blank"
70+
><span
71+
<!--[if mso]><i style="mso-font-width:500%;mso-text-raise:15" hidden>&#8202;</i><![endif]-->
72+
><span
73+
style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:7.5px"
74+
>View your Stripe Dashboard</span
75+
><span
76+
<!--[if mso]><i style="mso-font-width:500%" hidden>&#8202;&#8203;</i><![endif]-->
77+
></a
78+
>
79+
<hr
80+
style="width:100%;border:none;border-top:1px solid #eaeaea;border-color:#e6ebf1;margin:20px 0" />
81+
<p
82+
style="font-size:16px;line-height:24px;margin:16px 0;color:#525f7f;text-align:left">
83+
If you haven&#x27;t finished your integration, you might
84+
find our<!-- -->
85+
<a
86+
href="https://stripe.com/docs"
87+
style="color:#556cd6;text-decoration-line:none"
88+
target="_blank"
89+
>docs</a
90+
>
91+
<!-- -->handy.
92+
</p>
93+
<p
94+
style="font-size:16px;line-height:24px;margin:16px 0;color:#525f7f;text-align:left">
95+
Once you&#x27;re ready to start accepting payments,
96+
you&#x27;ll just need to use your live<!-- -->
97+
<a
98+
href="https://dashboard.stripe.com/login?redirect=%2Fapikeys"
99+
style="color:#556cd6;text-decoration-line:none"
100+
target="_blank"
101+
>API keys</a
102+
>
103+
<!-- -->instead of your test API keys. Your account can
104+
simultaneously be used for both test and live requests, so
105+
you can continue testing while accepting live payments.
106+
Check out our<!-- -->
107+
<a
108+
href="https://stripe.com/docs/dashboard"
109+
style="color:#556cd6;text-decoration-line:none"
110+
target="_blank"
111+
>tutorial about account basics</a
112+
>.
113+
</p>
114+
<p
115+
style="font-size:16px;line-height:24px;margin:16px 0;color:#525f7f;text-align:left">
116+
Finally, we&#x27;ve put together a<!-- -->
117+
<a
118+
href="https://stripe.com/docs/checklist/website"
119+
style="color:#556cd6;text-decoration-line:none"
120+
target="_blank"
121+
>quick checklist</a
122+
>
123+
<!-- -->to ensure your website conforms to card network
124+
standards.
125+
</p>
126+
<p
127+
style="font-size:16px;line-height:24px;margin:16px 0;color:#525f7f;text-align:left">
128+
We&#x27;ll be here to help you with any step along the
129+
way. You can find answers to most questions and get in
130+
touch with us on our<!-- -->
131+
<a
132+
href="https://support.stripe.com/"
133+
style="color:#556cd6;text-decoration-line:none"
134+
target="_blank"
135+
>support site</a
136+
>.
137+
</p>
138+
<p
139+
style="font-size:16px;line-height:24px;margin:16px 0;color:#525f7f;text-align:left">
140+
— The Stripe team
141+
</p>
142+
<hr
143+
style="width:100%;border:none;border-top:1px solid #eaeaea;border-color:#e6ebf1;margin:20px 0" />
144+
<p
145+
style="font-size:12px;line-height:16px;margin:16px 0;color:#8898aa">
146+
Stripe, 354 Oyster Point Blvd, South San Francisco, CA
147+
94080
148+
</p>
149+
</td>
150+
</tr>
151+
</tbody>
152+
</table>
153+
</td>
154+
</tr>
155+
</tbody>
156+
</table>
157+
</body>
158+
</html>
159+
<!--/$-->
160+
"
161+
`;

‎packages/render/src/shared/utils/pretty.spec.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,17 @@
1+
import { promises as fs } from 'node:fs';
2+
import path from 'node:path';
13
import { pretty } from './pretty';
24

35
describe('pretty', () => {
6+
it("should prettify Preview component's complex characters correctly", async () => {
7+
const stripeHTML = await fs.readFile(
8+
path.resolve(__dirname, './stripe-email.html'),
9+
'utf8',
10+
);
11+
12+
expect(await pretty(stripeHTML)).toMatchSnapshot();
13+
});
14+
415
test('if mso syntax does not wrap', async () => {
516
expect(
617
await pretty(

‎packages/render/src/shared/utils/pretty.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ const defaults: Options = {
3535
};
3636

3737
export const pretty = (str: string, options: Options = {}) => {
38-
return format(str, {
38+
return format(str.replaceAll('\0', ''), {
3939
...defaults,
4040
...options,
4141
});

‎packages/render/src/shared/utils/stripe-email.html

6.18 KB
Binary file not shown.

0 commit comments

Comments
 (0)