promote-email-templates 0.0.3 → 0.0.5

package/.react-email/src/components/topbar.tsx

@@ -1,161 +0,0 @@
-'use client';
-import * as ToggleGroup from '@radix-ui/react-toggle-group';
-import { motion } from 'framer-motion';
-import * as React from 'react';
-import { cn } from '../utils';
-import { tabTransition } from '../utils/constants';
-import { Heading } from './heading';
-import { IconHideSidebar } from './icons/icon-hide-sidebar';
-import { IconMonitor } from './icons/icon-monitor';
-import { IconPhone } from './icons/icon-phone';
-import { IconSource } from './icons/icon-source';
-import { Send } from './send';
-import { Tooltip } from './tooltip';
-
-interface TopbarProps {
-  currentEmailOpenSlug: string;
-  activeView?: string;
-  markup?: string;
-  onToggleSidebar?: () => void;
-  setActiveView?: (view: string) => void;
-}
-
-export const Topbar: React.FC<Readonly<TopbarProps>> = ({
-  currentEmailOpenSlug,
-  markup,
-  activeView,
-  setActiveView,
-  onToggleSidebar,
-}) => {
-  return (
-    <Tooltip.Provider>
-      <header className="flex relative items-center px-4 justify-between h-[70px] border-b border-slate-6">
-        <Tooltip>
-          <Tooltip.Trigger asChild>
-            <button
-              className="hidden lg:flex rounded-lg px-2 py-2 transition ease-in-out duration-200 relative hover:bg-slate-5 text-slate-11 hover:text-slate-12"
-              onClick={() => {
-                if (onToggleSidebar) {
-                  onToggleSidebar();
-                }
-              }}
-              type="button"
-            >
-              <IconHideSidebar height={20} width={20} />
-            </button>
-          </Tooltip.Trigger>
-          <Tooltip.Content>Show/hide sidebar</Tooltip.Content>
-        </Tooltip>
-
-        <div className="items-center overflow-hidden hidden lg:flex text-center absolute left-1/2 transform -translate-x-1/2 top-1/2 -translate-y-1/2">
-          <Heading as="h2" className="truncate" size="2" weight="medium">
-            {currentEmailOpenSlug}
-          </Heading>
-        </div>
-
-        <div className="flex gap-3 justify-between lg:justify-start w-full lg:w-fit">
-          <ToggleGroup.Root
-            aria-label="View mode"
-            className="inline-block items-center bg-slate-2 border border-slate-6 rounded-md overflow-hidden h-[36px]"
-            onValueChange={(value) => {
-              if (value) setActiveView?.(value);
-            }}
-            type="single"
-            value={activeView}
-          >
-            <ToggleGroup.Item value="desktop">
-              <Tooltip>
-                <Tooltip.Trigger asChild>
-                  <div
-                    className={cn(
-                      'px-3 py-2 transition ease-in-out duration-200 relative hover:text-slate-12',
-                      {
-                        'text-slate-11': activeView !== 'desktop',
-                        'text-slate-12': activeView === 'desktop',
-                      },
-                    )}
-                  >
-                    {activeView === 'desktop' && (
-                      <motion.span
-                        animate={{ opacity: 1 }}
-                        className="absolute left-0 right-0 top-0 bottom-0 bg-slate-4"
-                        exit={{ opacity: 0 }}
-                        initial={{ opacity: 0 }}
-                        layoutId="topbar-tabs"
-                        transition={tabTransition}
-                      />
-                    )}
-                    <IconMonitor />
-                  </div>
-                </Tooltip.Trigger>
-                <Tooltip.Content>Desktop</Tooltip.Content>
-              </Tooltip>
-            </ToggleGroup.Item>
-            <ToggleGroup.Item value="mobile">
-              <Tooltip>
-                <Tooltip.Trigger asChild>
-                  <div
-                    className={cn(
-                      'px-3 py-2 transition ease-in-out duration-200 relative hover:text-slate-12',
-                      {
-                        'text-slate-11': activeView !== 'mobile',
-                        'text-slate-12': activeView === 'mobile',
-                      },
-                    )}
-                  >
-                    {activeView === 'mobile' && (
-                      <motion.span
-                        animate={{ opacity: 1 }}
-                        className="absolute left-0 right-0 top-0 bottom-0 bg-slate-4"
-                        exit={{ opacity: 0 }}
-                        initial={{ opacity: 0 }}
-                        layoutId="topbar-tabs"
-                        transition={tabTransition}
-                      />
-                    )}
-                    <IconPhone />
-                  </div>
-                </Tooltip.Trigger>
-                <Tooltip.Content>Mobile</Tooltip.Content>
-              </Tooltip>
-            </ToggleGroup.Item>
-            <ToggleGroup.Item value="source">
-              <Tooltip>
-                <Tooltip.Trigger asChild>
-                  <div
-                    className={cn(
-                      'px-3 py-2 transition ease-in-out duration-200 relative hover:text-slate-12',
-                      {
-                        'text-slate-11': activeView !== 'source',
-                        'text-slate-12': activeView === 'source',
-                      },
-                    )}
-                  >
-                    {activeView === 'source' && (
-                      <motion.span
-                        animate={{ opacity: 1 }}
-                        className="absolute left-0 right-0 top-0 bottom-0 bg-slate-4"
-                        exit={{ opacity: 0 }}
-                        initial={{ opacity: 0 }}
-                        layoutId="topbar-tabs"
-                        transition={tabTransition}
-                      />
-                    )}
-                    <IconSource />
-                  </div>
-                </Tooltip.Trigger>
-                <Tooltip.Content>Code</Tooltip.Content>
-              </Tooltip>
-            </ToggleGroup.Item>
-          </ToggleGroup.Root>
-
-          {markup ? (
-            <div className="flex justify-end">
-              <Send markup={markup} />
-            </div>
-          ) : null}
-        </div>
-      </header>
-    </Tooltip.Provider>
-  );
-};

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

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

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

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

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

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

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

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

@@ -1,34 +0,0 @@
-/* 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

@@ -1,108 +0,0 @@
-/* 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

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

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

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

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

@@ -1,92 +0,0 @@
-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,
-};