appflare 0.2.9 → 0.2.10
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/cli/templates/dashboard/builders/functions/index.ts +0 -5
- package/cli/templates/dashboard/builders/functions/render-page/index.ts +1 -1
- package/cli/templates/dashboard/builders/functions/render-page/request-panel.ts +153 -49
- package/cli/templates/dashboard/builders/functions/render-page/result-panel.ts +74 -8
- package/cli/templates/dashboard/builders/functions/render-page/scripts.ts +546 -9
- package/cli/utils/handler-discovery.ts +100 -0
- package/package.json +1 -1
- package/cli/templates/dashboard/builders/functions/execute-handler.ts +0 -124
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { DiscoveredHandlerOperation } from "../../../../utils/handler-discovery";
|
|
2
2
|
import { buildFunctionPage } from "./render-page";
|
|
3
|
-
import { buildExecutionLogic } from "./execute-handler";
|
|
4
3
|
|
|
5
4
|
export function buildFunctionRoutes(
|
|
6
5
|
handlers: DiscoveredHandlerOperation[],
|
|
@@ -11,10 +10,6 @@ export function buildFunctionRoutes(
|
|
|
11
10
|
return `
|
|
12
11
|
adminApp.get('/functions${h.routePath}', (c) => {
|
|
13
12
|
${buildFunctionPage(h)}
|
|
14
|
-
});
|
|
15
|
-
|
|
16
|
-
adminApp.post('/functions/execute${h.routePath}', async (c) => {
|
|
17
|
-
${buildExecutionLogic(h)}
|
|
18
13
|
});`;
|
|
19
14
|
});
|
|
20
15
|
|
|
@@ -1,65 +1,169 @@
|
|
|
1
1
|
import { DiscoveredHandlerOperation } from "../../../../../utils/handler-discovery";
|
|
2
2
|
|
|
3
|
+
function renderArgInputType(type: string): string {
|
|
4
|
+
if (type === "boolean") return "checkbox";
|
|
5
|
+
if (type === "number") return "number";
|
|
6
|
+
return "text";
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
function renderArgRows(h: DiscoveredHandlerOperation): string {
|
|
10
|
+
const fields = h.args ?? [];
|
|
11
|
+
if (fields.length === 0) {
|
|
12
|
+
return `
|
|
13
|
+
<div class="text-[11px] opacity-30 italic py-2">No arguments defined for this ${h.kind}.</div>
|
|
14
|
+
`;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
return fields
|
|
18
|
+
.map((field) => {
|
|
19
|
+
const inputType = renderArgInputType(field.type);
|
|
20
|
+
const isCheckbox = inputType === "checkbox";
|
|
21
|
+
const label = `${field.name}${field.optional ? "" : " *"}`;
|
|
22
|
+
const badge =
|
|
23
|
+
field.type !== "unknown"
|
|
24
|
+
? `<span class="badge badge-xs badge-ghost font-mono opacity-40 ml-1">${field.type}</span>`
|
|
25
|
+
: "";
|
|
26
|
+
|
|
27
|
+
if (isCheckbox) {
|
|
28
|
+
return `
|
|
29
|
+
<div class="flex items-center gap-3 py-1">
|
|
30
|
+
<input
|
|
31
|
+
type="checkbox"
|
|
32
|
+
data-arg-key="${field.name}"
|
|
33
|
+
data-arg-type="boolean"
|
|
34
|
+
class="checkbox checkbox-sm checkbox-primary"
|
|
35
|
+
${field.defaultValue === "true" ? "checked" : ""}
|
|
36
|
+
/>
|
|
37
|
+
<span class="text-sm font-mono opacity-70">${field.name}${badge}</span>
|
|
38
|
+
${field.optional ? '<span class="text-[10px] opacity-30 italic ml-auto">optional</span>' : ""}
|
|
39
|
+
</div>
|
|
40
|
+
`;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
return `
|
|
44
|
+
<div class="form-control">
|
|
45
|
+
<label class="label py-0.5">
|
|
46
|
+
<span class="label-text text-[11px] font-mono font-semibold">${label}${badge}</span>
|
|
47
|
+
${field.optional ? '<span class="label-text-alt text-[10px] opacity-30 italic">optional</span>' : ""}
|
|
48
|
+
</label>
|
|
49
|
+
<input
|
|
50
|
+
type="${inputType}"
|
|
51
|
+
placeholder="${field.defaultValue ?? ""}"
|
|
52
|
+
data-arg-key="${field.name}"
|
|
53
|
+
data-arg-type="${field.type}"
|
|
54
|
+
value="${field.defaultValue ?? ""}"
|
|
55
|
+
class="input input-sm input-bordered font-mono w-full bg-base-200/30 focus:bg-base-100 focus:border-primary transition-all rounded-xl border-base-200"
|
|
56
|
+
${!field.optional ? "required" : ""}
|
|
57
|
+
/>
|
|
58
|
+
</div>
|
|
59
|
+
`;
|
|
60
|
+
})
|
|
61
|
+
.join("\n");
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
function renderArgumentsSection(h: DiscoveredHandlerOperation): string {
|
|
65
|
+
return `
|
|
66
|
+
<div class="space-y-4">
|
|
67
|
+
<div class="flex items-center justify-between">
|
|
68
|
+
<div class="flex flex-col">
|
|
69
|
+
<span class="text-[11px] font-bold uppercase tracking-wider opacity-40">Arguments</span>
|
|
70
|
+
<span class="text-[10px] font-mono opacity-30">${h.kind}</span>
|
|
71
|
+
</div>
|
|
72
|
+
<label class="flex items-center gap-2 cursor-pointer select-none group" title="Enable realtime updates via WebSocket">
|
|
73
|
+
<span class="text-[10px] font-bold uppercase tracking-wider opacity-40 group-hover:opacity-70 transition-opacity">Realtime</span>
|
|
74
|
+
<input type="checkbox" id="realtime-toggle" class="toggle toggle-xs toggle-success" onchange="toggleRealtime(this.checked)" />
|
|
75
|
+
</label>
|
|
76
|
+
</div>
|
|
77
|
+
<div id="args-rows" class="flex flex-col gap-3">
|
|
78
|
+
${renderArgRows(h)}
|
|
79
|
+
</div>
|
|
80
|
+
<p class="text-[11px] opacity-30 mt-2 italic">Values are sent as ${h.kind === "query" ? "query string params" : "JSON request body"}.</p>
|
|
81
|
+
</div>
|
|
82
|
+
`;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
function renderBearerTokenSection(): string {
|
|
86
|
+
return `
|
|
87
|
+
<div class="space-y-4">
|
|
88
|
+
<label class="text-[11px] font-bold uppercase tracking-wider opacity-40 block">Bearer Token <span class="font-normal normal-case">(optional)</span></label>
|
|
89
|
+
<div class="relative group">
|
|
90
|
+
<input
|
|
91
|
+
type="password"
|
|
92
|
+
name="token"
|
|
93
|
+
id="bearer-token-input"
|
|
94
|
+
class="input input-sm input-bordered font-mono text-sm w-full bg-base-200/30 focus:bg-base-100 focus:border-primary transition-all rounded-xl border-base-200 pr-9"
|
|
95
|
+
placeholder="eyJhbGciOi..."
|
|
96
|
+
/>
|
|
97
|
+
<button type="button" onclick="toggleTokenVisibility()" class="absolute right-2.5 top-1/2 -translate-y-1/2 opacity-30 hover:opacity-70 transition-opacity">
|
|
98
|
+
<iconify-icon id="token-eye-icon" icon="solar:eye-linear" width="15" height="15"></iconify-icon>
|
|
99
|
+
</button>
|
|
100
|
+
</div>
|
|
101
|
+
<p class="text-[10px] opacity-30 italic">Token will be included in the Authorization header.</p>
|
|
102
|
+
</div>
|
|
103
|
+
`;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
function renderCustomHeadersSection(): string {
|
|
107
|
+
return `
|
|
108
|
+
<div class="space-y-4">
|
|
109
|
+
<div class="flex items-center justify-between">
|
|
110
|
+
<span class="text-[11px] font-bold uppercase tracking-wider opacity-40">Custom Headers</span>
|
|
111
|
+
<button type="button" onclick="addHeaderRow()" class="btn btn-xs btn-ghost gap-1 opacity-50 hover:opacity-100">
|
|
112
|
+
<iconify-icon icon="solar:add-circle-linear" width="14" height="14"></iconify-icon>
|
|
113
|
+
Add
|
|
114
|
+
</button>
|
|
115
|
+
</div>
|
|
116
|
+
<div id="headers-rows" class="flex flex-col gap-2">
|
|
117
|
+
<!-- populated by addHeaderRow() -->
|
|
118
|
+
</div>
|
|
119
|
+
<p id="headers-error" class="text-[11px] text-error mt-1.5 hidden"></p>
|
|
120
|
+
</div>
|
|
121
|
+
`;
|
|
122
|
+
}
|
|
123
|
+
|
|
3
124
|
export function renderRequestPanel(h: DiscoveredHandlerOperation): string {
|
|
4
125
|
return `
|
|
5
|
-
<div class="card bg-base-100 border border-base-200 shadow-sm overflow-hidden">
|
|
6
|
-
<div class="px-5 py-
|
|
7
|
-
<h3 class="text-xs font-bold uppercase tracking-widest opacity-40">Request
|
|
126
|
+
<div class="card bg-base-100 border border-base-200 shadow-sm overflow-hidden flex flex-col h-full">
|
|
127
|
+
<div class="px-5 py-3 border-b border-base-200 bg-base-200/20 flex items-center justify-between flex-none">
|
|
128
|
+
<h3 class="text-xs font-bold uppercase tracking-widest opacity-40">Request</h3>
|
|
8
129
|
<iconify-icon icon="solar:settings-linear" width="16" height="16" class="opacity-30"></iconify-icon>
|
|
9
130
|
</div>
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
<
|
|
18
|
-
|
|
19
|
-
class="textarea textarea-bordered font-mono text-sm w-full min-h-[160px] bg-base-200/30 focus:bg-base-100 focus:border-primary transition-all rounded-xl border-base-200"
|
|
20
|
-
placeholder='{ }'
|
|
21
|
-
>{}</textarea>
|
|
22
|
-
<div class="absolute right-3 top-3 opacity-0 group-hover:opacity-40 transition-opacity pointer-events-none">
|
|
23
|
-
<iconify-icon icon="solar:code-file-linear" width="18" height="18"></iconify-icon>
|
|
24
|
-
</div>
|
|
131
|
+
|
|
132
|
+
<div class="flex-1 overflow-hidden flex flex-col">
|
|
133
|
+
<form id="fn-form" onsubmit="return false" class="flex flex-col h-full">
|
|
134
|
+
<!-- Tabs Navigation -->
|
|
135
|
+
<div class="px-5 pt-4 flex-none">
|
|
136
|
+
<div role="tablist" class="tabs tabs-box bg-base-200/50 p-1 rounded-xl">
|
|
137
|
+
<a role="tab" id="req-tab-btn-args" class="tab tab-active !text-[10px] !font-bold uppercase tracking-wider h-8" onclick="switchRequestTab('args')">Args</a>
|
|
138
|
+
<a role="tab" id="req-tab-btn-auth" class="tab !text-[10px] !font-bold uppercase tracking-wider h-8" onclick="switchRequestTab('auth')">Auth</a>
|
|
139
|
+
<a role="tab" id="req-tab-btn-headers" class="tab !text-[10px] !font-bold uppercase tracking-wider h-8" onclick="switchRequestTab('headers')">Headers</a>
|
|
25
140
|
</div>
|
|
26
|
-
<label class="label">
|
|
27
|
-
<span class="label-text-alt opacity-40 italic">Provide the JSON arguments for this ${h.kind}</span>
|
|
28
|
-
</label>
|
|
29
141
|
</div>
|
|
30
142
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
<div class="relative group">
|
|
36
|
-
<input type="text" name="token" class="input input-sm input-bordered font-mono text-sm w-full bg-base-200/30 focus:bg-base-100 focus:border-primary transition-all rounded-xl border-base-200" placeholder="e.g. eyJhbGciOi..." />
|
|
37
|
-
<div class="absolute right-3 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-40 transition-opacity pointer-events-none">
|
|
38
|
-
<iconify-icon icon="solar:key-linear" width="16" height="16"></iconify-icon>
|
|
39
|
-
</div>
|
|
143
|
+
<!-- Tab Content -->
|
|
144
|
+
<div class="flex-1 overflow-y-auto">
|
|
145
|
+
<div id="request-tab-args" class="p-5">
|
|
146
|
+
${renderArgumentsSection(h)}
|
|
40
147
|
</div>
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
<
|
|
45
|
-
|
|
46
|
-
</label>
|
|
47
|
-
<div class="relative group">
|
|
48
|
-
<textarea
|
|
49
|
-
name="headers"
|
|
50
|
-
class="textarea textarea-bordered font-mono text-sm w-full min-h-[80px] bg-base-200/30 focus:bg-base-100 focus:border-primary transition-all rounded-xl border-base-200"
|
|
51
|
-
placeholder='{ "x-custom-header": "value" }'
|
|
52
|
-
></textarea>
|
|
53
|
-
<div class="absolute right-3 top-3 opacity-0 group-hover:opacity-40 transition-opacity pointer-events-none">
|
|
54
|
-
<iconify-icon icon="solar:list-linear" width="18" height="18"></iconify-icon>
|
|
55
|
-
</div>
|
|
148
|
+
<div id="request-tab-auth" class="p-5 hidden">
|
|
149
|
+
${renderBearerTokenSection()}
|
|
150
|
+
</div>
|
|
151
|
+
<div id="request-tab-headers" class="p-5 hidden">
|
|
152
|
+
${renderCustomHeadersSection()}
|
|
56
153
|
</div>
|
|
57
154
|
</div>
|
|
58
155
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
156
|
+
<!-- Submit Button (Fixed at bottom) -->
|
|
157
|
+
<div class="p-5 border-t border-base-200 mt-auto bg-base-200/5">
|
|
158
|
+
<button
|
|
159
|
+
type="button"
|
|
160
|
+
onclick="executeFn()"
|
|
161
|
+
class="btn btn-primary w-full gap-2 rounded-xl shadow-lg shadow-primary/20 hover:shadow-xl hover:shadow-primary/30 transition-all font-semibold"
|
|
162
|
+
>
|
|
163
|
+
<iconify-icon icon="solar:play-bold" width="18" height="18"></iconify-icon>
|
|
164
|
+
Run ${h.kind}
|
|
165
|
+
</button>
|
|
166
|
+
</div>
|
|
63
167
|
</form>
|
|
64
168
|
</div>
|
|
65
169
|
</div>
|
|
@@ -1,18 +1,84 @@
|
|
|
1
1
|
export function renderResultPanel(): string {
|
|
2
2
|
return `
|
|
3
3
|
<div class="card bg-base-100 border border-base-200 shadow-sm overflow-hidden flex flex-col">
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
<
|
|
4
|
+
<!-- Panel Header -->
|
|
5
|
+
<div class="px-5 py-3 border-b border-base-200 bg-base-200/20 flex items-center justify-between">
|
|
6
|
+
<h3 class="text-xs font-bold uppercase tracking-widest opacity-40">Response</h3>
|
|
7
|
+
<div class="flex items-center gap-3">
|
|
8
|
+
<span id="res-status-badge" class="hidden"></span>
|
|
9
|
+
<span id="res-elapsed-badge" class="hidden text-xs font-mono opacity-50"></span>
|
|
7
10
|
<div class="w-1.5 h-1.5 rounded-full bg-success animate-pulse opacity-0" id="execution-indicator"></div>
|
|
8
|
-
<iconify-icon icon="solar:box-minimalistic-linear" width="16" height="16" class="opacity-30"></iconify-icon>
|
|
9
11
|
</div>
|
|
10
12
|
</div>
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
|
|
14
|
+
<!-- Tabs -->
|
|
15
|
+
<div role="tablist" class="tabs tabs-bordered tabs-sm px-4 pt-1 bg-base-200/10 border-b border-base-200">
|
|
16
|
+
<a role="tab" class="tab tab-active text-xs font-semibold" id="tab-body" onclick="switchResultTab('body')">Body</a>
|
|
17
|
+
<a role="tab" class="tab text-xs font-semibold" id="tab-resp-headers" onclick="switchResultTab('headers')">Headers</a>
|
|
18
|
+
<a role="tab" class="tab text-xs font-semibold" id="tab-info" onclick="switchResultTab('info')">Info</a>
|
|
19
|
+
<a role="tab" class="tab text-xs font-semibold gap-1.5" id="tab-realtime" onclick="switchResultTab('realtime')">
|
|
20
|
+
<span class="w-1.5 h-1.5 rounded-full bg-base-content/20 transition-colors duration-300" id="rt-dot"></span>
|
|
21
|
+
Realtime
|
|
22
|
+
</a>
|
|
23
|
+
</div>
|
|
24
|
+
|
|
25
|
+
<!-- Tab Panes -->
|
|
26
|
+
<div class="flex-1 relative min-h-[300px]">
|
|
27
|
+
|
|
28
|
+
<!-- Body Tab -->
|
|
29
|
+
<div id="result-tab-body" class="result-tab-pane absolute inset-0 overflow-auto">
|
|
30
|
+
<div class="absolute inset-0 flex flex-col items-center justify-center opacity-20 pointer-events-none p-10 text-center" id="result-empty-state">
|
|
31
|
+
<iconify-icon icon="solar:course-down-bold-duotone" width="48" height="48" class="mb-3"></iconify-icon>
|
|
32
|
+
<p class="text-xs font-semibold uppercase tracking-widest">Execute To See Output</p>
|
|
33
|
+
</div>
|
|
34
|
+
<div id="result-body-content" class="hidden h-full font-mono text-sm p-4 overflow-auto"></div>
|
|
35
|
+
</div>
|
|
36
|
+
|
|
37
|
+
<!-- Headers Tab -->
|
|
38
|
+
<div id="result-tab-headers" class="result-tab-pane absolute inset-0 overflow-auto hidden">
|
|
39
|
+
<div id="result-headers-content" class="p-4">
|
|
40
|
+
<div class="flex flex-col items-center justify-center h-40 opacity-20 text-center pointer-events-none">
|
|
41
|
+
<iconify-icon icon="solar:list-check-bold-duotone" width="36" height="36" class="mb-2"></iconify-icon>
|
|
42
|
+
<p class="text-xs font-semibold uppercase tracking-widest">No Response Yet</p>
|
|
43
|
+
</div>
|
|
44
|
+
</div>
|
|
45
|
+
</div>
|
|
46
|
+
|
|
47
|
+
<!-- Info Tab -->
|
|
48
|
+
<div id="result-tab-info" class="result-tab-pane absolute inset-0 overflow-auto hidden">
|
|
49
|
+
<div id="result-info-content" class="p-4">
|
|
50
|
+
<div class="flex flex-col items-center justify-center h-40 opacity-20 text-center pointer-events-none">
|
|
51
|
+
<iconify-icon icon="solar:info-circle-bold-duotone" width="36" height="36" class="mb-2"></iconify-icon>
|
|
52
|
+
<p class="text-xs font-semibold uppercase tracking-widest">No Response Yet</p>
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
55
|
+
</div>
|
|
56
|
+
|
|
57
|
+
<!-- Realtime Tab -->
|
|
58
|
+
<div id="result-tab-realtime" class="result-tab-pane absolute inset-0 overflow-auto hidden flex flex-col">
|
|
59
|
+
<!-- Connection status bar -->
|
|
60
|
+
<div class="flex items-center justify-between px-4 py-2 border-b border-base-200 bg-base-200/10 flex-none">
|
|
61
|
+
<div class="flex items-center gap-2">
|
|
62
|
+
<div class="w-2 h-2 rounded-full bg-base-content/20 transition-all duration-300" id="rt-status-dot"></div>
|
|
63
|
+
<span class="text-[10px] font-mono uppercase tracking-wider opacity-50" id="rt-status-text">Disconnected</span>
|
|
64
|
+
</div>
|
|
65
|
+
<div class="flex items-center gap-2">
|
|
66
|
+
<span class="text-[10px] font-mono opacity-30" id="rt-event-count" class="hidden">0 events</span>
|
|
67
|
+
<button type="button" onclick="clearRealtimeLog()" class="btn btn-xs btn-ghost opacity-40 hover:opacity-100 px-2 h-6 min-h-0">
|
|
68
|
+
<iconify-icon icon="solar:trash-bin-minimalistic-linear" width="12" height="12"></iconify-icon>
|
|
69
|
+
Clear
|
|
70
|
+
</button>
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
73
|
+
<!-- Events log -->
|
|
74
|
+
<div id="rt-log" class="flex-1 overflow-y-auto p-3 flex flex-col gap-1.5 font-mono text-xs">
|
|
75
|
+
<div id="rt-empty-state" class="flex flex-col items-center justify-center h-full opacity-20 text-center pointer-events-none gap-2">
|
|
76
|
+
<iconify-icon icon="solar:pulse-2-bold-duotone" width="40" height="40"></iconify-icon>
|
|
77
|
+
<p class="text-xs font-semibold uppercase tracking-widest">Enable Realtime in Request Panel</p>
|
|
78
|
+
</div>
|
|
79
|
+
</div>
|
|
15
80
|
</div>
|
|
81
|
+
|
|
16
82
|
</div>
|
|
17
83
|
</div>
|
|
18
84
|
`;
|
|
@@ -1,16 +1,553 @@
|
|
|
1
|
-
|
|
1
|
+
import { DiscoveredHandlerOperation } from "../../../../../utils/handler-discovery";
|
|
2
|
+
|
|
3
|
+
export function renderScripts(h: DiscoveredHandlerOperation): string {
|
|
4
|
+
const isQuery = h.kind === "query";
|
|
5
|
+
const routePath = h.routePath;
|
|
6
|
+
// handlerName matches the key used in realtimeQueryHandlers registry
|
|
7
|
+
const realtimeQueryName = h.handlerName ?? h.routePath;
|
|
8
|
+
// Only queries can be subscribed to via realtime
|
|
9
|
+
const isRealtimeSupported = isQuery;
|
|
10
|
+
|
|
2
11
|
return `
|
|
12
|
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
|
|
13
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
|
|
14
|
+
|
|
3
15
|
<script>
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
16
|
+
// ── Tab switching ──────────────────────────────────────────────────────────
|
|
17
|
+
window._currentResultTab = 'body';
|
|
18
|
+
|
|
19
|
+
window.switchResultTab = function(tab) {
|
|
20
|
+
window._currentResultTab = tab;
|
|
21
|
+
['body', 'headers', 'info', 'realtime'].forEach(function(t) {
|
|
22
|
+
var pane = document.getElementById('result-tab-' + t);
|
|
23
|
+
var btn = document.getElementById('tab-' + (t === 'headers' ? 'resp-headers' : t));
|
|
24
|
+
if (pane) pane.classList.toggle('hidden', t !== tab);
|
|
25
|
+
if (btn) btn.classList.toggle('tab-active', t === tab);
|
|
26
|
+
});
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
window.switchRequestTab = function(tab) {
|
|
30
|
+
['args', 'auth', 'headers'].forEach(function(t) {
|
|
31
|
+
var pane = document.getElementById('request-tab-' + t);
|
|
32
|
+
var btn = document.getElementById('req-tab-btn-' + t);
|
|
33
|
+
if (pane) pane.classList.toggle('hidden', t !== tab);
|
|
34
|
+
if (btn) btn.classList.toggle('tab-active', t === tab);
|
|
35
|
+
});
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
// ── Header key-value rows ──────────────────────────────────────────────────
|
|
39
|
+
var _headerRowId = 0;
|
|
40
|
+
|
|
41
|
+
window.addHeaderRow = function(key, value) {
|
|
42
|
+
key = key || '';
|
|
43
|
+
value = value || '';
|
|
44
|
+
var id = ++_headerRowId;
|
|
45
|
+
var container = document.getElementById('headers-rows');
|
|
46
|
+
|
|
47
|
+
var row = document.createElement('div');
|
|
48
|
+
row.id = 'header-row-' + id;
|
|
49
|
+
row.className = 'flex items-center gap-2';
|
|
50
|
+
|
|
51
|
+
var keyInput = document.createElement('input');
|
|
52
|
+
keyInput.type = 'text';
|
|
53
|
+
keyInput.placeholder = 'Header-Name';
|
|
54
|
+
keyInput.setAttribute('data-hdr-key', '');
|
|
55
|
+
keyInput.value = key;
|
|
56
|
+
keyInput.className = 'input input-xs input-bordered font-mono w-2/5 bg-base-200/30 focus:bg-base-100 focus:border-primary transition-all rounded-lg border-base-200';
|
|
57
|
+
|
|
58
|
+
var valInput = document.createElement('input');
|
|
59
|
+
valInput.type = 'text';
|
|
60
|
+
valInput.placeholder = 'value';
|
|
61
|
+
valInput.setAttribute('data-hdr-val', '');
|
|
62
|
+
valInput.value = value;
|
|
63
|
+
valInput.className = 'input input-xs input-bordered font-mono flex-1 bg-base-200/30 focus:bg-base-100 focus:border-primary transition-all rounded-lg border-base-200';
|
|
64
|
+
|
|
65
|
+
var removeBtn = document.createElement('button');
|
|
66
|
+
removeBtn.type = 'button';
|
|
67
|
+
removeBtn.className = 'btn btn-xs btn-ghost text-error opacity-40 hover:opacity-100 px-1.5';
|
|
68
|
+
removeBtn.innerHTML = '<iconify-icon icon="solar:close-circle-linear" width="14" height="14"></iconify-icon>';
|
|
69
|
+
removeBtn.onclick = function() { row.remove(); };
|
|
70
|
+
|
|
71
|
+
row.appendChild(keyInput);
|
|
72
|
+
row.appendChild(valInput);
|
|
73
|
+
row.appendChild(removeBtn);
|
|
74
|
+
container.appendChild(row);
|
|
75
|
+
};
|
|
76
|
+
|
|
77
|
+
// ── Collect args from server-rendered inputs ───────────────────────────────
|
|
78
|
+
function collectArgs() {
|
|
79
|
+
var result = {};
|
|
80
|
+
document.querySelectorAll('#args-rows [data-arg-key]').forEach(function(el) {
|
|
81
|
+
var key = el.getAttribute('data-arg-key');
|
|
82
|
+
var type = el.getAttribute('data-arg-type');
|
|
83
|
+
if (!key) return;
|
|
84
|
+
var value;
|
|
85
|
+
if (type === 'boolean') {
|
|
86
|
+
value = el.checked;
|
|
87
|
+
} else if (type === 'number') {
|
|
88
|
+
var raw = el.value.trim();
|
|
89
|
+
value = raw === '' ? undefined : Number(raw);
|
|
90
|
+
} else {
|
|
91
|
+
value = el.value;
|
|
92
|
+
}
|
|
93
|
+
if (value !== undefined && value !== '') {
|
|
94
|
+
result[key] = value;
|
|
95
|
+
}
|
|
96
|
+
});
|
|
97
|
+
return result;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
function collectHeaders() {
|
|
101
|
+
var result = {};
|
|
102
|
+
document.querySelectorAll('#headers-rows [data-hdr-key]').forEach(function(keyEl) {
|
|
103
|
+
var k = keyEl.value.trim();
|
|
104
|
+
var v = keyEl.parentElement.querySelector('[data-hdr-val]').value;
|
|
105
|
+
if (k) result[k] = v;
|
|
106
|
+
});
|
|
107
|
+
return result;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
// ── Token visibility ──────────────────────────────────────────────────────
|
|
111
|
+
window.toggleTokenVisibility = function() {
|
|
112
|
+
var inp = document.getElementById('bearer-token-input');
|
|
113
|
+
var icon = document.getElementById('token-eye-icon');
|
|
114
|
+
if (!inp) return;
|
|
115
|
+
if (inp.type === 'password') {
|
|
116
|
+
inp.type = 'text';
|
|
117
|
+
if (icon) icon.setAttribute('icon', 'solar:eye-closed-linear');
|
|
118
|
+
} else {
|
|
119
|
+
inp.type = 'password';
|
|
120
|
+
if (icon) icon.setAttribute('icon', 'solar:eye-linear');
|
|
8
121
|
}
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
122
|
+
};
|
|
123
|
+
|
|
124
|
+
// ── Render helpers ─────────────────────────────────────────────────────────
|
|
125
|
+
function esc(str) {
|
|
126
|
+
return String(str).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
function showBodyLoading() {
|
|
130
|
+
var empty = document.getElementById('result-empty-state');
|
|
131
|
+
if (empty) empty.classList.add('hidden');
|
|
132
|
+
var content = document.getElementById('result-body-content');
|
|
133
|
+
if (content) {
|
|
134
|
+
content.classList.remove('hidden');
|
|
135
|
+
content.innerHTML = '<div class="flex items-center justify-center h-full min-h-[200px]"><span class="loading loading-ring loading-md text-primary"></span></div>';
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
function showBodyError(msg) {
|
|
140
|
+
var empty = document.getElementById('result-empty-state');
|
|
141
|
+
if (empty) empty.classList.add('hidden');
|
|
142
|
+
var content = document.getElementById('result-body-content');
|
|
143
|
+
if (content) {
|
|
144
|
+
content.classList.remove('hidden');
|
|
145
|
+
content.innerHTML = '<div class="p-5 text-error"><p class="font-bold mb-1 text-xs uppercase tracking-wider">Error</p><pre class="text-sm whitespace-pre-wrap">' + esc(msg) + '</pre></div>';
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
function renderBodyJson(jsonStr) {
|
|
150
|
+
var empty = document.getElementById('result-empty-state');
|
|
151
|
+
if (empty) empty.classList.add('hidden');
|
|
152
|
+
var content = document.getElementById('result-body-content');
|
|
153
|
+
if (!content) return;
|
|
154
|
+
content.classList.remove('hidden');
|
|
155
|
+
content.innerHTML = '<pre style="margin:0;padding:1rem"><code class="language-json">' + esc(jsonStr) + '</code></pre>';
|
|
156
|
+
if (window.hljs) hljs.highlightAll();
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
function renderBodyText(text) {
|
|
160
|
+
var empty = document.getElementById('result-empty-state');
|
|
161
|
+
if (empty) empty.classList.add('hidden');
|
|
162
|
+
var content = document.getElementById('result-body-content');
|
|
163
|
+
if (!content) return;
|
|
164
|
+
content.classList.remove('hidden');
|
|
165
|
+
content.innerHTML = '<pre style="margin:0;padding:1rem;white-space:pre-wrap;word-break:break-all">' + esc(text) + '</pre>';
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
function renderStatusBadge(status, elapsed) {
|
|
169
|
+
var badge = document.getElementById('res-status-badge');
|
|
170
|
+
var elBadge = document.getElementById('res-elapsed-badge');
|
|
171
|
+
if (badge) {
|
|
172
|
+
badge.className = 'badge badge-sm font-mono font-bold ' + (status < 300 ? 'badge-success' : status < 400 ? 'badge-warning' : 'badge-error');
|
|
173
|
+
badge.textContent = status;
|
|
174
|
+
badge.classList.remove('hidden');
|
|
175
|
+
}
|
|
176
|
+
if (elBadge) {
|
|
177
|
+
elBadge.textContent = elapsed + 'ms';
|
|
178
|
+
elBadge.classList.remove('hidden');
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
function renderResponseHeaders(headers) {
|
|
183
|
+
var el = document.getElementById('result-headers-content');
|
|
184
|
+
if (!el) return;
|
|
185
|
+
var entries = Object.entries(headers);
|
|
186
|
+
if (!entries.length) {
|
|
187
|
+
el.innerHTML = '<p class="text-xs opacity-40 italic p-2">No headers returned.</p>';
|
|
188
|
+
return;
|
|
189
|
+
}
|
|
190
|
+
var rows = entries.map(function(pair) {
|
|
191
|
+
return '<tr><td class="font-mono text-xs font-medium opacity-70">' + esc(pair[0]) + '</td><td class="font-mono text-xs opacity-50 break-all">' + esc(pair[1]) + '</td></tr>';
|
|
192
|
+
}).join('');
|
|
193
|
+
el.innerHTML = '<table class="table table-xs w-full"><thead><tr>' +
|
|
194
|
+
'<th class="text-[10px] uppercase tracking-wider opacity-40 font-bold">Header</th>' +
|
|
195
|
+
'<th class="text-[10px] uppercase tracking-wider opacity-40 font-bold">Value</th>' +
|
|
196
|
+
'</tr></thead><tbody>' + rows + '</tbody></table>';
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
function renderInfo(data) {
|
|
200
|
+
var el = document.getElementById('result-info-content');
|
|
201
|
+
if (!el) return;
|
|
202
|
+
var items = [
|
|
203
|
+
{ label: 'Status', value: data.status + ' ' + data.statusText, color: data.status < 300 ? 'text-success' : data.status < 400 ? 'text-warning' : 'text-error' },
|
|
204
|
+
{ label: 'Elapsed', value: data.elapsed + ' ms', color: '' },
|
|
205
|
+
{ label: 'Method', value: data.method, color: '' },
|
|
206
|
+
{ label: 'URL', value: data.url, color: '' },
|
|
207
|
+
{ label: 'Content-Type', value: data.contentType || '—', color: '' },
|
|
208
|
+
];
|
|
209
|
+
var html = '<div class="flex flex-col gap-3 p-4">';
|
|
210
|
+
items.forEach(function(item) {
|
|
211
|
+
html += '<div class="flex flex-col gap-0.5">';
|
|
212
|
+
html += '<span class="text-[10px] font-bold uppercase tracking-wider opacity-40">' + esc(item.label) + '</span>';
|
|
213
|
+
html += '<span class="font-mono text-sm break-all ' + (item.color || 'opacity-70') + '">' + esc(String(item.value)) + '</span>';
|
|
214
|
+
html += '</div>';
|
|
215
|
+
});
|
|
216
|
+
html += '</div>';
|
|
217
|
+
el.innerHTML = html;
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
// ── Main execution ─────────────────────────────────────────────────────────
|
|
221
|
+
window.executeFn = async function() {
|
|
222
|
+
// If realtime is enabled, connect/reconnect after execute completes
|
|
223
|
+
var shouldConnectRealtime = _rtEnabled && _isRealtimeSupported;
|
|
224
|
+
var indicator = document.getElementById('execution-indicator');
|
|
225
|
+
var headerErr = document.getElementById('headers-error');
|
|
226
|
+
|
|
227
|
+
var args = collectArgs();
|
|
228
|
+
var customHeaders = collectHeaders();
|
|
229
|
+
var token = (document.getElementById('bearer-token-input') || {}).value || '';
|
|
230
|
+
|
|
231
|
+
if (headerErr) headerErr.classList.add('hidden');
|
|
232
|
+
|
|
233
|
+
// Show loading
|
|
234
|
+
if (indicator) indicator.classList.remove('opacity-0');
|
|
235
|
+
showBodyLoading();
|
|
236
|
+
|
|
237
|
+
var isQuery = ${isQuery};
|
|
238
|
+
var method = isQuery ? 'GET' : 'POST';
|
|
239
|
+
var pathWithQuery = '${routePath}';
|
|
240
|
+
|
|
241
|
+
if (isQuery && Object.keys(args).length > 0) {
|
|
242
|
+
var params = new URLSearchParams();
|
|
243
|
+
Object.entries(args).forEach(function(entry) {
|
|
244
|
+
var key = entry[0];
|
|
245
|
+
var value = entry[1];
|
|
246
|
+
if (value !== undefined && value !== null) {
|
|
247
|
+
if (Array.isArray(value)) {
|
|
248
|
+
value.forEach(function(v) { params.append(key, typeof v === 'object' ? JSON.stringify(v) : String(v)); });
|
|
249
|
+
} else if (typeof value === 'object') {
|
|
250
|
+
params.append(key, JSON.stringify(value));
|
|
251
|
+
} else {
|
|
252
|
+
params.append(key, String(value));
|
|
253
|
+
}
|
|
254
|
+
}
|
|
255
|
+
});
|
|
256
|
+
var qs = params.toString();
|
|
257
|
+
if (qs) pathWithQuery += '?' + qs;
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
var fetchHeaders = Object.assign({ 'Content-Type': 'application/json' }, customHeaders);
|
|
261
|
+
if (token) fetchHeaders['Authorization'] = 'Bearer ' + token;
|
|
262
|
+
|
|
263
|
+
var startTime = performance.now();
|
|
264
|
+
|
|
265
|
+
try {
|
|
266
|
+
var res = await fetch(pathWithQuery, {
|
|
267
|
+
method: method,
|
|
268
|
+
headers: fetchHeaders,
|
|
269
|
+
body: method === 'POST' ? JSON.stringify(args) : undefined,
|
|
270
|
+
});
|
|
271
|
+
|
|
272
|
+
var elapsed = Math.round(performance.now() - startTime);
|
|
273
|
+
var contentType = res.headers.get('content-type') || '';
|
|
274
|
+
var rawBody = await res.text();
|
|
275
|
+
|
|
276
|
+
var parsedBody = rawBody;
|
|
277
|
+
if (rawBody && contentType.includes('application/json')) {
|
|
278
|
+
try { parsedBody = JSON.parse(rawBody); } catch(e) { parsedBody = rawBody; }
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
renderStatusBadge(res.status, elapsed);
|
|
282
|
+
|
|
283
|
+
if (typeof parsedBody === 'object') {
|
|
284
|
+
renderBodyJson(JSON.stringify(parsedBody, null, 2));
|
|
285
|
+
} else {
|
|
286
|
+
renderBodyText(rawBody);
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
renderResponseHeaders(Object.fromEntries(res.headers));
|
|
290
|
+
renderInfo({ status: res.status, statusText: res.statusText, elapsed: elapsed, method: method, url: pathWithQuery, contentType: contentType });
|
|
291
|
+
|
|
292
|
+
} catch(err) {
|
|
293
|
+
showBodyError('Fetch error: ' + (err.message || String(err)));
|
|
294
|
+
} finally {
|
|
295
|
+
if (indicator) indicator.classList.add('opacity-0');
|
|
296
|
+
// Connect realtime after execute if toggle is on
|
|
297
|
+
if (shouldConnectRealtime) {
|
|
298
|
+
switchResultTab('realtime');
|
|
299
|
+
connectRealtime();
|
|
300
|
+
}
|
|
301
|
+
}
|
|
302
|
+
};
|
|
303
|
+
|
|
304
|
+
// ── Realtime WebSocket ─────────────────────────────────────────────────────
|
|
305
|
+
var _rtSocket = null;
|
|
306
|
+
var _rtToken = null;
|
|
307
|
+
var _rtEnabled = false;
|
|
308
|
+
var _rtEventCount = 0;
|
|
309
|
+
var _isRealtimeSupported = ${isRealtimeSupported};
|
|
310
|
+
var _realtimeQueryName = '${realtimeQueryName}';
|
|
311
|
+
var _rtPingInterval = null;
|
|
312
|
+
|
|
313
|
+
function setRtStatus(status) {
|
|
314
|
+
// status: 'disconnected' | 'connecting' | 'connected' | 'error'
|
|
315
|
+
var dot = document.getElementById('rt-status-dot');
|
|
316
|
+
var headerDot = document.getElementById('rt-dot');
|
|
317
|
+
var text = document.getElementById('rt-status-text');
|
|
318
|
+
var colorMap = {
|
|
319
|
+
disconnected: 'bg-base-content/20',
|
|
320
|
+
connecting: 'bg-warning animate-pulse',
|
|
321
|
+
connected: 'bg-success animate-pulse',
|
|
322
|
+
error: 'bg-error',
|
|
323
|
+
};
|
|
324
|
+
var headerColorMap = {
|
|
325
|
+
disconnected: 'bg-base-content/20',
|
|
326
|
+
connecting: 'bg-warning animate-pulse',
|
|
327
|
+
connected: 'bg-success animate-pulse',
|
|
328
|
+
error: 'bg-error',
|
|
329
|
+
};
|
|
330
|
+
var labelMap = {
|
|
331
|
+
disconnected: 'Disconnected',
|
|
332
|
+
connecting: 'Connecting…',
|
|
333
|
+
connected: 'Connected',
|
|
334
|
+
error: 'Error',
|
|
335
|
+
};
|
|
336
|
+
if (dot) {
|
|
337
|
+
dot.className = 'w-2 h-2 rounded-full transition-all duration-300 ' + (colorMap[status] || colorMap.disconnected);
|
|
338
|
+
}
|
|
339
|
+
if (headerDot) {
|
|
340
|
+
headerDot.className = 'w-1.5 h-1.5 rounded-full transition-colors duration-300 ' + (headerColorMap[status] || headerColorMap.disconnected);
|
|
341
|
+
}
|
|
342
|
+
if (text) {
|
|
343
|
+
text.textContent = labelMap[status] || status;
|
|
344
|
+
}
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
function appendRtEvent(eventName, payload, ts) {
|
|
348
|
+
var log = document.getElementById('rt-log');
|
|
349
|
+
var empty = document.getElementById('rt-empty-state');
|
|
350
|
+
if (!log) return;
|
|
351
|
+
if (empty) empty.classList.add('hidden');
|
|
352
|
+
|
|
353
|
+
_rtEventCount++;
|
|
354
|
+
var countEl = document.getElementById('rt-event-count');
|
|
355
|
+
if (countEl) {
|
|
356
|
+
countEl.textContent = _rtEventCount + ' event' + (_rtEventCount !== 1 ? 's' : '');
|
|
357
|
+
countEl.classList.remove('hidden');
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
var row = document.createElement('div');
|
|
361
|
+
row.className = 'flex flex-col gap-0.5 p-2 rounded-lg bg-base-200/40 border border-base-200/60 hover:bg-base-200/70 transition-colors';
|
|
362
|
+
|
|
363
|
+
var header = document.createElement('div');
|
|
364
|
+
header.className = 'flex items-center justify-between';
|
|
365
|
+
|
|
366
|
+
var nameSpan = document.createElement('span');
|
|
367
|
+
nameSpan.className = 'font-semibold text-primary text-[11px] uppercase tracking-wider';
|
|
368
|
+
nameSpan.textContent = eventName;
|
|
369
|
+
|
|
370
|
+
var tsSpan = document.createElement('span');
|
|
371
|
+
tsSpan.className = 'text-[10px] opacity-30 font-mono';
|
|
372
|
+
tsSpan.textContent = new Date(ts || Date.now()).toLocaleTimeString();
|
|
373
|
+
|
|
374
|
+
header.appendChild(nameSpan);
|
|
375
|
+
header.appendChild(tsSpan);
|
|
376
|
+
row.appendChild(header);
|
|
377
|
+
|
|
378
|
+
if (payload !== undefined && payload !== null) {
|
|
379
|
+
var pre = document.createElement('pre');
|
|
380
|
+
pre.className = 'text-[11px] opacity-60 whitespace-pre-wrap break-all mt-0.5 max-h-32 overflow-auto';
|
|
381
|
+
try {
|
|
382
|
+
pre.textContent = typeof payload === 'object' ? JSON.stringify(payload, null, 2) : String(payload);
|
|
383
|
+
} catch(e) {
|
|
384
|
+
pre.textContent = String(payload);
|
|
385
|
+
}
|
|
386
|
+
row.appendChild(pre);
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
log.appendChild(row);
|
|
390
|
+
log.scrollTop = log.scrollHeight;
|
|
391
|
+
}
|
|
392
|
+
|
|
393
|
+
function appendRtSystemMsg(msg, type) {
|
|
394
|
+
var log = document.getElementById('rt-log');
|
|
395
|
+
if (!log) return;
|
|
396
|
+
var el = document.createElement('div');
|
|
397
|
+
el.className = 'text-[10px] font-mono italic opacity-40 px-1 py-0.5 ' + (type === 'error' ? 'text-error opacity-70' : '');
|
|
398
|
+
el.textContent = '— ' + msg + ' —';
|
|
399
|
+
log.appendChild(el);
|
|
400
|
+
log.scrollTop = log.scrollHeight;
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
function disconnectRealtime(silent) {
|
|
404
|
+
if (_rtPingInterval) { clearInterval(_rtPingInterval); _rtPingInterval = null; }
|
|
405
|
+
if (_rtSocket) {
|
|
406
|
+
try { _rtSocket.close(); } catch(e) {}
|
|
407
|
+
_rtSocket = null;
|
|
408
|
+
}
|
|
409
|
+
// Unsubscribe server-side if we have a token
|
|
410
|
+
if (_rtToken) {
|
|
411
|
+
var authToken = (document.getElementById('bearer-token-input') || {}).value || '';
|
|
412
|
+
fetch('/realtime/unsubscribe', {
|
|
413
|
+
method: 'POST',
|
|
414
|
+
headers: { 'Content-Type': 'application/json' },
|
|
415
|
+
body: JSON.stringify({ token: _rtToken, authToken: authToken }),
|
|
416
|
+
}).catch(function() {});
|
|
417
|
+
_rtToken = null;
|
|
418
|
+
}
|
|
419
|
+
setRtStatus('disconnected');
|
|
420
|
+
if (!silent) appendRtSystemMsg('Disconnected');
|
|
421
|
+
}
|
|
422
|
+
|
|
423
|
+
async function connectRealtime() {
|
|
424
|
+
if (!_isRealtimeSupported) {
|
|
425
|
+
appendRtSystemMsg('Realtime is only available for queries', 'error');
|
|
426
|
+
return;
|
|
427
|
+
}
|
|
428
|
+
|
|
429
|
+
disconnectRealtime(true);
|
|
430
|
+
setRtStatus('connecting');
|
|
431
|
+
appendRtSystemMsg('Subscribing…');
|
|
432
|
+
|
|
433
|
+
var args = collectArgs();
|
|
434
|
+
var authToken = (document.getElementById('bearer-token-input') || {}).value || '';
|
|
435
|
+
|
|
436
|
+
var queryName = _realtimeQueryName;
|
|
437
|
+
|
|
438
|
+
try {
|
|
439
|
+
var subRes = await fetch('/realtime/subscribe', {
|
|
440
|
+
method: 'POST',
|
|
441
|
+
headers: { 'Content-Type': 'application/json' },
|
|
442
|
+
body: JSON.stringify({ queryName: queryName, args: args, authToken: authToken }),
|
|
443
|
+
});
|
|
444
|
+
|
|
445
|
+
if (!subRes.ok) {
|
|
446
|
+
var errBody = await subRes.json().catch(function() { return {}; });
|
|
447
|
+
throw new Error(errBody.message || ('Subscribe failed: ' + subRes.status));
|
|
448
|
+
}
|
|
449
|
+
|
|
450
|
+
var subData = await subRes.json();
|
|
451
|
+
_rtToken = subData.token;
|
|
452
|
+
|
|
453
|
+
// Build WebSocket URL
|
|
454
|
+
var wsInfo = subData.websocket;
|
|
455
|
+
var wsUrl = wsInfo.url;
|
|
456
|
+
// Append token params
|
|
457
|
+
var sep = wsUrl.indexOf('?') >= 0 ? '&' : '?';
|
|
458
|
+
wsUrl += sep + 'token=' + encodeURIComponent(_rtToken);
|
|
459
|
+
if (authToken) wsUrl += '&authToken=' + encodeURIComponent(authToken);
|
|
460
|
+
|
|
461
|
+
appendRtSystemMsg('Connecting WebSocket…');
|
|
462
|
+
|
|
463
|
+
var ws = new WebSocket(wsUrl, wsInfo.protocol || undefined);
|
|
464
|
+
_rtSocket = ws;
|
|
465
|
+
|
|
466
|
+
ws.addEventListener('open', function() {
|
|
467
|
+
setRtStatus('connected');
|
|
468
|
+
appendRtSystemMsg('Connected');
|
|
469
|
+
// Start ping keepalive
|
|
470
|
+
_rtPingInterval = setInterval(function() {
|
|
471
|
+
if (ws.readyState === 1) ws.send('ping');
|
|
472
|
+
}, 25000);
|
|
473
|
+
});
|
|
474
|
+
|
|
475
|
+
ws.addEventListener('message', function(evt) {
|
|
476
|
+
var data;
|
|
477
|
+
try { data = JSON.parse(evt.data); } catch(e) { data = { event: 'raw', payload: evt.data }; }
|
|
478
|
+
// Skip pong internal events
|
|
479
|
+
if (data.event === 'pong') return;
|
|
480
|
+
appendRtEvent(data.event || 'message', data.payload, Date.now());
|
|
481
|
+
});
|
|
482
|
+
|
|
483
|
+
ws.addEventListener('close', function(evt) {
|
|
484
|
+
if (_rtPingInterval) { clearInterval(_rtPingInterval); _rtPingInterval = null; }
|
|
485
|
+
_rtSocket = null;
|
|
486
|
+
_rtToken = null;
|
|
487
|
+
setRtStatus('disconnected');
|
|
488
|
+
appendRtSystemMsg('Connection closed' + (evt.reason ? ': ' + evt.reason : ''));
|
|
489
|
+
// Uncheck toggle
|
|
490
|
+
var toggle = document.getElementById('realtime-toggle');
|
|
491
|
+
if (toggle) toggle.checked = false;
|
|
492
|
+
_rtEnabled = false;
|
|
493
|
+
});
|
|
494
|
+
|
|
495
|
+
ws.addEventListener('error', function() {
|
|
496
|
+
setRtStatus('error');
|
|
497
|
+
appendRtSystemMsg('WebSocket error', 'error');
|
|
498
|
+
});
|
|
499
|
+
|
|
500
|
+
} catch(err) {
|
|
501
|
+
disconnectRealtime(true);
|
|
502
|
+
setRtStatus('error');
|
|
503
|
+
appendRtSystemMsg('Error: ' + (err.message || String(err)), 'error');
|
|
504
|
+
// Uncheck toggle
|
|
505
|
+
var toggle = document.getElementById('realtime-toggle');
|
|
506
|
+
if (toggle) toggle.checked = false;
|
|
507
|
+
_rtEnabled = false;
|
|
508
|
+
}
|
|
509
|
+
}
|
|
510
|
+
|
|
511
|
+
window.toggleRealtime = function(enabled) {
|
|
512
|
+
_rtEnabled = enabled;
|
|
513
|
+
if (enabled) {
|
|
514
|
+
// Switch to realtime tab to show the panel
|
|
515
|
+
switchResultTab('realtime');
|
|
516
|
+
// Don't connect yet — connection happens after executeFn() is called
|
|
517
|
+
var log = document.getElementById('rt-log');
|
|
518
|
+
var empty = document.getElementById('rt-empty-state');
|
|
519
|
+
if (empty) {
|
|
520
|
+
empty.innerHTML = '<iconify-icon icon="solar:pulse-2-bold-duotone" width="40" height="40"></iconify-icon><p class="text-xs font-semibold uppercase tracking-widest">Press Run to connect and start receiving updates</p>';
|
|
521
|
+
empty.classList.remove('hidden');
|
|
522
|
+
}
|
|
523
|
+
} else {
|
|
524
|
+
disconnectRealtime(false);
|
|
525
|
+
}
|
|
526
|
+
};
|
|
527
|
+
|
|
528
|
+
window.clearRealtimeLog = function() {
|
|
529
|
+
var log = document.getElementById('rt-log');
|
|
530
|
+
if (!log) return;
|
|
531
|
+
log.innerHTML = '';
|
|
532
|
+
_rtEventCount = 0;
|
|
533
|
+
var countEl = document.getElementById('rt-event-count');
|
|
534
|
+
if (countEl) countEl.classList.add('hidden');
|
|
535
|
+
// Re-show empty state if disconnected
|
|
536
|
+
if (!_rtSocket) {
|
|
537
|
+
var empty = document.createElement('div');
|
|
538
|
+
empty.id = 'rt-empty-state';
|
|
539
|
+
empty.className = 'flex flex-col items-center justify-center h-full opacity-20 text-center pointer-events-none gap-2';
|
|
540
|
+
empty.innerHTML = '<iconify-icon icon="solar:pulse-2-bold-duotone" width="40" height="40"></iconify-icon><p class="text-xs font-semibold uppercase tracking-widest">Enable Realtime in Request Panel</p>';
|
|
541
|
+
log.appendChild(empty);
|
|
13
542
|
}
|
|
543
|
+
};
|
|
544
|
+
|
|
545
|
+
// ── Cleanup on HTMX navigation ─────────────────────────────────────────────
|
|
546
|
+
document.addEventListener('htmx:beforeSwap', function() {
|
|
547
|
+
disconnectRealtime(true);
|
|
548
|
+
var toggle = document.getElementById('realtime-toggle');
|
|
549
|
+
if (toggle) toggle.checked = false;
|
|
550
|
+
_rtEnabled = false;
|
|
14
551
|
});
|
|
15
552
|
</script>
|
|
16
553
|
`;
|
|
@@ -11,6 +11,13 @@ export type HandlerKind =
|
|
|
11
11
|
| "cron"
|
|
12
12
|
| "storage";
|
|
13
13
|
|
|
14
|
+
export type DiscoveredArgField = {
|
|
15
|
+
name: string;
|
|
16
|
+
type: "string" | "number" | "boolean" | "unknown";
|
|
17
|
+
optional: boolean;
|
|
18
|
+
defaultValue?: string;
|
|
19
|
+
};
|
|
20
|
+
|
|
14
21
|
export type DiscoveredHandlerOperation = {
|
|
15
22
|
kind: HandlerKind;
|
|
16
23
|
exportName: string;
|
|
@@ -22,6 +29,7 @@ export type DiscoveredHandlerOperation = {
|
|
|
22
29
|
clientSegments?: string[];
|
|
23
30
|
taskName?: string;
|
|
24
31
|
cronTriggers?: string[];
|
|
32
|
+
args?: DiscoveredArgField[];
|
|
25
33
|
};
|
|
26
34
|
|
|
27
35
|
const supportedExtensions = new Set([".ts", ".tsx", ".mts", ".cts"]);
|
|
@@ -60,8 +68,95 @@ type DiscoveredExport = {
|
|
|
60
68
|
exportName: string;
|
|
61
69
|
kind: HandlerKind;
|
|
62
70
|
cronTriggers: string[];
|
|
71
|
+
args: DiscoveredArgField[];
|
|
63
72
|
};
|
|
64
73
|
|
|
74
|
+
/**
|
|
75
|
+
* Walk a Zod call chain like z.string().optional().default("x")
|
|
76
|
+
* and return the base type name + whether optional/default are applied.
|
|
77
|
+
*/
|
|
78
|
+
function readZodArgField(
|
|
79
|
+
expression: ts.Expression,
|
|
80
|
+
name: string,
|
|
81
|
+
): DiscoveredArgField {
|
|
82
|
+
let node: ts.Expression = expression;
|
|
83
|
+
let optional = false;
|
|
84
|
+
let defaultValue: string | undefined;
|
|
85
|
+
let baseType: DiscoveredArgField["type"] = "unknown";
|
|
86
|
+
|
|
87
|
+
// Walk the call chain: z.string().optional().default("x")
|
|
88
|
+
// Each iteration processes one layer (e.g. .default, .optional, .string)
|
|
89
|
+
while (ts.isCallExpression(node)) {
|
|
90
|
+
const expr = node.expression;
|
|
91
|
+
if (!ts.isPropertyAccessExpression(expr)) break;
|
|
92
|
+
|
|
93
|
+
const prop = expr.name.text;
|
|
94
|
+
|
|
95
|
+
if (prop === "optional" || prop === "nullable") {
|
|
96
|
+
optional = true;
|
|
97
|
+
node = expr.expression;
|
|
98
|
+
} else if (prop === "default") {
|
|
99
|
+
optional = true;
|
|
100
|
+
const arg = node.arguments[0];
|
|
101
|
+
if (arg) {
|
|
102
|
+
if (ts.isStringLiteral(arg)) defaultValue = arg.text;
|
|
103
|
+
else if (ts.isNumericLiteral(arg)) defaultValue = arg.text;
|
|
104
|
+
else if (arg.kind === ts.SyntaxKind.TrueKeyword) defaultValue = "true";
|
|
105
|
+
else if (arg.kind === ts.SyntaxKind.FalseKeyword)
|
|
106
|
+
defaultValue = "false";
|
|
107
|
+
}
|
|
108
|
+
node = expr.expression;
|
|
109
|
+
} else if (
|
|
110
|
+
prop === "string" ||
|
|
111
|
+
prop === "uuid" ||
|
|
112
|
+
prop === "email" ||
|
|
113
|
+
prop === "url"
|
|
114
|
+
) {
|
|
115
|
+
baseType = "string";
|
|
116
|
+
break;
|
|
117
|
+
} else if (prop === "number" || prop === "int" || prop === "float") {
|
|
118
|
+
baseType = "number";
|
|
119
|
+
break;
|
|
120
|
+
} else if (prop === "boolean") {
|
|
121
|
+
baseType = "boolean";
|
|
122
|
+
break;
|
|
123
|
+
} else {
|
|
124
|
+
// unknown modifier (.min, .max, .trim, etc.) — keep walking inward
|
|
125
|
+
node = expr.expression;
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
return { name, type: baseType, optional, defaultValue };
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
function readArgsFields(
|
|
133
|
+
definitionArg: ts.Expression | undefined,
|
|
134
|
+
): DiscoveredArgField[] {
|
|
135
|
+
if (!definitionArg || !ts.isObjectLiteralExpression(definitionArg)) {
|
|
136
|
+
return [];
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
const argsProp = definitionArg.properties.find(
|
|
140
|
+
(p): p is ts.PropertyAssignment =>
|
|
141
|
+
ts.isPropertyAssignment(p) &&
|
|
142
|
+
ts.isIdentifier(p.name) &&
|
|
143
|
+
p.name.text === "args",
|
|
144
|
+
);
|
|
145
|
+
|
|
146
|
+
if (!argsProp || !ts.isObjectLiteralExpression(argsProp.initializer)) {
|
|
147
|
+
return [];
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
const fields: DiscoveredArgField[] = [];
|
|
151
|
+
for (const prop of argsProp.initializer.properties) {
|
|
152
|
+
if (!ts.isPropertyAssignment(prop) || !ts.isIdentifier(prop.name)) {
|
|
153
|
+
continue;
|
|
154
|
+
}
|
|
155
|
+
fields.push(readZodArgField(prop.initializer, prop.name.text));
|
|
156
|
+
}
|
|
157
|
+
return fields;
|
|
158
|
+
}
|
|
159
|
+
|
|
65
160
|
function isExportedConst(
|
|
66
161
|
statement: ts.Statement,
|
|
67
162
|
): statement is ts.VariableStatement {
|
|
@@ -176,6 +271,10 @@ function discoverExports(source: string, filePath: string): DiscoveredExport[] {
|
|
|
176
271
|
callee === "cron"
|
|
177
272
|
? readCronTriggers(declaration.initializer.arguments[0])
|
|
178
273
|
: [],
|
|
274
|
+
args:
|
|
275
|
+
callee === "query" || callee === "mutation"
|
|
276
|
+
? readArgsFields(declaration.initializer.arguments[0])
|
|
277
|
+
: [],
|
|
179
278
|
});
|
|
180
279
|
}
|
|
181
280
|
}
|
|
@@ -341,6 +440,7 @@ export async function discoverHandlerOperations(
|
|
|
341
440
|
clientSegments,
|
|
342
441
|
taskName,
|
|
343
442
|
cronTriggers: discoveredExport.cronTriggers,
|
|
443
|
+
args: discoveredExport.args,
|
|
344
444
|
});
|
|
345
445
|
}
|
|
346
446
|
}
|
package/package.json
CHANGED
|
@@ -1,124 +0,0 @@
|
|
|
1
|
-
import { DiscoveredHandlerOperation } from "../../../../utils/handler-discovery";
|
|
2
|
-
|
|
3
|
-
export function buildExecutionLogic(h: DiscoveredHandlerOperation): string {
|
|
4
|
-
return `
|
|
5
|
-
const body = await c.req.json();
|
|
6
|
-
let args = {};
|
|
7
|
-
let customHeaders: Record<string, string> = {};
|
|
8
|
-
let token = body.token || "";
|
|
9
|
-
|
|
10
|
-
try {
|
|
11
|
-
args = typeof body.args === 'string' && body.args.trim() ? JSON.parse(body.args) : body.args || {};
|
|
12
|
-
} catch (e) {}
|
|
13
|
-
|
|
14
|
-
try {
|
|
15
|
-
if (body.headers && typeof body.headers === 'string' && body.headers.trim()) {
|
|
16
|
-
customHeaders = JSON.parse(body.headers);
|
|
17
|
-
} else if (body.headers && typeof body.headers === 'object') {
|
|
18
|
-
customHeaders = body.headers;
|
|
19
|
-
}
|
|
20
|
-
} catch (e) {}
|
|
21
|
-
|
|
22
|
-
try {
|
|
23
|
-
// We'll perform a local fetch to the actual API endpoint for maximum compatibility
|
|
24
|
-
const protocol = c.req.raw.url.startsWith('https') ? 'https' : 'http';
|
|
25
|
-
const host = c.req.header('host');
|
|
26
|
-
const baseUrl = body.baseUrl || c.env?.APPFLARE_API_BASE || \`\${protocol}://\${host}\`;
|
|
27
|
-
const isQuery = ${h.kind === "query"};
|
|
28
|
-
const method = isQuery ? "GET" : "POST";
|
|
29
|
-
|
|
30
|
-
let pathWithQuery = \`${h.routePath}\`;
|
|
31
|
-
if (isQuery && args && typeof args === "object") {
|
|
32
|
-
const params = new URLSearchParams();
|
|
33
|
-
for (const [key, value] of Object.entries(args)) {
|
|
34
|
-
if (value !== undefined && value !== null) {
|
|
35
|
-
if (Array.isArray(value)) {
|
|
36
|
-
value.forEach(v => params.append(key, typeof v === "object" ? JSON.stringify(v) : String(v)));
|
|
37
|
-
} else if (typeof value === "object") {
|
|
38
|
-
params.append(key, JSON.stringify(value));
|
|
39
|
-
} else {
|
|
40
|
-
params.append(key, String(value));
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
const qs = params.toString();
|
|
45
|
-
if (qs) {
|
|
46
|
-
pathWithQuery += \`?\${qs}\`;
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
const targetUrl = \`\${baseUrl}\${pathWithQuery}\`;
|
|
51
|
-
const internalUrl = \`https://internal\${pathWithQuery}\`;
|
|
52
|
-
|
|
53
|
-
const fetchHeaders: Record<string, string> = {
|
|
54
|
-
'Content-Type': 'application/json',
|
|
55
|
-
'Cookie': c.req.header('cookie') || '',
|
|
56
|
-
...customHeaders
|
|
57
|
-
};
|
|
58
|
-
|
|
59
|
-
if (token) {
|
|
60
|
-
fetchHeaders['Authorization'] = \`Bearer \${token}\`;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
const requestInit: RequestInit = {
|
|
64
|
-
method,
|
|
65
|
-
headers: fetchHeaders,
|
|
66
|
-
body: method === "POST" ? JSON.stringify(args) : undefined
|
|
67
|
-
};
|
|
68
|
-
|
|
69
|
-
let res: Response;
|
|
70
|
-
let transport = "service-binding";
|
|
71
|
-
try {
|
|
72
|
-
if (!c.env?.INTERNAL_WORKER || typeof c.env.INTERNAL_WORKER.fetch !== "function") {
|
|
73
|
-
throw new Error("INTERNAL_WORKER binding not configured");
|
|
74
|
-
}
|
|
75
|
-
res = await c.env.INTERNAL_WORKER.fetch(internalUrl, requestInit);
|
|
76
|
-
} catch (bindingErr) {
|
|
77
|
-
transport = "url-fetch";
|
|
78
|
-
res = await fetch(targetUrl, requestInit);
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
console.log('Fetch transport:', transport, 'target:', transport === 'service-binding' ? internalUrl : targetUrl, 'status:', res.status, res.statusText);
|
|
82
|
-
const contentType = res.headers.get('content-type') || '';
|
|
83
|
-
const rawBody = await res.text();
|
|
84
|
-
let parsedBody: any = rawBody;
|
|
85
|
-
if (rawBody && contentType.includes('application/json')) {
|
|
86
|
-
try {
|
|
87
|
-
parsedBody = JSON.parse(rawBody);
|
|
88
|
-
} catch (parseErr: any) {
|
|
89
|
-
parsedBody = {
|
|
90
|
-
parseError: parseErr?.message || 'Failed to parse JSON',
|
|
91
|
-
body: rawBody
|
|
92
|
-
};
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
const result = {
|
|
97
|
-
transport,
|
|
98
|
-
method,
|
|
99
|
-
internalUrl,
|
|
100
|
-
targetUrl,
|
|
101
|
-
status: res.status,
|
|
102
|
-
statusText: res.statusText,
|
|
103
|
-
headers: Object.fromEntries(res.headers),
|
|
104
|
-
body: parsedBody
|
|
105
|
-
};
|
|
106
|
-
|
|
107
|
-
return c.html(\`
|
|
108
|
-
<div class="p-5 font-mono text-sm h-full overflow-auto">
|
|
109
|
-
<pre class="text-success"><code class="language-json">\${JSON.stringify(result, null, 2)\}</code></pre>
|
|
110
|
-
</div>
|
|
111
|
-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
|
|
112
|
-
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
|
|
113
|
-
<script>hljs.highlightAll();</script>
|
|
114
|
-
\`);
|
|
115
|
-
} catch (err: any) {
|
|
116
|
-
return c.html(\`
|
|
117
|
-
<div class="p-5 font-mono text-sm h-full overflow-auto text-error bg-error/5">
|
|
118
|
-
<p class="font-bold mb-2">Execution Error:</p>
|
|
119
|
-
<pre>\${err.message}\\n\${err.stack}</pre>
|
|
120
|
-
</div>
|
|
121
|
-
\`);
|
|
122
|
-
}
|
|
123
|
-
`;
|
|
124
|
-
}
|