Add Capacitor support (#483)

Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>

src/ipc/handlers/app_upgrade_handlers.ts

@@ -9,8 +9,9 @@ import fs from "node:fs";
 import path from "node:path";
 import { spawn } from "node:child_process";
 import { gitAddAll, gitCommit } from "../utils/git_utils";
+import { simpleSpawn } from "../utils/simpleSpawn";
 
-const logger = log.scope("app_upgrade_handlers");
+export const logger = log.scope("app_upgrade_handlers");
 const handle = createLoggedHandler(logger);
 
 const availableUpgrades: Omit<AppUpgrade, "isNeeded">[] = [
@@ -21,6 +22,13 @@ const availableUpgrades: Omit<AppUpgrade, "isNeeded">[] = [
       "Installs the Dyad component tagger Vite plugin and its dependencies.",
     manualUpgradeUrl: "https://dyad.sh/docs/upgrades/select-component",
   },
+  {
+    id: "capacitor",
+    title: "Upgrade to hybrid mobile app with Capacitor",
+    description:
+      "Adds Capacitor to your app lets it run on iOS and Android in addition to the web.",
+    manualUpgradeUrl: "https://dyad.sh/docs/guides/mobile-app#upgrade-your-app",
+  },
 ];
 
 async function getApp(appId: number) {
@@ -33,6 +41,13 @@ async function getApp(appId: number) {
   return app;
 }
 
+function isViteApp(appPath: string): boolean {
+  const viteConfigPathJs = path.join(appPath, "vite.config.js");
+  const viteConfigPathTs = path.join(appPath, "vite.config.ts");
+
+  return fs.existsSync(viteConfigPathTs) || fs.existsSync(viteConfigPathJs);
+}
+
 function isComponentTaggerUpgradeNeeded(appPath: string): boolean {
   const viteConfigPathJs = path.join(appPath, "vite.config.js");
   const viteConfigPathTs = path.join(appPath, "vite.config.ts");
@@ -55,6 +70,29 @@ function isComponentTaggerUpgradeNeeded(appPath: string): boolean {
   }
 }
 
+function isCapacitorUpgradeNeeded(appPath: string): boolean {
+  // Check if it's a Vite app first
+  if (!isViteApp(appPath)) {
+    return false;
+  }
+
+  // Check if Capacitor is already installed
+  const capacitorConfigJs = path.join(appPath, "capacitor.config.js");
+  const capacitorConfigTs = path.join(appPath, "capacitor.config.ts");
+  const capacitorConfigJson = path.join(appPath, "capacitor.config.json");
+
+  // If any Capacitor config exists, the upgrade is not needed
+  if (
+    fs.existsSync(capacitorConfigJs) ||
+    fs.existsSync(capacitorConfigTs) ||
+    fs.existsSync(capacitorConfigJson)
+  ) {
+    return false;
+  }
+
+  return true;
+}
+
 async function applyComponentTagger(appPath: string) {
   const viteConfigPathJs = path.join(appPath, "vite.config.js");
   const viteConfigPathTs = path.join(appPath, "vite.config.ts");
@@ -157,6 +195,59 @@ async function applyComponentTagger(appPath: string) {
   }
 }
 
+async function applyCapacitor({
+  appName,
+  appPath,
+}: {
+  appName: string;
+  appPath: string;
+}) {
+  // Install Capacitor dependencies
+  await simpleSpawn({
+    command:
+      "pnpm add @capacitor/core @capacitor/cli @capacitor/ios @capacitor/android || npm install @capacitor/core @capacitor/cli @capacitor/ios @capacitor/android --legacy-peer-deps",
+    cwd: appPath,
+    successMessage: "Capacitor dependencies installed successfully",
+    errorPrefix: "Failed to install Capacitor dependencies",
+  });
+
+  // Initialize Capacitor
+  await simpleSpawn({
+    command: `npx cap init "${appName}" "com.example.${appName.toLowerCase().replace(/[^a-z0-9]/g, "")}" --web-dir=dist`,
+    cwd: appPath,
+    successMessage: "Capacitor initialized successfully",
+    errorPrefix: "Failed to initialize Capacitor",
+  });
+
+  // Add iOS and Android platforms
+  await simpleSpawn({
+    command: "npx cap add ios && npx cap add android",
+    cwd: appPath,
+    successMessage: "iOS and Android platforms added successfully",
+    errorPrefix: "Failed to add iOS and Android platforms",
+  });
+
+  // Commit changes
+  try {
+    logger.info("Staging and committing Capacitor changes");
+    await gitAddAll({ path: appPath });
+    await gitCommit({
+      path: appPath,
+      message: "[dyad] add Capacitor for mobile app support",
+    });
+    logger.info("Successfully committed Capacitor changes");
+  } catch (err) {
+    logger.warn(
+      `Failed to commit changes. This may happen if the project is not in a git repository, or if there are no changes to commit.`,
+      err,
+    );
+    throw new Error(
+      "Failed to commit Capacitor changes. Please commit them manually. Error: " +
+        err,
+    );
+  }
+}
+
 export function registerAppUpgradeHandlers() {
   handle(
     "get-app-upgrades",
@@ -168,6 +259,8 @@ export function registerAppUpgradeHandlers() {
         let isNeeded = false;
         if (upgrade.id === "component-tagger") {
           isNeeded = isComponentTaggerUpgradeNeeded(appPath);
+        } else if (upgrade.id === "capacitor") {
+          isNeeded = isCapacitorUpgradeNeeded(appPath);
         }
         return { ...upgrade, isNeeded };
       });
@@ -188,6 +281,8 @@ export function registerAppUpgradeHandlers() {
 
       if (upgradeId === "component-tagger") {
         await applyComponentTagger(appPath);
+      } else if (upgradeId === "capacitor") {
+        await applyCapacitor({ appName: app.name, appPath });
       } else {
         throw new Error(`Unknown upgrade id: ${upgradeId}`);
       }

src/ipc/handlers/capacitor_handlers.ts

@@ -0,0 +1,121 @@
+import { createLoggedHandler } from "./safe_handle";
+import log from "electron-log";
+import { db } from "../../db";
+import { apps } from "../../db/schema";
+import { eq } from "drizzle-orm";
+import { getDyadAppPath } from "../../paths/paths";
+import fs from "node:fs";
+import path from "node:path";
+import { simpleSpawn } from "../utils/simpleSpawn";
+import { IS_TEST_BUILD } from "../utils/test_utils";
+
+const logger = log.scope("capacitor_handlers");
+const handle = createLoggedHandler(logger);
+
+async function getApp(appId: number) {
+  const app = await db.query.apps.findFirst({
+    where: eq(apps.id, appId),
+  });
+  if (!app) {
+    throw new Error(`App with id ${appId} not found`);
+  }
+  return app;
+}
+
+function isCapacitorInstalled(appPath: string): boolean {
+  const capacitorConfigJs = path.join(appPath, "capacitor.config.js");
+  const capacitorConfigTs = path.join(appPath, "capacitor.config.ts");
+  const capacitorConfigJson = path.join(appPath, "capacitor.config.json");
+
+  return (
+    fs.existsSync(capacitorConfigJs) ||
+    fs.existsSync(capacitorConfigTs) ||
+    fs.existsSync(capacitorConfigJson)
+  );
+}
+
+export function registerCapacitorHandlers() {
+  handle(
+    "is-capacitor",
+    async (_, { appId }: { appId: number }): Promise<boolean> => {
+      const app = await getApp(appId);
+      const appPath = getDyadAppPath(app.path);
+      return isCapacitorInstalled(appPath);
+    },
+  );
+
+  handle(
+    "sync-capacitor",
+    async (_, { appId }: { appId: number }): Promise<void> => {
+      const app = await getApp(appId);
+      const appPath = getDyadAppPath(app.path);
+
+      if (!isCapacitorInstalled(appPath)) {
+        throw new Error("Capacitor is not installed in this app");
+      }
+
+      await simpleSpawn({
+        command: "npm run build",
+        cwd: appPath,
+        successMessage: "App built successfully",
+        errorPrefix: "Failed to build app",
+      });
+
+      await simpleSpawn({
+        command: "npx cap sync",
+        cwd: appPath,
+        successMessage: "Capacitor sync completed successfully",
+        errorPrefix: "Failed to sync Capacitor",
+      });
+    },
+  );
+
+  handle("open-ios", async (_, { appId }: { appId: number }): Promise<void> => {
+    const app = await getApp(appId);
+    const appPath = getDyadAppPath(app.path);
+
+    if (!isCapacitorInstalled(appPath)) {
+      throw new Error("Capacitor is not installed in this app");
+    }
+
+    if (IS_TEST_BUILD) {
+      // In test mode, just log the action instead of actually opening Xcode
+      logger.info("Test mode: Simulating opening iOS project in Xcode");
+      return;
+    }
+
+    await simpleSpawn({
+      command: "npx cap open ios",
+      cwd: appPath,
+      successMessage: "iOS project opened successfully",
+      errorPrefix: "Failed to open iOS project",
+    });
+  });
+
+  handle(
+    "open-android",
+    async (_, { appId }: { appId: number }): Promise<void> => {
+      const app = await getApp(appId);
+      const appPath = getDyadAppPath(app.path);
+
+      if (!isCapacitorInstalled(appPath)) {
+        throw new Error("Capacitor is not installed in this app");
+      }
+
+      if (IS_TEST_BUILD) {
+        // In test mode, just log the action instead of actually opening Android Studio
+        logger.info(
+          "Test mode: Simulating opening Android project in Android Studio",
+        );
+        return;
+      }
+
+      await simpleSpawn({
+        command: "npx cap open android",
+        cwd: appPath,
+        successMessage: "Android project opened successfully",
+        errorPrefix: "Failed to open Android project",
+      });
+    },
+  );
+}

src/ipc/ipc_client.ts

@@ -917,4 +917,21 @@ export class IpcClient {
   }): Promise<void> {
     return this.ipcRenderer.invoke("execute-app-upgrade", params);
   }
+
+  // Capacitor methods
+  public async isCapacitor(params: { appId: number }): Promise<boolean> {
+    return this.ipcRenderer.invoke("is-capacitor", params);
+  }
+
+  public async syncCapacitor(params: { appId: number }): Promise<void> {
+    return this.ipcRenderer.invoke("sync-capacitor", params);
+  }
+
+  public async openIos(params: { appId: number }): Promise<void> {
+    return this.ipcRenderer.invoke("open-ios", params);
+  }
+
+  public async openAndroid(params: { appId: number }): Promise<void> {
+    return this.ipcRenderer.invoke("open-android", params);
+  }
 }

src/ipc/ipc_host.ts

@@ -21,6 +21,7 @@ import { registerSessionHandlers } from "./handlers/session_handlers";
 import { registerProHandlers } from "./handlers/pro_handlers";
 import { registerContextPathsHandlers } from "./handlers/context_paths_handlers";
 import { registerAppUpgradeHandlers } from "./handlers/app_upgrade_handlers";
+import { registerCapacitorHandlers } from "./handlers/capacitor_handlers";
 
 export function registerIpcHandlers() {
   // Register all IPC handlers by category
@@ -47,4 +48,5 @@ export function registerIpcHandlers() {
   registerProHandlers();
   registerContextPathsHandlers();
   registerAppUpgradeHandlers();
+  registerCapacitorHandlers();
 }

src/ipc/utils/simpleSpawn.ts

@@ -0,0 +1,57 @@
+import { spawn } from "child_process";
+import log from "electron-log/main";
+
+const logger = log.scope("simpleSpawn");
+
+export async function simpleSpawn({
+  command,
+  cwd,
+  successMessage,
+  errorPrefix,
+}: {
+  command: string;
+  cwd: string;
+  successMessage: string;
+  errorPrefix: string;
+}): Promise<void> {
+  return new Promise<void>((resolve, reject) => {
+    logger.info(`Running: ${command}`);
+    const process = spawn(command, {
+      cwd,
+      shell: true,
+      stdio: "pipe",
+    });
+
+    let stdout = "";
+    let stderr = "";
+
+    process.stdout?.on("data", (data) => {
+      const output = data.toString();
+      stdout += output;
+      logger.info(output);
+    });
+
+    process.stderr?.on("data", (data) => {
+      const output = data.toString();
+      stderr += output;
+      logger.error(output);
+    });
+
+    process.on("close", (code) => {
+      if (code === 0) {
+        logger.info(successMessage);
+        resolve();
+      } else {
+        logger.error(`${errorPrefix}, exit code ${code}`);
+        const errorMessage = `${errorPrefix} (exit code ${code})\n\nSTDOUT:\n${stdout}\n\nSTDERR:\n${stderr}`;
+        reject(new Error(errorMessage));
+      }
+    });
+
+    process.on("error", (err) => {
+      logger.error(`Failed to spawn command: ${command}`, err);
+      const errorMessage = `Failed to spawn command: ${err.message}\n\nSTDOUT:\n${stdout}\n\nSTDERR:\n${stderr}`;
+      reject(new Error(errorMessage));
+    });
+  });
+}