\n \n \n",[],[80,112],"ab7a1158-081c-11f0-b34b-569c3dd06744","components","f872e657-ee57-4464-8435-b112564f8957",["D",1742757967672],[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":50,"_77":-5,"_94":130,"_18":131},"ab7a0da2-081c-11f0-b34b-569c3dd06744","App.tsx","a0711722-405f-4183-9c0c-d3cdcc801926",["D",1742757967672],"/** @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;",[],[80,119,126],["D",1742757967672],[135],[86],{"_35":136,"_13":137,"_63":138,"_65":87,"_66":67,"_68":69,"_70":71,"_37":139,"_17":31,"_73":140,"_74":141,"_76":50,"_77":-5,"_94":142,"_18":143},"ab79f9d4-081c-11f0-b34b-569c3dd06744","index.ts","d47d8c07-b396-4791-ac4c-bc13c7f6aa93",["D",1742757967672],"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 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 const responseCreation = await authenticatedVT.projects.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;",[],[86,137],"ab6ffa88-081c-11f0-b34b-569c3dd06744",["D",1742757967672],"legacyEnvVars","httpPrivacy","description","imageUrl","userId","c156eb0e-8b9d-4104-a055-502e9a0eb441","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",2,"2019e55b-c541-4c51-bef0-008eef10ef88","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,"_150":151,"_185":186,"_187":50},"branch",{"_17":69,"_13":16,"_35":67,"_41":144,"_44":36,"_45":178,"_179":52,"_180":42,"_181":56,"_57":14,"_53":12},17,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJ4cFpFME5pSXNZamJNd296dlZSYVJ0OVF1RSJ9","tier","pro","canRestrictVals","profileImageUrl","adoptOrgId",{"_35":144,"_13":14,"_37":252,"_48":-5,"_146":50,"_51":52,"_147":52,"_148":-5,"_149":-5,"_150":151,"_152":138,"_153":71,"_154":-5,"_155":-5,"_156":157,"_55":158,"_159":-5,"_160":-5,"_161":-5,"_162":-5,"_163":164,"_165":164,"_166":167,"_168":167,"_169":167,"_170":164,"_171":164,"_172":253,"_174":254,"_176":255,"_49":50},[228,230,235],"files",[228,229,230,231,232,233,234,235],"counts",{"_219":31,"_220":69,"_221":31,"_34":222,"_223":224},[213,214,215],"upstreamProject",{"_35":42,"_13":14,"_148":-5,"_149":-5,"_51":52,"_172":211},"upstreamBranch",{"_35":36,"_37":209,"_39":210,"_13":16,"_41":42,"_17":43,"_44":-5,"_45":-5,"_46":47,"_48":-5,"_49":50,"_51":52,"_53":54,"_55":56,"_57":14},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1741716304952],["D",1745422383076],{"_11":54,"_188":212},"https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJzR3VCb2xOR0loZEIwRWg5cnlVZUt4ajlpQiJ9",{"_35":85,"_13":86,"_63":87,"_65":-5,"_66":67,"_68":69,"_70":71,"_37":88,"_17":31,"_73":83,"_74":-5,"_76":50,"_77":-5,"_18":218},{"_35":79,"_13":80,"_63":81,"_65":-5,"_66":67,"_68":69,"_70":71,"_37":82,"_17":31,"_73":83,"_74":-5,"_76":50,"_77":-5,"_18":217},{"_35":61,"_13":62,"_63":64,"_65":-5,"_66":67,"_68":69,"_70":71,"_37":72,"_17":31,"_73":24,"_74":75,"_76":50,"_77":-5,"_18":216},[62],[80],[86],"pulls","branches","forks",{"_225":31,"_227":31},"connections",{"_225":31,"_226":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":50,"_77":-5,"_94":250,"_18":251},{"_35":136,"_13":137,"_63":138,"_65":87,"_66":67,"_68":69,"_70":71,"_37":139,"_17":31,"_73":140,"_74":141,"_76":50,"_77":-5,"_94":248,"_18":249},{"_35":79,"_13":80,"_63":81,"_65":-5,"_66":67,"_68":69,"_70":71,"_37":97,"_17":31,"_73":83,"_74":-5,"_76":50,"_77":-5,"_94":246,"_18":247},{"_35":118,"_13":119,"_63":120,"_65":81,"_66":67,"_68":69,"_70":71,"_37":121,"_17":31,"_73":83,"_74":-5,"_76":50,"_77":-5,"_94":244,"_18":245},{"_35":125,"_13":126,"_63":127,"_65":120,"_66":67,"_68":69,"_70":71,"_37":128,"_17":31,"_73":107,"_74":129,"_76":50,"_77":-5,"_94":242,"_18":243},{"_35":111,"_13":112,"_63":113,"_65":81,"_66":67,"_68":69,"_70":71,"_37":114,"_17":31,"_73":24,"_74":115,"_76":50,"_77":-5,"_94":240,"_18":241},{"_35":103,"_13":104,"_63":105,"_65":81,"_66":67,"_68":69,"_70":71,"_37":106,"_17":31,"_73":107,"_74":108,"_76":50,"_77":-5,"_94":238,"_18":239},{"_35":61,"_13":62,"_63":64,"_65":-5,"_66":67,"_68":69,"_70":71,"_37":93,"_17":31,"_73":24,"_74":75,"_76":50,"_77":-5,"_94":236,"_18":237},[],[62],[],[80,104],[],[80,112],[],[80,119,126],[232],[80,119],[231,233,234],[80],[],[86,137],[229],[86],["D",1742757967672],{"_11":12,"_188":184},{"_11":12,"_182":-5,"_183":184,"_150":151,"_185":186,"_187":50},{"_17":69,"_13":16,"_35":67,"_41":144,"_44":36,"_45":178,"_179":52,"_180":42,"_181":56,"_57":14,"_53":12},"ctx",{"_172":-5,"_206":289,"_290":291,"_292":293,"_294":50,"_295":50,"_296":50,"_297":71,"_298":-5,"_299":-7,"_300":-7,"_301":31,"_302":50,"_303":50,"_304":-5,"_305":50,"_306":50,"_307":50,"_308":-5},"ENV",{"_260":261,"_262":263,"_264":16,"_265":266,"_267":268,"_269":270,"_271":272,"_273":274,"_275":276,"_277":278,"_279":280,"_281":282,"_283":284,"_285":286,"_287":288},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","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