freestyle-sandboxes 0.0.65 → 0.0.67

package/dist/index.cjs

@@ -791,7 +791,10 @@ ${response.error.message}`);
       }
     });
     if (response.error) {
-      throw new Error(`Failed to request dev server: ${response.error}`);
+      throw new Error(
+        // @ts-ignore
+        `Failed to request dev server: ${response.error.message}`
+      );
     }
     if (response.data.isNew) {
       const rId = options.repoId || options.repoUrl.split("/").at(-1);

package/dist/index.mjs

@@ -789,7 +789,10 @@ ${response.error.message}`);
       }
     });
     if (response.error) {
-      throw new Error(`Failed to request dev server: ${response.error}`);
+      throw new Error(
+        // @ts-ignore
+        `Failed to request dev server: ${response.error.message}`
+      );
     }
     if (response.data.isNew) {
       const rId = options.repoId || options.repoUrl.split("/").at(-1);

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

@@ -1,30 +1,12 @@
-import React from 'react';
-
-type RequestDevServerActions = {
-    requestDevServer: (args: {
-        repoId: string;
-    }) => Promise<{
-        ephemeralUrl: string;
-        devCommandRunning: boolean;
-        installCommandRunning: boolean;
-    }>;
-};
-
 declare function DefaultLoadingComponent({ installCommandRunning, }: {
     devCommandRunning: boolean;
     installCommandRunning: boolean;
     serverStarting: boolean;
     iframeLoading: boolean;
 }): any;
-declare function FreestyleDevServer({ loadingComponent, actions, repoId, }: {
-    repoId: string;
-    loadingComponent?: (props: {
-        devCommandRunning: boolean;
-        installCommandRunning: boolean;
-        serverStarting: boolean;
-        iframeLoading: boolean;
-    }) => React.ReactNode;
-    actions: RequestDevServerActions;
-}): any;
+interface FreestyleDevServerHandle {
+    refresh: () => void;
+}
+declare const FreestyleDevServer: any;
 
-export { DefaultLoadingComponent, FreestyleDevServer };
+export { DefaultLoadingComponent, FreestyleDevServer, type FreestyleDevServerHandle };

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

@@ -1,30 +1,12 @@
-import React from 'react';
-
-type RequestDevServerActions = {
-    requestDevServer: (args: {
-        repoId: string;
-    }) => Promise<{
-        ephemeralUrl: string;
-        devCommandRunning: boolean;
-        installCommandRunning: boolean;
-    }>;
-};
-
 declare function DefaultLoadingComponent({ installCommandRunning, }: {
     devCommandRunning: boolean;
     installCommandRunning: boolean;
     serverStarting: boolean;
     iframeLoading: boolean;
 }): any;
-declare function FreestyleDevServer({ loadingComponent, actions, repoId, }: {
-    repoId: string;
-    loadingComponent?: (props: {
-        devCommandRunning: boolean;
-        installCommandRunning: boolean;
-        serverStarting: boolean;
-        iframeLoading: boolean;
-    }) => React.ReactNode;
-    actions: RequestDevServerActions;
-}): any;
+interface FreestyleDevServerHandle {
+    refresh: () => void;
+}
+declare const FreestyleDevServer: any;
 
-export { DefaultLoadingComponent, FreestyleDevServer };
+export { DefaultLoadingComponent, FreestyleDevServer, type FreestyleDevServerHandle };

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

@@ -27,33 +27,45 @@ function DefaultLoadingComponent({
     loadingText
   );
 }
-function FreestyleDevServer({
-  loadingComponent,
-  actions,
-  repoId
-}) {
+const FreestyleDevServer = React.forwardRef(({ loadingComponent, actions, repoId }, ref) => {
   return /* @__PURE__ */ React.createElement(reactQuery.QueryClientProvider, { client: queryClient }, /* @__PURE__ */ React.createElement(
     FreestyleDevServerInner,
     {
+      ref,
       loadingComponent: loadingComponent ?? DefaultLoadingComponent,
       repoId,
       actions
     }
   ));
-}
-function FreestyleDevServerInner({
-  repoId,
-  loadingComponent,
-  actions: { requestDevServer }
-}) {
+});
+const FreestyleDevServerInner = React.forwardRef(({ repoId, loadingComponent, actions: { requestDevServer } }, ref) => {
   const { data, isLoading } = reactQuery.useQuery({
     queryKey: ["dev-server", repoId],
     queryFn: async () => await requestDevServer({ repoId }),
     refetchInterval: 1e3
   });
-  const ref = React.useRef(null);
+  const iframeRef = React.useRef(null);
   const [wasLoaded, setWasLoaded] = React.useState(false);
   const [iframeLoaded, setIframeLoaded] = React.useState(false);
+  const refreshIframe = React.useCallback(() => {
+    if (iframeRef.current && data?.ephemeralUrl) {
+      setIframeLoaded(false);
+      const currentSrc = iframeRef.current.src;
+      iframeRef.current.src = "";
+      setTimeout(() => {
+        if (iframeRef.current) {
+          iframeRef.current.src = currentSrc;
+        }
+      }, 50);
+    }
+  }, [data?.ephemeralUrl]);
+  React.useImperativeHandle(
+    ref,
+    () => ({
+      refresh: refreshIframe
+    }),
+    [refreshIframe]
+  );
   React.useMemo(() => {
     if (data?.devCommandRunning) {
       setWasLoaded(true);
@@ -63,11 +75,11 @@ function FreestyleDevServerInner({
     function loadHandle() {
       setIframeLoaded(true);
     }
-    ref.current?.addEventListener("load", loadHandle);
+    iframeRef.current?.addEventListener("load", loadHandle);
     return () => {
-      ref.current?.removeEventListener("load", loadHandle);
+      iframeRef.current?.removeEventListener("load", loadHandle);
     };
-  }, [ref]);
+  }, []);
   if (isLoading) {
     return loadingComponent({
       devCommandRunning: false,
@@ -117,7 +129,7 @@ function FreestyleDevServerInner({
     /* @__PURE__ */ React.createElement(
       "iframe",
       {
-        ref,
+        ref: iframeRef,
         sandbox: "allow-scripts allow-same-origin allow-forms",
         src: data.ephemeralUrl,
         style: {
@@ -130,7 +142,7 @@ function FreestyleDevServerInner({
       }
     )
   );
-}
+});
 
 exports.DefaultLoadingComponent = DefaultLoadingComponent;
 exports.FreestyleDevServer = FreestyleDevServer;

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

@@ -1,30 +1,12 @@
-import React from 'react';
-
-type RequestDevServerActions = {
-    requestDevServer: (args: {
-        repoId: string;
-    }) => Promise<{
-        ephemeralUrl: string;
-        devCommandRunning: boolean;
-        installCommandRunning: boolean;
-    }>;
-};
-
 declare function DefaultLoadingComponent({ installCommandRunning, }: {
     devCommandRunning: boolean;
     installCommandRunning: boolean;
     serverStarting: boolean;
     iframeLoading: boolean;
 }): any;
-declare function FreestyleDevServer({ loadingComponent, actions, repoId, }: {
-    repoId: string;
-    loadingComponent?: (props: {
-        devCommandRunning: boolean;
-        installCommandRunning: boolean;
-        serverStarting: boolean;
-        iframeLoading: boolean;
-    }) => React.ReactNode;
-    actions: RequestDevServerActions;
-}): any;
+interface FreestyleDevServerHandle {
+    refresh: () => void;
+}
+declare const FreestyleDevServer: any;
 
-export { DefaultLoadingComponent, FreestyleDevServer };
+export { DefaultLoadingComponent, FreestyleDevServer, type FreestyleDevServerHandle };

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

@@ -1,30 +1,12 @@
-import React from 'react';
-
-type RequestDevServerActions = {
-    requestDevServer: (args: {
-        repoId: string;
-    }) => Promise<{
-        ephemeralUrl: string;
-        devCommandRunning: boolean;
-        installCommandRunning: boolean;
-    }>;
-};
-
 declare function DefaultLoadingComponent({ installCommandRunning, }: {
     devCommandRunning: boolean;
     installCommandRunning: boolean;
     serverStarting: boolean;
     iframeLoading: boolean;
 }): any;
-declare function FreestyleDevServer({ loadingComponent, actions, repoId, }: {
-    repoId: string;
-    loadingComponent?: (props: {
-        devCommandRunning: boolean;
-        installCommandRunning: boolean;
-        serverStarting: boolean;
-        iframeLoading: boolean;
-    }) => React.ReactNode;
-    actions: RequestDevServerActions;
-}): any;
+interface FreestyleDevServerHandle {
+    refresh: () => void;
+}
+declare const FreestyleDevServer: any;
 
-export { DefaultLoadingComponent, FreestyleDevServer };
+export { DefaultLoadingComponent, FreestyleDevServer, type FreestyleDevServerHandle };

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

@@ -25,33 +25,45 @@ function DefaultLoadingComponent({
     loadingText
   );
 }
-function FreestyleDevServer({
-  loadingComponent,
-  actions,
-  repoId
-}) {
+const FreestyleDevServer = React.forwardRef(({ loadingComponent, actions, repoId }, ref) => {
   return /* @__PURE__ */ React.createElement(QueryClientProvider, { client: queryClient }, /* @__PURE__ */ React.createElement(
     FreestyleDevServerInner,
     {
+      ref,
       loadingComponent: loadingComponent ?? DefaultLoadingComponent,
       repoId,
       actions
     }
   ));
-}
-function FreestyleDevServerInner({
-  repoId,
-  loadingComponent,
-  actions: { requestDevServer }
-}) {
+});
+const FreestyleDevServerInner = React.forwardRef(({ repoId, loadingComponent, actions: { requestDevServer } }, ref) => {
   const { data, isLoading } = useQuery({
     queryKey: ["dev-server", repoId],
     queryFn: async () => await requestDevServer({ repoId }),
     refetchInterval: 1e3
   });
-  const ref = React.useRef(null);
+  const iframeRef = React.useRef(null);
   const [wasLoaded, setWasLoaded] = React.useState(false);
   const [iframeLoaded, setIframeLoaded] = React.useState(false);
+  const refreshIframe = React.useCallback(() => {
+    if (iframeRef.current && data?.ephemeralUrl) {
+      setIframeLoaded(false);
+      const currentSrc = iframeRef.current.src;
+      iframeRef.current.src = "";
+      setTimeout(() => {
+        if (iframeRef.current) {
+          iframeRef.current.src = currentSrc;
+        }
+      }, 50);
+    }
+  }, [data?.ephemeralUrl]);
+  React.useImperativeHandle(
+    ref,
+    () => ({
+      refresh: refreshIframe
+    }),
+    [refreshIframe]
+  );
   React.useMemo(() => {
     if (data?.devCommandRunning) {
       setWasLoaded(true);
@@ -61,11 +73,11 @@ function FreestyleDevServerInner({
     function loadHandle() {
       setIframeLoaded(true);
     }
-    ref.current?.addEventListener("load", loadHandle);
+    iframeRef.current?.addEventListener("load", loadHandle);
     return () => {
-      ref.current?.removeEventListener("load", loadHandle);
+      iframeRef.current?.removeEventListener("load", loadHandle);
     };
-  }, [ref]);
+  }, []);
   if (isLoading) {
     return loadingComponent({
       devCommandRunning: false,
@@ -115,7 +127,7 @@ function FreestyleDevServerInner({
     /* @__PURE__ */ React.createElement(
       "iframe",
       {
-        ref,
+        ref: iframeRef,
         sandbox: "allow-scripts allow-same-origin allow-forms",
         src: data.ephemeralUrl,
         style: {
@@ -128,6 +140,6 @@ function FreestyleDevServerInner({
       }
     )
   );
-}
+});
 
 export { DefaultLoadingComponent, FreestyleDevServer };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "freestyle-sandboxes",
-  "version": "0.0.65",
+  "version": "0.0.67",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
@@ -98,6 +98,7 @@
     "@hey-api/client-fetch": "^0.5.7",
     "@tanstack/react-query": "^5.74.4",
     "expo-router": "^4.0.20",
+    "freestyle-sandboxes": "^0.0.66",
     "glob": "^11.0.1",
     "hono": "^4.7.5",
     "openai": "^4.77.3",

package/src/index.ts

@@ -825,7 +825,10 @@ export class FreestyleSandboxes {
     });
 
     if (response.error) {
-      throw new Error(`Failed to request dev server: ${response.error}`);
+      throw new Error(
+        // @ts-ignore
+        `Failed to request dev server: ${response.error.message}`
+      );
     }
 
     if (response.data.isNew) {

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

@@ -39,54 +39,80 @@ export function DefaultLoadingComponent({
   );
 }
 
-export function FreestyleDevServer({
-  loadingComponent,
-  actions,
-  repoId,
-}: {
-  repoId: string;
-  loadingComponent?: (props: {
-    devCommandRunning: boolean;
-    installCommandRunning: boolean;
-    serverStarting: boolean;
-    iframeLoading: boolean;
-  }) => React.ReactNode;
-  actions: RequestDevServerActions;
-}) {
+export interface FreestyleDevServerHandle {
+  refresh: () => void;
+}
+
+export const FreestyleDevServer = React.forwardRef<
+  FreestyleDevServerHandle,
+  {
+    repoId: string;
+    loadingComponent?: (props: {
+      devCommandRunning: boolean;
+      installCommandRunning: boolean;
+      serverStarting: boolean;
+      iframeLoading: boolean;
+    }) => React.ReactNode;
+    actions: RequestDevServerActions;
+  }
+>(({ loadingComponent, actions, repoId }, ref) => {
   return (
     <QueryClientProvider client={queryClient}>
       <FreestyleDevServerInner
+        ref={ref}
         loadingComponent={loadingComponent ?? DefaultLoadingComponent}
         repoId={repoId}
         actions={actions}
       />
     </QueryClientProvider>
   );
-}
+});
 
-function FreestyleDevServerInner({
-  repoId,
-  loadingComponent,
-  actions: { requestDevServer },
-}: {
-  repoId: string;
-  loadingComponent: (props: {
-    devCommandRunning: boolean;
-    installCommandRunning: boolean;
-    serverStarting: boolean;
-    iframeLoading: boolean;
-  }) => React.ReactNode;
-  actions: RequestDevServerActions;
-}) {
+const FreestyleDevServerInner = React.forwardRef<
+  FreestyleDevServerHandle,
+  {
+    repoId: string;
+    loadingComponent: (props: {
+      devCommandRunning: boolean;
+      installCommandRunning: boolean;
+      serverStarting: boolean;
+      iframeLoading: boolean;
+    }) => React.ReactNode;
+    actions: RequestDevServerActions;
+  }
+>(({ repoId, loadingComponent, actions: { requestDevServer } }, ref) => {
   const { data, isLoading } = useQuery({
     queryKey: ["dev-server", repoId],
     queryFn: async () => await requestDevServer({ repoId: repoId }),
     refetchInterval: 1000,
   });
 
-  const ref = React.useRef<HTMLIFrameElement>(null);
+  const iframeRef = React.useRef<HTMLIFrameElement>(null);
   const [wasLoaded, setWasLoaded] = React.useState(false);
   const [iframeLoaded, setIframeLoaded] = React.useState(false);
+  
+  // Function to refresh the iframe
+  const refreshIframe = React.useCallback(() => {
+    if (iframeRef.current && data?.ephemeralUrl) {
+      setIframeLoaded(false);
+      const currentSrc = iframeRef.current.src;
+      iframeRef.current.src = "";
+      setTimeout(() => {
+        if (iframeRef.current) {
+          iframeRef.current.src = currentSrc;
+        }
+      }, 50);
+    }
+  }, [data?.ephemeralUrl]);
+  
+  // Expose refresh method through ref
+  React.useImperativeHandle(
+    ref,
+    () => ({
+      refresh: refreshIframe,
+    }),
+    [refreshIframe]
+  );
 
   React.useMemo(() => {
     if (data?.devCommandRunning) {
@@ -99,11 +125,11 @@ function FreestyleDevServerInner({
       setIframeLoaded(true);
     }
 
-    ref.current?.addEventListener("load", loadHandle);
+    iframeRef.current?.addEventListener("load", loadHandle);
     return () => {
-      ref.current?.removeEventListener("load", loadHandle);
+      iframeRef.current?.removeEventListener("load", loadHandle);
     };
-  }, [ref]);
+  }, []);
 
   if (isLoading) {
     return loadingComponent({
@@ -153,7 +179,7 @@ function FreestyleDevServerInner({
         </div>
       }
       <iframe
-        ref={ref}
+        ref={iframeRef}
         sandbox="allow-scripts allow-same-origin allow-forms"
         src={data.ephemeralUrl}
         style={{
@@ -166,4 +192,4 @@ function FreestyleDevServerInner({
       />
     </div>
   );
-}
+});