feat(root): Visual Studio Code extension

packages/react-email/next.config.js

@@ -12,6 +12,9 @@ module.exports = {
 
     return config;
   },
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
   // Noticed an issue with typescript transpilation when going from Next 14.1.1 to 14.1.2
   // and I narrowed that down into this PR https://github.com/vercel/next.js/pull/62005
   //

packages/react-email/package.json

@@ -5,6 +5,21 @@
   "bin": {
     "email": "./dist/cli/index.js"
   },
+  "main": "./dist/package/index.js",
+  "module": "./dist/package/index.mjs",
+  "types": "./dist/package/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/package/index.d.mts",
+        "default": "./dist/package/index.mjs"
+      },
+      "require": {
+        "types": "./dist/package/index.d.ts",
+        "default": "./dist/package/index.js"
+      }
+    }
+  },
   "scripts": {
     "build": "tsup-node && node build-preview-server.mjs",
     "dev": "tsup-node --watch",

packages/react-email/src/actions/get-emails-directory-metadata.ts

@@ -2,29 +2,7 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import fs from 'node:fs';
 import path from 'node:path';
-
-const isFileAnEmail = (fullPath: string): boolean => {
-  const stat = fs.statSync(fullPath);
-
-  if (stat.isDirectory()) return false;
-
-  const { ext } = path.parse(fullPath);
-
-  if (!['.js', '.tsx', '.jsx'].includes(ext)) return false;
-
-  // This is to avoid a possible race condition where the file doesn't exist anymore
-  // once we are checking if it is an actual email, this couuld cause issues that
-  // would be very hard to debug and find out the why of it happening.
-  if (!fs.existsSync(fullPath)) {
-    return false;
-  }
-
-  // check with a heuristic to see if the file has at least
-  // a default export
-  const fileContents = fs.readFileSync(fullPath, 'utf8');
-
-  return /\bexport\s+default\b/gm.test(fileContents);
-};
+import { isFileAnEmail } from '../package';
 
 export interface EmailsDirectory {
   absolutePath: string;

packages/react-email/src/actions/render-email-by-path.tsx

@@ -1,29 +1,20 @@
 '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 { getEmailComponent } from '../utils/get-email-component';
-import type { ErrorObject } from '../utils/types/error-object';
-import { improveErrorWithSourceMap } from '../utils/improve-error-with-sourcemap';
+import type { RenderedEmailMetadata } from '../package';
+import { renderEmailByPath } from '../package';
+import { fromError, type ErrorObject } from '../utils/types/error-object';
 import { registerSpinnerAutostopping } from '../utils/register-spinner-autostopping';
 
-export interface RenderedEmailMetadata {
-  markup: string;
-  plainText: string;
-  reactMarkup: string;
-}
-
-export type EmailRenderingResult =
+export type ActionResult =
   | RenderedEmailMetadata
   | {
       error: ErrorObject;
     };
 
-export const renderEmailByPath = async (
-  emailPath: string,
-): Promise<EmailRenderingResult> => {
+const action = async (emailPath: string): Promise<ActionResult> => {
   const timeBeforeEmailRendered = performance.now();
 
   const emailFilename = path.basename(emailPath);
@@ -36,74 +27,31 @@ export const renderEmailByPath = async (
     registerSpinnerAutostopping(spinner);
   }
 
-  const result = await getEmailComponent(emailPath);
+  const result = await renderEmailByPath(emailPath);
 
   if ('error' in result) {
     spinner?.stopAndPersist({
       symbol: logSymbols.error,
       text: `Failed while rendering ${emailFilename}`,
     });
-    return { error: result.error };
+    return { error: fromError(result.error) };
   }
 
-  const {
-    emailComponent: Email,
-    createElement,
-    render,
-    sourceMapToOriginalFile,
-  } = result;
-
-  const previewProps = Email.PreviewProps || {};
-  const EmailComponent = Email as React.FC;
-  try {
-    const markup = await render(createElement(EmailComponent, previewProps), {
-      pretty: true,
-    });
-    const plainText = await render(
-      createElement(EmailComponent, previewProps),
-      {
-        plainText: true,
-      },
-    );
-
-    const reactMarkup = await fs.promises.readFile(emailPath, 'utf-8');
-
-    const milisecondsToRendered = performance.now() - timeBeforeEmailRendered;
-    let timeForConsole = `${milisecondsToRendered.toFixed(0)}ms`;
-    if (milisecondsToRendered <= 450) {
-      timeForConsole = chalk.green(timeForConsole);
-    } else if (milisecondsToRendered <= 1000) {
-      timeForConsole = chalk.yellow(timeForConsole);
-    } else {
-      timeForConsole = chalk.red(timeForConsole);
-    }
-    spinner?.stopAndPersist({
-      symbol: logSymbols.success,
-      text: `Successfully rendered ${emailFilename} in ${timeForConsole}`,
-    });
-
-    return {
-      // This ensures that no null byte character ends up in the rendered
-      // markup making users suspect of any issues. These null byte characters
-      // only seem to happen with React 18, as it has no similar incident with React 19.
-      markup: markup.replaceAll('\0', ''),
-      plainText,
-      reactMarkup,
-    };
-  } catch (exception) {
-    const error = exception as Error;
-
-    spinner?.stopAndPersist({
-      symbol: logSymbols.error,
-      text: `Failed while rendering ${emailFilename}`,
-    });
-
-    return {
-      error: improveErrorWithSourceMap(
-        error,
-        emailPath,
-        sourceMapToOriginalFile,
-      ),
-    };
+  const milisecondsToRendered = performance.now() - timeBeforeEmailRendered;
+  let timeForConsole = `${milisecondsToRendered.toFixed(0)}ms`;
+  if (milisecondsToRendered <= 450) {
+    timeForConsole = chalk.green(timeForConsole);
+  } else if (milisecondsToRendered <= 1000) {
+    timeForConsole = chalk.yellow(timeForConsole);
+  } else {
+    timeForConsole = chalk.red(timeForConsole);
   }
+  spinner?.stopAndPersist({
+    symbol: logSymbols.success,
+    text: `Successfully rendered ${emailFilename} in ${timeForConsole}`,
+  });
+
+  return result;
 };
+
+export { action as renderEmailByPath };

packages/react-email/src/app/preview/[...slug]/preview.tsx

@@ -4,7 +4,7 @@ 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 type { ActionResult } from '../../../actions/render-email-by-path';
 import { CodeContainer } from '../../../components/code-container';
 import { Shell } from '../../../components/shell';
 import { Tooltip } from '../../../components/tooltip';
@@ -16,7 +16,7 @@ interface PreviewProps {
   slug: string;
   emailPath: string;
   pathSeparator: string;
-  renderingResult: EmailRenderingResult;
+  renderingResult: ActionResult;
 }
 
 const Preview = ({

packages/react-email/src/cli/commands/export.ts

@@ -13,7 +13,7 @@ import {
   EmailsDirectory,
   getEmailsDirectoryMetadata,
 } from '../../actions/get-emails-directory-metadata';
-import { renderingUtilitiesExporter } from '../../utils/esbuild/renderring-utilities-exporter';
+import { renderingUtilitiesExporter } from '../../package';
 
 const getEmailTemplatesFromDirectory = (emailDirectory: EmailsDirectory) => {
   const templatePaths = [] as string[];

packages/react-email/src/contexts/emails.tsx

@@ -7,7 +7,7 @@ import {
 import { useHotreload } from '../hooks/use-hot-reload';
 import {
   renderEmailByPath,
-  type EmailRenderingResult,
+  type ActionResult,
 } from '../actions/render-email-by-path';
 import { getEmailPathFromSlug } from '../actions/get-email-path-from-slug';
 
@@ -19,8 +19,8 @@ const EmailsContext = createContext<
        */
       useEmailRenderingResult: (
         emailPath: string,
-        serverEmailRenderedResult: EmailRenderingResult,
-      ) => EmailRenderingResult;
+        serverEmailRenderedResult: ActionResult,
+      ) => ActionResult;
     }
   | undefined
 >(undefined);
@@ -45,7 +45,7 @@ export const EmailsProvider = (props: {
     useState<EmailsDirectory>(props.initialEmailsDirectoryMetadata);
 
   const [renderingResultPerEmailPath, setRenderingResultPerEmailPath] =
-    useState<Record<string, EmailRenderingResult>>({});
+    useState<Record<string, ActionResult>>({});
 
   if (process.env.NEXT_PUBLIC_IS_BUILDING !== 'true') {
     // this will not change on runtime so it doesn't violate

packages/react-email/src/hooks/use-rendering-metadata.ts

@@ -1,8 +1,6 @@
 import { useEffect } from 'react';
-import type {
-  EmailRenderingResult,
-  RenderedEmailMetadata,
-} from '../actions/render-email-by-path';
+import type { RenderedEmailMetadata } from '../package';
+import type { ActionResult } from '../actions/render-email-by-path';
 
 const lastRenderingMetadataPerEmailPath = {} as Record<
   string,
@@ -15,8 +13,8 @@ const lastRenderingMetadataPerEmailPath = {} as Record<
  */
 export const useRenderingMetadata = (
   emailPath: string,
-  renderingResult: EmailRenderingResult,
-  initialRenderingMetadata?: EmailRenderingResult,
+  renderingResult: ActionResult,
+  initialRenderingMetadata?: ActionResult,
 ): RenderedEmailMetadata | undefined => {
   useEffect(() => {
     if ('markup' in renderingResult) {

packages/react-email/src/package/index.ts

@@ -0,0 +1 @@
+export * from './preview-utils';

packages/react-email/src/utils/get-email-component.ts → packages/react-email/src/package/preview-utils/get-email-component.ts

@@ -5,11 +5,10 @@ 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 { 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 './utils/email-template';
+import { improveErrorWithSourceMap } from './utils/improve-error-with-source-map';
+import { staticNodeModulesForVM } from './utils/static-node-modules-for-vm';
+import { renderingUtilitiesExporter } from './utils/rendering-utilities-exporter';
 
 export const getEmailComponent = async (
   emailPath: string,
@@ -23,7 +22,7 @@ export const getEmailComponent = async (
 
       sourceMapToOriginalFile: RawSourceMap;
     }
-  | { error: ErrorObject }
+  | { error: Error }
 > => {
   let outputFiles: OutputFile[];
   try {
@@ -95,13 +94,12 @@ export const getEmailComponent = async (
 
       if (m in staticNodeModulesForVM) {
         // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-        return staticNodeModulesForVM[m];
+        return staticNodeModulesForVM[m as keyof typeof staticNodeModulesForVM];
       }
 
       // eslint-disable-next-line @typescript-eslint/no-var-requires, @typescript-eslint/no-useless-template-literals
       return require(`${specifiedModule}`) as unknown;
-      // this stupid string templating was necessary to not have
-      // webpack warnings like:
+      // this string templating was necessary to not have webpack warnings like:
       //
       // Import trace for requested module:
       // ./src/utils/get-email-component.tsx

packages/react-email/src/package/preview-utils/index.ts

@@ -0,0 +1,5 @@
+export * from './render-email-by-path';
+export * from './get-email-component';
+export * from './utils/email-template';
+export * from './utils/rendering-utilities-exporter';
+export * from './is-file-an-email';

packages/react-email/src/package/preview-utils/is-file-an-email.ts

@@ -0,0 +1,25 @@
+import fs from 'node:fs';
+import path from 'node:path';
+
+export const isFileAnEmail = (fullPath: string): boolean => {
+  const stat = fs.statSync(fullPath);
+
+  if (stat.isDirectory()) return false;
+
+  const { ext } = path.parse(fullPath);
+
+  if (!['.js', '.tsx', '.jsx'].includes(ext)) return false;
+
+  // This is to avoid a possible race condition where the file doesn't exist anymore
+  // once we are checking if it is an actual email, this couuld cause issues that
+  // would be very hard to debug and find out the why of it happening.
+  if (!fs.existsSync(fullPath)) {
+    return false;
+  }
+
+  // check with a heuristic to see if the file has at least
+  // a default export
+  const fileContents = fs.readFileSync(fullPath, 'utf8');
+
+  return /\bexport\s+default\b/gm.test(fileContents);
+};