react-email 1.6.0 → 1.6.1

package/dist/commands/dev.js

@@ -90,12 +90,12 @@ const createAppFiles = async () => {
                 return fs_1.default.promises.writeFile(location, file.content);
             });
         };
-        const pageCreation = pages_1.pages.map((page) => {
+        const pageCreation = pages_1.pages.map(async (page) => {
             const location = page.dir
                 ? `${utils_1.SRC_PATH}/pages/${page.dir}/${page.title}`
                 : `${utils_1.SRC_PATH}/pages/${page.title}`;
             if (page.dir) {
-                (0, utils_1.createDirectory)(`${utils_1.SRC_PATH}/pages/${page.dir}`);
+                await (0, utils_1.createDirectory)(`${utils_1.SRC_PATH}/pages/${page.dir}`);
             }
             return fs_1.default.promises.writeFile(location, page.content);
         });

package/dist/commands/export.d.ts

@@ -0,0 +1,2 @@
+import { Options } from '@react-email/render';
+export declare const exportTemplates: (outDir: string, options: Options) => Promise<void>;

package/dist/commands/export.js

@@ -0,0 +1,79 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.exportTemplates = void 0;
+const glob_1 = require("glob");
+const esbuild_1 = __importDefault(require("esbuild"));
+const tree_node_cli_1 = __importDefault(require("tree-node-cli"));
+const ora_1 = __importDefault(require("ora"));
+const log_symbols_1 = __importDefault(require("log-symbols"));
+const render_1 = require("@react-email/render");
+const fs_1 = require("fs");
+const cpy_1 = __importDefault(require("cpy"));
+const normalize_path_1 = __importDefault(require("normalize-path"));
+const utils_1 = require("../utils");
+/*
+  This first builds all the templates using esbuild and then puts the output in the `.js`
+  files. Then these `.js` files are imported dynamically and rendered to `.html` files
+  using the `render` function.
+ */
+const exportTemplates = async (outDir, options) => {
+    const spinner = (0, ora_1.default)('Preparing files...\n').start();
+    const allTemplates = glob_1.glob.sync((0, normalize_path_1.default)(`${utils_1.CLIENT_EMAILS_PATH}/*.{tsx,jsx}`));
+    esbuild_1.default.buildSync({
+        bundle: true,
+        entryPoints: allTemplates,
+        platform: 'node',
+        write: true,
+        outdir: outDir,
+    });
+    const allBuiltTemplates = glob_1.glob.sync((0, normalize_path_1.default)(`${outDir}/*.js`), {
+        absolute: true,
+    });
+    for (const template of allBuiltTemplates) {
+        const component = await Promise.resolve().then(() => __importStar(require(template)));
+        const rendered = (0, render_1.render)(component.default(), options);
+        const htmlPath = template.replace('.js', options.plainText ? '.txt' : '.html');
+        (0, fs_1.writeFileSync)(htmlPath, rendered);
+        (0, fs_1.unlinkSync)(template);
+    }
+    const hasStaticDirectory = (0, utils_1.checkDirectoryExist)(`${utils_1.CLIENT_EMAILS_PATH}/static`);
+    if (hasStaticDirectory) {
+        await (0, cpy_1.default)(`${utils_1.CLIENT_EMAILS_PATH}/static`, `${outDir}/static`);
+    }
+    const fileTree = (0, tree_node_cli_1.default)(outDir, {
+        allFiles: true,
+        maxDepth: 4,
+    });
+    console.log(fileTree);
+    spinner.stopAndPersist({
+        symbol: log_symbols_1.default.success,
+        text: 'Successfully exported emails',
+    });
+};
+exports.exportTemplates = exportTemplates;

package/dist/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const extra_typings_1 = require("@commander-js/extra-typings");
 const constants_1 = require("./utils/constants");
 const dev_1 = require("./commands/dev");
-const exportTemplates_1 = require("./commands/exportTemplates");
+const export_1 = require("./commands/export");
 extra_typings_1.program
     .name(constants_1.PACKAGE_NAME)
     .description('A live preview of your emails right in your browser')
@@ -18,5 +18,6 @@ extra_typings_1.program
     .description('Build the templates to the `out` directory')
     .option('--outDir <path>', 'Output directory', 'out')
     .option('-p, --pretty', 'Pretty print the output', false)
-    .action(({ outDir, pretty }) => (0, exportTemplates_1.exportTemplates)(outDir, pretty));
+    .option('-t, --plainText', 'Set output format as plain Text', false)
+    .action(({ outDir, pretty, plainText }) => (0, export_1.exportTemplates)(outDir, { pretty, plainText }));
 extra_typings_1.program.parse();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-email",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "description": "A live preview of your emails right in your browser.",
   "bin": {
     "email": "./dist/index.js"
@@ -18,7 +18,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/zenorocha/react-email.git",
+    "url": "https://github.com/resendlabs/react-email.git",
     "directory": "packages/react-email"
   },
   "keywords": [
@@ -26,11 +26,11 @@
     "email"
   ],
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=16.0.0"
   },
   "dependencies": {
     "@commander-js/extra-typings": "9.4.1",
-    "@react-email/render": "0.0.3",
+    "@react-email/render": "0.0.4",
     "chokidar": "3.5.3",
     "commander": "9.4.1",
     "cpy": "8.1.2",

package/preview/src/components/code-container.tsx

@@ -0,0 +1,114 @@
+import { Language } from 'prism-react-renderer';
+import { IconButton } from './icon-button';
+import { IconClipboard } from './icon-clipboard';
+import { IconDownload } from './icon-download';
+import { IconCheck } from './icon-check';
+import { copyTextToClipboard } from '../utils';
+import languageMap from '../utils/language-map';
+import { Tooltip } from './tooltip';
+import { Code } from './code';
+import * as React from 'react';
+
+interface CodeContainerProps {
+  markups: MarkupProps[];
+}
+
+interface MarkupProps {
+  language: Language;
+  content: string;
+}
+
+export const CodeContainer: React.FC<Readonly<CodeContainerProps>> = ({
+  markups,
+}) => {
+  const [isCopied, setIsCopied] = React.useState(false);
+  const [activeTab, setActiveTab] = React.useState(markups[0].language);
+  let file = null;
+  let url = null;
+
+  const renderDownloadIcon = () => {
+    let value = markups.filter((markup) => markup.language === activeTab);
+    file = new File([value[0].content], `email.${value[0].language}`);
+    url = URL.createObjectURL(file);
+
+    return (
+      <a href={url} download={file.name}>
+        <IconDownload />
+      </a>
+    );
+  };
+
+  const renderClipboardIcon = () => {
+    const handleClipboard = async () => {
+      const activeContent = markups.filter(({ language }) => {
+        return activeTab === language;
+      });
+      setIsCopied(true);
+      await copyTextToClipboard(activeContent[0].content);
+      setTimeout(() => setIsCopied(false), 3000);
+    };
+
+    return (
+      <IconButton onClick={handleClipboard}>
+        {isCopied ? <IconCheck /> : <IconClipboard />}
+      </IconButton>
+    );
+  };
+
+  React.useEffect(() => {
+    setIsCopied(false);
+  }, [activeTab]);
+
+  return (
+    <pre
+      className={
+        'border-slate-6 relative w-full items-center overflow-auto whitespace-pre rounded-md border text-sm backdrop-blur-md'
+      }
+      style={{
+        lineHeight: '130%',
+        background:
+          'linear-gradient(145.37deg, rgba(255, 255, 255, 0.09) -8.75%, rgba(255, 255, 255, 0.027) 83.95%)',
+        boxShadow: 'rgb(0 0 0 / 10%) 0px 5px 30px -5px',
+      }}
+    >
+      <div className="h-9 border-b border-slate-6">
+        <div className="py-[10px] px-4 text-xs flex gap-8">
+          {markups.map(({ language }) => {
+            return (
+              <div key={language}>
+                <button
+                  className={`${activeTab !== language && 'opacity-25'}`}
+                  onClick={() => setActiveTab(language)}
+                >
+                  {languageMap[language]}
+                </button>
+              </div>
+            );
+          })}
+        </div>
+        <Tooltip>
+          <Tooltip.Trigger className="absolute top-2 right-2 hidden md:block">
+            {renderClipboardIcon()}
+          </Tooltip.Trigger>
+          <Tooltip.Content>Copy to Clipboard</Tooltip.Content>
+        </Tooltip>
+        <Tooltip>
+          <Tooltip.Trigger className="text-gray-11 absolute top-2 right-8 hidden md:block">
+            {renderDownloadIcon()}
+          </Tooltip.Trigger>
+          <Tooltip.Content>Download</Tooltip.Content>
+        </Tooltip>
+      </div>
+      {markups.map(({ language, content }) => {
+        return (
+          <div
+            className={`${activeTab !== language && 'hidden'}`}
+            key={language}
+          >
+            <Code language={language}>{content}</Code>
+          </div>
+        );
+      })}
+    </pre>
+  );
+};

package/preview/src/components/code.tsx

@@ -1,11 +1,5 @@
 import classnames from 'classnames';
 import Highlight, { defaultProps, Language } from 'prism-react-renderer';
-import { IconButton } from './icon-button';
-import { IconClipboard } from './icon-clipboard';
-import { IconDownload } from './icon-download';
-import { IconCheck } from './icon-check';
-import { copyTextToClipboard } from '../utils';
-import { Tooltip } from './tooltip';
 import * as React from 'react';
 
 interface CodeProps {
@@ -50,9 +44,7 @@ const theme = {
 
 export const Code: React.FC<Readonly<CodeProps>> = ({
   children,
-  className,
   language = 'html',
-  ...props
 }) => {
   const [isCopied, setIsCopied] = React.useState(false);
   const value = children.trim();
@@ -68,53 +60,14 @@ export const Code: React.FC<Readonly<CodeProps>> = ({
       language={language as Language}
     >
       {({ tokens, getLineProps, getTokenProps }) => (
-        <pre
-          className={classnames(
-            'border-slate-6 relative w-full items-center overflow-auto whitespace-pre rounded-md border text-sm backdrop-blur-md',
-            className,
-          )}
-          style={{
-            lineHeight: '130%',
-            background:
-              'linear-gradient(145.37deg, rgba(255, 255, 255, 0.09) -8.75%, rgba(255, 255, 255, 0.027) 83.95%)',
-            boxShadow: 'rgb(0 0 0 / 10%) 0px 5px 30px -5px',
-          }}
-        >
-          <div className="h-9 border-b border-slate-6">
-            <div className="py-[10px] px-4 text-xs">
-              {language === 'jsx' ? 'React' : 'HTML'}
-            </div>
-            <Tooltip>
-              <Tooltip.Trigger className="absolute top-2 right-2 hidden md:block">
-                <IconButton
-                  onClick={async () => {
-                    setIsCopied(true);
-                    await copyTextToClipboard(value);
-                    setTimeout(() => setIsCopied(false), 3000);
-                  }}
-                >
-                  {isCopied ? <IconCheck /> : <IconClipboard />}
-                </IconButton>
-              </Tooltip.Trigger>
-              <Tooltip.Content>Copy to Clipboard</Tooltip.Content>
-            </Tooltip>
-
-            <Tooltip>
-              <Tooltip.Trigger className="text-gray-11 absolute top-2 right-8 hidden md:block">
-                <a href={url} download={file.name}>
-                  <IconDownload />
-                </a>
-              </Tooltip.Trigger>
-              <Tooltip.Content>Download</Tooltip.Content>
-            </Tooltip>
-          </div>
-
+        <>
           <div
             className="absolute right-0 top-0 h-px w-[200px]"
             style={{
               background:
                 'linear-gradient(90deg, rgba(56, 189, 248, 0) 0%, rgba(56, 189, 248, 0) 0%, rgba(232, 232, 232, 0.2) 33.02%, rgba(143, 143, 143, 0.6719) 64.41%, rgba(236, 72, 153, 0) 98.93%)',
             }}
+            
           />
           <div className="p-4">
             {tokens.map((line, i) => {
@@ -153,7 +106,7 @@ export const Code: React.FC<Readonly<CodeProps>> = ({
                 'linear-gradient(90deg, rgba(56, 189, 248, 0) 0%, rgba(56, 189, 248, 0) 0%, rgba(232, 232, 232, 0.2) 33.02%, rgba(143, 143, 143, 0.6719) 64.41%, rgba(236, 72, 153, 0) 98.93%)',
             }}
           />
-        </pre>
+        </>
       )}
     </Highlight>
   );

package/preview/src/components/send.tsx

@@ -1,5 +1,6 @@
 import { inter } from '../pages/_app';
 import { Button } from './button';
+import { Text } from './text';
 import * as Popover from '@radix-ui/react-popover';
 import * as React from 'react';
 
@@ -89,7 +90,11 @@ export const Send = ({ markup }: { markup: string }) => {
               type="checkbox"
               className="appearance-none checked:bg-blue-500"
             />
-            <div className="flex items-center justify-end">
+            <div className="flex items-center justify-between">
+              <Text className="inline-block" size="1">
+                Powered by{' '}
+                <a className="hover:text-slate-12 transition ease-in-out duration-300" href="https://resend.com" target="_blank" rel="noreferrer">Resend</a>
+              </Text>
               <Button
                 type="submit"
                 disabled={subject.length === 0 || to.length === 0 || isSending}

package/preview/src/pages/preview/[slug].tsx

@@ -4,11 +4,17 @@ import path from 'path';
 import { render } from '@react-email/render';
 import { GetStaticPaths } from 'next';
 import { Layout } from '../../components/layout';
+import { CodeContainer } from '../../components/code-container';
 import { Code } from '../../components';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 
-interface PreviewProps {}
+interface PreviewProps {
+  navItems: string;
+  markup: string;
+  reactMarkup: string;
+  slug: string;
+}
 
 export const CONTENT_DIR = 'emails';
 
@@ -100,8 +106,12 @@ const Preview: React.FC<Readonly<PreviewProps>> = ({
         />
       ) : (
         <div className="flex gap-6 mx-auto p-6">
-          <Code language="jsx">{reactMarkup}</Code>
-          <Code>{markup}</Code>
+          <CodeContainer
+            markups={[
+              { language: 'jsx', content: reactMarkup },
+              { language: 'markup', content: markup },
+            ]}
+          />
         </div>
       )}
     </Layout>

package/preview/src/utils/language-map.ts

@@ -0,0 +1,6 @@
+const languageMap = {
+    jsx: 'React',
+    markup: 'HTML' 
+}
+
+export default languageMap;

package/readme.md

@@ -6,7 +6,7 @@
 <div align="center">
 <a href="https://react.email">Website</a> 
 <span> · </span>
-<a href="https://github.com/zenorocha/react-email">GitHub</a> 
+<a href="https://github.com/resendlabs/react-email">GitHub</a> 
 <span> · </span>
 <a href="https://react.email/discord">Discord</a>
 </div>

package/source/commands/dev.ts

@@ -105,13 +105,13 @@ const createAppFiles = async () => {
       });
     };
 
-    const pageCreation = pages.map((page) => {
+    const pageCreation = pages.map(async (page) => {
       const location = page.dir
         ? `${SRC_PATH}/pages/${page.dir}/${page.title}`
         : `${SRC_PATH}/pages/${page.title}`;
 
       if (page.dir) {
-        createDirectory(`${SRC_PATH}/pages/${page.dir}`);
+        await createDirectory(`${SRC_PATH}/pages/${page.dir}`);
       }
 
       return fs.promises.writeFile(location, page.content);

package/source/commands/{exportTemplates.ts → export.ts}

@@ -3,7 +3,7 @@ import esbuild from 'esbuild';
 import tree from 'tree-node-cli';
 import ora from 'ora';
 import logSymbols from 'log-symbols';
-import { render } from '@react-email/render';
+import { render, Options } from '@react-email/render';
 import { unlinkSync, writeFileSync } from 'fs';
 import copy from 'cpy';
 import normalize from 'normalize-path';
@@ -14,9 +14,11 @@ import { checkDirectoryExist, CLIENT_EMAILS_PATH } from '../utils';
   files. Then these `.js` files are imported dynamically and rendered to `.html` files
   using the `render` function.
  */
-export const exportTemplates = async (outDir: string, pretty: boolean) => {
+export const exportTemplates = async (outDir: string, options: Options) => {
   const spinner = ora('Preparing files...\n').start();
-  const allTemplates = glob.sync(normalize(`${CLIENT_EMAILS_PATH}/*.{tsx,jsx}`));
+  const allTemplates = glob.sync(
+    normalize(`${CLIENT_EMAILS_PATH}/*.{tsx,jsx}`),
+  );
 
   esbuild.buildSync({
     bundle: true,
@@ -32,8 +34,11 @@ export const exportTemplates = async (outDir: string, pretty: boolean) => {
 
   for (const template of allBuiltTemplates) {
     const component = await import(template);
-    const rendered = render(component.default(), { pretty });
-    const htmlPath = template.replace('.js', '.html');
+    const rendered = render(component.default(), options);
+    const htmlPath = template.replace(
+      '.js',
+      options.plainText ? '.txt' : '.html',
+    );
     writeFileSync(htmlPath, rendered);
     unlinkSync(template);
   }

package/source/index.ts

@@ -2,7 +2,7 @@
 import { program } from '@commander-js/extra-typings';
 import { PACKAGE_NAME } from './utils/constants';
 import { dev } from './commands/dev';
-import { exportTemplates } from './commands/exportTemplates';
+import { exportTemplates } from './commands/export';
 
 program
   .name(PACKAGE_NAME)
@@ -19,6 +19,9 @@ program
   .description('Build the templates to the `out` directory')
   .option('--outDir <path>', 'Output directory', 'out')
   .option('-p, --pretty', 'Pretty print the output', false)
-  .action(({ outDir, pretty }) => exportTemplates(outDir, pretty));
+  .option('-t, --plainText', 'Set output format as plain Text', false)
+  .action(({ outDir, pretty, plainText }) =>
+    exportTemplates(outDir, { pretty, plainText }),
+  );
 
 program.parse();