Refactor registry and CLI components for improved functionality

- Added logging to the componentMeta middleware for better debugging.
- Changed route handling to use app.get for more specific and less specific routes.
- Enhanced the installFromRegistry function to handle proofkitDependencies.
- Updated post-install step processing to use structured data for script commands.
- Improved error handling in installDependencies to capture and report stderr output.
- Adjusted shadcnInstall to provide more informative loading and success messages.
- Updated metadata schemas to include proofkitDependencies and structured post-install step data.

Author: eluce2

apps/docs/src/app/r/[[...name]]/registry.ts

@@ -26,7 +26,10 @@ const componentMeta = (basePath: string) =>
   createMiddleware<{
     Variables: { meta: TemplateMetadata; path: string };
   }>(async (c, next) => {
+    console.log("c.req.path", c.req.path);
+    console.log("basePath", basePath);
     const path = c.req.path.replace(basePath, "").replace(/\.json$/, "");
+    console.log("path", path);
     c.set("path", path);
 
     try {
@@ -39,20 +42,28 @@ const componentMeta = (basePath: string) =>
     }
   });
 
-app.use(componentMeta("/r/meta")).get("/meta/*", async (c) => {
+// Handle meta requests first (more specific route)
+app.get("/meta/*", componentMeta("/r/meta"), async (c) => {
   const meta = c.get("meta");
   return c.json(meta, 200);
 });
 
-// Handle registry requests at base path "/r"
-app.use(componentMeta("/r")).get("/*", async (c) => {
+// Handle registry requests at base path "/r" (less specific route)
+app.get("/*", componentMeta("/r"), async (c) => {
   const path = c.get("path");
+  const requestUrl = new URL(c.req.url);
 
   const meta = c.get("meta");
   if (meta.type === "static") {
     try {
       const data = await getStaticComponent(path);
-      return c.json(data);
+
+      return c.json({
+        ...data,
+        registryDependencies: data.registryDependencies?.map((x) =>
+          x.replace("{proofkit}", requestUrl.origin),
+        ),
+      });
     } catch (error) {
       console.error(error);
       return c.json({ error: "Component not found." }, { status: 404 });

packages/cli/src/cli/add/index.ts

@@ -28,8 +28,6 @@ export const runAdd = async (
 
   if (name === "tanstack-query") {
     return await runAddTanstackQueryCommand();
-  } else if (name === "react-email") {
-    return await runAddReactEmailCommand({ noInstall: options?.noInstall });
   } else if (name !== undefined) {
     // an arbitrary name was provided, so we'll try to install from the registry
     return await installFromRegistry(name);
@@ -114,6 +112,5 @@ export const makeAddCommand = () => {
   addCommand.addCommand(makeAddPageCommand());
   addCommand.addCommand(makeAddSchemaCommand());
   addCommand.addCommand(makeAddDataSourceCommand());
-  addCommand.addCommand(makeAddReactEmailCommand());
   return addCommand;
 };

packages/cli/src/cli/add/registry/index.ts

@@ -34,12 +34,18 @@ export async function installFromRegistry(name: string) {
   }
 
   // run shadcn command
-  await shadcnInstall([url]);
+  await shadcnInstall([url], meta.title);
 
   // if post-install steps, process those
   if (meta.postInstall) {
     for (const step of meta.postInstall) {
       await processPostInstallStep(step);
     }
   }
+
+  if (meta.proofkitDependencies) {
+    for (const dependency of meta.proofkitDependencies) {
+      await installFromRegistry(dependency);
+    }
+  }
 }

packages/cli/src/cli/add/registry/postInstall/index.ts

@@ -10,7 +10,7 @@ export async function processPostInstallStep(step: PostInstallStep) {
     state.projectDir; // current working directory
     const packageJsonPath = path.join(state.projectDir, "package.json");
     const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, "utf8"));
-    packageJson.scripts[step.name] = step.script;
+    packageJson.scripts[step.data.scriptName] = step.data.scriptCommand;
     fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2));
   } else if (step.action === "wrap provider") {
     // TODO: implement

packages/cli/src/helpers/installDependencies.ts

@@ -28,15 +28,51 @@ const execWithSpinner = async (
   const spinner = ora(
     options.loadingMessage ?? `Running ${pkgManager} ${args.join(" ")} ...`
   ).start();
-  const subprocess = execa(pkgManager, args, { cwd: projectDir, stdout });
+  const subprocess = execa(pkgManager, args, {
+    cwd: projectDir,
+    stdout,
+    stderr: "pipe", // Capture stderr to get error messages
+  });
 
   await new Promise<void>((res, rej) => {
+    let stdoutOutput = "";
+    let stderrOutput = "";
+
     if (onDataHandle) {
       subprocess.stdout?.on("data", onDataHandle(spinner));
+    } else {
+      // If no custom handler, capture stdout for error reporting
+      subprocess.stdout?.on("data", (data) => {
+        stdoutOutput += data.toString();
+      });
     }
 
+    // Capture stderr output for error reporting
+    subprocess.stderr?.on("data", (data) => {
+      stderrOutput += data.toString();
+    });
+
     void subprocess.on("error", (e) => rej(e));
-    void subprocess.on("close", () => res());
+    void subprocess.on("close", (code) => {
+      if (code === 0) {
+        res();
+      } else {
+        // Combine stdout and stderr for complete error message
+        const combinedOutput = [stdoutOutput, stderrOutput]
+          .filter((output) => output.trim())
+          .join("\n")
+          .trim()
+          // Remove spinner-related lines that aren't useful in error output
+          .replace(/^- Checking registry\.$/gm, "")
+          .replace(/^\s*$/gm, "") // Remove empty lines
+          .trim();
+
+        const errorMessage =
+          combinedOutput ||
+          `Command failed with exit code ${code}: ${pkgManager} ${args.join(" ")}`;
+        rej(new Error(errorMessage));
+      }
+    });
   });
 
   return spinner;
@@ -98,28 +134,41 @@ export const runExecCommand = async ({
   command,
   projectDir = state.projectDir,
   successMessage,
+  errorMessage,
   loadingMessage,
 }: {
   command: string[];
   projectDir?: string;
   successMessage?: string;
+  errorMessage?: string;
   loadingMessage?: string;
 }) => {
-  const spinner = await _runExecCommand({
-    projectDir,
-    command,
-    loadingMessage,
-  });
+  let spinner: Ora | null = null;
 
-  // If the spinner was used to show the progress, use succeed method on it
-  // If not, use the succeed on a new spinner
-  (spinner ?? ora()).succeed(
-    chalk.green(
-      successMessage
-        ? `${successMessage}\n`
-        : `Successfully ran ${command.join(" ")}!\n`
-    )
-  );
+  try {
+    spinner = await _runExecCommand({
+      projectDir,
+      command,
+      loadingMessage,
+    });
+
+    // If the spinner was used to show the progress, use succeed method on it
+    // If not, use the succeed on a new spinner
+    (spinner ?? ora()).succeed(
+      chalk.green(
+        successMessage
+          ? `${successMessage}\n`
+          : `Successfully ran ${command.join(" ")}!\n`
+      )
+    );
+  } catch (error) {
+    // If we have a spinner, fail it, otherwise just throw the error
+    if (spinner) {
+      const failMessage = errorMessage || `Failed to run ${command.join(" ")}`;
+      spinner.fail(chalk.red(failMessage));
+    }
+    throw error;
+  }
 };
 
 export const _runExecCommand = async ({
@@ -134,36 +183,63 @@ export const _runExecCommand = async ({
 }): Promise<Ora | null> => {
   const pkgManager = getUserPkgManager();
   switch (pkgManager) {
-    // When using npm, inherit the stderr stream so that the progress bar is shown
+    // When using npm, capture both stdout and stderr to show error messages
     case "npm":
-      await execa("npx", [...command], {
+      const result = await execa("npx", [...command], {
         cwd: projectDir,
-        stderr: "inherit",
+        stdout: "pipe",
+        stderr: "pipe",
+        reject: false,
       });
 
+      if (result.exitCode !== 0) {
+        // Combine stdout and stderr for complete error message
+        const combinedOutput = [result.stdout, result.stderr]
+          .filter((output) => output?.trim())
+          .join("\n")
+          .trim()
+          // Remove spinner-related lines that aren't useful in error output
+          .replace(/^- Checking registry\.$/gm, "")
+          .replace(/^\s*$/gm, "") // Remove empty lines
+          .trim();
+
+        const errorMessage =
+          combinedOutput ||
+          `Command failed with exit code ${result.exitCode}: npx ${command.join(" ")}`;
+        throw new Error(errorMessage);
+      }
+
       return null;
     // When using yarn or pnpm, use the stdout stream and ora spinner to show the progress
     case "pnpm":
+      // For shadcn commands, don't use progress handler to capture full output
+      const isInstallCommand = command.includes("install");
       return execWithSpinner(projectDir, "pnpm", {
         args: ["dlx", ...command],
         loadingMessage,
-        onDataHandle: (spinner) => (data) => {
-          const text = data.toString();
+        onDataHandle: isInstallCommand
+          ? (spinner) => (data) => {
+              const text = data.toString();
 
-          if (text.includes("Progress")) {
-            spinner.text = text.includes("|")
-              ? (text.split(" | ")[1] ?? "")
-              : text;
-          }
-        },
+              if (text.includes("Progress")) {
+                spinner.text = text.includes("|")
+                  ? (text.split(" | ")[1] ?? "")
+                  : text;
+              }
+            }
+          : undefined,
       });
     case "yarn":
+      // For shadcn commands, don't use progress handler to capture full output
+      const isYarnInstallCommand = command.includes("install");
       return execWithSpinner(projectDir, pkgManager, {
         args: [...command],
         loadingMessage,
-        onDataHandle: (spinner) => (data) => {
-          spinner.text = data.toString();
-        },
+        onDataHandle: isYarnInstallCommand
+          ? (spinner) => (data) => {
+              spinner.text = data.toString();
+            }
+          : undefined,
       });
     // When using bun, the stdout stream is ignored and the spinner is shown
     case "bun":

packages/cli/src/helpers/shadcn-cli.ts

@@ -1,14 +1,19 @@
 import { DEFAULT_REGISTRY_URL } from "~/consts.js";
+import { logger } from "~/utils/logger.js";
 import { getSettings } from "~/utils/parseSettings.js";
 import { runExecCommand } from "./installDependencies.js";
 
-export async function shadcnInstall(components: string | string[]) {
+export async function shadcnInstall(
+  components: string | string[],
+  friendlyComponentName?: string
+) {
   const componentsArray = Array.isArray(components) ? components : [components];
-  const command = ["shadcn@latest", "add", ...componentsArray];
+  const command = ["shadcn@latest", "add", "--overwrite", ...componentsArray];
   await runExecCommand({
     command,
-    loadingMessage: "Installing components...",
-    successMessage: "Components installed successfully!",
+    loadingMessage: `Installing ${friendlyComponentName ?? "components"}...`,
+    successMessage: `${friendlyComponentName ?? "Components"} installed successfully!`,
+    errorMessage: `Failed to install ${friendlyComponentName ?? "components"}`,
   });
 }