Public
HTTP (deprecated)
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
/** @jsx jsx */
import { Hono } from "https://deno.land/x/hono@v3.1.3/mod.ts";
import { jsx } from "https://deno.land/x/hono@v3.1.3/middleware.ts";
import { fetchJSON } from "https://esm.town/v/stevekrouse/fetchJSON";
const app = new Hono();
app.post("/eval", async (c) => {
const payload = await c.req.json();
console.log('evaling using:', Deno.env.get('valtown'))
const response = await fetchJSON('https://api.val.town/v1/eval', {
method: 'POST',
body: JSON.stringify(payload),
headers: {
'Authorization': `Bearer ${Deno.env.get('valtown')}`,
'Content-Type': 'application/json'
},
});
return c.json(response);
});
// Server-side rendering
app.get("/", async (c) => {
const html = (
<html>
<head>
<title>Val Town Eval Sandbox</title>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<style>{`
.loader {
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
width: 30px;
height: 30px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
`}</style>
</head>
<body x-data="{
code: '',
result: '',
isEvaluating: false,
elapsedTime: 0,
async evaluate() {
this.isEvaluating = true;
this.elapsedTime = 0;
this.startTimer();
try {
const payload = { code: this.code };
console.log('Sending payload:', payload);
const response = await fetch('/eval', {
method: 'POST',
body: JSON.stringify(payload),
headers: {
'Content-Type': 'application/json'
}
});
const data = await response.json();
console.log('Received response:', data);
this.result = JSON.stringify(data, null, 2);
} catch (error) {
console.error('Error:', error);
this.result = JSON.stringify(error, null, 2);
} finally {
this.isEvaluating = false;
this.stopTimer();
}
},
startTimer() {
this.timer = setInterval(() => {
this.elapsedTime++;
}, 1000);
},
stopTimer() {
clearInterval(this.timer);
}
}">
<h1>Val Town Eval Sandbox</h1>
<div>
<textarea
x-model="code"
rows="8"
cols="50"
placeholder="Enter code to evaluate (e.g. 5+3)"
></textarea>
</div>
<div>
<pre x-text="JSON.stringify({ code }, null, 2)"></pre>
</div>
<div>
<button
x-on:click="evaluate()"
x-bind:disabled="isEvaluating"
>