[{"_1":2,"_401":-5,"_402":-5},"loaderData",{"_3":4,"_91":92,"_388":389,"_400":-5},"root",{"_5":6,"_32":33,"_58":59,"_89":90},"ctx",{"_7":8,"_18":19,"_20":-5,"_21":22,"_23":24,"_25":26,"_27":26,"_28":29,"_30":31},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5},"sessionClaims","sessionId","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","environmentVariableKeys",[],"user","preferences_keybindings","default","preferences_theme","light","preferences_fixers",false,"preferences_copilot","preferences_model","claude-3-5-haiku-20241022","notification_count",0,"ENV",{"_34":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":53,"_54":55,"_56":57},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","fa80b67e1f763bfb4b247c3f5ca4f0b0730f3f5c","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","API_URL","https://api.val.town","WORKER_FINGERPRINT","799d99f2805306c2714a7cfefbeae178","clerkState",{"_60":61},"__internal_clerk_state",{"_62":63,"_64":43,"_65":66,"_67":66,"_68":26,"_69":66,"_70":66,"_71":66,"_72":66,"_73":66,"_74":66,"_75":66,"_76":66,"_77":78,"_87":26,"_88":26},"__clerk_ssr_state",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__signInForceRedirectUrl","__signUpForceRedirectUrl","__signInFallbackRedirectUrl","__signUpFallbackRedirectUrl","__clerk_debug",{"_79":26,"_80":66,"_81":82,"_83":66,"_84":43,"_85":26,"_86":66},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","remixVersion",2,"routes/_app.v.$handle.$name",{"_93":94,"_95":96,"_94":97,"_383":-5,"_384":-5,"_385":386,"_131":132,"_139":140,"_100":101,"_98":99,"_119":-7,"_50":51,"_387":26},"type","val","author","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18",{"_98":99,"_95":96,"_100":101,"_102":103,"_104":-5,"_105":106,"_107":108,"_109":110,"_111":112,"_113":26,"_114":112,"_115":116,"_117":118,"_119":120,"_121":26,"_122":31,"_123":31,"_124":31,"_125":126,"_127":31,"_128":31,"_129":-5,"_20":130,"_135":-5,"_136":-7,"_137":138,"_139":140,"_141":142},"name","sparklineEx","valNameId","c5117146-cca1-40d5-b429-b3182e61a93f","parentFolderId","bf82d590-9dfd-4635-bb46-582f78e769af","isOwned","privacy","public","readme","# Server-Rendered React Sparkline Example\n\nVaguely inspired by [Easy SVG sparklines](https://alexplescan.com/posts/2023/07/08/easy-svg-sparklines/), but totally different because that had zero dependencies and this has all the dependencies: react, htm, react-sparklines.\n\nThis is the live-generated SVG that this very val generates:\n\n![Example SVG Sparkline](https://stevekrouse-sparklineex.web.val.run)\n\n```\n![Example SVG Sparkline](https://stevekrouse-sparklineex.web.val.run)\n```\n\nIt visualizes the amount of times that it itself has been viewed. The data for this val is kept in [@stevekrouse.sparklineExData](/v/stevekrouse.sparklineExData]).","valType","http","currentVersion","2840c1b2-45f6-11ef-a9f2-de64eea55b61","legacyPrivate","id","code","/** @jsxImportSource https://esm.sh/react */\nimport { blob } from \"https://esm.town/v/std/blob?v=12\";\nimport { today } from \"https://esm.town/v/stevekrouse/today\";\nimport { renderToString } from \"npm:react-dom/server\";\nimport { Sparklines, SparklinesLine } from \"npm:react-sparklines\";\n\nexport const sparklineEx = async (req: Request) => {\n let sparklineExData = await blob.getJSON(\"sparklineExData\");\n sparklineExData[today()] = (sparklineExData[today()] ?? 0) + 1;\n let htmlString = renderToString(\n \n \n ,\n );\n htmlString = htmlString.replace(\n \" {\n const { html } = await import(\"https://esm.sh/htm/react\");\n const ReactDOMServer = await import(\"npm:react-dom/server\");\n const { default: { Sparklines, SparklinesLine } } = await import(\n \"npm:react-sparklines\"\n );\n @me.sparklineExData[@stevekrouse.today()] =\n (@me.sparklineExData[@stevekrouse.today()] ?? 0) + 1;\n let svg = html`\n <${Sparklines} data=${\n Object.values(@me.sparklineExData)\n } width=${100} height=${40}>\n <${SparklinesLine} color=\"blue\" />\n `;\n let htmlString = ReactDOMServer.renderToString(svg);\n htmlString = htmlString.replace(\n \"

sparklineEx

Version 55