react-email 3.0.6 → 3.0.7-canary.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-email",
-  "version": "3.0.6",
+  "version": "3.0.7-canary.1",
   "description": "A live preview of your emails right in your browser.",
   "bin": {
     "email": "./dist/cli/index.js"
@@ -25,14 +25,14 @@
     "chokidar": "4.0.3",
     "commander": "11.1.0",
     "debounce": "2.0.0",
-    "esbuild": "0.19.11",
+    "esbuild": "0.23.0",
     "glob": "10.3.4",
     "log-symbols": "4.1.0",
     "mime-types": "2.1.35",
     "next": "15.1.2",
     "normalize-path": "3.0.0",
     "ora": "5.4.1",
-    "socket.io": "4.8.0"
+    "socket.io": "4.8.1"
   },
   "devDependencies": {
     "@radix-ui/colors": "1.0.1",
@@ -53,9 +53,6 @@
     "@vercel/style-guide": "5.1.0",
     "autoprefixer": "10.4.20",
     "clsx": "2.1.0",
-    "eslint": "8.50.0",
-    "eslint-config-prettier": "9.0.0",
-    "eslint-config-turbo": "2.1.0",
     "framer-motion": "12.0.0-alpha.2",
     "postcss": "8.4.40",
     "prism-react-renderer": "2.1.0",
@@ -72,14 +69,13 @@
     "tsx": "4.9.0",
     "typescript": "5.1.6",
     "vitest": "1.1.3",
-    "@react-email/render": "1.0.4"
+    "@react-email/render": "1.0.5-canary.1"
   },
   "scripts": {
     "build": "tsup-node && node build-preview-server.mjs",
     "dev": "tsup-node --watch",
     "test": "vitest run",
     "test:watch": "vitest",
-    "clean": "rm -rf dist",
-    "lint": "eslint . && tsc"
+    "clean": "rm -rf dist"
   }
 }

package/postcss.config.js

@@ -5,4 +5,4 @@ module.exports = {
     tailwindcss: { config: path.resolve(__dirname, 'tailwind.config.ts') },
     autoprefixer: {},
   },
-}
+};

package/src/actions/get-email-path-from-slug.ts

@@ -1,6 +1,6 @@
 'use server';
-import path from 'node:path';
 import fs from 'node:fs';
+import path from 'node:path';
 import { cache } from 'react';
 import { emailsDirectoryAbsolutePath } from '../utils/emails-directory-absolute-path';
 
@@ -13,11 +13,14 @@ export const getEmailPathFromSlug = cache(async (slug: string) => {
 
   if (fs.existsSync(`${pathWithoutExtension}.tsx`)) {
     return `${pathWithoutExtension}.tsx`;
-  } else if (fs.existsSync(`${pathWithoutExtension}.jsx`)) {
+  }
+  if (fs.existsSync(`${pathWithoutExtension}.jsx`)) {
     return `${pathWithoutExtension}.jsx`;
-  } else if (fs.existsSync(`${pathWithoutExtension}.ts`)) {
+  }
+  if (fs.existsSync(`${pathWithoutExtension}.ts`)) {
     return `${pathWithoutExtension}.ts`;
-  } else if (fs.existsSync(`${pathWithoutExtension}.js`)) {
+  }
+  if (fs.existsSync(`${pathWithoutExtension}.js`)) {
     return `${pathWithoutExtension}.js`;
   }
 

package/src/actions/render-email-by-path.tsx

@@ -1,13 +1,13 @@
 'use server';
 import fs from 'node:fs';
 import path from 'node:path';
-import ora from 'ora';
-import logSymbols from 'log-symbols';
 import chalk from 'chalk';
+import logSymbols from 'log-symbols';
+import ora from 'ora';
 import { getEmailComponent } from '../utils/get-email-component';
-import type { ErrorObject } from '../utils/types/error-object';
 import { improveErrorWithSourceMap } from '../utils/improve-error-with-sourcemap';
 import { registerSpinnerAutostopping } from '../utils/register-spinner-autostopping';
+import type { ErrorObject } from '../utils/types/error-object';
 
 export interface RenderedEmailMetadata {
   markup: string;

package/src/app/layout.tsx

@@ -1,7 +1,7 @@
 import type { Metadata } from 'next';
 import './globals.css';
-import { emailsDirectoryAbsolutePath } from '../utils/emails-directory-absolute-path';
 import { EmailsProvider } from '../contexts/emails';
+import { emailsDirectoryAbsolutePath } from '../utils/emails-directory-absolute-path';
 import { getEmailsDirectoryMetadata } from '../utils/get-emails-directory-metadata';
 import { inter } from './inter';
 

package/src/app/page.tsx

@@ -1,6 +1,6 @@
 import path from 'node:path';
-import Link from 'next/link';
 import Image from 'next/image';
+import Link from 'next/link';
 import { Button, Heading, Text } from '../components';
 import { Shell } from '../components/shell';
 import { emailsDirectoryAbsolutePath } from '../utils/emails-directory-absolute-path';

package/src/app/preview/[...slug]/page.tsx

@@ -1,11 +1,11 @@
 import path from 'node:path';
-import { Suspense } from 'react';
 import { redirect } from 'next/navigation';
+import { Suspense } from 'react';
 import { getEmailPathFromSlug } from '../../../actions/get-email-path-from-slug';
 import { renderEmailByPath } from '../../../actions/render-email-by-path';
 import { emailsDirectoryAbsolutePath } from '../../../utils/emails-directory-absolute-path';
-import Home from '../../page';
 import { getEmailsDirectoryMetadata } from '../../../utils/get-emails-directory-metadata';
+import Home from '../../page';
 import Preview from './preview';
 
 export const dynamicParams = true;

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

@@ -3,13 +3,13 @@
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import React from 'react';
 import { Toaster } from 'sonner';
-import { useHotreload } from '../../../hooks/use-hot-reload';
 import type { EmailRenderingResult } from '../../../actions/render-email-by-path';
 import { CodeContainer } from '../../../components/code-container';
 import { Shell } from '../../../components/shell';
 import { Tooltip } from '../../../components/tooltip';
-import { useRenderingMetadata } from '../../../hooks/use-rendering-metadata';
 import { useEmailRenderingResult } from '../../../hooks/use-email-rendering-result';
+import { useHotreload } from '../../../hooks/use-hot-reload';
+import { useRenderingMetadata } from '../../../hooks/use-rendering-metadata';
 import { RenderingError } from './rendering-error';
 
 interface PreviewProps {

package/src/components/button.tsx

@@ -1,7 +1,7 @@
 import * as SlotPrimitive from '@radix-ui/react-slot';
 import * as React from 'react';
-import { unreachable } from '../utils/unreachable';
 import { cn } from '../utils/cn';
+import { unreachable } from '../utils/unreachable';
 
 type ButtonElement = React.ElementRef<'button'>;
 type RootProps = React.ComponentPropsWithoutRef<'button'>;

package/src/components/code-container.tsx

@@ -2,8 +2,8 @@ import { LayoutGroup, motion } from 'framer-motion';
 import type { Language } from 'prism-react-renderer';
 import * as React from 'react';
 import { copyTextToClipboard } from '../utils';
-import languageMap from '../utils/language-map';
 import { tabTransition } from '../utils/constants';
+import languageMap from '../utils/language-map';
 import { Code } from './code';
 import { IconButton } from './icons/icon-button';
 import { IconCheck } from './icons/icon-check';

package/src/components/heading.tsx

@@ -1,6 +1,6 @@
 import * as SlotPrimitive from '@radix-ui/react-slot';
 import * as React from 'react';
-import { type As, unreachable, cn } from '../utils';
+import { type As, cn, unreachable } from '../utils';
 
 export type HeadingSize =
   | '1'

package/src/components/sidebar/sidebar-directory-children.tsx

@@ -1,10 +1,9 @@
-import { AnimatePresence, LayoutGroup, motion } from 'framer-motion';
 import * as Collapsible from '@radix-ui/react-collapsible';
+import { AnimatePresence, LayoutGroup, motion } from 'framer-motion';
 import Link from 'next/link';
 import { useSearchParams } from 'next/navigation';
-import type { EmailsDirectory } from '../../utils/get-emails-directory-metadata';
-import { emailsDirectoryAbsolutePath } from '../../utils/emails-directory-absolute-path';
 import { cn } from '../../utils';
+import type { EmailsDirectory } from '../../utils/get-emails-directory-metadata';
 import { IconFile } from '../icons/icon-file';
 import { SidebarDirectory } from './sidebar-directory';
 
@@ -15,15 +14,13 @@ export const SidebarDirectoryChildren = (props: {
   isRoot?: boolean;
 }) => {
   const searchParams = useSearchParams();
-  const isBaseEmailsDirectory =
-    props.emailsDirectoryMetadata.absolutePath === emailsDirectoryAbsolutePath;
 
   return (
     <AnimatePresence initial={false}>
       {props.open ? (
         <Collapsible.Content
           asChild
-          className="relative data-[root=true]:mt-2 overflow-y-hidden pl-1"
+          className="relative overflow-y-hidden pl-1"
           forceMount
         >
           <motion.div
@@ -35,7 +32,7 @@ export const SidebarDirectoryChildren = (props: {
               <div className="line absolute left-2.5 w-px h-full bg-slate-6" />
             )}
 
-            <div className="data-[root=true]:py-2 flex flex-col truncate">
+            <div className="flex flex-col truncate">
               <LayoutGroup id="sidebar">
                 {props.emailsDirectoryMetadata.subDirectories.map(
                   (subDirectory) => (
@@ -50,7 +47,7 @@ export const SidebarDirectoryChildren = (props: {
 
                 {props.emailsDirectoryMetadata.emailFilenames.map(
                   (emailFilename, index) => {
-                    const emailSlug = isBaseEmailsDirectory
+                    const emailSlug = props.isRoot
                       ? emailFilename
                       : `${props.emailsDirectoryMetadata.relativePath}/${emailFilename}`;
 

package/src/components/sidebar/sidebar-directory.tsx

@@ -2,11 +2,11 @@
 import * as Collapsible from '@radix-ui/react-collapsible';
 import * as React from 'react';
 import { cn } from '../../utils';
-import { type EmailsDirectory } from '../../utils/get-emails-directory-metadata';
+import type { EmailsDirectory } from '../../utils/get-emails-directory-metadata';
 import { Heading } from '../heading';
+import { IconArrowDown } from '../icons/icon-arrow-down';
 import { IconFolder } from '../icons/icon-folder';
 import { IconFolderOpen } from '../icons/icon-folder-open';
-import { IconArrowDown } from '../icons/icon-arrow-down';
 import { SidebarDirectoryChildren } from './sidebar-directory-children';
 
 interface SidebarDirectoryProps {

package/src/components/sidebar/sidebar.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import * as React from 'react';
 import * as Collapsible from '@radix-ui/react-collapsible';
+import * as React from 'react';
 import { useEmails } from '../../contexts/emails';
 import { cn } from '../../utils';
 import { Logo } from '../logo';
@@ -29,7 +29,7 @@ export const Sidebar = ({
         <Logo />
       </div>
       <nav className="p-4 flex-grow lg:pt-0 pl-0 w-screen h-[calc(100vh_-_70px)] lg:w-full lg:min-w-[275px] lg:max-w-[275px] flex flex-col overflow-y-auto">
-        <Collapsible.Root>
+        <Collapsible.Root open>
           <React.Suspense>
             <SidebarDirectoryChildren
               currentEmailOpenSlug={currentEmailOpenSlug}

package/src/components/text.tsx

@@ -1,6 +1,6 @@
 import * as SlotPrimitive from '@radix-ui/react-slot';
 import * as React from 'react';
-import { type As, unreachable, cn } from '../utils';
+import { type As, cn, unreachable } from '../utils';
 
 export type TextSize = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';
 export type TextColor = 'gray' | 'white';

package/src/components/tooltip-content.tsx

@@ -1,7 +1,7 @@
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as React from 'react';
-import { cn } from '../utils';
 import { inter } from '../app/inter';
+import { cn } from '../utils';
 
 type ContentElement = React.ElementRef<typeof TooltipPrimitive.Content>;
 type ContentProps = React.ComponentPropsWithoutRef<

package/src/components/tooltip.tsx

@@ -1,5 +1,5 @@
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import * as React from 'react';
+import type * as React from 'react';
 import { TooltipContent } from './tooltip-content';
 
 type RootProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>;

package/src/components/topbar.tsx

@@ -1,7 +1,7 @@
 'use client';
 import * as ToggleGroup from '@radix-ui/react-toggle-group';
 import { motion } from 'framer-motion';
-import * as React from 'react';
+import type * as React from 'react';
 import { cn } from '../utils';
 import { tabTransition } from '../utils/constants';
 import { Heading } from './heading';

package/src/hooks/use-email-rendering-result.ts

@@ -1,9 +1,9 @@
 import { useState } from 'react';
+import { getEmailPathFromSlug } from '../actions/get-email-path-from-slug';
 import {
-  renderEmailByPath,
   type EmailRenderingResult,
+  renderEmailByPath,
 } from '../actions/render-email-by-path';
-import { getEmailPathFromSlug } from '../actions/get-email-path-from-slug';
 import { useHotreload } from './use-hot-reload';
 
 export const useEmailRenderingResult = (

package/src/utils/cn.ts

@@ -1,4 +1,4 @@
-import { clsx, type ClassValue } from 'clsx';
+import { type ClassValue, clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 
 export const cn = (...inputs: ClassValue[]) => {

package/src/utils/esbuild/renderring-utilities-exporter.ts

@@ -1,5 +1,5 @@
-import path from 'node:path';
 import { promises as fs } from 'node:fs';
+import path from 'node:path';
 import type { Loader, PluginBuild, ResolveOptions } from 'esbuild';
 import { escapeStringForRegex } from './escape-string-for-regex';
 

package/src/utils/get-email-component.ts

@@ -1,15 +1,15 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import path from 'node:path';
 import vm from 'node:vm';
-import type React from 'react';
-import { type RawSourceMap } from 'source-map-js';
-import { type OutputFile, build, type BuildFailure } from 'esbuild';
 import type { render } from '@react-email/render';
-import type { EmailTemplate as EmailComponent } from './types/email-template';
-import type { ErrorObject } from './types/error-object';
+import { type BuildFailure, type OutputFile, build } from 'esbuild';
+import type React from 'react';
+import type { RawSourceMap } from 'source-map-js';
+import { renderingUtilitiesExporter } from './esbuild/renderring-utilities-exporter';
 import { improveErrorWithSourceMap } from './improve-error-with-sourcemap';
 import { staticNodeModulesForVM } from './static-node-modules-for-vm';
-import { renderingUtilitiesExporter } from './esbuild/renderring-utilities-exporter';
+import type { EmailTemplate as EmailComponent } from './types/email-template';
+import type { ErrorObject } from './types/error-object';
 
 export const getEmailComponent = async (
   emailPath: string,

package/src/utils/get-emails-directory-metadata.spec.ts

@@ -18,7 +18,6 @@ test('getEmailsDirectoryMetadata on demo emails', async () => {
         relativePath: 'magic-links',
         emailFilenames: [
           'aws-verify-email',
-          'jobaccepted-magic-link',
           'linear-login-code',
           'notion-magic-link',
           'plaid-verify-identity',

package/src/utils/improve-error-with-sourcemap.ts

@@ -1,6 +1,6 @@
 import path from 'node:path';
+import { type RawSourceMap, SourceMapConsumer } from 'source-map-js';
 import * as stackTraceParser from 'stacktrace-parser';
-import { SourceMapConsumer, type RawSourceMap } from 'source-map-js';
 import type { ErrorObject } from './types/error-object';
 
 export const improveErrorWithSourceMap = (

package/src/utils/static-node-modules-for-vm.ts

@@ -48,15 +48,15 @@ import zlib from 'node:zlib';
  */
 export const staticNodeModulesForVM = {
   assert,
-  'async_hooks': asyncHooks,
+  async_hooks: asyncHooks,
   buffer,
-  'child_process': childProcess,
+  child_process: childProcess,
   cluster,
   console,
   constants,
   crypto,
   dgram,
-  'diagnostics_channel': diagnosticsChannel,
+  diagnostics_channel: diagnosticsChannel,
   dns,
   domain,
   events,
@@ -70,14 +70,14 @@ export const staticNodeModulesForVM = {
   net,
   os,
   path,
-  'perf_hooks': perfHooks,
+  perf_hooks: perfHooks,
   process,
   punycode,
   querystring,
   readline,
   repl,
   stream,
-  'string_decoder': stringDecoder,
+  string_decoder: stringDecoder,
   timers,
   'timers/promises': timersPromises,
   tls,
@@ -87,6 +87,6 @@ export const staticNodeModulesForVM = {
   'util/types': utilTypes,
   v8,
   vm,
-  'worker_threads': workerThreads,
+  worker_threads: workerThreads,
   zlib,
 };

package/tsconfig.json

@@ -30,10 +30,5 @@
     "outDir": "dist"
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": [
-    "tsconfig.export.json",
-    ".next",
-    "dist",
-    "node_modules"
-  ]
+  "exclude": ["tsconfig.export.json", ".next", "dist", "node_modules"]
 }

package/.eslintrc.js

@@ -1,52 +0,0 @@
-const { resolve } = require('node:path');
-
-const project = resolve(process.cwd(), './tsconfig.json');
-
-/** @type {import('eslint').ESLint.ConfigData} */
-module.exports = {
-  extends: [
-    "@vercel/style-guide/eslint/node",
-    "@vercel/style-guide/eslint/browser",
-    "@vercel/style-guide/eslint/typescript",
-    "@vercel/style-guide/eslint/react",
-    "@vercel/style-guide/eslint/next",
-    "eslint-config-turbo",
-  ]
-    .map(require.resolve)
-    .concat(["eslint-config-prettier"]),
-  parserOptions: {
-    project,
-  },
-  globals: {
-    React: true,
-    JSX: true,
-  },
-  settings: {
-    "import/resolver": {
-      typescript: {
-        project,
-      },
-    },
-  },
-  ignorePatterns: ['cli/', 'cli/index.mjs', "node_modules/", "dist/"],
-  rules: {
-    "@next/next/no-img-element": "off",
-    "@typescript-eslint/explicit-function-return-type": "off",
-    "import/no-default-export": "off",
-    "jsx-a11y/no-autofocus": "off",
-    "no-alert": "off",
-    "react/no-array-index-key": "off",
-    "react/function-component-definition": [
-      2,
-      {
-        namedComponents: "arrow-function",
-        unnamedComponents: "arrow-function",
-      },
-    ],
-    'import/no-cycle': 'off',
-    'import/no-extraneous-dependencies': 'off',
-    'turbo/no-undeclared-env-vars': 'off',
-    'eslint-comments/require-description': 'off',
-    'no-console': 'off',
-  },
-};

package/.prettierignore

@@ -1,3 +0,0 @@
-.react-email
-dist
-preview/.next

package/.prettierrc.js

@@ -1,8 +0,0 @@
-module.exports = {
-  quoteProps: 'consistent',
-  singleQuote: true,
-  trailingComma: 'all',
-  printWidth: 80,
-  useTabs: false,
-  bracketSpacing: true,
-};