[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_537":538,"_539":540},"routes/_app.x.$handle.$name",{"_102":101,"_32":46,"_111":92,"_27":112,"_13":14,"_113":-5,"_11":114,"_115":116,"_117":118,"_119":120,"_121":122,"_20":-5,"_123":-5,"_124":-5,"_125":25,"_126":127,"_128":61,"_129":-5,"_130":-5,"_131":132},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":56,"_18":57,"_58":59,"_60":61,"_62":-5,"_63":-5,"_64":65,"_66":67,"_68":69,"_70":71,"_72":73,"_74":-5,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":85,"_86":87,"_88":89,"_90":25},"version",362,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","frontend/pages/features/page-blob.tsx","latestPath","fileId","092bd26e-4c96-11f1-b531-ee650bb23af1","name","page-blob.tsx","fileType","script","content","/** @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. Each input gets the\n// shared `.field-input` class (defined once in app.tsx) so it still matches\n// Astryx's field tokens (radius, border, background) instead of looking like\n// unstyled browser chrome. Every standalone Button/input is wrapped in an\n// HStack — Stack's default cross-axis alignment is `stretch`, so an\n// unwrapped single child stretches to the Section's full width.\n\nimport {\n Badge,\n Button,\n CodeBlock,\n Heading,\n HStack,\n Link,\n Section,\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 { AppProps, 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({ user }: AppProps) {\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 {!user && (\n

\n \n Sign in with Val Town to try the live write/read/list demo below.\n Sign in with Val Town\n \n

\n )}\n\n \n Write a value\n

\n \n \n Keys are namespaced to your username ({user?.username ?? \"you\"}/…) so concurrent demo\n visitors never collide.\n \n \n \n \n

\n \n\n \n Read a value\n

\n \n \n \n \n \n —\n \n

\n \n\n \n List all keys\n

\n \n \n

\n \n\n \n Key rules\n \n \n \n Rule\n Detail\n \n \n \n {RULE_ROWS.map((r) => (\n \n \n \n \n {r.detail}\n \n ))}\n \n

\n \n\n \n \n );\n}\n","/** @jsxImportSource https://esm.sh/react@19.2.0 */\n// page-blob.tsx — Blob Storage demo: interactive write/read/list explorer.\n// Wrapper internals (namespacing, JSON helpers, binary support) live in the\n// Docs section — this page stays demo-only.\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. Each input gets the\n// shared `.field-input` class (defined once in app.tsx) so it still matches\n// Astryx's field tokens (radius, border, background) instead of looking like\n// unstyled browser chrome. Every standalone Button/input is wrapped in an\n// HStack — Stack's default cross-axis alignment is `stretch`, so an\n// unwrapped single child stretches to the Section's full width.\n\nimport { Button, Heading, HStack, Link, Section, Text, VStack } from \"../../astryx/components.ts\";\nimport { PageLinks } from \"../kit.tsx\";\nimport type { AppProps } 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\nexport function BlobPage({ user }: AppProps) {\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 {!user && (\n

\n \n Sign in with Val Town to try the live write/read/list demo below.\n Sign in with Val Town\n \n

\n )}\n\n \n Write a value\n

\n \n \n Keys are namespaced to your username ({user?.username ?? \"you\"}/…) so concurrent demo\n visitors never collide.\n \n \n \n \n

\n \n\n \n Read a value\n

\n \n \n \n \n \n —\n \n

\n \n\n \n List all keys\n

\n \n \n

\n \n\n \n

Diff · v362