[{"_1":2,"_177":-5,"_178":-5},"loaderData",{"_3":4,"_92":93},"root",{"_5":6,"_35":36,"_65":66},"ctx",{"_7":8,"_23":-5,"_24":25,"_26":27,"_28":20,"_29":20,"_30":20,"_31":32,"_33":20,"_34":20},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20,"_21":22},"sessionClaims","sessionId","sessionStatus","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","isAuthenticated",false,"tokenType","session_token","user","preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","notificationCount",0,"flagDenols","isTeamOrgMember","ENV",{"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":50,"_51":52,"_53":54,"_55":56,"_57":58,"_59":60,"_61":62,"_63":64},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","adff7c7aeabd218801703bcdcaac3a168cba1c7b","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","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","API_URL","https://api.val.town","clerkState",{"_67":68},"__internal_clerk_state",{"_69":70,"_71":46,"_72":73,"_74":73,"_75":20,"_76":73,"_77":73,"_78":73,"_79":73,"_80":81,"_90":20,"_91":20},"__clerk_ssr_state",{"_21":22,"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__clerk_debug",{"_82":20,"_19":20,"_83":73,"_84":85,"_86":73,"_87":46,"_88":20,"_89":73},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","routes/embed.x.$handle.$name.$",{"_94":95,"_96":97,"_98":99,"_100":101,"_153":154,"_174":175,"_176":-5},"handle","probablycorey","name","mini-remix-test","path","nanoRemix/render-client.tsx","project",{"_102":103,"_96":97,"_104":105,"_106":-5,"_107":20,"_108":109,"_110":-5,"_111":-5,"_12":112,"_113":114,"_115":116,"_117":116,"_118":-5,"_119":32,"_14":120,"_121":122,"_123":122,"_124":125,"_126":125,"_127":125,"_128":122,"_129":122,"_23":130,"_133":134,"_136":137,"_152":20},"id","83405c40-3fff-11f0-8948-76b3cceeab13","createdAt",["D",1748902709965],"deletedAt","legacyEnvVars","privacy","public","description","imageUrl","2dc5aaf5-547d-47c8-b5bc-2bb7aa692b7b","pinnedFileId","2775e1aa-b7ec-4bc9-b1a9-773777f8088c","pinPreview",true,"pinMigrated","screenshotVersion","likeCount","d6259b83-cb32-40aa-9de5-feef709cccf2","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_94":95,"_131":132},"profileImageUrl","https://www.gravatar.com/avatar/?d=mp","org",{"_94":95,"_135":132,"_12":112},"avatar","branch",{"_138":139,"_96":44,"_102":140,"_141":103,"_142":143,"_144":145,"_146":109,"_147":148,"_149":120,"_150":97,"_151":95},"version",4,"8343c448-3fff-11f0-8948-76b3cceeab13","projectId","forkedBranchId","24a46ee4-26df-11f0-a5b3-569c3dd06744","forkedBranchVersion",103,"forkedProjectPrivacy","forkedProjectId","24a41a70-26df-11f0-a5b3-569c3dd06744","forkedProjectOrgId","projectName","userHandle","isOwned","file",{"_102":155,"_96":156,"_157":158,"_159":160,"_161":140,"_162":163,"_164":116,"_104":165,"_138":32,"_166":167,"_168":169,"_170":20,"_171":-5,"_98":172},"8347e12c-3fff-11f0-8948-76b3cceeab13","render-client.tsx","fileId","2c2d93c5-444f-4c5f-acde-6356a4570ae0","parentId","9f9dd446-30d0-464d-829c-e023a063ee1c","branchId","branchVersion",1,"latest",["D",1748902709965],"fileType","script","content","/** @jsxImportSource https://esm.sh/preact@10 */\nimport { FunctionalComponent, render } from \"https://esm.sh/preact@10\"\nimport { useEffect, useState } from \"https://esm.sh/preact@10/hooks\"\nimport { JSX } from \"https://esm.sh/preact@10\"\nimport { Action, ActionWithName } from \"./render.tsx\"\n\ndeclare global {\n interface Window {\n _setLoaderData?: (data: any) => void\n _actions: Record\n }\n}\n\ntype ActionFns = {\n setStatus: (state: \"idle\" | \"submitting\") => void\n setData: (data: any) => void\n setError: (error: string) => void\n}\n\nexport type ExtractActionResult = T extends Action ? R : never\n\nexport const renderClient = (Component: FunctionalComponent) => {\n window._actions = window._actions || {}\n const WrappedComponent = wrapComponentWithLoader(Component)\n render(, document.getElementById(\"root\")!)\n}\n\n// Hook to access action result on the client\nexport const useAction = ({ name }: ActionWithName) => {\n const [data, setData] = useState ()\n const [status, setStatus] = useState(\"idle\")\n const [error, setError] = useState()\n\n useEffect(() => {\n window._actions[name] = { setData, setStatus, setError }\n }, [])\n\n return { data, loading: status === \"submitting\", error }\n}\n\n// Form component with built-in enhancement\ntype FormProps = JSX.IntrinsicElements[\"form\"] & { name: string }\nexport const Form = (props: FormProps) => {\n console.log(\"🎨 WHAT UP\")\n async function handleSubmit(e: JSX.TargetedEvent): Promise {\n console.log(\"🎨 HEY GURL\")\n const actionFns = window._actions[props.name]\n try {\n e.preventDefault()\n\n if (!actionFns) {\n throw new Error(`No action function found for form ${props.name}`)\n }\n\n actionFns.setStatus(\"submitting\")\n const form = e.currentTarget as HTMLFormElement\n const body = new FormData(form)\n body.append(\"_actionName\", props.name)\n console.log(\"🎨\", unwrap(props.method) || \"POST\")\n const res = await fetch(form.action || window.location.href, {\n method: unwrap(props.method) || \"POST\",\n body,\n headers: { Accept: \"application/json\" },\n })\n\n if (res.status === 303) {\n window.location.href = res.headers.get(\"Location\")!\n } else if (res.ok) {\n const { actionData, loaderData } = await res.json()\n window._setLoaderData!(loaderData)\n\n actionFns.setData(actionData)\n } else {\n const errorText = await res.text()\n throw new Error(`Error ${res.status}: ${errorText}`)\n }\n } catch (error) {\n actionFns.setError(`${error}`)\n console.log(`🚨 Failed to submit`, error)\n } finally {\n actionFns.setStatus(\"idle\")\n }\n }\n\n return (\n \n )\n}\n\n// Preact does fancy things with attrs and signals, this is a workaround\nconst unwrap = (v: any) => {\n return typeof v === \"object\" && \"value\" in v ? v.value : v\n}\n\nconst wrapComponentWithLoader = (Component: FunctionalComponent) => {\n const WrappedComponent = () => {\n const [loaderData, setLoaderData] = useState(() => {\n const loaderDataString = document.getElementById(\"__LOADER_DATA__\")?.textContent\n return JSON.parse(loaderDataString || \"{}\")\n })\n\n useEffect(() => {\n window._setLoaderData = setLoaderData\n }, [])\n\n return \n }\n\n return WrappedComponent\n}\n","deleted","label",[173,156],"nanoRemix","permalink","https://www.val.town/x/probablycorey/mini-remix-test/code/nanoRemix/render-client.tsx","extension","actionData","errors"]