promote-email-templates 0.0.19 → 0.1.1

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

@@ -0,0 +1,127 @@
+'use client';
+import { createContext, useContext, useEffect, useState } from 'react';
+import {
+  getEmailsDirectoryMetadata,
+  type EmailsDirectory,
+} from '../actions/get-emails-directory-metadata';
+import { useHotreload } from '../hooks/use-hot-reload';
+import {
+  emailsDirRelativePath,
+  emailsDirectoryAbsolutePath,
+  normalizePath,
+  pathSeparator,
+} from '../utils/emails-directory-absolute-path';
+import {
+  renderEmailByPath,
+  type EmailRenderingResult,
+} from '../actions/render-email-by-path';
+import { getEmailPathFromSlug } from '../actions/get-email-path-from-slug';
+
+const EmailsContext = createContext<
+  | {
+      emailsDirectoryMetadata: EmailsDirectory;
+      /**
+       * Uses the hot reloaded bundled build and rendering email result
+       */
+      useEmailRenderingResult: (
+        emailPath: string,
+        serverEmailRenderedResult: EmailRenderingResult,
+      ) => EmailRenderingResult;
+    }
+  | undefined
+>(undefined);
+
+export const useEmails = () => {
+  const providerValue = useContext(EmailsContext);
+
+  if (typeof providerValue === 'undefined') {
+    throw new Error(
+      'Cannot call `useEmail()` outside of an EmailsContext provider!',
+    );
+  }
+
+  return providerValue;
+};
+
+export const EmailsProvider = (props: {
+  initialEmailsDirectoryMetadata: EmailsDirectory;
+  children: React.ReactNode;
+}) => {
+  const [emailsDirectoryMetadata, setEmailsDirectoryMetadata] =
+    useState<EmailsDirectory>(props.initialEmailsDirectoryMetadata);
+
+  const [renderingResultPerEmailPath, setRenderingResultPerEmailPath] =
+    useState<Record<string, EmailRenderingResult>>({});
+
+  if (process.env.NEXT_PUBLIC_IS_BUILDING !== 'true') {
+    // this will not change on runtime so it doesn't violate
+    // the rules of hooks
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useHotreload(async (changes) => {
+      const metadata = await getEmailsDirectoryMetadata(
+        emailsDirectoryAbsolutePath,
+      );
+      if (metadata) {
+        setEmailsDirectoryMetadata(metadata);
+      } else {
+        throw new Error(
+          'Hot reloading: unable to find the emails directory to update the sidebar',
+        );
+      }
+
+      for await (const change of changes) {
+        const normalizedEmailsDirRelativePath = normalizePath(
+          emailsDirRelativePath,
+        );
+        const slugForChangedEmail =
+          // filename ex: emails/apple-receipt.tsx
+          // so we need to remove the "emails/" because it isn't used
+          // on the slug parameter for the preview page
+          change.filename
+            .replace(`${normalizedEmailsDirRelativePath}${pathSeparator}`, '')
+            .replace(normalizedEmailsDirRelativePath, '');
+
+        const pathForChangedEmail =
+          await getEmailPathFromSlug(slugForChangedEmail);
+
+        const lastResult = renderingResultPerEmailPath[pathForChangedEmail];
+
+        if (typeof lastResult !== 'undefined') {
+          const renderingResult = await renderEmailByPath(pathForChangedEmail);
+
+          setRenderingResultPerEmailPath((map) => ({
+            ...map,
+            [pathForChangedEmail]: renderingResult,
+          }));
+        }
+      }
+    });
+  }
+
+  return (
+    <EmailsContext.Provider
+      value={{
+        emailsDirectoryMetadata,
+        useEmailRenderingResult: (emailPath, serverEmailRenderedResult) => {
+          useEffect(() => {
+            if (typeof renderingResultPerEmailPath[emailPath] === 'undefined') {
+              setRenderingResultPerEmailPath((map) => ({
+                ...map,
+                [emailPath]: serverEmailRenderedResult,
+              }));
+            }
+          }, [serverEmailRenderedResult, emailPath]);
+
+          if (typeof renderingResultPerEmailPath[emailPath] !== 'undefined') {
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            return renderingResultPerEmailPath[emailPath]!;
+          }
+
+          return serverEmailRenderedResult;
+        },
+      }}
+    >
+      {props.children}
+    </EmailsContext.Provider>
+  );
+};

package/.react-email/src/hooks/use-hot-reload.ts

@@ -0,0 +1,35 @@
+'use client';
+import { useEffect, useRef } from 'react';
+import { type Socket, io } from 'socket.io-client';
+import type { HotReloadChange } from '../utils/types/hot-reload-change';
+
+/**
+ * Hook that detects any "reload" event sent from the CLI's web socket
+ * and calls the received parameter callback
+ */
+export const useHotreload = (
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  onShouldReload: (changes: HotReloadChange[]) => any,
+) => {
+  const socketRef = useRef<Socket | null>(null);
+
+  useEffect(() => {
+    if (process.env.NODE_ENV === 'production') {
+      return;
+    }
+
+    if (!socketRef.current) {
+      socketRef.current = io();
+    }
+    const socket = socketRef.current;
+
+    socket.on('reload', (changes: HotReloadChange[]) => {
+      console.debug('Reloading...');
+      void onShouldReload(changes);
+    });
+
+    return () => {
+      socket.off();
+    };
+  }, [onShouldReload]);
+};

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

@@ -0,0 +1,36 @@
+import { useEffect } from 'react';
+import type {
+  EmailRenderingResult,
+  RenderedEmailMetadata,
+} from '../actions/render-email-by-path';
+
+const lastRenderingMetadataPerEmailPath = {} as Record<
+  string,
+  RenderedEmailMetadata
+>;
+
+/**
+ * Returns the rendering metadata if the given `renderingResult`
+ * does not error. If it does error it returns the last value it had for the hook.
+ */
+export const useRenderingMetadata = (
+  emailPath: string,
+  renderingResult: EmailRenderingResult,
+  initialRenderingMetadata?: EmailRenderingResult,
+): RenderedEmailMetadata | undefined => {
+  useEffect(() => {
+    if ('markup' in renderingResult) {
+      lastRenderingMetadataPerEmailPath[emailPath] = renderingResult;
+    } else if (
+      typeof initialRenderingMetadata !== 'undefined' &&
+      'markup' in initialRenderingMetadata &&
+      typeof lastRenderingMetadataPerEmailPath[emailPath] === 'undefined'
+    ) {
+      lastRenderingMetadataPerEmailPath[emailPath] = initialRenderingMetadata;
+    }
+  }, [renderingResult, emailPath, initialRenderingMetadata]);
+
+  return 'error' in renderingResult
+    ? lastRenderingMetadataPerEmailPath[emailPath]
+    : renderingResult;
+};

package/.react-email/src/utils/cn.ts

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

package/.react-email/src/utils/constants.ts

@@ -0,0 +1,6 @@
+export const tabTransition = {
+  type: 'spring',
+  stiffness: 2000,
+  damping: 80,
+  mass: 1,
+};

package/.react-email/src/utils/copy-text-to-clipboard.ts

@@ -0,0 +1,7 @@
+export const copyTextToClipboard = async (text: string) => {
+  try {
+    await navigator.clipboard.writeText(text);
+  } catch {
+    throw new Error('Not able to copy');
+  }
+};

package/.react-email/src/utils/emails-directory-absolute-path.ts

@@ -0,0 +1,34 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+export const emailsDirRelativePath =
+  process.env.NEXT_PUBLIC_EMAILS_DIR_RELATIVE_PATH ?? 'emails';
+
+export const userProjectLocation =
+  process.env.NEXT_PUBLIC_USER_PROJECT_LOCATION!;
+
+// this trickery to find the path separator for the OS is for this to work both on the client
+// and on the server properly
+export const pathSeparator = process.env.NEXT_PUBLIC_OS_PATH_SEPARATOR! as
+  | '/'
+  | '\\';
+
+export const normalizePath = (path: string) => {
+  let newPath = path;
+
+  while (newPath.startsWith(`.${pathSeparator}`)) {
+    newPath = newPath.slice(2);
+  }
+
+  while (newPath.startsWith(pathSeparator)) {
+    newPath = newPath.slice(1);
+  }
+
+  while (newPath.endsWith(pathSeparator)) {
+    newPath = newPath.slice(0, -1);
+  }
+
+  return newPath;
+};
+
+export const emailsDirectoryAbsolutePath = `${
+  process.env.NEXT_PUBLIC_USER_PROJECT_LOCATION
+}${pathSeparator}${normalizePath(emailsDirRelativePath)}`;

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

@@ -0,0 +1,108 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import path from 'node:path';
+import vm from 'node:vm';
+import { type RawSourceMap } from 'source-map-js';
+import { type OutputFile, build, type BuildFailure } from 'esbuild';
+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';
+
+export const getEmailComponent = async (
+  emailPath: string,
+): Promise<
+  | {
+      emailComponent: EmailComponent;
+
+      sourceMapToOriginalFile: RawSourceMap;
+    }
+  | { error: ErrorObject }
+> => {
+  let outputFiles: OutputFile[];
+  try {
+    const buildData = await build({
+      bundle: true,
+      entryPoints: [emailPath],
+      platform: 'node',
+      write: false,
+      format: 'cjs',
+      jsx: 'automatic',
+      logLevel: 'silent',
+      // allows for using jsx on a .js file
+      loader: {
+        '.js': 'jsx',
+      },
+      outdir: 'stdout', // just a stub for esbuild, it won't actually write to this folder
+      sourcemap: 'external',
+    });
+    outputFiles = buildData.outputFiles;
+  } catch (exception) {
+    const buildFailure = exception as BuildFailure;
+    return {
+      error: {
+        message: buildFailure.message,
+        stack: buildFailure.stack,
+        name: buildFailure.name,
+        cause: buildFailure.cause,
+      },
+    };
+  }
+
+  const sourceMapFile = outputFiles[0]!;
+  const bundledEmailFile = outputFiles[1]!;
+  const builtEmailCode = bundledEmailFile.text;
+
+  const fakeContext = {
+    ...global,
+    console,
+    Buffer,
+    module: { exports: { default: undefined as unknown } },
+    __filanem: emailPath,
+    __dirname: path.dirname(emailPath),
+    require: (module: string) => {
+      if (module in staticNodeModulesForVM) {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+        return staticNodeModulesForVM[module];
+      }
+
+      // eslint-disable-next-line @typescript-eslint/no-var-requires
+      return require(`${module}`) 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,
+  };
+  const sourceMapToEmail = JSON.parse(sourceMapFile.text) as RawSourceMap;
+  try {
+    vm.runInNewContext(builtEmailCode, fakeContext, { filename: emailPath });
+  } catch (exception) {
+    const error = exception as Error;
+
+    return {
+      error: improveErrorWithSourceMap(error, emailPath, sourceMapToEmail),
+    };
+  }
+
+  if (fakeContext.module.exports.default === undefined) {
+    return {
+      error: improveErrorWithSourceMap(
+        new Error(
+          `The email component at ${emailPath} does not contain a default export`,
+        ),
+        emailPath,
+        sourceMapToEmail,
+      ),
+    };
+  }
+
+  return {
+    emailComponent: fakeContext.module.exports.default as EmailComponent,
+    sourceMapToOriginalFile: sourceMapToEmail,
+  };
+};

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

@@ -0,0 +1,55 @@
+import * as stackTraceParser from 'stacktrace-parser';
+import { SourceMapConsumer, type RawSourceMap } from 'source-map-js';
+import type { ErrorObject } from './types/error-object';
+
+export const improveErrorWithSourceMap = (
+  error: Error,
+
+  originalFilePath: string,
+  sourceMapToOriginalFile: RawSourceMap,
+): ErrorObject => {
+  let stack: string | undefined;
+
+  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,
+          });
+          const columnAndLine =
+            positionWithError.column && positionWithError.line
+              ? `${positionWithError.line}:${positionWithError.column}`
+              : positionWithError.line;
+          newStackLines.push(
+            ` at ${stackFrame.methodName} (${originalFilePath}:${columnAndLine})`,
+          );
+        } else {
+          newStackLines.push(
+            ` at ${stackFrame.methodName} (${originalFilePath})`,
+          );
+        }
+      } else {
+        const columnAndLine =
+          stackFrame.column && stackFrame.lineNumber
+            ? `${stackFrame.lineNumber}:${stackFrame.column}`
+            : stackFrame.lineNumber;
+        newStackLines.push(
+          ` at ${stackFrame.methodName} (${stackFrame.file}:${columnAndLine})`,
+        );
+      }
+    }
+    stack = newStackLines.join('\n');
+  }
+
+  return {
+    name: error.name,
+    message: error.message,
+    cause: error.cause,
+    stack,
+  };
+};

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

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

package/.react-email/src/utils/language-map.ts

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

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

@@ -0,0 +1,92 @@
+import zlib from 'node:zlib';
+import vm from 'node:vm';
+import v8 from 'node:v8';
+import util from 'node:util';
+import url from 'node:url';
+import tty from 'node:tty';
+import tls from 'node:tls';
+import timers from 'node:timers';
+import stringDecoder from 'node:string_decoder';
+import stream from 'node:stream';
+import readline from 'node:readline';
+import querystring from 'node:querystring';
+import punycode from 'node:punycode';
+import path from 'node:path';
+import os from 'node:os';
+import net from 'node:net';
+import https from 'node:https';
+import http from 'node:http';
+import fs from 'node:fs';
+import events from 'node:events';
+import domain from 'node:domain';
+import dns from 'node:dns';
+import dgram from 'node:dgram';
+import crypto from 'node:crypto';
+import cluster from 'node:cluster';
+import childProcess from 'node:child_process';
+import buffer from 'node:buffer';
+import assert from 'node:assert';
+
+/**
+ * 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 = {
+  zlib,
+  'node:zlib': zlib,
+  vm,
+  'node:vm': vm,
+  v8,
+  'node:v8': v8,
+  util,
+  'node:util': util,
+  url,
+  'node:url': url,
+  tty,
+  'node:tty': tty,
+  tls,
+  'node:tls': tls,
+  timers,
+  'node:timers': timers,
+  'string_decoder': stringDecoder,
+  'node:string_decoder': stringDecoder,
+  stream,
+  'node:stream': stream,
+  readline,
+  'node:readline': readline,
+  querystring,
+  'node:querystring': querystring,
+  punycode,
+  'node:punycode': punycode,
+  path,
+  'node:path': path,
+  os,
+  'node:os': os,
+  net,
+  'node:net': net,
+  https,
+  'node:https': https,
+  http,
+  'node:http': http,
+  fs,
+  'node:fs': fs,
+  events,
+  'node:events': events,
+  domain,
+  'node:domain': domain,
+  dns,
+  'node:dns': dns,
+  dgram,
+  'node:dgram': dgram,
+  crypto,
+  'node:crypto': crypto,
+  cluster,
+  'node:cluster': cluster,
+  'child_process': childProcess,
+  'node:child_process': childProcess,
+  buffer,
+  'node:buffer': buffer,
+  assert,
+  'node:assert': assert,
+};

package/.react-email/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/.react-email/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/.react-email/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/.react-email/src/utils/types/hot-reload-change.ts

@@ -0,0 +1,6 @@
+import type { HotReloadEvent } from './hot-reload-event';
+
+export interface HotReloadChange {
+  filename: string;
+  event: HotReloadEvent;
+}

package/.react-email/src/utils/types/hot-reload-event.ts

@@ -0,0 +1,6 @@
+export type HotReloadEvent =
+  | 'add'
+  | 'addDir'
+  | 'change'
+  | 'unlink'
+  | 'unlinkDir';

package/.react-email/src/utils/unreachable.ts

@@ -0,0 +1,8 @@
+export const unreachable = (
+  condition: string | Record<string, unknown>,
+  message = `Entered unreachable code. Received '${
+    typeof condition === 'string' ? condition : JSON.stringify(condition)
+  }'.`,
+): never => {
+  throw new TypeError(message);
+};