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
import { blob } from "https://esm.town/v/std/blob";
import { encodingForModel } from "npm:js-tiktoken";
const cacheBlobKey = "getValsContextWindowCache3";
export default async function getValsContextWindow(model: any) {
const fullCacheBlobKey = `${cacheBlobKey}-${model}`;
const cached = await blob.getJSON(fullCacheBlobKey);
if (cached) {
return cached;
}
const readmeVals: any = await (await fetch("https://janpaul123-readmevals.web.val.run/")).json();
const API_URL = "https://api.val.town";
const sections = [
{
name: "Imports",
templates: [
{
name: "Import from NPM",
prompt: "Write a val that imports lodash and generates a range of numbers",
code: `import _ from "npm:lodash-es";
let numbers = _.range(10);
console.log(numbers.map(n => n * 2));`,
},
{
prompt: "Write a val that imports from another val and gets the weather",
code: `import { getWeather } from "https://esm.town/v/stevekrouse/getWeather";
let weather = await getWeather("Brooklyn, NY");
console.log(weather.current_condition[0].FeelsLikeF)`,
},
],
},
{
name: "Server-Rendered JSX",
templates: [
{
type: "http",
prompt: "Generate a val that uses React to render HTML",
code: `/** @jsxImportSource https://esm.sh/react */
import { renderToString } from "npm:react-dom/server";
export const reactExample = (request: Request) =>
new Response(renderToString(<div>Test {1 + 1}</div>), {
headers: {
"Content-Type": "text/html",
},
});`,
},
{
type: "http",
prompt: "Create a val that uses Hono to render HTML",
code: `/** @jsxImportSource npm:hono@3/jsx */
import { Hono } from "npm:hono";
const app = new Hono();
app.get("/", async (c) => {
return c.html(
<div>
<form>
Your name: <input type="text" name="name" /> <input type="submit" />
</form>
Hello {c.req.query("name")}
</div>,
);
});
export default app.fetch;`,
},
{
type: "http",
prompt: null,
code: `/** @jsxImportSource https://esm.sh/preact */
import { render } from "npm:preact-render-to-string";
export const preactExample = (request: Request) =>
new Response(render(<div>Test {1 + 1}</div>), {
headers: {
"Content-Type": "text/html",
},
});`,
},
{
type: "http",
prompt: null,
code: `/** @jsxImportSource https://esm.sh/vue */
import { renderToString } from "npm:vue/server-renderer";
export const vueExample = async (request: Request) =>
new Response(await renderToString(<div>Test {1 + 1}</div>), {
headers: {
"Content-Type": "text/html",
},
});`,
},
],
},
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!
August 5, 2024