react-email 1.1.2 → 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

@@ -17,6 +17,6 @@ exports.pages = [
     {
         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.2",
+  "version": "1.2.0",
   "description": "A live preview of your emails right in your browser.",
   "bin": {
     "email": "./dist/index.js"

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

@@ -18,6 +18,6 @@ export const pages = [
     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",
   },
 ];

package/dist/_preview/package.d.ts

@@ -1,36 +0,0 @@
-export declare const previewPkg: {
-  name: string;
-  version: string;
-  description: string;
-  license: string;
-  scripts: {
-    'dev': string;
-    'build': string;
-    'start': string;
-    'lint': string;
-    'format:check': string;
-    'format': string;
-  };
-  dependencies: {
-    '@next/font': string;
-    '@radix-ui/colors': string;
-    '@radix-ui/react-collapsible': string;
-    '@radix-ui/react-slot': string;
-    '@radix-ui/react-toggle-group': string;
-    'classnames': string;
-    'next': string;
-    'prism-react-renderer': string;
-    'react': string;
-    'react-dom': string;
-  };
-  devDependencies: {
-    '@types/classnames': string;
-    '@types/node': string;
-    '@types/react': string;
-    '@types/react-dom': string;
-    'autoprefixer': string;
-    'postcss': string;
-    'tailwindcss': string;
-    'typescript': string;
-  };
-};

package/dist/_preview/package.js

@@ -1,39 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
-exports.previewPkg = void 0;
-exports.previewPkg = {
-  name: 'react-email-preview',
-  version: '0.0.1',
-  description: 'The React Email preview application',
-  license: 'MIT',
-  scripts: {
-    'dev': 'next dev',
-    'build': 'next build',
-    'start': 'next start',
-    'lint': 'next lint',
-    'format:check': 'prettier --check "**/*.{ts,tsx,md}"',
-    'format': 'prettier --write "**/*.{ts,tsx,md}"',
-  },
-  dependencies: {
-    '@next/font': '13.0.4',
-    '@radix-ui/colors': '0.1.8',
-    '@radix-ui/react-collapsible': '1.0.1',
-    '@radix-ui/react-slot': '1.0.1',
-    '@radix-ui/react-toggle-group': '1.0.1',
-    'classnames': '2.3.2',
-    'next': '13.0.4',
-    'prism-react-renderer': '1.3.5',
-    'react': '18.2.0',
-    'react-dom': '18.2.0',
-  },
-  devDependencies: {
-    '@types/classnames': '2.3.1',
-    '@types/node': '18.11.9',
-    '@types/react': '18.0.25',
-    '@types/react-dom': '18.0.9',
-    'autoprefixer': '10.4.13',
-    'postcss': '8.4.19',
-    'tailwindcss': '3.2.4',
-    'typescript': '4.9.3',
-  },
-};

package/dist/utils/copy-files.d.ts

@@ -1 +0,0 @@
-export declare const copyFiles: () => Promise<void>;

package/dist/utils/copy-files.js

@@ -1,110 +0,0 @@
-'use strict';
-var __importDefault =
-  (this && this.__importDefault) ||
-  function (mod) {
-    return mod && mod.__esModule ? mod : { default: mod };
-  };
-Object.defineProperty(exports, '__esModule', { value: true });
-exports.copyFiles = void 0;
-const path_1 = __importDefault(require('path'));
-const cpy_1 = __importDefault(require('cpy'));
-const contants_1 = require('./contants');
-const copyFiles = async () => {
-  try {
-    await (0, cpy_1.default)(
-      path_1.default.join(
-        contants_1.NODE_MODULES_PREVIEW_PATH,
-        'src',
-        'pages',
-        'preview',
-      ),
-      path_1.default.join(contants_1.DOT_EMAIL_DEV, 'src', 'pages', 'preview'),
-    );
-    await (0, cpy_1.default)(
-      path_1.default.join(
-        contants_1.NODE_MODULES_PREVIEW_PATH,
-        'src',
-        'pages',
-        '_app.tsx',
-      ),
-      path_1.default.join(contants_1.DOT_EMAIL_DEV, 'src', 'pages'),
-    );
-    await (0, cpy_1.default)(
-      path_1.default.join(
-        contants_1.NODE_MODULES_PREVIEW_PATH,
-        'src',
-        'pages',
-        '_document.tsx',
-      ),
-      path_1.default.join(contants_1.DOT_EMAIL_DEV, 'src', 'pages'),
-    );
-    await (0, cpy_1.default)(
-      path_1.default.join(
-        contants_1.NODE_MODULES_PREVIEW_PATH,
-        'src',
-        'pages',
-        'index.tsx',
-      ),
-      path_1.default.join(contants_1.DOT_EMAIL_DEV, 'src', 'pages'),
-    );
-    await (0, cpy_1.default)(
-      path_1.default.join(
-        contants_1.NODE_MODULES_PREVIEW_PATH,
-        'src',
-        'styles',
-      ),
-      path_1.default.join(contants_1.DOT_EMAIL_DEV, 'src', 'styles'),
-    );
-    await (0, cpy_1.default)(
-      path_1.default.join(
-        contants_1.NODE_MODULES_PREVIEW_PATH,
-        'src',
-        'components',
-      ),
-      path_1.default.join(contants_1.DOT_EMAIL_DEV, 'src', 'components'),
-    );
-    await (0, cpy_1.default)(
-      path_1.default.join(contants_1.NODE_MODULES_PREVIEW_PATH, 'src', 'utils'),
-      path_1.default.join(contants_1.DOT_EMAIL_DEV, 'src', 'utils'),
-    );
-    await (0, cpy_1.default)(
-      path_1.default.join(
-        contants_1.NODE_MODULES_PREVIEW_PATH,
-        'next-env.d.ts',
-      ),
-      contants_1.DOT_EMAIL_DEV,
-    );
-    await (0, cpy_1.default)(
-      path_1.default.join(contants_1.NODE_MODULES_PREVIEW_PATH, 'package.json'),
-      contants_1.DOT_EMAIL_DEV,
-    );
-    await (0, cpy_1.default)(
-      path_1.default.join(
-        contants_1.NODE_MODULES_PREVIEW_PATH,
-        'postcss.config.js',
-      ),
-      contants_1.DOT_EMAIL_DEV,
-    );
-    await (0, cpy_1.default)(
-      path_1.default.join(
-        contants_1.NODE_MODULES_PREVIEW_PATH,
-        'tailwind.config.js',
-      ),
-      contants_1.DOT_EMAIL_DEV,
-    );
-    await (0, cpy_1.default)(
-      path_1.default.join(
-        contants_1.NODE_MODULES_PREVIEW_PATH,
-        'tsconfig.json',
-      ),
-      contants_1.DOT_EMAIL_DEV,
-    );
-    await (0, cpy_1.default)(
-      contants_1.CLIENT_EMAILS_PATH,
-      contants_1.PACKAGE_EMAILS_PATH,
-    );
-  } catch (error) {
-    console.error({ error });
-  }
-};
-exports.copyFiles = copyFiles;