Support any JavaScript framework

apps/studio/package.json

@@ -56,9 +56,6 @@
     "@orpc/client": "catalog:",
     "@orpc/server": "catalog:",
     "@orpc/tanstack-query": "catalog:",
-    "@pnpm/package-bins": "^1000.0.3",
-    "@pnpm/read-package-json": "^1000.0.4",
-    "@pnpm/types": "^1000.2.0",
     "@quests/ai-gateway": "workspace:*",
     "@quests/components": "workspace:*",
     "@quests/shared": "workspace:*",
@@ -83,6 +80,7 @@
     "@tanstack/react-router-devtools": "^1.131.28",
     "@types/ws": "^8.18.1",
     "@vscode/ripgrep": "^1.15.13",
+    "@zkochan/cmd-shim": "^7.0.0",
     "arctic": "^3.6.0",
     "better-auth": "catalog:",
     "class-variance-authority": "^0.7.1",
@@ -96,14 +94,11 @@
     "electron-log": "^5.4.1",
     "electron-store": "^10.1.0",
     "electron-updater": "^6.6.8",
-    "execa": "^9.6.0",
     "framer-motion": "11.13.5",
     "hono": "catalog:",
     "jotai": "^2.14.0",
     "lucide-react": "catalog:",
     "ms": "^2.1.3",
-    "neverthrow": "^8.1.1",
-    "normalize-path": "^3.0.0",
     "pnpm": "^10.13.1",
     "posthog-js": "^1.258.6",
     "posthog-node": "^5.6.0",
@@ -132,7 +127,6 @@
     "@types/color-hash": "^2.0.0",
     "@types/ms": "^2.1.0",
     "@types/node": "22.16.0",
-    "@types/normalize-path": "^3.0.2",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
     "@types/semver": "^7.7.0",

apps/studio/src/client/vite-env.d.ts

@@ -33,6 +33,7 @@ declare namespace NodeJS {
       ELECTRON_USE_NEW_USER_FOLDER: string | undefined;
       FORCE_DEV_AUTO_UPDATE: string | undefined;
       NODE_ENV: string | undefined;
+      PATH: string | undefined;
       SIGNTOOL_PATH: string | undefined;
       WIN_CERT_PATH: string | undefined;
       WIN_GCP_KMS_KEY_VERSION: string | undefined;

apps/studio/src/electron-main/index.ts

@@ -20,6 +20,7 @@ import path from "node:path";
 
 import { createWorkspaceActor } from "./lib/create-workspace-actor";
 import { registerTelemetry } from "./lib/register-telemetry";
+import { setupBinDirectory } from "./lib/setup-bin-directory";
 import { watchThemePreferenceAndApply } from "./lib/theme-utils";
 import { initializeRPC } from "./rpc/initialize";
 
@@ -114,6 +115,8 @@ void app.whenReady().then(async () => {
     updateTitleBarOverlay();
   });
 
+  await setupBinDirectory();
+
   appUpdater = new StudioAppUpdater();
   appUpdater.pollForUpdates();
 

apps/studio/src/electron-main/lib/create-workspace-actor.ts

@@ -11,28 +11,19 @@ import {
   workspacePublisher,
 } from "@quests/workspace/electron";
 import { app, shell } from "electron";
-import { execa, parseCommandString } from "execa";
 import ms from "ms";
-import { err, ok } from "neverthrow";
 import path from "node:path";
 import { createActor } from "xstate";
 
 import { getProvidersStore } from "../stores/providers";
 import { captureServerEvent } from "./capture-server-event";
 import { captureServerException } from "./capture-server-exception";
-import { getFramework } from "./frameworks";
-import { getAllPackageBinaryPaths } from "./link-bins";
-import { getPnpmPath } from "./pnpm";
+import { getPNPMBinPath } from "./setup-bin-directory";
 
 const scopedLogger = logger.scope("workspace-actor");
 
 export function createWorkspaceActor() {
   const rootDir = path.join(app.getPath("userData"), WORKSPACE_FOLDER);
-  const execaEnv = {
-    // Required for normal node processes to work
-    // See https://www.electronjs.org/docs/latest/api/environment-variables
-    ELECTRON_RUN_AS_NODE: "1",
-  };
   const actor = createActor(workspaceMachine, {
     input: {
       aiGatewayApp,
@@ -54,79 +45,17 @@ export function createWorkspaceActor() {
 
         return providers;
       },
+      nodeExecEnv: {
+        // Required to allow Electron to operate as a node process
+        // See https://www.electronjs.org/docs/latest/api/environment-variables
+        ELECTRON_RUN_AS_NODE: "1",
+      },
+      pnpmBinPath: getPNPMBinPath(),
       previewCacheTimeMs: ms("24 hours"),
       registryDir: app.isPackaged
         ? path.join(process.resourcesPath, REGISTRY_DIR_NAME)
         : path.resolve(import.meta.dirname, REGISTRY_DEV_DIR_PATH),
       rootDir,
-      runPackageJsonScript: async ({ cwd, script, scriptOptions, signal }) => {
-        const { framework, frameworkModulePath } = await getFramework({
-          rootDir: cwd,
-          script,
-        });
-        if (!framework) {
-          return err(new Error(`Unsupported framework: ${script}`));
-        }
-
-        try {
-          return ok(
-            execa({
-              cancelSignal: signal,
-              cwd,
-              env: {
-                ...execaEnv,
-                ...scriptOptions.env,
-              },
-              node: true,
-            })`${frameworkModulePath} ${framework.args("dev", scriptOptions.port)}`,
-          );
-        } catch (error) {
-          return err(error instanceof Error ? error : new Error(String(error)));
-        }
-      },
-      runShellCommand: async (command, { cwd, signal }) => {
-        const [commandName, ...rest] = parseCommandString(command);
-        const pnpmPath = getPnpmPath();
-
-        if (commandName === "pnpm") {
-          return ok(
-            execa({
-              cancelSignal: signal,
-              cwd,
-              env: execaEnv,
-              node: true,
-            })`${pnpmPath} ${rest}`,
-          );
-        }
-
-        if (commandName === "tsc") {
-          const binaryPaths = await getAllPackageBinaryPaths(cwd);
-          const binPaths = binaryPaths.get("typescript");
-
-          if (!binPaths) {
-            return err(new Error(`tsc not found in ${cwd}`));
-          }
-
-          const modulePath = binPaths.find(
-            (binPath) => path.basename(binPath) === "tsc",
-          );
-
-          if (!modulePath) {
-            return err(new Error(`tsc not found in ${cwd}`));
-          }
-
-          return ok(
-            execa({
-              cancelSignal: signal,
-              cwd,
-              env: execaEnv,
-              node: true,
-            })`${modulePath} ${rest}`,
-          );
-        }
-
-        return err(new Error(`Not implemented: ${command}`));
-      },
       shimClientDir: app.isPackaged
         ? path.resolve(process.resourcesPath, "shim-client")
         : // Uncomment to test built shim

apps/studio/src/electron-main/lib/pnpm.ts

@@ -2,16 +2,16 @@ import { forkExecCommand } from "@/electron-main/lib/exec-command";
 import { createRequire } from "node:module";
 import path from "node:path";
 
-export function getPnpmPath() {
+export async function pnpmVersion() {
+  const pnpmPath = getPnpmPath();
+  const result = await forkExecCommand(pnpmPath, ["-v"]);
+  return result.stdout;
+}
+
+function getPnpmPath() {
   const require = createRequire(import.meta.url);
   const packageJsonPath = require.resolve("pnpm");
   const unpackedPath = packageJsonPath.replace("app.asar", "app.asar.unpacked");
   const pnpmPath = path.dirname(unpackedPath);
   return path.join(pnpmPath, "bin", "pnpm.cjs");
 }
-
-export async function pnpmVersion() {
-  const pnpmPath = getPnpmPath();
-  const result = await forkExecCommand(pnpmPath, ["-v"]);
-  return result.stdout;
-}