[{"_1":2,"_178":-5,"_179":-5},"loaderData",{"_3":4,"_91":92,"_160":161,"_177":-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,"_155":-5,"_156":-5,"_157":158,"_128":129,"_141":142,"_100":101,"_98":99,"_118":-7,"_50":51,"_159":26},"type","val","author","97c571aa-a5cc-47f9-bf1d-cc691a81c99b",{"_98":99,"_95":96,"_100":101,"_102":-5,"_103":-5,"_104":105,"_106":107,"_108":109,"_110":111,"_112":26,"_113":111,"_114":115,"_116":117,"_118":90,"_119":26,"_120":31,"_121":31,"_122":31,"_123":31,"_124":31,"_125":31,"_126":-5,"_20":127,"_132":133,"_138":-7,"_139":140,"_141":142,"_143":144},"name","FetchBasic","valNameId","b4e03edc-e3c5-11ef-90f5-e6cdfca9ef9f","parentFolderId","isOwned","privacy","public","readme","# Framer Fetch: Basic\n\nA basic example of an API endpoint to use with Framer Fetch. ","valType","http","currentVersion","fc60752e-e3c5-11ef-a6a3-e6cdfca9ef9f","legacyPrivate","id","code","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\nfunction App() {\n const [greeting, setGreeting] = useState(\"\");\n const [language, setLanguage] = useState(\"english\");\n const [count, setCount] = useState(0);\n const [lastFetched, setLastFetched] = useState(null);\n\n const fetchGreeting = async () => {\n const response = await fetch(`${import.meta.url}?api=greeting&lang=${language}`);\n const data = await response.json();\n setGreeting(data.greeting);\n setCount((prevCount) => prevCount + 1);\n setLastFetched(new Date().toLocaleTimeString());\n };\n\n useEffect(() => {\n fetchGreeting();\n }, [language]);\n\n return (\n

Enhanced Greeting Demo

{greeting}

\n \n \n

Greetings fetched: {count}

\n {lastFetched &&

Last fetched at: {lastFetched}

}\n

\n View Source\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(req: Request): Promise {\n const url = new URL(req.url);\n \n if (url.searchParams.get(\"api\") === \"greeting\") {\n const headers = new Headers();\n headers.set(\"Access-Control-Allow-Origin\", \"*\");\n headers.set(\"Access-Control-Allow-Methods\", \"GET, OPTIONS\");\n headers.set(\"Access-Control-Allow-Headers\", \"Content-Type\");\n\n const lang = url.searchParams.get(\"lang\") || \"english\";\n const greetings = {\n english: [\"Hello!\", \"Welcome!\", \"Hi!\", \"Heya!\", \"Greetings!\"],\n spanish: [\"¡Hola!\", \"¡Bienvenido!\", \"¡Saludos!\", \"¡Qué tal!\", \"¡Buenas!\"],\n french: [\"Bonjour!\", \"Salut!\", \"Bienvenue!\", \"Enchanté!\", \"Coucou!\"],\n german: [\"Hallo!\", \"Willkommen!\", \"Grüß Gott!\", \"Servus!\", \"Moin!\"],\n japanese: [\"こんにちは!\", \"いらっしゃいませ!\", \"やあ!\", \"おはよう!\", \"どうも!\"]\n };\n\n const selectedGreetings = greetings[lang as keyof typeof greetings] || greetings.english;\n const index = Math.floor(Math.random() * selectedGreetings.length);\n\n return Response.json({ greeting: selectedGreetings[index] }, { headers });\n }\n\n return new Response(`\n \n \n \n \n \n Enhanced Greeting Demo\n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}\n\nconst css = `\nbody {\n font-family: Arial, sans-serif;\n background-color: #f0f0f0;\n margin: 0;\n padding: 0;\n}\n.container {\n max-width: 600px;\n margin: 2rem auto;\n padding: 2rem;\n background-color: white;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n text-align: center;\n}\nh1 {\n color: #333;\n}\n.greeting {\n font-size: 1.5rem;\n margin: 1.5rem 0;\n color: #0066cc;\n min-height: 2.5rem;\n}\n.controls {\n display: flex;\n justify-content: center;\n gap: 1rem;\n margin-bottom: 1rem;\n}\nbutton, select {\n background-color: #0066cc;\n color: white;\n border: none;\n padding: 0.5rem 1rem;\n font-size: 1rem;\n border-radius: 4px;\n cursor: pointer;\n transition: background-color 0.3s;\n}\nbutton:hover, select:hover {\n background-color: #0052a3;\n}\nselect {\n background-color: #ffffff;\n color: #0066cc;\n border: 1px solid #0066cc;\n}\n.stats {\n margin-top: 1rem;\n font-size: 0.9rem;\n color: #666;\n}\n.footer {\n margin-top: 2rem;\n font-size: 0.9rem;\n}\n.footer a {\n color: #0066cc;\n text-decoration: none;\n}\n.footer a:hover {\n text-decoration: underline;\n}\n`;","createdAt",["D",1738762495381],"version","currentUserHasLiked","likeCount","forkCount","referenceCount","dependencyCount","commentCount","prCount","mergedPr",{"_128":129,"_130":131},"handle","dtecho","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ycVh5NHZaS1J1SDFzclIwNlpxZ0I1dFlyejUifQ","forkedVal",{"_113":134,"_128":135,"_98":99,"_118":136,"_137":-5},"66ab2884-571c-11ef-89f4-de64eea55b61","hunty",22,"prDisabledHint","interval","slug","dtecho/FetchBasic","description","Framer Fetch: Basic A basic example of an API endpoint to use with Framer Fetch.","versions",[145,148,152],{"_118":90,"_146":-5,"_116":147,"_113":111},"prId",["D",1738762495381],{"_118":149,"_146":-5,"_116":150,"_113":151},1,["D",1738762436995],"d9932780-e3c5-11ef-bbff-e6cdfca9ef9f",{"_118":31,"_146":-5,"_116":153,"_113":154},["D",1738762375436],"b508d3f6-e3c5-11ef-90f5-e6cdfca9ef9f","recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name.pulls._index",{"_95":96,"_94":162,"_128":129,"_141":142,"_98":99,"_173":31,"_174":31,"_50":51,"_175":176},{"_98":99,"_95":96,"_100":101,"_102":-5,"_103":-5,"_104":105,"_106":107,"_108":109,"_110":111,"_112":26,"_113":111,"_114":115,"_116":163,"_118":90,"_119":26,"_120":31,"_121":31,"_122":31,"_123":31,"_124":31,"_125":31,"_126":-5,"_20":164,"_132":165,"_138":-7,"_139":140,"_141":142,"_143":166},["D",1738762495381],{"_128":129,"_130":131},{"_113":134,"_128":135,"_98":99,"_118":136,"_137":-5},[167,169,171],{"_118":90,"_146":-5,"_116":168,"_113":111},["D",1738762495381],{"_118":149,"_146":-5,"_116":170,"_113":151},["D",1738762436995],{"_118":31,"_146":-5,"_116":172,"_113":154},["D",1738762375436],"page","count","prs",[],"routes/_app","actionData","errors"]