React Starter

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_193":194,"_195":196},"routes/_app.x.$handle.$name",{"_96":95,"_32":45,"_104":86,"_27":105,"_13":14,"_106":-5,"_11":107,"_108":109,"_110":111,"_112":113,"_114":115,"_20":-5,"_116":-5,"_117":-5,"_118":25,"_119":120,"_121":122,"_123":-5,"_124":-5,"_125":126},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":55,"_18":56,"_57":-5,"_58":25,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":79,"_80":81,"_82":83,"_84":25},"version",33,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","App.tsx","latestPath","fileId","019d73ca-cbc2-7326-ab6b-004c7e54eb95","name","fileType","script","content","/** @jsxImportSource https://esm.sh/react@19 */\nimport { useState } from \"https://esm.sh/react@19\";\n\nexport type TrackList = {\n name: string;\n artist: string;\n timestamp: string;\n}[];\n\ninterface Props {\n url: string | null;\n tracks: TrackList | null;\n duration: number | null;\n}\n\nexport default function App(\n { url: initialUrl, tracks, duration }: Props,\n) {\n const [url, setUrl] = useState(initialUrl ?? \"\");\n\n return (\n

\n \n\n {duration &&

Total duration: {duration}

}\n {tracks && (\n \n \n \n \n \n \n \n \n \n {tracks.map(({ name, artist, timestamp }) => (\n \n \n \n \n \n ))}\n \n

Title	Artist	Timestamp
{name}	{artist}	{timestamp}

\n )}\n

\n );\n}","/** @jsxImportSource https://esm.sh/react@19 */\nimport { useState } from \"https://esm.sh/react@19\";\n\ntype TrackList = {\n name: string;\n artist: string;\n timestamp: string;\n}[];\n\nexport interface Props {\n url: string | null;\n tracks: TrackList | null;\n duration: number | null;\n}\n\nexport default function App(\n { url: initialUrl, tracks, duration }: Props,\n) {\n const [url, setUrl] = useState(initialUrl ?? \"\");\n\n return (\n

\n \n\n {duration &&

Total duration: {duration}

}\n {tracks && (\n \n \n \n \n \n \n \n \n \n {tracks.map(({ name, artist, timestamp }) => (\n \n \n \n \n \n ))}\n \n

Title	Artist	Timestamp
{name}	{artist}	{timestamp}

\n )}\n

\n );\n}","createdAt",["D",1775776457848],"branchVersion","branchId","3536dea0-344d-11f1-a115-42b51c65c3df","id","352f4bc2-344d-11f1-a115-42b51c65c3df","thelotradio-bulk-scrobble",["D",1775764163401],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","fetch tracklist from The Lot Radio and prepare for scrobbling","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/a0afa007-3e32-4914-a751-f7efceecae00/square512?exp=1789559999&sig=5c2e21207765106accd7e117525e3d94743c392bf2384b0ad1b97600d8cc5a59","02256cc0-5186-11f0-9031-197d20872a9b","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","f03ddb9f-02a4-4255-85f0-fbe1d9d88fe8","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_96":95,"_103":99},"org",{"_96":95,"_97":-5,"_98":99,"_18":56,"_100":101,"_102":25},"branch",{"_13":85,"_32":86,"_43":42,"_87":44,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":45,"_94":95},"isOwned",94,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","cubeghost","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yeXpGa2dycWNTdzBTbHdJWUFKQkRITXVtYnQifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":189,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":55,"_18":56,"_57":-5,"_58":25,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":190,"_80":191,"_82":192,"_84":25},"tree",[172,173,174,175],"files",[172,173,174,175],"counts",{"_162":62,"_163":154,"_164":62,"_165":166,"_167":168},"contents",[127,128,129,130],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_43":158,"_32":28,"_30":31,"_134":-5,"_41":42,"_40":14,"_136":25,"_38":159,"_13":160,"_33":34,"_35":37,"_24":25,"_141":-5,"_27":161},{"_43":151,"_32":152,"_30":153,"_134":-5,"_41":42,"_40":154,"_136":25,"_38":155,"_13":62,"_33":20,"_35":156,"_24":25,"_141":-5,"_27":157},{"_43":143,"_32":144,"_30":145,"_134":-5,"_41":42,"_40":146,"_136":25,"_38":147,"_13":148,"_33":34,"_35":149,"_24":25,"_141":-5,"_27":150},{"_43":131,"_32":132,"_30":133,"_134":-5,"_41":42,"_40":135,"_136":25,"_38":137,"_13":138,"_33":139,"_35":140,"_24":25,"_141":-5,"_27":142},"aac68fbe-3469-11f1-a4a7-42b51c65c3df","http.tsx","019d73ca-cbc2-7326-ab6b-0dd9c4951b22","parentId",31,"latest",["D",1775776386644],22,"http","/** @jsxImportSource https://esm.sh/react@19 */\nimport React from \"https://esm.sh/react@19\";\nimport { renderToString } from \"https://esm.sh/react-dom@19/server\";\nimport serialize from \"npm:serialize-javascript@7\";\nimport { JSDOM } from \"npm:jsdom@29\";\n\nimport App from \"./App.tsx\";\n\nconst CLIENT_MODULE = import.meta.url.replace(\"http.tsx\", \"client.tsx\");\n\nasync function maybeUrl(req: Request): Promise {\n try {\n const data = await req.formData();\n return (data.get(\"url\") as string) ?? null;\n } catch (err) {\n return null;\n }\n}\n\nasync function getTracklistInfo(url: string) {\n const response = await fetch(url);\n const html = await response.text();\n\n const doc = new JSDOM(html);\n const scriptTag = doc.window.document.evaluate(\n `//script[contains(text(), '\\\\\"tracks\\\\\":')]`,\n doc.window.document,\n null,\n doc.window.XPathResult.FIRST_ORDERED_NODE_TYPE,\n null,\n );\n const scriptStr = scriptTag.singleNodeValue?.innerHTML;\n\n const treeStr = scriptStr\n .replace(/^self\\.__next_f\\.push\$\\[\\d+,\"\\d+:/, \"\") // start\n .replace(/\\\\n\"\\]\$$/, \"\") // end\n .replace(/\\\\\"/g, '\"'); // unescape quotes\n\n const tree = JSON.parse(treeStr);\n const props = findTracklistProps(tree);\n\n return {\n duration: props.end - props.start,\n tracks: props.tracks,\n };\n}\n\nfunction findTracklistProps(element) {\n if (!element) return;\n if (element[0] === \"$\") {\n const props = element[3];\n if (!props) return;\n\n if (\"tracks\" in props && \"start\" in props && \"end\" in props) {\n return props;\n } else if (\"children\" in props) {\n for (const child of props.children) {\n const childProps = findTracklistProps(child);\n if (childProps) return childProps;\n }\n }\n }\n}\n\nexport default async function (req: Request): Promise {\n const url = await maybeUrl(req);\n const info = url ? await getTracklistInfo(url) : null;\n\n const app = renderToString(\n ,\n );\n const html = `\n \n \n React Starter\n \n \n

${app}

\n \n \n \n \n `;\n\n return new Response(html, {\n headers: {\n \"Content-Type\": \"text/html\",\n },\n });\n}","label",[132],"ac8fb1ce-3458-11f1-aedc-42b51c65c3df","client.tsx","019d73ca-cbc2-7326-ab6b-0b397503cc78",27,["D",1775769088187],2,"/** @jsxImportSource https://esm.sh/react@19 */\nimport React from \"https://esm.sh/react@19\";\nimport { hydrateRoot } from \"https://esm.sh/react-dom@19/client\";\nimport App from \"./App.tsx\";\nimport type { TrackList } from \"./App.tsx\";\n\nconst div = document.getElementById(\"app\");\nconst { url, tracklist } = window.__PRELOADED_STATE__ as {\n url: string | null;\n tracklist: TrackList | null;\n};\nhydrateRoot(div, );",[144],"353aca10-344d-11f1-a115-42b51c65c3df","README.md","019d73ca-cbc2-7326-ab6b-063f397722fd",1,["D",1775764163401],"# React Starter\n\nMinimal React SSR example for Val Town\n[View Demo](https://jxnblk--122089bc0b3011f09093569c3dd06744.web.val.run/)\n\nRemix this project to start building your own React app\n\n## How it works\n\nThe `http.tsx` file is the main entry point and serves the app.\nIt renders the `App` component on the server and wraps it in an HTML response.\nThis HTML response includes a `

Diff · v33