remix 3.0.0-beta.0 → 3.0.0-beta.2

package/src/render-middleware/README.md

@@ -0,0 +1,99 @@
+# render-middleware
+
+Request-scoped renderer middleware for Remix. It stores a renderer in `fetch-router` request context so route actions can render responses without passing request-specific rendering details through every action.
+
+## Features
+
+- **Generic renderers** - Render any input type to a `Response`
+- **Request-scoped setup** - Create renderers from the current `RequestContext`
+- **Typed context** - Typed `context.render` (or `context.get(Renderer)`)
+- **Small runtime** - The package only stores a renderer in request context
+
+## Installation
+
+```sh
+npm i remix
+```
+
+## Usage
+
+Use `renderWith()` to add a renderer to `context.render` and `context.get(Renderer)`.
+
+```ts
+import { createRouter, type MiddlewareContext } from 'remix/router'
+import { renderWith } from 'remix/middleware/render'
+
+const render = renderWith(
+  (context) =>
+    function render(value: string, init?: ResponseInit) {
+      return new Response(`${context.url.pathname}: ${value}`, init)
+    },
+)
+
+type AppContext = MiddlewareContext<[typeof render]>
+
+const router = createRouter<AppContext>({
+  middleware: [render],
+})
+
+router.get('/hello', (context) => {
+  return context.render('Hello')
+})
+```
+
+Use `context.render(...)` (or `context.get(Renderer)(...)`).
+
+Renderers may render any value type, not just UI nodes.
+
+```ts
+import { renderWith } from 'remix/middleware/render'
+
+const json = renderWith(
+  () =>
+    function render(data: unknown, init?: ResponseInit) {
+      return Response.json(data, init)
+    },
+)
+
+router.get('/api', (context) => {
+  return context.render({ ok: true })
+})
+```
+
+For Remix UI, create a renderer that owns frame resolution and response creation.
+
+```tsx
+import { createHtmlResponse } from 'remix/response/html'
+import { renderWith } from 'remix/middleware/render'
+import type { RemixNode } from 'remix/ui'
+import { renderToStream } from 'remix/ui/server'
+
+const render = renderWith(
+  ({ router, url }) =>
+    function render(node: RemixNode, init?: ResponseInit) {
+      let stream = renderToStream(node, {
+        async resolveFrame(src) {
+          let response = await router.fetch(new URL(src, url))
+
+          if (!response.ok) {
+            return `<pre>Frame error: ${response.status}</pre>`
+          }
+
+          return response.body ?? response.text()
+        },
+      })
+
+      return createHtmlResponse(stream, init)
+    },
+)
+```
+
+## Related Packages
+
+- [`fetch-router`](https://github.com/remix-run/remix/tree/main/packages/fetch-router) - Request routing and context
+- [`ui`](https://github.com/remix-run/remix/tree/main/packages/ui) - Remix UI rendering primitives
+- [`response`](https://github.com/remix-run/remix/tree/main/packages/response) - Response helpers
+
+## License
+
+See [LICENSE](https://github.com/remix-run/remix/blob/main/LICENSE)

package/src/render-middleware.ts

@@ -0,0 +1,2 @@
+// IMPORTANT: This file is auto-generated, please do not edit manually.
+export * from '@remix-run/render-middleware'

package/src/route-pattern/README.md

@@ -0,0 +1,291 @@
+# route-pattern
+
+Type-safe URL matching and href generation for JavaScript. `route-pattern` supports path variables, wildcards, optionals, search constraints, and full-URL patterns with predictable ranking.
+
+## Features
+
+- **Type-safe** - Infer params from patterns for compile-time correctness
+- **Expressive** - Variables, wildcards, optionals, and search constraints
+- **Full URL support** - Match protocol, hostname, port, pathname, and search
+- **Simple & deterministic ranking** - Predictable left-to-right priority for static, variable, and wildcard patterns
+- **Fast** - Trie-based matching for scalable performance
+- **Modular** - Import only the features you need to for smaller bundles
+- **Runtime agnostic** - Works across Node.js, Bun, Deno, Cloudflare Workers, and browsers
+
+## Installation
+
+```sh
+npm i remix
+```
+
+## Quick example
+
+```ts
+import { createMultiMatcher } from 'remix/route-pattern/match'
+
+let matcher = createMultiMatcher<{ name: string }>()
+
+matcher.add('blog/:slug', { name: 'blog-post' })
+matcher.add('api(/v:version)/*path', { name: 'api' })
+matcher.add('http(s)://:region.cdn.com/assets/*file.:ext', { name: 'assets' })
+
+let match = matcher.match('https://example.com/blog/v3')
+match?.pattern.toString()
+// /blog/:slug
+match?.params
+// { slug: 'v3' }
+match?.data
+// { name: 'blog-post' }
+
+import { createHref } from 'remix/route-pattern/href'
+
+createHref('blog/:slug', { slug: 'v3' })
+// '/blog/v3'
+
+createHref('api(/v:version)/*path', { version: '2', path: 'users/profile' })
+// '/api/v2/users/profile'
+
+createHref('http(s)://:region.cdn.com/assets/*file.:ext', {
+  region: 'us-west',
+  file: 'images/logo',
+  ext: 'png',
+})
+// 'https://us-west.cdn.com/assets/images/logo.png'
+```
+
+## API at a glance
+
+**remix/route-pattern** - Parse and stringify patterns.
+
+**remix/route-pattern/href** - Generate hrefs for patterns with type safe params.
+
+**remix/route-pattern/match** - Match against one pattern with type inference for params. Or match against many patterns with deterministic ranking and attached data.
+
+**remix/route-pattern/join** - Combine two patterns into one. Override protocol, hostname, port. Join pathnames. Merge search constraints.
+
+**remix/route-pattern/specificity** - Rank matches by [specificity](#ranking-matches-by-specificity).
+
+For in-depth reference, visit the [`route-pattern` API docs](https://api.remix.run/api/remix/route-pattern)
+
+## Pattern syntax
+
+### Protocol
+
+Protocol must be `http`, `https`, or `http(s)`:
+
+```ts
+'https://example.com' // matches https://example.com
+'http(s)://example.com' // matches http://example.com, https://example.com
+```
+
+### Hostname & pathname
+
+**Variables** capture dynamic segments using `:name`:
+
+```ts
+'users/:id' // matches /users/123
+'blog/:year-:month-:day/:slug' // matches /blog/2024-01-15/hello
+```
+
+**Wildcards** match multi-segment paths using `*name`:
+
+```ts
+'files/*path' // matches /files/images/logo.png
+'node_modules/*package/dist/index.js' // matches /node_modules/@remix-run/router/dist/index.js
+'files/*' // matches any path under /files, but doesn't capture the wildcard value
+```
+
+**Optionals** make parts optional using `()`:
+
+```ts
+'api(/v:version)/users' // matches /api/users, /api/v2/users
+'blog/:slug(.html)' // matches /blog/hello, /blog/hello.html
+'docs(/guides/:category)' // matches /docs, /docs/guides/routing
+'api(/v:major(.:minor))' // matches /api, /api/v2, /api/v2.1
+```
+
+While variables, wilcards, and optionals are most prevalent in pathnames, you can also use them in hostnames:
+
+```ts
+':tenant.example.com/dashboard' // matches acme.example.com/dashboard
+'(www.)example.com/blog/:slug(.html)' // matches example.com/blog/hello, www.example.com/blog/hello.html
+'*.example.com/files/*path' // matches cdn.example.com/files/images/logo.png
+'(:locale.)example.com/docs(/:section)' // matches en.example.com/docs, en.example.com/docs/guides
+```
+
+### Search
+
+**Search constraints** narrow matches using `?key` or `?key=value`:
+
+```ts
+'search?q' // key must be present
+'search?q=routing' // requires ?q=routing exactly
+```
+
+## Match URLs
+
+### Match against a single pattern
+
+Use `createMatcher` when you have one pattern and want params inferred from that exact pattern.
+
+```ts
+import { createMatcher } from 'remix/route-pattern/match'
+
+const url: string | URL = /* ... */
+
+let blogMatcher = createMatcher('blog/:slug')
+blogMatcher.match(url)?.params
+// Type safe params     ^? { slug: string } | undefined
+
+let docsMatcher = createMatcher('://(:tenant.)host.com/docs/*path.:ext')
+docsMatcher.match(url)?.params
+// Type safe params     ^? { tenant: string | undefined, path: string, ext: string } | undefined
+```
+
+### Match against multiple patterns
+
+Use `createMultiMatcher` when you need to match many patterns and attach your own data to each match.
+
+```ts
+import { createMultiMatcher } from 'remix/route-pattern/match'
+
+let matcher = createMultiMatcher<string>()
+// Any data type you want!         👆
+
+matcher.add('/', 'home')
+matcher.add('blog/:slug', 'blog-post')
+matcher.add('api(/v:version)/*path', 'api')
+
+matcher.match('https://example.com/blog/v3')
+// { params: { slug: 'v3' }, data: 'blog-post' }
+
+matcher.match('https://example.com/api/v2/users/profile')
+// { params: { version: '2', path: 'users/profile' }, data: 'api' }
+```
+
+The matched pattern is only known at runtime, so matched `params` are not inferred when matching with `createMultiMatcher`.
+
+### Ranking matches by specificity
+
+When multiple patterns match the same URL, `route-pattern` chooses the most specific match deterministically. Matches are ranked left-to-right, character-by-character:
+
+- Static characters are more specific than variables.
+- Variables are more specific than wildcards.
+- Earliest difference decides the winner.
+
+This is the same ranking used by `createMultiMatcher`.
+
+For advanced use cases, `/specificity` provides comparison utilities: `lessThan`, `greaterThan`, `equal`, `descending`, `ascending`, `compare`.
+For example:
+
+```ts
+import { createMultiMatcher } from 'remix/route-pattern/match'
+import { descending } from 'remix/route-pattern/specificity'
+
+let matcher = createMultiMatcher()
+matcher.add('files/*path', null)
+matcher.add('files/:name', null)
+matcher.add('files/readme.md', null)
+
+let matches = matcher.matchAll('https://example.com/files/readme.md')
+
+matches.sort(descending).map((match) => match.pattern.toString())
+// ['/files/readme.md', '/files/:name', '/files/*path']
+```
+
+## Generate hrefs
+
+`createHref` turns a pattern and params into a URL string.
+Required variables and wildcards must be provided, while params inside optional groups may be omitted.
+
+```ts
+import { createHref } from 'remix/route-pattern/href'
+
+createHref('blog/:slug', { slug: 'v3' })
+// '/blog/v3'
+
+createHref('api(/v:version)/*path', { path: 'users/profile' })
+// '/api/users/profile'
+
+createHref('api(/v:version)/*path', { version: '2', path: 'users/profile' })
+// '/api/v2/users/profile'
+
+createHref('http(s)://:region.cdn.com/assets/*file.:ext', {
+  region: 'us-west',
+  file: 'images/logo',
+  ext: 'png',
+})
+// 'https://us-west.cdn.com/assets/images/logo.png'
+
+createHref('blog/:slug?ref=docs', { slug: 'v3' }, { utm_source: 'newsletter' })
+// '/blog/v3?utm_source=newsletter&ref=docs'
+```
+
+**Note:** optional groups without params are included in the generated href:
+
+```ts
+createHref('todos(/new)')
+// '/todos/new'
+
+createHref('products(.json)')
+// '/products.json'
+```
+
+## Parse & stringify patterns
+
+You can explicitly parse and stringify patterns:
+
+```ts
+import { RoutePattern } from 'remix/route-pattern'
+
+let pattern = RoutePattern.parse('://example.com/blog/:slug')
+//  ^? RoutePattern
+
+pattern.toString()
+// '://example.com/blog/:slug'
+
+pattern.toJSON()
+// { hostname: 'example.com', pathname: 'blog/:slug', ... }
+```
+
+All APIs that take a `pattern` arg accept `string` or a parsed `RoutePattern`.
+
+**TIP:** For high-performance scenarios, you can parse patterns ahead of time to avoid reparsing them on every call.
+
+## Combine patterns
+
+`joinPatterns` builds a new pattern from a base pattern.
+
+```ts
+import { joinPatterns } from 'remix/route-pattern/join'
+
+let user = joinPatterns('users', ':id')
+
+user.toString()
+// '/users/:id'
+
+let apiUser = joinPatterns('api(/v:version)', '://remix.run/users/:id')
+
+apiUser.toString()
+// '://remix.run/api(/v:version)/users/:id'
+```
+
+- **Protocol:** if second pattern has a protocol, overrides base pattern
+- **Hostname:** if second pattern has a hostname, overrides base pattern
+- **Port:** if second pattern has a port, overrides base pattern
+- **Pathname:** concatenates pathnames, adding a `/` in between as necessary
+- **Search constraints:** merges search constraints by key
+
+## Benchmarks
+
+Benchmarks live in [`bench/`](./bench/).
+
+## Related Work
+
+- [`path-to-regexp`](https://www.npmjs.com/package/path-to-regexp)
+- [`find-my-way`](https://github.com/delvedor/find-my-way)
+- [`URLPattern`](https://developer.mozilla.org/en-US/docs/Web/API/URLPattern)
+
+## License
+
+See [LICENSE](https://github.com/remix-run/remix/blob/main/LICENSE)

package/src/route-pattern/href.ts

@@ -0,0 +1,2 @@
+// IMPORTANT: This file is auto-generated, please do not edit manually.
+export * from '@remix-run/route-pattern/href'

package/src/route-pattern/join.ts

@@ -0,0 +1,2 @@
+// IMPORTANT: This file is auto-generated, please do not edit manually.
+export * from '@remix-run/route-pattern/join'

package/src/route-pattern/match.ts

@@ -0,0 +1,2 @@
+// IMPORTANT: This file is auto-generated, please do not edit manually.
+export * from '@remix-run/route-pattern/match'

package/src/session/README.md

@@ -0,0 +1,171 @@
+# session
+
+A session management library for JavaScript. This package provides a flexible and secure way to manage user sessions in server-side applications with a flexible API for different session storage strategies.
+
+## Features
+
+- **Multiple Storage Strategies:** Includes memory, cookie, and file-based [session storage strategies](#storage-strategies) for different use cases
+- **Flash Messages:** Support for [flash data](#flash-messages) that persists only for the next request
+- **Session Security:** Built-in protection against [session fixation attacks](#regenerating-session-ids)
+
+## Installation
+
+```sh
+npm i remix
+```
+
+## Usage
+
+The following example shows how to use a session to persist data across requests.
+
+The standard pattern when working with sessions is to read the session from the request, modify it, and save it back to storage and write the session cookie to the response.
+
+```ts
+import { createCookieSessionStorage } from 'remix/session-storage/cookie'
+
+// Create a session storage. This is used to store session data across requests.
+let storage = createCookieSessionStorage()
+
+// This function simulates a typical request flow where the session is read from
+// the request cookie, modified, and the new cookie is returned in the response.
+async function handleRequest(cookie: string | null) {
+  let session = await storage.read(cookie)
+  session.set('count', Number(session.get('count') ?? 0) + 1)
+  return {
+    session, // The session data from this "request"
+    cookie: await storage.save(session), // The cookie to use on the next request
+  }
+}
+
+let response1 = await handleRequest(null)
+assert.equal(response1.session.get('count'), 1)
+
+let response2 = await handleRequest(response1.cookie)
+assert.equal(response2.session.get('count'), 2)
+
+let response3 = await handleRequest(response2.cookie)
+assert.equal(response3.session.get('count'), 3)
+```
+
+The example above is a low-level illustration of how to use this package for session management. In practice, you would use the `session` middleware in [`fetch-router`](https://github.com/remix-run/remix/tree/main/packages/fetch-router) to automatically manage the session for you.
+
+### Flash Messages
+
+Flash messages are values that persist only for the next request, perfect for displaying one-time notifications:
+
+```ts
+async function requestIndex(cookie: string | null) {
+  let session = await storage.read(cookie)
+  return { session, cookie: await storage.save(session) }
+}
+
+async function requestSubmit(cookie: string | null) {
+  let session = await storage.read(cookie)
+  session.flash('message', 'success!')
+  return { session, cookie: await storage.save(session) }
+}
+
+// Flash data is undefined on the first request
+let response1 = await requestIndex(null)
+assert.equal(response1.session.get('message'), undefined)
+
+// Flash data is undefined on the same request it is set. This response
+// is typically a redirect to a route that displays the flash data.
+let response2 = await requestSubmit(response1.cookie)
+assert.equal(response2.session.get('message'), undefined)
+
+// Flash data is available on the next request
+let response3 = await requestIndex(response2.cookie)
+assert.equal(response3.session.get('message'), 'success!')
+
+// Flash data is not available on subsequent requests
+let response4 = await requestIndex(response3.cookie)
+assert.equal(response4.session.get('message'), undefined)
+```
+
+### Regenerating Session IDs
+
+For security, regenerate the session ID after privilege changes like a login. This helps prevent session fixation attacks by issuing a new session ID in the response.
+
+```ts
+import { createFsSessionStorage } from 'remix/session-storage/fs'
+
+let sessionStorage = createFsSessionStorage('/tmp/sessions')
+
+async function requestIndex(cookie: string | null) {
+  let session = await sessionStorage.read(cookie)
+  return { session, cookie: await sessionStorage.save(session) }
+}
+
+async function requestLogin(cookie: string | null) {
+  let session = await sessionStorage.read(cookie)
+  session.set('userId', 'mj')
+  session.regenerateId()
+  return { session, cookie: await sessionStorage.save(session) }
+}
+
+let response1 = await requestIndex(null)
+assert.equal(response1.session.get('userId'), undefined)
+
+let response2 = await requestLogin(response1.cookie)
+assert.notEqual(response2.session.id, response1.session.id)
+
+let response3 = await requestIndex(response2.cookie)
+assert.equal(response3.session.get('userId'), 'mj')
+```
+
+To delete the old session data when the session is saved, use `session.regenerateId(true)`. This can help to prevent session fixation attacks by deleting the old session data when the session is saved. However, it may not be desirable in a situation with mobile clients on flaky connections that may need to resume the session using an old session ID.
+
+### Destroying Sessions
+
+When a user logs out, you should destroy the session using `session.destroy()`.
+
+This will clear all session data from storage the next time it is saved. It also clears the session ID on the client in the next response, so it will start with a new session on the next request.
+
+### Storage Strategies
+
+Several strategies are provided out of the box for storing session data across requests, depending on your needs.
+
+A session storage object must always be initialized with a _signed_ session cookie. This is used to identify the session and to store the session data in the response.
+
+#### Filesystem Storage
+
+Filesystem storage is a good choice for production environments. It requires access to a persistent filesystem, which is readily available on most servers. And it can scale to handle sessions with a lot of data easily.
+
+```ts
+import { createFsSessionStorage } from 'remix/session-storage/fs'
+
+let sessionStorage = createFsSessionStorage('/tmp/sessions')
+```
+
+#### Cookie Storage
+
+Cookie storage is suitable for production environments. In this strategy, all session data is stored directly in the session cookie itself, which means it doesn't require any additional storage.
+
+The main limitation of cookie storage is that the total size of the session cookie is limited to the browser's maximum cookie size, typically 4096 bytes.
+
+```ts
+import { createCookieSessionStorage } from 'remix/session-storage/cookie'
+
+let sessionStorage = createCookieSessionStorage()
+```
+
+#### Memory Storage
+
+Memory storage is useful in testing and development environments. In this strategy, all session data is stored in memory, which means no additional storage is required. However, all session data is lost when the server restarts.
+
+```ts
+import { createMemorySessionStorage } from 'remix/session-storage/memory'
+
+let sessionStorage = createMemorySessionStorage()
+```
+
+## Related Packages
+
+- [`remix/cookie`](https://github.com/remix-run/remix/tree/main/packages/cookie) - Cookie parsing and serialization
+- [`remix/router`](https://github.com/remix-run/remix/tree/main/packages/fetch-router) - Router with built-in session middleware
+- [`remix/session-storage/memcache`](https://github.com/remix-run/remix/tree/main/packages/session-storage-memcache) - Memcache-backed session storage
+
+## License
+
+See [LICENSE](https://github.com/remix-run/remix/blob/main/LICENSE)

package/src/session-middleware/README.md

@@ -0,0 +1,109 @@
+# session-middleware
+
+Session middleware for Remix using signed cookies. It loads session state from incoming requests, exposes it as `context.session` (or `context.get(Session)`), and persists updates automatically.
+
+## Features
+
+- **Session Lifecycle Handling** - Reads and saves session state per request
+- **Context Integration** - Exposes `context.session` (or `context.get(Session)`)
+- **Secure Cookie Support** - Designed for signed session cookies
+
+## Installation
+
+```sh
+npm i remix
+```
+
+## Usage
+
+```ts
+import { createRouter } from 'remix/router'
+import { createCookie } from 'remix/cookie'
+import { createCookieSessionStorage } from 'remix/session-storage/cookie'
+import { session } from 'remix/middleware/session'
+
+let sessionCookie = createCookie('__session', {
+  secrets: ['s3cr3t'], // session cookies must be signed!
+  httpOnly: true,
+  secure: true,
+  sameSite: 'lax',
+})
+
+let sessionStorage = createCookieSessionStorage()
+
+let router = createRouter({
+  middleware: [session(sessionCookie, sessionStorage)],
+})
+
+router.get('/', (context) => {
+  context.session.set('count', Number(context.session.get('count') ?? 0) + 1)
+  return new Response(`Count: ${context.session.get('count')}`)
+})
+```
+
+The middleware:
+
+- Reads the session from the cookie on incoming requests
+- Makes it available as `context.session` (or `context.get(Session)`)
+- Automatically saves session changes and sets the cookie on responses
+
+Use `context.session` (or `context.get(Session)`) for normal session reads and writes.
+
+Note: The session cookie must be signed for security. This prevents tampering with the session data on the client.
+
+### Login/Logout Flow
+
+A basic login/logout flow could look like this:
+
+```ts
+import * as res from 'remix/router/response-helpers'
+
+router.get('/login', ({ session }) => {
+  let error = session.get('error')
+  return res.html(`
+    <html>
+      <body>
+        <h1>Login</h1>
+        ${typeof error === 'string' ? <div class="error">${error}</div> : null}
+        <form method="POST" action="/login">
+          <input type="text" name="username" placeholder="Username" />
+          <input type="password" name="password" placeholder="Password" />
+          <button type="submit">Login</button>
+        </form>
+      </body>
+    </html>
+  `)
+})
+
+router.post('/login', ({ get, session }) => {
+  let formData = get(FormData)
+  let username = formData.get('username')
+  let password = formData.get('password')
+
+  let user = authenticateUser(username, password)
+  if (!user) {
+    session.flash('error', 'Invalid username or password')
+    return res.redirect('/login')
+  }
+
+  session.regenerateId()
+  session.set('userId', user.id)
+
+  return res.redirect('/dashboard')
+})
+
+router.post('/logout', ({ session }) => {
+  session.destroy()
+  return res.redirect('/')
+})
+```
+
+## Related Packages
+
+- [`fetch-router`](https://github.com/remix-run/remix/tree/main/packages/fetch-router) - Router for the web Fetch API
+- [`session`](https://github.com/remix-run/remix/tree/main/packages/session) - Session management and storage
+- [`cookie`](https://github.com/remix-run/remix/tree/main/packages/cookie) - Cookie parsing and serialization
+
+## License
+
+See [LICENSE](https://github.com/remix-run/remix/blob/main/LICENSE)