Val Town Code SearchReturn to Val Town

21});
22
23// HTTP vals expect an exported "fetch handler"
24// This is how you "run the server" in Val Town with Hono
25export default app.fetch;

28  const [isDragging, setIsDragging] = useState(false);
29
30  // Use custom hook to fetch project files
31  const {
32    projectFiles,

1import { useState, useEffect } from "https://esm.sh/react@18.2.0?dev";
2import { fetchProjectFiles } from "../utils/api.ts";
3
4interface UseProjectFilesProps {
15
16/**
17 * Custom hook to fetch and manage project files
18 */
19export function useProjectFiles({
38      
39      try {
40        const filesData = await fetchProjectFiles({
41          bearerToken,
42          projectId,
51        }
52      } catch (err) {
53        console.error("Error fetching project files:", err);
54        setProjectFiles([]);
55        setError(err instanceof Error ? err : new Error(String(err)));

71```
72
735. **fetchTranspiledJavaScript** - Fetch and transpile TypeScript to JavaScript:
74```ts
75const jsCode = await fetchTranspiledJavaScript("https://esm.town/v/username/project/path/to/file.ts");
76```
77
200    
201    // Inject data to avoid extra round-trips
202    const initialData = await fetchInitialData();
203    const dataScript = `<script>
204      window.__INITIAL_DATA__ = ${JSON.stringify(initialData)};
258
2595. **API Design:**
260   - `fetch` handler is the entry point for HTTP vals
261   - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`
262   - Properly handle CORS if needed for external access

10
11async function loader({ bearerToken }: { bearerToken: string }) {
12  const data = await (await fetch("/api/projects-loader", {
13    headers: {
14      "Authorization": "Bearer " + bearerToken,

28});
29
30export default app.fetch;

128  }
129
130  // If there are selected files, fetch their content and add them to the messages
131  if (selectedFiles && selectedFiles.length > 0) {
132    const vt = new ValTown({ bearerToken });
148          fileContents += `## File: ${filePath}\n\`\`\`\n${content}\n\`\`\`\n\n`;
149        } catch (error) {
150          console.error(`Error fetching file ${filePath}:`, error);
151          fileContents += `## File: ${filePath}\nError: Could not fetch file content\n\n`;
152        }
153      }
260    return c.json({ files: files.data });
261  } catch (error) {
262    console.error("Error fetching project files:", error);
263    return Response.json({ error: "Failed to fetch project files" }, { status: 500 });
264  }
265});
282    return c.json({ branches: branches.data });
283  } catch (error) {
284    console.error("Error fetching branches:", error);
285    return Response.json({ error: "Failed to fetch branches" }, { status: 500 });
286  }
287});

43    
44    try {
45      const response = await fetch("/api/create-branch", {
46        method: "POST",
47        headers: {

26  const [images, setImages] = useState<(string | null)[]>([]);
27
28  // Use custom hook to fetch project files
29  const {
30    projectFiles,

30  const [showCreateBranch, setShowCreateBranch] = useState<boolean>(false);
31
32  // Fetch branches when project changes
33  useEffect(() => {
34    if (!projectId) return;
35
36    const fetchBranches = async () => {
37      setIsLoadingBranches(true);
38      try {
39        const response = await fetch(`/api/project-branches?projectId=${projectId}`, {
40          headers: {
41            "Authorization": `Bearer ${bearerToken}`,
44
45        if (!response.ok) {
46          throw new Error(`Failed to fetch branches: ${response.statusText}`);
47        }
48
49        const data = await response.json();
50        const fetchedBranches = data.branches || [];
51        setBranches(fetchedBranches);
52
53        // Check if the stored branchId is valid for this project
54        const storedBranchIsValid = fetchedBranches.some((branch: Branch) => branch.id === branchId);
55
56        // Only set a new branchId if there isn't a valid one already stored
57        if (!storedBranchIsValid && fetchedBranches.length > 0) {
58          // If branches are loaded and there's a "main" branch, select it by default
59          const mainBranch = fetchedBranches.find((branch: Branch) => branch.name === "main");
60          if (mainBranch) {
61            setBranchId(mainBranch.id);
63          } else {
64            // Otherwise select the first branch
65            setBranchId(fetchedBranches[0].id);
66            setSelectedBranchName(fetchedBranches[0].name);
67          }
68        } else if (storedBranchIsValid) {
69          // Set the selected branch name based on the stored branchId
70          const selectedBranch = fetchedBranches.find((branch: Branch) => branch.id === branchId);
71          if (selectedBranch) {
72            setSelectedBranchName(selectedBranch.name);
74        }
75      } catch (error) {
76        console.error("Error fetching branches:", error);
77      } finally {
78        setIsLoadingBranches(false);
80    };
81
82    fetchBranches();
83  }, [projectId, bearerToken, branchId, setBranchId]);
84
105    // Refresh the branches list
106    if (projectId) {
107      const fetchBranches = async () => {
108        try {
109          const response = await fetch(`/api/project-branches?projectId=${projectId}`, {
110            headers: {
111              "Authorization": `Bearer ${bearerToken}`,
114
115          if (!response.ok) {
116            throw new Error(`Failed to fetch branches: ${response.statusText}`);
117          }
118
119          const data = await response.json();
120          const fetchedBranches = data.branches || [];
121          setBranches(fetchedBranches);
122
123          // Update the selected branch name
124          const selectedBranch = fetchedBranches.find((branch: Branch) => branch.id === newBranchId);
125          if (selectedBranch) {
126            setSelectedBranchName(selectedBranch.name);
127          }
128        } catch (error) {
129          console.error("Error fetching branches:", error);
130        }
131      };
132
133      fetchBranches();
134    }
135  };