\n \n \n",[18,148],"3f64db48-febb-11ef-bbc6-569c3dd06744","components","cfe236b9-34b8-4706-896a-eaa2dc12403b",["D",1741726564761],[18,154],"pulls","branches",2,"forks","envVars",{"_166":26,"_168":26},"connections",{"_166":26,"_167":26},"count","unfilledCount","emptyCount",{"_38":215,"_13":214,"_32":207,"_128":-5,"_129":81,"_130":131,"_132":24,"_40":216,"_79":26,"_34":35,"_134":-5,"_36":30,"_135":-5,"_182":217,"_17":218},{"_38":204,"_13":205,"_32":206,"_128":207,"_129":81,"_130":80,"_132":24,"_40":208,"_79":209,"_34":210,"_134":211,"_36":30,"_135":-5,"_182":212,"_17":213},{"_38":127,"_13":18,"_32":33,"_128":-5,"_129":81,"_130":131,"_132":24,"_40":201,"_79":26,"_34":35,"_134":-5,"_36":30,"_135":-5,"_182":202,"_17":203},{"_38":153,"_13":154,"_32":155,"_128":33,"_129":81,"_130":131,"_132":24,"_40":198,"_79":26,"_34":35,"_134":-5,"_36":30,"_135":-5,"_182":199,"_17":200},{"_38":191,"_13":192,"_32":193,"_128":155,"_129":81,"_130":131,"_132":24,"_40":194,"_79":26,"_34":144,"_134":195,"_36":30,"_135":-5,"_182":196,"_17":197},{"_38":147,"_13":148,"_32":149,"_128":33,"_129":81,"_130":131,"_132":24,"_40":188,"_79":26,"_34":21,"_134":151,"_36":30,"_135":-5,"_182":189,"_17":190},{"_38":140,"_13":141,"_32":142,"_128":33,"_129":81,"_130":131,"_132":24,"_40":185,"_79":26,"_34":144,"_134":145,"_36":30,"_135":-5,"_182":186,"_17":187},{"_38":177,"_13":178,"_32":179,"_128":-5,"_129":81,"_130":131,"_132":24,"_40":180,"_79":26,"_34":21,"_134":181,"_36":30,"_135":-5,"_182":183,"_17":184},"3f64e12e-febb-11ef-bbc6-569c3dd06744","README.md","b3bb43e8-8d50-416b-8a9b-acf726b84112",["D",1741726564761],"# React Hono Starter\n\nThis app is a starter template for client-side React and server-side Hono.\n\nThe **entrypoint** is `/backend/index.ts`. That's the backend HTTP server, which also serves the all the frontend assets.\n\nThe **client-side entrypoint** is `/frontend/index.html`, which in turn imports `/frontend/index.tsx`, which in turn imports the React app from `/frontend/components/App.tsx`.\n\n[React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) is a fuller featured example project, with a SQLite database table, queries, client-side CSS and a favicon, and some shared code that runs on both client and server.","children",[],[178],["D",1741726564761],[],[18,141],["D",1741726564761],[],[18,148],"3f64d710-febb-11ef-bbc6-569c3dd06744","App.tsx","baa5e0ea-7ff5-4a2f-a3c7-48529a5ca631",["D",1741726564761],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function App() {\n const [projectUrl, setProjectUrl] = useState(\"\");\n const [apiToken, setApiToken] = useState(\"\");\n const [loading, setLoading] = useState(false);\n const [message, setMessage] = useState(\"\");\n const [error, setError] = useState(\"\");\n\n const handleFork = async (e) => {\n e.preventDefault();\n setLoading(true);\n setMessage(\"\");\n setError(\"\");\n\n try {\n // Simple validation\n if (!projectUrl.trim()) {\n throw new Error(\"Please enter a valid project URL\");\n }\n\n if (!apiToken.trim()) {\n throw new Error(\"API Token is required\");\n }\n\n const response = await fetch(`/import-github?url=${encodeURIComponent(projectUrl)}`, {\n method: \"POST\",\n headers: {\n \"Authorization\": `Bearer ${apiToken}`,\n \"Content-Type\": \"application/json\",\n },\n });\n\n if (!response.ok) {\n const errorData = await response.json();\n throw new Error(errorData.message || \"Failed to fork the project\");\n }\n\n const result = await response.json();\n\n setMessage(`Successfully forked project: ${projectUrl}!`);\n } catch (err) {\n setError(err.message || \"An error occurred while forking the project\");\n } finally {\n setLoading(false);\n }\n };\n\n return (\n

Import from Github

\n\n

\n \n Github Repo Url\n \n setProjectUrl(e.target.value)}\n placeholder=\"https://github.com/...\"\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-500\"\n />\n

\n\n

\n \n Val Town API Token (project read + write permissions)\n \n setApiToken(e.target.value)}\n placeholder=\"Enter your API token\"\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-500\"\n />\n

\n\n \n {loading ? \"Forking...\" : \"Fork\"}\n \n \n\n {message && (\n

\n {message}\n

\n )}\n\n {error && (\n

\n {error}\n

\n )}\n

\n );\n}\n\nexport default App;",[],[18,154,192],["D",1741726564761],[173],[18,154],["D",1741726564761],[172,174,175],[18],"25fa88f0-febc-11ef-bff2-569c3dd06744","index.ts","9b5743d6-4cfd-4e85-84bc-ff3134679397","b8d3ea91-b7df-40c4-a9da-7f35dcaa01d6",["D",1741726951619],3,"http","import { listFiles } from \"https://esm.town/v/std/utils/index.ts\";\nimport { parseProject, serveFile } from \"https://esm.town/v/std/utils@64-main/index.ts\";\nimport ValTown from \"npm:@valtown/sdk\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\n// Serve index.html at the root /\napp.get(\"/\", async c => {\n return serveFile(\"/frontend/index.html\", import.meta.url);\n});\n\napp.post(\"/import-github\", async c => {\n try {\n const repoUrl = c.req.query(\"url\");\n const authHeader = c.req.header(\"Authorization\");\n\n let authToken = null;\n if (authHeader && authHeader.startsWith(\"Bearer \")) {\n authToken = authHeader.substring(7);\n }\n\n if (!repoUrl || !authToken) {\n return c.json({\n success: false,\n error: \"Missing required parameter: url or auth token\",\n }, 400);\n }\n\n const authenticatedVt = new ValTown({\n bearerToken: authToken,\n });\n\n // Parse GitHub URL to get owner and repo name\n const { owner, repo } = parseGitHubRepoURL(repoUrl);\n\n if (!owner || !repo) {\n return c.json({\n success: false,\n error: \"Missing required parameters: owner and repo\",\n }, 400);\n }\n\n // Create a new Val.town project\n let newProject;\n try {\n newProject = await authenticatedVt.projects.create({\n privacy: \"public\",\n name: `${repo}-${Date.now().toString()}`,\n description: `Imported from GitHub: ${owner}/${repo}`,\n });\n console.log(\"New project created:\", newProject);\n } catch (error) {\n console.error(\"Error creating project:\", error);\n return c.json({\n success: false,\n error: `Error creating project: ${error.message || error}`,\n status: error.status,\n statusText: error.statusText,\n }, 400);\n }\n\n // Get all files from GitHub repo\n console.log(\"Fetching files from GitHub\");\n try {\n const files = await fetchGitHubRepoContents(owner, repo);\n console.log(\"Files fetched:\", files.length);\n\n // Create files in Val.town project\n const result = await createFilesInValTown(authenticatedVt, files, newProject.id);\n console.log(\"Files copied:\", result.successful.length);\n console.log(\"Files skipped:\", result.skipped.length);\n } catch (error) {\n console.error(\"Error copying files:\", error);\n return c.json({\n success: false,\n error: `Error copying files: ${error.message || error}`,\n }, 400);\n }\n\n return c.json({\n success: true,\n newProject: newProject,\n }, 200);\n } catch (error) {\n console.error(\"Unexpected error:\", error);\n return c.json({\n success: false,\n error: `Unexpected error: ${error.message || error}`,\n stack: error.stack,\n }, 500);\n }\n});\n\n// Parse GitHub repo URL to extract owner and repo name\nfunction parseGitHubRepoURL(url: string): { owner: string; repo: string } {\n try {\n // Use the URL constructor to parse the URL\n const parsedUrl = new URL(url);\n\n // Handle both github.com URLs and API URLs\n if (!parsedUrl.hostname.includes(\"github.com\")) {\n throw new Error(\"Not a GitHub URL\");\n }\n\n // Split the pathname and filter out empty segments\n const parts = parsedUrl.pathname.split(\"/\").filter(Boolean);\n\n // GitHub URLs have format: github.com/owner/repo\n if (parts.length < 2) {\n throw new Error(\"Invalid GitHub URL structure\");\n }\n\n return {\n owner: parts[0],\n repo: parts[1],\n };\n } catch (error) {\n console.error(\"Error parsing GitHub URL:\", error);\n throw new Error(`Invalid GitHub URL: ${error.message}`);\n }\n}\n\n// Fetch all files and their content from a GitHub repository\nasync function fetchGitHubRepoContents(owner: string, repo: string, path: string = \"\") {\n const files: Array<{\n path: string;\n type: string;\n content: string;\n download_url?: string;\n }> = [];\n\n try {\n // GitHub API URL for repo contents\n const apiUrl = `https://api.github.com/repos/${owner}/${repo}/contents/${path}`;\n console.log(`Fetching from: ${apiUrl}`);\n\n const response = await fetch(apiUrl, {\n headers: {\n \"Accept\": \"application/vnd.github.v3+json\",\n \"User-Agent\": \"ValTown-GitHub-Importer\",\n },\n });\n\n if (!response.ok) {\n throw new Error(`GitHub API error: ${response.status} ${response.statusText}`);\n }\n\n const contents = await response.json();\n\n // Handle array response (directory) or object response (file)\n const items = Array.isArray(contents) ? contents : [contents];\n\n for (const item of items) {\n if (item.type === \"file\") {\n // Fetch file content\n let content;\n if (item.download_url) {\n const contentResponse = await fetch(item.download_url);\n if (contentResponse.ok) {\n content = await contentResponse.text();\n } else {\n console.error(`Failed to fetch content for ${item.path}: ${contentResponse.status}`);\n content = \"\";\n }\n } else if (item.content && item.encoding === \"base64\") {\n // Some API responses include base64 encoded content\n content = Buffer.from(item.content, \"base64\").toString(\"utf8\");\n } else {\n console.error(`No content available for ${item.path}`);\n content = \"\";\n }\n\n files.push({\n path: item.path,\n type: \"file\",\n content,\n });\n } else if (item.type === \"dir\") {\n // Recursively fetch contents of subdirectories\n const subFiles = await fetchGitHubRepoContents(owner, repo, item.path);\n files.push(...subFiles);\n }\n }\n\n return files;\n } catch (error) {\n console.error(`Error fetching GitHub contents for ${owner}/${repo}/${path}:`, error);\n throw error;\n }\n}\n\n// Map GitHub file extension to Val.town file type\nfunction mapFileTypeForValTown(filePath: string): string | null {\n const extension = filePath.split(\".\").pop()?.toLowerCase();\n\n // Handle HTML files\n if (extension === \"html\" || extension === \"htm\") {\n return \"http\";\n }\n // Handle markdown files\n else if (extension === \"md\" || extension === \"markdown\") {\n return \"file\";\n }\n // Handle script files\n else if ([\"js\", \"ts\", \"tsx\", \"jsx\"].includes(extension || \"\")) {\n return \"script\";\n }\n // TODO possibly remove files in other languages?\n // Handle common text file types\n else if (\n [\n \"txt\",\n \"css\",\n \"json\",\n \"yml\",\n \"yaml\",\n \"xml\",\n \"csv\",\n \"svg\",\n \"sh\",\n \"bat\",\n \"py\",\n \"rb\",\n \"php\",\n \"java\",\n \"c\",\n \"cpp\",\n \"h\",\n \"cs\",\n \"go\",\n \"rs\",\n \"toml\",\n \"ini\",\n ].includes(extension || \"\")\n ) {\n return \"file\";\n }\n // For other types, return null to indicate non-text or unsupported\n else {\n return null;\n }\n}\n\nfunction transformHtmlContent(htmlContent: string): string {\n return `export default function server(request: Request): Response {\n return new Response(\n \\`${htmlContent}\\`,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}`;\n}\n\n// TODO could be doing this with a library\n// Check if file is likely binary based on extension\nfunction isProbablyBinaryFile(filePath: string): boolean {\n const binaryExtensions = [\n \"png\",\n \"jpg\",\n \"jpeg\",\n \"gif\",\n \"bmp\",\n \"ico\",\n \"webp\",\n \"tiff\", // Images\n \"pdf\",\n \"doc\",\n \"docx\",\n \"xls\",\n \"xlsx\",\n \"ppt\",\n \"pptx\", // Documents\n \"zip\",\n \"rar\",\n \"tar\",\n \"gz\",\n \"7z\", // Archives\n \"mp3\",\n \"mp4\",\n \"wav\",\n \"avi\",\n \"mov\",\n \"webm\", // Media\n \"exe\",\n \"dll\",\n \"so\",\n \"dylib\", // Binaries\n \"ttf\",\n \"otf\",\n \"woff\",\n \"woff2\", // Fonts\n ];\n\n const extension = filePath.split(\".\").pop()?.toLowerCase();\n return binaryExtensions.includes(extension || \"\");\n}\n\n// Create files in the Val.town project\nasync function createFilesInValTown(authenticatedVT: any, files: any[], newProjectId: string) {\n console.log(`Processing ${files.length} files`);\n\n const failedFiles: Array<{ path: string; error: string }> = [];\n const successfulFiles: Array<{ name: string }> = [];\n const skippedFiles: Array<{ path: string; reason: string }> = [];\n\n for (const file of files) {\n try {\n const urlEncodedPath = encodeURIComponent(file.path);\n console.log(`Processing file: ${file.path} (encoded: ${urlEncodedPath})`);\n\n // // Map the file type for Val.town\n // const valTownFileType = mapFileTypeForValTown(file.path);\n\n // if (valTownFileType === \"http\") {\n // file.content = transformHtmlContent(file.content);\n // }\n\n // // Skip binary or unsupported files\n // if (!valTownFileType) {\n // const reason = isProbablyBinaryFile(file.path)\n // ? \"binary file detected\"\n // : \"unsupported file type\";\n // console.log(`Skipping file ${file.path}: ${reason}`);\n // skippedFiles.push({\n // path: file.path,\n // reason: reason,\n // });\n // continue;\n // }\n\n console.log(`Creating file in new project: ${file.path} (type: file`);\n const responseCreation = await authenticatedVT.projects.files.create(newProjectId, urlEncodedPath, {\n content: file.content,\n type: \"file\",\n });\n\n if (!responseCreation) {\n throw new Error(`Could not create file: ${file.path}`);\n }\n\n console.log(`File created successfully: ${file.path}`);\n successfulFiles.push({\n name: file.path,\n });\n } catch (error) {\n console.error(`Error processing file ${file.path} with content ${file.content} :`, error);\n failedFiles.push({\n path: file.path,\n error: error.message || String(error),\n });\n }\n }\n\n // Log summary of skipped files\n if (skippedFiles.length > 0) {\n console.log(`Skipped ${skippedFiles.length} files that couldn't be processed:`);\n skippedFiles.forEach(file => {\n console.log(`- ${file.path}: ${file.reason}`);\n });\n }\n\n if (failedFiles.length > 0) {\n console.error(`Failed to process ${failedFiles.length} files`);\n const failedFilesList = failedFiles.map(f => `'${f.path}': ${f.error}`).join(\", \");\n throw new Error(`Failed to process files: ${failedFilesList}`);\n }\n\n return {\n successful: successfulFiles,\n skipped: skippedFiles,\n };\n}\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Add your API routes here\n// app.get(\"/api/data\", c => c.json({ hello: \"world\" }));\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err, c) => {\n throw err;\n});\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;",[],[214,205],"backend","3f64d4fe-febb-11ef-bbc6-569c3dd06744",["D",1741726564761],[170],[214],["D",1741716304952],{"_11":12,"_98":94},{"_11":12,"_92":-5,"_93":94,"_31":49,"_95":96,"_97":30},{"_79":80,"_13":16,"_38":81,"_82":39,"_83":84,"_85":86,"_87":45,"_88":39,"_89":58,"_90":14,"_91":12},"ctx",{"_72":-5,"_118":256,"_257":258,"_259":260,"_261":30,"_262":30,"_263":30,"_264":24,"_265":-5,"_266":-7,"_267":-7,"_268":26,"_269":30,"_270":30,"_271":-5,"_272":30,"_273":30,"_274":30,"_275":-5},"ENV",{"_227":228,"_229":230,"_231":124,"_232":233,"_234":235,"_236":237,"_238":239,"_240":241,"_242":243,"_244":245,"_246":247,"_248":249,"_250":251,"_252":253,"_254":255},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · frontend