feat(create-email): Use latest from specified tag for react-email and @react-email/components (#2085)

Author: gabrielmfern

package.json

@@ -3,9 +3,9 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "build": "turbo run build --filter=!react-email-starter",
-    "dev": "turbo run dev --filter=!react-email-starter --parallel --concurrency 25",
-    "release": "turbo run build --filter=./packages/* --filter=!react-email-starter && pnpm changeset publish",
+    "build": "turbo run build",
+    "dev": "turbo run dev --parallel --concurrency 25",
+    "release": "turbo run build --filter=./packages/* && pnpm changeset publish",
     "canary:enter": "changeset pre enter canary",
     "canary:exit": "changeset pre exit",
     "version": "changeset version && pnpm install --no-frozen-lockfile && pnpm lint:fix",

packages/create-email/package.json

@@ -27,9 +27,7 @@
     "create-email": "src/index.js"
   },
   "devDependencies": {
-    "@react-email/components": "0.0.37-canary.0",
     "react": "19.0.0",
-    "react-email": "4.1.0-canary.0",
     "tsconfig": "workspace:*",
     "typescript": "5.8.2"
   }

packages/create-email/src/index.js

@@ -8,7 +8,27 @@ import logSymbols from 'log-symbols';
 import ora from 'ora';
 import { tree } from './tree.js';
 
-const init = async (name) => {
+const getLatestVersionOfTag = async (packageName, tag) => {
+  const response = await fetch(
+    `https://registry.npmjs.org/${packageName}/${tag}`,
+  );
+  const data = await response.json();
+
+  if (typeof data === 'string' && data.startsWith('version not found')) {
+    console.error(`Tag ${tag} does not exist for ${packageName}.`);
+    process.exit(1);
+  }
+
+  const { version } = data;
+
+  if (!/^\d+\.\d+\.\d+.*$/.test(version)) {
+    console.error('Invalid version received, something has gone very wrong.');
+  }
+
+  return version;
+};
+
+const init = async (name, { tag }) => {
   let projectPath = name;
 
   if (!projectPath) {
@@ -39,25 +59,18 @@ const init = async (name) => {
     resolvedProjectPath,
     './package.json',
   );
-  const templatePackageJson = JSON.parse(
-    fse.readFileSync(templatePackageJsonPath, 'utf8'),
-  );
-  for (const key in templatePackageJson.dependencies) {
-    // We remove any workspace prefix that might have been added for the purposes
-    // of being used locally
-    templatePackageJson.dependencies[key] = templatePackageJson.dependencies[
-      key
-    ].replace('workspace:', '');
-  }
-  for (const key in templatePackageJson.devDependencies) {
-    // We remove any workspace prefix that might have been added for the purposes
-    // of being used locally
-    templatePackageJson.devDependencies[key] =
-      templatePackageJson.devDependencies[key].replace('workspace:', '');
-  }
+  const templatePackageJson = fse.readFileSync(templatePackageJsonPath, 'utf8');
   fse.writeFileSync(
     templatePackageJsonPath,
-    JSON.stringify(templatePackageJson, null, 2),
+    templatePackageJson
+      .replace(
+        'INSERT_COMPONENTS_VERSION',
+        await getLatestVersionOfTag('@react-email/components', tag),
+      )
+      .replace(
+        'INSERT_REACT_EMAIL_VERSION',
+        await getLatestVersionOfTag('react-email', tag),
+      ),
     'utf8',
   );
 
@@ -80,6 +93,7 @@ new Command()
   .name('create-email')
   .version('0.0.30-canary.0')
   .description('The easiest way to get started with React Email')
-  .arguments('[dir]', 'path to initialize the project')
+  .arguments('[dir]', 'Path to initialize the project')
+  .option('-t, --tag <tag>', 'Tag of React Email versions to use', 'latest')
   .action(init)
   .parse(process.argv);

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

@@ -26,6 +26,20 @@ describe('automatic setup', () => {
     );
   });
 
+  test.sequential('install', { timeout: 40_000 }, () => {
+    const installProcess = spawnSync('npm', ['install'], {
+      shell: true,
+      cwd: path.resolve(starterPath),
+      stdio: 'pipe',
+    });
+    if (installProcess.stderr) {
+      console.log(installProcess.stderr.toString());
+    }
+    expect(installProcess.status, 'starter npm install should return 0').toBe(
+      0,
+    );
+  });
+
   test.sequential('export', () => {
     const exportProcess = spawnSync('npm', ['run export'], {
       shell: true,

packages/create-email/template/package.json

@@ -8,13 +8,13 @@
     "export": "email export"
   },
   "dependencies": {
-    "@react-email/components": "^0.0.36",
+    "@react-email/components": "INSERT_COMPONENTS_VERSION",
     "react-dom": "19.0.0",
     "react": "19.0.0"
   },
   "devDependencies": {
     "@types/react": "19.0.1",
     "@types/react-dom": "19.0.1",
-    "react-email": "^4.0.7"
+    "react-email": "INSERT_REACT_EMAIL_VERSION"
   }
 }