freestyle-sandboxes 0.0.61 → 0.0.63

package/dist/inde.d.cts

@@ -191,6 +191,7 @@ declare class FreestyleSandboxes {
     }): Promise<{
         mcpEphemeralUrl: any;
         ephemeralUrl: string;
+        codeServerUrl: string;
         url: string;
         isNew: boolean;
         devCommandRunning: boolean;

package/dist/inde.d.mts

@@ -191,6 +191,7 @@ declare class FreestyleSandboxes {
     }): Promise<{
         mcpEphemeralUrl: any;
         ephemeralUrl: string;
+        codeServerUrl: string;
         url: string;
         isNew: boolean;
         devCommandRunning: boolean;

package/dist/index.cjs

@@ -816,7 +816,8 @@ ${response.error.message}`);
       // @ts-ignore
       mcpEphemeralUrl: response.data.mcpEphemeralUrl || response.data.url + "/mcp",
       // @ts-ignore
-      ephemeralUrl: response.data.ephemeralUrl ?? response.data.url
+      ephemeralUrl: response.data.ephemeralUrl ?? response.data.url,
+      codeServerUrl: response.data.ephemeralUrl + "/__freestyle_code_server/?folder=/template"
     };
   }
 }

package/dist/index.d.cts

@@ -191,6 +191,7 @@ declare class FreestyleSandboxes {
     }): Promise<{
         mcpEphemeralUrl: any;
         ephemeralUrl: string;
+        codeServerUrl: string;
         url: string;
         isNew: boolean;
         devCommandRunning: boolean;

package/dist/index.d.mts

@@ -191,6 +191,7 @@ declare class FreestyleSandboxes {
     }): Promise<{
         mcpEphemeralUrl: any;
         ephemeralUrl: string;
+        codeServerUrl: string;
         url: string;
         isNew: boolean;
         devCommandRunning: boolean;

package/dist/index.mjs

@@ -814,7 +814,8 @@ ${response.error.message}`);
       // @ts-ignore
       mcpEphemeralUrl: response.data.mcpEphemeralUrl || response.data.url + "/mcp",
       // @ts-ignore
-      ephemeralUrl: response.data.ephemeralUrl ?? response.data.url
+      ephemeralUrl: response.data.ephemeralUrl ?? response.data.url,
+      codeServerUrl: response.data.ephemeralUrl + "/__freestyle_code_server/?folder=/template"
     };
   }
 }

package/dist/react/dev-server/index..d.cts

@@ -14,6 +14,7 @@ declare function DefaultLoadingComponent({ installCommandRunning, }: {
     devCommandRunning: boolean;
     installCommandRunning: boolean;
     serverStarting: boolean;
+    iframeLoading: boolean;
 }): any;
 declare function FreestyleDevServer({ loadingComponent, actions, repoId, }: {
     repoId: string;
@@ -21,6 +22,7 @@ declare function FreestyleDevServer({ loadingComponent, actions, repoId, }: {
         devCommandRunning: boolean;
         installCommandRunning: boolean;
         serverStarting: boolean;
+        iframeLoading: boolean;
     }) => React.ReactNode;
     actions: RequestDevServerActions;
 }): any;

package/dist/react/dev-server/index..d.mts

@@ -14,6 +14,7 @@ declare function DefaultLoadingComponent({ installCommandRunning, }: {
     devCommandRunning: boolean;
     installCommandRunning: boolean;
     serverStarting: boolean;
+    iframeLoading: boolean;
 }): any;
 declare function FreestyleDevServer({ loadingComponent, actions, repoId, }: {
     repoId: string;
@@ -21,6 +22,7 @@ declare function FreestyleDevServer({ loadingComponent, actions, repoId, }: {
         devCommandRunning: boolean;
         installCommandRunning: boolean;
         serverStarting: boolean;
+        iframeLoading: boolean;
     }) => React.ReactNode;
     actions: RequestDevServerActions;
 }): any;

package/dist/react/dev-server/index.cjs

@@ -62,37 +62,78 @@ function FreestyleDevServerInner({
     return () => clearInterval(interval);
   }, [data?.ephemeralUrl]);
   const [wasLoaded, setWasLoaded] = React.useState(false);
+  const [iframeLoaded, setIframeLoaded] = React.useState(false);
   React.useMemo(() => {
     if (data?.devCommandRunning) {
       setWasLoaded(true);
     }
   }, [isLoading, data?.devCommandRunning]);
+  React.useEffect(() => {
+    ref.current?.addEventListener("load", () => {
+      setIframeLoaded(true);
+    });
+  }, [ref]);
   if (isLoading) {
     return loadingComponent({
       devCommandRunning: false,
       installCommandRunning: false,
-      serverStarting: true
+      serverStarting: true,
+      iframeLoading: false
     });
   }
   if (!data?.devCommandRunning && !wasLoaded) {
     return loadingComponent({
       devCommandRunning: data?.devCommandRunning ?? false,
       installCommandRunning: data?.installCommandRunning ?? false,
-      serverStarting: false
+      serverStarting: false,
+      iframeLoading: false
     });
   }
   return /* @__PURE__ */ React.createElement(
-    "iframe",
+    "div",
     {
-      ref,
-      sandbox: "allow-scripts allow-same-origin allow-forms",
-      src: data.ephemeralUrl,
       style: {
+        display: "grid",
+        gridTemplateRows: "1fr",
+        gridTemplateColumns: "1fr",
         width: "100%",
-        height: "100%",
-        border: "none"
+        height: "100%"
       }
-    }
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          width: "100%",
+          height: "100%",
+          border: "none",
+          gridColumn: "1 / -1",
+          gridRow: "1 / -1",
+          visibility: iframeLoaded ? "hidden" : "visible"
+        }
+      },
+      loadingComponent({
+        devCommandRunning: data?.devCommandRunning ?? false,
+        installCommandRunning: data?.installCommandRunning ?? false,
+        serverStarting: false,
+        iframeLoading: true
+      })
+    ),
+    /* @__PURE__ */ React.createElement(
+      "iframe",
+      {
+        ref,
+        sandbox: "allow-scripts allow-same-origin allow-forms",
+        src: data.ephemeralUrl,
+        style: {
+          width: "100%",
+          height: "100%",
+          border: "none",
+          gridColumn: "1 / -1",
+          gridRow: "1 / -1"
+        }
+      }
+    )
   );
 }
 

package/dist/react/dev-server/index.d.cts

@@ -14,6 +14,7 @@ declare function DefaultLoadingComponent({ installCommandRunning, }: {
     devCommandRunning: boolean;
     installCommandRunning: boolean;
     serverStarting: boolean;
+    iframeLoading: boolean;
 }): any;
 declare function FreestyleDevServer({ loadingComponent, actions, repoId, }: {
     repoId: string;
@@ -21,6 +22,7 @@ declare function FreestyleDevServer({ loadingComponent, actions, repoId, }: {
         devCommandRunning: boolean;
         installCommandRunning: boolean;
         serverStarting: boolean;
+        iframeLoading: boolean;
     }) => React.ReactNode;
     actions: RequestDevServerActions;
 }): any;

package/dist/react/dev-server/index.d.mts

@@ -14,6 +14,7 @@ declare function DefaultLoadingComponent({ installCommandRunning, }: {
     devCommandRunning: boolean;
     installCommandRunning: boolean;
     serverStarting: boolean;
+    iframeLoading: boolean;
 }): any;
 declare function FreestyleDevServer({ loadingComponent, actions, repoId, }: {
     repoId: string;
@@ -21,6 +22,7 @@ declare function FreestyleDevServer({ loadingComponent, actions, repoId, }: {
         devCommandRunning: boolean;
         installCommandRunning: boolean;
         serverStarting: boolean;
+        iframeLoading: boolean;
     }) => React.ReactNode;
     actions: RequestDevServerActions;
 }): any;

package/dist/react/dev-server/index.mjs

@@ -60,37 +60,78 @@ function FreestyleDevServerInner({
     return () => clearInterval(interval);
   }, [data?.ephemeralUrl]);
   const [wasLoaded, setWasLoaded] = React.useState(false);
+  const [iframeLoaded, setIframeLoaded] = React.useState(false);
   React.useMemo(() => {
     if (data?.devCommandRunning) {
       setWasLoaded(true);
     }
   }, [isLoading, data?.devCommandRunning]);
+  React.useEffect(() => {
+    ref.current?.addEventListener("load", () => {
+      setIframeLoaded(true);
+    });
+  }, [ref]);
   if (isLoading) {
     return loadingComponent({
       devCommandRunning: false,
       installCommandRunning: false,
-      serverStarting: true
+      serverStarting: true,
+      iframeLoading: false
     });
   }
   if (!data?.devCommandRunning && !wasLoaded) {
     return loadingComponent({
       devCommandRunning: data?.devCommandRunning ?? false,
       installCommandRunning: data?.installCommandRunning ?? false,
-      serverStarting: false
+      serverStarting: false,
+      iframeLoading: false
     });
   }
   return /* @__PURE__ */ React.createElement(
-    "iframe",
+    "div",
     {
-      ref,
-      sandbox: "allow-scripts allow-same-origin allow-forms",
-      src: data.ephemeralUrl,
       style: {
+        display: "grid",
+        gridTemplateRows: "1fr",
+        gridTemplateColumns: "1fr",
         width: "100%",
-        height: "100%",
-        border: "none"
+        height: "100%"
       }
-    }
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          width: "100%",
+          height: "100%",
+          border: "none",
+          gridColumn: "1 / -1",
+          gridRow: "1 / -1",
+          visibility: iframeLoaded ? "hidden" : "visible"
+        }
+      },
+      loadingComponent({
+        devCommandRunning: data?.devCommandRunning ?? false,
+        installCommandRunning: data?.installCommandRunning ?? false,
+        serverStarting: false,
+        iframeLoading: true
+      })
+    ),
+    /* @__PURE__ */ React.createElement(
+      "iframe",
+      {
+        ref,
+        sandbox: "allow-scripts allow-same-origin allow-forms",
+        src: data.ephemeralUrl,
+        style: {
+          width: "100%",
+          height: "100%",
+          border: "none",
+          gridColumn: "1 / -1",
+          gridRow: "1 / -1"
+        }
+      }
+    )
   );
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "freestyle-sandboxes",
-  "version": "0.0.61",
+  "version": "0.0.63",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",

package/src/index.ts

@@ -852,6 +852,7 @@ export class FreestyleSandboxes {
         (response.data as any).mcpEphemeralUrl || response.data.url + "/mcp",
       // @ts-ignore
       ephemeralUrl: response.data.ephemeralUrl ?? response.data.url,
+      codeServerUrl: response.data.ephemeralUrl + "/__freestyle_code_server/?folder=/template",
     };
   }
 }

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

@@ -3,8 +3,8 @@ import {
   QueryClientProvider,
   useQuery,
 } from "@tanstack/react-query";
-import { RequestDevServerActions } from "./types";
 import React from "react";
+import { RequestDevServerActions } from "./types";
 
 const queryClient = new QueryClient();
 
@@ -14,6 +14,7 @@ export function DefaultLoadingComponent({
   devCommandRunning: boolean;
   installCommandRunning: boolean;
   serverStarting: boolean;
+  iframeLoading: boolean;
 }) {
   let loadingText = "Starting container...";
 
@@ -48,6 +49,7 @@ export function FreestyleDevServer({
     devCommandRunning: boolean;
     installCommandRunning: boolean;
     serverStarting: boolean;
+    iframeLoading: boolean;
   }) => React.ReactNode;
   actions: RequestDevServerActions;
 }) {
@@ -72,6 +74,7 @@ function FreestyleDevServerInner({
     devCommandRunning: boolean;
     installCommandRunning: boolean;
     serverStarting: boolean;
+    iframeLoading: boolean;
   }) => React.ReactNode;
   actions: RequestDevServerActions;
 }) {
@@ -97,6 +100,7 @@ function FreestyleDevServerInner({
   }, [data?.ephemeralUrl]);
 
   const [wasLoaded, setWasLoaded] = React.useState(false);
+  const [iframeLoaded, setIframeLoaded] = React.useState(false);
 
   React.useMemo(() => {
     if (data?.devCommandRunning) {
@@ -104,11 +108,18 @@ function FreestyleDevServerInner({
     }
   }, [isLoading, data?.devCommandRunning]);
 
+  React.useEffect(() => {
+    ref.current?.addEventListener("load", () => {
+      setIframeLoaded(true);
+    });
+  }, [ref]);
+
   if (isLoading) {
     return loadingComponent({
       devCommandRunning: false,
       installCommandRunning: false,
       serverStarting: true,
+      iframeLoading: false,
     });
   }
 
@@ -117,19 +128,51 @@ function FreestyleDevServerInner({
       devCommandRunning: data?.devCommandRunning ?? false,
       installCommandRunning: data?.installCommandRunning ?? false,
       serverStarting: false,
+      iframeLoading: false,
     });
   }
 
   return (
-    <iframe
-      ref={ref}
-      sandbox="allow-scripts allow-same-origin allow-forms"
-      src={data.ephemeralUrl}
+    <div
       style={{
+        display: "grid",
+        gridTemplateRows: "1fr",
+        gridTemplateColumns: "1fr",
         width: "100%",
         height: "100%",
-        border: "none",
       }}
-    />
+    >
+      {
+        <div
+          style={{
+            width: "100%",
+            height: "100%",
+            border: "none",
+            gridColumn: "1 / -1",
+            gridRow: "1 / -1",
+            visibility: iframeLoaded ? "hidden" : "visible",
+          }}
+        >
+          {loadingComponent({
+            devCommandRunning: data?.devCommandRunning ?? false,
+            installCommandRunning: data?.installCommandRunning ?? false,
+            serverStarting: false,
+            iframeLoading: true,
+          })}
+        </div>
+      }
+      <iframe
+        ref={ref}
+        sandbox="allow-scripts allow-same-origin allow-forms"
+        src={data.ephemeralUrl}
+        style={{
+          width: "100%",
+          height: "100%",
+          border: "none",
+          gridColumn: "1 / -1",
+          gridRow: "1 / -1",
+        }}
+      />
+    </div>
   );
 }