From b44c937b7f519a960d9c7582d355a19d8acf2ff3 Mon Sep 17 00:00:00 2001 From: Gabriel Miranda Date: Mon, 27 Jan 2025 14:25:39 -0300 Subject: [PATCH] fix(render): Prettier cutting off templates under certain conditions (#1843) Signed-off-by: dependabot[bot] Co-authored-by: Bu Kinoshita <6929565+bukinoshita@users.noreply.github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- .changeset/smart-bananas-lie.md | 5 + .../utils/__snapshots__/pretty.spec.ts.snap | 155 ++++++++++++++++++ .../render/src/shared/utils/pretty.spec.ts | 11 ++ packages/render/src/shared/utils/pretty.ts | 2 +- .../render/src/shared/utils/stripe-email.html | Bin 0 -> 6326 bytes 5 files changed, 172 insertions(+), 1 deletion(-) create mode 100644 .changeset/smart-bananas-lie.md create mode 100644 packages/render/src/shared/utils/stripe-email.html diff --git a/.changeset/smart-bananas-lie.md b/.changeset/smart-bananas-lie.md new file mode 100644 index 0000000000..d699dd16a7 --- /dev/null +++ b/.changeset/smart-bananas-lie.md @@ -0,0 +1,5 @@ +--- +"@react-email/render": patch +--- + +Fix unstable rendering when prettifying with the Preview component diff --git a/packages/render/src/shared/utils/__snapshots__/pretty.spec.ts.snap b/packages/render/src/shared/utils/__snapshots__/pretty.spec.ts.snap index 88ffa4bfac..46d4e12fbe 100644 --- a/packages/render/src/shared/utils/__snapshots__/pretty.spec.ts.snap +++ b/packages/render/src/shared/utils/__snapshots__/pretty.spec.ts.snap @@ -4,3 +4,158 @@ exports[`pretty > if mso syntax does not wrap 1`] = ` " " `; + +exports[`pretty > should prettify Preview component's complex characters correctly 1`] = ` +" + + + + + + +
+ You're now ready to make live transactions with Stripe! +
+  ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ +
+
+ + + + + + + +
+ + + + + + +
+ Stripe +
+

+ Thanks for submitting your account information. + You're now ready to make live transactions with + Stripe! +

+

+ You can view your payments and a variety of other + information about your account right from your dashboard. +

+ + >View your Stripe Dashboard + > +
+

+ If you haven't finished your integration, you might + find our + docs + handy. +

+

+ Once you're ready to start accepting payments, + you'll just need to use your live + API keys + 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 + tutorial about account basics. +

+

+ Finally, we've put together a + quick checklist + to ensure your website conforms to card network + standards. +

+

+ We'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 + support site. +

+

+ — The Stripe team +

+
+

+ Stripe, 354 Oyster Point Blvd, South San Francisco, CA + 94080 +

+
+
+ + + +" +`; diff --git a/packages/render/src/shared/utils/pretty.spec.ts b/packages/render/src/shared/utils/pretty.spec.ts index f188d62679..e0d5ea24e7 100644 --- a/packages/render/src/shared/utils/pretty.spec.ts +++ b/packages/render/src/shared/utils/pretty.spec.ts @@ -1,6 +1,17 @@ +import { promises as fs } from 'node:fs'; +import path from 'node:path'; import { pretty } from './pretty'; describe('pretty', () => { + it("should prettify Preview component's complex characters correctly", async () => { + const stripeHTML = await fs.readFile( + path.resolve(__dirname, './stripe-email.html'), + 'utf8', + ); + + expect(await pretty(stripeHTML)).toMatchSnapshot(); + }); + test('if mso syntax does not wrap', async () => { expect( await pretty( diff --git a/packages/render/src/shared/utils/pretty.ts b/packages/render/src/shared/utils/pretty.ts index 9078dd8693..d999a84aa9 100644 --- a/packages/render/src/shared/utils/pretty.ts +++ b/packages/render/src/shared/utils/pretty.ts @@ -35,7 +35,7 @@ const defaults: Options = { }; export const pretty = (str: string, options: Options = {}) => { - return format(str, { + return format(str.replaceAll('\0', ''), { ...defaults, ...options, }); diff --git a/packages/render/src/shared/utils/stripe-email.html b/packages/render/src/shared/utils/stripe-email.html new file mode 100644 index 0000000000000000000000000000000000000000..6345cd7593389cd236c92938f2c5ac298e07a14b GIT binary patch literal 6326 zcmeHM+iu%N5bblnV#2g}5=B|I97mK?G){~JNE@S8dO=YXD{?4qMeee@OUde!-+O!M z2lPMsP@tdUALuW1c9)c8H9^s)?gelRkRrLanK?6aX7c9f&ZFnY(@#zxLvG3fPG3BH z_VgHnFp56fKaQeD(?{^}lj(cUV6WSQsbWHN!=+$F6g_@FfFL)f8b;A-wd$_+yHd@g z=?BrdU2D%yZhnSlYi2h!X)qbx3B$L-a58fHrd*AK!l(cWCg$S+1&zp&rIS&KhCw2Q zL1D&$!E+PYDKR8DQyR_q#q=aR3h4Z%3h~RDFUP^LA0AHE6$VkWhF~R*gY%G8Re@p3 zHJj1BM6KBzLxq`CB{PPLxt$XE-BZ2f7hGVN zBcJDHxL2LWvSJB0>tQc0*?IfHKdg9a@?kHSd?M?6chCFxV}&5(3KYq^1|y+l3xt9% z5uDywVpXnT#Z3-pM)3;ojObvKUw*v2_~!EB>&uI8FE75ky!igtpMJi5cdLV29NhZC zZ9KS*iT|a%@Wy}XFn{GNqsXS*<~oy<@vO|?7v-JA^cn#kclC2D(Qf7ggG=QAY*GL4S|brIK+FX{)`2ZkE4=g`CT7MO3pDt!0<9LMDq?*2XeQ&o#ZZ z{BO&D!xR&#oGskTjd2eiSmv6)L|yUr8vb`^WM!!;Xj$+S?jo~)&A=APc!;xXueF~y znBAjlkL@t7`BymHJ0vr1)8IZCv7Ko@LN9LoW6&RD_p{i^;$S)~Ff+kqnlrJ`KtvpL zJuA5*P$i;$o{Bxim}05}{RA|AD|n?}u6!vqlSR6X6Ccgut2nR;CVMuRT)zZhDDF^&7<@jXvT{Lgt1Bj4>G>(ofF$^A zGU6?itw4TnSD+27TI@RqQ^mL@j1S1OUBNfGclW5@>&K&r(|VtxNO|^|EoURYg}rVT z-o#0#xK^uNI4gLEzh;nrv-7TccTPh=*M`XtH!$tYQvw9=+7l@X`O{d^n! zU0X*{pNbaL9ZJ3qQg#X3e#MjpiH6qD6n}x4|i+llvuBq)uuBAu-x2FYwB{$moN|^yGpyL!xr1Xo6gY|B2)#n(q$nkM zjf1*tU|Rf>aft5F(sh#ij%KYvia)?`T~$(H__{7~)th~O<(FolZTLF^6WRYVc=I<; CfAfF< literal 0 HcmV?d00001