Hi

\"\n});\n```\n\n## Val Town Utility Functions\n\nVal Town provides several utility functions to help with common project tasks.\n\n### Importing Utilities\n\nAlways import utilities with version pins to avoid breaking changes:\n\n```ts\nimport { parseProject, readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n```\n\n### Available Utilities\n\n\n#### **serveFile** - Serve project files with proper content types\n\nFor example, in Hono:\n\n```ts\n// serve all files in frontend/ and shared/\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n```\n\n#### **readFile** - Read files from within the project:\n\n```ts\n// Read a file from the project\nconst fileContent = await readFile(\"/frontend/index.html\", import.meta.url);\n```\n\n#### **listFiles** - List all files in the project\n\n```ts\nconst files = await listFiles(import.meta.url);\n```\n\n#### **parseProject** - Extract information about the current project from import.meta.url\n\nThis is useful for including info for linking back to a val, ie in \"view source\" urls:\n\n```ts\nconst projectVal = parseProject(import.meta.url);\nconsole.log(projectVal.username); // Owner of the project\nconsole.log(projectVal.name); // Project name\nconsole.log(projectVal.version); // Version number\nconsole.log(projectVal.branch); // Branch name\nconsole.log(projectVal.links.self.project); // URL to the project page\n```\n\n## Val Town Platform Specifics\n\n- **Redirects:** Use `return new Response(null, { status: 302, headers: { Location: \"/place/to/redirect\" }})` instead of `Response.redirect` which is broken\n- **Images:** Avoid external images or base64 images. Use emojis, unicode symbols, or icon fonts/libraries instead\n- **AI Image:** To inline generate an AI image use: `

`\n- **Storage:** DO NOT use the Deno KV module for storage\n- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods\n- **Weather Data:** Use open-meteo for weather data (doesn't require API keys) unless otherwise specified\n- **View Source:** Add a view source link by importing & using `parseProject(import.meta.url).links.self.project` (or passing this data to the client) and include `target=\"_top\"` attribute\n- **Error Debugging:** Add `` to HTML to capture client-side errors\n- **Error Handling:** Only use try...catch when there's a clear local resolution; Avoid catches that merely log or return 500s. Let errors bubble up with full context\n- **Environment Variables:** Use `Deno.env.get('keyname')` when you need to, but generally prefer APIs that don't require keys\n- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser\n- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites\n- **React Configuration:** When using React libraries, pin versions with `?deps=react@18.2.0,react-dom@18.2.0` and start the file with `/** @jsxImportSource https://esm.sh/react@18.2.0 */`\n- Ensure all React dependencies and sub-dependencies are pinned to the same version\n- **Styling:** Default to using TailwindCSS via `` unless otherwise specified\n\n## Project Structure and Design Patterns\n\n### Recommended Directory Structure\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Schema definitions\n│ │ ├── queries.ts # DB query functions\n│ │ └── README.md\n│ └── routes/ # Route modules\n│ ├── [route].ts\n│ └── static.ts # Static file serving\n│ ├── index.ts # Main entry point\n│ └── README.md\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx\n│ │ └── [Component].tsx\n│ ├── favicon.svg\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # Frontend JS entry point\n│ ├── README.md\n│ └── style.css\n├── README.md\n└── shared/\n ├── README.md\n └── utils.ts # Shared types and functions\n```\n\n### Backend (Hono) Best Practices\n\n- Hono is the recommended API framework\n- Main entry point should be `backend/index.ts`\n- **Static asset serving:** Use the utility functions to read and serve project files:\n ```ts\n import { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n \n // serve all files in frontend/ and shared/\n app.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\n app.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n \n // For index.html, often you'll want to bootstrap with initial data\n app.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Inject data to avoid extra round-trips\n const initialData = await fetchInitialData();\n const dataScript = ``;\n \n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n });\n ```\n- Create RESTful API routes for CRUD operations\n- Always include this snippet at the top-level Hono app to re-throwing errors to see full stack traces:\n ```ts\n // Unwrap Hono errors to see original error details\n app.onError((err, c) => {\n throw err;\n });\n ```\n\n### Database Patterns\n- Run migrations on startup or comment out for performance\n- Change table names when modifying schemas rather than altering\n- Export clear query functions with proper TypeScript typing\n\n## Common Gotchas and Solutions\n\n1. **Environment Limitations:** \n - Val Town runs on Deno in a serverless context, not Node.js\n - Code in `shared/` must work in both frontend and backend environments\n - Cannot use `Deno` keyword in shared code\n - Use `https://esm.sh` for imports that work in both environments\n\n2. **SQLite Peculiarities:**\n - Limited support for ALTER TABLE operations\n - Create new tables with updated schemas and copy data when needed\n - Always run table creation before querying\n\n3. **React Configuration:**\n - All React dependencies must be pinned to 18.2.0\n - Always include `@jsxImportSource https://esm.sh/react@18.2.0` at the top of React files\n - Rendering issues often come from mismatched React versions\n\n4. **File Handling:**\n - Val Town only supports text files, not binary\n - Use the provided utilities to read files across branches and forks\n - For files in the project, use `readFile` helpers\n\n5. **API Design:**\n - `fetch` handler is the entry point for HTTP vals\n - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`",["D",1744320210796],[444,449,455],{"_148":454,"_103":460,"_108":461,"_151":137,"_310":462},64,["D",1744320130968],[463],{"_106":464,"_151":137,"_148":454,"_99":455,"_158":456,"_156":189,"_103":33,"_150":448,"_108":461,"_152":460,"_160":-5,"_153":27,"_159":27,"_102":465},"dd51aefa-1651-11f0-950a-569c3dd06744",[444,449,455],{"_148":448,"_103":467,"_108":468,"_151":137,"_310":469},63,["D",1744320126739],[470],{"_106":471,"_151":137,"_148":448,"_99":449,"_158":-5,"_156":157,"_103":33,"_150":438,"_108":468,"_152":467,"_160":-5,"_153":27,"_159":27,"_102":472},"dacc04c8-1651-11f0-af1c-569c3dd06744",[444,449],{"_148":250,"_103":474,"_108":475,"_151":137,"_310":476},62,["D",1744320125231],[477],{"_106":478,"_151":137,"_148":250,"_99":479,"_158":253,"_156":169,"_103":188,"_150":-5,"_108":475,"_152":474,"_160":-5,"_153":27,"_159":27,"_102":480},"d9e7216e-1651-11f0-8ef9-569c3dd06744","archiveVal",[479],{"_148":438,"_103":482,"_108":483,"_151":137,"_310":484},61,["D",1744320125180],[485],{"_106":486,"_151":137,"_148":438,"_99":444,"_158":-5,"_156":157,"_103":33,"_150":-5,"_108":483,"_152":482,"_160":-5,"_153":27,"_159":27,"_102":487},"d9de16aa-1651-11f0-b36a-569c3dd06744",[444],{"_148":259,"_103":489,"_108":490,"_151":137,"_310":491},60,["D",1739132822037],[492],{"_106":493,"_151":137,"_148":259,"_99":494,"_158":263,"_156":169,"_103":167,"_150":-5,"_108":490,"_152":489,"_160":-5,"_153":27,"_159":27,"_102":495},"38415674-e724-11ef-9f77-e6cdfca9ef9f","checkValName",[494],{"_148":278,"_103":279,"_108":497,"_151":137,"_310":498},["D",1739132784556],[499],{"_106":276,"_151":137,"_148":278,"_99":277,"_158":281,"_156":169,"_103":207,"_150":-5,"_108":497,"_152":279,"_160":-5,"_153":119,"_159":27,"_102":500},[277],{"_148":278,"_103":502,"_108":503,"_151":137,"_310":504},58,["D",1739132779778],[505],{"_106":506,"_151":137,"_148":278,"_99":277,"_158":507,"_156":169,"_103":188,"_150":-5,"_108":503,"_152":502,"_160":-5,"_153":27,"_159":27,"_102":508},"1f117f3a-e724-11ef-89e3-e6cdfca9ef9f","/**\n * Splits a number into k parts as evenly as possible, distributing any remainder\n * among the first elements of the array.\n *\n * @param {number} number - The number to be split\n * @param {number} k - The number of parts to split into\n * @returns {number[]} An array of k numbers that sum up to the input number\n *\n * @example\n * splitNumber(10, 3) // returns [4, 3, 3]\n * splitNumber(5, 2) // returns [3, 2]\n * splitNumber(7, 4) // returns [2, 2, 2, 1]\n *\n * @remarks\n * - The function ensures that the difference between any two numbers in the result\n * is at most 1\n * - The sum of all numbers in the returned array equals the input number\n * - Larger portions (if any) are placed at the beginning of the array\n */\n\nexport default (number: number, k: number) => {\n const result: number[] = new Array(k);\n const baseValue = Math.floor(number / k);\n const remainder = number % k;\n\n for (let i = 0; i < k; i++) {\n if (i < remainder) {\n result[i] = Math.ceil(number / k);\n } else {\n result[i] = Math.floor(number / k);\n }\n }\n\n return result;\n};",[277],{"_148":296,"_103":297,"_108":510,"_151":137,"_310":511},["D",1739132696614],[512],{"_106":294,"_151":137,"_148":296,"_99":295,"_158":299,"_156":169,"_103":167,"_150":-5,"_108":510,"_152":297,"_160":-5,"_153":119,"_159":27,"_102":513},[295],{"_148":296,"_103":515,"_108":516,"_151":137,"_310":517},56,["D",1739132693408],[518],{"_106":519,"_151":137,"_148":296,"_99":295,"_158":520,"_156":169,"_103":207,"_150":-5,"_108":516,"_152":515,"_160":-5,"_153":27,"_159":27,"_102":521},"eb966fe4-e723-11ef-a13e-e6cdfca9ef9f","/**\n * Filters an object by applying a callback function to each key-value pair and returns a new object\n * containing only the entries where the callback returns true.\n *\n * @template T - The type of the input object\n * @param {T} obj - The source object to filter\n * @param {function(T[keyof T], keyof T): boolean} callback - The predicate function to test each entry\n * @param {T[keyof T]} callback.value - The value of the current entry\n * @param {keyof T} callback.key - The key of the current entry\n * @returns {Partial} A new object containing only the entries that passed the callback test\n *\n * @example\n * const input = { a: 1, b: 2, c: 3 };\n * const result = filterObject(input, (value) => value > 1);\n * // result: { b: 2, c: 3 }\n */\n\nexport default function(\n obj: T,\n callback: (value: T[keyof T], key: keyof T) => boolean,\n): Partial {\n return Object.keys(obj as Record)\n .reduce((acc, key) => {\n const typedKey = key as keyof T; // Type assertion\n if (callback(obj[typedKey], typedKey)) {\n acc[typedKey] = obj[typedKey];\n }\n return acc;\n }, {} as Partial);\n}",[295],{"_148":296,"_103":523,"_108":524,"_151":137,"_310":525},55,["D",1739132689617],[526],{"_106":527,"_151":137,"_148":296,"_99":295,"_158":528,"_156":169,"_103":188,"_150":-5,"_108":524,"_152":523,"_160":-5,"_153":27,"_159":27,"_102":529},"e9540048-e723-11ef-a13e-e6cdfca9ef9f","/**\n * Filters an object by applying a callback function to each key-value pair and returns a new object\n * containing only the entries where the callback returns true.\n *\n * @template T - The type of the input object\n * @param {T} obj - The source object to filter\n * @param {function(T[keyof T], keyof T): boolean} callback - The predicate function to test each entry\n * @param {T[keyof T]} callback.value - The value of the current entry\n * @param {keyof T} callback.key - The key of the current entry\n * @returns {Partial} A new object containing only the entries that passed the callback test\n *\n * @example\n * const input = { a: 1, b: 2, c: 3 };\n * const result = filterObject(input, (value) => value > 1);\n * // result: { b: 2, c: 3 }\n */",[295],{"_148":269,"_103":531,"_108":532,"_151":137,"_310":533},54,["D",1739132633162],[534],{"_106":535,"_151":137,"_148":269,"_99":536,"_158":272,"_156":169,"_103":167,"_150":-5,"_108":532,"_152":531,"_160":-5,"_153":27,"_159":27,"_102":537},"c7ad66fa-e723-11ef-ad06-e6cdfca9ef9f","countArray",[536],{"_148":204,"_103":205,"_108":539,"_151":137,"_310":540},["D",1739132625198],[541],{"_106":202,"_151":137,"_148":204,"_99":203,"_158":208,"_156":169,"_103":207,"_150":197,"_108":539,"_152":205,"_160":-5,"_153":119,"_159":27,"_102":542},[196,203],{"_148":204,"_103":544,"_108":545,"_151":137,"_310":546},52,["D",1739132620717],[547],{"_106":548,"_151":137,"_148":204,"_99":203,"_158":208,"_156":169,"_103":188,"_150":149,"_108":545,"_152":544,"_160":-5,"_153":27,"_159":27,"_102":549},"c04275fe-e723-11ef-ad06-e6cdfca9ef9f",[147,203],{"_148":197,"_103":198,"_108":551,"_151":137,"_310":552},["D",1739132617717],[553],{"_106":195,"_151":137,"_148":197,"_99":196,"_158":-5,"_156":157,"_103":155,"_150":-5,"_108":551,"_152":198,"_160":-5,"_153":119,"_159":27,"_102":554},[196],{"_148":197,"_103":556,"_108":557,"_151":137,"_310":558},50,["D",1739132610107],[559],{"_106":560,"_151":137,"_148":197,"_99":561,"_158":-5,"_156":157,"_103":33,"_150":-5,"_108":557,"_152":556,"_160":-5,"_153":27,"_159":27,"_102":562},"b9ef514a-e723-11ef-87c7-e6cdfca9ef9f","distinguishedApricotChipmunk",[561],{"_148":278,"_103":564,"_108":565,"_151":137,"_310":566},49,["D",1739083518858],[567],{"_106":568,"_151":137,"_148":278,"_99":277,"_158":569,"_156":169,"_103":94,"_150":-5,"_108":565,"_152":564,"_160":-5,"_153":27,"_159":27,"_102":570},"6d4556b8-e6b1-11ef-ae64-e6cdfca9ef9f","export default (number: number, k: number) => {\n const result: number[] = new Array(k);\n const baseValue = Math.floor(number / k);\n const remainder = number % k;\n\n for (let i = 0; i < k; i++) {\n if (i < remainder) {\n result[i] = Math.ceil(number / k);\n } else {\n result[i] = Math.floor(number / k);\n }\n }\n\n return result;\n};",[277],{"_148":278,"_103":572,"_108":573,"_151":137,"_310":574},48,["D",1739083491737],[575],{"_106":576,"_151":137,"_148":278,"_99":277,"_158":70,"_156":169,"_103":155,"_150":-5,"_108":573,"_152":572,"_160":-5,"_153":27,"_159":27,"_102":577},"5d1ad3a8-e6b1-11ef-a668-e6cdfca9ef9f",[277],"page","hasNext","routes/_app","actionData","errors"]

History