react-email 1.7.5 → 1.7.7

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-email",
-    "version": "1.7.5",
+    "version": "1.7.7",
     "description": "A live preview of your emails right in your browser.",
     "bin": {
         "email": "./dist/index.js"

package/dist/source/_preview/components.js

@@ -8,11 +8,11 @@ exports.components = [
     },
     {
         title: 'code-container.tsx',
-        content: "import { Language } from 'prism-react-renderer';\nimport { IconButton } from './icon-button';\nimport { IconClipboard } from './icon-clipboard';\nimport { IconDownload } from './icon-download';\nimport { IconCheck } from './icon-check';\nimport { copyTextToClipboard } from '../utils';\nimport languageMap from '../utils/language-map';\nimport { Tooltip } from './tooltip';\nimport { Code } from './code';\nimport { AnimateSharedLayout, motion } from 'framer-motion';\nimport * as React from 'react';\n\ninterface CodeContainerProps {\n  markups: MarkupProps[];\n}\n\ninterface MarkupProps {\n  language: Language;\n  content: string;\n}\n\nexport const CodeContainer: React.FC<Readonly<CodeContainerProps>> = ({\n  markups,\n}) => {\n  const [hovered, setHovered] = React.useState('');\n  const [isCopied, setIsCopied] = React.useState(false);\n  const [activeTab, setActiveTab] = React.useState(markups[0].language);\n  let file = null;\n  let url = null;\n\n  const renderDownloadIcon = () => {\n    let value = markups.filter((markup) => markup.language === activeTab);\n    file = new File([value[0].content], `email.${value[0].language}`);\n    url = URL.createObjectURL(file);\n\n    return (\n      <a\n        href={url}\n        download={file.name}\n        className=\"text-slate-11 transition ease-in-out duration-200 hover:text-slate-12\"\n      >\n        <IconDownload />\n      </a>\n    );\n  };\n\n  const renderClipboardIcon = () => {\n    const handleClipboard = async () => {\n      const activeContent = markups.filter(({ language }) => {\n        return activeTab === language;\n      });\n      setIsCopied(true);\n      await copyTextToClipboard(activeContent[0].content);\n      setTimeout(() => setIsCopied(false), 3000);\n    };\n\n    return (\n      <IconButton onClick={handleClipboard}>\n        {isCopied ? <IconCheck /> : <IconClipboard />}\n      </IconButton>\n    );\n  };\n\n  React.useEffect(() => {\n    setIsCopied(false);\n  }, [activeTab]);\n\n  return (\n    <pre\n      className={\n        'border-slate-6 relative w-full items-center overflow-auto whitespace-pre rounded-md border text-sm backdrop-blur-md'\n      }\n      style={{\n        lineHeight: '130%',\n        background:\n          'linear-gradient(145.37deg, rgba(255, 255, 255, 0.09) -8.75%, rgba(255, 255, 255, 0.027) 83.95%)',\n        boxShadow: 'rgb(0 0 0 / 10%) 0px 5px 30px -5px',\n      }}\n    >\n      <div className=\"h-9 border-b border-slate-6\">\n        <div className=\"flex\">\n          <AnimateSharedLayout>\n            {markups.map(({ language }) => {\n              const isHovered = hovered === language;\n              return (\n                <motion.button\n                  className={`relative py-[8px] px-4 text-sm font-medium font-sans transition ease-in-out duration-200 ${\n                    activeTab !== language ? 'text-slate-11' : 'text-slate-12'\n                  }`}\n                  onClick={() => setActiveTab(language)}\n                  onHoverStart={() => setHovered(language)}\n                  onHoverEnd={() => setHovered('')}\n                  key={language}\n                >\n                  {isHovered && (\n                    <motion.span\n                      layoutId=\"nav\"\n                      className=\"absolute left-0 right-0 top-0 bottom-0 bg-slate-4\"\n                      initial={{ opacity: 0 }}\n                      animate={{ opacity: 1 }}\n                      exit={{ opacity: 0 }}\n                    />\n                  )}\n                  {languageMap[language]}\n                </motion.button>\n              );\n            })}\n          </AnimateSharedLayout>\n        </div>\n        <Tooltip>\n          <Tooltip.Trigger className=\"absolute top-2 right-2 hidden md:block\">\n            {renderClipboardIcon()}\n          </Tooltip.Trigger>\n          <Tooltip.Content>Copy to Clipboard</Tooltip.Content>\n        </Tooltip>\n        <Tooltip>\n          <Tooltip.Trigger className=\"text-gray-11 absolute top-2 right-8 hidden md:block\">\n            {renderDownloadIcon()}\n          </Tooltip.Trigger>\n          <Tooltip.Content>Download</Tooltip.Content>\n        </Tooltip>\n      </div>\n      {markups.map(({ language, content }) => {\n        return (\n          <div\n            className={`${activeTab !== language && 'hidden'}`}\n            key={language}\n          >\n            <Code language={language}>{content}</Code>\n          </div>\n        );\n      })}\n    </pre>\n  );\n};\n",
+        content: "import { Language } from 'prism-react-renderer';\nimport { IconButton } from './icon-button';\nimport { IconClipboard } from './icon-clipboard';\nimport { IconDownload } from './icon-download';\nimport { IconCheck } from './icon-check';\nimport { copyTextToClipboard } from '../utils';\nimport languageMap from '../utils/language-map';\nimport { Tooltip } from './tooltip';\nimport { Code } from './code';\nimport { AnimateSharedLayout, motion } from 'framer-motion';\nimport * as React from 'react';\n\ninterface CodeContainerProps {\n  markups: MarkupProps[];\n}\n\ninterface MarkupProps {\n  language: Language;\n  content: string;\n}\n\nexport const CodeContainer: React.FC<Readonly<CodeContainerProps>> = ({\n  markups,\n}) => {\n  const [hovered, setHovered] = React.useState('');\n  const [isCopied, setIsCopied] = React.useState(false);\n  const [activeTab, setActiveTab] = React.useState(markups[0].language);\n  let file = null;\n  let url = null;\n\n  const renderDownloadIcon = () => {\n    let value = markups.filter((markup) => markup.language === activeTab);\n    file = new File([value[0].content], `email.${value[0].language}`);\n    url = URL.createObjectURL(file);\n\n    return (\n      <a\n        href={url}\n        download={file.name}\n        className=\"text-slate-11 transition ease-in-out duration-200 hover:text-slate-12\"\n      >\n        <IconDownload />\n      </a>\n    );\n  };\n\n  const renderClipboardIcon = () => {\n    const handleClipboard = async () => {\n      const activeContent = markups.filter(({ language }) => {\n        return activeTab === language;\n      });\n      setIsCopied(true);\n      await copyTextToClipboard(activeContent[0].content);\n      setTimeout(() => setIsCopied(false), 3000);\n    };\n\n    return (\n      <IconButton onClick={handleClipboard}>\n        {isCopied ? <IconCheck /> : <IconClipboard />}\n      </IconButton>\n    );\n  };\n\n  React.useEffect(() => {\n    setIsCopied(false);\n  }, [activeTab]);\n\n  return (\n    <pre\n      className={\n        'border-slate-6 relative w-full items-center whitespace-pre rounded-md border text-sm backdrop-blur-md'\n      }\n      style={{\n        lineHeight: '130%',\n        background:\n          'linear-gradient(145.37deg, rgba(255, 255, 255, 0.09) -8.75%, rgba(255, 255, 255, 0.027) 83.95%)',\n        boxShadow: 'rgb(0 0 0 / 10%) 0px 5px 30px -5px',\n      }}\n    >\n      <div className=\"h-9 border-b border-slate-6\">\n        <div className=\"flex\">\n          <AnimateSharedLayout>\n            {markups.map(({ language }) => {\n              const isHovered = hovered === language;\n              return (\n                <motion.button\n                  className={`relative py-[8px] px-4 text-sm font-medium font-sans transition ease-in-out duration-200 ${\n                    activeTab !== language ? 'text-slate-11' : 'text-slate-12'\n                  }`}\n                  onClick={() => setActiveTab(language)}\n                  onHoverStart={() => setHovered(language)}\n                  onHoverEnd={() => setHovered('')}\n                  key={language}\n                >\n                  {isHovered && (\n                    <motion.span\n                      layoutId=\"nav\"\n                      className=\"absolute left-0 right-0 top-0 bottom-0 bg-slate-4\"\n                      initial={{ opacity: 0 }}\n                      animate={{ opacity: 1 }}\n                      exit={{ opacity: 0 }}\n                    />\n                  )}\n                  {languageMap[language]}\n                </motion.button>\n              );\n            })}\n          </AnimateSharedLayout>\n        </div>\n        <Tooltip>\n          <Tooltip.Trigger className=\"absolute top-2 right-2 hidden md:block\">\n            {renderClipboardIcon()}\n          </Tooltip.Trigger>\n          <Tooltip.Content>Copy to Clipboard</Tooltip.Content>\n        </Tooltip>\n        <Tooltip>\n          <Tooltip.Trigger className=\"text-gray-11 absolute top-2 right-8 hidden md:block\">\n            {renderDownloadIcon()}\n          </Tooltip.Trigger>\n          <Tooltip.Content>Download</Tooltip.Content>\n        </Tooltip>\n      </div>\n      {markups.map(({ language, content }) => {\n        return (\n          <div\n            className={`${activeTab !== language && 'hidden'}`}\n            key={language}\n          >\n            <Code language={language}>{content}</Code>\n          </div>\n        );\n      })}\n    </pre>\n  );\n};\n",
     },
     {
         title: 'code.tsx',
-        content: "import classnames from 'classnames';\nimport Highlight, { defaultProps, Language } from 'prism-react-renderer';\nimport * as React from 'react';\n\ninterface CodeProps {\n  children: any;\n  className?: string;\n  language?: Language;\n}\n\nconst theme = {\n  plain: {\n    color: '#EDEDEF',\n    fontSize: 13,\n    fontFamily: 'MonoLisa, Menlo, monospace',\n  },\n  styles: [\n    {\n      types: ['comment'],\n      style: {\n        color: '#706F78',\n      },\n    },\n    {\n      types: ['atrule', 'keyword', 'attr-name', 'selector'],\n      style: {\n        color: '#7E7D86',\n      },\n    },\n    {\n      types: ['punctuation', 'operator'],\n      style: {\n        color: '#706F78',\n      },\n    },\n    {\n      types: ['class-name', 'function', 'tag', 'key-white'],\n      style: {\n        color: '#EDEDEF',\n      },\n    },\n  ],\n};\n\nexport const Code: React.FC<Readonly<CodeProps>> = ({\n  children,\n  language = 'html',\n}) => {\n  const [isCopied, setIsCopied] = React.useState(false);\n  const value = children.trim();\n\n  const file = new File([value], `email.${language}`);\n  const url = URL.createObjectURL(file);\n\n  return (\n    <Highlight\n      {...defaultProps}\n      theme={theme}\n      code={value}\n      language={language as Language}\n    >\n      {({ tokens, getLineProps, getTokenProps }) => (\n        <>\n          <div\n            className=\"absolute right-0 top-0 h-px w-[200px]\"\n            style={{\n              background:\n                '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%)',\n            }}\n          />\n          <div className=\"p-4\">\n            {tokens.map((line, i) => {\n              return (\n                <div\n                  key={i}\n                  {...getLineProps({ line, key: i })}\n                  className={classnames('whitespace-pre', {\n                    \"before:text-slate-11 before:mr-2 before:content-['$']\":\n                      language === 'bash' && tokens && tokens.length === 1,\n                  })}\n                >\n                  {line.map((token, key) => {\n                    const isException =\n                      token.content === 'from' &&\n                      line[key + 1]?.content === ':';\n                    const newTypes = isException\n                      ? [...token.types, 'key-white']\n                      : token.types;\n                    token.types = newTypes;\n\n                    return (\n                      <React.Fragment key={key}>\n                        <span {...getTokenProps({ token, key })} />\n                      </React.Fragment>\n                    );\n                  })}\n                </div>\n              );\n            })}\n          </div>\n          <div\n            className=\"absolute left-0 bottom-0 h-px w-[200px]\"\n            style={{\n              background:\n                '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%)',\n            }}\n          />\n        </>\n      )}\n    </Highlight>\n  );\n};\n",
+        content: "import classnames from 'classnames';\nimport Highlight, { defaultProps, Language } from 'prism-react-renderer';\nimport * as React from 'react';\n\ninterface CodeProps {\n  children: any;\n  className?: string;\n  language?: Language;\n}\n\nconst theme = {\n  plain: {\n    color: '#EDEDEF',\n    fontSize: 13,\n    fontFamily: 'MonoLisa, Menlo, monospace',\n  },\n  styles: [\n    {\n      types: ['comment'],\n      style: {\n        color: '#706F78',\n      },\n    },\n    {\n      types: ['atrule', 'keyword', 'attr-name', 'selector'],\n      style: {\n        color: '#7E7D86',\n      },\n    },\n    {\n      types: ['punctuation', 'operator'],\n      style: {\n        color: '#706F78',\n      },\n    },\n    {\n      types: ['class-name', 'function', 'tag', 'key-white'],\n      style: {\n        color: '#EDEDEF',\n      },\n    },\n  ],\n};\n\nexport const Code: React.FC<Readonly<CodeProps>> = ({\n  children,\n  language = 'html',\n}) => {\n  const [isCopied, setIsCopied] = React.useState(false);\n  const value = children.trim();\n\n  const file = new File([value], `email.${language}`);\n  const url = URL.createObjectURL(file);\n\n  return (\n    <Highlight\n      {...defaultProps}\n      theme={theme}\n      code={value}\n      language={language as Language}\n    >\n      {({ tokens, getLineProps, getTokenProps }) => (\n        <>\n          <div\n            className=\"absolute right-0 top-0 h-px w-[200px]\"\n            style={{\n              background:\n                '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%)',\n            }}\n          />\n          <div className=\"p-4 h-[650px] overflow-auto\">\n            {tokens.map((line, i) => {\n              return (\n                <div\n                  key={i}\n                  {...getLineProps({ line, key: i })}\n                  className={classnames('whitespace-pre', {\n                    \"before:text-slate-11 before:mr-2 before:content-['$']\":\n                      language === 'bash' && tokens && tokens.length === 1,\n                  })}\n                >\n                  {line.map((token, key) => {\n                    const isException =\n                      token.content === 'from' &&\n                      line[key + 1]?.content === ':';\n                    const newTypes = isException\n                      ? [...token.types, 'key-white']\n                      : token.types;\n                    token.types = newTypes;\n\n                    return (\n                      <React.Fragment key={key}>\n                        <span {...getTokenProps({ token, key })} />\n                      </React.Fragment>\n                    );\n                  })}\n                </div>\n              );\n            })}\n          </div>\n          <div\n            className=\"absolute left-0 bottom-0 h-px w-[200px]\"\n            style={{\n              background:\n                '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%)',\n            }}\n          />\n        </>\n      )}\n    </Highlight>\n  );\n};\n",
     },
     {
         title: 'heading.tsx',

package/dist/source/_preview/root.js

@@ -12,7 +12,7 @@ exports.root = [
     },
     {
         title: 'package.json',
-        content: '{\n  "name": "react-email-preview",\n  "version": "0.0.10",\n  "description": "The React Email preview application",\n  "license": "MIT",\n  "scripts": {\n    "dev": "next dev",\n    "build": "next build",\n    "start": "next start",\n    "lint": "next lint",\n    "format:check": "prettier --check \\"**/*.{ts,tsx,md}\\"",\n    "format": "prettier --write \\"**/*.{ts,tsx,md}\\""\n  },\n  "engines": {\n    "node": ">=18.0.0"\n  },\n  "dependencies": {\n    "@next/font": "13.0.4",\n    "@radix-ui/colors": "0.1.8",\n    "@radix-ui/react-collapsible": "1.0.1",\n    "@radix-ui/react-popover": "1.0.2",\n    "@radix-ui/react-slot": "1.0.1",\n    "@radix-ui/react-toggle-group": "1.0.1",\n    "@radix-ui/react-tooltip": "1.0.2",\n    "@react-email/render": "0.0.6",\n    "classnames": "2.3.2",\n    "framer-motion": "8.4.6",\n    "next": "13.0.4",\n    "prism-react-renderer": "1.3.5",\n    "react": "18.2.0",\n    "react-dom": "18.2.0"\n  },\n  "devDependencies": {\n    "@types/classnames": "2.3.1",\n    "@types/node": "18.11.9",\n    "@types/react": "18.0.25",\n    "@types/react-dom": "18.0.9",\n    "autoprefixer": "10.4.13",\n    "postcss": "8.4.19",\n    "tailwindcss": "3.2.4",\n    "typescript": "4.9.3"\n  }\n}\n',
+        content: '{\n  "name": "react-email-preview",\n  "version": "0.0.11",\n  "description": "The React Email preview application",\n  "license": "MIT",\n  "scripts": {\n    "dev": "next dev",\n    "build": "next build",\n    "start": "next start",\n    "lint": "next lint",\n    "format:check": "prettier --check \\"**/*.{ts,tsx,md}\\"",\n    "format": "prettier --write \\"**/*.{ts,tsx,md}\\""\n  },\n  "engines": {\n    "node": ">=16.0.0"\n  },\n  "dependencies": {\n    "@next/font": "13.0.4",\n    "@radix-ui/colors": "0.1.8",\n    "@radix-ui/react-collapsible": "1.0.1",\n    "@radix-ui/react-popover": "1.0.2",\n    "@radix-ui/react-slot": "1.0.1",\n    "@radix-ui/react-toggle-group": "1.0.1",\n    "@radix-ui/react-tooltip": "1.0.2",\n    "@react-email/render": "0.0.6",\n    "classnames": "2.3.2",\n    "framer-motion": "8.4.6",\n    "next": "13.0.4",\n    "prism-react-renderer": "1.3.5",\n    "react": "18.2.0",\n    "react-dom": "18.2.0"\n  },\n  "devDependencies": {\n    "@types/classnames": "2.3.1",\n    "@types/node": "18.11.9",\n    "@types/react": "18.0.25",\n    "@types/react-dom": "18.0.9",\n    "autoprefixer": "10.4.13",\n    "postcss": "8.4.19",\n    "tailwindcss": "3.2.4",\n    "typescript": "4.9.3"\n  }\n}\n',
     },
     {
         title: 'postcss.config.js',

package/dist/source/commands/dev.d.ts

@@ -1 +1,5 @@
-export declare const dev: () => Promise<void>;
+interface Args {
+    dir: string;
+}
+export declare const dev: ({ dir }: Args) => Promise<void>;
+export {};

package/dist/source/commands/dev.js

@@ -18,7 +18,9 @@ const ora_1 = __importDefault(require("ora"));
 const read_pkg_1 = __importDefault(require("read-pkg"));
 const shelljs_1 = __importDefault(require("shelljs"));
 const styles_1 = require("../_preview/styles");
-const dev = async () => {
+const dev = async ({ dir }) => {
+    const emailDir = convertToAbsolutePath(dir);
+    const watcherInstance = (0, utils_1.createWatcherInstance)(emailDir);
     try {
         const hasReactEmailDirectory = (0, utils_1.checkDirectoryExist)(utils_1.REACT_EMAIL_ROOT);
         let packageManager;
@@ -31,10 +33,10 @@ const dev = async () => {
         if (hasReactEmailDirectory) {
             const isUpToDate = await (0, utils_1.checkPackageIsUpToDate)();
             if (isUpToDate) {
-                await Promise.all([generateEmailsPreview(), syncPkg()]);
+                await Promise.all([generateEmailsPreview(emailDir), syncPkg()]);
                 await installDependencies(packageManager);
                 shelljs_1.default.exec(`${packageManager} run dev`, { async: true });
-                (0, utils_1.watcher)();
+                (0, utils_1.watcher)(watcherInstance, emailDir);
                 return;
             }
             await fs_1.default.promises.rm(utils_1.REACT_EMAIL_ROOT, { recursive: true });
@@ -42,17 +44,18 @@ const dev = async () => {
         await createBasicStructure();
         await createAppDirectories();
         await createAppFiles();
-        await Promise.all([generateEmailsPreview(), syncPkg()]);
+        await Promise.all([generateEmailsPreview(emailDir), syncPkg()]);
         await installDependencies(packageManager);
         shelljs_1.default.exec(`${packageManager} run dev`, { async: true });
-        (0, utils_1.watcher)();
+        (0, utils_1.watcher)(watcherInstance, emailDir);
     }
     catch (error) {
-        await utils_1.watcherInstance.close();
+        await watcherInstance.close();
         shelljs_1.default.exit(1);
     }
 };
 exports.dev = dev;
+const convertToAbsolutePath = (dir) => path_1.default.isAbsolute(dir) ? dir : path_1.default.join(process.cwd(), dir);
 const createBasicStructure = async () => {
     try {
         // Create `.react-email` directory
@@ -111,12 +114,12 @@ const createAppFiles = async () => {
         throw new Error('Error creating app files');
     }
 };
-const generateEmailsPreview = async () => {
+const generateEmailsPreview = async (emailDir) => {
     try {
         const spinner = (0, ora_1.default)('Generating emails preview').start();
-        await createEmailPreviews();
-        await createStatisFiles();
-        await createComponents();
+        await createEmailPreviews(emailDir);
+        await createStaticFiles(emailDir);
+        await createComponents(emailDir);
         spinner.stopAndPersist({
             symbol: log_symbols_1.default.success,
             text: 'Emails preview generated',
@@ -126,10 +129,10 @@ const generateEmailsPreview = async () => {
         console.log({ error });
     }
 };
-const createEmailPreviews = async () => {
-    const hasEmailsDirectory = (0, utils_1.checkDirectoryExist)(utils_1.CLIENT_EMAILS_PATH);
+const createEmailPreviews = async (emailDir) => {
+    const hasEmailsDirectory = (0, utils_1.checkDirectoryExist)(emailDir);
     const isEmailsDirectoryEmpty = hasEmailsDirectory
-        ? await (0, utils_1.checkEmptyDirectory)(utils_1.CLIENT_EMAILS_PATH)
+        ? await (0, utils_1.checkEmptyDirectory)(emailDir)
         : true;
     if (isEmailsDirectoryEmpty) {
     }
@@ -137,30 +140,32 @@ const createEmailPreviews = async () => {
     if (hasPackageEmailsDirectory) {
         await fs_1.default.promises.rm(utils_1.PACKAGE_EMAILS_PATH, { recursive: true });
     }
-    await (0, cpy_1.default)(`${utils_1.CLIENT_EMAILS_PATH}/*{.tsx,.jsx}`, utils_1.PACKAGE_EMAILS_PATH);
+    await (0, cpy_1.default)(path_1.default.join(emailDir, '*{.tsx,.jsx}'), utils_1.PACKAGE_EMAILS_PATH);
 };
-const createStatisFiles = async () => {
+const createStaticFiles = async (emailDir) => {
     const hasPackageStaticDirectory = (0, utils_1.checkDirectoryExist)(`${utils_1.REACT_EMAIL_ROOT}/public/static`);
-    const hasStaticDirectory = (0, utils_1.checkDirectoryExist)(`${utils_1.CLIENT_EMAILS_PATH}/static`);
+    const staticDir = path_1.default.join(emailDir, 'static');
+    const hasStaticDirectory = (0, utils_1.checkDirectoryExist)(staticDir);
     if (hasPackageStaticDirectory) {
         await fs_1.default.promises.rm(`${utils_1.REACT_EMAIL_ROOT}/public/static`, {
             recursive: true,
         });
     }
     if (hasStaticDirectory) {
-        await (0, cpy_1.default)(`${utils_1.CLIENT_EMAILS_PATH}/static`, `${utils_1.REACT_EMAIL_ROOT}/public/static`);
+        await (0, cpy_1.default)(staticDir, `${utils_1.REACT_EMAIL_ROOT}/public/static`);
     }
 };
-const createComponents = async () => {
+const createComponents = async (emailDir) => {
     const hasPackageComponentsDirectory = (0, utils_1.checkDirectoryExist)(`${utils_1.PACKAGE_EMAILS_PATH}/components`);
-    const hasComponentsDirectory = (0, utils_1.checkDirectoryExist)(`${utils_1.CLIENT_EMAILS_PATH}/components`);
+    const componentDir = path_1.default.join(emailDir, 'components');
+    const hasComponentsDirectory = (0, utils_1.checkDirectoryExist)(componentDir);
     if (hasPackageComponentsDirectory) {
         await fs_1.default.promises.rm(`${utils_1.PACKAGE_EMAILS_PATH}/components`, {
             recursive: true,
         });
     }
     if (hasComponentsDirectory) {
-        await (0, cpy_1.default)(`${utils_1.CLIENT_EMAILS_PATH}/components`, `${utils_1.PACKAGE_EMAILS_PATH}/components`);
+        await (0, cpy_1.default)(componentDir, `${utils_1.PACKAGE_EMAILS_PATH}/components`);
     }
 };
 const syncPkg = async () => {

package/dist/source/commands/export.d.ts

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

package/dist/source/commands/export.js

@@ -37,14 +37,15 @@ const fs_1 = require("fs");
 const cpy_1 = __importDefault(require("cpy"));
 const normalize_path_1 = __importDefault(require("normalize-path"));
 const utils_1 = require("../utils");
+const path_1 = __importDefault(require("path"));
 /*
   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 exportTemplates = async (outDir, srcDir, 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}`));
+    const allTemplates = glob_1.glob.sync((0, normalize_path_1.default)(path_1.default.join(srcDir, '*.{tsx,jsx}')));
     esbuild_1.default.buildSync({
         bundle: true,
         entryPoints: allTemplates,
@@ -62,9 +63,10 @@ const exportTemplates = async (outDir, options) => {
         (0, fs_1.writeFileSync)(htmlPath, rendered);
         (0, fs_1.unlinkSync)(template);
     }
-    const hasStaticDirectory = (0, utils_1.checkDirectoryExist)(`${utils_1.CLIENT_EMAILS_PATH}/static`);
+    const staticDir = path_1.default.join(srcDir, 'static');
+    const hasStaticDirectory = (0, utils_1.checkDirectoryExist)(staticDir);
     if (hasStaticDirectory) {
-        await (0, cpy_1.default)(`${utils_1.CLIENT_EMAILS_PATH}/static`, `${outDir}/static`);
+        await (0, cpy_1.default)(staticDir, `${outDir}/static`);
     }
     const fileTree = (0, tree_node_cli_1.default)(outDir, {
         allFiles: true,

package/dist/source/index.js

@@ -5,9 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 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 export_1 = require("./commands/export");
+const constants_1 = require("./utils/constants");
 const package_json_1 = __importDefault(require("../package.json"));
 extra_typings_1.program
     .name(constants_1.PACKAGE_NAME)
@@ -16,12 +16,14 @@ extra_typings_1.program
 extra_typings_1.program
     .command('dev')
     .description('Starts the application in development mode')
-    .action(dev_1.dev);
+    .option('-d, --dir <path>', 'Directory with your email templates', './emails')
+    .action((args) => (0, dev_1.dev)(args));
 extra_typings_1.program
     .command('export')
     .description('Build the templates to the `out` directory')
     .option('--outDir <path>', 'Output directory', 'out')
     .option('-p, --pretty', 'Pretty print the output', false)
-    .option('-t, --plainText', 'Set output format as plain Text', false)
-    .action(({ outDir, pretty, plainText }) => (0, export_1.exportTemplates)(outDir, { pretty, plainText }));
+    .option('-t, --plainText', 'Set output format as plain text', false)
+    .option('-d, --dir <path>', 'Directory with your email templates', './emails')
+    .action(({ outDir, pretty, plainText, dir: srcDir }) => (0, export_1.exportTemplates)(outDir, srcDir, { pretty, plainText }));
 extra_typings_1.program.parse();

package/dist/source/utils/watcher.d.ts

@@ -1,3 +1,3 @@
-import chokidar from 'chokidar';
-export declare const watcherInstance: chokidar.FSWatcher;
-export declare const watcher: () => chokidar.FSWatcher;
+import chokidar, { FSWatcher } from 'chokidar';
+export declare const createWatcherInstance: (watchDir: string) => chokidar.FSWatcher;
+export declare const watcher: (watcherInstance: FSWatcher, watchDir: string) => void;

package/dist/source/utils/watcher.js

@@ -3,33 +3,38 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.watcher = exports.watcherInstance = void 0;
+exports.watcher = exports.createWatcherInstance = void 0;
 const chokidar_1 = __importDefault(require("chokidar"));
 const constants_1 = require("./constants");
 const fs_1 = __importDefault(require("fs"));
 const path_1 = __importDefault(require("path"));
 const cpy_1 = __importDefault(require("cpy"));
-exports.watcherInstance = chokidar_1.default.watch(constants_1.CLIENT_EMAILS_PATH, {
+const createWatcherInstance = (watchDir) => chokidar_1.default.watch(watchDir, {
     ignoreInitial: true,
     cwd: constants_1.CURRENT_PATH,
     ignored: /(^|[\/\\])\../,
 });
-const watcher = () => exports.watcherInstance.on('all', async (event, filename) => {
-    if (event === constants_1.EVENT_FILE_DELETED) {
+exports.createWatcherInstance = createWatcherInstance;
+const watcher = (watcherInstance, watchDir) => {
+    watcherInstance.on('all', async (event, filename) => {
         const file = filename.split(path_1.default.sep);
-        if (file[1] === 'static' && file[2]) {
-            await fs_1.default.promises.rm(path_1.default.join(constants_1.REACT_EMAIL_ROOT, 'public', 'static', file[2]));
+        if (file[1] === undefined) {
+            return;
+        }
+        if (event === constants_1.EVENT_FILE_DELETED) {
+            if (file[1] === 'static' && file[2]) {
+                await fs_1.default.promises.rm(path_1.default.join(constants_1.REACT_EMAIL_ROOT, 'public', 'static', file[2]));
+                return;
+            }
+            await fs_1.default.promises.rm(path_1.default.join(constants_1.REACT_EMAIL_ROOT, filename));
             return;
         }
-        await fs_1.default.promises.rm(path_1.default.join(constants_1.REACT_EMAIL_ROOT, filename));
-    }
-    else {
-        const file = filename.split(path_1.default.sep);
         if (file[1] === 'static' && file[2]) {
-            await (0, cpy_1.default)(`${constants_1.CLIENT_EMAILS_PATH}/static/${file[2]}`, `${constants_1.REACT_EMAIL_ROOT}/public/static`);
+            const srcPath = path_1.default.join(watchDir, 'static', file[2]);
+            await (0, cpy_1.default)(srcPath, `${constants_1.REACT_EMAIL_ROOT}/public/static`);
             return;
         }
-        await (0, cpy_1.default)(path_1.default.join(constants_1.CURRENT_PATH, filename), path_1.default.join(constants_1.REACT_EMAIL_ROOT, file.slice(0, -1).join(path_1.default.sep)));
-    }
-});
+        await (0, cpy_1.default)(path_1.default.join(watchDir, ...file.slice(1)), path_1.default.join(constants_1.PACKAGE_EMAILS_PATH, ...file.slice(1, -1)));
+    });
+};
 exports.watcher = watcher;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-email",
-  "version": "1.7.5",
+  "version": "1.7.7",
   "description": "A live preview of your emails right in your browser.",
   "bin": {
     "email": "./dist/index.js"

package/preview/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-email-preview",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "The React Email preview application",
   "license": "MIT",
   "scripts": {
@@ -12,7 +12,7 @@
     "format": "prettier --write \"**/*.{ts,tsx,md}\""
   },
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=16.0.0"
   },
   "dependencies": {
     "@next/font": "13.0.4",

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

@@ -68,7 +68,7 @@ export const CodeContainer: React.FC<Readonly<CodeContainerProps>> = ({
   return (
     <pre
       className={
-        'border-slate-6 relative w-full items-center overflow-auto whitespace-pre rounded-md border text-sm backdrop-blur-md'
+        'border-slate-6 relative w-full items-center whitespace-pre rounded-md border text-sm backdrop-blur-md'
       }
       style={{
         lineHeight: '130%',

package/preview/src/components/code.tsx

@@ -68,7 +68,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%)',
             }}
           />
-          <div className="p-4">
+          <div className="p-4 h-[650px] overflow-auto">
             {tokens.map((line, i) => {
               return (
                 <div

package/source/_preview/components.ts

@@ -7,12 +7,12 @@ export const components = [
   {
     title: 'code-container.tsx',
     content:
-      "import { Language } from 'prism-react-renderer';\nimport { IconButton } from './icon-button';\nimport { IconClipboard } from './icon-clipboard';\nimport { IconDownload } from './icon-download';\nimport { IconCheck } from './icon-check';\nimport { copyTextToClipboard } from '../utils';\nimport languageMap from '../utils/language-map';\nimport { Tooltip } from './tooltip';\nimport { Code } from './code';\nimport { AnimateSharedLayout, motion } from 'framer-motion';\nimport * as React from 'react';\n\ninterface CodeContainerProps {\n  markups: MarkupProps[];\n}\n\ninterface MarkupProps {\n  language: Language;\n  content: string;\n}\n\nexport const CodeContainer: React.FC<Readonly<CodeContainerProps>> = ({\n  markups,\n}) => {\n  const [hovered, setHovered] = React.useState('');\n  const [isCopied, setIsCopied] = React.useState(false);\n  const [activeTab, setActiveTab] = React.useState(markups[0].language);\n  let file = null;\n  let url = null;\n\n  const renderDownloadIcon = () => {\n    let value = markups.filter((markup) => markup.language === activeTab);\n    file = new File([value[0].content], `email.${value[0].language}`);\n    url = URL.createObjectURL(file);\n\n    return (\n      <a\n        href={url}\n        download={file.name}\n        className=\"text-slate-11 transition ease-in-out duration-200 hover:text-slate-12\"\n      >\n        <IconDownload />\n      </a>\n    );\n  };\n\n  const renderClipboardIcon = () => {\n    const handleClipboard = async () => {\n      const activeContent = markups.filter(({ language }) => {\n        return activeTab === language;\n      });\n      setIsCopied(true);\n      await copyTextToClipboard(activeContent[0].content);\n      setTimeout(() => setIsCopied(false), 3000);\n    };\n\n    return (\n      <IconButton onClick={handleClipboard}>\n        {isCopied ? <IconCheck /> : <IconClipboard />}\n      </IconButton>\n    );\n  };\n\n  React.useEffect(() => {\n    setIsCopied(false);\n  }, [activeTab]);\n\n  return (\n    <pre\n      className={\n        'border-slate-6 relative w-full items-center overflow-auto whitespace-pre rounded-md border text-sm backdrop-blur-md'\n      }\n      style={{\n        lineHeight: '130%',\n        background:\n          'linear-gradient(145.37deg, rgba(255, 255, 255, 0.09) -8.75%, rgba(255, 255, 255, 0.027) 83.95%)',\n        boxShadow: 'rgb(0 0 0 / 10%) 0px 5px 30px -5px',\n      }}\n    >\n      <div className=\"h-9 border-b border-slate-6\">\n        <div className=\"flex\">\n          <AnimateSharedLayout>\n            {markups.map(({ language }) => {\n              const isHovered = hovered === language;\n              return (\n                <motion.button\n                  className={`relative py-[8px] px-4 text-sm font-medium font-sans transition ease-in-out duration-200 ${\n                    activeTab !== language ? 'text-slate-11' : 'text-slate-12'\n                  }`}\n                  onClick={() => setActiveTab(language)}\n                  onHoverStart={() => setHovered(language)}\n                  onHoverEnd={() => setHovered('')}\n                  key={language}\n                >\n                  {isHovered && (\n                    <motion.span\n                      layoutId=\"nav\"\n                      className=\"absolute left-0 right-0 top-0 bottom-0 bg-slate-4\"\n                      initial={{ opacity: 0 }}\n                      animate={{ opacity: 1 }}\n                      exit={{ opacity: 0 }}\n                    />\n                  )}\n                  {languageMap[language]}\n                </motion.button>\n              );\n            })}\n          </AnimateSharedLayout>\n        </div>\n        <Tooltip>\n          <Tooltip.Trigger className=\"absolute top-2 right-2 hidden md:block\">\n            {renderClipboardIcon()}\n          </Tooltip.Trigger>\n          <Tooltip.Content>Copy to Clipboard</Tooltip.Content>\n        </Tooltip>\n        <Tooltip>\n          <Tooltip.Trigger className=\"text-gray-11 absolute top-2 right-8 hidden md:block\">\n            {renderDownloadIcon()}\n          </Tooltip.Trigger>\n          <Tooltip.Content>Download</Tooltip.Content>\n        </Tooltip>\n      </div>\n      {markups.map(({ language, content }) => {\n        return (\n          <div\n            className={`${activeTab !== language && 'hidden'}`}\n            key={language}\n          >\n            <Code language={language}>{content}</Code>\n          </div>\n        );\n      })}\n    </pre>\n  );\n};\n",
+      "import { Language } from 'prism-react-renderer';\nimport { IconButton } from './icon-button';\nimport { IconClipboard } from './icon-clipboard';\nimport { IconDownload } from './icon-download';\nimport { IconCheck } from './icon-check';\nimport { copyTextToClipboard } from '../utils';\nimport languageMap from '../utils/language-map';\nimport { Tooltip } from './tooltip';\nimport { Code } from './code';\nimport { AnimateSharedLayout, motion } from 'framer-motion';\nimport * as React from 'react';\n\ninterface CodeContainerProps {\n  markups: MarkupProps[];\n}\n\ninterface MarkupProps {\n  language: Language;\n  content: string;\n}\n\nexport const CodeContainer: React.FC<Readonly<CodeContainerProps>> = ({\n  markups,\n}) => {\n  const [hovered, setHovered] = React.useState('');\n  const [isCopied, setIsCopied] = React.useState(false);\n  const [activeTab, setActiveTab] = React.useState(markups[0].language);\n  let file = null;\n  let url = null;\n\n  const renderDownloadIcon = () => {\n    let value = markups.filter((markup) => markup.language === activeTab);\n    file = new File([value[0].content], `email.${value[0].language}`);\n    url = URL.createObjectURL(file);\n\n    return (\n      <a\n        href={url}\n        download={file.name}\n        className=\"text-slate-11 transition ease-in-out duration-200 hover:text-slate-12\"\n      >\n        <IconDownload />\n      </a>\n    );\n  };\n\n  const renderClipboardIcon = () => {\n    const handleClipboard = async () => {\n      const activeContent = markups.filter(({ language }) => {\n        return activeTab === language;\n      });\n      setIsCopied(true);\n      await copyTextToClipboard(activeContent[0].content);\n      setTimeout(() => setIsCopied(false), 3000);\n    };\n\n    return (\n      <IconButton onClick={handleClipboard}>\n        {isCopied ? <IconCheck /> : <IconClipboard />}\n      </IconButton>\n    );\n  };\n\n  React.useEffect(() => {\n    setIsCopied(false);\n  }, [activeTab]);\n\n  return (\n    <pre\n      className={\n        'border-slate-6 relative w-full items-center whitespace-pre rounded-md border text-sm backdrop-blur-md'\n      }\n      style={{\n        lineHeight: '130%',\n        background:\n          'linear-gradient(145.37deg, rgba(255, 255, 255, 0.09) -8.75%, rgba(255, 255, 255, 0.027) 83.95%)',\n        boxShadow: 'rgb(0 0 0 / 10%) 0px 5px 30px -5px',\n      }}\n    >\n      <div className=\"h-9 border-b border-slate-6\">\n        <div className=\"flex\">\n          <AnimateSharedLayout>\n            {markups.map(({ language }) => {\n              const isHovered = hovered === language;\n              return (\n                <motion.button\n                  className={`relative py-[8px] px-4 text-sm font-medium font-sans transition ease-in-out duration-200 ${\n                    activeTab !== language ? 'text-slate-11' : 'text-slate-12'\n                  }`}\n                  onClick={() => setActiveTab(language)}\n                  onHoverStart={() => setHovered(language)}\n                  onHoverEnd={() => setHovered('')}\n                  key={language}\n                >\n                  {isHovered && (\n                    <motion.span\n                      layoutId=\"nav\"\n                      className=\"absolute left-0 right-0 top-0 bottom-0 bg-slate-4\"\n                      initial={{ opacity: 0 }}\n                      animate={{ opacity: 1 }}\n                      exit={{ opacity: 0 }}\n                    />\n                  )}\n                  {languageMap[language]}\n                </motion.button>\n              );\n            })}\n          </AnimateSharedLayout>\n        </div>\n        <Tooltip>\n          <Tooltip.Trigger className=\"absolute top-2 right-2 hidden md:block\">\n            {renderClipboardIcon()}\n          </Tooltip.Trigger>\n          <Tooltip.Content>Copy to Clipboard</Tooltip.Content>\n        </Tooltip>\n        <Tooltip>\n          <Tooltip.Trigger className=\"text-gray-11 absolute top-2 right-8 hidden md:block\">\n            {renderDownloadIcon()}\n          </Tooltip.Trigger>\n          <Tooltip.Content>Download</Tooltip.Content>\n        </Tooltip>\n      </div>\n      {markups.map(({ language, content }) => {\n        return (\n          <div\n            className={`${activeTab !== language && 'hidden'}`}\n            key={language}\n          >\n            <Code language={language}>{content}</Code>\n          </div>\n        );\n      })}\n    </pre>\n  );\n};\n",
   },
   {
     title: 'code.tsx',
     content:
-      "import classnames from 'classnames';\nimport Highlight, { defaultProps, Language } from 'prism-react-renderer';\nimport * as React from 'react';\n\ninterface CodeProps {\n  children: any;\n  className?: string;\n  language?: Language;\n}\n\nconst theme = {\n  plain: {\n    color: '#EDEDEF',\n    fontSize: 13,\n    fontFamily: 'MonoLisa, Menlo, monospace',\n  },\n  styles: [\n    {\n      types: ['comment'],\n      style: {\n        color: '#706F78',\n      },\n    },\n    {\n      types: ['atrule', 'keyword', 'attr-name', 'selector'],\n      style: {\n        color: '#7E7D86',\n      },\n    },\n    {\n      types: ['punctuation', 'operator'],\n      style: {\n        color: '#706F78',\n      },\n    },\n    {\n      types: ['class-name', 'function', 'tag', 'key-white'],\n      style: {\n        color: '#EDEDEF',\n      },\n    },\n  ],\n};\n\nexport const Code: React.FC<Readonly<CodeProps>> = ({\n  children,\n  language = 'html',\n}) => {\n  const [isCopied, setIsCopied] = React.useState(false);\n  const value = children.trim();\n\n  const file = new File([value], `email.${language}`);\n  const url = URL.createObjectURL(file);\n\n  return (\n    <Highlight\n      {...defaultProps}\n      theme={theme}\n      code={value}\n      language={language as Language}\n    >\n      {({ tokens, getLineProps, getTokenProps }) => (\n        <>\n          <div\n            className=\"absolute right-0 top-0 h-px w-[200px]\"\n            style={{\n              background:\n                '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%)',\n            }}\n          />\n          <div className=\"p-4\">\n            {tokens.map((line, i) => {\n              return (\n                <div\n                  key={i}\n                  {...getLineProps({ line, key: i })}\n                  className={classnames('whitespace-pre', {\n                    \"before:text-slate-11 before:mr-2 before:content-['$']\":\n                      language === 'bash' && tokens && tokens.length === 1,\n                  })}\n                >\n                  {line.map((token, key) => {\n                    const isException =\n                      token.content === 'from' &&\n                      line[key + 1]?.content === ':';\n                    const newTypes = isException\n                      ? [...token.types, 'key-white']\n                      : token.types;\n                    token.types = newTypes;\n\n                    return (\n                      <React.Fragment key={key}>\n                        <span {...getTokenProps({ token, key })} />\n                      </React.Fragment>\n                    );\n                  })}\n                </div>\n              );\n            })}\n          </div>\n          <div\n            className=\"absolute left-0 bottom-0 h-px w-[200px]\"\n            style={{\n              background:\n                '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%)',\n            }}\n          />\n        </>\n      )}\n    </Highlight>\n  );\n};\n",
+      "import classnames from 'classnames';\nimport Highlight, { defaultProps, Language } from 'prism-react-renderer';\nimport * as React from 'react';\n\ninterface CodeProps {\n  children: any;\n  className?: string;\n  language?: Language;\n}\n\nconst theme = {\n  plain: {\n    color: '#EDEDEF',\n    fontSize: 13,\n    fontFamily: 'MonoLisa, Menlo, monospace',\n  },\n  styles: [\n    {\n      types: ['comment'],\n      style: {\n        color: '#706F78',\n      },\n    },\n    {\n      types: ['atrule', 'keyword', 'attr-name', 'selector'],\n      style: {\n        color: '#7E7D86',\n      },\n    },\n    {\n      types: ['punctuation', 'operator'],\n      style: {\n        color: '#706F78',\n      },\n    },\n    {\n      types: ['class-name', 'function', 'tag', 'key-white'],\n      style: {\n        color: '#EDEDEF',\n      },\n    },\n  ],\n};\n\nexport const Code: React.FC<Readonly<CodeProps>> = ({\n  children,\n  language = 'html',\n}) => {\n  const [isCopied, setIsCopied] = React.useState(false);\n  const value = children.trim();\n\n  const file = new File([value], `email.${language}`);\n  const url = URL.createObjectURL(file);\n\n  return (\n    <Highlight\n      {...defaultProps}\n      theme={theme}\n      code={value}\n      language={language as Language}\n    >\n      {({ tokens, getLineProps, getTokenProps }) => (\n        <>\n          <div\n            className=\"absolute right-0 top-0 h-px w-[200px]\"\n            style={{\n              background:\n                '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%)',\n            }}\n          />\n          <div className=\"p-4 h-[650px] overflow-auto\">\n            {tokens.map((line, i) => {\n              return (\n                <div\n                  key={i}\n                  {...getLineProps({ line, key: i })}\n                  className={classnames('whitespace-pre', {\n                    \"before:text-slate-11 before:mr-2 before:content-['$']\":\n                      language === 'bash' && tokens && tokens.length === 1,\n                  })}\n                >\n                  {line.map((token, key) => {\n                    const isException =\n                      token.content === 'from' &&\n                      line[key + 1]?.content === ':';\n                    const newTypes = isException\n                      ? [...token.types, 'key-white']\n                      : token.types;\n                    token.types = newTypes;\n\n                    return (\n                      <React.Fragment key={key}>\n                        <span {...getTokenProps({ token, key })} />\n                      </React.Fragment>\n                    );\n                  })}\n                </div>\n              );\n            })}\n          </div>\n          <div\n            className=\"absolute left-0 bottom-0 h-px w-[200px]\"\n            style={{\n              background:\n                '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%)',\n            }}\n          />\n        </>\n      )}\n    </Highlight>\n  );\n};\n",
   },
   {
     title: 'heading.tsx',

package/source/_preview/root.ts

@@ -12,7 +12,7 @@ export const root = [
   {
     title: 'package.json',
     content:
-      '{\n  "name": "react-email-preview",\n  "version": "0.0.10",\n  "description": "The React Email preview application",\n  "license": "MIT",\n  "scripts": {\n    "dev": "next dev",\n    "build": "next build",\n    "start": "next start",\n    "lint": "next lint",\n    "format:check": "prettier --check \\"**/*.{ts,tsx,md}\\"",\n    "format": "prettier --write \\"**/*.{ts,tsx,md}\\""\n  },\n  "engines": {\n    "node": ">=18.0.0"\n  },\n  "dependencies": {\n    "@next/font": "13.0.4",\n    "@radix-ui/colors": "0.1.8",\n    "@radix-ui/react-collapsible": "1.0.1",\n    "@radix-ui/react-popover": "1.0.2",\n    "@radix-ui/react-slot": "1.0.1",\n    "@radix-ui/react-toggle-group": "1.0.1",\n    "@radix-ui/react-tooltip": "1.0.2",\n    "@react-email/render": "0.0.6",\n    "classnames": "2.3.2",\n    "framer-motion": "8.4.6",\n    "next": "13.0.4",\n    "prism-react-renderer": "1.3.5",\n    "react": "18.2.0",\n    "react-dom": "18.2.0"\n  },\n  "devDependencies": {\n    "@types/classnames": "2.3.1",\n    "@types/node": "18.11.9",\n    "@types/react": "18.0.25",\n    "@types/react-dom": "18.0.9",\n    "autoprefixer": "10.4.13",\n    "postcss": "8.4.19",\n    "tailwindcss": "3.2.4",\n    "typescript": "4.9.3"\n  }\n}\n',
+      '{\n  "name": "react-email-preview",\n  "version": "0.0.11",\n  "description": "The React Email preview application",\n  "license": "MIT",\n  "scripts": {\n    "dev": "next dev",\n    "build": "next build",\n    "start": "next start",\n    "lint": "next lint",\n    "format:check": "prettier --check \\"**/*.{ts,tsx,md}\\"",\n    "format": "prettier --write \\"**/*.{ts,tsx,md}\\""\n  },\n  "engines": {\n    "node": ">=16.0.0"\n  },\n  "dependencies": {\n    "@next/font": "13.0.4",\n    "@radix-ui/colors": "0.1.8",\n    "@radix-ui/react-collapsible": "1.0.1",\n    "@radix-ui/react-popover": "1.0.2",\n    "@radix-ui/react-slot": "1.0.1",\n    "@radix-ui/react-toggle-group": "1.0.1",\n    "@radix-ui/react-tooltip": "1.0.2",\n    "@react-email/render": "0.0.6",\n    "classnames": "2.3.2",\n    "framer-motion": "8.4.6",\n    "next": "13.0.4",\n    "prism-react-renderer": "1.3.5",\n    "react": "18.2.0",\n    "react-dom": "18.2.0"\n  },\n  "devDependencies": {\n    "@types/classnames": "2.3.1",\n    "@types/node": "18.11.9",\n    "@types/react": "18.0.25",\n    "@types/react-dom": "18.0.9",\n    "autoprefixer": "10.4.13",\n    "postcss": "8.4.19",\n    "tailwindcss": "3.2.4",\n    "typescript": "4.9.3"\n  }\n}\n',
   },
   {
     title: 'postcss.config.js',

package/source/commands/dev.ts

@@ -2,8 +2,8 @@ import {
   checkDirectoryExist,
   checkEmptyDirectory,
   checkPackageIsUpToDate,
-  CLIENT_EMAILS_PATH,
   createDirectory,
+  createWatcherInstance,
   CURRENT_PATH,
   PACKAGE_EMAILS_PATH,
   REACT_EMAIL_ROOT,
@@ -11,7 +11,6 @@ import {
   getPreviewPkg,
   watcher,
   PUBLIC_PATH,
-  watcherInstance,
 } from '../utils';
 import path from 'path';
 import fs from 'fs';
@@ -27,7 +26,13 @@ import readPackage from 'read-pkg';
 import shell from 'shelljs';
 import { styles } from '../_preview/styles';
 
-export const dev = async () => {
+interface Args {
+  dir: string;
+}
+
+export const dev = async ({ dir }: Args) => {
+  const emailDir = convertToAbsolutePath(dir);
+  const watcherInstance = createWatcherInstance(emailDir);
   try {
     const hasReactEmailDirectory = checkDirectoryExist(REACT_EMAIL_ROOT);
     let packageManager: PackageManager;
@@ -41,10 +46,10 @@ export const dev = async () => {
       const isUpToDate = await checkPackageIsUpToDate();
 
       if (isUpToDate) {
-        await Promise.all([generateEmailsPreview(), syncPkg()]);
+        await Promise.all([generateEmailsPreview(emailDir), syncPkg()]);
         await installDependencies(packageManager);
         shell.exec(`${packageManager} run dev`, { async: true });
-        watcher();
+        watcher(watcherInstance, emailDir);
         return;
       }
 
@@ -54,16 +59,19 @@ export const dev = async () => {
     await createBasicStructure();
     await createAppDirectories();
     await createAppFiles();
-    await Promise.all([generateEmailsPreview(), syncPkg()]);
+    await Promise.all([generateEmailsPreview(emailDir), syncPkg()]);
     await installDependencies(packageManager);
     shell.exec(`${packageManager} run dev`, { async: true });
-    watcher();
+    watcher(watcherInstance, emailDir);
   } catch (error) {
     await watcherInstance.close();
     shell.exit(1);
   }
 };
 
+const convertToAbsolutePath = (dir: string): string =>
+  path.isAbsolute(dir) ? dir : path.join(process.cwd(), dir);
+
 const createBasicStructure = async () => {
   try {
     // Create `.react-email` directory
@@ -129,13 +137,13 @@ const createAppFiles = async () => {
   }
 };
 
-const generateEmailsPreview = async () => {
+const generateEmailsPreview = async (emailDir: string) => {
   try {
     const spinner = ora('Generating emails preview').start();
 
-    await createEmailPreviews();
-    await createStatisFiles();
-    await createComponents();
+    await createEmailPreviews(emailDir);
+    await createStaticFiles(emailDir);
+    await createComponents(emailDir);
 
     spinner.stopAndPersist({
       symbol: logSymbols.success,
@@ -146,11 +154,11 @@ const generateEmailsPreview = async () => {
   }
 };
 
-const createEmailPreviews = async () => {
-  const hasEmailsDirectory = checkDirectoryExist(CLIENT_EMAILS_PATH);
+const createEmailPreviews = async (emailDir: string) => {
+  const hasEmailsDirectory = checkDirectoryExist(emailDir);
 
   const isEmailsDirectoryEmpty = hasEmailsDirectory
-    ? await checkEmptyDirectory(CLIENT_EMAILS_PATH)
+    ? await checkEmptyDirectory(emailDir)
     : true;
 
   if (isEmailsDirectoryEmpty) {
@@ -162,16 +170,15 @@ const createEmailPreviews = async () => {
     await fs.promises.rm(PACKAGE_EMAILS_PATH, { recursive: true });
   }
 
-  await copy(`${CLIENT_EMAILS_PATH}/*{.tsx,.jsx}`, PACKAGE_EMAILS_PATH);
+  await copy(path.join(emailDir, '*{.tsx,.jsx}'), PACKAGE_EMAILS_PATH);
 };
 
-const createStatisFiles = async () => {
+const createStaticFiles = async (emailDir: string) => {
   const hasPackageStaticDirectory = checkDirectoryExist(
     `${REACT_EMAIL_ROOT}/public/static`,
   );
-  const hasStaticDirectory = checkDirectoryExist(
-    `${CLIENT_EMAILS_PATH}/static`,
-  );
+  const staticDir = path.join(emailDir, 'static');
+  const hasStaticDirectory = checkDirectoryExist(staticDir);
 
   if (hasPackageStaticDirectory) {
     await fs.promises.rm(`${REACT_EMAIL_ROOT}/public/static`, {
@@ -180,21 +187,16 @@ const createStatisFiles = async () => {
   }
 
   if (hasStaticDirectory) {
-    await copy(
-      `${CLIENT_EMAILS_PATH}/static`,
-      `${REACT_EMAIL_ROOT}/public/static`,
-    );
+    await copy(staticDir, `${REACT_EMAIL_ROOT}/public/static`);
   }
 };
 
-const createComponents = async () => {
+const createComponents = async (emailDir: string) => {
   const hasPackageComponentsDirectory = checkDirectoryExist(
     `${PACKAGE_EMAILS_PATH}/components`,
   );
-
-  const hasComponentsDirectory = checkDirectoryExist(
-    `${CLIENT_EMAILS_PATH}/components`,
-  );
+  const componentDir = path.join(emailDir, 'components');
+  const hasComponentsDirectory = checkDirectoryExist(componentDir);
 
   if (hasPackageComponentsDirectory) {
     await fs.promises.rm(`${PACKAGE_EMAILS_PATH}/components`, {
@@ -203,10 +205,7 @@ const createComponents = async () => {
   }
 
   if (hasComponentsDirectory) {
-    await copy(
-      `${CLIENT_EMAILS_PATH}/components`,
-      `${PACKAGE_EMAILS_PATH}/components`,
-    );
+    await copy(componentDir, `${PACKAGE_EMAILS_PATH}/components`);
   }
 };