@depup/react-email 5.2.10-depup.0

package/src/utils/preview/start-dev-server.ts

@@ -0,0 +1,252 @@
+import http from 'node:http';
+import os from 'node:os';
+import path from 'node:path';
+import url from 'node:url';
+import { createJiti } from 'jiti';
+import logSymbols from 'log-symbols';
+import ora from 'ora';
+import { registerSpinnerAutostopping } from '../../utils/register-spinner-autostopping.js';
+import { conf } from '../conf.js';
+import { getPreviewServerLocation } from '../get-preview-server-location.js';
+import { packageJson } from '../packageJson.js';
+import { styleText } from '../style-text.js';
+import { getEnvVariablesForPreviewApp } from './get-env-variables-for-preview-app.js';
+import { serveStaticFile } from './serve-static-file.js';
+
+let devServer: http.Server | undefined;
+
+const safeAsyncServerListen = (server: http.Server, port: number) => {
+  return new Promise<{ portAlreadyInUse: boolean }>((resolve) => {
+    server.listen(port, () => {
+      resolve({ portAlreadyInUse: false });
+    });
+
+    server.on('error', (e: NodeJS.ErrnoException) => {
+      if (e.code === 'EADDRINUSE') {
+        resolve({ portAlreadyInUse: true });
+      }
+    });
+  });
+};
+
+export const startDevServer = async (
+  emailsDirRelativePath: string,
+  staticBaseDirRelativePath: string,
+  port: number,
+): Promise<http.Server> => {
+  const [majorNodeVersion] = process.versions.node.split('.');
+  if (majorNodeVersion && Number.parseInt(majorNodeVersion, 10) < 20) {
+    console.error(
+      ` ${logSymbols.error}  Node ${majorNodeVersion} is not supported. Please upgrade to Node 20 or higher.`,
+    );
+    process.exit(1);
+  }
+
+  const previewServerLocation = await getPreviewServerLocation();
+  const previewServer = createJiti(previewServerLocation);
+
+  devServer = http.createServer((req, res) => {
+    if (!req.url) {
+      res.end(404);
+      return;
+    }
+
+    const parsedUrl = url.parse(req.url, true);
+
+    // Never cache anything to avoid
+    res.setHeader(
+      'Cache-Control',
+      'no-cache, max-age=0, must-revalidate, no-store',
+    );
+    res.setHeader('Pragma', 'no-cache');
+    res.setHeader('Expires', '-1');
+
+    try {
+      if (
+        parsedUrl.path?.includes('static/') &&
+        !parsedUrl.path.includes('_next/static/')
+      ) {
+        void serveStaticFile(res, parsedUrl, staticBaseDirRelativePath);
+      } else if (!isNextReady) {
+        void nextReadyPromise.then(() =>
+          nextHandleRequest?.(req, res, parsedUrl),
+        );
+      } else {
+        void nextHandleRequest?.(req, res, parsedUrl);
+      }
+    } catch (e) {
+      console.error('caught error', e);
+
+      res.writeHead(500);
+      res.end();
+    }
+  });
+
+  const { portAlreadyInUse } = await safeAsyncServerListen(devServer, port);
+
+  if (!portAlreadyInUse) {
+    console.log(
+      styleText('greenBright', `    React Email ${packageJson.version}`),
+    );
+    console.log(`    Running preview at:          http://localhost:${port}\n`);
+  } else {
+    const nextPortToTry = port + 1;
+    console.warn(
+      ` ${logSymbols.warning} Port ${port} is already in use, trying ${nextPortToTry}`,
+    );
+    return startDevServer(
+      emailsDirRelativePath,
+      staticBaseDirRelativePath,
+      nextPortToTry,
+    );
+  }
+
+  devServer.on('close', async () => {
+    await app.close();
+  });
+
+  devServer.on('error', (e: NodeJS.ErrnoException) => {
+    spinner.stopAndPersist({
+      symbol: logSymbols.error,
+      text: `Preview Server had an error: ${e}`,
+    });
+    process.exit(1);
+  });
+
+  const spinner = ora({
+    text: 'Getting react-email preview server ready...\n',
+    prefixText: ' ',
+  }).start();
+
+  registerSpinnerAutostopping(spinner);
+  const timeBeforeNextReady = performance.now();
+
+  // these environment variables are used on the next app
+  // this is the most reliable way of communicating these paths through
+  process.env = {
+    NODE_ENV: 'development',
+    ...(process.env as Omit<NodeJS.ProcessEnv, 'NODE_ENV'> & {
+      NODE_ENV?: NodeJS.ProcessEnv['NODE_ENV'];
+    }),
+    ...getEnvVariablesForPreviewApp(
+      // If we don't do normalization here, stuff like https://github.com/resend/react-email/issues/1354 happens.
+      path.normalize(emailsDirRelativePath),
+      previewServerLocation,
+      process.cwd(),
+      conf.get('resendApiKey'),
+    ),
+  };
+  if (!process.env.ESBUILD_BINARY_PATH) {
+    try {
+      const esbuild = createJiti(previewServer.esmResolve('esbuild'));
+      const subpath =
+        process.platform === 'win32' ? 'esbuild.exe' : 'bin/esbuild';
+      const esbuildBinaryPath = url.fileURLToPath(
+        esbuild.esmResolve(
+          `@esbuild/${process.platform}-${os.arch()}/${subpath}`,
+        ),
+      );
+      process.env.ESBUILD_BINARY_PATH = esbuildBinaryPath;
+    } catch (_exception) {
+      // Optional: platform binary may be missing; esbuild will use its default resolution.
+    }
+  }
+
+  const next = await previewServer.import<typeof import('next')['default']>(
+    'next',
+    {
+      default: true,
+    },
+  );
+
+  const app = next({
+    dev: false,
+    conf: {
+      // passing in env here does not get the environment variables there
+      images: {
+        // This is to avoid the warning with sharp
+        unoptimized: true,
+      },
+    },
+    hostname: 'localhost',
+    port,
+    dir: previewServerLocation,
+  });
+
+  let isNextReady = false;
+  const nextReadyPromise = app.prepare();
+  try {
+    await nextReadyPromise;
+  } catch (exception) {
+    spinner.stopAndPersist({
+      symbol: logSymbols.error,
+      text: ` Preview Server had an error: ${exception}`,
+    });
+    process.exit(1);
+  }
+  isNextReady = true;
+
+  const nextHandleRequest:
+    | ReturnType<typeof app.getRequestHandler>
+    | undefined = app.getRequestHandler();
+
+  const secondsToNextReady = (
+    (performance.now() - timeBeforeNextReady) /
+    1000
+  ).toFixed(1);
+
+  spinner.stopAndPersist({
+    text: `Ready in ${secondsToNextReady}s\n`,
+    symbol: logSymbols.success,
+  });
+
+  return devServer;
+};
+
+// based on https://stackoverflow.com/a/14032965
+const makeExitHandler =
+  (
+    options?:
+      | { shouldKillProcess: false }
+      | { shouldKillProcess: true; killWithErrorCode: boolean },
+  ) =>
+  (codeSignalOrError: number | NodeJS.Signals | Error) => {
+    if (typeof devServer !== 'undefined') {
+      console.log('\nshutting down dev server');
+      devServer.close();
+      devServer = undefined;
+    }
+
+    if (codeSignalOrError instanceof Error) {
+      console.error(codeSignalOrError);
+    }
+
+    if (options?.shouldKillProcess) {
+      process.exit(options.killWithErrorCode ? 1 : 0);
+    }
+  };
+
+// do something when app is closing
+process.on('exit', makeExitHandler());
+
+// catches ctrl+c event
+process.on(
+  'SIGINT',
+  makeExitHandler({ shouldKillProcess: true, killWithErrorCode: false }),
+);
+
+//  catches "kill pid" (for example: nodemon restart)
+process.on(
+  'SIGUSR1',
+  makeExitHandler({ shouldKillProcess: true, killWithErrorCode: false }),
+);
+process.on(
+  'SIGUSR2',
+  makeExitHandler({ shouldKillProcess: true, killWithErrorCode: false }),
+);
+
+// catches uncaught exceptions
+process.on(
+  'uncaughtException',
+  makeExitHandler({ shouldKillProcess: true, killWithErrorCode: true }),
+);

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/style-text.ts

@@ -0,0 +1,11 @@
+/**
+ * Centralized fallback for Node versions (<20.12.0) without util.styleText.
+ * Returns the original text when styleText is unavailable.
+ */
+import * as nodeUtil from 'node:util';
+
+type StyleTextFunction = typeof nodeUtil.styleText;
+
+export const styleText: StyleTextFunction = (nodeUtil as any).styleText
+  ? (nodeUtil as any).styleText
+  : (_: string, text: string) => text;

package/src/utils/tree.spec.ts

@@ -0,0 +1,29 @@
+import { tree } from './tree.js';
+
+test('tree(__dirname, 2)', async () => {
+  expect(await tree(__dirname, 2)).toMatchInlineSnapshot(`
+    "utils
+    ├── esbuild
+    │   ├── escape-string-for-regex.ts
+    │   └── renderring-utilities-exporter.ts
+    ├── preview
+    │   ├── hot-reloading
+    │   ├── get-env-variables-for-preview-app.ts
+    │   ├── index.ts
+    │   ├── serve-static-file.ts
+    │   └── start-dev-server.ts
+    ├── types
+    │   ├── hot-reload-change.ts
+    │   └── hot-reload-event.ts
+    ├── conf.ts
+    ├── get-emails-directory-metadata.spec.ts
+    ├── get-emails-directory-metadata.ts
+    ├── get-preview-server-location.ts
+    ├── index.ts
+    ├── packageJson.ts
+    ├── register-spinner-autostopping.ts
+    ├── style-text.ts
+    ├── tree.spec.ts
+    └── tree.ts"
+  `);
+});

package/src/utils/tree.ts

@@ -0,0 +1,76 @@
+import { promises as fs } from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+
+const SYMBOLS = {
+  BRANCH: '├── ',
+  EMPTY: '',
+  INDENT: '    ',
+  LAST_BRANCH: '└── ',
+  VERTICAL: '│   ',
+};
+
+const getTreeLines = async (
+  dirPath: string,
+  depth: number,
+  currentDepth = 0,
+) => {
+  const base = process.cwd();
+  const dirFullpath = path.resolve(base, dirPath);
+  const dirname = path.basename(dirFullpath);
+  let lines = [dirname];
+
+  const dirStat = await fs.stat(dirFullpath);
+  if (dirStat.isDirectory() && currentDepth < depth) {
+    const childDirents = await fs.readdir(dirFullpath, { withFileTypes: true });
+
+    childDirents.sort((a, b) => {
+      // orders directories before files
+      if (a.isDirectory() && b.isFile()) {
+        return -1;
+      }
+
+      if (a.isFile() && b.isDirectory()) {
+        return 1;
+      }
+
+      // orders by name because they are the same type
+      // either directory & directory
+      // or file & file
+      return b.name > a.name ? -1 : 1;
+    });
+
+    for (let i = 0; i < childDirents.length; i++) {
+      const dirent = childDirents[i]!;
+      const isLast = i === childDirents.length - 1;
+
+      const branchingSymbol = isLast ? SYMBOLS.LAST_BRANCH : SYMBOLS.BRANCH;
+      const verticalSymbol = isLast ? SYMBOLS.INDENT : SYMBOLS.VERTICAL;
+
+      if (dirent.isFile()) {
+        lines.push(`${branchingSymbol}${dirent.name}`);
+      } else {
+        const pathToDirectory = path.join(dirFullpath, dirent.name);
+        const treeLinesForSubDirectory = await getTreeLines(
+          pathToDirectory,
+          depth,
+          currentDepth + 1,
+        );
+        lines = lines.concat(
+          treeLinesForSubDirectory.map((line, index) =>
+            index === 0
+              ? `${branchingSymbol}${line}`
+              : `${verticalSymbol}${line}`,
+          ),
+        );
+      }
+    }
+  }
+
+  return lines;
+};
+
+export const tree = async (dirPath: string, depth: number) => {
+  const lines = await getTreeLines(dirPath, depth);
+  return lines.join(os.EOL);
+};

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

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

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

@@ -0,0 +1,3 @@
+import type { EventName } from 'chokidar/handler.js';
+
+export type HotReloadEvent = EventName;

package/tsconfig.json

@@ -0,0 +1,39 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "Next.js",
+  "compilerOptions": {
+    "composite": false,
+    "downlevelIteration": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "inlineSources": false,
+    "isolatedModules": true,
+    "moduleResolution": "nodenext",
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "preserveWatchOutput": true,
+    "skipLibCheck": true,
+    "strictNullChecks": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "allowJs": true,
+    "declaration": false,
+    "declarationMap": false,
+    "incremental": false,
+    "jsx": "react-jsx",
+    "lib": ["dom", "dom.iterable", "esnext", "ESNext.AsyncIterable"],
+    "noEmit": true,
+    "strict": false,
+    "target": "ESNext",
+    "module": "NodeNext",
+    "noUncheckedIndexedAccess": true,
+    "resolveJsonModule": true,
+    "types": ["vitest/globals"],
+    "outDir": "dist"
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["dist", "node_modules"]
+}

package/tsdown.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'tsdown';
+
+export default defineConfig({
+  dts: false,
+  entry: ['./src/index.ts'],
+  format: ['esm'],
+  outDir: 'dist',
+});

package/vitest.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: 'happy-dom',
+  },
+  esbuild: {
+    tsconfigRaw: {
+      compilerOptions: {
+        jsx: 'react-jsx',
+      },
+    },
+  },
+});