[{"_1":2,"_457":-5,"_458":-5},"loaderData",{"_3":4,"_95":96,"_362":363,"_456":-5},"root",{"_5":6,"_34":35,"_62":63,"_93":94},"ctx",{"_7":8,"_19":20,"_21":-5,"_22":23,"_24":25,"_26":27,"_28":27,"_29":27,"_30":31,"_32":33},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5},"sessionClaims","sessionId","sessionStatus","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","environmentVariableKeys",[],"user","preferences_keybindings","default","preferences_theme","light","preferences_fixers",false,"preferences_copilot","preferences_selection_ai","preferences_model","claude-3-5-haiku-20241022","notification_count",0,"ENV",{"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":53,"_54":55,"_56":57,"_58":59,"_60":61},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","79920bfb7e8e7a247cef1250cc3519921acc39ee","RENDER_GIT_BRANCH","main","CLERK_PUBLISHABLE_KEY","pk_live_Y2xlcmsudmFsLnRvd24k","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/","API_URL","https://api.val.town","WORKER_FINGERPRINT","3470772f6f0722eceafc79f40071545c","clerkState",{"_64":65},"__internal_clerk_state",{"_66":67,"_68":45,"_69":70,"_71":70,"_72":27,"_73":70,"_74":70,"_75":70,"_76":70,"_77":70,"_78":70,"_79":70,"_80":70,"_81":82,"_91":27,"_92":27},"__clerk_ssr_state",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__signInForceRedirectUrl","__signUpForceRedirectUrl","__signInFallbackRedirectUrl","__signUpFallbackRedirectUrl","__clerk_debug",{"_83":27,"_84":70,"_85":86,"_87":70,"_88":45,"_89":27,"_90":70},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","remixVersion",2,"routes/_app.v.$handle.$name",{"_97":98,"_99":100,"_98":101,"_357":-5,"_358":-5,"_359":360,"_136":137,"_145":146,"_104":105,"_102":103,"_123":-7,"_52":53,"_361":27},"type","val","author","5e11e267-23cd-4ee4-86f4-3bf2a5ed69d7",{"_102":103,"_99":100,"_104":105,"_106":107,"_108":-5,"_109":110,"_111":112,"_113":114,"_115":116,"_117":27,"_118":116,"_119":120,"_121":122,"_123":124,"_125":27,"_126":127,"_128":33,"_129":130,"_131":33,"_132":33,"_133":33,"_134":-5,"_21":135,"_140":-5,"_141":-5,"_142":-7,"_143":144,"_145":146,"_147":148},"name","resrv","valNameId","bd4ea974-0a53-11ef-b6f6-cab58f78796a","parentFolderId","e734058e-1464-11ef-8038-cab58f78796a","isOwned","privacy","public","readme","React SSR and client-side hydration for Val Town\n\nFor streaming responses use [ReactStream]\n\n[ReactStream]: https://www.val.town/v/jxnblk/ReactStream\n\n## Usage\n\n```tsx\n/** @jsxImportSource https://esm.sh/react */\nimport resrv, { React } from \"https://esm.town/v/jxnblk/resrv\";\n\nfunction App() {\n const [count, setCount] = React.useState(0);\n return (\n

Resrv

React SSR with client-side hydration in Val Town

{count}

\n \n \n

\n );\n}\n\nexport default resrv(App, import.meta.url);\n```\n\n[Live example](https://www.val.town/v/jxnblk/resrv_example)\n\nReact requires matching versions for SSR and hydration.\nImport `React` from `https://esm.town/v/jxnblk/resrv` to ensure your component uses the same version as this library (currently react@18.3.1).\n\n## HTML Root Hydration\n\nTo render a component that includes a `` and `` tag, pass `root: true` to the third `options` argument:\n\n```tsx\nfunction App ({ script }) {\n return (\n \n

Hello

\n {script}\n \n );\n}\n\nexport default resrv(App, import.meta.url, { root: true });\n```\n\nInspired by https://www.val.town/v/stevekrouse/react_http\n","valType","script","currentVersion","8343d54c-0afd-11ef-9cd7-cab58f78796a","legacyPrivate","id","code","/** @jsxImportSource https://esm.sh/react */\nimport { renderToString } from \"https://esm.sh/react-dom@18.3.1/server\";\nimport * as React from \"https://esm.sh/react@18.3.1\";\n\n// API:\n// import resrv, { React } from \"https://esm.town/v/jxnblk/resrv\";\n// export default resrv(Component, import.meta.url);\n\nexport { React };\n\nconst createScript = (module: string) => `\nimport App from \"${module}\";\nimport { hydrateRoot } from \"https://esm.sh/react-dom@18.3.1/client\";\nimport { jsx } from \"https://esm.sh/react@18.3.1/jsx-runtime\";\nconst root = document.getElementById(\"root\");\nhydrateRoot(root, jsx(App, {}));\n`;\n\nconst App = ({ Component, module, simple }: {\n Component: any;\n module: string;\n simple?: boolean;\n}) => {\n const script = (\n \n );\n if (simple) {\n return (\n <>\n \n \n \n {script}\n \n \n );\n }\n\n return ;\n};\n\ninterface Options {\n root?: boolean;\n}\n\nexport default function resrv(Component, module: string, opts: Options = {}) {\n return function(args: Request | T): Response | any {\n if (args instanceof Request) {\n const body = renderToString();\n const html = `\n \n ${body}\n `;\n\n return new Response(html, {\n headers: {\n \"Content-Type\": \"text/html\",\n },\n });\n }\n\n return ;\n };\n}","createdAt",["D",1714926941702],"version",52,"currentUserHasLiked","likeCount",1,"forkCount","referenceCount",6,"dependencyCount","commentCount","prCount","mergedPr",{"_136":137,"_138":139},"handle","jxnblk","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yZmtHZzA2Z3F0dEJXNHQ4S1hpYWdPZ0N0YU4ifQ","forkedVal","fileId","interval","slug","jxnblk/resrv","description","React SSR and client-side hydration for Val Town For streaming responses use ReactStream Usage /** @jsxImportSource https://esm.sh/react */\nimport resrv, { React } from \"https://esm.town/v/jxnblk/resrv\";\n\nfunction App() {\n const [count, setCount] = React.useState(0);\n return (\n

Resrv

React SSR with client-side hydration in Val Town

{count}

\n \n \n

\n );\n}\n\nexport default resrv(App, import.meta.url); Live example React requires matching versions for SSR and hydration.\nImport React from https://esm.town/v/jxnblk/resrv to ensure your component uses the same version as this library (currently react@18.3.1). HTML Root Hydration To render a component that includes a and tag, pass root: true to the third options argument: function App ({ script }) {\n return (\n \n

Hello

\n {script}\n \n );\n}\n\nexport default resrv(App, import.meta.url, { root: true }); Inspired by https://www.val.town/v/stevekrouse/react_http","versions",[149,153,157,161,165,169,173,177,181,185,189,193,197,201,205,209,213,217,221,225,229,233,237,241,245,249,253,257,261,265,269,273,277,281,285,289,293,297,301,305,309,313,317,321,325,329,333,336,340,344,348,351,354],{"_123":124,"_150":151,"_121":152,"_118":116},"prId","06318e60-0afc-11ef-85f0-cab58f78796a",["D",1714926941702],{"_123":154,"_150":-5,"_121":155,"_118":156},51,["D",1714857297662],"5c2e9cbe-0a5b-11ef-91b0-cab58f78796a",{"_123":158,"_150":-5,"_121":159,"_118":160},50,["D",1714857284567],"54605d06-0a5b-11ef-8fd3-cab58f78796a",{"_123":162,"_150":-5,"_121":163,"_118":164},49,["D",1714857191723],"1d099e26-0a5b-11ef-a06a-cab58f78796a",{"_123":166,"_150":-5,"_121":167,"_118":168},48,["D",1714857133613],"fa669cb6-0a5a-11ef-bc93-cab58f78796a",{"_123":170,"_150":-5,"_121":171,"_118":172},47,["D",1714857096451],"e44038f2-0a5a-11ef-860b-cab58f78796a",{"_123":174,"_150":-5,"_121":175,"_118":176},46,["D",1714857037954],"c162462c-0a5a-11ef-8817-cab58f78796a",{"_123":178,"_150":-5,"_121":179,"_118":180},45,["D",1714856614379],"c4e9d3c4-0a59-11ef-ba49-cab58f78796a",{"_123":182,"_150":-5,"_121":183,"_118":184},44,["D",1714856586129],"b4133c34-0a59-11ef-9086-cab58f78796a",{"_123":186,"_150":-5,"_121":187,"_118":188},43,["D",1714856536540],"96849924-0a59-11ef-b272-cab58f78796a",{"_123":190,"_150":-5,"_121":191,"_118":192},42,["D",1714856527193],"90f24290-0a59-11ef-bc93-cab58f78796a",{"_123":194,"_150":-5,"_121":195,"_118":196},41,["D",1714856467075],"6d1d36d6-0a59-11ef-a946-cab58f78796a",{"_123":198,"_150":-5,"_121":199,"_118":200},40,["D",1714856461328],"69b02b70-0a59-11ef-8366-cab58f78796a",{"_123":202,"_150":-5,"_121":203,"_118":204},39,["D",1714856143107],"ac036a38-0a58-11ef-9abc-cab58f78796a",{"_123":206,"_150":-5,"_121":207,"_118":208},38,["D",1714856114534],"9afb9d1e-0a58-11ef-adc1-cab58f78796a",{"_123":210,"_150":-5,"_121":211,"_118":212},37,["D",1714856105263],"9574f836-0a58-11ef-980b-cab58f78796a",{"_123":214,"_150":-5,"_121":215,"_118":216},36,["D",1714856029845],"68811e22-0a58-11ef-85f6-cab58f78796a",{"_123":218,"_150":-5,"_121":219,"_118":220},35,["D",1714856014152],"5f26a4e6-0a58-11ef-afb4-cab58f78796a",{"_123":222,"_150":-5,"_121":223,"_118":224},34,["D",1714856002942],"5877fea6-0a58-11ef-8fc1-cab58f78796a",{"_123":226,"_150":-5,"_121":227,"_118":228},33,["D",1714855991323],"518b099e-0a58-11ef-a7e8-cab58f78796a",{"_123":230,"_150":-5,"_121":231,"_118":232},32,["D",1714855987889],"4f7f1050-0a58-11ef-8fc1-cab58f78796a",{"_123":234,"_150":-5,"_121":235,"_118":236},31,["D",1714855981564],"4bb9ff02-0a58-11ef-a7e8-cab58f78796a",{"_123":238,"_150":-5,"_121":239,"_118":240},30,["D",1714855965257],"4201c968-0a58-11ef-b58a-cab58f78796a",{"_123":242,"_150":-5,"_121":243,"_118":244},29,["D",1714855959296],"3e742d2c-0a58-11ef-85f6-cab58f78796a",{"_123":246,"_150":-5,"_121":247,"_118":248},28,["D",1714855940840],"3373ec64-0a58-11ef-aeaf-cab58f78796a",{"_123":250,"_150":-5,"_121":251,"_118":252},27,["D",1714855916934],"2534482e-0a58-11ef-a7e8-cab58f78796a",{"_123":254,"_150":-5,"_121":255,"_118":256},26,["D",1714855903273],"1d0f9efa-0a58-11ef-85f6-cab58f78796a",{"_123":258,"_150":-5,"_121":259,"_118":260},25,["D",1714855895680],"188911e0-0a58-11ef-84a6-cab58f78796a",{"_123":262,"_150":-5,"_121":263,"_118":264},24,["D",1714855895631],"18819334-0a58-11ef-ad45-cab58f78796a",{"_123":266,"_150":-5,"_121":267,"_118":268},23,["D",1714855804238],"e2082872-0a57-11ef-8ea2-cab58f78796a",{"_123":270,"_150":-5,"_121":271,"_118":272},22,["D",1714855795151],"dc9da3e4-0a57-11ef-9c62-cab58f78796a",{"_123":274,"_150":-5,"_121":275,"_118":276},21,["D",1714855780025],"d3998da8-0a57-11ef-b03a-cab58f78796a",{"_123":278,"_150":-5,"_121":279,"_118":280},20,["D",1714855639845],"800bd434-0a57-11ef-b03a-cab58f78796a",{"_123":282,"_150":-5,"_121":283,"_118":284},19,["D",1714855524404],"3b3cead2-0a57-11ef-a3f2-cab58f78796a",{"_123":286,"_150":-5,"_121":287,"_118":288},18,["D",1714855476175],"1e7dab8e-0a57-11ef-a3f2-cab58f78796a",{"_123":290,"_150":-5,"_121":291,"_118":292},17,["D",1714855336160],"cb09148e-0a56-11ef-b492-cab58f78796a",{"_123":294,"_150":-5,"_121":295,"_118":296},16,["D",1714855270432],"a3dbdbee-0a56-11ef-bd43-cab58f78796a",{"_123":298,"_150":-5,"_121":299,"_118":300},15,["D",1714855259347],"9d4069f8-0a56-11ef-9a5c-cab58f78796a",{"_123":302,"_150":-5,"_121":303,"_118":304},14,["D",1714855239286],"914b4d70-0a56-11ef-bd43-cab58f78796a",{"_123":306,"_150":-5,"_121":307,"_118":308},13,["D",1714855232491],"8d3e7856-0a56-11ef-8a5b-cab58f78796a",{"_123":310,"_150":-5,"_121":311,"_118":312},12,["D",1714855223250],"87bc6c8a-0a56-11ef-92fb-cab58f78796a",{"_123":314,"_150":-5,"_121":315,"_118":316},11,["D",1714855184071],"70621aa8-0a56-11ef-aeee-cab58f78796a",{"_123":318,"_150":-5,"_121":319,"_118":320},10,["D",1714855163031],"63d7bc66-0a56-11ef-a3a4-cab58f78796a",{"_123":322,"_150":-5,"_121":323,"_118":324},9,["D",1714855073135],"2e42a4f8-0a56-11ef-87fd-cab58f78796a",{"_123":326,"_150":-5,"_121":327,"_118":328},8,["D",1714855054746],"234cc8ee-0a56-11ef-85df-cab58f78796a",{"_123":330,"_150":-5,"_121":331,"_118":332},7,["D",1714855045440],"1dc0be62-0a56-11ef-a519-cab58f78796a",{"_123":130,"_150":-5,"_121":334,"_118":335},["D",1714854753635],"6fd2d9ca-0a55-11ef-ba83-cab58f78796a",{"_123":337,"_150":-5,"_121":338,"_118":339},5,["D",1714854722532],"5d48fb40-0a55-11ef-90b8-cab58f78796a",{"_123":341,"_150":-5,"_121":342,"_118":343},4,["D",1714854646132],"2fbf3f9a-0a55-11ef-9706-cab58f78796a",{"_123":345,"_150":-5,"_121":346,"_118":347},3,["D",1714854608640],"19666688-0a55-11ef-90b8-cab58f78796a",{"_123":94,"_150":-5,"_121":349,"_118":350},["D",1714854259908],"498a1658-0a54-11ef-b3a8-cab58f78796a",{"_123":127,"_150":-5,"_121":352,"_118":353},["D",1714854091752],"e54f92bc-0a53-11ef-84a9-cab58f78796a",{"_123":33,"_150":-5,"_121":355,"_118":356},["D",1714854024646],"bd500bd4-0a53-11ef-b6f6-cab58f78796a","recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name.references",{"_364":365,"_129":94,"_453":144,"_454":33,"_98":455},"referenceList",[366,422],{"_104":367,"_368":369},"5274fc02-0a5d-11ef-9ebc-cab58f78796a","initialData",{"_102":370,"_99":100,"_104":367,"_106":371,"_108":-5,"_109":110,"_111":-5,"_113":372,"_115":373,"_117":27,"_118":373,"_119":374,"_121":375,"_123":376,"_125":27,"_126":33,"_129":33,"_131":337,"_132":33,"_128":33,"_133":33,"_134":-5,"_21":377,"_140":-5,"_142":-7,"_145":378,"_379":-5,"_143":380,"_147":381},"tuna_example","97041b86-1463-11ef-b85c-cab58f78796a","http","b7840f50-12f7-11ef-a09b-cab58f78796a","// Example of using tuna and caviar with React (resrv) on Val Town\n// what does the save button do?\n\n/** @jsxImportSource https://esm.sh/react */\nimport { caviar } from \"https://esm.town/v/jxnblk/caviar\";\nimport resrv, { React } from \"https://esm.town/v/jxnblk/resrv\";\nimport { css } from \"https://esm.town/v/jxnblk/tuna\";\nimport ValBadge from \"https://esm.town/v/jxnblk/val_badge_react\";\n\n// Helper for using CSS vars\nconst vars = caviar({\n light: {\n text: \"#013\",\n bg: \"#fff\",\n highlight: \"#0cf\",\n },\n dark: {\n text: \"#fff\",\n bg: \"#013\",\n highlight: \"#0cf\",\n },\n});\n\nconst styles = css({\n body: { // special keyword\n fontFamily: \"Lexend, system-ui, sans-serif\",\n margin: 0,\n color: vars.text,\n backgroundColor: vars.bg,\n },\n container: {\n padding: \"32px\",\n margin: \"0 auto\",\n maxWidth: \"1024px\",\n },\n title: {\n margin: 0,\n fontSize: 48,\n lineHeight: \"1.0\",\n \"@media screen and (min-width: 768px)\": {\n fontSize: 64,\n },\n },\n input: {\n fontFamily: \"inherit\",\n fontSize: \"inherit\",\n lineHeight: \"1.5\",\n padding: \"2px 8px\",\n borderWidth: \"1px\",\n borderStyle: \"solid\",\n borderColor: vars.text,\n borderRadius: \"4px\",\n \"&:focus\": {\n borderColor: vars.highlight,\n },\n },\n colorModeButton: {\n position: \"fixed\",\n top: 0,\n right: 0,\n margin: \"16px\",\n },\n});\n\nconst modes = [\"light\", \"dark\"];\n\nfunction App({ script }) {\n const [mode, setMode] = React.useState(\"light\");\n\n const toggleMode = e => {\n e.preventDefault();\n const i = (modes.indexOf(mode) + 1) % modes.length;\n setMode(modes[i]);\n };\n\n return (\n <>\n \n 🐟 Tuna\n \n \n \n \n \n