Readme
Go to /v/username/valname/version to see a diff between that version and the previous one. For example https://saolsen-changes.web.val.run/v/saolsen/tracing/108
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
/* @jsxImportSource https://esm.sh/hono/jsx */
import { Hono } from "npm:hono";
import { html } from "npm:hono/html";
import { track } from "https://esm.town/v/saolsen/plausible?v=3";
import {
init,
traced_fetch,
traced_handler,
} from "https://esm.town/v/saolsen/tracing";
init("changes");
const app = new Hono();
app.get("/", (c) => {
return c.html(
<div>
Go to `/v/:user/:val` to see the latest version of a val, or
`/v/:user/:val/:version` to see a specific version. For example,{" "}
<a href="/v/saolsen/tracing/108">/v/saolsen/tracing/108</a>
</div>
);
});
type Val = {
user: string;
val: string;
version: number;
body: string;
};
async function get_val(
user: string,
val: string,
version: number | null = null
): Promise<Val> {
let val_req_url = `https://esm.town/v/${user}/${val}`;
if (version !== null) {
val_req_url = `${val_req_url}?v=${version}`;
}
const val_resp: Response = await traced_fetch(val_req_url);
const val_version = Number(val_resp.url.split("?v=")[1]);
const val_body: string = await val_resp.text();
return {
user,
val,
version: val_version,
body: val_body,
};
}
function show_val(
latest_version: number,
val: Val,
prev_val: Val | null = null
): HtmlEscapedString {
return (
<html>
<head>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
></meta>
<link
rel="stylesheet"
data-name="vs/editor/editor.main"
href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs/editor/editor.main.min.css"
></link>
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.26.1/min/vs/loader.min.js"></script>
</head>
<body>
<div>
{prev_val !== null && (
<a href={`/v/${val.user}/${val.val}/${prev_val.version}`}>
{"<"} v{prev_val.version}
</a>
)}
<strong style="margin: 0 1em">
{val.user}/{val.val} v{val.version}
</strong>
{latest_version !== val.version && (
<a href={`/v/${val.user}/${val.val}/${val.version + 1}`}>
v{val.version + 1} {">"}
</a>
)}
<div>
<div id="container"></div>
</div>
</div>
{html`
<script type="module">
function unescape(str) {
return str.replace(
/&|<|>|'|"/g,
(tag) =>
({
"&": "&",
"<": "<",
">": ">",
"'": "'",
👆 This is a val. Vals are TypeScript snippets of code, written in the browser and run on our servers. Create scheduled functions, email yourself, and persist small pieces of data — all from the browser.