Download Val Town Project

\n Download any public or unlisted Val Town project as a zip via its URL.\n setURL(e.target.value)}\n placeholder=\"https://www.val.town/x/shouser/getProjectsAsZips\"\n style={{\n display: \"block\",\n \"border\": \"1px solid black\",\n \"padding\": \"10px\",\n \"margin\": \"10px 0\",\n }}\n />\n \n Download\n \n

\n All Projects\n

\n {projects.map((project) => (\n \n \n {project.author.username}/{project.name}\n \n Download\n

\n ))}\n

\n \n );\n}",[],[184,190,196],[184,190],{"_102":207,"_95":208,"_158":209,"_160":185,"_161":139,"_162":119,"_163":116,"_104":210,"_99":32,"_165":211,"_167":212,"_168":22,"_169":-5,"_170":213,"_98":214},"6dd3fda0-f453-11ef-bc06-569c3dd06744","favicon.svg","03da2e10-d7c6-4042-b031-d8261d2abf85",["D",1740582463346],"file","",[],[184,208],{"_102":216,"_95":217,"_158":218,"_160":185,"_161":139,"_162":219,"_163":116,"_104":220,"_99":200,"_165":211,"_167":221,"_168":22,"_169":-5,"_170":222,"_98":223},"c3122abc-f85e-11ef-8043-569c3dd06744","index.html","498baa55-4148-43d3-9d01-fae67f281a18",10,["D",1741027135503],"\n\n \n \n \n Get Projects As Zips\n \n \n \n \n

\n \n \n \n",[],[184,217],{"_102":225,"_95":226,"_158":227,"_160":185,"_161":139,"_162":198,"_163":116,"_104":228,"_99":200,"_165":201,"_167":229,"_168":22,"_169":-5,"_170":230,"_98":231},"50365c68-f55a-11ef-a70e-569c3dd06744","index.tsx","6bb1d7a7-4337-4c95-bc2f-739854a2d610",["D",1740695371325],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();",[],[184,226],{"_102":233,"_95":234,"_158":235,"_160":185,"_161":139,"_162":198,"_163":116,"_104":236,"_99":119,"_165":211,"_167":237,"_168":22,"_169":-5,"_170":238,"_98":239},"50365e98-f55a-11ef-a70e-569c3dd06744","style.css","015e39d0-4582-4373-9352-f9568d9ee963",["D",1740695371325],"body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n max-width: 600px;\n margin: 0 auto;\n padding: 20px;\n background-color: #f4f4f4;\n}\n\n.message-board {\n background: white;\n border-radius: 8px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n padding: 20px;\n}\n\n\n\nfooter {\n text-align: center;\n margin-top: 20px;\n}",[],[184,234],[184],{"_102":242,"_95":243,"_158":244,"_160":-5,"_161":139,"_162":245,"_163":116,"_104":246,"_99":119,"_165":211,"_167":247,"_168":22,"_169":-5,"_170":248,"_98":249},"3bc570a4-f48b-11ef-a48f-569c3dd06744","README.md","a0e2921d-74a9-4e34-a79b-988425cc7fb4",6,["D",1740606431207],"# Download Projects as a Zip\n\nThis is a proof of concept, showing how to download Val Town projects as zip files. For now, I've hardcoded my username into the code, so you can only download my public/unlisted projects. To see it working, type the name of this project **getProjectsAsZips** and press download. Waalaah!\n\nIf you fork this project, you can update the hardcoded username in frontend/MessageInput.tsx. I forked the [reactHonoStarter](https://www.val.town/x/stevekrouse/reactHonoStarter) to get started quickly (it's great), hence the weird naming and leftover code you'll see around this project.\n\n## Next Steps\nI'd love it if someone wanted to send me a PR and tackle either of these two:\n\n1. Add ability for users to input their own username\n2. Add ability for users to input their API token so they can see private projects",[],[243],"files",[155,172,182,188,194,206,215,224,232,241],"counts",{"_254":119,"_255":176,"_256":200,"_257":258},"pulls","branches","forks","envVars",{"_259":32,"_260":32},"count","emptyCount","contents",[263,266,269],{"_102":156,"_95":157,"_158":159,"_160":-5,"_161":139,"_162":119,"_163":116,"_104":264,"_99":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_98":265},["D",1740582463346],[157],{"_102":183,"_95":184,"_158":185,"_160":-5,"_161":139,"_162":119,"_163":116,"_104":267,"_99":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_98":268},["D",1740582463346],[184],{"_102":242,"_95":243,"_158":244,"_160":-5,"_161":139,"_162":245,"_163":116,"_104":270,"_99":119,"_165":211,"_167":247,"_168":22,"_169":-5,"_98":271},["D",1740606431207],[243],"upstreamProject",{"_102":147,"_95":274,"_110":275,"_111":-5,"_108":109,"_23":276},"reactHonoExample","Example with client-side React & Hono server",{"_93":277,"_131":278},"stevekrouse","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","upstreamBranch",{"_102":142,"_104":281,"_282":283,"_95":43,"_140":147,"_99":284,"_141":-5,"_143":-5,"_285":286,"_106":-5,"_152":22,"_108":109,"_151":277,"_16":149,"_150":274},["D",1740432065884],"updatedAt",["D",1755285423526],244,"lockfileKey","1755661346047-esm.town_v_stevekrouse_reactHonoExample@244-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.pull.$pullId",{"_93":94,"_95":96,"_100":293,"_298":299},{"_102":103,"_95":96,"_104":294,"_106":-5,"_107":22,"_108":109,"_110":-5,"_111":-5,"_14":112,"_113":114,"_115":116,"_117":-5,"_118":119,"_16":120,"_121":122,"_123":122,"_124":125,"_126":125,"_127":125,"_128":122,"_129":122,"_23":295,"_133":296,"_136":297,"_152":22},["D",1740582463346],{"_93":94,"_131":132},{"_93":94,"_135":132},{"_99":138,"_95":43,"_102":139,"_140":103,"_141":142,"_143":144,"_145":109,"_146":147,"_148":149,"_150":96,"_151":94},"pull",{"_102":300,"_301":302,"_110":302,"_104":303,"_304":-5,"_305":306,"_307":219,"_308":-5,"_309":22,"_310":22,"_311":312,"_313":314,"_315":316,"_317":318,"_322":323,"_324":325},"462ca9d6-f85f-11ef-84cb-569c3dd06744","title","Instead of getting all projects, let's get a random 5",["D",1741027355468],"mergedAt","state","pending","targetBranchVersion","mergedBranchVersion","isTargetOwner","isSourceOwner","targetBranch",{"_102":139,"_95":43,"_99":138,"_140":103,"_141":142,"_143":144,"_151":94,"_150":96,"_106":-5},"targetProject",{"_102":103,"_95":96,"_110":-5,"_111":-5,"_108":109},"targetOrg",{"_93":94,"_135":132},"sourceBranch",{"_102":319,"_95":43,"_99":320,"_140":321,"_141":139,"_143":219,"_151":277,"_150":96,"_106":-5},"1466dfca-f85f-11ef-b9b6-569c3dd06744",4,"14542b0a-f85f-11ef-b9b6-569c3dd06744","sourceProject",{"_102":321,"_95":96,"_110":-5,"_111":-5,"_108":109},"sourceOrg",{"_93":277,"_135":278},"routes/_app.x.$handle.$name.pull.$pullId._index",{"_93":94,"_95":96,"_100":328,"_298":333,"_341":342,"_369":116,"_370":32,"_371":32,"_372":373},{"_102":103,"_95":96,"_104":329,"_106":-5,"_107":22,"_108":109,"_110":-5,"_111":-5,"_14":112,"_113":114,"_115":116,"_117":-5,"_118":119,"_16":120,"_121":122,"_123":122,"_124":125,"_126":125,"_127":125,"_128":122,"_129":122,"_23":330,"_133":331,"_136":332,"_152":22},["D",1740582463346],{"_93":94,"_131":132},{"_93":94,"_135":132},{"_99":138,"_95":43,"_102":139,"_140":103,"_141":142,"_143":144,"_145":109,"_146":147,"_148":149,"_150":96,"_151":94},{"_102":300,"_301":302,"_110":302,"_104":334,"_304":-5,"_305":306,"_307":219,"_308":-5,"_309":22,"_310":22,"_311":335,"_313":336,"_315":337,"_317":338,"_322":339,"_324":340},["D",1741027355468],{"_102":139,"_95":43,"_99":138,"_140":103,"_141":142,"_143":144,"_151":94,"_150":96,"_106":-5},{"_102":103,"_95":96,"_110":-5,"_111":-5,"_108":109},{"_93":94,"_135":132},{"_102":319,"_95":43,"_99":320,"_140":321,"_141":139,"_143":219,"_151":277,"_150":96,"_106":-5},{"_102":321,"_95":96,"_110":-5,"_111":-5,"_108":109},{"_93":277,"_135":278},"diff",{"_343":344,"_168":345,"_346":347},"added",[],[],"modified",[348],{"_98":349,"_350":351,"_359":360},"backend/index.ts","targetFile",{"_102":352,"_95":174,"_158":114,"_160":159,"_161":139,"_162":353,"_163":22,"_104":354,"_99":320,"_165":177,"_167":355,"_168":22,"_169":-5,"_170":-7,"_98":356,"_357":358},"b6c73466-f604-11ef-8f43-569c3dd06744",9,["D",1740768557847],"import { parseProject, readFile, serveFile } from \"https://esm.town/v/std/utils@71-main/index.ts\";\nimport ValTown from \"npm:@valtown/sdk\";\nimport { Hono } from \"npm:hono\";\nimport JSZip from \"npm:jszip\";\n\nconst app = new Hono();\nconst vt = new ValTown();\n\n// Bootstrap the initial messages data into index.html\nconst projects = await getAllProjects();\n\n// Serve index.html at the root /\napp.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n\n // Inject the data as a global variable inside a script tag\n const dataScript = ``;\n\n // Insert the script right before the closing tag\n html = html.replace(\"\", `${dataScript}`);\n\n return c.html(html);\n});\n\nasync function getAllProjects() {\n let offset = 0;\n const limit = 100;\n let allProjects = [];\n let hasMore = true;\n\n while (hasMore && allProjects.length < 1000) {\n const projects = await vt.projects.list({ limit, offset });\n\n allProjects = [...allProjects, ...projects.data];\n offset = allProjects.length;\n hasMore = projects.data.length === limit;\n }\n\n return allProjects;\n}\n\n// Serve all /frontend files under /public\napp.get(\"/public/**/*\", c => serveFile(c.req.path.replace(\"/public\", \"/frontend\"), import.meta.url));\n\n// Serve all /shared files under /shared\napp.get(\"/shared/**/*\", c => serveFile(c.req.path, import.meta.url));\n\napp.get(\"/zip-project\", async (c) => {\n const url = c.req.query(\"url\");\n\n if (!url) {\n return c.json({\n success: false,\n error: \"Missing required parameter: url\",\n }, 400);\n }\n\n const { username, projectName } = parseValTownProjectURL(url);\n\n if (!username || !projectName) {\n return c.json({\n success: false,\n error: \"Missing required parameters: username and projectName\",\n }, 400);\n }\n\n const projectDetails = await vt.alias.username.projectName.retrieve(username, projectName);\n\n if (!projectDetails || !projectDetails.id) {\n return c.json({\n success: false,\n error: \"Project not found\",\n }, 404);\n }\n\n const projectId = projectDetails.id;\n const files = await vt.projects.files.list(projectId, { recursive: true });\n const filesWithContent = await getFilesWithContent(files.body.data, projectId);\n const zipBuffer = await createZipFromEndpoints(filesWithContent, `${projectName}.zip`);\n\n c.header(\"Content-Type\", \"application/zip\");\n c.header(\"Content-Disposition\", `attachment; filename=\"${projectName}.zip\"`);\n\n // Return the ZIP file directly\n return c.body(zipBuffer, 200);\n});\n\nfunction parseValTownProjectURL(url: string) {\n // Use the URL constructor to parse the URL\n const { pathname } = new URL(url);\n // Split the pathname and filter out empty segments\n const parts = pathname.split(\"/\").filter(Boolean);\n // Expecting the format: [\"x\", \"stevekrouse\", \"getProjectsAsZips\"]\n if (parts.length < 3 || parts[0] !== \"x\") {\n throw new Error(\"Invalid URL structure\");\n }\n const username = parts[1];\n const projectName = parts[2];\n return { username, projectName };\n}\nasync function getFilesWithContent(files: any[], projectId) {\n const nonDirectoryFiles = files.filter(file => file.type !== \"directory\");\n\n const failedFiles = [];\n\n const filePromises = nonDirectoryFiles.map(async file => {\n try {\n const urlEncodedPath = encodeURIComponent(file.path);\n console.log(\"url encoded path\", urlEncodedPath);\n const response = await vt.projects.files.content(projectId, urlEncodedPath);\n\n if (!response) {\n throw new Error(`Could not get content for file: ${file.path}`);\n }\n\n return {\n name: file.path,\n content: response,\n };\n } catch (error) {\n failedFiles.push({\n path: file.path,\n error: error.message,\n });\n }\n });\n\n const results = await Promise.all(filePromises);\n if (failedFiles.length > 0) {\n const failedFilesList = failedFiles.map(f => `'${f.path}': ${f.error}`).join(\", \");\n throw new Error(`Failed to fetch content for files: ${failedFilesList}`);\n }\n\n return results;\n}\n\nasync function createZipFromEndpoints(\n files: any[],\n zipFileName: string,\n): Promise {\n try {\n const zip = new JSZip();\n\n for (const file of files) {\n zip.file(file.name, file.content);\n }\n\n const zipBlob = await zip.generateAsync({\n type: \"blob\",\n compression: \"DEFLATE\",\n compressionOptions: { level: 6 },\n });\n\n return zipBlob;\n } catch (error) {\n console.error(\"Error creating ZIP file:\", error);\n throw error;\n }\n}\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;",[157,174],"contentHash","99d15d27cda68cd98bd211cbd9dec7c93ca73ae434e9e58fdac55b0bef4f1bf3","sourceFile",{"_102":361,"_95":174,"_158":362,"_160":363,"_161":319,"_162":320,"_163":116,"_104":364,"_99":365,"_165":177,"_167":366,"_168":22,"_169":-5,"_170":-7,"_98":367,"_357":368},"3a466986-f85f-11ef-8cb8-569c3dd06744","81d2d55e-13e2-4fb0-834a-583814209dd1","20abf11c-ce43-4385-aa2c-81f6c3d75547",["D",1741027335495],3,"import { parseProject, readFile, serveFile } from \"https://esm.town/v/std/utils@71-main/index.ts\";\nimport ValTown from \"npm:@valtown/sdk\";\nimport { Hono } from \"npm:hono\";\nimport JSZip from \"npm:jszip\";\n\nconst app = new Hono();\nconst vt = new ValTown();\n\n// Bootstrap the initial messages data into index.html\nconst projects = await getRandomProjects();\n\n// Serve index.html at the root /\napp.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n\n // Inject the data as a global variable inside a script tag\n const dataScript = ``;\n\n // Insert the script right before the closing tag\n html = html.replace(\"\", `${dataScript}`);\n\n return c.html(html);\n});\n\nasync function getRandomProjects() {\n const randomOffset = Math.floor(Math.random() * 100);\n const projects = await vt.projects.list({ limit: 5, offset: randomOffset });\n\n return projects.data;\n}\n\n// Serve all /frontend files under /public\napp.get(\"/public/**/*\", c => serveFile(c.req.path.replace(\"/public\", \"/frontend\"), import.meta.url));\n\n// Serve all /shared files under /shared\napp.get(\"/shared/**/*\", c => serveFile(c.req.path, import.meta.url));\n\napp.get(\"/zip-project\", async (c) => {\n const url = c.req.query(\"url\");\n\n if (!url) {\n return c.json({\n success: false,\n error: \"Missing required parameter: url\",\n }, 400);\n }\n\n const { username, projectName } = parseValTownProjectURL(url);\n\n if (!username || !projectName) {\n return c.json({\n success: false,\n error: \"Missing required parameters: username and projectName\",\n }, 400);\n }\n\n const projectDetails = await vt.alias.username.projectName.retrieve(username, projectName);\n\n if (!projectDetails || !projectDetails.id) {\n return c.json({\n success: false,\n error: \"Project not found\",\n }, 404);\n }\n\n const projectId = projectDetails.id;\n const files = await vt.projects.files.list(projectId, { recursive: true });\n const filesWithContent = await getFilesWithContent(files.body.data, projectId);\n const zipBuffer = await createZipFromEndpoints(filesWithContent, `${projectName}.zip`);\n\n c.header(\"Content-Type\", \"application/zip\");\n c.header(\"Content-Disposition\", `attachment; filename=\"${projectName}.zip\"`);\n\n // Return the ZIP file directly\n return c.body(zipBuffer, 200);\n});\n\nfunction parseValTownProjectURL(url: string) {\n // Use the URL constructor to parse the URL\n const { pathname } = new URL(url);\n // Split the pathname and filter out empty segments\n const parts = pathname.split(\"/\").filter(Boolean);\n // Expecting the format: [\"x\", \"stevekrouse\", \"getProjectsAsZips\"]\n if (parts.length < 3 || parts[0] !== \"x\") {\n throw new Error(\"Invalid URL structure\");\n }\n const username = parts[1];\n const projectName = parts[2];\n return { username, projectName };\n}\nasync function getFilesWithContent(files: any[], projectId) {\n const nonDirectoryFiles = files.filter(file => file.type !== \"directory\");\n\n const failedFiles = [];\n\n const filePromises = nonDirectoryFiles.map(async file => {\n try {\n const urlEncodedPath = encodeURIComponent(file.path);\n console.log(\"url encoded path\", urlEncodedPath);\n const response = await vt.projects.files.content(projectId, urlEncodedPath);\n\n if (!response) {\n throw new Error(`Could not get content for file: ${file.path}`);\n }\n\n return {\n name: file.path,\n content: response,\n };\n } catch (error) {\n failedFiles.push({\n path: file.path,\n error: error.message,\n });\n }\n });\n\n const results = await Promise.all(filePromises);\n if (failedFiles.length > 0) {\n const failedFilesList = failedFiles.map(f => `'${f.path}': ${f.error}`).join(\", \");\n throw new Error(`Failed to fetch content for files: ${failedFilesList}`);\n }\n\n return results;\n}\n\nasync function createZipFromEndpoints(\n files: any[],\n zipFileName: string,\n): Promise {\n try {\n const zip = new JSZip();\n\n for (const file of files) {\n zip.file(file.name, file.content);\n }\n\n const zipBlob = await zip.generateAsync({\n type: \"blob\",\n compression: \"DEFLATE\",\n compressionOptions: { level: 6 },\n });\n\n return zipBlob;\n } catch (error) {\n console.error(\"Error creating ZIP file:\", error);\n throw error;\n }\n}\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;",[157,174],"eb334a9cd90fcb1a831b692023d522efe36dd5be535033fcae793c36bebb6605","hasChanges","ahead","behind","stats",{"_374":375,"_376":119,"_377":378,"_380":176,"_381":382},"changes",[348],"totalChanges","fileAdditionDeletions",[379],{"_380":176,"_381":382},"additions","deletions",15,"actionData","errors"]

shouser

getProjectsAsZips

Hbackend/index.ts+5-15