freestyle-sandboxes 0.0.46 → 0.0.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "freestyle-sandboxes",
-  "version": "0.0.46",
+  "version": "0.0.47",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
@@ -65,6 +65,16 @@
         "types": "./dist/utils/index.d.mts",
         "default": "./dist/utils/index.mjs"
       }
+    },
+    "./react/dev-server": {
+      "require": {
+        "types": "./dist/react/dev-server/index.d.cts",
+        "default": "./dist/react/dev-server/index.cjs"
+      },
+      "import": {
+        "types": "./dist/react/dev-server/index.d.mts",
+        "default": "./dist/react/dev-server/index.mjs"
+      }
     }
   },
   "scripts": {
@@ -86,12 +96,14 @@
   },
   "dependencies": {
     "@hey-api/client-fetch": "^0.5.7",
+    "@tanstack/react-query": "^5.74.4",
     "expo-router": "^4.0.20",
     "glob": "^11.0.1",
     "hono": "^4.7.5",
     "openai": "^4.77.3",
     "openapi": "^1.0.1",
+    "react": "*",
     "zod": "^3.24.1"
   },
   "packageManager": "pnpm@9.11.0+sha512.0a203ffaed5a3f63242cd064c8fb5892366c103e328079318f78062f24ea8c9d50bc6a47aa3567cabefd824d170e78fa2745ed1f16b132e16436146b7688f19b"
-}
+}

package/src/index.ts

@@ -138,10 +138,10 @@ export class FreestyleSandboxes {
     source: sandbox_openapi.DeploymentSource,
     config?: Omit<FreestyleDeployWebConfiguration, "build"> & {
       build?:
-        | BuildOptions
-        | (Omit<BuildOptions, "command"> & {
-            command: string | string[];
-          });
+      | BuildOptions
+      | (Omit<BuildOptions, "command"> & {
+        command: string | string[];
+      });
     },
   ): Promise<FreestyleDeployWebSuccessResponseV2> {
     if (Array.isArray(config.build?.command)) {
@@ -801,6 +801,31 @@ export class FreestyleSandboxes {
       `Failed to delete git trigger ${triggerId}: ${response.error.message}`,
     );
   }
+
+  /**
+   * Request a dev server for a repository. If a dev server is already running
+   * for that repository, it will return a url to that server. Dev servers are
+   * ephemeral so you should call this function every time you need a url. Do
+   * not store the url in your database!
+   */
+  async requestDevServer({
+    repoUrl
+  }: { repoUrl: string }) {
+    const response = await sandbox_openapi.handleEphemeralDevServer({
+      client: this.client,
+      body: {
+        repo: repoUrl
+      }
+    });
+
+    if (!response.data) {
+      throw new Error(
+        `Failed to request dev server: ${response.error}`,
+      )
+    }
+
+    return response.data;
+  }
 }
 
 export * from "../openapi/types.gen.ts";

package/src/react/dev-server/index.tsx

@@ -0,0 +1,111 @@
+import {
+  QueryClient,
+  QueryClientProvider,
+  useQuery,
+} from "@tanstack/react-query";
+import { RequestDevServerActions } from "./types";
+import React from "react";
+
+const queryClient = new QueryClient();
+
+export function DefaultLoadingComponent({
+  installCommandRunning,
+}: {
+  devCommandRunning: boolean;
+  installCommandRunning: boolean;
+  serverStarting: boolean;
+}) {
+  let loadingText = "Starting container...";
+
+  if (installCommandRunning) {
+    loadingText = "Installing dependencies...";
+  } else {
+    loadingText = "Starting dev server...";
+  }
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        height: "100%",
+      }}
+    >
+      {loadingText}
+    </div>
+  );
+}
+
+export function FreestyleDevServer({
+  repoUrl,
+  loadingComponent,
+  actions,
+}: {
+  repoUrl: string;
+  loadingComponent?: (props: {
+    devCommandRunning: boolean;
+    installCommandRunning: boolean;
+    serverStarting: boolean;
+  }) => React.ReactNode;
+  actions: RequestDevServerActions;
+}) {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <FreestyleDevServerInner
+        loadingComponent={loadingComponent ?? DefaultLoadingComponent}
+        repoUrl={repoUrl}
+        actions={actions}
+      />
+    </QueryClientProvider>
+  );
+}
+
+function FreestyleDevServerInner({
+  repoUrl,
+  loadingComponent,
+  actions: { requestDevServer },
+}: {
+  repoUrl: string;
+  loadingComponent: (props: {
+    devCommandRunning: boolean;
+    installCommandRunning: boolean;
+    serverStarting: boolean;
+  }) => React.ReactNode;
+  actions: RequestDevServerActions;
+}) {
+  const { data, isLoading } = useQuery({
+    queryKey: ["dev-server", repoUrl],
+    queryFn: async () => await requestDevServer({ repoUrl: repoUrl }),
+    refetchInterval: 1000,
+  });
+
+  if (isLoading) {
+    return loadingComponent({
+      devCommandRunning: false,
+      installCommandRunning: false,
+      serverStarting: true,
+    });
+  }
+
+  if (!data?.devCommandRunning) {
+    return loadingComponent({
+      devCommandRunning: data?.devCommandRunning ?? false,
+      installCommandRunning: data?.installCommandRunning ?? false,
+      serverStarting: false,
+    });
+  }
+
+  return (
+    <iframe
+      sandbox="allow-scripts allow-same-origin allow-forms"
+      src={data.ephemeralUrl}
+      style={{
+        width: "100%",
+        height: "100%",
+        border: "none",
+      }}
+    />
+  );
+}

package/src/react/dev-server/types.ts

@@ -0,0 +1,5 @@
+export type RequestDevServerActions = {
+    requestDevServer: (args: {
+        repoUrl: string;
+    }) => Promise<{ ephemeralUrl: string; devCommandRunning: boolean; installCommandRunning: boolean; }>;
+};

package/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "allowImportingTsExtensions": true,
-
+    "jsx": "react",
     "lib": ["ESNext", "DOM"]
   }
 }