react-email 3.0.3 → 3.0.5

package/src/contexts/emails.tsx

@@ -1,26 +1,14 @@
 'use client';
-import { createContext, useContext, useEffect, useState } from 'react';
+import { createContext, useContext, useState } from 'react';
 import {
   getEmailsDirectoryMetadata,
   type EmailsDirectory,
 } from '../actions/get-emails-directory-metadata';
 import { useHotreload } from '../hooks/use-hot-reload';
-import {
-  renderEmailByPath,
-  type EmailRenderingResult,
-} from '../actions/render-email-by-path';
-import { getEmailPathFromSlug } from '../actions/get-email-path-from-slug';
 
 const EmailsContext = createContext<
   | {
       emailsDirectoryMetadata: EmailsDirectory;
-      /**
-       * Uses the hot reloaded bundled build and rendering email result
-       */
-      useEmailRenderingResult: (
-        emailPath: string,
-        serverEmailRenderedResult: EmailRenderingResult,
-      ) => EmailRenderingResult;
     }
   | undefined
 >(undefined);
@@ -44,14 +32,11 @@ export const EmailsProvider = (props: {
   const [emailsDirectoryMetadata, setEmailsDirectoryMetadata] =
     useState<EmailsDirectory>(props.initialEmailsDirectoryMetadata);
 
-  const [renderingResultPerEmailPath, setRenderingResultPerEmailPath] =
-    useState<Record<string, EmailRenderingResult>>({});
-
   if (process.env.NEXT_PUBLIC_IS_BUILDING !== 'true') {
     // this will not change on runtime so it doesn't violate
     // the rules of hooks
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    useHotreload(async (changes) => {
+    useHotreload(async () => {
       const metadata = await getEmailsDirectoryMetadata(
         props.initialEmailsDirectoryMetadata.absolutePath,
       );
@@ -62,28 +47,6 @@ export const EmailsProvider = (props: {
           'Hot reloading: unable to find the emails directory to update the sidebar',
         );
       }
-
-      for await (const change of changes) {
-        const slugForChangedEmail =
-          // ex: apple-receipt.tsx
-          // it will be the path relative to the emails directory, so it is already
-          // going to be equivalent to the slug
-          change.filename;
-
-        const pathForChangedEmail =
-          await getEmailPathFromSlug(slugForChangedEmail);
-
-        const lastResult = renderingResultPerEmailPath[pathForChangedEmail];
-
-        if (typeof lastResult !== 'undefined') {
-          const renderingResult = await renderEmailByPath(pathForChangedEmail);
-
-          setRenderingResultPerEmailPath((map) => ({
-            ...map,
-            [pathForChangedEmail]: renderingResult,
-          }));
-        }
-      }
     });
   }
 
@@ -91,23 +54,6 @@ export const EmailsProvider = (props: {
     <EmailsContext.Provider
       value={{
         emailsDirectoryMetadata,
-        useEmailRenderingResult: (emailPath, serverEmailRenderedResult) => {
-          useEffect(() => {
-            if (typeof renderingResultPerEmailPath[emailPath] === 'undefined') {
-              setRenderingResultPerEmailPath((map) => ({
-                ...map,
-                [emailPath]: serverEmailRenderedResult,
-              }));
-            }
-          }, [serverEmailRenderedResult, emailPath]);
-
-          if (typeof renderingResultPerEmailPath[emailPath] !== 'undefined') {
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            return renderingResultPerEmailPath[emailPath]!;
-          }
-
-          return serverEmailRenderedResult;
-        },
       }}
     >
       {props.children}

package/src/hooks/use-email-rendering-result.ts

@@ -0,0 +1,44 @@
+import { useState } from 'react';
+import {
+  renderEmailByPath,
+  type EmailRenderingResult,
+} from '../actions/render-email-by-path';
+import { getEmailPathFromSlug } from '../actions/get-email-path-from-slug';
+import { useHotreload } from './use-hot-reload';
+
+export const useEmailRenderingResult = (
+  emailPath: string,
+  serverEmailRenderedResult: EmailRenderingResult,
+) => {
+  const [renderingResult, setRenderingResult] = useState(
+    serverEmailRenderedResult,
+  );
+
+  if (process.env.NEXT_PUBLIC_IS_BUILDING !== 'true') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useHotreload(async (changes) => {
+      for await (const change of changes) {
+        const slugForChangedEmail =
+          // ex: apple-receipt.tsx
+          // it will be the path relative to the emails directory, so it is already
+          // going to be equivalent to the slug
+          change.filename;
+
+        const pathForChangedEmail =
+          await getEmailPathFromSlug(slugForChangedEmail);
+
+        // We always render the email template here so that we can allow
+        const newRenderingResult = await renderEmailByPath(
+          pathForChangedEmail,
+          true,
+        );
+
+        if (pathForChangedEmail === emailPath) {
+          setRenderingResult(newRenderingResult);
+        }
+      }
+    });
+  }
+
+  return renderingResult;
+};

package/src/hooks/use-rendering-metadata.ts

@@ -16,19 +16,19 @@ const lastRenderingMetadataPerEmailPath = {} as Record<
 export const useRenderingMetadata = (
   emailPath: string,
   renderingResult: EmailRenderingResult,
-  initialRenderingMetadata?: EmailRenderingResult,
+  serverRenderingMetadata: EmailRenderingResult,
 ): RenderedEmailMetadata | undefined => {
   useEffect(() => {
     if ('markup' in renderingResult) {
       lastRenderingMetadataPerEmailPath[emailPath] = renderingResult;
     } else if (
-      typeof initialRenderingMetadata !== 'undefined' &&
-      'markup' in initialRenderingMetadata &&
+      typeof serverRenderingMetadata !== 'undefined' &&
+      'markup' in serverRenderingMetadata &&
       typeof lastRenderingMetadataPerEmailPath[emailPath] === 'undefined'
     ) {
-      lastRenderingMetadataPerEmailPath[emailPath] = initialRenderingMetadata;
+      lastRenderingMetadataPerEmailPath[emailPath] = serverRenderingMetadata;
     }
-  }, [renderingResult, emailPath, initialRenderingMetadata]);
+  }, [renderingResult, emailPath, serverRenderingMetadata]);
 
   return 'error' in renderingResult
     ? lastRenderingMetadataPerEmailPath[emailPath]

package/src/package/body/dist/index.d.mts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+
+type BodyProps = Readonly<React.HtmlHTMLAttributes<HTMLBodyElement>>;
+declare const Body: React.ForwardRefExoticComponent<Readonly<React.HtmlHTMLAttributes<HTMLBodyElement>> & React.RefAttributes<HTMLBodyElement>>;
+
+export { Body, type BodyProps };

package/src/package/body/dist/index.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+
+type BodyProps = Readonly<React.HtmlHTMLAttributes<HTMLBodyElement>>;
+declare const Body: React.ForwardRefExoticComponent<Readonly<React.HtmlHTMLAttributes<HTMLBodyElement>> & React.RefAttributes<HTMLBodyElement>>;
+
+export { Body, type BodyProps };

package/src/package/body/dist/index.js

@@ -0,0 +1,79 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Body: () => Body
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/body.tsx
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var Body = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { children, style } = _b, props = __objRest(_b, ["children", "style"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("body", __spreadProps(__spreadValues({}, props), { ref, style, children }));
+  }
+);
+Body.displayName = "Body";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Body
+});

package/src/package/body/dist/index.mjs

@@ -0,0 +1,45 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/body.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var Body = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { children, style } = _b, props = __objRest(_b, ["children", "style"]);
+    return /* @__PURE__ */ jsx("body", __spreadProps(__spreadValues({}, props), { ref, style, children }));
+  }
+);
+Body.displayName = "Body";
+export {
+  Body
+};

package/src/package/button/dist/index.d.mts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+
+type ButtonProps = Readonly<React.ComponentPropsWithoutRef<"a">>;
+declare const Button: React.ForwardRefExoticComponent<Readonly<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">> & React.RefAttributes<HTMLAnchorElement>>;
+
+export { Button, type ButtonProps };

package/src/package/button/dist/index.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+
+type ButtonProps = Readonly<React.ComponentPropsWithoutRef<"a">>;
+declare const Button: React.ForwardRefExoticComponent<Readonly<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">> & React.RefAttributes<HTMLAnchorElement>>;
+
+export { Button, type ButtonProps };

package/src/package/button/dist/index.js

@@ -0,0 +1,252 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Button: () => Button
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/button.tsx
+var React = __toESM(require("react"));
+
+// src/utils/parse-padding.ts
+function convertToPx(value) {
+  let px = 0;
+  if (!value) {
+    return px;
+  }
+  if (typeof value === "number") {
+    return value;
+  }
+  const matches = /^([\d.]+)(px|em|rem|%)$/.exec(value);
+  if (matches && matches.length === 3) {
+    const numValue = parseFloat(matches[1]);
+    const unit = matches[2];
+    switch (unit) {
+      case "px":
+        return numValue;
+      case "em":
+      case "rem":
+        px = numValue * 16;
+        return px;
+      case "%":
+        px = numValue / 100 * 600;
+        return px;
+      default:
+        return numValue;
+    }
+  } else {
+    return 0;
+  }
+}
+function parsePadding({
+  padding = "",
+  paddingTop,
+  paddingRight,
+  paddingBottom,
+  paddingLeft
+}) {
+  let pt = 0;
+  let pr = 0;
+  let pb = 0;
+  let pl = 0;
+  if (typeof padding === "number") {
+    pt = padding;
+    pr = padding;
+    pb = padding;
+    pl = padding;
+  } else {
+    const values = padding.split(/\s+/);
+    switch (values.length) {
+      case 1:
+        pt = convertToPx(values[0]);
+        pr = convertToPx(values[0]);
+        pb = convertToPx(values[0]);
+        pl = convertToPx(values[0]);
+        break;
+      case 2:
+        pt = convertToPx(values[0]);
+        pb = convertToPx(values[0]);
+        pr = convertToPx(values[1]);
+        pl = convertToPx(values[1]);
+        break;
+      case 3:
+        pt = convertToPx(values[0]);
+        pr = convertToPx(values[1]);
+        pl = convertToPx(values[1]);
+        pb = convertToPx(values[2]);
+        break;
+      case 4:
+        pt = convertToPx(values[0]);
+        pr = convertToPx(values[1]);
+        pb = convertToPx(values[2]);
+        pl = convertToPx(values[3]);
+        break;
+      default:
+        break;
+    }
+  }
+  return {
+    pt: paddingTop ? convertToPx(paddingTop) : pt,
+    pr: paddingRight ? convertToPx(paddingRight) : pr,
+    pb: paddingBottom ? convertToPx(paddingBottom) : pb,
+    pl: paddingLeft ? convertToPx(paddingLeft) : pl
+  };
+}
+
+// src/utils/px-to-pt.ts
+var pxToPt = (px) => typeof px === "number" && !isNaN(Number(px)) ? px * 3 / 4 : null;
+
+// src/button.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var maxFontWidth = 5;
+function computeFontWidthAndSpaceCount(expectedWidth) {
+  if (expectedWidth === 0) return [0, 0];
+  let smallestSpaceCount = 0;
+  const computeRequiredFontWidth = () => {
+    if (smallestSpaceCount > 0) {
+      return expectedWidth / smallestSpaceCount / 2;
+    }
+    return Infinity;
+  };
+  while (computeRequiredFontWidth() > maxFontWidth) {
+    smallestSpaceCount++;
+  }
+  return [computeRequiredFontWidth(), smallestSpaceCount];
+}
+var Button = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { children, style, target = "_blank" } = _b, props = __objRest(_b, ["children", "style", "target"]);
+    var _a2, _b2, _c, _d;
+    const { pt, pr, pb, pl } = parsePadding({
+      padding: style == null ? void 0 : style.padding,
+      paddingLeft: (_a2 = style == null ? void 0 : style.paddingLeft) != null ? _a2 : style == null ? void 0 : style.paddingInline,
+      paddingRight: (_b2 = style == null ? void 0 : style.paddingRight) != null ? _b2 : style == null ? void 0 : style.paddingInline,
+      paddingTop: (_c = style == null ? void 0 : style.paddingTop) != null ? _c : style == null ? void 0 : style.paddingBlock,
+      paddingBottom: (_d = style == null ? void 0 : style.paddingBottom) != null ? _d : style == null ? void 0 : style.paddingBlock
+    });
+    const y = pt + pb;
+    const textRaise = pxToPt(y);
+    const [plFontWidth, plSpaceCount] = computeFontWidthAndSpaceCount(pl);
+    const [prFontWidth, prSpaceCount] = computeFontWidthAndSpaceCount(pr);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "a",
+      __spreadProps(__spreadValues({}, props), {
+        ref,
+        style: buttonStyle(__spreadProps(__spreadValues({}, style), { pt, pr, pb, pl })),
+        target,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "span",
+            {
+              dangerouslySetInnerHTML: {
+                // The `&#8202;` is as close to `1px` of an empty character as we can get, then, we use the `mso-font-width`
+                // to scale it according to what padding the developer wants. `mso-font-width` also does not allow for percentages
+                // >= 500% so we need to add extra spaces accordingly.
+                //
+                // See https://github.com/resend/react-email/issues/1512 for why we do not use letter-spacing instead.
+                __html: `<!--[if mso]><i style="mso-font-width:${plFontWidth * 100}%;mso-text-raise:${textRaise}" hidden>${"&#8202;".repeat(
+                  plSpaceCount
+                )}</i><![endif]-->`
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: buttonTextStyle(pb), children }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "span",
+            {
+              dangerouslySetInnerHTML: {
+                __html: `<!--[if mso]><i style="mso-font-width:${prFontWidth * 100}%" hidden>${"&#8202;".repeat(
+                  prSpaceCount
+                )}&#8203;</i><![endif]-->`
+              }
+            }
+          )
+        ]
+      })
+    );
+  }
+);
+Button.displayName = "Button";
+var buttonStyle = (style) => {
+  const _a = style || {}, { pt, pr, pb, pl } = _a, rest = __objRest(_a, ["pt", "pr", "pb", "pl"]);
+  return __spreadProps(__spreadValues({
+    lineHeight: "100%",
+    textDecoration: "none",
+    display: "inline-block",
+    maxWidth: "100%",
+    msoPaddingAlt: "0px"
+  }, rest), {
+    padding: `${pt}px ${pr}px ${pb}px ${pl}px`
+  });
+};
+var buttonTextStyle = (pb) => {
+  return {
+    maxWidth: "100%",
+    display: "inline-block",
+    lineHeight: "120%",
+    msoPaddingAlt: "0px",
+    msoTextRaise: pxToPt(pb || 0)
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button
+});