\n \n \n",[18,138],"5c5855bc-fea3-11ef-bc5c-569c3dd06744","components","c4231e45-62e1-4b58-91ce-8c2a200e2e0d",5,["D",1741716305413],[18,145],"pulls","branches","forks",1,"envVars",{"_158":26,"_160":26},"connections",{"_158":26,"_159":26},"count","unfilledCount","emptyCount",{"_38":208,"_13":207,"_32":200,"_118":-5,"_119":80,"_120":209,"_122":24,"_40":210,"_79":26,"_34":35,"_124":-5,"_36":30,"_125":-5,"_175":211,"_17":212},{"_38":198,"_13":199,"_32":51,"_118":200,"_119":80,"_120":55,"_122":24,"_40":201,"_79":202,"_34":203,"_124":204,"_36":30,"_125":-5,"_175":205,"_17":206},{"_38":117,"_13":18,"_32":33,"_118":-5,"_119":80,"_120":121,"_122":24,"_40":195,"_79":26,"_34":35,"_124":-5,"_36":30,"_125":-5,"_175":196,"_17":197},{"_38":144,"_13":145,"_32":146,"_118":33,"_119":80,"_120":147,"_122":24,"_40":192,"_79":26,"_34":35,"_124":-5,"_36":30,"_125":-5,"_175":193,"_17":194},{"_38":184,"_13":185,"_32":186,"_118":146,"_119":80,"_120":187,"_122":24,"_40":188,"_79":140,"_34":134,"_124":189,"_36":30,"_125":-5,"_175":190,"_17":191},{"_38":137,"_13":138,"_32":139,"_118":33,"_119":80,"_120":140,"_122":24,"_40":181,"_79":26,"_34":21,"_124":142,"_36":30,"_125":-5,"_175":182,"_17":183},{"_38":130,"_13":131,"_32":132,"_118":33,"_119":80,"_120":121,"_122":24,"_40":178,"_79":26,"_34":134,"_124":135,"_36":30,"_125":-5,"_175":179,"_17":180},{"_38":169,"_13":170,"_32":171,"_118":-5,"_119":80,"_120":172,"_122":24,"_40":173,"_79":121,"_34":21,"_124":174,"_36":30,"_125":-5,"_175":176,"_17":177},"a78ddd66-0035-11f0-8bc6-569c3dd06744","README.md","5c2c1510-fea3-11ef-a9f8-569c3dd06744",16,["D",1741889089277],"# Import From Github\n\nImport any repo from Github to a Val Town project with a mere copy, paste and go. \n\nAnything that may be binary is skipped.","children",[],[170],["D",1741716305191],[],[18,131],["D",1741716305353],[],[18,138],"9e00cb42-0034-11f0-a2bb-569c3dd06744","App.tsx","5c584bb2-fea3-11ef-bc5c-569c3dd06744",15,["D",1741888643757],"/** @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 ? \"Importing...\" : \"Import\"}\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,145,185],["D",1741716305413],[165],[18,145],["D",1741716305191],[164,166,167],[18],"3ec6528e-2058-11f0-8df5-569c3dd06744","index.ts","c3ec93ff-458f-43d8-962d-300bf8b1e097",["D",1745422383076],11,"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.vals.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 console.log(`Processing file: ${file.path}`);\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: ${valTownFileType})`);\n console.log(`content: ${file.content}`);\n const responseCreation = await authenticatedVT.vals.files.create(newProjectId, {\n content: file.content,\n type: valTownFileType,\n path: file.path,\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}:`, 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;",[],[207,199],"backend","5c43ff2c-fea3-11ef-8a4d-569c3dd06744",3,["D",1741716305278],[162],[207],["D",1741716304952],{"_11":12,"_95":91},{"_11":12,"_89":-5,"_90":91,"_31":49,"_92":93,"_94":30},{"_79":55,"_13":16,"_38":80,"_81":39,"_82":-5,"_83":-5,"_84":-5,"_85":-5,"_86":-5,"_87":14,"_88":12},"ctx",{"_72":-5,"_114":250,"_251":252,"_253":254,"_255":30,"_256":30,"_257":30,"_258":24,"_259":-5,"_260":-7,"_261":-7,"_262":26,"_263":30,"_264":30,"_265":-5,"_266":30,"_267":30,"_268":30,"_269":-5},"ENV",{"_221":222,"_223":224,"_225":16,"_226":227,"_228":229,"_230":231,"_232":233,"_234":235,"_236":237,"_238":239,"_240":241,"_242":243,"_244":245,"_246":247,"_248":249},"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