Remix 3 Fetch Router Demo

\n This is a demo of the \n Remix 3 fetch-router\n and how simple yet awesome it is.\n

\n `,\n });\n },\n blog: {\n index() {\n return Page({\n title: \"Posts\",\n href: routes.blog.index.href(),\n children: `\n

Blog Posts

+ New Post
\n \n ${p.title}\n \n

\n `,\n });\n },\n new() {\n return Page({\n title: \"New Post\",\n href: routes.blog.new.href(),\n children: `\n

New Post

\n \n `,\n });\n },\n async create({ request, formData }) {\n let post = {\n slug: Date.now().toString(),\n title: formData.get(\"title\"),\n content: formData.get(\"content\"),\n };\n posts.push(post);\n\n const to = new URL(\n routes.blog.show.href({ slug: post.slug }),\n request.url,\n );\n return Response.redirect(to, 303);\n },\n show({ params }) {\n let post = posts.find((post) => post.slug === params.slug);\n if (!post) return new Response(\"Not Found\", { status: 404 });\n\n return Page({\n title: post.title,\n href: routes.blog.show.href({ slug: params.slug }),\n children: `\n

${post.title}

${post.content}

\n \n \n `,\n });\n },\n edit({ params }) {\n let post = posts.find((post) => post.slug === params.slug);\n if (!post) return new Response(\"Not Found\", { status: 404 });\n\n return Page({\n title: `Edit ${post.title}`,\n href: routes.blog.edit.href({ slug: params.slug }),\n children: `\n

Edit Post

\n \n `,\n });\n },\n async update({ formData, params, request }) {\n let post = posts.find((post) => post.slug === params.slug);\n if (!post) return new Response(\"Not Found\", { status: 404 });\n\n post.title = formData.get(\"title\");\n post.content = formData.get(\"content\");\n\n // Response here needs a fully qualified URL, not just a path\n const to = new URL(\n routes.blog.show.href({ slug: params.slug }),\n request.url,\n );\n return Response.redirect(to, 303);\n },\n destroy({ params, request }) {\n let post = posts.find((post) => post.slug === params.slug);\n if (!post) return new Response(\"Not Found\", { status: 404 });\n\n posts = posts.filter((post) => post.slug !== params.slug);\n\n const to = new URL(routes.blog.index.href(), request.url);\n return Response.redirect(to, 303);\n },\n },\n});\n\nexport { router };\n\n/**\n * Templates\n */\n\nfunction Page(\n { title, href, children }: { title: string; href: string; children: string },\n) {\n return html(`\n\n \n ${title}\n \n \n \n ${Nav(href)}\n ${children}\n \n`);\n}\n\nfunction Nav(href?: string) {\n return ``;\n}\n\nexport default (req: Request) => router.fetch(req);","deleted","label",[98],"permalink","https://www.val.town/x/stevekrouse/fetch-router/code/router.ts","extension","actionData","errors"]