feat(create-email): Testing export, type checking and starter creation with respective fixes (#2038)

Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>

Author: gabrielmfern

.changeset/itchy-coats-doubt.md

@@ -0,0 +1,5 @@
+---
+"create-email": patch
+---
+
+fix undefined behavior when template has already been created, fix error on tree when using custom project name

biome.json

@@ -67,6 +67,7 @@
       "./**/node_modules/**/*",
       "./**/*.d.ts",
       "./**/**/prism.ts",
+      "out",
       ".turbo"
     ]
   }

packages/create-email/.gitignore

@@ -0,0 +1 @@
+.test

packages/create-email/.npmignore

@@ -1,3 +1,4 @@
+.test
 template/node_modules
 template/CHANGELOG.md
 template/.turbo

packages/create-email/package.json

@@ -5,6 +5,9 @@
   "main": "src/index.js",
   "type": "module",
   "license": "MIT",
+  "scripts": {
+    "test": "vitest run"
+  },
   "dependencies": {
     "commander": "9.4.1",
     "fs-extra": "11.1.1",
@@ -24,6 +27,7 @@
     "create-email": "src/index.js"
   },
   "devDependencies": {
-    "tsconfig": "workspace:*"
+    "tsconfig": "workspace:*",
+    "typescript": "5.8.2"
   }
 }

packages/create-email/src/index.js

@@ -9,8 +9,6 @@ import ora from 'ora';
 import { tree } from './tree.js';
 
 const init = async (name) => {
-  const spinner = ora('Preparing files...\n').start();
-
   let projectPath = name;
 
   if (!projectPath) {
@@ -25,6 +23,15 @@ const init = async (name) => {
   const templatePath = path.resolve(__dirname, '../template');
   const resolvedProjectPath = path.resolve(projectPath);
 
+  if (fse.existsSync(resolvedProjectPath)) {
+    console.error(`Project called ${projectPath} already exists!`);
+    process.exit(1);
+  }
+
+  const spinner = ora({
+    text: 'Preparing files...\n',
+  }).start();
+
   fse.copySync(templatePath, resolvedProjectPath, {
     recursive: true,
   });
@@ -60,7 +67,13 @@ const init = async (name) => {
   });
 
   // eslint-disable-next-line no-console
-  console.log(await tree('./react-email-starter', 4));
+  console.info(
+    await tree(resolvedProjectPath, 4, (dirent) => {
+      return !path
+        .join(dirent.parentPath, dirent.name)
+        .includes('node_modules');
+    }),
+  );
 };
 
 new Command()

packages/create-email/src/index.spec.ts

@@ -0,0 +1,56 @@
+import { spawnSync } from 'node:child_process';
+import { promises as fs } from 'node:fs';
+import path from 'node:path';
+
+describe('automatic setup', () => {
+  const starterPath = path.resolve(__dirname, '../.test');
+  test.sequential('creation', async () => {
+    await fs.rm(starterPath, { recursive: true });
+
+    const createEmailProcess = spawnSync(
+      'node',
+      [path.resolve(__dirname, './index.js'), '.test'],
+      {
+        shell: true,
+        cwd: path.resolve(__dirname, '../'),
+        stdio: 'pipe',
+      },
+    );
+    if (createEmailProcess.stderr) {
+      console.log(createEmailProcess.stderr.toString());
+    }
+    expect(createEmailProcess.status, 'starter creation should return 0').toBe(
+      0,
+    );
+  });
+
+  test.sequential('export', () => {
+    const exportProcess = spawnSync('npm', ['run export'], {
+      shell: true,
+      cwd: starterPath,
+      stdio: 'pipe',
+    });
+    if (exportProcess.stderr) {
+      console.log(exportProcess.stderr.toString());
+    }
+    expect(exportProcess.status, 'export should return status code 0').toBe(0);
+  });
+
+  test.sequential('type checking', () => {
+    const typecheckingProcess = spawnSync('npx', ['tsc'], {
+      shell: true,
+      cwd: starterPath,
+      stdio: 'pipe',
+    });
+    if (typecheckingProcess.stderr) {
+      console.log(typecheckingProcess.stderr.toString());
+    }
+    if (typecheckingProcess.stdout) {
+      console.log(typecheckingProcess.stdout.toString());
+    }
+    expect(
+      typecheckingProcess.status,
+      'type checking should return status code 0',
+    ).toBe(0);
+  });
+});

packages/create-email/src/tree.js

@@ -12,7 +12,7 @@ const SYMBOLS = {
   VERTICAL: '│   ',
 };
 
-const getTreeLines = async (dirPath, depth, currentDepth = 0) => {
+const getTreeLines = async (dirPath, depth, filter, currentDepth = 0) => {
   const base = process.cwd();
   const dirFullpath = path.resolve(base, dirPath);
   const dirname = path.basename(dirFullpath);
@@ -44,13 +44,18 @@ const getTreeLines = async (dirPath, depth, currentDepth = 0) => {
       const branchingSymbol = isLast ? SYMBOLS.LAST_BRANCH : SYMBOLS.BRANCH;
       const verticalSymbol = isLast ? SYMBOLS.INDENT : SYMBOLS.VERTICAL;
 
+      if (filter?.(dirent) === false) {
+        continue;
+      }
+
       if (dirent.isFile()) {
         lines.push(`${branchingSymbol}${dirent.name}`);
       } else {
         const pathToDirectory = path.join(dirFullpath, dirent.name);
         const treeLinesForSubDirectory = await getTreeLines(
           pathToDirectory,
           depth,
+          filter,
           currentDepth + 1,
         );
         lines = lines.concat(
@@ -67,7 +72,7 @@ const getTreeLines = async (dirPath, depth, currentDepth = 0) => {
   return lines;
 };
 
-export const tree = async (dirPath, depth) => {
-  const lines = await getTreeLines(dirPath, depth);
+export const tree = async (dirPath, depth, filter) => {
+  const lines = await getTreeLines(dirPath, depth, filter);
   return lines.join(os.EOL);
 };

packages/create-email/template/tsconfig.json

@@ -4,8 +4,9 @@
     "jsx": "react-jsx",
     "skipLibCheck": true,
     "strict": true,
+    "noEmit": true,
     "strictNullChecks": true
   },
-  "include": ["."],
-  "exclude": ["node_modules"]
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules", ".react-email"]
 }

packages/create-email/tsconfig.json

@@ -1,5 +1,8 @@
 {
-  "extends": "tsconfig/react-library.json",
-  "include": ["."],
-  "exclude": ["dist", "build", "node_modules"]
+  "extends": "tsconfig/base.json",
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["dist", "build", "node_modules", ".test"],
+  "compilerOptions": {
+    "noEmit": true
+  }
 }

packages/create-email/vitest.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: 'happy-dom',
+    exclude: ['.test/**/*', '**/node_modules'],
+  },
+});