[{"_1":2,"_234":-5,"_235":-5},"loaderData",{"_3":4,"_92":93,"_159":160,"_233":-5},"root",{"_5":6,"_33":34,"_59":60,"_90":91},"ctx",{"_7":8,"_18":19,"_20":-5,"_21":22,"_23":24,"_25":26,"_27":26,"_28":26,"_29":30,"_31":32},"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_selection_ai","preferences_model","claude-3-5-haiku-20241022","notification_count",0,"ENV",{"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":50,"_51":52,"_53":54,"_55":56,"_57":58},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","904d48a8a4a1a5150454c8f89f3707e0096dc8ca","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","c7de7de11d2fa3884730f0fa9fd384f8","clerkState",{"_61":62},"__internal_clerk_state",{"_63":64,"_65":44,"_66":67,"_68":67,"_69":26,"_70":67,"_71":67,"_72":67,"_73":67,"_74":67,"_75":67,"_76":67,"_77":67,"_78":79,"_88":26,"_89":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",{"_80":26,"_81":67,"_82":83,"_84":67,"_85":44,"_86":26,"_87":67},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","remixVersion",2,"routes/_app.v.$handle.$name",{"_94":95,"_96":97,"_95":98,"_154":-5,"_155":-5,"_156":157,"_130":131,"_138":139,"_101":102,"_99":100,"_118":-7,"_51":52,"_158":26},"type","val","author","233c46e8-fc99-46b9-a60d-69182eef3f84",{"_99":100,"_96":97,"_101":102,"_103":-5,"_104":-5,"_105":106,"_107":67,"_108":109,"_110":111,"_112":26,"_113":111,"_114":115,"_116":117,"_118":119,"_120":26,"_121":32,"_122":32,"_123":32,"_124":125,"_126":32,"_127":32,"_128":-5,"_20":129,"_134":-5,"_135":-7,"_136":137,"_138":139,"_140":141},"name","clickTrackerWebsite","valNameId","4c6665ee-6a1b-11ef-b65a-de64eea55b61","parentFolderId","isOwned","privacy","public","readme","valType","http","currentVersion","e83c0488-6a1b-11ef-b7c3-de64eea55b61","legacyPrivate","id","code","// This approach creates a minimalist, full-screen website that tracks the total number of clicks made anywhere on the page.\n// We'll use SQLite for persistence to store the click count and add a confetti effect for each click.\n\n/** @jsxImportSource https://esm.sh/react */\nimport React, { useState, useEffect } from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\nimport confetti from 'https://esm.sh/canvas-confetti';\n\nfunction App() {\n const [clicks, setClicks] = useState(0);\n\n useEffect(() => {\n fetchClicks();\n }, []);\n\n const fetchClicks = async () => {\n const response = await fetch('/clicks');\n const data = await response.json();\n setClicks(data.clicks);\n };\n\n const handleClick = async (event) => {\n const { clientX, clientY } = event;\n confetti({\n particleCount: 100,\n spread: 70,\n origin: { x: clientX / window.innerWidth, y: clientY / window.innerHeight }\n });\n await fetch('/increment', { method: 'POST' });\n fetchClicks();\n };\n\n return (\n

{clicks}

Clicks

\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") { client(); }\n\nasync function server(request: Request): Promise {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const SCHEMA_VERSION = 2\n const KEY = \"click_counter\";\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_clicks_${SCHEMA_VERSION} (\n id INTEGER PRIMARY KEY,\n count INTEGER NOT NULL DEFAULT 0\n )\n `);\n\n // Initialize the counter if it doesn't exist\n await sqlite.execute(`\n INSERT OR IGNORE INTO ${KEY}_clicks_${SCHEMA_VERSION} (id, count) VALUES (1, 0)\n `);\n\n const url = new URL(request.url);\n\n if (url.pathname === '/clicks') {\n const result = await sqlite.execute(`SELECT count FROM ${KEY}_clicks_${SCHEMA_VERSION} WHERE id = 1`);\n return new Response(JSON.stringify({ clicks: result.rows[0].count }), {\n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n if (url.pathname === '/increment' && request.method === 'POST') {\n await sqlite.execute(`UPDATE ${KEY}_clicks_${SCHEMA_VERSION} SET count = count + 1 WHERE id = 1`);\n return new Response(JSON.stringify({ success: true }), {\n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n return new Response(`\n \n \n Click Counter\n \n \n \n \n

\n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}\n\nconst css = `\nbody, html {\n margin: 0;\n padding: 0;\n height: 100%;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;\n background-color: #f5f5f7;\n color: #1d1d1f;\n}\n.fullscreen {\n width: 100%;\n height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n position: relative;\n}\n.content {\n text-align: center;\n}\nh1 {\n font-size: 15vw;\n margin: 0;\n line-height: 1;\n transition: transform 0.3s ease;\n}\np {\n font-size: 4vw;\n margin: 0;\n opacity: 0.7;\n}\n.fullscreen:active h1 {\n transform: scale(0.95);\n}\nfooter {\n position: absolute;\n bottom: 20px;\n left: 0;\n right: 0;\n text-align: center;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 10px;\n}\na {\n color: #0071e3;\n text-decoration: none;\n font-size: 14px;\n}\n.separator {\n font-size: 14px;\n color: #86868b;\n margin: 0 5px;\n}\na:hover {\n text-decoration: underline;\n}\n`;\n\nexport default server;","createdAt",["D",1725385356466],"version",3,"currentUserHasLiked","likeCount","forkCount","referenceCount","dependencyCount",1,"commentCount","prCount","mergedPr",{"_130":131,"_132":133},"handle","ankitkr0","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yZXdmSTNZcXg0dmIwTmdtWEJjak9BMW5mejMifQ","forkedVal","interval","slug","ankitkr0/clickTrackerWebsite","description","// This approach creates a minimalist, full-screen website that tracks the total number of clicks made anywhere on the page.","versions",[142,145,148,151],{"_118":119,"_143":-5,"_116":144,"_113":111},"prId",["D",1725385356466],{"_118":91,"_143":-5,"_116":146,"_113":147},["D",1725385286334],"be6ecfe6-6a1b-11ef-97ca-de64eea55b61",{"_118":125,"_143":-5,"_116":149,"_113":150},["D",1725385196216],"88b7df78-6a1b-11ef-895d-de64eea55b61",{"_118":32,"_143":-5,"_116":152,"_113":153},["D",1725385095033],"4c69d12a-6a1b-11ef-b65a-de64eea55b61","recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name.dependencies",{"_161":162,"_229":125,"_230":137,"_231":32,"_95":232},"dependenciesList",[163],{"_101":164,"_165":166},"08f95904-3584-11ef-8995-0e10024e3b32","initialData",{"_99":167,"_96":168,"_101":164,"_103":169,"_104":-5,"_105":106,"_107":170,"_108":171,"_110":172,"_112":26,"_113":172,"_114":173,"_116":174,"_118":175,"_120":26,"_121":176,"_123":177,"_124":125,"_126":125,"_122":178,"_127":32,"_128":-5,"_20":179,"_134":182,"_135":-7,"_138":187,"_188":-5,"_136":189,"_140":190},"sqlite","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","76a8911e-393e-11ef-8e71-de64eea55b61","# LLM-Safe Fork of @std/sqlite\n\nWe found that LLMs have trouble with the inputs and outputs of our @std/sqlite method.\n\n1. It expects the input to be `(sql: string, args: any[])` but it's `{ sql: string, args: any[] }`\n2. It expects the output to be objects, but they are arrays\n\nInstead of struggling to teach it, we built this val to be a wrapper around @std/sqlite that adheres to what the LLMs expect. \n\nThis val is also backwards-compatible with @std/sqlite, so we're considering merging it in.","script","5631f2d0-dcb9-11ef-80ec-e6cdfca9ef9f","import { API_URL } from \"https://esm.town/v/std/API_URL\";\nimport { LibsqlError, type ResultSet, type Row, type TransactionMode } from \"npm:@libsql/client\";\nimport { z } from \"npm:zod\";\n\n/**\n * Every Val Town account comes with its own private\n * [SQLite database](https://www.sqlite.org/) that\n * is accessible from any of your vals.\n * ([Docs ↗](https://docs.val.town/std/sqlite))\n */\nexport const sqlite = {\n /**\n * Executes a SQLite statement.\n *\n * @param {InStatement} statement - The SQLite statement to execute.\n * @example String query:\n * `sqlite.execute(\"SELECT 1;\")`\n * @example Query with arguments:\n * `sqlite.execute({sql: \"SELECT * from books WHERE year > ?;\", args: [2020]})`\n */\n execute,\n\n /**\n * Executes a batch of SQLite statements.\n *\n * @param {InStatement[]} statements - An array of SQLite statements to execute.\n * @param {TransactionMode} [mode] - The transaction mode for the batch execution.\n */\n batch,\n};\n\n// ------------\n// Functions\n// ------------\n\nasync function execute(statement: InStatement, args?: InArgs): Promise {\n const res = await fetch(`${API_URL}/v1/sqlite/execute`, {\n method: \"POST\",\n headers: {\n Authorization: `Bearer ${Deno.env.get(\"valtown\")}`,\n },\n body: JSON.stringify({ statement: normalizeStatement(statement, args) }),\n });\n if (!res.ok) {\n throw createResError(await res.text());\n }\n const resultSet = await res.json();\n return upgradeResultSet(resultSet);\n}\n\nasync function batch(statements: InStatement[], mode?: TransactionMode): Promise {\n if (mode && ![\"write\", \"read\", \"deferred\"].includes(mode)) {\n throw new Error(\"Invalid transaction mode provided to sqlite.batch. Must be 'write', 'read', or 'deferred.\");\n }\n const res = await fetch(`${API_URL}/v1/sqlite/batch`, {\n method: \"POST\",\n headers: {\n Authorization: `Bearer ${Deno.env.get(\"valtown\")}`,\n },\n body: JSON.stringify({ statements: statements.map(s => normalizeStatement(s)), mode }),\n });\n if (!res.ok) {\n throw createResError(await res.text());\n }\n const resultSets = await res.json();\n return resultSets.map(upgradeResultSet);\n}\n\nfunction createResError(body: string) {\n try {\n const e = zLibsqlError.parse(JSON.parse(body));\n // e.message already contains the code, and LibsqlError adds the\n // code to the beginning, so we remove it here\n const msg = e.message.replace(e.code, \"\").replace(/^:\\s+/, \"\");\n return new LibsqlError(msg, e.code, e.rawCode);\n } catch (_) {\n // Failed to parse libsql error\n }\n return new Error(body);\n}\n\n/* Val Town's Turso Proxy returns rows as an array of values\n * Yet the LibSQL API has a Row type which behave as an array or object,\n * ie you can access it via numerical index or string\n */\ninterface ImpoverishedResultSet extends ResultSet {\n rows: any[];\n}\n\nfunction normalizeStatement(statement: InStatement, args?: InArgs) {\n if (Array.isArray(statement)) {\n // for the case of an array of arrays\n return normalizeStatement(statement[0], statement[1]);\n }\n if (typeof statement === \"string\") {\n if (args) {\n return { sql: statement, args };\n } else return statement;\n }\n else if (typeof statement === \"object\") {\n if (statement.args) {\n return statement;\n }\n if (args) {\n return { sql: statement.sql, args };\n }\n return statement.sql;\n }\n else throw new Error(\"Error normalizing sql input\");\n}\n\nfunction upgradeResultSet(results: ImpoverishedResultSet): ResultSet {\n return {\n ...results,\n rows: results.rows.map(row => rowFromSql(row, results.columns)),\n };\n}\n\n// adapted from\n// https://github.com/tursodatabase/libsql-client-ts/blob/17dd996b840c950dd22b871adfe4ba0eb4a5ead3/packages/libsql-client/src/sqlite3.ts#L314C1-L337C2\nfunction rowFromSql(\n sqlRow: Array,\n columns: Array,\n): Row {\n const row = {};\n // make sure that the \"length\" property is not enumerable\n Object.defineProperty(row, \"length\", { value: sqlRow.length });\n for (let i = 0; i < sqlRow.length; ++i) {\n const value = sqlRow[i];\n Object.defineProperty(row, i, { value });\n\n const column = columns[i];\n if (!Object.hasOwn(row, column)) {\n Object.defineProperty(row, column, {\n value,\n enumerable: true,\n configurable: true,\n writable: true,\n });\n }\n }\n return row as Row;\n}\n\n// ------------\n// Helpers\n// ------------\n\nconst zLibsqlError = z.object({\n message: z.string(),\n code: z.string(),\n rawCode: z.number().optional(),\n});\n\n// We patch these types to only support JSON values\nexport type InValue = null | string | number | boolean;\nexport type InArgs = Array | Record;\nexport type InStatement = {\n /**\n * The SQL statement to execute.\n */\n sql: string;\n\n /**\n * The arguments to bind to the SQL statement.\n */\n args: InArgs;\n} | string;",["D",1737987404484],13,11,16435,21,{"_130":180,"_132":181},"stevekrouse","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg",{"_113":183,"_130":184,"_99":167,"_118":185,"_186":-5},"56c849ee-f1f8-11ee-9b87-cab58f78796a","std",6,"prDisabledHint","LLM-Safe Fork of @std/sqlite We found that LLMs have trouble with the inputs and outputs of our @std/sqlite method. It expects the input to be (sql: string, args: any[]) but it's { sql: string, args: any[] } It expects the output to be objects, but they are arrays Instead of struggling to teach it, we built this val to be a wrapper around @std/sqlite that adheres to what the LLMs expect. This val is also backwards-compatible with @std/sqlite, so we're considering merging it in.","latestEvaluation","stevekrouse/sqlite",[191,195,199,202,206,210,214,218,221,225],{"_116":192,"_118":175,"_193":194},["D",1737987404484],"n","1",{"_116":196,"_118":197,"_193":198},["D",1724087412304],12,"2",{"_116":200,"_118":176,"_193":201},["D",1724087404512],"3",{"_116":203,"_118":204,"_193":205},["D",1723494410142],10,"4",{"_116":207,"_118":208,"_193":209},["D",1723494389876],9,"5",{"_116":211,"_118":212,"_193":213},["D",1723494345363],8,"6",{"_116":215,"_118":216,"_193":217},["D",1723494323065],7,"7",{"_116":219,"_118":185,"_193":220},["D",1719604370206],"8",{"_116":222,"_118":223,"_193":224},["D",1719604260994],5,"9",{"_116":226,"_118":227,"_193":228},["D",1719604144103],4,"10","dependenciesCount","valname","page",{"_113":111,"_99":100,"_130":131,"_11":97,"_118":119,"_101":102,"_114":115,"_105":106,"_112":26,"_136":137},"routes/_app","actionData","errors"]