react-email 1.5.2 → 1.6.1

package/dist/commands/dev.js

@@ -12,6 +12,7 @@ const utils_2 = require("../_preview/utils");
 const root_1 = require("../_preview/root");
 const pages_1 = require("../_preview/pages");
 const cpy_1 = __importDefault(require("cpy"));
+const detect_package_manager_1 = require("detect-package-manager");
 const log_symbols_1 = __importDefault(require("log-symbols"));
 const ora_1 = __importDefault(require("ora"));
 const read_pkg_1 = __importDefault(require("read-pkg"));
@@ -20,12 +21,19 @@ const styles_1 = require("../_preview/styles");
 const dev = async () => {
     try {
         const hasReactEmailDirectory = (0, utils_1.checkDirectoryExist)(utils_1.REACT_EMAIL_ROOT);
+        let packageManager;
+        try {
+            packageManager = await (0, detect_package_manager_1.detect)({ cwd: utils_1.CURRENT_PATH });
+        }
+        catch (_) {
+            packageManager = 'yarn';
+        }
         if (hasReactEmailDirectory) {
             const isUpToDate = await (0, utils_1.checkPackageIsUpToDate)();
             if (isUpToDate) {
                 await Promise.all([generateEmailsPreview(), syncPkg()]);
-                await installDependencies();
-                shelljs_1.default.exec('yarn dev', { async: true });
+                await installDependencies(packageManager);
+                shelljs_1.default.exec(`${packageManager} run dev`, { async: true });
                 (0, utils_1.watcher)();
                 return;
             }
@@ -35,8 +43,8 @@ const dev = async () => {
         await createAppDirectories();
         await createAppFiles();
         await Promise.all([generateEmailsPreview(), syncPkg()]);
-        await installDependencies();
-        shelljs_1.default.exec('yarn dev', { async: true });
+        await installDependencies(packageManager);
+        shelljs_1.default.exec(`${packageManager} run dev`, { async: true });
         (0, utils_1.watcher)();
     }
     catch (error) {
@@ -82,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);
         });
@@ -167,10 +175,10 @@ const syncPkg = async () => {
     };
     await fs_1.default.promises.writeFile(path_1.default.join(utils_1.REACT_EMAIL_ROOT, 'package.json'), JSON.stringify(pkg));
 };
-const installDependencies = async () => {
+const installDependencies = async (packageManager) => {
     const spinner = (0, ora_1.default)('Installing dependencies...\n').start();
     shelljs_1.default.cd(path_1.default.join(utils_1.REACT_EMAIL_ROOT));
-    shelljs_1.default.exec('yarn');
+    shelljs_1.default.exec(`${packageManager} install`);
     spinner.stopAndPersist({
         symbol: log_symbols_1.default.success,
         text: 'Dependencies installed',

package/dist/commands/export.d.ts

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

package/dist/commands/export.js

@@ -42,7 +42,7 @@ const utils_1 = require("../utils");
   files. Then these `.js` files are imported dynamically and rendered to `.html` files
   using the `render` function.
  */
-const exportTemplates = async (outDir, pretty) => {
+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({
@@ -57,8 +57,8 @@ const exportTemplates = async (outDir, pretty) => {
     });
     for (const template of allBuiltTemplates) {
         const component = await Promise.resolve().then(() => __importStar(require(template)));
-        const rendered = (0, render_1.render)(component.default(), { pretty });
-        const htmlPath = template.replace('.js', '.html');
+        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);
     }

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.5.2",
+  "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,14 +26,15 @@
     "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",
+    "detect-package-manager": "2.0.1",
     "esbuild": "0.16.4",
     "glob": "8.0.3",
     "log-symbols": "4.1.0",

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

@@ -4,6 +4,7 @@ import {
   checkPackageIsUpToDate,
   CLIENT_EMAILS_PATH,
   createDirectory,
+  CURRENT_PATH,
   PACKAGE_EMAILS_PATH,
   REACT_EMAIL_ROOT,
   SRC_PATH,
@@ -19,6 +20,7 @@ import { utils } from '../_preview/utils';
 import { root } from '../_preview/root';
 import { pages } from '../_preview/pages';
 import copy from 'cpy';
+import { detect as detectPackageManager } from 'detect-package-manager';
 import logSymbols from 'log-symbols';
 import ora from 'ora';
 import readPackage from 'read-pkg';
@@ -28,14 +30,20 @@ import { styles } from '../_preview/styles';
 export const dev = async () => {
   try {
     const hasReactEmailDirectory = checkDirectoryExist(REACT_EMAIL_ROOT);
+    let packageManager: PackageManager;
+    try {
+      packageManager = await detectPackageManager({ cwd: CURRENT_PATH });
+    } catch (_) {
+      packageManager = 'yarn';
+    }
 
     if (hasReactEmailDirectory) {
       const isUpToDate = await checkPackageIsUpToDate();
 
       if (isUpToDate) {
         await Promise.all([generateEmailsPreview(), syncPkg()]);
-        await installDependencies();
-        shell.exec('yarn dev', { async: true });
+        await installDependencies(packageManager);
+        shell.exec(`${packageManager} run dev`, { async: true });
         watcher();
         return;
       }
@@ -47,8 +55,8 @@ export const dev = async () => {
     await createAppDirectories();
     await createAppFiles();
     await Promise.all([generateEmailsPreview(), syncPkg()]);
-    await installDependencies();
-    shell.exec('yarn dev', { async: true });
+    await installDependencies(packageManager);
+    shell.exec(`${packageManager} run dev`, { async: true });
     watcher();
   } catch (error) {
     await watcherInstance.close();
@@ -97,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);
@@ -218,11 +226,13 @@ const syncPkg = async () => {
   );
 };
 
-const installDependencies = async () => {
+type PackageManager = 'yarn' | 'npm' | 'pnpm';
+
+const installDependencies = async (packageManager: PackageManager) => {
   const spinner = ora('Installing dependencies...\n').start();
 
   shell.cd(path.join(REACT_EMAIL_ROOT));
-  shell.exec('yarn');
+  shell.exec(`${packageManager} install`);
   spinner.stopAndPersist({
     symbol: logSymbols.success,
     text: 'Dependencies installed',

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();