freestyle-sandboxes 0.0.66 → 0.0.67
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.
- package/dist/react/dev-server/index..d.cts +5 -23
- package/dist/react/dev-server/index..d.mts +5 -23
- package/dist/react/dev-server/index.cjs +29 -17
- package/dist/react/dev-server/index.d.cts +5 -23
- package/dist/react/dev-server/index.d.mts +5 -23
- package/dist/react/dev-server/index.mjs +29 -17
- package/package.json +2 -1
- package/src/react/dev-server/index.tsx +61 -35
|
@@ -1,30 +1,12 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
|
|
3
|
-
type RequestDevServerActions = {
|
|
4
|
-
requestDevServer: (args: {
|
|
5
|
-
repoId: string;
|
|
6
|
-
}) => Promise<{
|
|
7
|
-
ephemeralUrl: string;
|
|
8
|
-
devCommandRunning: boolean;
|
|
9
|
-
installCommandRunning: boolean;
|
|
10
|
-
}>;
|
|
11
|
-
};
|
|
12
|
-
|
|
13
1
|
declare function DefaultLoadingComponent({ installCommandRunning, }: {
|
|
14
2
|
devCommandRunning: boolean;
|
|
15
3
|
installCommandRunning: boolean;
|
|
16
4
|
serverStarting: boolean;
|
|
17
5
|
iframeLoading: boolean;
|
|
18
6
|
}): any;
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
installCommandRunning: boolean;
|
|
24
|
-
serverStarting: boolean;
|
|
25
|
-
iframeLoading: boolean;
|
|
26
|
-
}) => React.ReactNode;
|
|
27
|
-
actions: RequestDevServerActions;
|
|
28
|
-
}): any;
|
|
7
|
+
interface FreestyleDevServerHandle {
|
|
8
|
+
refresh: () => void;
|
|
9
|
+
}
|
|
10
|
+
declare const FreestyleDevServer: any;
|
|
29
11
|
|
|
30
|
-
export { DefaultLoadingComponent, FreestyleDevServer };
|
|
12
|
+
export { DefaultLoadingComponent, FreestyleDevServer, type FreestyleDevServerHandle };
|
|
@@ -1,30 +1,12 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
|
|
3
|
-
type RequestDevServerActions = {
|
|
4
|
-
requestDevServer: (args: {
|
|
5
|
-
repoId: string;
|
|
6
|
-
}) => Promise<{
|
|
7
|
-
ephemeralUrl: string;
|
|
8
|
-
devCommandRunning: boolean;
|
|
9
|
-
installCommandRunning: boolean;
|
|
10
|
-
}>;
|
|
11
|
-
};
|
|
12
|
-
|
|
13
1
|
declare function DefaultLoadingComponent({ installCommandRunning, }: {
|
|
14
2
|
devCommandRunning: boolean;
|
|
15
3
|
installCommandRunning: boolean;
|
|
16
4
|
serverStarting: boolean;
|
|
17
5
|
iframeLoading: boolean;
|
|
18
6
|
}): any;
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
installCommandRunning: boolean;
|
|
24
|
-
serverStarting: boolean;
|
|
25
|
-
iframeLoading: boolean;
|
|
26
|
-
}) => React.ReactNode;
|
|
27
|
-
actions: RequestDevServerActions;
|
|
28
|
-
}): any;
|
|
7
|
+
interface FreestyleDevServerHandle {
|
|
8
|
+
refresh: () => void;
|
|
9
|
+
}
|
|
10
|
+
declare const FreestyleDevServer: any;
|
|
29
11
|
|
|
30
|
-
export { DefaultLoadingComponent, FreestyleDevServer };
|
|
12
|
+
export { DefaultLoadingComponent, FreestyleDevServer, type FreestyleDevServerHandle };
|
|
@@ -27,33 +27,45 @@ function DefaultLoadingComponent({
|
|
|
27
27
|
loadingText
|
|
28
28
|
);
|
|
29
29
|
}
|
|
30
|
-
|
|
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
|
-
|
|
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
|
|
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
|
-
|
|
78
|
+
iframeRef.current?.addEventListener("load", loadHandle);
|
|
67
79
|
return () => {
|
|
68
|
-
|
|
80
|
+
iframeRef.current?.removeEventListener("load", loadHandle);
|
|
69
81
|
};
|
|
70
|
-
}, [
|
|
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;
|
|
@@ -1,30 +1,12 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
|
|
3
|
-
type RequestDevServerActions = {
|
|
4
|
-
requestDevServer: (args: {
|
|
5
|
-
repoId: string;
|
|
6
|
-
}) => Promise<{
|
|
7
|
-
ephemeralUrl: string;
|
|
8
|
-
devCommandRunning: boolean;
|
|
9
|
-
installCommandRunning: boolean;
|
|
10
|
-
}>;
|
|
11
|
-
};
|
|
12
|
-
|
|
13
1
|
declare function DefaultLoadingComponent({ installCommandRunning, }: {
|
|
14
2
|
devCommandRunning: boolean;
|
|
15
3
|
installCommandRunning: boolean;
|
|
16
4
|
serverStarting: boolean;
|
|
17
5
|
iframeLoading: boolean;
|
|
18
6
|
}): any;
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
installCommandRunning: boolean;
|
|
24
|
-
serverStarting: boolean;
|
|
25
|
-
iframeLoading: boolean;
|
|
26
|
-
}) => React.ReactNode;
|
|
27
|
-
actions: RequestDevServerActions;
|
|
28
|
-
}): any;
|
|
7
|
+
interface FreestyleDevServerHandle {
|
|
8
|
+
refresh: () => void;
|
|
9
|
+
}
|
|
10
|
+
declare const FreestyleDevServer: any;
|
|
29
11
|
|
|
30
|
-
export { DefaultLoadingComponent, FreestyleDevServer };
|
|
12
|
+
export { DefaultLoadingComponent, FreestyleDevServer, type FreestyleDevServerHandle };
|
|
@@ -1,30 +1,12 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
|
|
3
|
-
type RequestDevServerActions = {
|
|
4
|
-
requestDevServer: (args: {
|
|
5
|
-
repoId: string;
|
|
6
|
-
}) => Promise<{
|
|
7
|
-
ephemeralUrl: string;
|
|
8
|
-
devCommandRunning: boolean;
|
|
9
|
-
installCommandRunning: boolean;
|
|
10
|
-
}>;
|
|
11
|
-
};
|
|
12
|
-
|
|
13
1
|
declare function DefaultLoadingComponent({ installCommandRunning, }: {
|
|
14
2
|
devCommandRunning: boolean;
|
|
15
3
|
installCommandRunning: boolean;
|
|
16
4
|
serverStarting: boolean;
|
|
17
5
|
iframeLoading: boolean;
|
|
18
6
|
}): any;
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
installCommandRunning: boolean;
|
|
24
|
-
serverStarting: boolean;
|
|
25
|
-
iframeLoading: boolean;
|
|
26
|
-
}) => React.ReactNode;
|
|
27
|
-
actions: RequestDevServerActions;
|
|
28
|
-
}): any;
|
|
7
|
+
interface FreestyleDevServerHandle {
|
|
8
|
+
refresh: () => void;
|
|
9
|
+
}
|
|
10
|
+
declare const FreestyleDevServer: any;
|
|
29
11
|
|
|
30
|
-
export { DefaultLoadingComponent, FreestyleDevServer };
|
|
12
|
+
export { DefaultLoadingComponent, FreestyleDevServer, type FreestyleDevServerHandle };
|
|
@@ -25,33 +25,45 @@ function DefaultLoadingComponent({
|
|
|
25
25
|
loadingText
|
|
26
26
|
);
|
|
27
27
|
}
|
|
28
|
-
|
|
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
|
-
|
|
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
|
|
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
|
-
|
|
76
|
+
iframeRef.current?.addEventListener("load", loadHandle);
|
|
65
77
|
return () => {
|
|
66
|
-
|
|
78
|
+
iframeRef.current?.removeEventListener("load", loadHandle);
|
|
67
79
|
};
|
|
68
|
-
}, [
|
|
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.
|
|
3
|
+
"version": "0.0.67",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/index.cjs",
|
|
6
6
|
"module": "./dist/index.mjs",
|
|
@@ -98,6 +98,7 @@
|
|
|
98
98
|
"@hey-api/client-fetch": "^0.5.7",
|
|
99
99
|
"@tanstack/react-query": "^5.74.4",
|
|
100
100
|
"expo-router": "^4.0.20",
|
|
101
|
+
"freestyle-sandboxes": "^0.0.66",
|
|
101
102
|
"glob": "^11.0.1",
|
|
102
103
|
"hono": "^4.7.5",
|
|
103
104
|
"openai": "^4.77.3",
|
|
@@ -39,54 +39,80 @@ export function DefaultLoadingComponent({
|
|
|
39
39
|
);
|
|
40
40
|
}
|
|
41
41
|
|
|
42
|
-
export
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
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
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
}
|
|
79
|
-
|
|
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
|
|
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
|
-
|
|
128
|
+
iframeRef.current?.addEventListener("load", loadHandle);
|
|
103
129
|
return () => {
|
|
104
|
-
|
|
130
|
+
iframeRef.current?.removeEventListener("load", loadHandle);
|
|
105
131
|
};
|
|
106
|
-
}, [
|
|
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={
|
|
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
|
+
});
|