react-email 1.1.1 → 1.2.0

package/dist/_preview/components.js

@@ -20,7 +20,7 @@ exports.components = [
     },
     {
         title: 'layout.tsx',
-        content: "import * as React from 'react';\nimport { Topbar } from './topbar';\nimport { Sidebar } from './sidebar';\n\ntype LayoutElement = React.ElementRef<'div'>;\ntype RootProps = React.ComponentPropsWithoutRef<'div'>;\n\ninterface LayoutProps extends RootProps {\n  navItems: string[];\n  viewMode?: string;\n  setViewMode?: (viewMode: string) => void;\n}\n\nexport const Layout = React.forwardRef<LayoutElement, Readonly<LayoutProps>>(\n  (\n    { className, title, navItems, children, viewMode, setViewMode, ...props },\n    forwardedRef,\n  ) => {\n    return (\n      <>\n        <div className=\"flex justify-between h-screen\">\n          <Sidebar navItems={navItems} />\n          <main className=\"w-full bg-slate-2\">\n            {title && (\n              <Topbar\n                title={title}\n                viewMode={viewMode}\n                setViewMode={setViewMode}\n              />\n            )}\n            <div className=\"relative h-[calc(100vh_-_70px)] overflow-auto\">\n              <div className=\"mx-auto\">{children}</div>\n            </div>\n          </main>\n        </div>\n      </>\n    );\n  },\n);\n\nLayout.displayName = 'Layout';\n",
+        content: "import * as React from 'react';\nimport { Topbar } from './topbar';\nimport { Sidebar } from './sidebar';\n\ntype LayoutElement = React.ElementRef<'div'>;\ntype RootProps = React.ComponentPropsWithoutRef<'div'>;\n\ninterface LayoutProps extends RootProps {\n  navItems: string[];\n  viewMode?: string;\n  setViewMode?: (viewMode: string) => void;\n}\n\nexport const Layout = React.forwardRef<LayoutElement, Readonly<LayoutProps>>(\n  (\n    { className, title, navItems, children, viewMode, setViewMode, ...props },\n    forwardedRef,\n  ) => {\n    return (\n      <>\n        <div className=\"flex justify-between h-screen\">\n          <Sidebar navItems={navItems} />\n          <main className=\"w-[calc(100%_-_275px)] bg-slate-2\">\n            {title && (\n              <Topbar\n                title={title}\n                viewMode={viewMode}\n                setViewMode={setViewMode}\n              />\n            )}\n            <div className=\"relative h-[calc(100vh_-_70px)] overflow-auto\">\n              <div className=\"mx-auto\">{children}</div>\n            </div>\n          </main>\n        </div>\n      </>\n    );\n  },\n);\n\nLayout.displayName = 'Layout';\n",
     },
     {
         title: 'logo.tsx',

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('.tsx', ''));\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          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia dolorum\n          vitae rem laudantium eos similique nobis facilis, quaerat excepturi\n          ratione asperiores iste suscipit perspiciatis quam minima delectus,\n          eveniet quas quo!\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  const filenames = await fs.readdir(emailsDirectory);\n  const emails = filenames.map((file) => file.replace('.tsx', ''));\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('.tsx', ''));\n\n  return emails;\n};\n\nexport const getStaticPaths: GetStaticPaths = async () => {\n  const emails = await getEmails();\n\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 = await getEmails();\n    const Email = (await import(`../../../emails/${params.slug}`)).default;\n    const markup = render(<Email />, { pretty: true });\n\n    return emails\n      ? { props: { navItems: emails, slug: params.slug, markup } }\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  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=\"max-w-[864px] mx-auto py-10\">\n          <Code>{markup}</Code>\n        </div>\n      )}\n    </Layout>\n  );\n};\n\nexport default Preview;\n",
+        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('.tsx', ''));\n\n  return emails;\n};\n\nexport const getStaticPaths: GetStaticPaths = async () => {\n  const emails = await getEmails();\n\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 = await getEmails();\n    const Email = (await import(`../../../emails/${params.slug}`)).default;\n    const markup = render(<Email />, { pretty: true });\n\n    const path = `${process.cwd()}/${CONTENT_DIR}/${params.slug}`;\n    const reactMarkup = await fs.readFile(`${path}.tsx`, {\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",
     },
 ];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-email",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "A live preview of your emails right in your browser.",
   "bin": {
     "email": "./dist/index.js"
@@ -12,6 +12,7 @@
   "scripts": {
     "build": "tsc",
     "prepare": "npm run build",
+    "preprepare": "ts-node ./scripts/prepare-preview",
     "format:check": "prettier --check \"**/*.{js,ts,tsx,json}\"",
     "format": "prettier --write \"**/*.{js,ts,tsx,json}\"",
     "lint": "eslint",

package/preview/src/components/layout.tsx

@@ -20,7 +20,7 @@ export const Layout = React.forwardRef<LayoutElement, Readonly<LayoutProps>>(
       <>
         <div className="flex justify-between h-screen">
           <Sidebar navItems={navItems} />
-          <main className="w-full bg-slate-2">
+          <main className="w-[calc(100%_-_275px)] bg-slate-2">
             {title && (
               <Topbar
                 title={title}

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

@@ -34,8 +34,13 @@ export async function getStaticProps({ params }) {
     const Email = (await import(`../../../emails/${params.slug}`)).default;
     const markup = render(<Email />, { pretty: true });
 
+    const path = `${process.cwd()}/${CONTENT_DIR}/${params.slug}`;
+    const reactMarkup = await fs.readFile(`${path}.tsx`, {
+      encoding: 'utf-8',
+    });
+
     return emails
-      ? { props: { navItems: emails, slug: params.slug, markup } }
+      ? { props: { navItems: emails, slug: params.slug, markup, reactMarkup } }
       : { notFound: true };
   } catch (error) {
     console.error(error);
@@ -46,6 +51,7 @@ export async function getStaticProps({ params }) {
 const Preview: React.FC<Readonly<PreviewProps>> = ({
   navItems,
   markup,
+  reactMarkup,
   slug,
 }: any) => {
   const [viewMode, setViewMode] = React.useState('desktop');
@@ -68,7 +74,8 @@ const Preview: React.FC<Readonly<PreviewProps>> = ({
           className="w-full h-[calc(100vh_-_70px)]"
         />
       ) : (
-        <div className="max-w-[864px] mx-auto py-10">
+        <div className="flex gap-6 mx-auto p-6">
+          <Code>{reactMarkup}</Code>
           <Code>{markup}</Code>
         </div>
       )}

package/source/_preview/components.ts

@@ -22,7 +22,7 @@ export const components = [
   {
     title: 'layout.tsx',
     content:
-      "import * as React from 'react';\nimport { Topbar } from './topbar';\nimport { Sidebar } from './sidebar';\n\ntype LayoutElement = React.ElementRef<'div'>;\ntype RootProps = React.ComponentPropsWithoutRef<'div'>;\n\ninterface LayoutProps extends RootProps {\n  navItems: string[];\n  viewMode?: string;\n  setViewMode?: (viewMode: string) => void;\n}\n\nexport const Layout = React.forwardRef<LayoutElement, Readonly<LayoutProps>>(\n  (\n    { className, title, navItems, children, viewMode, setViewMode, ...props },\n    forwardedRef,\n  ) => {\n    return (\n      <>\n        <div className=\"flex justify-between h-screen\">\n          <Sidebar navItems={navItems} />\n          <main className=\"w-full bg-slate-2\">\n            {title && (\n              <Topbar\n                title={title}\n                viewMode={viewMode}\n                setViewMode={setViewMode}\n              />\n            )}\n            <div className=\"relative h-[calc(100vh_-_70px)] overflow-auto\">\n              <div className=\"mx-auto\">{children}</div>\n            </div>\n          </main>\n        </div>\n      </>\n    );\n  },\n);\n\nLayout.displayName = 'Layout';\n",
+      "import * as React from 'react';\nimport { Topbar } from './topbar';\nimport { Sidebar } from './sidebar';\n\ntype LayoutElement = React.ElementRef<'div'>;\ntype RootProps = React.ComponentPropsWithoutRef<'div'>;\n\ninterface LayoutProps extends RootProps {\n  navItems: string[];\n  viewMode?: string;\n  setViewMode?: (viewMode: string) => void;\n}\n\nexport const Layout = React.forwardRef<LayoutElement, Readonly<LayoutProps>>(\n  (\n    { className, title, navItems, children, viewMode, setViewMode, ...props },\n    forwardedRef,\n  ) => {\n    return (\n      <>\n        <div className=\"flex justify-between h-screen\">\n          <Sidebar navItems={navItems} />\n          <main className=\"w-[calc(100%_-_275px)] bg-slate-2\">\n            {title && (\n              <Topbar\n                title={title}\n                viewMode={viewMode}\n                setViewMode={setViewMode}\n              />\n            )}\n            <div className=\"relative h-[calc(100vh_-_70px)] overflow-auto\">\n              <div className=\"mx-auto\">{children}</div>\n            </div>\n          </main>\n        </div>\n      </>\n    );\n  },\n);\n\nLayout.displayName = 'Layout';\n",
   },
   {
     title: 'logo.tsx',

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('.tsx', ''));\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          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia dolorum\n          vitae rem laudantium eos similique nobis facilis, quaerat excepturi\n          ratione asperiores iste suscipit perspiciatis quam minima delectus,\n          eveniet quas quo!\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  const filenames = await fs.readdir(emailsDirectory);\n  const emails = filenames.map((file) => file.replace('.tsx', ''));\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('.tsx', ''));\n\n  return emails;\n};\n\nexport const getStaticPaths: GetStaticPaths = async () => {\n  const emails = await getEmails();\n\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 = await getEmails();\n    const Email = (await import(`../../../emails/${params.slug}`)).default;\n    const markup = render(<Email />, { pretty: true });\n\n    return emails\n      ? { props: { navItems: emails, slug: params.slug, markup } }\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  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=\"max-w-[864px] mx-auto py-10\">\n          <Code>{markup}</Code>\n        </div>\n      )}\n    </Layout>\n  );\n};\n\nexport default Preview;\n",
+      "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('.tsx', ''));\n\n  return emails;\n};\n\nexport const getStaticPaths: GetStaticPaths = async () => {\n  const emails = await getEmails();\n\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 = await getEmails();\n    const Email = (await import(`../../../emails/${params.slug}`)).default;\n    const markup = render(<Email />, { pretty: true });\n\n    const path = `${process.cwd()}/${CONTENT_DIR}/${params.slug}`;\n    const reactMarkup = await fs.readFile(`${path}.tsx`, {\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",
   },
 ];