freestyle-sandboxes 0.0.60 → 0.0.62

package/.env

@@ -0,0 +1 @@
+FREESTYLE_API_KEY=RoZ4n8eAY4ChcgdKV89LjY-Fhvp6Rzqx27bZ4BjHaVf7qpEw7vA7MekK84DdGgZYkR2

package/dist/inde.d.cts

@@ -180,13 +180,14 @@ declare class FreestyleSandboxes {
      * ephemeral so you should call this function every time you need a url. Do
      * not store the url in your database!
      */
-    requestDevServer({ repoUrl, repoId, }: {
+    requestDevServer({ repoUrl, repoId, baseId, }: {
         /**
          * @deprecated
          */
         repoUrl?: string;
         repoId?: string;
         repo?: string;
+        baseId?: string;
     }): Promise<{
         mcpEphemeralUrl: any;
         ephemeralUrl: string;

package/dist/inde.d.mts

@@ -180,13 +180,14 @@ declare class FreestyleSandboxes {
      * ephemeral so you should call this function every time you need a url. Do
      * not store the url in your database!
      */
-    requestDevServer({ repoUrl, repoId, }: {
+    requestDevServer({ repoUrl, repoId, baseId, }: {
         /**
          * @deprecated
          */
         repoUrl?: string;
         repoId?: string;
         repo?: string;
+        baseId?: string;
     }): Promise<{
         mcpEphemeralUrl: any;
         ephemeralUrl: string;

package/dist/index.cjs

@@ -779,7 +779,8 @@ ${response.error.message}`);
    */
   async requestDevServer({
     repoUrl,
-    repoId
+    repoId,
+    baseId
   }) {
     function formatHook(serverUrl, repoUrl2) {
       const hook = serverUrl + "/__freestyle_dev_server/update/git?repo=" + encodeURIComponent(repoUrl2);
@@ -790,7 +791,8 @@ ${response.error.message}`);
       body: {
         // @ts-ignore
         repo: repoUrl,
-        repoId
+        repoId,
+        baseId
       }
     });
     if (response.data.isNew) {

package/dist/index.d.cts

@@ -180,13 +180,14 @@ declare class FreestyleSandboxes {
      * ephemeral so you should call this function every time you need a url. Do
      * not store the url in your database!
      */
-    requestDevServer({ repoUrl, repoId, }: {
+    requestDevServer({ repoUrl, repoId, baseId, }: {
         /**
          * @deprecated
          */
         repoUrl?: string;
         repoId?: string;
         repo?: string;
+        baseId?: string;
     }): Promise<{
         mcpEphemeralUrl: any;
         ephemeralUrl: string;

package/dist/index.d.mts

@@ -180,13 +180,14 @@ declare class FreestyleSandboxes {
      * ephemeral so you should call this function every time you need a url. Do
      * not store the url in your database!
      */
-    requestDevServer({ repoUrl, repoId, }: {
+    requestDevServer({ repoUrl, repoId, baseId, }: {
         /**
          * @deprecated
          */
         repoUrl?: string;
         repoId?: string;
         repo?: string;
+        baseId?: string;
     }): Promise<{
         mcpEphemeralUrl: any;
         ephemeralUrl: string;

package/dist/index.mjs

@@ -777,7 +777,8 @@ ${response.error.message}`);
    */
   async requestDevServer({
     repoUrl,
-    repoId
+    repoId,
+    baseId
   }) {
     function formatHook(serverUrl, repoUrl2) {
       const hook = serverUrl + "/__freestyle_dev_server/update/git?repo=" + encodeURIComponent(repoUrl2);
@@ -788,7 +789,8 @@ ${response.error.message}`);
       body: {
         // @ts-ignore
         repo: repoUrl,
-        repoId
+        repoId,
+        baseId
       }
     });
     if (response.data.isNew) {

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/dist/{types.gen-DyY7Deri.d.ts → types.gen-BoJEFWW-.d.ts}

@@ -10,9 +10,6 @@ type FreestyleCloudstateDeployConfiguration = {
         [key: string]: (string);
     };
 };
-type FreestyleCloudstateDeployErrorResponse = {
-    message: string;
-};
 type FreestyleCloudstateDeployRequest = {
     classes: string;
     config?: FreestyleCloudstateDeployConfiguration;
@@ -50,36 +47,12 @@ type FreestyleDeployWebConfiguration = {
         [key: string]: (string);
     } | null;
 };
-type FreestyleDeployWebErrorResponse = {
-    message: string;
-};
-type FreestyleDeployWebPayload = {
-    /**
-     * The files to deploy, a map of file paths to file contents, e.g. { \"index.js\": {\"content\": \"your main\", \"encoding\": \"utf-8\"}, \"file2.js\": {\"content\": \"your helper\" } }
-     *
-     * **Do not include node modules in this bundle, they will not work**. Instead, includes a package-lock.json, bun.lockb, pnpm-lock.yaml, or yarn.lock, the node modules for the project will be installed from that lock file, or use the node_modules field in the configuration to specify the node modules to install.
-     */
-    files: {
-        [key: string]: FreestyleFile;
-    };
-    config?: FreestyleDeployWebConfiguration;
-};
 type FreestyleDeployWebSuccessResponse = {
     projectId: string;
 };
-type FreestyleExecureScriptResultError = {
-    error: string;
-};
 type FreestyleExecureScriptResultSuccess = {
     result: unknown;
 };
-type FreestyleExecuteScriptParams = {
-    /**
-     * The JavaScript or TypeScript script to execute
-     */
-    script: string;
-    config?: FreestyleExecuteScriptParamsConfiguration;
-};
 type FreestyleExecuteScriptParamsConfiguration = {
     /**
      * The environment variables to set for the script
@@ -102,37 +75,10 @@ type FreestyleExecuteScriptParamsConfiguration = {
      */
     timeout?: (string) | null;
 };
-type FreestyleFile = {
-    /**
-     * The content of the file
-     */
-    content: string;
-    /**
-     * The encoding of the file. Either **utf-8** or **base64**
-     */
-    encoding?: string;
-};
 type FreestyleLogResponseObject = {
     message: string;
 };
-type HandleDeployCloudstateData = {
-    body: FreestyleCloudstateDeployRequest;
-};
-type HandleDeployCloudstateResponse = (FreestyleCloudstateDeploySuccessResponse);
-type HandleDeployCloudstateError = (FreestyleCloudstateDeployErrorResponse);
 type HandleBackupCloudstateResponse = (Array<(number)>);
-type HandleBackupCloudstateError = (unknown);
-type HandleExecuteScriptData = {
-    body: FreestyleExecuteScriptParams;
-};
-type HandleExecuteScriptResponse = (FreestyleExecureScriptResultSuccess);
-type HandleExecuteScriptError = (FreestyleExecureScriptResultError);
-type HandleDeployWebData = {
-    body: FreestyleDeployWebPayload;
-};
-type HandleDeployWebResponse = (FreestyleDeployWebSuccessResponse);
-type HandleDeployWebError = (FreestyleDeployWebErrorResponse);
 type HandleGetLogsResponse = (Array<FreestyleLogResponseObject>);
-type HandleGetLogsError = unknown;
 
-export type { FreestyleExecuteScriptParamsConfiguration as F, HandleBackupCloudstateResponse as H, FreestyleExecureScriptResultSuccess as a, FreestyleDeployWebConfiguration as b, FreestyleDeployWebSuccessResponse as c, FreestyleCloudstateDeployRequest as d, FreestyleCloudstateDeploySuccessResponse as e, HandleGetLogsResponse as f, FreestyleCloudstateDeployConfiguration as g, FreestyleCloudstateDeployErrorResponse as h, FreestyleDeployWebErrorResponse as i, FreestyleDeployWebPayload as j, FreestyleExecureScriptResultError as k, FreestyleExecuteScriptParams as l, FreestyleFile as m, FreestyleLogResponseObject as n, HandleDeployCloudstateData as o, HandleDeployCloudstateResponse as p, HandleDeployCloudstateError as q, HandleBackupCloudstateError as r, HandleExecuteScriptData as s, HandleExecuteScriptResponse as t, HandleExecuteScriptError as u, HandleDeployWebData as v, HandleDeployWebResponse as w, HandleDeployWebError as x, HandleGetLogsError as y };
+export type { FreestyleExecuteScriptParamsConfiguration as F, HandleBackupCloudstateResponse as H, FreestyleExecureScriptResultSuccess as a, FreestyleDeployWebConfiguration as b, FreestyleDeployWebSuccessResponse as c, FreestyleCloudstateDeployRequest as d, FreestyleCloudstateDeploySuccessResponse as e, HandleGetLogsResponse as f };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "freestyle-sandboxes",
-  "version": "0.0.60",
+  "version": "0.0.62",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
@@ -106,4 +106,4 @@
     "zod": "^3.24.1"
   },
   "packageManager": "pnpm@9.11.0+sha512.0a203ffaed5a3f63242cd064c8fb5892366c103e328079318f78062f24ea8c9d50bc6a47aa3567cabefd824d170e78fa2745ed1f16b132e16436146b7688f19b"
-}
+}

package/src/index.ts

@@ -800,12 +800,14 @@ export class FreestyleSandboxes {
   async requestDevServer({
     repoUrl,
     repoId,
+    baseId,
   }: {
     /**
      * @deprecated
      */
     repoUrl?: string,
-    repoId?: string, repo?: string
+    repoId?: string, repo?: string,
+    baseId?: string,
   }) {
     function formatHook(serverUrl: string, repoUrl: string) {
       const hook =
@@ -821,6 +823,7 @@ export class FreestyleSandboxes {
         // @ts-ignore
         repo: repoUrl,
         repoId: repoId,
+        baseId: baseId
       },
     });
 

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>
   );
 }