[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_236":237,"_238":239},"routes/_app.x.$handle.$name",{"_102":101,"_33":47,"_110":88,"_28":111,"_13":14,"_112":-5,"_11":113,"_114":115,"_116":117,"_118":119,"_120":121,"_20":-5,"_122":123,"_124":125,"_126":27,"_127":128,"_129":25,"_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":27,"_51":52,"_53":52,"_54":-5,"_55":-5,"_18":56,"_57":58,"_59":25,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":81,"_82":83,"_84":85,"_86":27},"version",4,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":27,"_28":29,"_30":29},"file",{"_31":32,"_33":34,"_35":36,"_37":39,"_40":41,"_42":14,"_43":44,"_24":27},"previous",{"_31":32,"_33":34,"_35":36,"_37":38},"deleted",true,"deletedHere",false,"path","frontend/components/App.tsx","latestPath","fileId","122d2f69-89f1-486e-bea5-b64751f71368","name","App.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function App() {\n const [clicked, setClicked] = useState(0);\n return (\n

Val Town React + Hono Starter

\n I've been clicked times\n

\n );\n}","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\n\ntype Pixel = {\n id: string;\n created: string;\n viewCount: number;\n};\n\ntype PixelDetail = {\n id: string;\n created: string;\n views: Array<{\n timestamp: string;\n ip: string;\n userAgent: string;\n referer: string;\n }>;\n};\n\nexport function App() {\n const [pixels, setPixels] = useState([]);\n const [loading, setLoading] = useState(true);\n const [selectedPixel, setSelectedPixel] = useState(null);\n const [copySuccess, setCopySuccess] = useState(\"\");\n\n useEffect(() => {\n fetchPixels();\n }, []);\n\n const fetchPixels = async () => {\n setLoading(true);\n try {\n const response = await fetch(\"/api/list\");\n const data = await response.json();\n setPixels(data);\n } catch (error) {\n console.error(\"Error fetching pixels:\", error);\n } finally {\n setLoading(false);\n }\n };\n\n const createNewPixel = async () => {\n try {\n const response = await fetch(\"/api/create\");\n const data = await response.json();\n await fetchPixels();\n await fetchPixelDetails(data.id);\n } catch (error) {\n console.error(\"Error creating pixel:\", error);\n }\n };\n\n const fetchPixelDetails = async (id: string) => {\n try {\n const response = await fetch(`/api/data/${id}`);\n const data = await response.json();\n setSelectedPixel(data);\n } catch (error) {\n console.error(\"Error fetching pixel details:\", error);\n }\n };\n\n const copyToClipboard = (text: string) => {\n navigator.clipboard.writeText(text)\n .then(() => {\n setCopySuccess(\"Copied!\");\n setTimeout(() => setCopySuccess(\"\"), 2000);\n })\n .catch(() => {\n setCopySuccess(\"Failed to copy\");\n });\n };\n\n const getFullTrackingUrl = (path: string) => {\n const baseUrl = window.location.origin;\n return `${baseUrl}${path}`;\n };\n\n const formatDate = (dateString: string) => {\n return new Date(dateString).toLocaleString();\n };\n\n return (\n

Pixel Tracker

Create and track unique tracking pixels across the web.

\n \n

Your Tracking Pixels

\n {loading ? (\n

\n ) : pixels.length === 0 ? (\n

No tracking pixels yet. Create one to get started!

\n ) : (\n

fetchPixelDetails(pixel.id)}\n >\n
ID: {pixel.id}
\n
Created: {formatDate(pixel.created)}
\n
Views: {pixel.viewCount}
\n

\n )}\n

\n \n

Pixel Details

\n {selectedPixel ? (\n

Tracking Pixel: {selectedPixel.id}

Created: {formatDate(selectedPixel.created)}

Total Views: {selectedPixel.views.length}

\n \n

Tracking URL:

\n \n \n {copySuccess && {copySuccess}}\n

\n \n

HTML Code:

\n `}\n readOnly\n style={{ \n padding: \"8px\",\n width: \"100%\",\n border: \"1px solid #ddd\",\n borderRadius: \"4px\"\n }}\n />\n \n

\n \n

View History:

\n {selectedPixel.views.length === 0 ? (\n

No views yet.

\n ) : (\n

\n \n \n \n \n \n \n \n \n {selectedPixel.views.map((view, index) => (\n \n \n \n \n ))}\n \n

Time	Referrer
{formatDate(view.timestamp)}	{view.referer}

\n )}\n

\n ) : (\n

Select a pixel from the list to view details.

\n )}\n

\n );\n}","createdAt",["D",1744394840186],"branchVersion","branchId","4ab85482-16ff-11f0-8a46-569c3dd06744","id","4ab60506-16ff-11f0-8a46-569c3dd06744","trackerPixel",["D",1744394617429],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","4555dd0e-707e-4444-acd3-049d206eb1db","pinnedFileId","579501b2-171f-11f0-928c-569c3dd06744","pinPreview","pinMigrated","screenshotVersion",41,"likeCount",0,"orgId","bced381e-9ab2-4b55-929d-e7c5064f7f38","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_102":101,"_109":105},"org",{"_102":101,"_103":-5,"_104":105,"_18":56,"_106":107,"_108":27},"branch",{"_13":87,"_33":88,"_45":44,"_89":46,"_90":91,"_92":93,"_94":52,"_95":96,"_97":98,"_99":47,"_100":101},"isOwned",42,"main","projectId","forkedBranchId","961078ea-f528-11ef-aa68-569c3dd06744","forkedBranchVersion",39,"forkedProjectPrivacy","forkedProjectId","96102714-f528-11ef-aa68-569c3dd06744","forkedProjectOrgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","userHandle","wolf","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJvVXpPVUZRTjZGTGd2Q2t4c0RRdFpNZWJ5UCJ9","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_45":46,"_33":47,"_40":232,"_49":-5,"_50":27,"_51":52,"_53":52,"_54":-5,"_55":-5,"_18":56,"_57":58,"_59":25,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":233,"_82":234,"_84":235,"_86":27},"tree",[180,182,187],"files",[180,181,182,183,184,185,186,187],"counts",{"_170":64,"_171":153,"_172":64,"_173":174,"_175":176},"contents",[146,147,148],"upstreamProject",{"_45":96,"_33":141,"_54":142,"_55":143,"_51":52,"_80":144},"upstreamBranch",{"_45":91,"_40":134,"_135":136,"_33":88,"_89":96,"_13":137,"_90":-5,"_92":-5,"_138":139,"_49":-5,"_86":27,"_51":52,"_100":140,"_65":98,"_99":141},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],"updatedAt",["D",1785420707976],91,"lockfileKey","1785420708123-esm.town_v_templates_react-hono-starter@91-main","templates","react-hono-starter","Starter template with client-side React & Hono server","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789685802&sig=0d40e82bc94fe29a2593f6c6722d9ecd114c2dd7e642708df69e47903fd87937",{"_102":140,"_109":145},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789685802&sig=ad62363c8484b2ef3ca7c89fb0f764af114a495283031ef82dbb2b4c672cd79b",{"_45":165,"_33":166,"_31":167,"_152":-5,"_43":44,"_42":153,"_154":27,"_40":168,"_13":64,"_35":163,"_37":-5,"_24":27,"_157":-5,"_28":169},{"_45":159,"_33":160,"_31":161,"_152":-5,"_43":44,"_42":153,"_154":27,"_40":162,"_13":64,"_35":163,"_37":-5,"_24":27,"_157":-5,"_28":164},{"_45":149,"_33":150,"_31":151,"_152":-5,"_43":44,"_42":153,"_154":27,"_40":155,"_13":64,"_35":20,"_37":156,"_24":27,"_157":-5,"_28":158},"4aba6a10-16ff-11f0-8a46-569c3dd06744","README.md","8c827a0c-50c9-40ca-9bd9-81ca4d42e47e","parentId",1,"latest",["D",1744394617429],"# React Hono Starter\n\nThis app is a starter template for client-side React and server-side Hono.\n\n- **Remix** this starter template on the top right to get started.\n\n- The **entrypoint** is `/backend/index.ts`. That's the backend HTTP server, which also serves the all the frontend assets.\n\n- The **client-side entrypoint** is `/frontend/index.html`, which in turn imports `/frontend/index.tsx`, which in turn imports the React app from `/frontend/components/App.tsx`.\n\n[React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) is a fuller featured example project, with a SQLite database table, queries, client-side CSS and a favicon, and some shared code that runs on both client and server.","label",[150],"4aba688a-16ff-11f0-8a46-569c3dd06744","frontend","3fbae7c2-a3c0-4f08-b6f5-4efc105c892b",["D",1744394617429],"directory",[160],"4aba5e1c-16ff-11f0-8a46-569c3dd06744","backend","9bb0838b-16e0-4244-9235-45dd025b9f5c",["D",1744394617429],[166],"pulls","branches","forks","envVars",{"_177":64,"_179":64},"connections",{"_177":64,"_178":64},"count","unfilledCount","emptyCount",{"_45":165,"_33":166,"_31":167,"_152":-5,"_43":44,"_42":153,"_154":27,"_40":229,"_13":64,"_35":163,"_37":-5,"_24":27,"_157":-5,"_189":230,"_28":231},{"_45":220,"_33":221,"_31":222,"_152":167,"_43":44,"_42":223,"_154":27,"_40":224,"_13":153,"_35":225,"_37":226,"_24":27,"_157":-5,"_189":227,"_28":228},{"_45":159,"_33":160,"_31":161,"_152":-5,"_43":44,"_42":153,"_154":27,"_40":217,"_13":64,"_35":163,"_37":-5,"_24":27,"_157":-5,"_189":218,"_28":219},{"_45":213,"_33":212,"_31":208,"_152":161,"_43":44,"_42":153,"_154":27,"_40":214,"_13":64,"_35":163,"_37":-5,"_24":27,"_157":-5,"_189":215,"_28":216},{"_45":207,"_33":34,"_31":32,"_152":208,"_43":44,"_42":14,"_154":27,"_40":209,"_13":153,"_35":36,"_37":39,"_24":27,"_157":-5,"_189":210,"_28":211},{"_45":199,"_33":200,"_31":201,"_152":161,"_43":44,"_42":202,"_154":27,"_40":203,"_13":153,"_35":20,"_37":204,"_24":27,"_157":-5,"_189":205,"_28":206},{"_45":192,"_33":193,"_31":194,"_152":161,"_43":44,"_42":153,"_154":27,"_40":195,"_13":64,"_35":36,"_37":196,"_24":27,"_157":-5,"_189":197,"_28":198},{"_45":149,"_33":150,"_31":151,"_152":-5,"_43":44,"_42":153,"_154":27,"_40":188,"_13":64,"_35":20,"_37":156,"_24":27,"_157":-5,"_189":190,"_28":191},["D",1744394617429],"children",[],[150],"4aba66d2-16ff-11f0-8a46-569c3dd06744","index.tsx","1f98089b-243b-4b3f-92cb-a89bd8dac1bd",["D",1744394617429],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();",[],[160,193],"cf7ae6a8-16ff-11f0-88f7-569c3dd06744","index.html","5e39c790-43ab-4683-b695-4a01592bd210",2,["D",1744394840181],"\n\n \n \n \n Pixel Tracker - Track Web Analytics\n \n \n \n

\n \n \n \n",[],[160,200],"cf8357d4-16ff-11f0-9187-569c3dd06744","75818d5a-6455-4c9f-9477-43c0ede92c17",["D",1744394840186],[],[160,212,34],"components","4aba61c8-16ff-11f0-8a46-569c3dd06744",["D",1744394617429],[184],[160,212],["D",1744394617429],[183,185,186],[160],"cf7e5202-16ff-11f0-b734-569c3dd06744","index.ts","50ce3412-548d-4072-9250-dcbb7db43a58",3,["D",1744394840185],"http","import { serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { blob } from \"https://esm.town/v/std/blob\";\nimport { nanoid } from \"npm:nanoid\";\n\nconst app = new Hono();\n\n// Serve index.html at the root /\napp.get(\"/\", async c => {\n return serveFile(\"/frontend/index.html\", import.meta.url);\n});\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Generate a new tracking pixel ID\napp.get(\"/api/create\", async c => {\n const id = nanoid(10);\n await blob.setJSON(`pixel_${id}`, { \n id, \n created: new Date().toISOString(),\n views: [],\n });\n return c.json({ id, trackingUrl: `/t/${id}.gif` });\n});\n\n// Get tracking data for a pixel\napp.get(\"/api/data/:id\", async c => {\n const id = c.req.param(\"id\");\n try {\n const data = await blob.getJSON(`pixel_${id}`);\n return c.json(data);\n } catch (e) {\n return c.json({ error: \"Pixel not found\" }, 404);\n }\n});\n\n// 1x1 transparent tracking pixel endpoint\napp.get(\"/t/:id.gif\", async c => {\n const id = c.req.param(\"id\").replace(\".gif\", \"\");\n \n try {\n // Get the current data\n const data = await blob.getJSON(`pixel_${id}`);\n \n // Add a new view\n const viewData = {\n timestamp: new Date().toISOString(),\n ip: c.req.header(\"x-forwarded-for\") || \"unknown\",\n userAgent: c.req.header(\"user-agent\") || \"unknown\",\n referer: c.req.header(\"referer\") || \"unknown\"\n };\n \n data.views.push(viewData);\n \n // Update the data\n await blob.setJSON(`pixel_${id}`, data);\n \n // Return a 1x1 transparent GIF\n const transparentGif = new Uint8Array([\n 0x47, 0x49, 0x46, 0x38, 0x39, 0x61, 0x01, 0x00, \n 0x01, 0x00, 0x80, 0x00, 0x00, 0xff, 0xff, 0xff, \n 0x00, 0x00, 0x00, 0x21, 0xf9, 0x04, 0x01, 0x00, \n 0x00, 0x00, 0x00, 0x2c, 0x00, 0x00, 0x00, 0x00, \n 0x01, 0x00, 0x01, 0x00, 0x00, 0x02, 0x02, 0x44, \n 0x01, 0x00, 0x3b\n ]);\n \n return new Response(transparentGif, {\n headers: {\n \"Content-Type\": \"image/gif\",\n \"Cache-Control\": \"no-store, no-cache, must-revalidate, proxy-revalidate\",\n \"Pragma\": \"no-cache\",\n \"Expires\": \"0\"\n }\n });\n } catch (e) {\n // Return a default 1x1 transparent GIF even if there's an error\n const transparentGif = new Uint8Array([\n 0x47, 0x49, 0x46, 0x38, 0x39, 0x61, 0x01, 0x00, \n 0x01, 0x00, 0x80, 0x00, 0x00, 0xff, 0xff, 0xff, \n 0x00, 0x00, 0x00, 0x21, 0xf9, 0x04, 0x01, 0x00, \n 0x00, 0x00, 0x00, 0x2c, 0x00, 0x00, 0x00, 0x00, \n 0x01, 0x00, 0x01, 0x00, 0x00, 0x02, 0x02, 0x44, \n 0x01, 0x00, 0x3b\n ]);\n \n return new Response(transparentGif, {\n headers: {\n \"Content-Type\": \"image/gif\",\n \"Cache-Control\": \"no-store, no-cache, must-revalidate, proxy-revalidate\",\n \"Pragma\": \"no-cache\",\n \"Expires\": \"0\"\n }\n });\n }\n});\n\n// List all pixels\napp.get(\"/api/list\", async c => {\n const keys = await blob.list(\"pixel_\");\n const pixels = [];\n \n for (const key of keys) {\n try {\n const data = await blob.getJSON(key);\n pixels.push({\n id: data.id,\n created: data.created,\n viewCount: data.views.length\n });\n } catch (e) {\n // Skip if there's an error\n }\n }\n \n return c.json(pixels);\n});\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err, c) => {\n throw err;\n});\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;",[],[166,221],["D",1744394617429],[181],[166],["D",1744394617429],{"_102":101,"_109":105},{"_102":101,"_103":-5,"_104":105,"_18":56,"_106":107,"_108":27},{"_13":87,"_33":88,"_45":44,"_89":46,"_90":91,"_92":93,"_94":52,"_95":96,"_97":98,"_99":47,"_100":101},"ctx",{"_80":-5,"_131":269,"_270":271,"_272":273,"_274":27,"_275":27,"_276":27,"_277":25,"_278":-5,"_279":-7,"_280":-7,"_281":64,"_282":27,"_283":27,"_284":-5,"_285":27,"_286":27,"_287":27,"_288":-5},"ENV",{"_240":241,"_242":243,"_244":88,"_245":246,"_247":248,"_249":250,"_251":252,"_253":254,"_255":256,"_257":258,"_259":260,"_261":262,"_263":264,"_265":266,"_267":268},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e8c4b7030cb7600e4eb0736b15f422c8b8bd130f","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 · v4