react-email 1.1.1 → 1.1.2

package/dist/_preview/package.d.ts

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,39 @@
+'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/_preview/pages.js

@@ -12,7 +12,7 @@ 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',

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

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

package/dist/utils/copy-files.js

@@ -0,0 +1,110 @@
+'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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-email",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "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/source/_preview/pages.ts

@@ -12,7 +12,7 @@ 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',