[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_490":491,"_492":493},"routes/_app.x.$handle.$name",{"_103":102,"_33":47,"_112":93,"_27":113,"_13":14,"_114":-5,"_11":115,"_116":117,"_118":119,"_120":121,"_122":123,"_20":-5,"_124":-5,"_125":-5,"_126":25,"_127":128,"_129":62,"_130":-5,"_131":-5,"_132":133},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_45":46,"_33":47,"_40":48,"_49":-5,"_50":25,"_51":52,"_53":52,"_54":55,"_56":57,"_18":58,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":66,"_67":68,"_69":70,"_71":72,"_73":74,"_75":-5,"_76":77,"_78":77,"_79":80,"_81":80,"_82":80,"_83":77,"_84":77,"_85":86,"_87":88,"_89":90,"_91":25},"version",264,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":30},"file",{"_31":32,"_33":34,"_35":36,"_37":39,"_40":41,"_42":14,"_43":44,"_24":25},"previous",{"_31":32,"_33":34,"_35":36,"_37":38},"deleted",false,"deletedHere","path","frontend/pages/page-blob.tsx","latestPath","frontend/pages/features/page-blob.tsx","fileId","092bd26e-4c96-11f1-b531-ee650bb23af1","name","page-blob.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/preact@10.29.1 */\n// page-blob.tsx — Blob Storage: interactive write/read/list explorer.\n\nimport {\n Badge,\n CodeBlock,\n PageHeader,\n SectionTitle,\n} from \"../ui/components.tsx\";\n\nconst LINKS = [\n { href: \"https://docs.val.town/reference/std/blob/\", label: \"Blob docs\" },\n { href: \"https://www.val.town/pricing\", label: \"Pricing\" },\n { href: \"https://www.val.town/limits\", label: \"Limits\" },\n];\n\n// ── Snippets ──────────────────────────────────────────────────────────────────\n\nconst WRAPPER_SNIPPET = {\n filename: \"backend/storage.ts\",\n code: `import { blob } from \"https://esm.town/v/std/blob\";\n\nconst PREFIX = \"template/\"; // namespace to avoid collisions\n\nexport async function saveJSON(key: string, value: unknown): Promise {\n await blob.setJSON(\\`\\${PREFIX}\\${key}\\`, value);\n}\n\nexport async function loadJSON(key: string): Promise {\n const data = await blob.getJSON(\\`\\${PREFIX}\\${key}\\`);\n return data !== undefined ? (data as T) : null;\n}\n\nexport async function listKeys(): Promise {\n const keys = await blob.list(PREFIX);\n return keys.map((k: { key: string }) => k.key.replace(PREFIX, \"\"));\n}`,\n};\n\n// ── Page ──────────────────────────────────────────────────────────────────────\n\n/** ⚠️ I am a poorly written function... Please refactor me ⚠️ */\nexport function BlobPage() {\n return (\n

\n \n\n Demo access\n

\n Public HTTP routes can mutate Blob, so the live demo requires\n BLOB_DEMO_TOKEN. Set it in Val Town env, then paste it\n here.\n

\n \n

\n\n Write a value\n

\n \n \n \n

—

\n\n Read a value\n

\n \n \n

—

\n\n List all keys\n

\n \n

—

\n\n Key rules\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Rule	Detail
\n \n	\n All Apps share one blob namespace — always prefix your keys\n (unlike SQLite)\n
\n \n	\n `setJSON` / `getJSON` handle serialisation\n
\n \n	\n `set(key, ArrayBuffer)`{\" \"}\n for images, attachments, exports\n
\n \n	\n No queries — use Blob for whole-object storage, not row data\n
\n \n	Blob is not encrypted — use Val Town env vars for secrets

\n\n \n

\n );\n}\n","/** @jsxImportSource https://esm.sh/react@19.2.0 */\n// page-blob.tsx — Blob Storage: interactive write/read/list explorer.\n//\n// Uses native / instead of Astryx TextInput/Field: those two\n// components throw `requestAnimationFrame is not defined` under Deno SSR\n// (see astryx/ssr-shims.ts doc comment) — native form controls sidestep the\n// bug entirely and match the val's \"no hydration\" design.\n\nimport {\n Badge,\n Button,\n Card,\n CodeBlock,\n Heading,\n HStack,\n Table,\n TableBody,\n TableCell,\n TableHeader,\n TableHeaderCell,\n TableRow,\n Text,\n VStack,\n} from \"../astryx/components.ts\";\nimport { PageLinks } from \"./kit.tsx\";\nimport type { CodeSnippet } from \"../types.ts\";\n\nconst LINKS = [\n { href: \"https://docs.val.town/reference/std/blob/\", label: \"Blob docs\" },\n { href: \"https://www.val.town/pricing\", label: \"Pricing\" },\n { href: \"https://www.val.town/limits\", label: \"Limits\" },\n];\n\nconst WRAPPER_SNIPPET: CodeSnippet = {\n filename: \"backend/storage.ts\",\n code: `import { blob } from \"https://esm.town/v/std/blob\";\n\nconst PREFIX = \"template/\"; // namespace to avoid collisions\n\nexport async function saveJSON(key: string, value: unknown): Promise {\n await blob.setJSON(\\`\\${PREFIX}\\${key}\\`, value);\n}\n\nexport async function loadJSON(key: string): Promise {\n const data = await blob.getJSON(\\`\\${PREFIX}\\${key}\\`);\n return data !== undefined ? (data as T) : null;\n}\n\nexport async function listKeys(): Promise {\n const keys = await blob.list(PREFIX);\n return keys.map((k: { key: string }) => k.key.replace(PREFIX, \"\"));\n}`,\n};\n\nconst RULE_ROWS: {\n rule: string;\n variant: \"error\" | \"success\" | \"info\" | \"purple\" | \"neutral\";\n detail: string;\n}[] = [\n {\n rule: \"Account-scoped\",\n variant: \"error\",\n detail: \"All Apps share one blob namespace — always prefix your keys (unlike SQLite)\",\n },\n { rule: \"JSON helpers\", variant: \"success\", detail: \"setJSON / getJSON handle serialisation\" },\n {\n rule: \"Binary support\",\n variant: \"info\",\n detail: \"set(key, ArrayBuffer) for images, attachments, exports\",\n },\n {\n rule: \"Not SQLite\",\n variant: \"purple\",\n detail: \"No queries — use Blob for whole-object storage, not row data\",\n },\n {\n rule: \"No secrets\",\n variant: \"neutral\",\n detail: \"Blob is not encrypted — use Val Town env vars for secrets\",\n },\n];\n\nexport function BlobPage() {\n return (\n \n \n Blob Storage\n \n Val Town Blob is a key-value store shared across all your Apps. 10 MB free / 1 GB Pro,\n backed by Cloudflare R2. Unlike SQLite (App-scoped), Blob is account-scoped — always\n prefix keys to avoid collisions.\n \n \n \n\n \n Demo access\n \n \n \n Public HTTP routes can mutate Blob, so the live demo requires{\" \"}\n BLOB_DEMO_TOKEN. Set it in Val Town env, then paste it here.\n \n \n BLOB_DEMO_TOKEN\n \n \n \n \n \n\n \n Write a value\n \n \n \n \n \n

Diff · v264