Val Town Code SearchReturn to Val Town

221
222    // Inject data to avoid extra round-trips
223    const initialData = await fetchInitialData();
224    const dataScript = `<script>
225      window.__INITIAL_DATA__ = ${JSON.stringify(initialData)};
268
2695. **API Design:**
270   - `fetch` handler is the entry point for HTTP vals
271   - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`
272
2736. **Hono Peculiarities:**

44}
45
46interface FetchResult {
47  html: string;
48  contentLength: number;
50}
51
52async function fetchContent(
53  url: string,
54  reqHeaders: Headers,
55): Promise<FetchResult | null> {
56  console.log(`Fetching URL: ${url}`);
57
58  // Copy certain headers from the original request
66  // });
67
68  // Add Accept-Encoding header to request common compression types supported by fetch()
69  headers["accept-encoding"] = "gzip, deflate, br";
70
71  console.debug(`DEBUG: -> Request headers:`, headers);
72
73  const response = await fetch(url, { headers });
74  console.debug(`DEBUG: -> Status: ${response.status}`);
75
76  if (!response.ok) {
77    console.error(
78      `Failed to fetch ${url}: ${response.status} ${response.statusText}`,
79    );
80    return null;
596
597  try {
598    const fetchResult = await fetchContent(targetUrl, req.headers);
599    if (!fetchResult) {
600      return new Response("Failed to fetch content", { status: 502 });
601    }
602
603    const { html, contentLength, compression } = fetchResult;
604
605    let processingMode = determineProcessingMode(req.url, targetUrl, html);

11    forwardedHeaders.delete("host");
12
13    const res = await fetch(targetUrl, {
14      method: req.method,
15      headers: forwardedHeaders,

362  
363  try {
364    // Fetch the source code
365    const response = await fetch(sourceUrl);
366    if (!response.ok) {
367      return c.text(`Failed to fetch source: ${response.status}`, 404);
368    }
369    
611        async function detectBlock(code, line, column) {
612            if (blockDetectorUrl) {
613                const response = await fetch(blockDetectorUrl, {
614                    method: 'POST',
615                    headers: { 'Content-Type': 'application/json' },
624        async function explainBlock(code, blockInfo) {
625            if (blockExplainerUrl) {
626                const response = await fetch(blockExplainerUrl, {
627                    method: 'POST',
628                    headers: { 'Content-Type': 'application/json' },
770}
771
772export default app.fetch;

39```
40
41This will fetch the source from `https://esm.town/v/nbbaier/sqliteExplorerApp@100-main/main.tsx` and display it with annotations.
42
43### Custom Functions
136
1371. **URL Parsing**: Extracts the val path from the URL
1382. **Source Fetching**: Fetches source code from `https://esm.town/v/{path}`
1393. **Language Detection**: Determines language from file extension
1404. **Syntax Highlighting**: Applies syntax highlighting using Prism.js
155## Error Handling
156
157- Returns 404 if the source URL cannot be fetched
158- Returns 400 for invalid path formats
159- Returns 500 for other errors with error messages

82  const mutation = useMutation({
83    mutationFn: async () => {
84      const res = await fetch("/api/random-dewey");
85      if (!res.ok) {
86        throw new Error(
87          "Failed to fetch random numbers. The quantum source might be temporarily unavailable."
88        );
89      }

199});
200
201export default lastlogin((request: Request) => app.fetch(request));

231  const [isDragging, setIsDragging] = useState(false);
232
233  const fetchBlobs = useCallback(async () => {
234    setLoading(true);
235    try {
236      const response = await fetch(`/api/blobs?prefix=${encodeKey(searchPrefix)}&limit=${limit}`);
237      const data = await response.json();
238      setBlobs(data);
239    } catch (error) {
240      console.error("Error fetching blobs:", error);
241    } finally {
242      setLoading(false);
245
246  useEffect(() => {
247    fetchBlobs();
248  }, [fetchBlobs]);
249
250  const handleSearch = (e) => {
261      setBlobContentLoading(true);
262      try {
263        const response = await fetch(`/api/blob?key=${encodeKey(clickedBlob.key)}`);
264        const content = await response.text();
265        setSelectedBlob({ ...clickedBlob, key: decodeKey(clickedBlob.key) });
266        setEditContent(content);
267      } catch (error) {
268        console.error("Error fetching blob content:", error);
269      } finally {
270        setBlobContentLoading(false);
275  const handleSave = async () => {
276    try {
277      await fetch(`/api/blob?key=${encodeKey(selectedBlob.key)}`, {
278        method: "PUT",
279        body: editContent,
287  const handleDelete = async (key) => {
288    try {
289      await fetch(`/api/blob?key=${encodeKey(key)}`, { method: "DELETE" });
290      setBlobs(blobs.filter(b => b.key !== key));
291      if (selectedBlob && selectedBlob.key === key) {
304        const key = `${searchPrefix}${file.name}`;
305        formData.append("key", encodeKey(key));
306        await fetch("/api/blob", { method: "POST", body: formData });
307        const newBlob = { key, size: file.size, lastModified: new Date().toISOString() };
308        setBlobs([newBlob, ...blobs]);
312      }
313    }
314    fetchBlobs();
315  };
316
326      try {
327        const fullKey = `${searchPrefix}${key}`;
328        await fetch(`/api/blob?key=${encodeKey(fullKey)}`, {
329          method: "PUT",
330          body: "",
341  const handleDownload = async (key) => {
342    try {
343      const response = await fetch(`/api/blob?key=${encodeKey(key)}`);
344      const blob = await response.blob();
345      const url = window.URL.createObjectURL(blob);
360    if (newKey && newKey !== oldKey) {
361      try {
362        const response = await fetch(`/api/blob?key=${encodeKey(oldKey)}`);
363        const content = await response.blob();
364        await fetch(`/api/blob?key=${encodeKey(newKey)}`, {
365          method: "PUT",
366          body: content,
367        });
368        await fetch(`/api/blob?key=${encodeKey(oldKey)}`, { method: "DELETE" });
369        setBlobs(blobs.map(b => b.key === oldKey ? { ...b, key: newKey } : b));
370        if (selectedBlob && selectedBlob.key === oldKey) {
380    const newKey = `__public/${key}`;
381    try {
382      const response = await fetch(`/api/blob?key=${encodeKey(key)}`);
383      const content = await response.blob();
384      await fetch(`/api/blob?key=${encodeKey(newKey)}`, {
385        method: "PUT",
386        body: content,
387      });
388      await fetch(`/api/blob?key=${encodeKey(key)}`, { method: "DELETE" });
389      setBlobs(blobs.map(b => b.key === key ? { ...b, key: newKey } : b));
390      if (selectedBlob && selectedBlob.key === key) {
399    const newKey = key.slice(9); // Remove "__public/" prefix
400    try {
401      const response = await fetch(`/api/blob?key=${encodeKey(key)}`);
402      const content = await response.blob();
403      await fetch(`/api/blob?key=${encodeKey(newKey)}`, {
404        method: "PUT",
405        body: content,
406      });
407      await fetch(`/api/blob?key=${encodeKey(key)}`, { method: "DELETE" });
408      setBlobs(blobs.map(b => b.key === key ? { ...b, key: newKey } : b));
409      if (selectedBlob && selectedBlob.key === key) {

1export async function urlGetter(sourceURl) {
2  // convert object to array containing arrays with key value pairs. use map to iterate over the values then convert arrays to objects
3  const response = await fetch(sourceURl);
4  const html = await response.text();
5  const matches = [...html.matchAll(/<a[^>]*href="([^"]+)"[^>]*>(.*?)<\/a>/g)].map((match) => match[1]);

37});
38
39export default app.fetch; // This is the entry point for HTTP vals
40