react-email 1.9.5 → 1.10.0

package/source/utils/generate-email-preview.ts

@@ -1,19 +1,19 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import ora from 'ora';
+import shell from 'shelljs';
 import logSymbols from 'log-symbols';
+import fse from 'fs-extra';
+import { sync } from 'glob';
 import {
   CURRENT_PATH,
   PACKAGE_EMAILS_PATH,
   PACKAGE_PUBLIC_PATH,
 } from './constants';
-import fs from 'fs';
-import ora from 'ora';
-import shell from 'shelljs';
-import path from 'path';
-import fse from 'fs-extra';
-import glob from 'glob';
 import { closeOraOnSIGNIT } from './close-ora-on-sigint';
 
 /**
- * Node.js and imports are requiring all imports to be /, while some functions (like glob) return paths with \ for path separation on windows
+ * Node.js and imports are requiring all imports to be /, while some functions (like glob) return paths with \\ for path separation on windows
  */
 function osIndependentPath(p: string) {
   return p.split(path.sep).join('/');
@@ -28,7 +28,7 @@ export const generateEmailsPreview = async (
     closeOraOnSIGNIT(spinner);
 
     if (type === 'all' || type === 'templates') {
-      await createEmailPreviews(emailDir);
+      createEmailPreviews(emailDir);
     }
     if (type === 'all' || type === 'static') {
       await createStaticFiles();
@@ -43,56 +43,52 @@ export const generateEmailsPreview = async (
   }
 };
 
-const createEmailPreviews = async (emailDir: string) => {
-  const hasEmailsDirectory = fs.existsSync(PACKAGE_EMAILS_PATH);
+const packageEmailsPath = osIndependentPath(PACKAGE_EMAILS_PATH);
 
-  if (hasEmailsDirectory) {
-    await fs.promises.rm(PACKAGE_EMAILS_PATH, { recursive: true });
+const createEmailPreviews = (emailDir: string) => {
+  if (fs.existsSync(PACKAGE_EMAILS_PATH)) {
+    fs.rmSync(PACKAGE_EMAILS_PATH, { recursive: true });
   }
 
-  const list = glob.sync(
-    osIndependentPath(path.join(emailDir, '/*.{jsx,tsx}')),
-    {
-      absolute: true,
-    },
-  );
+  fs.mkdirSync(packageEmailsPath);
+
+  const list = sync(osIndependentPath(path.join(emailDir, '/*.{jsx,tsx}')), {
+    absolute: true,
+  });
 
   /**
    * instead of copying all files, which would break and js/ts imports,
    * we create placeholder files which just contain the following code:
    *
-   * import Mail from '../../path/to/emails/my-template.tsx`
+   * import Mail from `../../path/to/emails/my-template.tsx`
    * export default Mail
    */
   for (const _absoluteSrcFilePath of list) {
     const absoluteSrcFilePath = osIndependentPath(_absoluteSrcFilePath);
-    const fileName = absoluteSrcFilePath.split('/').pop()!;
+    const fileName = absoluteSrcFilePath.split('/').pop();
+
+    if (fileName === undefined) {
+      throw new Error(`Could not get file name from ${absoluteSrcFilePath}`);
+    }
+
     const targetFile = path.join(
-      osIndependentPath(PACKAGE_EMAILS_PATH),
+      packageEmailsPath,
       absoluteSrcFilePath.replace(osIndependentPath(emailDir), ''),
     );
+
+    const dirWithTargetFile = path.dirname(targetFile);
+
     const importPath = path.relative(
-      path.dirname(targetFile),
+      dirWithTargetFile,
       path.dirname(absoluteSrcFilePath),
     );
 
     const importFile = osIndependentPath(path.join(importPath, fileName));
 
     // if this import is changed, you also need to update `client/src/app/preview/[slug]/page.tsx`
-    const sourceCode =
-      `import Mail from '${importFile}';export default Mail;`.replace(
-        ';',
-        ';\n',
-      );
-    await fse.ensureDir(path.dirname(targetFile));
-    if (fse.existsSync(targetFile)) {
-      if (fse.readFileSync(targetFile, 'utf8') === sourceCode) {
-        // file already exists, no need to trigger a rebuild.
-        // can otherwise trigger the next.js rebuild multiple times
-        continue;
-      }
-    }
-    await fse.writeFile(targetFile, sourceCode);
+    const sourceCode = `import Mail from '${importFile}';\nexport default Mail;\n`;
+
+    fs.writeFileSync(targetFile, sourceCode);
   }
 };
 

package/source/utils/install-dependencies.ts

@@ -1,13 +1,13 @@
+import path from 'node:path';
 import shell from 'shelljs';
-import path from 'path';
-import { REACT_EMAIL_ROOT } from './constants';
 import ora from 'ora';
 import logSymbols from 'log-symbols';
+import { REACT_EMAIL_ROOT } from './constants';
 import { closeOraOnSIGNIT } from './close-ora-on-sigint';
 
 export type PackageManager = 'yarn' | 'npm' | 'pnpm';
 
-export const installDependencies = async (packageManager: PackageManager) => {
+export const installDependencies = (packageManager: PackageManager) => {
   const spinner = ora('Installing dependencies...\n').start();
   closeOraOnSIGNIT(spinner);
 

package/source/utils/run-server.ts

@@ -1,33 +1,33 @@
-import { createWatcherInstance, watcher } from './watcher';
+import path from 'node:path';
 import { detect as detectPackageManager } from 'detect-package-manager';
 import { findRoot } from '@manypkg/find-root';
+import shell from 'shelljs';
+import { createWatcherInstance, watcher } from './watcher';
+import type { PackageManager } from '.';
 import {
   CURRENT_PATH,
   convertToAbsolutePath,
   startDevServer,
   installDependencies,
-  PackageManager,
   syncPkg,
   generateEmailsPreview,
   buildProdServer,
   startProdServer,
   REACT_EMAIL_ROOT,
 } from '.';
-import path from 'path';
-import shell from 'shelljs';
 
 /**
  * Utility function to run init/sync for the server in dev, build or start mode.
  *
- * @param type dev | build | start
- * @param dir Directory in which the emails are located, only for dev and build, unused for start.
- * @param port The port on which the server will run, only for dev and start, unused for build.
+ * @param type - dev | build | start
+ * @param dir - Directory in which the emails are located, only for dev and build, unused for start.
+ * @param port - The port on which the server will run, only for dev and start, unused for build.
  */
 export const setupServer = async (
   type: 'dev' | 'build' | 'start',
   dir: string,
   port: string,
-  skipInstall: boolean = false,
+  skipInstall = false,
 ) => {
   const cwd = await findRoot(CURRENT_PATH).catch(() => ({
     rootDir: CURRENT_PATH,
@@ -42,7 +42,7 @@ export const setupServer = async (
     await generateEmailsPreview(emailDir);
     await syncPkg();
     if (!skipInstall) {
-      await installDependencies(packageManager);
+      installDependencies(packageManager);
     }
   }
 

package/source/utils/start-server-command.ts

@@ -1,4 +1,4 @@
-import { ChildProcess } from 'child_process';
+import type { ChildProcess } from 'node:child_process';
 import shell from 'shelljs';
 
 let processesToKill: ChildProcess[] = [];
@@ -23,7 +23,7 @@ export const buildProdServer = (packageManager: string) => {
   execAsync(`${packageManager} run build`);
 
   // if build fails for whatever reason, make sure the shell actually exits
-  process.on('close', (code) => {
+  process.on('close', (code: number | undefined) => {
     shell.exit(code ?? undefined);
   });
 };

package/source/utils/sync-package.ts

@@ -1,7 +1,7 @@
+import fs from 'node:fs';
+import path from 'node:path';
 import readPackage from 'read-pkg';
 import { REACT_EMAIL_ROOT } from './constants';
-import fs from 'fs';
-import path from 'path';
 
 export const syncPkg = async () => {
   const clientPkg = await readPackage({ cwd: REACT_EMAIL_ROOT });

package/source/utils/tree.ts

@@ -0,0 +1,10 @@
+import treeCli from 'tree-cli';
+
+export const tree = async (dir: string, depth: number) => {
+  const { report } = await treeCli({
+    l: depth,
+    base: dir,
+  });
+
+  return report;
+};

package/source/utils/watcher.ts

@@ -1,7 +1,8 @@
-import chokidar, { FSWatcher } from 'chokidar';
-import fs from 'fs';
-import path from 'path';
-import shell from 'shelljs';
+import fs from 'node:fs';
+import path from 'node:path';
+import type { FSWatcher } from 'chokidar';
+import { watch } from 'chokidar';
+import { cp } from 'shelljs';
 import {
   EVENT_FILE_DELETED,
   PACKAGE_EMAILS_PATH,
@@ -10,15 +11,15 @@ import {
 import { generateEmailsPreview } from './generate-email-preview';
 
 export const createWatcherInstance = (watchDir: string) => {
-  const watcher = chokidar.watch(watchDir, {
+  const watcher = watch(watchDir, {
     ignoreInitial: true,
     cwd: watchDir.split(path.sep).slice(0, -1).join(path.sep),
-    ignored: /(^|[\/\\])\../,
+    ignored: /(^|[/\\])\../,
   });
 
   // Catches ctrl+c event
-  const exit = async () => {
-    await watcher.close();
+  const exit = () => {
+    void watcher.close();
   };
   process.on('SIGINT', exit);
   process.on('uncaughtException', exit);
@@ -27,7 +28,7 @@ export const createWatcherInstance = (watchDir: string) => {
 };
 
 export const watcher = (watcherInstance: FSWatcher, watchDir: string) => {
-  watcherInstance.on('all', async (event, filename) => {
+  watcherInstance.on('all', (event, filename) => {
     const file = filename.split(path.sep);
     if (file[1] === undefined) {
       return;
@@ -35,19 +36,17 @@ export const watcher = (watcherInstance: FSWatcher, watchDir: string) => {
 
     if (event === EVENT_FILE_DELETED) {
       if (file[1] === 'static' && file[2]) {
-        await fs.promises.rm(
-          path.join(REACT_EMAIL_ROOT, 'public', 'static', file[2]),
-        );
+        fs.rmSync(path.join(REACT_EMAIL_ROOT, 'public', 'static', file[2]));
         return;
       }
 
-      await fs.promises.rm(path.join(REACT_EMAIL_ROOT, filename));
+      fs.rmSync(path.join(REACT_EMAIL_ROOT, filename));
       return;
     }
 
     if (file[1] === 'static' && file[2]) {
       const srcPath = path.join(watchDir, 'static', file[2]);
-      const result = shell.cp(
+      const result = cp(
         '-r',
         srcPath,
         path.join(REACT_EMAIL_ROOT, 'public', 'static'),
@@ -60,13 +59,6 @@ export const watcher = (watcherInstance: FSWatcher, watchDir: string) => {
       return;
     }
 
-    try {
-      await generateEmailsPreview(watchDir, 'templates');
-    } catch (e) {
-      throw new Error(
-        `Something went wrong while copying the file to ${PACKAGE_EMAILS_PATH}, ${// @ts-expect-error
-e?.message}`,
-      );
-    }
+    void generateEmailsPreview(watchDir, 'templates');
   });
 };

package/tsconfig.export.json

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "target": "es6",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "strictNullChecks": true,
+    "allowImportingTsExtensions": true
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

package/tsconfig.json

@@ -1,36 +1,13 @@
 {
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "tsconfig/react-library.json",
+  "include": ["."],
+  "exclude": ["tsconfig.export.json", "dist", "build", "node_modules"],
   "compilerOptions": {
-    "module": "commonjs",
-    "moduleResolution": "node",
-    "target": "ES2020", // Node.js 14
-    "lib": ["DOM", "DOM.Iterable", "ES2020"],
-    "allowSyntheticDefaultImports": true, // To provide backwards compatibility, Node.js allows you to import most CommonJS packages with a default import. This flag tells TypeScript that it's okay to use import on CommonJS modules.
-    "resolveJsonModule": true,
-    "jsx": "react",
-    "declaration": true,
-    "pretty": true,
-    "newLine": "lf",
-    "stripInternal": true,
-    "strict": true,
-    "noImplicitReturns": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
+    "target": "es5",
+    "module": "CommonJS",
     "noUncheckedIndexedAccess": true,
-    "noPropertyAccessFromIndexSignature": true,
-    "noEmitOnError": true,
-    "useDefineForClassFields": true,
-    "forceConsistentCasingInFileNames": true,
-    "skipLibCheck": true,
-    "outDir": "dist",
-    "esModuleInterop": true,
-    "typeRoots": ["./types", "./node_modules/@types"]
-  },
-  "include": ["source", "preview"],
-  "exclude": ["dist", "build", "node_modules", "preview"],
-  "ts-node": {
-    "transpileOnly": true,
-    "files": true,
-    "experimentalResolver": true
+    "resolveJsonModule": true,
+    "outDir": "dist"
   }
 }