You said: ${message}
- -- Got more to say? - Send another message -
- - - ` - - return createHtmlResponse(body) - }, - }, -}) -``` - -## Navigation - -- [Resource-based routes](./routing-resources.md) -- [Basic usage and route maps](./usage.md) -- [fetch-router overview](./index.md) -- [Remix package index](../index.md) diff --git a/docs/agents/remix/fetch-router/routing-resources.md b/docs/agents/remix/fetch-router/routing-resources.md deleted file mode 100644 index 150b7e52..00000000 --- a/docs/agents/remix/fetch-router/routing-resources.md +++ /dev/null @@ -1,186 +0,0 @@ -# Resource-based routes - -Source: https://github.com/remix-run/remix/tree/main/packages/fetch-router - -## Resource-based routes - -The router provides a `resources()` helper that creates a route map with a set -of resource-based routes, useful when defining RESTful API routes or modeling -resources in a web application (similar to Rails' `resources` helper). - -```ts -import { createRouter } from 'remix/fetch-router' -import { resources, route } from 'remix/fetch-router/routes' - -let routes = route({ - brands: { - ...resources('brands', { only: ['index', 'show'] }), - products: resources('brands/:brandId/products', { - only: ['index', 'show'], - }), - }, -}) - -type Routes = typeof routes -// { -// brands: { -// index: Route<'GET', '/brands'> -// show: Route<'GET', '/brands/:id'> -// products: { -// index: Route<'GET', '/brands/:brandId/products'> -// show: Route<'GET', '/brands/:brandId/products/:id'> -// }, -// }, -// } - -let router = createRouter() - -router.map(routes.brands, { - // GET /brands - index() { - return new Response('Brands Index') - }, - // GET /brands/:id - show({ params }) { - return new Response(`Brand ${params.id}`) - }, - products: { - // GET /brands/:brandId/products - index() { - return new Response('Products Index') - }, - // GET /brands/:brandId/products/:id - show({ params }) { - return new Response(`Brand ${params.brandId}, Product ${params.id}`) - }, - }, -}) -``` - -The `resource()` helper creates a route map for a single resource (not something -that is part of a collection). This is useful when defining operations on a -singleton resource, like a user profile. - -```tsx -import { createRouter } from 'remix/fetch-router' -import { resource, resources, route } from 'remix/fetch-router/routes' - -let routes = route({ - user: { - ...resources('users', { only: ['index', 'show'] }), - profile: resource('users/:userId/profile', { - only: ['show', 'edit', 'update'], - }), - }, -}) - -type Routes = typeof routes -// { -// user: { -// index: Route<'GET', '/users'> -// show: Route<'GET', '/users/:id'> -// profile: { -// show: Route<'GET', '/users/:userId/profile'> -// edit: Route<'GET', '/users/:userId/profile/edit'> -// update: Route<'PUT', '/users/:userId/profile'> -// }, -// }, -// } -``` - -Without the `only` option, a `resources('users')` route map contains 7 routes: -`index`, `new`, `show`, `create`, `edit`, `update`, and `destroy`. - -```tsx -let routes = resources('users') -type Routes = typeof routes -// { -// index: Route<'GET', '/users'> - Lists all users -// new: Route<'GET', '/users/new'> - Shows a form to create a new user -// show: Route<'GET', '/users/:id'> - Shows a single user -// create: Route<'POST', '/users'> - Creates a new user -// edit: Route<'GET', '/users/:id/edit'> - Shows a form to edit a user -// update: Route<'PUT', '/users/:id'> - Updates a user -// destroy: Route<'DELETE', '/users/:id'> - Deletes a user -// } -``` - -Similarly, a `resource('profile')` route map contains 6 routes: `new`, `show`, -`create`, `edit`, `update`, and `destroy`. There is no `index` route because a -`resource()` represents a singleton resource, not a collection, so there is no -collection view. - -```tsx -let routes = resource('profile') -type Routes = typeof routes -// { -// new: Route<'GET', '/profile/new'> - Shows a form to create the profile -// show: Route<'GET', '/profile'> - Shows the profile -// create: Route<'POST', '/profile'> - Creates the profile -// edit: Route<'GET', '/profile/edit'> - Shows a form to edit the profile -// update: Route<'PUT', '/profile'> - Updates the profile -// destroy: Route<'DELETE', '/profile'> - Deletes the profile -// } -``` - -Resource route names may be customized using the `names` option when you'd -prefer not to use the default -`index`/`new`/`show`/`create`/`edit`/`update`/`destroy` route names. - -```tsx -import { createRouter } from 'remix/fetch-router' -import { resources, route } from 'remix/fetch-router/routes' - -let routes = route({ - users: resources('users', { - only: ['index', 'show'], - names: { index: 'list', show: 'view' }, - }), -}) -type Routes = typeof routes.users -// { -// list: Route<'GET', '/users'> - Lists all users -// view: Route<'GET', '/users/:id'> - Shows a single user -// } -``` - -If you want to use a param name other than `id`, you can use the `param` option. - -```tsx -import { createRouter } from 'remix/fetch-router' -import { resources, route } from 'remix/fetch-router/routes' - -let routes = route({ - users: resources('users', { - only: ['index', 'show', 'edit', 'update'], - param: 'userId', - }), -}) -type Routes = typeof routes.users -// { -// index: Route<'GET', '/users'> - Lists all users -// show: Route<'GET', '/users/:userId'> - Shows a single user -// edit: Route<'GET', '/users/:userId/edit'> - Shows a form to edit a user -// update: Route<'PUT', '/users/:userId'> - Updates a user -// } -``` - -You can use the `exclude` option to exclude routes from being generated. - -```tsx -let routes = resources('users', { exclude: ['edit', 'update', 'destroy'] }) -type Routes = typeof routes -// { -// index: Route<'GET', '/users'> - Lists all users -// new: Route<'GET', '/users/new'> - Shows a form to create a new user -// show: Route<'GET', '/users/:userId'> - Shows a single user -// create: Route<'POST', '/users'> - Creates a new user -// } -``` - -## Navigation - -- [Routing based on request method](./routing-methods.md) -- [Basic usage and route maps](./usage.md) -- [fetch-router overview](./index.md) -- [Remix package index](../index.md) diff --git a/docs/agents/remix/fetch-router/testing-and-related.md b/docs/agents/remix/fetch-router/testing-and-related.md deleted file mode 100644 index 16607c5a..00000000 --- a/docs/agents/remix/fetch-router/testing-and-related.md +++ /dev/null @@ -1,56 +0,0 @@ -# Testing and related work - -Source: https://github.com/remix-run/remix/tree/main/packages/fetch-router - -## Testing - -Testing is straightforward because `fetch-router` uses the standard `fetch()` -API: - -```ts -import * as assert from 'node:assert/strict' -import { describe, it } from 'node:test' - -describe('blog routes', () => { - it('creates a new post', async () => { - let response = await router.fetch('https://api.remix.run/posts', { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ title: 'Hello', content: 'World' }), - }) - - assert.equal(response.status, 201) - let post = await response.json() - assert.equal(post.title, 'Hello') - }) - - it('returns 404 for missing posts', async () => { - let response = await router.fetch('https://api.remix.run/posts/not-found') - assert.equal(response.status, 404) - }) -}) -``` - -No special test harness or mocking required! Just use `fetch()` like you would -in production. - -## Related work - -- [@remix-run/response](../response/index.md) - Response helpers for HTML, JSON, - files, and redirects -- [@remix-run/headers](../headers/index.md) - A library for working with HTTP - headers -- [@remix-run/form-data-parser](../form-data-parser) - A library for parsing - multipart/form-data requests -- [@remix-run/route-pattern](../route-pattern) - The pattern matching library - that powers `fetch-router` -- [Express](https://expressjs.com/) - The classic Node.js web framework - -## License - -See [LICENSE](https://github.com/remix-run/remix/blob/main/LICENSE) - -## Navigation - -- [fetch-router overview](./index.md) -- [Remix package index](../index.md) diff --git a/docs/agents/remix/fetch-router/usage.md b/docs/agents/remix/fetch-router/usage.md deleted file mode 100644 index 14fc7b8e..00000000 --- a/docs/agents/remix/fetch-router/usage.md +++ /dev/null @@ -1,170 +0,0 @@ -# Basic usage and route maps - -Source: https://github.com/remix-run/remix/tree/main/packages/fetch-router - -The main purpose of the router is to map incoming requests to request handlers -and middleware. The router uses the `fetch()` API to accept a -[`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request) and return -a [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response). - -The example below is a small site with a home page, an "about" page, and a blog. - -```ts -import { createRouter } from 'remix/fetch-router' -import { route } from 'remix/fetch-router/routes' -import { logger } from 'remix/logger-middleware' - -// `route()` creates a "route map" that organizes routes by name. The keys -// of the map may be any name, and may be nested to group related routes. -let routes = route({ - home: '/', - about: '/about', - blog: { - index: '/blog', - show: '/blog/:slug', - }, -}) - -let router = createRouter({ - // Middleware may be used to run code before and/or after actions run. - // In this case, the `logger()` middleware logs the request to the console. - middleware: [logger()], -}) - -// Map the routes to a "controller" that defines actions for each route. The -// structure of the controller mirrors the structure of the route map. -router.map(routes, { - home() { - return new Response('Home') - }, - about() { - return new Response('About') - }, - blog: { - index() { - return new Response('Blog') - }, - show({ params }) { - // params is a type-safe object with the parameters from the route pattern - return new Response(`Post ${params.slug}`) - }, - }, -}) - -let response = await router.fetch('https://remix.run/blog/hello-remix') -console.log(await response.text()) // "Post hello-remix" -``` - -The route map is an object of the same shape as the object passed into -`route()`, including nested objects. The leaves of the map are `Route` objects, -which you can see if you inspect the type of the `routes` variable in your IDE. - -```ts -type Routes = typeof routes -// { -// home: Route<'ANY', '/'> -// about: Route<'ANY', '/about'> -// blog: { -// index: Route<'ANY', '/blog'> -// show: Route<'ANY', '/blog/:slug'> -// }, -// } -``` - -The `routes.home` route is a `Route<'ANY', '/'>`, which means it serves any -request method (`GET`, `POST`, `PUT`, `DELETE`, etc.) when the URL path is `/`. -We'll discuss routing based on request method in the routing guide. - -## Links and form actions - -In addition to describing the structure of your routes, route maps also make it -easy to generate type-safe links and form actions using the `href()` function on -a route. The example below is a small site with a home page and a "Contact Us" -page. - -Note: We're using the -[`createHtmlResponse` helper from `remix/response`](https://github.com/remix-run/remix/tree/main/packages/response/README.md#html-responses) -below to create `Response`s with `Content-Type: text/html`. We're also using the -`html` template tag to create safe HTML strings to use in the response body. - -```ts -import { createRouter } from 'remix/fetch-router' -import { route } from 'remix/fetch-router/routes' -import { html } from 'remix/html-template' -import { createHtmlResponse } from 'remix/response/html' - -let routes = route({ - home: '/', - contact: '/contact', -}) - -let router = createRouter() - -// Register an action for `GET /` -router.get(routes.home, () => { - return createHtmlResponse(` - - -- Contact Us -
- - - `) -}) - -// Register an action for `GET /contact` -router.get(routes.contact, () => { - return createHtmlResponse(` - - -You said: ${message}
-Some content with ${userInput}
` - -let page = html` - - - - ${title} ${content} - - -` -``` - -### Working with Arrays - -You can interpolate arrays of values, which will be flattened and joined: - -```ts -import { html } from '@remix-run/html-template' - -let items = ['Apple', 'Banana', 'Cherry'] -let list = html` -