[{"_1":2,"_174":-5,"_175":-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","4e736cb42e83c17c10d9f33412034a74b06f3941","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,"_171":172,"_173":-5},"handle","probablycorey","name","mini-remix-test","path","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":99,"_156":157,"_158":-5,"_159":140,"_160":139,"_161":116,"_104":162,"_138":163,"_164":165,"_166":167,"_168":20,"_169":-5,"_98":170},"9725f904-3fff-11f0-b38e-76b3cceeab13","fileId","e6cde20d-0b72-4c06-8fc9-afd1d624e050","parentId","branchId","branchVersion","latest",["D",1748902743343],1,"fileType","script","content","/** @jsxImportSource https://esm.sh/preact@10 */\nimport { FunctionalComponent, render } from \"https://esm.sh/preact@10\";\nimport { JSX } from \"https://esm.sh/preact@10\";\nimport { useEffect, useState } from \"https://esm.sh/preact@10/hooks\";\nimport { type Action, type ActionWithName } from \"./render.ts\";\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 async function handleSubmit(e: JSX.TargetedEvent): Promise {\n console.log(`🌭 on submit`);\n e.preventDefault();\n return;\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(`🌭`, { method: 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};","deleted","label",[99],"permalink","https://www.val.town/x/probablycorey/mini-remix-test/code/render-client.tsx","extension","actionData","errors"]