@react-email/preview-server 1.0.0-canary.0

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

@@ -0,0 +1,85 @@
+import path from 'node:path';
+import { type RawSourceMap, SourceMapConsumer } from 'source-map-js';
+import * as stackTraceParser from 'stacktrace-parser';
+import type { ErrorObject } from './types/error-object';
+
+export const improveErrorWithSourceMap = (
+  error: Error,
+
+  originalFilePath: string,
+  sourceMapToOriginalFile: RawSourceMap,
+): ErrorObject => {
+  let stack: string | undefined;
+
+  const sourceRoot =
+    sourceMapToOriginalFile.sourceRoot ?? path.dirname(originalFilePath);
+
+  const getStackLineFromMethodNameAndSource = (
+    methodName: string,
+    source: string,
+    line: number | undefined | null,
+    column: number | undefined | null,
+  ) => {
+    const columnAndLine =
+      column || line
+        ? `${line ?? ''}${line && column ? ':' : ''}${column ?? ''}`
+        : undefined;
+    const sourceToDisplay = path.relative(sourceRoot, source);
+    return methodName === '<unknown>'
+      ? ` at ${sourceToDisplay}${columnAndLine ? `:${columnAndLine}` : ''}`
+      : ` at ${methodName} (${sourceToDisplay}${
+          columnAndLine ? `:${columnAndLine}` : ''
+        })`;
+  };
+
+  if (typeof error.stack !== 'undefined') {
+    const parsedStack = stackTraceParser.parse(error.stack);
+    const sourceMapConsumer = new SourceMapConsumer(sourceMapToOriginalFile);
+    const newStackLines = [] as string[];
+    for (const stackFrame of parsedStack) {
+      if (stackFrame.file === originalFilePath) {
+        if (stackFrame.column || stackFrame.lineNumber) {
+          const positionWithError = sourceMapConsumer.originalPositionFor({
+            column: stackFrame.column ?? 0,
+            line: stackFrame.lineNumber ?? 0,
+          });
+
+          newStackLines.push(
+            getStackLineFromMethodNameAndSource(
+              stackFrame.methodName,
+              // This can actually be null
+              // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+              positionWithError.source ?? stackFrame.file,
+              positionWithError.line,
+              positionWithError.column,
+            ),
+          );
+        } else {
+          newStackLines.push(
+            getStackLineFromMethodNameAndSource(
+              stackFrame.methodName,
+              stackFrame.file,
+              stackFrame.lineNumber,
+              stackFrame.column,
+            ),
+          );
+        }
+      } else if (stackFrame.file) {
+        const stackLine = getStackLineFromMethodNameAndSource(
+          stackFrame.methodName,
+          stackFrame.file,
+          stackFrame.lineNumber,
+          stackFrame.column,
+        );
+        newStackLines.push(stackLine);
+      }
+    }
+    stack = newStackLines.join('\n');
+  }
+
+  return {
+    name: error.name,
+    message: error.message,
+    stack,
+  };
+};

package/src/utils/index.ts

@@ -0,0 +1,6 @@
+export * from './cn';
+export * from './copy-text-to-clipboard';
+export * from './language-map';
+export * from './sanitize';
+export * from './types/as';
+export * from './unreachable';

package/src/utils/js-email-detection.spec.ts

@@ -0,0 +1,24 @@
+import path from 'node:path';
+import { getEmailsDirectoryMetadata } from './get-emails-directory-metadata';
+
+describe('JavaScript Email Detection', async () => {
+  const testingDir = path.resolve(__dirname, 'testing');
+  const emailsMetadata = await getEmailsDirectoryMetadata(testingDir, true);
+
+  it('should detect JavaScript files with ES6 export default syntax', async () => {
+    expect(emailsMetadata).toBeDefined();
+    expect(emailsMetadata?.emailFilenames).toContain(
+      'js-email-export-default.js',
+    );
+  });
+
+  it('should detect JavaScript files with CommonJS module.exports', async () => {
+    expect(emailsMetadata).toBeDefined();
+    expect(emailsMetadata?.emailFilenames).toContain('js-email-test.js');
+  });
+
+  it('should detect MDX-style JavaScript files with named exports', async () => {
+    expect(emailsMetadata).toBeDefined();
+    expect(emailsMetadata?.emailFilenames).toContain('mdx-email-test.js');
+  });
+});

package/src/utils/language-map.ts

@@ -0,0 +1,7 @@
+const languageMap = {
+  jsx: 'React',
+  markup: 'HTML',
+  markdown: 'Plain Text',
+};
+
+export default languageMap;

package/src/utils/linting.ts

@@ -0,0 +1,60 @@
+import { checkImages } from '../actions/email-validation/check-images';
+import { checkLinks } from '../actions/email-validation/check-links';
+import type { LintingRow } from '../components/toolbar/linter';
+import { loadStream } from './load-stream';
+
+export interface LintingSource<T> {
+  getStream(): Promise<ReadableStream<T>>;
+  mapValue(value: NoInfer<T>): LintingRow | undefined;
+}
+
+function createSource<T>(source: LintingSource<T>): LintingSource<T> {
+  return source;
+}
+
+export function getLintingSources(
+  markup: string,
+
+  urlBase: string,
+): LintingSource<unknown>[] {
+  return [
+    createSource({
+      getStream() {
+        return checkImages(markup, urlBase);
+      },
+      mapValue(result) {
+        if (result && result.status !== 'success') {
+          return {
+            result: result,
+            source: 'image',
+          };
+        }
+      },
+    }),
+    createSource({
+      getStream() {
+        return checkLinks(markup);
+      },
+      mapValue(result) {
+        if (result && result.status !== 'success') {
+          return {
+            result: result,
+            source: 'link',
+          };
+        }
+      },
+    }),
+  ];
+}
+
+export async function* loadLintingRowsFrom(sources: LintingSource<unknown>[]) {
+  for await (const source of sources) {
+    const stream = await source.getStream();
+    for await (const value of loadStream(stream)) {
+      const row = source.mapValue(value);
+      if (row) {
+        yield row;
+      }
+    }
+  }
+}

package/src/utils/load-stream.ts

@@ -0,0 +1,15 @@
+export async function* loadStream<T>(stream: ReadableStream<T>) {
+  const reader = stream.getReader();
+  try {
+    while (true) {
+      const { value, done } = await reader.read();
+      if (done) {
+        break;
+      }
+
+      yield value;
+    }
+  } finally {
+    reader.releaseLock();
+  }
+}

package/src/utils/register-spinner-autostopping.ts

@@ -0,0 +1,28 @@
+import logSymbols from 'log-symbols';
+import type { Ora } from 'ora';
+
+const spinners = new Set<Ora>();
+
+process.on('SIGINT', () => {
+  spinners.forEach((spinner) => {
+    if (spinner.isSpinning) {
+      spinner.stop();
+    }
+  });
+});
+
+process.on('exit', (code) => {
+  if (code !== 0) {
+    spinners.forEach((spinner) => {
+      if (spinner.isSpinning) {
+        spinner.stopAndPersist({
+          symbol: logSymbols.error,
+        });
+      }
+    });
+  }
+});
+
+export const registerSpinnerAutostopping = (spinner: Ora) => {
+  spinners.add(spinner);
+};

package/src/utils/result.ts

@@ -0,0 +1,49 @@
+type Ok<T, _E> = {
+  value: T;
+};
+type Error<_T, E> = {
+  error: E;
+};
+
+/**
+ * Do not destructure this object, it is meant to have all fields together
+ * in the same object
+ */
+export type Result<T, E> = Ok<T, E> | Error<T, E>;
+
+export function isErr<T, E>(result: Result<T, E>): result is Error<T, E> {
+  return 'error' in result;
+}
+
+export function isOk<T, E>(result: Result<T, E>): result is Ok<T, E> {
+  return 'value' in result && !('error' in result);
+}
+
+export function mapResult<T, E, B>(
+  result: Result<T, E>,
+  callback: (value: T) => B,
+): Result<B, E> {
+  if (isOk(result)) {
+    return ok(callback(result.value));
+  }
+
+  return result;
+}
+
+export function ok<T, E>(value: NoInfer<T>): Ok<T, E>;
+// biome-ignore lint/suspicious/noConfusingVoidType: This is required for void return types on functions that can still error
+export function ok<T extends void = void, E = never>(value: void): Ok<void, E>;
+export function ok<T, E>(value: NoInfer<T>): Ok<T, E> {
+  return {
+    value,
+  };
+}
+
+export function err<T, E>(error: NoInfer<E>): Error<T, E>;
+// biome-ignore lint/suspicious/noConfusingVoidType: This is required for void return types on functions that can still error
+export function err<T, E extends void = void>(error: void): Error<T, void>;
+export function err<T, E>(error: NoInfer<E>): Error<T, E> {
+  return {
+    error,
+  };
+}

package/src/utils/run-bundled-code.ts

@@ -0,0 +1,64 @@
+import path from 'node:path';
+import vm from 'node:vm';
+import { err, ok, type Result } from './result';
+import { staticNodeModulesForVM } from './static-node-modules-for-vm';
+
+export const runBundledCode = (
+  code: string,
+  filename: string,
+): Result<unknown, unknown> => {
+  const fakeContext = {
+    ...global,
+    console,
+    Buffer,
+    AbortSignal,
+    Event,
+    EventTarget,
+    TextDecoder,
+    Request,
+    Response,
+    TextDecoderStream,
+    TextEncoder,
+    TextEncoderStream,
+    ReadableStream,
+    URL,
+    URLSearchParams,
+    Headers,
+    module: {
+      exports: {},
+    },
+    __filename: filename,
+    __dirname: path.dirname(filename),
+    require: (specifiedModule: string) => {
+      let m = specifiedModule;
+      if (specifiedModule.startsWith('node:')) {
+        m = m.split(':')[1]!;
+      }
+
+      if (m in staticNodeModulesForVM) {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+        return staticNodeModulesForVM[m];
+      }
+
+      // 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:
+      //
+      // Import trace for requested module:
+      // ./src/utils/get-email-component.tsx
+      // ./src/app/page.tsx
+      //  ⚠ ./src/utils/get-email-component.tsx
+      // Critical dependency: the request of a dependency is an expression
+    },
+    process,
+  };
+
+  try {
+    vm.runInNewContext(code, fakeContext, { filename });
+  } catch (exception) {
+    return err(exception);
+  }
+
+  return ok(fakeContext.module.exports as unknown);
+};

package/src/utils/sanitize.ts

@@ -0,0 +1,6 @@
+/**
+ * Sanitizes text by replacing underscores and hyphens with spaces
+ */
+export const sanitize = (text: string): string => {
+  return text.replace(/[_-]/g, ' ');
+};

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

@@ -0,0 +1,93 @@
+import assert from 'node:assert';
+import asyncHooks from 'node:async_hooks';
+import buffer from 'node:buffer';
+import childProcess from 'node:child_process';
+import cluster from 'node:cluster';
+import console from 'node:console';
+import constants from 'node:constants';
+import crypto from 'node:crypto';
+import dgram from 'node:dgram';
+import diagnosticsChannel from 'node:diagnostics_channel';
+import dns from 'node:dns';
+import domain from 'node:domain';
+import events from 'node:events';
+import fs from 'node:fs';
+import fsPromises from 'node:fs/promises';
+import http from 'node:http';
+import http2 from 'node:http2';
+import https from 'node:https';
+import inspector from 'node:inspector';
+import module from 'node:module';
+import net from 'node:net';
+import os from 'node:os';
+import path from 'node:path';
+import perfHooks from 'node:perf_hooks';
+import process from 'node:process';
+import querystring from 'node:querystring';
+import readline from 'node:readline';
+import repl from 'node:repl';
+import stream from 'node:stream';
+import stringDecoder from 'node:string_decoder';
+import timers from 'node:timers';
+import timersPromises from 'node:timers/promises';
+import tls from 'node:tls';
+import tty from 'node:tty';
+import url from 'node:url';
+import util from 'node:util';
+import utilTypes from 'node:util/types';
+import v8 from 'node:v8';
+import vm from 'node:vm';
+import workerThreads from 'node:worker_threads';
+import zlib from 'node:zlib';
+// See https://github.com/resend/react-email/issues/1841#issuecomment-2589985562
+import punycode from 'module-punycode';
+
+/**
+ * A map of the name of the modules (including `node:` prefixed ones)
+ * provided by Node because dynamic requires of them, even on the server
+ * will not be resolved properly
+ */
+export const staticNodeModulesForVM = {
+  assert,
+  async_hooks: asyncHooks,
+  buffer,
+  child_process: childProcess,
+  cluster,
+  console,
+  constants,
+  crypto,
+  dgram,
+  diagnostics_channel: diagnosticsChannel,
+  dns,
+  domain,
+  events,
+  fs,
+  'fs/promises': fsPromises,
+  http,
+  http2,
+  https,
+  inspector,
+  module,
+  net,
+  os,
+  path,
+  perf_hooks: perfHooks,
+  process,
+  punycode,
+  querystring,
+  readline,
+  repl,
+  stream,
+  string_decoder: stringDecoder,
+  timers,
+  'timers/promises': timersPromises,
+  tls,
+  tty,
+  url,
+  util,
+  'util/types': utilTypes,
+  v8,
+  vm,
+  worker_threads: workerThreads,
+  zlib,
+};

package/src/utils/testing/js-email-export-default.js

@@ -0,0 +1,17 @@
+// A JavaScript email component with ES6 export default
+import { Button, Html } from '@react-email/components';
+
+function Email() {
+  return (
+    <Html>
+      <Button
+        href="https://example.com"
+        style={{ background: '#000', color: '#fff', padding: '12px 20px' }}
+      >
+        Click me
+      </Button>
+    </Html>
+  );
+}
+
+export default Email;

package/src/utils/testing/js-email-test.js

@@ -0,0 +1,18 @@
+// A simple JavaScript email component
+const React = require('react');
+const { Html, Button } = require('@react-email/components');
+
+function Email() {
+  return (
+    <Html>
+      <Button
+        href="https://example.com"
+        style={{ background: '#000', color: '#fff', padding: '12px 20px' }}
+      >
+        Click me
+      </Button>
+    </Html>
+  );
+}
+
+module.exports = Email;

package/src/utils/testing/mdx-email-test.js

@@ -0,0 +1,128 @@
+import { Button, Html } from '@react-email/components';
+import { useMDXComponents as _provideComponents } from 'react';
+import {
+  Fragment as _Fragment,
+  jsxDEV as _jsxDEV,
+} from 'react/jsx-dev-runtime';
+
+const MDXLayout = function Email2() {
+  return _jsxDEV(
+    Html,
+    {
+      children: _jsxDEV(
+        Button,
+        {
+          href: 'https://example.com',
+          style: {
+            background: '#000',
+            color: '#fff',
+            padding: '12px 20px',
+          },
+          children: 'Click me',
+        },
+        void 0,
+        false,
+        {
+          fileName:
+            '/Users/david/src/silencia-ai/silencia/proto/emails-raw/em1.mdx',
+          lineNumber: 7,
+          columnNumber: 7,
+        },
+        this,
+      ),
+    },
+    void 0,
+    false,
+    {
+      fileName:
+        '/Users/david/src/silencia-ai/silencia/proto/emails-raw/em1.mdx',
+      lineNumber: 6,
+      columnNumber: 5,
+    },
+    this,
+  );
+};
+
+function _createMdxContent(props) {
+  const _components = {
+    h1: 'h1',
+    ..._provideComponents(),
+    ...props.components,
+  };
+  return _jsxDEV(
+    _Fragment,
+    {
+      children: [
+        _jsxDEV(
+          _components.h1,
+          {
+            children: 'Hello!',
+          },
+          void 0,
+          false,
+          {
+            fileName:
+              '/Users/david/src/silencia-ai/silencia/proto/emails-raw/em1.mdx',
+            lineNumber: 17,
+            columnNumber: 1,
+          },
+          this,
+        ),
+        '\n',
+        _jsxDEV(
+          Email,
+          {},
+          void 0,
+          false,
+          {
+            fileName:
+              '/Users/david/src/silencia-ai/silencia/proto/emails-raw/em1.mdx',
+            lineNumber: 19,
+            columnNumber: 1,
+          },
+          this,
+        ),
+      ],
+    },
+    void 0,
+    true,
+    {
+      fileName:
+        '/Users/david/src/silencia-ai/silencia/proto/emails-raw/em1.mdx',
+      lineNumber: 1,
+      columnNumber: 1,
+    },
+    this,
+  );
+}
+
+function MDXContent(props = {}) {
+  return _jsxDEV(
+    MDXLayout,
+    {
+      ...props,
+      children: _jsxDEV(
+        _createMdxContent,
+        {
+          ...props,
+        },
+        void 0,
+        false,
+        {
+          fileName:
+            '/Users/david/src/silencia-ai/silencia/proto/emails-raw/em1.mdx',
+        },
+        this,
+      ),
+    },
+    void 0,
+    false,
+    {
+      fileName:
+        '/Users/david/src/silencia-ai/silencia/proto/emails-raw/em1.mdx',
+    },
+    this,
+  );
+}
+
+export { MDXContent as default };

package/src/utils/testing/request-response-email.tsx

@@ -0,0 +1,9 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+const req = new Request('https://react.email');
+const res = new Response('{}');
+
+const Email = () => {
+  return <div />;
+};
+
+export default Email;

package/src/utils/types/as.ts

@@ -0,0 +1,26 @@
+export type As<
+  DefaultTag extends React.ElementType,
+  T1 extends React.ElementType,
+  T2 extends React.ElementType = T1,
+  T3 extends React.ElementType = T1,
+  T4 extends React.ElementType = T1,
+  T5 extends React.ElementType = T1,
+> =
+  | (React.ComponentPropsWithRef<DefaultTag> & {
+      as?: DefaultTag;
+    })
+  | (React.ComponentPropsWithRef<T1> & {
+      as: T1;
+    })
+  | (React.ComponentPropsWithRef<T2> & {
+      as: T2;
+    })
+  | (React.ComponentPropsWithRef<T3> & {
+      as: T3;
+    })
+  | (React.ComponentPropsWithRef<T4> & {
+      as: T4;
+    })
+  | (React.ComponentPropsWithRef<T5> & {
+      as: T5;
+    });

package/src/utils/types/email-template.ts

@@ -0,0 +1,8 @@
+export interface EmailTemplate {
+  (props: Record<string, unknown> | Record<string, never>): React.ReactNode;
+  PreviewProps?: Record<string, unknown>;
+}
+
+export const isEmailTemplate = (val: unknown): val is EmailTemplate => {
+  return typeof val === 'function';
+};

package/src/utils/types/error-object.ts

@@ -0,0 +1,11 @@
+/**
+ * An object that mimics the structure of the Error class,
+ * we just can't use the Error class here because server actions can't
+ * return classes
+ */
+export interface ErrorObject {
+  name: string;
+  stack: string | undefined;
+  cause?: unknown;
+  message: string;
+}

package/src/utils/types/hot-reload-change.ts

@@ -0,0 +1,13 @@
+export interface HotReloadChange {
+  filename: string;
+  event:
+    | 'all'
+    | 'ready'
+    | 'add'
+    | 'change'
+    | 'addDir'
+    | 'unlink'
+    | 'unlinkDir'
+    | 'raw'
+    | 'error';
+}