Public
Script
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
export async function fetchVal(valId: string) {
try {
const response = await fetch(`https://api.val.town/v1/vals/${valId}`);
if (!response.ok) {
console.error(`Error fetching val with ID ${valId}:`, response.statusText);
return null;
}
return await response.json();
} catch (fetchError) {
console.error(`Network error fetching val ${valId}:`, fetchError);
return null;
}
}
export async function evalCode(code: string) {
try {
const response = await fetch(`https://api.val.town/v1/eval`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ code })
});
if (!response.ok) {
const errorText = await response.text();
console.error(`Error evaluating code:`, errorText);
return { error: `API Error: ${response.status} ${response.statusText}`, rawResponse: errorText };
}
const responseText = await response.text();
let result;
try {
result = JSON.parse(responseText);
} catch (e) {
// If parsing as JSON fails, use the response text as is
result = responseText;
}
console.log(`Code evaluation result:`, result);
return { result };
} catch (fetchError) {
console.error(`Network error evaluating code:`, fetchError);
return { error: 'Network error: Unable to evaluate code' };
}
}
function handleEvalCode(elementId: string) {
const element = document.getElementById(`code-${elementId}`);
if (element) {
const code = element.querySelector('code').textContent || '';
evalCode(code).then(response => {
const resultElement = document.getElementById(`preview-${elementId}`);
if (resultElement) {
if (response.error) {
resultElement.innerHTML = `<pre class="error">${response.error}</pre>`;
if (response.rawResponse) {
resultElement.innerHTML += `<pre class="raw-response">${response.rawResponse}</pre>`;
}
} else {
let displayResult = response.result;
if (typeof displayResult === 'object') {
displayResult = JSON.stringify(displayResult, null, 2);
}
resultElement.innerHTML = `<pre><code class="language-json">${escapeHtml(displayResult)}</code></pre>`;
Prism.highlightElement(resultElement.querySelector('code'));
}
}
});
} else {
console.error('Could not find code element');
}
}
export async function previewVal(valName: string, resultElementId: string) {
try {
const resultElement = document.getElementById(resultElementId);
if (resultElement) {
const valUrl = `https://iamseeley-${valName}.web.val.run`;
resultElement.innerHTML = `
<div style="padding: .4rem; border-top: 1px solid var(--val-bg-color);">
<a href="${valUrl}" target="_blank">Open in new tab</a>
</div>
<iframe src="${valUrl}" style="background-color: #fff; width: 100%; height: 300px; border: 1px solid #ccc;"></iframe>
`;
}
} catch (error) {
console.error(`Error previewing val:`, error);
const resultElement = document.getElementById(resultElementId);
if (resultElement) {
resultElement.innerHTML = `<pre class="error">${error.message}</pre>`;
}
}
}
function escapeHtml(unsafe: string) {
return unsafe
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
Comments
Nobody has commented on this val yet: be the first!
July 17, 2024