react-email 1.3.0 → 1.4.0

package/CHANGELOG.md

@@ -1,12 +1,7 @@
 # react-email
 
-## 1.3.0
+## 1.4.0
 
 ### Minor Changes
 
-- Add missing metadata such as `engines`, `repository` and images
-
-### Patch Changes
-
-- Updated dependencies
-  - @react-email/render@0.0.3
+- Add static files support

package/dist/_preview/pages.js

@@ -12,11 +12,11 @@ exports.pages = [
     },
     {
         title: 'index.tsx',
-        content: "import { promises as fs } from 'fs';\nimport path from 'path';\nimport { Button, Heading, Text } from '../components';\nimport { Layout } from '../components/layout';\nimport Link from 'next/link';\n\ninterface HomeProps {}\n\nexport const CONTENT_DIR = 'emails';\n\nconst getEmails = async () => {\n  const emailsDirectory = path.join(process.cwd(), CONTENT_DIR);\n  const filenames = await fs.readdir(emailsDirectory);\n  const emails = filenames.map((file) => file.replace(/\\.(jsx|tsx)$/g, ''));\n\n  return emails;\n};\n\nexport async function getStaticProps({ params }) {\n  try {\n    const emails = await getEmails();\n    return emails\n      ? { props: { navItems: emails } }\n      : { props: { navItems: [] } };\n  } catch (error) {\n    console.error(error);\n    return { props: { navItems: [] } };\n  }\n}\n\nconst Home: React.FC<Readonly<HomeProps>> = ({ navItems }: any) => {\n  return (\n    <Layout navItems={navItems}>\n      <div className=\"max-w-md border border-slate-6 mx-auto mt-56 rounded-md p-8\">\n        <Heading as=\"h2\" weight=\"medium\">\n          Welcome to the React Email preview!\n        </Heading>\n        <Text as=\"p\" className=\"mt-2 mb-4\">\n          To start developing your next email template, you can create a{' '}\n          <code>.jsx</code> or <code>.tsx</code> file under the \"emails\" folder.\n        </Text>\n\n        <Button asChild>\n          <Link href=\"https://react.email/docs\">Check the docs</Link>\n        </Button>\n      </div>\n    </Layout>\n  );\n};\n\nexport default Home;\n",
+        content: "import { promises as fs } from 'fs';\nimport path from 'path';\nimport { Button, Heading, Text } from '../components';\nimport { Layout } from '../components/layout';\nimport Link from 'next/link';\n\ninterface HomeProps {}\n\nexport const CONTENT_DIR = 'emails';\n\nconst getEmails = async () => {\n  const emailsDirectory = path.join(process.cwd(), CONTENT_DIR);\n\n  const filenames = await fs.readdir(emailsDirectory);\n  const emails = filenames\n    .map((file) => file.replace(/\\.(jsx|tsx)$/g, ''))\n    .filter((file) => file !== 'components');\n\n  return emails;\n};\n\nexport async function getStaticProps({ params }) {\n  try {\n    const emails = await getEmails();\n    return emails\n      ? { props: { navItems: emails } }\n      : { props: { navItems: [] } };\n  } catch (error) {\n    console.error(error);\n    return { props: { navItems: [] } };\n  }\n}\n\nconst Home: React.FC<Readonly<HomeProps>> = ({ navItems }: any) => {\n  return (\n    <Layout navItems={navItems}>\n      <div className=\"max-w-md border border-slate-6 mx-auto mt-56 rounded-md p-8\">\n        <Heading as=\"h2\" weight=\"medium\">\n          Welcome to the React Email preview!\n        </Heading>\n        <Text as=\"p\" className=\"mt-2 mb-4\">\n          To start developing your next email template, you can create a{' '}\n          <code>.jsx</code> or <code>.tsx</code> file under the \"emails\" folder.\n        </Text>\n\n        <Button asChild>\n          <Link href=\"https://react.email/docs\">Check the docs</Link>\n        </Button>\n      </div>\n    </Layout>\n  );\n};\n\nexport default Home;\n",
     },
     {
         dir: 'preview',
         title: '[slug].tsx',
-        content: "import { promises as fs } from 'fs';\nimport path from 'path';\nimport { render } from '@react-email/render';\nimport { GetStaticPaths } from 'next';\nimport { Layout } from '../../components/layout';\nimport * as React from 'react';\nimport { Code } from '../../components';\nimport Head from 'next/head';\n\ninterface PreviewProps {}\n\nexport const CONTENT_DIR = 'emails';\n\nconst getEmails = async () => {\n  const emailsDirectory = path.join(process.cwd(), CONTENT_DIR);\n  const filenames = await fs.readdir(emailsDirectory);\n  const emails = filenames.map((file) => file.replace(/\\.(jsx|tsx)$/g, ''));\n  return { emails, filenames };\n};\n\nexport const getStaticPaths: GetStaticPaths = async () => {\n  const { emails } = await getEmails();\n  const paths = emails.map((email) => {\n    return { params: { slug: email } };\n  });\n  return { paths, fallback: true };\n};\n\nexport async function getStaticProps({ params }) {\n  try {\n    const { emails, filenames } = await getEmails();\n    const template = filenames.filter((email) => {\n      const [fileName] = email.split('.');\n      return params.slug === fileName;\n    });\n\n    const Email = (await import(`../../../emails/${params.slug}`)).default;\n    const markup = render(<Email />, { pretty: true });\n    const path = `${process.cwd()}/${CONTENT_DIR}/${template[0]}`;\n    const reactMarkup = await fs.readFile(path, {\n      encoding: 'utf-8',\n    });\n\n    return emails\n      ? { props: { navItems: emails, slug: params.slug, markup, reactMarkup } }\n      : { notFound: true };\n  } catch (error) {\n    console.error(error);\n    return { notFound: true };\n  }\n}\n\nconst Preview: React.FC<Readonly<PreviewProps>> = ({\n  navItems,\n  markup,\n  reactMarkup,\n  slug,\n}: any) => {\n  const [viewMode, setViewMode] = React.useState('desktop');\n  const title = `${slug} — React Email`;\n\n  return (\n    <Layout\n      navItems={navItems}\n      title={slug}\n      viewMode={viewMode}\n      setViewMode={setViewMode}\n    >\n      <Head>\n        <title>{title}</title>\n      </Head>\n      {viewMode === 'desktop' ? (\n        <iframe\n          srcDoc={markup}\n          frameBorder=\"0\"\n          className=\"w-full h-[calc(100vh_-_70px)]\"\n        />\n      ) : (\n        <div className=\"flex gap-6 mx-auto p-6\">\n          <Code>{reactMarkup}</Code>\n          <Code>{markup}</Code>\n        </div>\n      )}\n    </Layout>\n  );\n};\n\nexport default Preview;\n",
+        content: "import * as React from 'react';\nimport { promises as fs } from 'fs';\nimport path from 'path';\nimport { render } from '@react-email/render';\nimport { GetStaticPaths } from 'next';\nimport { Layout } from '../../components/layout';\nimport { Code } from '../../components';\nimport Head from 'next/head';\nimport { useRouter } from 'next/router';\n\ninterface PreviewProps {}\n\nexport const CONTENT_DIR = 'emails';\n\nconst getEmails = async () => {\n  const emailsDirectory = path.join(process.cwd(), CONTENT_DIR);\n  const filenames = await fs.readdir(emailsDirectory);\n  const emails = filenames\n    .map((file) => file.replace(/\\.(jsx|tsx)$/g, ''))\n    .filter((file) => file !== 'components');\n  return { emails, filenames };\n};\n\nexport const getStaticPaths: GetStaticPaths = async () => {\n  const { emails } = await getEmails();\n  const paths = emails.map((email) => {\n    return { params: { slug: email } };\n  });\n  return { paths, fallback: true };\n};\n\nexport async function getStaticProps({ params }) {\n  try {\n    const { emails, filenames } = await getEmails();\n    const template = filenames.filter((email) => {\n      const [fileName] = email.split('.');\n      return params.slug === fileName;\n    });\n\n    const Email = (await import(`../../../emails/${params.slug}`)).default;\n    const markup = render(<Email />, { pretty: true });\n    const path = `${process.cwd()}/${CONTENT_DIR}/${template[0]}`;\n    const reactMarkup = await fs.readFile(path, {\n      encoding: 'utf-8',\n    });\n\n    return emails\n      ? { props: { navItems: emails, slug: params.slug, markup, reactMarkup } }\n      : { notFound: true };\n  } catch (error) {\n    console.error(error);\n    return { notFound: true };\n  }\n}\n\nconst Preview: React.FC<Readonly<PreviewProps>> = ({\n  navItems,\n  markup,\n  reactMarkup,\n  slug,\n}: any) => {\n  const title = `${slug} — React Email`;\n  const router = useRouter();\n  const [viewMode, setViewMode] = React.useState('desktop');\n\n  const handleViewMode = (mode: string) => {\n    setViewMode(mode);\n\n    router.push({\n      pathname: router.pathname,\n      query: {\n        ...router.query,\n        view: mode,\n      },\n    });\n  };\n\n  React.useEffect(() => {\n    if (router.query.view === 'source' || router.query.view === 'desktop') {\n      setViewMode(router.query.view);\n    }\n  }, [router.query.view]);\n\n  return (\n    <Layout\n      navItems={navItems}\n      title={slug}\n      viewMode={viewMode}\n      setViewMode={handleViewMode}\n    >\n      <Head>\n        <title>{title}</title>\n      </Head>\n      {viewMode === 'desktop' ? (\n        <iframe\n          srcDoc={markup}\n          frameBorder=\"0\"\n          className=\"w-full h-[calc(100vh_-_70px)]\"\n        />\n      ) : (\n        <div className=\"flex gap-6 mx-auto p-6\">\n          <Code>{reactMarkup}</Code>\n          <Code>{markup}</Code>\n        </div>\n      )}\n    </Layout>\n  );\n};\n\nexport default Preview;\n",
     },
 ];

package/dist/_preview/root.js

@@ -8,7 +8,7 @@ exports.root = [
     },
     {
         title: 'package.json',
-        content: '{\n  "name": "react-email-preview",\n  "version": "0.0.4",\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  "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-slot": "1.0.1",\n    "@radix-ui/react-toggle-group": "1.0.1",\n    "@react-email/render": "0.0.2",\n    "classnames": "2.3.2",\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.4",\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-slot": "1.0.1",\n    "@radix-ui/react-toggle-group": "1.0.1",\n    "@react-email/render": "0.0.2",\n    "classnames": "2.3.2",\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}',
     },
     {
         title: 'postcss.config.js',

package/dist/commands/dev.js

@@ -31,11 +31,12 @@ const dev = async () => {
 };
 exports.dev = dev;
 const prepareFiles = async () => {
-    const spinner = (0, ora_1.default)('Preparing React email files...').start();
+    const spinner = (0, ora_1.default)('Preparing React Email files...').start();
     const isFirstTime = !(0, check_directory_exist_1.checkDirectoryExist)(constants_1.REACT_EMAIL_ROOT);
     if (isFirstTime) {
         await (0, create_directory_1.createDirectory)(constants_1.REACT_EMAIL_ROOT);
         await (0, create_directory_1.createDirectory)(path_1.default.join(constants_1.REACT_EMAIL_ROOT, 'src'));
+        await (0, create_directory_1.createDirectory)(path_1.default.join(constants_1.REACT_EMAIL_ROOT, 'public'));
         await Promise.all([
             createFilesAndDirectories(components_1.components, 'components'),
             createFilesAndDirectories(utils_1.utils, 'utils'),
@@ -56,15 +57,14 @@ const checkForUpdates = async () => {
     if (isUpToDate) {
         return spinner.stopAndPersist({
             symbol: log_symbols_1.default.success,
-            text: 'React email is up-to-date',
+            text: 'React Email is up-to-date',
         });
     }
     return updatePackage();
 };
 const updatePackage = async () => {
-    const spinner = (0, ora_1.default)('Updating React email...').start();
+    const spinner = (0, ora_1.default)('Updating React Email...').start();
     await Promise.all([
-        createFilesAndDirectories(components_1.components, 'components'),
         createFilesAndDirectories(utils_1.utils, 'utils'),
         createFilesAndDirectories(styles_1.styles, 'styles'),
         createFilesAndDirectories(root_1.root),
@@ -72,18 +72,25 @@ const updatePackage = async () => {
     ]);
     spinner.stopAndPersist({
         symbol: log_symbols_1.default.success,
-        text: 'React email is updated',
+        text: 'React Email is updated',
     });
 };
 const generateEmailsPreview = async () => {
     const spinner = (0, ora_1.default)('Generating emails preview').start();
     const hasEmailsDirectory = fs_1.default.existsSync(constants_1.CLIENT_EMAILS_PATH);
     const hasPackageEmailsDirectory = fs_1.default.existsSync(constants_1.PACKAGE_EMAILS_PATH);
+    const hasPackagePublicDirectory = fs_1.default.existsSync(`${constants_1.REACT_EMAIL_ROOT}/public/static`);
     if (hasEmailsDirectory) {
         if (hasPackageEmailsDirectory) {
-            await fs_1.default.promises.rmdir(constants_1.PACKAGE_EMAILS_PATH, { recursive: true });
+            await fs_1.default.promises.rm(constants_1.PACKAGE_EMAILS_PATH, { recursive: true });
         }
-        await (0, cpy_1.default)(constants_1.CLIENT_EMAILS_PATH, constants_1.PACKAGE_EMAILS_PATH);
+        if (hasPackagePublicDirectory) {
+            await fs_1.default.promises.rm(`${constants_1.REACT_EMAIL_ROOT}/public`, {
+                recursive: true,
+            });
+        }
+        await (0, cpy_1.default)(`${constants_1.CLIENT_EMAILS_PATH}/*{.tsx,.jsx}`, constants_1.PACKAGE_EMAILS_PATH);
+        await (0, cpy_1.default)(`${constants_1.CLIENT_EMAILS_PATH}/static`, `${constants_1.REACT_EMAIL_ROOT}/public/static`);
         return spinner.stopAndPersist({
             symbol: log_symbols_1.default.success,
             text: 'Emails preview generated',

package/emails/test.jsx

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export default () => <h1>AA</h1>;

package/emails/test.tsx

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export default () => <h1>AA</h1>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-email",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "A live preview of your emails right in your browser.",
   "bin": {
     "email": "./dist/index.js"
@@ -47,4 +47,4 @@
     "prettier": "2.7.1",
     "ts-node": "10.9.1"
   }
-}
+}

package/preview/package.json

@@ -37,4 +37,4 @@
     "tailwindcss": "3.2.4",
     "typescript": "4.9.3"
   }
-}
+}

package/preview/src/pages/index.tsx

@@ -10,8 +10,11 @@ export const CONTENT_DIR = 'emails';
 
 const getEmails = async () => {
   const emailsDirectory = path.join(process.cwd(), CONTENT_DIR);
+
   const filenames = await fs.readdir(emailsDirectory);
-  const emails = filenames.map((file) => file.replace(/\.(jsx|tsx)$/g, ''));
+  const emails = filenames
+    .map((file) => file.replace(/\.(jsx|tsx)$/g, ''))
+    .filter((file) => file !== 'components');
 
   return emails;
 };

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

@@ -15,7 +15,9 @@ export const CONTENT_DIR = 'emails';
 const getEmails = async () => {
   const emailsDirectory = path.join(process.cwd(), CONTENT_DIR);
   const filenames = await fs.readdir(emailsDirectory);
-  const emails = filenames.map((file) => file.replace(/\.(jsx|tsx)$/g, ''));
+  const emails = filenames
+    .map((file) => file.replace(/\.(jsx|tsx)$/g, ''))
+    .filter((file) => file !== 'components');
   return { emails, filenames };
 };
 

package/source/_preview/pages.ts

@@ -12,12 +12,12 @@ export const pages = [
   {
     title: 'index.tsx',
     content:
-      "import { promises as fs } from 'fs';\nimport path from 'path';\nimport { Button, Heading, Text } from '../components';\nimport { Layout } from '../components/layout';\nimport Link from 'next/link';\n\ninterface HomeProps {}\n\nexport const CONTENT_DIR = 'emails';\n\nconst getEmails = async () => {\n  const emailsDirectory = path.join(process.cwd(), CONTENT_DIR);\n  const filenames = await fs.readdir(emailsDirectory);\n  const emails = filenames.map((file) => file.replace(/\\.(jsx|tsx)$/g, ''));\n\n  return emails;\n};\n\nexport async function getStaticProps({ params }) {\n  try {\n    const emails = await getEmails();\n    return emails\n      ? { props: { navItems: emails } }\n      : { props: { navItems: [] } };\n  } catch (error) {\n    console.error(error);\n    return { props: { navItems: [] } };\n  }\n}\n\nconst Home: React.FC<Readonly<HomeProps>> = ({ navItems }: any) => {\n  return (\n    <Layout navItems={navItems}>\n      <div className=\"max-w-md border border-slate-6 mx-auto mt-56 rounded-md p-8\">\n        <Heading as=\"h2\" weight=\"medium\">\n          Welcome to the React Email preview!\n        </Heading>\n        <Text as=\"p\" className=\"mt-2 mb-4\">\n          To start developing your next email template, you can create a{' '}\n          <code>.jsx</code> or <code>.tsx</code> file under the \"emails\" folder.\n        </Text>\n\n        <Button asChild>\n          <Link href=\"https://react.email/docs\">Check the docs</Link>\n        </Button>\n      </div>\n    </Layout>\n  );\n};\n\nexport default Home;\n",
+      "import { promises as fs } from 'fs';\nimport path from 'path';\nimport { Button, Heading, Text } from '../components';\nimport { Layout } from '../components/layout';\nimport Link from 'next/link';\n\ninterface HomeProps {}\n\nexport const CONTENT_DIR = 'emails';\n\nconst getEmails = async () => {\n  const emailsDirectory = path.join(process.cwd(), CONTENT_DIR);\n\n  const filenames = await fs.readdir(emailsDirectory);\n  const emails = filenames\n    .map((file) => file.replace(/\\.(jsx|tsx)$/g, ''))\n    .filter((file) => file !== 'components');\n\n  return emails;\n};\n\nexport async function getStaticProps({ params }) {\n  try {\n    const emails = await getEmails();\n    return emails\n      ? { props: { navItems: emails } }\n      : { props: { navItems: [] } };\n  } catch (error) {\n    console.error(error);\n    return { props: { navItems: [] } };\n  }\n}\n\nconst Home: React.FC<Readonly<HomeProps>> = ({ navItems }: any) => {\n  return (\n    <Layout navItems={navItems}>\n      <div className=\"max-w-md border border-slate-6 mx-auto mt-56 rounded-md p-8\">\n        <Heading as=\"h2\" weight=\"medium\">\n          Welcome to the React Email preview!\n        </Heading>\n        <Text as=\"p\" className=\"mt-2 mb-4\">\n          To start developing your next email template, you can create a{' '}\n          <code>.jsx</code> or <code>.tsx</code> file under the \"emails\" folder.\n        </Text>\n\n        <Button asChild>\n          <Link href=\"https://react.email/docs\">Check the docs</Link>\n        </Button>\n      </div>\n    </Layout>\n  );\n};\n\nexport default Home;\n",
   },
   {
     dir: 'preview',
     title: '[slug].tsx',
     content:
-      "import { promises as fs } from 'fs';\nimport path from 'path';\nimport { render } from '@react-email/render';\nimport { GetStaticPaths } from 'next';\nimport { Layout } from '../../components/layout';\nimport * as React from 'react';\nimport { Code } from '../../components';\nimport Head from 'next/head';\n\ninterface PreviewProps {}\n\nexport const CONTENT_DIR = 'emails';\n\nconst getEmails = async () => {\n  const emailsDirectory = path.join(process.cwd(), CONTENT_DIR);\n  const filenames = await fs.readdir(emailsDirectory);\n  const emails = filenames.map((file) => file.replace(/\\.(jsx|tsx)$/g, ''));\n  return { emails, filenames };\n};\n\nexport const getStaticPaths: GetStaticPaths = async () => {\n  const { emails } = await getEmails();\n  const paths = emails.map((email) => {\n    return { params: { slug: email } };\n  });\n  return { paths, fallback: true };\n};\n\nexport async function getStaticProps({ params }) {\n  try {\n    const { emails, filenames } = await getEmails();\n    const template = filenames.filter((email) => {\n      const [fileName] = email.split('.');\n      return params.slug === fileName;\n    });\n\n    const Email = (await import(`../../../emails/${params.slug}`)).default;\n    const markup = render(<Email />, { pretty: true });\n    const path = `${process.cwd()}/${CONTENT_DIR}/${template[0]}`;\n    const reactMarkup = await fs.readFile(path, {\n      encoding: 'utf-8',\n    });\n\n    return emails\n      ? { props: { navItems: emails, slug: params.slug, markup, reactMarkup } }\n      : { notFound: true };\n  } catch (error) {\n    console.error(error);\n    return { notFound: true };\n  }\n}\n\nconst Preview: React.FC<Readonly<PreviewProps>> = ({\n  navItems,\n  markup,\n  reactMarkup,\n  slug,\n}: any) => {\n  const [viewMode, setViewMode] = React.useState('desktop');\n  const title = `${slug} — React Email`;\n\n  return (\n    <Layout\n      navItems={navItems}\n      title={slug}\n      viewMode={viewMode}\n      setViewMode={setViewMode}\n    >\n      <Head>\n        <title>{title}</title>\n      </Head>\n      {viewMode === 'desktop' ? (\n        <iframe\n          srcDoc={markup}\n          frameBorder=\"0\"\n          className=\"w-full h-[calc(100vh_-_70px)]\"\n        />\n      ) : (\n        <div className=\"flex gap-6 mx-auto p-6\">\n          <Code>{reactMarkup}</Code>\n          <Code>{markup}</Code>\n        </div>\n      )}\n    </Layout>\n  );\n};\n\nexport default Preview;\n",
+      "import * as React from 'react';\nimport { promises as fs } from 'fs';\nimport path from 'path';\nimport { render } from '@react-email/render';\nimport { GetStaticPaths } from 'next';\nimport { Layout } from '../../components/layout';\nimport { Code } from '../../components';\nimport Head from 'next/head';\nimport { useRouter } from 'next/router';\n\ninterface PreviewProps {}\n\nexport const CONTENT_DIR = 'emails';\n\nconst getEmails = async () => {\n  const emailsDirectory = path.join(process.cwd(), CONTENT_DIR);\n  const filenames = await fs.readdir(emailsDirectory);\n  const emails = filenames\n    .map((file) => file.replace(/\\.(jsx|tsx)$/g, ''))\n    .filter((file) => file !== 'components');\n  return { emails, filenames };\n};\n\nexport const getStaticPaths: GetStaticPaths = async () => {\n  const { emails } = await getEmails();\n  const paths = emails.map((email) => {\n    return { params: { slug: email } };\n  });\n  return { paths, fallback: true };\n};\n\nexport async function getStaticProps({ params }) {\n  try {\n    const { emails, filenames } = await getEmails();\n    const template = filenames.filter((email) => {\n      const [fileName] = email.split('.');\n      return params.slug === fileName;\n    });\n\n    const Email = (await import(`../../../emails/${params.slug}`)).default;\n    const markup = render(<Email />, { pretty: true });\n    const path = `${process.cwd()}/${CONTENT_DIR}/${template[0]}`;\n    const reactMarkup = await fs.readFile(path, {\n      encoding: 'utf-8',\n    });\n\n    return emails\n      ? { props: { navItems: emails, slug: params.slug, markup, reactMarkup } }\n      : { notFound: true };\n  } catch (error) {\n    console.error(error);\n    return { notFound: true };\n  }\n}\n\nconst Preview: React.FC<Readonly<PreviewProps>> = ({\n  navItems,\n  markup,\n  reactMarkup,\n  slug,\n}: any) => {\n  const title = `${slug} — React Email`;\n  const router = useRouter();\n  const [viewMode, setViewMode] = React.useState('desktop');\n\n  const handleViewMode = (mode: string) => {\n    setViewMode(mode);\n\n    router.push({\n      pathname: router.pathname,\n      query: {\n        ...router.query,\n        view: mode,\n      },\n    });\n  };\n\n  React.useEffect(() => {\n    if (router.query.view === 'source' || router.query.view === 'desktop') {\n      setViewMode(router.query.view);\n    }\n  }, [router.query.view]);\n\n  return (\n    <Layout\n      navItems={navItems}\n      title={slug}\n      viewMode={viewMode}\n      setViewMode={handleViewMode}\n    >\n      <Head>\n        <title>{title}</title>\n      </Head>\n      {viewMode === 'desktop' ? (\n        <iframe\n          srcDoc={markup}\n          frameBorder=\"0\"\n          className=\"w-full h-[calc(100vh_-_70px)]\"\n        />\n      ) : (\n        <div className=\"flex gap-6 mx-auto p-6\">\n          <Code>{reactMarkup}</Code>\n          <Code>{markup}</Code>\n        </div>\n      )}\n    </Layout>\n  );\n};\n\nexport default Preview;\n",
   },
 ];

package/source/_preview/root.ts

@@ -7,7 +7,7 @@ export const root = [
   {
     title: 'package.json',
     content:
-      '{\n  "name": "react-email-preview",\n  "version": "0.0.4",\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  "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-slot": "1.0.1",\n    "@radix-ui/react-toggle-group": "1.0.1",\n    "@react-email/render": "0.0.2",\n    "classnames": "2.3.2",\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.4",\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-slot": "1.0.1",\n    "@radix-ui/react-toggle-group": "1.0.1",\n    "@react-email/render": "0.0.2",\n    "classnames": "2.3.2",\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}',
   },
   {
     title: 'postcss.config.js',

package/source/commands/dev.ts

@@ -31,12 +31,13 @@ export const dev = async () => {
 };
 
 const prepareFiles = async () => {
-  const spinner = ora('Preparing React email files...').start();
+  const spinner = ora('Preparing React Email files...').start();
   const isFirstTime = !checkDirectoryExist(REACT_EMAIL_ROOT);
 
   if (isFirstTime) {
     await createDirectory(REACT_EMAIL_ROOT);
     await createDirectory(path.join(REACT_EMAIL_ROOT, 'src'));
+    await createDirectory(path.join(REACT_EMAIL_ROOT, 'public'));
 
     await Promise.all([
       createFilesAndDirectories(components, 'components'),
@@ -65,7 +66,7 @@ const checkForUpdates = async () => {
   if (isUpToDate) {
     return spinner.stopAndPersist({
       symbol: logSymbols.success,
-      text: 'React email is up-to-date',
+      text: 'React Email is up-to-date',
     });
   }
 
@@ -73,10 +74,9 @@ const checkForUpdates = async () => {
 };
 
 const updatePackage = async () => {
-  const spinner = ora('Updating React email...').start();
+  const spinner = ora('Updating React Email...').start();
 
   await Promise.all([
-    createFilesAndDirectories(components, 'components'),
     createFilesAndDirectories(utils, 'utils'),
     createFilesAndDirectories(styles, 'styles'),
     createFilesAndDirectories(root),
@@ -85,7 +85,7 @@ const updatePackage = async () => {
 
   spinner.stopAndPersist({
     symbol: logSymbols.success,
-    text: 'React email is updated',
+    text: 'React Email is updated',
   });
 };
 
@@ -93,13 +93,26 @@ const generateEmailsPreview = async () => {
   const spinner = ora('Generating emails preview').start();
   const hasEmailsDirectory = fs.existsSync(CLIENT_EMAILS_PATH);
   const hasPackageEmailsDirectory = fs.existsSync(PACKAGE_EMAILS_PATH);
+  const hasPackagePublicDirectory = fs.existsSync(
+    `${REACT_EMAIL_ROOT}/public/static`,
+  );
 
   if (hasEmailsDirectory) {
     if (hasPackageEmailsDirectory) {
-      await fs.promises.rmdir(PACKAGE_EMAILS_PATH, { recursive: true });
+      await fs.promises.rm(PACKAGE_EMAILS_PATH, { recursive: true });
+    }
+
+    if (hasPackagePublicDirectory) {
+      await fs.promises.rm(`${REACT_EMAIL_ROOT}/public`, {
+        recursive: true,
+      });
     }
 
-    await copy(CLIENT_EMAILS_PATH, PACKAGE_EMAILS_PATH);
+    await copy(`${CLIENT_EMAILS_PATH}/*{.tsx,.jsx}`, PACKAGE_EMAILS_PATH);
+    await copy(
+      `${CLIENT_EMAILS_PATH}/static`,
+      `${REACT_EMAIL_ROOT}/public/static`,
+    );
     return spinner.stopAndPersist({
       symbol: logSymbols.success,
       text: 'Emails preview generated',