freestyle-sandboxes 0.0.66 → 0.0.68

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/react/dev-server/index..d.cts +7 -4
  2. package/dist/react/dev-server/index..d.mts +7 -4
  3. package/dist/react/dev-server/index.cjs +29 -17
  4. package/dist/react/dev-server/index.d.cts +7 -4
  5. package/dist/react/dev-server/index.d.mts +7 -4
  6. package/dist/react/dev-server/index.mjs +29 -17
  7. package/package.json +3 -1
  8. package/src/react/dev-server/index.tsx +61 -35
  9. package/tsconfig.json +2 -1
package/dist/react/dev-server/index..d.cts CHANGED
@@ -15,8 +15,11 @@ declare function DefaultLoadingComponent({ installCommandRunning, }: {
15
15
  installCommandRunning: boolean;
16
16
  serverStarting: boolean;
17
17
  iframeLoading: boolean;
18
- }): any;
19
- declare function FreestyleDevServer({ loadingComponent, actions, repoId, }: {
18
+ }): React.JSX.Element;
19
+ interface FreestyleDevServerHandle {
20
+ refresh: () => void;
21
+ }
22
+ declare const FreestyleDevServer: React.ForwardRefExoticComponent<{
20
23
  repoId: string;
21
24
  loadingComponent?: (props: {
22
25
  devCommandRunning: boolean;
@@ -25,6 +28,6 @@ declare function FreestyleDevServer({ loadingComponent, actions, repoId, }: {
25
28
  iframeLoading: boolean;
26
29
  }) => React.ReactNode;
27
30
  actions: RequestDevServerActions;
28
- }): any;
31
+ } & React.RefAttributes<FreestyleDevServerHandle>>;
29
32
 
30
- export { DefaultLoadingComponent, FreestyleDevServer };
33
+ export { DefaultLoadingComponent, FreestyleDevServer, type FreestyleDevServerHandle };
package/dist/react/dev-server/index..d.mts CHANGED
@@ -15,8 +15,11 @@ declare function DefaultLoadingComponent({ installCommandRunning, }: {
15
15
  installCommandRunning: boolean;
16
16
  serverStarting: boolean;
17
17
  iframeLoading: boolean;
18
- }): any;
19
- declare function FreestyleDevServer({ loadingComponent, actions, repoId, }: {
18
+ }): React.JSX.Element;
19
+ interface FreestyleDevServerHandle {
20
+ refresh: () => void;
21
+ }
22
+ declare const FreestyleDevServer: React.ForwardRefExoticComponent<{
20
23
  repoId: string;
21
24
  loadingComponent?: (props: {
22
25
  devCommandRunning: boolean;
@@ -25,6 +28,6 @@ declare function FreestyleDevServer({ loadingComponent, actions, repoId, }: {
25
28
  iframeLoading: boolean;
26
29
  }) => React.ReactNode;
27
30
  actions: RequestDevServerActions;
28
- }): any;
31
+ } & React.RefAttributes<FreestyleDevServerHandle>>;
29
32
 
30
- export { DefaultLoadingComponent, FreestyleDevServer };
33
+ export { DefaultLoadingComponent, FreestyleDevServer, type FreestyleDevServerHandle };
package/dist/react/dev-server/index.cjs CHANGED
@@ -27,33 +27,45 @@ function DefaultLoadingComponent({
27
27
  loadingText
28
28
  );
29
29
  }
30
- function FreestyleDevServer({
31
- loadingComponent,
32
- actions,
33
- repoId
34
- }) {
30
+ const FreestyleDevServer = React.forwardRef(({ loadingComponent, actions, repoId }, ref) => {
35
31
  return /* @__PURE__ */ React.createElement(reactQuery.QueryClientProvider, { client: queryClient }, /* @__PURE__ */ React.createElement(
36
32
  FreestyleDevServerInner,
37
33
  {
34
+ ref,
38
35
  loadingComponent: loadingComponent ?? DefaultLoadingComponent,
39
36
  repoId,
40
37
  actions
41
38
  }
42
39
  ));
43
- }
44
- function FreestyleDevServerInner({
45
- repoId,
46
- loadingComponent,
47
- actions: { requestDevServer }
48
- }) {
40
+ });
41
+ const FreestyleDevServerInner = React.forwardRef(({ repoId, loadingComponent, actions: { requestDevServer } }, ref) => {
49
42
  const { data, isLoading } = reactQuery.useQuery({
50
43
  queryKey: ["dev-server", repoId],
51
44
  queryFn: async () => await requestDevServer({ repoId }),
52
45
  refetchInterval: 1e3
53
46
  });
54
- const ref = React.useRef(null);
47
+ const iframeRef = React.useRef(null);
55
48
  const [wasLoaded, setWasLoaded] = React.useState(false);
56
49
  const [iframeLoaded, setIframeLoaded] = React.useState(false);
50
+ const refreshIframe = React.useCallback(() => {
51
+ if (iframeRef.current && data?.ephemeralUrl) {
52
+ setIframeLoaded(false);
53
+ const currentSrc = iframeRef.current.src;
54
+ iframeRef.current.src = "";
55
+ setTimeout(() => {
56
+ if (iframeRef.current) {
57
+ iframeRef.current.src = currentSrc;
58
+ }
59
+ }, 50);
60
+ }
61
+ }, [data?.ephemeralUrl]);
62
+ React.useImperativeHandle(
63
+ ref,
64
+ () => ({
65
+ refresh: refreshIframe
66
+ }),
67
+ [refreshIframe]
68
+ );
57
69
  React.useMemo(() => {
58
70
  if (data?.devCommandRunning) {
59
71
  setWasLoaded(true);
@@ -63,11 +75,11 @@ function FreestyleDevServerInner({
63
75
  function loadHandle() {
64
76
  setIframeLoaded(true);
65
77
  }
66
- ref.current?.addEventListener("load", loadHandle);
78
+ iframeRef.current?.addEventListener("load", loadHandle);
67
79
  return () => {
68
- ref.current?.removeEventListener("load", loadHandle);
80
+ iframeRef.current?.removeEventListener("load", loadHandle);
69
81
  };
70
- }, [ref]);
82
+ }, []);
71
83
  if (isLoading) {
72
84
  return loadingComponent({
73
85
  devCommandRunning: false,
@@ -117,7 +129,7 @@ function FreestyleDevServerInner({
117
129
  /* @__PURE__ */ React.createElement(
118
130
  "iframe",
119
131
  {
120
- ref,
132
+ ref: iframeRef,
121
133
  sandbox: "allow-scripts allow-same-origin allow-forms",
122
134
  src: data.ephemeralUrl,
123
135
  style: {
@@ -130,7 +142,7 @@ function FreestyleDevServerInner({
130
142
  }
131
143
  )
132
144
  );
133
- }
145
+ });
134
146
 
135
147
  exports.DefaultLoadingComponent = DefaultLoadingComponent;
136
148
  exports.FreestyleDevServer = FreestyleDevServer;
package/dist/react/dev-server/index.d.cts CHANGED
@@ -15,8 +15,11 @@ declare function DefaultLoadingComponent({ installCommandRunning, }: {
15
15
  installCommandRunning: boolean;
16
16
  serverStarting: boolean;
17
17
  iframeLoading: boolean;
18
- }): any;
19
- declare function FreestyleDevServer({ loadingComponent, actions, repoId, }: {
18
+ }): React.JSX.Element;
19
+ interface FreestyleDevServerHandle {
20
+ refresh: () => void;
21
+ }
22
+ declare const FreestyleDevServer: React.ForwardRefExoticComponent<{
20
23
  repoId: string;
21
24
  loadingComponent?: (props: {
22
25
  devCommandRunning: boolean;
@@ -25,6 +28,6 @@ declare function FreestyleDevServer({ loadingComponent, actions, repoId, }: {
25
28
  iframeLoading: boolean;
26
29
  }) => React.ReactNode;
27
30
  actions: RequestDevServerActions;
28
- }): any;
31
+ } & React.RefAttributes<FreestyleDevServerHandle>>;
29
32
 
30
- export { DefaultLoadingComponent, FreestyleDevServer };
33
+ export { DefaultLoadingComponent, FreestyleDevServer, type FreestyleDevServerHandle };
package/dist/react/dev-server/index.d.mts CHANGED
@@ -15,8 +15,11 @@ declare function DefaultLoadingComponent({ installCommandRunning, }: {
15
15
  installCommandRunning: boolean;
16
16
  serverStarting: boolean;
17
17
  iframeLoading: boolean;
18
- }): any;
19
- declare function FreestyleDevServer({ loadingComponent, actions, repoId, }: {
18
+ }): React.JSX.Element;
19
+ interface FreestyleDevServerHandle {
20
+ refresh: () => void;
21
+ }
22
+ declare const FreestyleDevServer: React.ForwardRefExoticComponent<{
20
23
  repoId: string;
21
24
  loadingComponent?: (props: {
22
25
  devCommandRunning: boolean;
@@ -25,6 +28,6 @@ declare function FreestyleDevServer({ loadingComponent, actions, repoId, }: {
25
28
  iframeLoading: boolean;
26
29
  }) => React.ReactNode;
27
30
  actions: RequestDevServerActions;
28
- }): any;
31
+ } & React.RefAttributes<FreestyleDevServerHandle>>;
29
32
 
30
- export { DefaultLoadingComponent, FreestyleDevServer };
33
+ export { DefaultLoadingComponent, FreestyleDevServer, type FreestyleDevServerHandle };
package/dist/react/dev-server/index.mjs CHANGED
@@ -25,33 +25,45 @@ function DefaultLoadingComponent({
25
25
  loadingText
26
26
  );
27
27
  }
28
- function FreestyleDevServer({
29
- loadingComponent,
30
- actions,
31
- repoId
32
- }) {
28
+ const FreestyleDevServer = React.forwardRef(({ loadingComponent, actions, repoId }, ref) => {
33
29
  return /* @__PURE__ */ React.createElement(QueryClientProvider, { client: queryClient }, /* @__PURE__ */ React.createElement(
34
30
  FreestyleDevServerInner,
35
31
  {
32
+ ref,
36
33
  loadingComponent: loadingComponent ?? DefaultLoadingComponent,
37
34
  repoId,
38
35
  actions
39
36
  }
40
37
  ));
41
- }
42
- function FreestyleDevServerInner({
43
- repoId,
44
- loadingComponent,
45
- actions: { requestDevServer }
46
- }) {
38
+ });
39
+ const FreestyleDevServerInner = React.forwardRef(({ repoId, loadingComponent, actions: { requestDevServer } }, ref) => {
47
40
  const { data, isLoading } = useQuery({
48
41
  queryKey: ["dev-server", repoId],
49
42
  queryFn: async () => await requestDevServer({ repoId }),
50
43
  refetchInterval: 1e3
51
44
  });
52
- const ref = React.useRef(null);
45
+ const iframeRef = React.useRef(null);
53
46
  const [wasLoaded, setWasLoaded] = React.useState(false);
54
47
  const [iframeLoaded, setIframeLoaded] = React.useState(false);
48
+ const refreshIframe = React.useCallback(() => {
49
+ if (iframeRef.current && data?.ephemeralUrl) {
50
+ setIframeLoaded(false);
51
+ const currentSrc = iframeRef.current.src;
52
+ iframeRef.current.src = "";
53
+ setTimeout(() => {
54
+ if (iframeRef.current) {
55
+ iframeRef.current.src = currentSrc;
56
+ }
57
+ }, 50);
58
+ }
59
+ }, [data?.ephemeralUrl]);
60
+ React.useImperativeHandle(
61
+ ref,
62
+ () => ({
63
+ refresh: refreshIframe
64
+ }),
65
+ [refreshIframe]
66
+ );
55
67
  React.useMemo(() => {
56
68
  if (data?.devCommandRunning) {
57
69
  setWasLoaded(true);
@@ -61,11 +73,11 @@ function FreestyleDevServerInner({
61
73
  function loadHandle() {
62
74
  setIframeLoaded(true);
63
75
  }
64
- ref.current?.addEventListener("load", loadHandle);
76
+ iframeRef.current?.addEventListener("load", loadHandle);
65
77
  return () => {
66
- ref.current?.removeEventListener("load", loadHandle);
78
+ iframeRef.current?.removeEventListener("load", loadHandle);
67
79
  };
68
- }, [ref]);
80
+ }, []);
69
81
  if (isLoading) {
70
82
  return loadingComponent({
71
83
  devCommandRunning: false,
@@ -115,7 +127,7 @@ function FreestyleDevServerInner({
115
127
  /* @__PURE__ */ React.createElement(
116
128
  "iframe",
117
129
  {
118
- ref,
130
+ ref: iframeRef,
119
131
  sandbox: "allow-scripts allow-same-origin allow-forms",
120
132
  src: data.ephemeralUrl,
121
133
  style: {
@@ -128,6 +140,6 @@ function FreestyleDevServerInner({
128
140
  }
129
141
  )
130
142
  );
131
- }
143
+ });
132
144
 
133
145
  export { DefaultLoadingComponent, FreestyleDevServer };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "freestyle-sandboxes",
3
- "version": "0.0.66",
3
+ "version": "0.0.68",
4
4
  "type": "module",
5
5
  "main": "./dist/index.cjs",
6
6
  "module": "./dist/index.mjs",
@@ -97,7 +97,9 @@
97
97
  "dependencies": {
98
98
  "@hey-api/client-fetch": "^0.5.7",
99
99
  "@tanstack/react-query": "^5.74.4",
100
+ "@types/react": "*",
100
101
  "expo-router": "^4.0.20",
102
+ "freestyle-sandboxes": "^0.0.66",
101
103
  "glob": "^11.0.1",
102
104
  "hono": "^4.7.5",
103
105
  "openai": "^4.77.3",
package/src/react/dev-server/index.tsx CHANGED
@@ -39,54 +39,80 @@ export function DefaultLoadingComponent({
39
39
  );
40
40
  }
41
41
 
42
- export function FreestyleDevServer({
43
- loadingComponent,
44
- actions,
45
- repoId,
46
- }: {
47
- repoId: string;
48
- loadingComponent?: (props: {
49
- devCommandRunning: boolean;
50
- installCommandRunning: boolean;
51
- serverStarting: boolean;
52
- iframeLoading: boolean;
53
- }) => React.ReactNode;
54
- actions: RequestDevServerActions;
55
- }) {
42
+ export interface FreestyleDevServerHandle {
43
+ refresh: () => void;
44
+ }
45
+
46
+ export const FreestyleDevServer = React.forwardRef<
47
+ FreestyleDevServerHandle,
48
+ {
49
+ repoId: string;
50
+ loadingComponent?: (props: {
51
+ devCommandRunning: boolean;
52
+ installCommandRunning: boolean;
53
+ serverStarting: boolean;
54
+ iframeLoading: boolean;
55
+ }) => React.ReactNode;
56
+ actions: RequestDevServerActions;
57
+ }
58
+ >(({ loadingComponent, actions, repoId }, ref) => {
56
59
  return (
57
60
  <QueryClientProvider client={queryClient}>
58
61
  <FreestyleDevServerInner
62
+ ref={ref}
59
63
  loadingComponent={loadingComponent ?? DefaultLoadingComponent}
60
64
  repoId={repoId}
61
65
  actions={actions}
62
66
  />
63
67
  </QueryClientProvider>
64
68
  );
65
- }
69
+ });
66
70
 
67
- function FreestyleDevServerInner({
68
- repoId,
69
- loadingComponent,
70
- actions: { requestDevServer },
71
- }: {
72
- repoId: string;
73
- loadingComponent: (props: {
74
- devCommandRunning: boolean;
75
- installCommandRunning: boolean;
76
- serverStarting: boolean;
77
- iframeLoading: boolean;
78
- }) => React.ReactNode;
79
- actions: RequestDevServerActions;
80
- }) {
71
+ const FreestyleDevServerInner = React.forwardRef<
72
+ FreestyleDevServerHandle,
73
+ {
74
+ repoId: string;
75
+ loadingComponent: (props: {
76
+ devCommandRunning: boolean;
77
+ installCommandRunning: boolean;
78
+ serverStarting: boolean;
79
+ iframeLoading: boolean;
80
+ }) => React.ReactNode;
81
+ actions: RequestDevServerActions;
82
+ }
83
+ >(({ repoId, loadingComponent, actions: { requestDevServer } }, ref) => {
81
84
  const { data, isLoading } = useQuery({
82
85
  queryKey: ["dev-server", repoId],
83
86
  queryFn: async () => await requestDevServer({ repoId: repoId }),
84
87
  refetchInterval: 1000,
85
88
  });
86
89
 
87
- const ref = React.useRef<HTMLIFrameElement>(null);
90
+ const iframeRef = React.useRef<HTMLIFrameElement>(null);
88
91
  const [wasLoaded, setWasLoaded] = React.useState(false);
89
92
  const [iframeLoaded, setIframeLoaded] = React.useState(false);
93
+
94
+ // Function to refresh the iframe
95
+ const refreshIframe = React.useCallback(() => {
96
+ if (iframeRef.current && data?.ephemeralUrl) {
97
+ setIframeLoaded(false);
98
+ const currentSrc = iframeRef.current.src;
99
+ iframeRef.current.src = "";
100
+ setTimeout(() => {
101
+ if (iframeRef.current) {
102
+ iframeRef.current.src = currentSrc;
103
+ }
104
+ }, 50);
105
+ }
106
+ }, [data?.ephemeralUrl]);
107
+
108
+ // Expose refresh method through ref
109
+ React.useImperativeHandle(
110
+ ref,
111
+ () => ({
112
+ refresh: refreshIframe,
113
+ }),
114
+ [refreshIframe]
115
+ );
90
116
 
91
117
  React.useMemo(() => {
92
118
  if (data?.devCommandRunning) {
@@ -99,11 +125,11 @@ function FreestyleDevServerInner({
99
125
  setIframeLoaded(true);
100
126
  }
101
127
 
102
- ref.current?.addEventListener("load", loadHandle);
128
+ iframeRef.current?.addEventListener("load", loadHandle);
103
129
  return () => {
104
- ref.current?.removeEventListener("load", loadHandle);
130
+ iframeRef.current?.removeEventListener("load", loadHandle);
105
131
  };
106
- }, [ref]);
132
+ }, []);
107
133
 
108
134
  if (isLoading) {
109
135
  return loadingComponent({
@@ -153,7 +179,7 @@ function FreestyleDevServerInner({
153
179
  </div>
154
180
  }
155
181
  <iframe
156
- ref={ref}
182
+ ref={iframeRef}
157
183
  sandbox="allow-scripts allow-same-origin allow-forms"
158
184
  src={data.ephemeralUrl}
159
185
  style={{
@@ -166,4 +192,4 @@ function FreestyleDevServerInner({
166
192
  />
167
193
  </div>
168
194
  );
169
- }
195
+ });
package/tsconfig.json CHANGED
@@ -2,6 +2,7 @@
2
2
  "compilerOptions": {
3
3
  "allowImportingTsExtensions": true,
4
4
  "jsx": "react",
5
- "lib": ["ESNext", "DOM"]
5
+ "lib": ["ESNext", "DOM"],
6
+ "esModuleInterop": true
6
7
  }
7
8
  }