\n \n \n",[],[80,112],"3f64db48-febb-11ef-bbc6-569c3dd06744","components","cfe236b9-34b8-4706-896a-eaa2dc12403b",["D",1741726564761],[124],[80,119],{"_35":125,"_13":126,"_63":127,"_65":120,"_66":67,"_68":69,"_70":71,"_37":128,"_17":31,"_73":107,"_74":129,"_76":51,"_77":-5,"_94":130,"_18":131},"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;",[],[80,119,126],["D",1741726564761],[135],[86],{"_35":136,"_13":137,"_63":138,"_65":87,"_66":67,"_68":139,"_70":71,"_37":140,"_17":141,"_73":142,"_74":143,"_76":51,"_77":-5,"_94":144,"_18":145},"25fa88f0-febc-11ef-bff2-569c3dd06744","index.ts","9b5743d6-4cfd-4e85-84bc-ff3134679397",4,["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;",[],[86,137],["D",1741716304952],"legacyEnvVars","httpPrivacy","description","imageUrl","userId","387c2a1a-af32-4662-ba80-cb97133b520c","pinnedFileId","5c43d254-fea3-11ef-8a4d-569c3dd06744","pinPreview","pinMigrated","screenshotVersion","likeCount","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_188":184},"org",{"_11":12,"_182":-5,"_183":184,"_151":152,"_185":186,"_187":51},"branch",{"_17":139,"_13":16,"_35":67,"_42":43,"_45":36,"_46":178,"_179":53,"_180":43,"_181":56,"_57":14,"_54":12},13,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJzR3VCb2xOR0loZEIwRWg5cnlVZUt4ajlpQiJ9","tier","pro","canRestrictVals","profileImageUrl","adoptOrgId",{"_35":43,"_13":14,"_37":250,"_49":-5,"_147":51,"_52":53,"_148":53,"_149":-5,"_150":-5,"_151":152,"_153":154,"_155":71,"_156":-5,"_157":44,"_158":31,"_55":56,"_159":-5,"_160":-5,"_161":-5,"_162":-5,"_163":164,"_165":164,"_166":167,"_168":167,"_169":167,"_170":164,"_171":164,"_172":251,"_174":252,"_176":253,"_50":51},[226,228,233],"files",[226,227,228,229,230,231,232,233],"counts",{"_216":31,"_217":218,"_219":69,"_34":220,"_221":222},[210,211,212],"upstreamProject","upstreamBranch",{"_35":36,"_37":208,"_39":209,"_13":41,"_42":43,"_17":44,"_45":-5,"_46":-5,"_47":48,"_49":-5,"_50":51,"_52":53,"_54":12,"_55":56,"_57":14},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1741716304952],["D",1745422383076],{"_35":85,"_13":86,"_63":87,"_65":-5,"_66":67,"_68":69,"_70":71,"_37":88,"_17":31,"_73":83,"_74":-5,"_76":51,"_77":-5,"_18":215},{"_35":79,"_13":80,"_63":81,"_65":-5,"_66":67,"_68":69,"_70":71,"_37":82,"_17":31,"_73":83,"_74":-5,"_76":51,"_77":-5,"_18":214},{"_35":61,"_13":62,"_63":64,"_65":-5,"_66":67,"_68":69,"_70":71,"_37":72,"_17":31,"_73":24,"_74":75,"_76":51,"_77":-5,"_18":213},[62],[80],[86],"pulls","branches",2,"forks",{"_223":31,"_225":31},"connections",{"_223":31,"_224":31},"count","unfilledCount","emptyCount",{"_35":85,"_13":86,"_63":87,"_65":-5,"_66":67,"_68":69,"_70":71,"_37":132,"_17":31,"_73":83,"_74":-5,"_76":51,"_77":-5,"_94":248,"_18":249},{"_35":136,"_13":137,"_63":138,"_65":87,"_66":67,"_68":139,"_70":71,"_37":140,"_17":141,"_73":142,"_74":143,"_76":51,"_77":-5,"_94":246,"_18":247},{"_35":79,"_13":80,"_63":81,"_65":-5,"_66":67,"_68":69,"_70":71,"_37":97,"_17":31,"_73":83,"_74":-5,"_76":51,"_77":-5,"_94":244,"_18":245},{"_35":118,"_13":119,"_63":120,"_65":81,"_66":67,"_68":69,"_70":71,"_37":121,"_17":31,"_73":83,"_74":-5,"_76":51,"_77":-5,"_94":242,"_18":243},{"_35":125,"_13":126,"_63":127,"_65":120,"_66":67,"_68":69,"_70":71,"_37":128,"_17":31,"_73":107,"_74":129,"_76":51,"_77":-5,"_94":240,"_18":241},{"_35":111,"_13":112,"_63":113,"_65":81,"_66":67,"_68":69,"_70":71,"_37":114,"_17":31,"_73":24,"_74":115,"_76":51,"_77":-5,"_94":238,"_18":239},{"_35":103,"_13":104,"_63":105,"_65":81,"_66":67,"_68":69,"_70":71,"_37":106,"_17":31,"_73":107,"_74":108,"_76":51,"_77":-5,"_94":236,"_18":237},{"_35":61,"_13":62,"_63":64,"_65":-5,"_66":67,"_68":69,"_70":71,"_37":93,"_17":31,"_73":24,"_74":75,"_76":51,"_77":-5,"_94":234,"_18":235},[],[62],[],[80,104],[],[80,112],[],[80,119,126],[230],[80,119],[229,231,232],[80],[],[86,137],[227],[86],["D",1741716304952],{"_11":12,"_188":184},{"_11":12,"_182":-5,"_183":184,"_151":152,"_185":186,"_187":51},{"_17":139,"_13":16,"_35":67,"_42":43,"_45":36,"_46":178,"_179":53,"_180":43,"_181":56,"_57":14,"_54":12},"ctx",{"_172":-5,"_205":287,"_288":289,"_290":291,"_292":51,"_293":51,"_294":51,"_295":71,"_296":-5,"_297":-7,"_298":-7,"_299":31,"_300":51,"_301":51,"_302":-5,"_303":51,"_304":51,"_305":51,"_306":-5},"ENV",{"_258":259,"_260":261,"_262":41,"_263":264,"_265":266,"_267":268,"_269":270,"_271":272,"_273":274,"_275":276,"_277":278,"_279":280,"_281":282,"_283":284,"_285":286},"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"]

Code