React Counter

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_179":180,"_181":182},"routes/_app.x.$handle.$name",{"_94":93,"_32":44,"_102":84,"_27":103,"_13":14,"_104":-5,"_11":105,"_106":107,"_108":109,"_110":111,"_112":113,"_20":-5,"_114":-5,"_115":-5,"_116":25,"_117":118,"_119":56,"_120":-5,"_121":-5,"_122":123},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_32":44,"_37":45,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":-5,"_52":-5,"_18":53,"_54":31,"_55":56,"_57":56,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":77,"_78":79,"_80":81,"_82":25},"version",25,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":36,"_37":38,"_39":14,"_40":41,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","react","latestPath","fileId","01dd64b0-afbf-11f0-b82f-0224a6c84d84","name","fileType","http","content","/** @jsxImportSource https://esm.sh/react */\nimport { renderToString } from \"npm:react-dom/server\";\nimport React, { useState } from \"https://esm.sh/react\";\n\nexport const reactCounter = (request: Request) => {\n const html = renderToString();\n\n return new Response(\n `\n \n \n \n \n React Counter\n \n \n

${html}

\n \n \n \n `,\n { headers: { \"Content-Type\": \"text/html\" } }\n );\n};\n\nfunction Counter() {\n const [count, set_count] = useState(0);\n return (\n

Count: {count}

\n \n \n

\n );\n}","createdAt",["D",1761189699411],"branchVersion","branchId","767e5ddc-af07-11f0-886d-0224a6c84d84","id","767ddc9a-af07-11f0-886d-0224a6c84d84","inline-popover",["D",1761110703601],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","0199e6c9-a2b0-7329-ac15-9bfed3c816ca","pinnedFileId","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","0199e6c9-a2b0-7329-ac15-9fae93fe8914","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_94":93,"_101":97},"org",{"_94":93,"_95":-5,"_96":97,"_18":53,"_98":99,"_100":25},"branch",{"_13":83,"_32":84,"_42":41,"_85":43,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":44,"_92":93},"isOwned",31,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","matthewmateo","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18zNDVweU5TWmZHUzlEOUM5U3NPVjlqOVVFVXgifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_42":43,"_32":44,"_37":175,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":-5,"_52":-5,"_18":53,"_54":31,"_55":56,"_57":56,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":176,"_78":177,"_80":178,"_82":25},"tree",[162,163,164],"files",[162,163,164],"counts",{"_151":60,"_152":153,"_154":60,"_155":156,"_157":158},"contents",[124,125,126],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_42":143,"_32":144,"_30":145,"_130":-5,"_40":41,"_39":146,"_132":25,"_37":147,"_13":148,"_33":135,"_35":149,"_24":25,"_137":-5,"_27":150},{"_42":139,"_32":28,"_30":31,"_130":-5,"_40":41,"_39":14,"_132":25,"_37":140,"_13":141,"_33":34,"_35":36,"_24":25,"_137":-5,"_27":142},{"_42":127,"_32":128,"_30":129,"_130":-5,"_40":41,"_39":131,"_132":56,"_37":133,"_13":134,"_33":135,"_35":136,"_24":25,"_137":-5,"_27":138},"a94ec160-afbc-11f0-b421-0224a6c84d84","tester.ts","d1763520-afbb-11f0-9e87-0224a6c84d84","parentId",18,"latest",["D",1761188527752],7,"script","import \"https://cdn.jsdelivr.net/npm/svelte@5.41.2/src/internal/disclose-version.js\";\nimport * as $ from \"https://cdn.jsdelivr.net/npm/svelte@5.41.2/src/internal/client/index.js\";\n\nvar root = $.template(\n `

$\"logo\"$

`,\n);\n\nconst $$css = {\n hash: \"svelte-b64r4w\",\n code:\n \".container.svelte-b64r4w,\\n .container.svelte-b64r4w button:where(.svelte-b64r4w) {text-align:center;font:1em sans-serif;}.logo.svelte-b64r4w {width:150px;}\",\n};\n\nexport default function __LiveCodes_Component__($$anchor, $$props) {\n $.append_styles($$anchor, $$css);\n\n let title = $.prop($$props, \"title\", 3, \"World\");\n let counter = $.state(0);\n\n function increment() {\n $.set(counter, $.get(counter) + 1);\n }\n\n var div = root();\n var h1 = $.child(div);\n var text = $.child(h1);\n\n $.reset(h1);\n\n var p = $.sibling(h1, 4);\n var text_1 = $.child(p);\n\n $.reset(p);\n\n var button = $.sibling(p, 2);\n\n $.reset(div);\n\n $.template_effect(() => {\n $.set_text(text, `Hello, ${title() ?? \"\"}!`);\n $.set_text(text_1, `You clicked ${$.get(counter) ?? \"\"} times.`);\n });\n\n $.event(\"click\", button, increment);\n $.append($$anchor, div);\n}","label",[128],"63aaf464-afbf-11f0-92e9-0224a6c84d84",["D",1761189699411],6,[28],"c507d370-afbb-11f0-8a84-0224a6c84d84","main.ts","768242c6-af07-11f0-886d-0224a6c84d84",10,["D",1761188144766],9,"import {\n autoUpdate,\n computePosition,\n flip,\n offset,\n shift,\n} from \"https://cdn.jsdelivr.net/npm/@floating-ui/dom/+esm\";\n\nexport default function init_popovers(container) {\n console.log(\"initializing popovers\");\n const templates = new Map();\n container.querySelectorAll(\"template[id]\").forEach((tpl) => {\n templates.set(tpl.id, tpl.innerHTML.trim());\n });\n\n let active = null;\n function closePopover() {\n if (!active || !active.pop) return;\n console.log({ active });\n active.pop.classList.remove(\"visible\");\n setTimeout(() => active?.pop?.remove(), 150);\n active.cleanup?.();\n active = null;\n }\n\n container.querySelectorAll(\"[data-popover]\").forEach((trigger) => {\n console.log({ trigger });\n const id = trigger.dataset.popover;\n const html = templates.get(id);\n if (!html) return;\n\n trigger.addEventListener(\"click\", (e) => {\n e.preventDefault();\n e.stopPropagation();\n\n if (active?.trigger === trigger) return closePopover();\n closePopover();\n\n const pop = document.createElement(\"div\");\n pop.className = \"popover\";\n pop.innerHTML = html;\n document.body.appendChild(pop);\n\n const placement = trigger.dataset.placement || \"bottom\";\n const cleanup = autoUpdate(trigger, pop, () => {\n computePosition(trigger, pop, {\n placement,\n middleware: [offset(6), flip(), shift({ padding: 8 })],\n }).then(({ x, y }) => {\n Object.assign(pop.style, { left: `${x}px`, top: `${y}px` });\n });\n });\n\n requestAnimationFrame(() => pop.classList.add(\"visible\"));\n active = { trigger, pop, cleanup };\n });\n });\n\n container.addEventListener(\"click\", (e) => {\n if (active && !active.pop.contains(e.target)) closePopover();\n });\n document.addEventListener(\"keydown\", (e) => {\n if (e.key === \"Escape\") closePopover();\n });\n}",[144],"pulls","branches",1,"forks","envVars",{"_159":60,"_161":60},"connections",{"_159":60,"_160":60},"count","unfilledCount","emptyCount",{"_42":143,"_32":144,"_30":145,"_130":-5,"_40":41,"_39":146,"_132":25,"_37":172,"_13":148,"_33":135,"_35":149,"_24":25,"_137":-5,"_166":173,"_27":174},{"_42":139,"_32":28,"_30":31,"_130":-5,"_40":41,"_39":14,"_132":25,"_37":169,"_13":141,"_33":34,"_35":36,"_24":25,"_137":-5,"_166":170,"_27":171},{"_42":127,"_32":128,"_30":129,"_130":-5,"_40":41,"_39":131,"_132":56,"_37":165,"_13":134,"_33":135,"_35":136,"_24":25,"_137":-5,"_166":167,"_27":168},["D",1761188527752],"children",[],[128],["D",1761189699411],[],[28],["D",1761188144766],[],[144],["D",1761110703601],{"_94":93,"_101":97},{"_94":93,"_95":-5,"_96":97,"_18":53,"_98":99,"_100":25},{"_13":83,"_32":84,"_42":41,"_85":43,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":44,"_92":93},"ctx",{"_76":-5,"_121":212,"_213":214,"_215":216,"_217":25,"_218":25,"_219":25,"_220":56,"_221":-5,"_222":-7,"_223":-7,"_224":60,"_225":25,"_226":25,"_227":-5,"_228":25,"_229":25,"_230":25,"_231":-5},"ENV",{"_183":184,"_185":186,"_187":84,"_188":189,"_190":191,"_192":193,"_194":195,"_196":197,"_198":199,"_200":201,"_202":203,"_204":205,"_206":207,"_208":209,"_210":211},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","RENDER_GIT_BRANCH","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/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v25