resend · gabrielmfern · Nov 8, 2024 · Nov 8, 2024 · Nov 8, 2024 · Nov 13, 2024
diff --git a/.changeset/clever-meals-vanish.md b/.changeset/clever-meals-vanish.md
@@ -0,0 +1,5 @@
+---
+"react-email": patch
+---
+
+fix null byte characters being rendered in the preview server
diff --git a/.changeset/cuddly-meals-sniff.md b/.changeset/cuddly-meals-sniff.md
@@ -0,0 +1,26 @@
+---
+"@react-email/code-inline": patch
+"react-email": patch
+"@react-email/code-block": patch
+"@react-email/components": patch
+"@react-email/container": patch
+"@react-email/markdown": patch
+"@react-email/tailwind": patch
+"@react-email/heading": patch
+"@react-email/preview": patch
+"@react-email/section": patch
+"@react-email/button": patch
+"@react-email/column": patch
+"@react-email/render": patch
+"@react-email/body": patch
+"@react-email/font": patch
+"@react-email/head": patch
+"@react-email/html": patch
+"@react-email/link": patch
+"@react-email/text": patch
+"@react-email/img": patch
+"@react-email/row": patch
+"@react-email/hr": patch
+---
+
+Move react and react-dom to just dependencies for better DX
diff --git a/.changeset/large-taxis-smoke.md b/.changeset/large-taxis-smoke.md
@@ -0,0 +1,5 @@
+---
+"@react-email/render": patch
+---
+
+Use prettier's stadalone API instead of js-beautify
diff --git a/.changeset/pink-berries-relate.md b/.changeset/pink-berries-relate.md
@@ -0,0 +1,5 @@
+---
+"@react-email/markdown": patch
+---
+
+Fixes `fontWeight` styles erroring when using numbers
diff --git a/.changeset/pre.json b/.changeset/pre.json
@@ -0,0 +1,53 @@
+{
+  "mode": "pre",
+  "tag": "canary",
+  "initialVersions": {
+    "demo": "0.0.0",
+    "web": "0.0.0",
+    "@benchmarks/preview-server": "0.0.0",
+    "@benchmarks/tailwind-component": "0.0.0",
+    "react-email-with-aws-ses": "1.0.3",
+    "react-email-with-mailersend": "1.0.3",
+    "react-email-with-nodemailer": "1.0.3",
+    "react-email-with-plunk": "1.0.3",
+    "react-email-with-postmark": "1.0.3",
+    "react-email-with-resend": "1.0.3",
+    "react-email-with-next-scaleway": "1.0.3",
+    "react-email-with-node-scaleway": "1.0.3",
+    "react-email-with-sendgrid": "1.0.3",
+    "@react-email/body": "0.0.10",
+    "@react-email/button": "0.0.18",
+    "@react-email/code-block": "0.0.10",
+    "@react-email/code-inline": "0.0.4",
+    "@react-email/column": "0.0.12",
+    "@react-email/components": "0.0.28",
+    "@react-email/container": "0.0.14",
+    "create-email": "0.1.2",
+    "react-email-starter": "0.1.2",
+    "eslint-config-custom": "0.0.0",
+    "@react-email/font": "0.0.8",
+    "@react-email/head": "0.0.11",
+    "@react-email/heading": "0.0.14",
+    "@react-email/hr": "0.0.10",
+    "@react-email/html": "0.0.10",
+    "@react-email/img": "0.0.10",
+    "@react-email/link": "0.0.11",
+    "@react-email/markdown": "0.0.12",
+    "@react-email/preview": "0.0.11",
+    "react-email": "3.0.2",
+    "@react-email/render": "1.0.2",
+    "@react-email/row": "0.0.11",
+    "@react-email/section": "0.0.15",
+    "@react-email/tailwind": "1.0.2",
+    "@react-email/text": "0.0.10",
+    "tsconfig": "0.0.0"
+  },
+  "changesets": [
+    "clever-meals-vanish",
+    "cuddly-meals-sniff",
+    "large-taxis-smoke",
+    "pink-berries-relate",
+    "shaggy-beers-leave",
+    "wet-beans-run"
+  ]
+}
diff --git a/.changeset/shaggy-beers-leave.md b/.changeset/shaggy-beers-leave.md
@@ -0,0 +1,5 @@
+---
+"@react-email/code-block": patch
+---
+
+Fix typo in the PrismLanguage type
diff --git a/.changeset/wet-beans-run.md b/.changeset/wet-beans-run.md
@@ -0,0 +1,5 @@
+---
+"@react-email/render": patch
+---
+
+Remove uncessary destructuring of react-dom/server
diff --git a/.pnpmfile.cjs b/.pnpmfile.cjs
@@ -16,6 +16,19 @@ const components = packages
 
 function readPackage(pkg) {
   if (components.includes(pkg.name)) {
+    if (
+      "react" in pkg.dependencies &&
+      pkg.dependencies["react"] === "^18.0 || ^19.0 || ^19.0.0-rc"
+    ) {
+      pkg.dependencies.react = "19.0.0-rc-02c0e824-20241028";
+    }
+    if (
+      "react-dom" in pkg.dependencies &&
+      pkg.dependencies["react-dom"] === "^18.0 || ^19.0 || ^19.0.0-rc"
+    ) {
+      pkg.dependencies["react-dom"] = "19.0.0-rc-02c0e824-20241028";
+    }
+
     if ("react" in pkg.peerDependencies) {
       pkg.peerDependencies.react = "19.0.0-rc-02c0e824-20241028";
     }

diff --git a/apps/demo/emails/magic-links/aws-verify-email.tsx b/apps/demo/emails/magic-links/aws-verify-email.tsx
@@ -27,8 +27,8 @@ export default function AWSVerifyEmail({
   return (
     <Html>
       <Head />
-      <Preview>AWS Email Verification</Preview>
       <Body style={main}>
+        <Preview>AWS Email Verification</Preview>
         <Container style={container}>
           <Section style={coverSection}>
             <Section style={imageSection}>

diff --git a/apps/demo/emails/magic-links/jobaccepted-magic-link.tsx b/apps/demo/emails/magic-links/jobaccepted-magic-link.tsx
@@ -15,8 +15,8 @@ const MagicCodeEmail = () => {
   return (
     <Html>
       <Head />
-      <Preview>Sign in to jobaccepted.com</Preview>
       <Body style={main}>
+        <Preview>Sign in to jobaccepted.com</Preview>
         <Container style={container}>
           <Text style={company}>Job Accepted</Text>
           <Heading style={codeTitle}>Your authentication code</Heading>

diff --git a/apps/demo/emails/magic-links/linear-login-code.tsx b/apps/demo/emails/magic-links/linear-login-code.tsx
@@ -27,8 +27,8 @@ export const LinearLoginCodeEmail = ({
 }: LinearLoginCodeEmailProps) => (
   <Html>
     <Head />
-    <Preview>Your login code for Linear</Preview>
     <Body style={main}>
+      <Preview>Your login code for Linear</Preview>
       <Container style={container}>
         <Img
           src={`${baseUrl}/static/linear-logo.png`}

diff --git a/apps/demo/emails/magic-links/notion-magic-link.tsx b/apps/demo/emails/magic-links/notion-magic-link.tsx
@@ -24,8 +24,8 @@ export const NotionMagicLinkEmail = ({
 }: NotionMagicLinkEmailProps) => (
   <Html>
     <Head />
-    <Preview>Log in with this magic link</Preview>
     <Body style={main}>
+      <Preview>Log in with this magic link</Preview>
       <Container style={container}>
         <Heading style={h1}>Login</Heading>
         <Link

diff --git a/apps/demo/emails/magic-links/raycast-magic-link.tsx b/apps/demo/emails/magic-links/raycast-magic-link.tsx
@@ -26,8 +26,8 @@ export const RaycastMagicLinkEmail = ({
 }: RaycastMagicLinkEmailProps) => (
   <Html>
     <Head />
-    <Preview>Log in with this magic link.</Preview>
     <Body style={main}>
+      <Preview>Log in with this magic link.</Preview>
       <Container style={container}>
         <Img
           src={`${baseUrl}/static/raycast-logo.png`}

diff --git a/apps/demo/emails/magic-links/slack-confirm.tsx b/apps/demo/emails/magic-links/slack-confirm.tsx
@@ -27,8 +27,8 @@ export const SlackConfirmEmail = ({
 }: SlackConfirmEmailProps) => (
   <Html>
     <Head />
-    <Preview>Confirm your email address</Preview>
     <Body style={main}>
+      <Preview>Confirm your email address</Preview>
       <Container style={container}>
         <Section style={logoContainer}>
           <Img

diff --git a/apps/demo/emails/newsletters/codepen-challengers.tsx b/apps/demo/emails/newsletters/codepen-challengers.tsx
@@ -22,8 +22,8 @@ const baseUrl = process.env.VERCEL_URL
 export const CodepenChallengersEmail = () => (
   <Html>
     <Head />
-    <Preview>#CodePenChallenge: Cubes</Preview>
     <Body style={main}>
+      <Preview>#CodePenChallenge: Cubes</Preview>
       <Section style={header}>
         <Img
           style={imgHeader}

diff --git a/apps/demo/emails/newsletters/google-play-policy-update.tsx b/apps/demo/emails/newsletters/google-play-policy-update.tsx
@@ -21,8 +21,8 @@ const baseUrl = process.env.VERCEL_URL
 export const GooglePlayPolicyUpdateEmail = () => (
   <Html>
     <Head />
-    <Preview>Google Play developers</Preview>
     <Body style={main}>
+      <Preview>Google Play developers</Preview>
       <Container style={container}>
         <Section>
           <Row>

diff --git a/apps/demo/emails/newsletters/stack-overflow-tips.tsx b/apps/demo/emails/newsletters/stack-overflow-tips.tsx
@@ -48,8 +48,8 @@ export const StackOverflowTipsEmail = ({
 }: StackOverflowTipsEmailProps) => (
   <Html>
     <Head />
-    <Preview>Stack overflow tips for searching</Preview>
     <Body style={main}>
+      <Preview>Stack overflow tips for searching</Preview>
       <Container style={container}>
         <Section style={logo}>
           <Img width={146} src={`${baseUrl}/static/stack-overflow-logo.png`} />

diff --git a/apps/demo/emails/notifications/github-access-token.tsx b/apps/demo/emails/notifications/github-access-token.tsx
@@ -25,10 +25,10 @@ export const GithubAccessTokenEmail = ({
 }: GithubAccessTokenEmailProps) => (
   <Html>
     <Head />
-    <Preview>
-      A fine-grained personal access token has been added to your account
-    </Preview>
     <Body style={main}>
+      <Preview>
+        A fine-grained personal access token has been added to your account
+      </Preview>
       <Container style={container}>
         <Img
           src={`${baseUrl}/static/github.png`}

diff --git a/apps/demo/emails/notifications/vercel-invite-user.tsx b/apps/demo/emails/notifications/vercel-invite-user.tsx
@@ -49,9 +49,9 @@ export const VercelInviteUserEmail = ({
   return (
     <Html>
       <Head />
-      <Preview>{previewText}</Preview>
       <Tailwind>
         <Body className="bg-white my-auto mx-auto font-sans px-2">
+          <Preview>{previewText}</Preview>
           <Container className="border border-solid border-[#eaeaea] rounded my-[40px] mx-auto p-[20px] max-w-[465px]">
             <Section className="mt-[32px]">
               <Img

diff --git a/apps/demo/emails/notifications/yelp-recent-login.tsx b/apps/demo/emails/notifications/yelp-recent-login.tsx
@@ -41,8 +41,8 @@ export const YelpRecentLoginEmail = ({
   return (
     <Html>
       <Head />
-      <Preview>Yelp recent login</Preview>
       <Body style={main}>
+        <Preview>Yelp recent login</Preview>
         <Container>
           <Section style={logo}>
             <Img src={`${baseUrl}/static/yelp-logo.png`} />

diff --git a/apps/demo/emails/receipts/apple-receipt.tsx b/apps/demo/emails/receipts/apple-receipt.tsx
@@ -21,9 +21,9 @@ const baseUrl = process.env.VERCEL_URL
 export const AppleReceiptEmail = () => (
   <Html>
     <Head />
-    <Preview>Apple Receipt</Preview>
 
     <Body style={main}>
+      <Preview>Apple Receipt</Preview>
       <Container style={container}>
         <Section>
           <Row>

diff --git a/apps/demo/emails/receipts/nike-receipt.tsx b/apps/demo/emails/receipts/nike-receipt.tsx
@@ -22,8 +22,10 @@ const baseUrl = process.env.VERCEL_URL
 export const NikeReceiptEmail = () => (
   <Html>
     <Head />
-    <Preview>Get your order summary, estimated delivery date and more</Preview>
     <Body style={main}>
+      <Preview>
+        Get your order summary, estimated delivery date and more
+      </Preview>
       <Container style={container}>
         <Section style={track.container}>
           <Row>

diff --git a/apps/demo/emails/reset-password/dropbox-reset-password.tsx b/apps/demo/emails/reset-password/dropbox-reset-password.tsx
@@ -28,8 +28,8 @@ export const DropboxResetPasswordEmail = ({
   return (
     <Html>
       <Head />
-      <Preview>Dropbox reset your password</Preview>
       <Body style={main}>
+        <Preview>Dropbox reset your password</Preview>
         <Container style={container}>
           <Img
             src={`${baseUrl}/static/dropbox-logo.png`}

diff --git a/apps/demo/emails/reset-password/twitch-reset-password.tsx b/apps/demo/emails/reset-password/twitch-reset-password.tsx
@@ -34,8 +34,8 @@ export const TwitchResetPasswordEmail = ({
   return (
     <Html>
       <Head />
-      <Preview>You updated the password for your Twitch account</Preview>
       <Body style={main}>
+        <Preview>You updated the password for your Twitch account</Preview>
         <Container style={container}>
           <Section style={logo}>
             <Img width={114} src={`${baseUrl}/static/twitch-logo.png`} />

diff --git a/apps/demo/emails/reviews/airbnb-review.tsx b/apps/demo/emails/reviews/airbnb-review.tsx
@@ -34,9 +34,9 @@ export const AirbnbReviewEmail = ({
   return (
     <Html>
       <Head />
-      <Preview>{previewText}</Preview>
 
       <Body style={main}>
+        <Preview>{previewText}</Preview>
         <Container style={container}>
           <Section>
             <Img

diff --git a/apps/demo/emails/reviews/amazon-review.tsx b/apps/demo/emails/reviews/amazon-review.tsx
@@ -38,9 +38,9 @@ export const AmazonReviewEmail = ({
   return (
     <Html>
       <Head />
-      <Preview>Amazon Review</Preview>
 
       <Body style={main}>
+        <Preview>Amazon Review</Preview>
         <Container style={container}>
           <Section>
             <Row>

diff --git a/apps/demo/emails/welcome/koala-welcome.tsx b/apps/demo/emails/welcome/koala-welcome.tsx
@@ -25,10 +25,10 @@ export const KoalaWelcomeEmail = ({
 }: KoalaWelcomeEmailProps) => (
   <Html>
     <Head />
-    <Preview>
-      The sales intelligence platform that helps you uncover qualified leads.
-    </Preview>
     <Body style={main}>
+      <Preview>
+        The sales intelligence platform that helps you uncover qualified leads.
+      </Preview>
       <Container style={container}>
         <Img
           src={`${baseUrl}/static/koala-logo.png`}

diff --git a/apps/demo/emails/welcome/netlify-welcome.tsx b/apps/demo/emails/welcome/netlify-welcome.tsx
@@ -81,7 +81,6 @@ export const NetlifyWelcomeEmail = ({
   return (
     <Html>
       <Head />
-      <Preview>Netlify Welcome</Preview>
       <Tailwind
         config={{
           theme: {
@@ -99,6 +98,7 @@ export const NetlifyWelcomeEmail = ({
           },
         }}
       >
+        <Preview>Netlify Welcome</Preview>
         <Body className="bg-offwhite text-base font-sans">
           <Img
             src={`${baseUrl}/static/netlify-logo.png`}

diff --git a/apps/demo/emails/welcome/stripe-welcome.tsx b/apps/demo/emails/welcome/stripe-welcome.tsx
@@ -20,8 +20,8 @@ const baseUrl = process.env.VERCEL_URL
 export const StripeWelcomeEmail = () => (
   <Html>
     <Head />
-    <Preview>You're now ready to make live transactions with Stripe!</Preview>
     <Body style={main}>
+      <Preview>You're now ready to make live transactions with Stripe!</Preview>
       <Container style={container}>
         <Section style={box}>
           <Img

diff --git a/examples/aws-ses/CHANGELOG.md b/examples/aws-ses/CHANGELOG.md
@@ -1,5 +1,30 @@
 # react-email-with-aws-ses
 
+## 1.0.4-canary.3
+
+### Patch Changes
+
+- @react-email/[email protected]
+
+## 1.0.4-canary.2
+
+### Patch Changes
+
+- @react-email/[email protected]
+
+## 1.0.4-canary.1
+
+### Patch Changes
+
+- @react-email/[email protected]
+
+## 1.0.4-canary.0
+
+### Patch Changes
+
+- Updated dependencies [f7833da]
+  - @react-email/[email protected]
+
 ## 1.0.3
 
 ### Patch Changes