remix 3.0.0-beta.4 → 3.0.0-beta.6

package/src/node-hmr/README.md

@@ -0,0 +1,307 @@
+# node-hmr
+
+Run Node.js applications with Hot Module Reloading.
+
+## Features
+
+- **HMR Runtime**: Provides an `import.meta.hot` API for modules that can handle hot updates
+- **Module Hook Friendly**: Use Node's module customization hooks API to automatically insert `import.meta.hot` usage
+- **Restart Fallback**: Restarts the child Node process when updates aren't accepted
+- **Fetch Proxy Support**: Wrap fetch handlers so requests are delayed/retried during server updates/restarts
+- **Browser HMR Integration**: Optionally hosts browser HMR coordination that survives child restarts
+
+## Installation
+
+```sh
+npm i remix
+```
+
+## Usage
+
+Create a development script that starts your app server with HMR enabled, along with any additional Node args, such as the `--import` flag to provide [Node module customization hooks](https://nodejs.org/api/module.html#customization-hooks) for [JSX syntax support](https://github.com/remix-run/remix/tree/main/packages/node-tsx) and [Remix component HMR](https://github.com/remix-run/remix/tree/main/packages/ui-hmr):
+
+```ts
+// hmr.ts
+import { run } from 'remix/node-hmr'
+
+run('./server.ts', {
+  nodeArgs: ['--import', 'remix/node-tsx', '--import', 'remix/ui-hmr/node'],
+  watch: {
+    ignore: ['**/node_modules/**'],
+  },
+})
+```
+
+Then run the script with Node:
+
+```json
+{
+  "scripts": {
+    "hmr": "NODE_ENV=development node hmr.ts"
+  }
+}
+```
+
+## Fetch Proxy Support
+
+During development, server updates can briefly leave your app unable to handle requests. In a server-only context, requests may be rejected while the child server is restarting. In a browser context, the browser may refresh or revalidate at the same time as a server restart, which can result in failed requests or a broken page.
+
+A stable proxy server can avoid this by continuing to listen on the public port while `node-hmr` updates the child server behind it. `createHmrReadyFetch()` works with any fetch handler, so you can compose it with `createFetchProxy()` from [`remix/fetch-proxy`](https://github.com/remix-run/remix/tree/main/packages/fetch-proxy) to forward requests to the child server while delaying or retrying requests during updates.
+
+```ts
+// hmr.ts
+import * as http from 'node:http'
+
+import { createFetchProxy } from 'remix/fetch-proxy'
+import { run, createHmrReadyFetch } from 'remix/node-hmr'
+import { createRequestListener } from 'remix/node-fetch-server'
+
+const hmrProxyPort = 44100
+const appPort = 44101
+
+const hmrRunner = run('./server.ts', {
+  env: {
+    ...process.env,
+    PORT: String(appPort),
+  },
+  nodeArgs: ['--import', 'remix/node-tsx'],
+})
+
+const proxyFetch = createFetchProxy(`http://127.0.0.1:${appPort}`, {
+  xForwardedHeaders: true,
+})
+
+const server = http.createServer(createRequestListener(createHmrReadyFetch(hmrRunner, proxyFetch)))
+
+server.listen(hmrProxyPort)
+```
+
+By default, `createHmrReadyFetch()` retries `GET` and `HEAD` requests when the wrapped fetch handler throws or returns a `502`, `503`, or `504` response, but only if the server updated or restarted while the request was in flight. You can customize this policy with `shouldRetry`:
+
+```ts
+let fetchWhenReady = createHmrReadyFetch(hmrRunner, proxyFetch, {
+  shouldRetry({ request, response }) {
+    if (request.method !== 'GET' && request.method !== 'HEAD') return false
+
+    return response === undefined || [502, 503, 504].includes(response.status)
+  },
+})
+```
+
+## Browser HMR Integration
+
+`node-hmr` can coordinate browser-facing HMR alongside server HMR. The parent process hosts the browser event stream, tracks files reported by asset servers in the child process, sends matching file events back to the child runtime, and emits the resulting browser updates to connected clients.
+
+This is co-ordinated through the use of a browser HMR channel which can be created within the app server when running in `node-hmr` via the `remix/node-hmr/runtime` import:
+
+```ts
+import { createBrowserHmrChannel } from 'remix/node-hmr/runtime'
+
+let browserHmrChannel = await createBrowserHmrChannel()
+```
+
+The `remix/node-hmr/runtime` API is only available inside a child process supervised by `node-hmr`. Importing it outside `node-hmr` throws. Supervised child processes automatically receive the `REMIX_NODE_HMR` environment variable which you can check before dynamically importing the runtime API:
+
+```ts
+if (process.env.REMIX_NODE_HMR) {
+  let { createBrowserHmrChannel } = await import('remix/node-hmr/runtime')
+  let browserHmrChannel = await createBrowserHmrChannel()
+}
+```
+
+A browser HMR channel is scoped to the current child process. It gives browser HMR tooling an EventSource URL, a way to report the files it wants watched, and a way to respond to file changes with browser HMR events.
+
+Browser asset servers can use this API to co-ordinate browser HMR with the server, for example, [`remix/assets`](https://github.com/remix-run/remix/tree/main/packages/assets) via its `hmr` option to `createAssetServer`:
+
+```ts
+import { createAssetServer } from 'remix/assets'
+
+let isDevelopment = process.env.NODE_ENV === 'development'
+
+let assetServer = createAssetServer({
+  basePath: '/assets',
+  fileMap: { '/app/*path': 'app/*path' },
+  allowFiles: ['app/routes.ts', 'app/**/public/**'],
+  denyFiles: ['app/**/*.test.*'],
+  hmr:
+    isDevelopment && process.env.REMIX_NODE_HMR
+      ? async () => (await import('remix/node-hmr/runtime')).createBrowserHmrChannel()
+      : undefined,
+  watch: isDevelopment,
+})
+```
+
+When `node-hmr` hot updates or restarts server code in a way that should refresh server-rendered UI, it sends a `server:update` event to connected clients.
+
+Call `emitServerReady()` when your app server is ready to receive requests. This lets the parent process delay browser `server:update` events until a restarted app server has finished listening:
+
+```ts
+server.listen(port, () => {
+  if (process.env.REMIX_NODE_HMR) {
+    import('remix/node-hmr/runtime').then((nodeHmr) => nodeHmr.emitServerReady())
+  }
+})
+```
+
+## File Watching
+
+The file system is watched automatically so server source changes can hot update or restart the child process.
+
+You can optionally provide an array of glob patterns to the `watch.ignore` option.
+
+```ts
+import { run } from 'remix/node-hmr'
+
+run('./server.ts', {
+  nodeArgs: ['--import', 'remix/node-tsx', '--import', 'remix/ui-hmr/node'],
+  watch: {
+    ignore: ['**/node_modules/**'],
+  },
+})
+```
+
+You can also configure polling behavior. Polling defaults to `true` on Windows and `false` elsewhere:
+
+```ts
+import { run } from 'remix/node-hmr'
+
+run('./server.ts', {
+  nodeArgs: ['--import', 'remix/node-tsx', '--import', 'remix/ui-hmr/node'],
+  watch: {
+    poll: true,
+    pollInterval: 100,
+  },
+})
+```
+
+## `import.meta.hot`
+
+The `import.meta.hot` API provided by `node-hmr` is a small runtime contract for modules that can handle updates without restarting the process. It is primarily intended for transforms like [remix/ui-hmr](https://github.com/remix-run/remix/tree/main/packages/ui-hmr), but it can also be used directly.
+
+To type `import.meta.hot`, add the HMR types to your TypeScript config:
+
+```json
+{
+  "compilerOptions": {
+    "types": ["remix/node-hmr/types"]
+  }
+}
+```
+
+HMR accept calls are statically analyzed. Write them directly as `import.meta.hot.accept(...)`. Dependency accepts must use string literals or arrays of string literals; do not alias `import.meta.hot` or pass dynamically constructed dependency lists.
+
+```ts
+if (import.meta.hot) {
+  import.meta.hot.accept()
+}
+```
+
+For consistency with browser HMR environments, `node-hmr` also implements `import.meta.hot.on(...)`, but no events are fired in server modules.
+
+### Accepting updates
+
+Calling `accept()` makes the current module an HMR boundary. When the module changes, `node-hmr` evaluates the updated module and calls your callback with its exports.
+
+```ts
+export let value = 1
+
+if (import.meta.hot) {
+  import.meta.hot.accept((module) => {
+    if (typeof module.value !== 'number') {
+      import.meta.hot?.invalidate('Updated module no longer exports value')
+      return
+    }
+
+    value = module.value
+  })
+}
+```
+
+You can also accept updates from direct dependencies.
+
+```ts
+import { value } from './value.ts'
+
+let currentValue = value
+
+export function readValue() {
+  return currentValue
+}
+
+if (import.meta.hot) {
+  import.meta.hot.accept('./value.ts', (module) => {
+    if (typeof module.value !== 'number') {
+      import.meta.hot?.invalidate('Updated dependency no longer exports value')
+      return
+    }
+
+    currentValue = module.value
+  })
+}
+```
+
+Multiple dependencies can be accepted at once. The callback receives an array where only the changed dependency is defined.
+
+```ts
+if (import.meta.hot) {
+  import.meta.hot.accept(['./one.ts', './two.ts'], ([oneModule, twoModule]) => {
+    // oneModule is defined when ./one.ts changed.
+    // twoModule is defined when ./two.ts changed.
+  })
+}
+```
+
+### Cleaning up
+
+Register cleanup that should run before the module is replaced or disposed.
+
+```ts
+let interval = setInterval(refreshCache, 30_000)
+
+if (import.meta.hot) {
+  import.meta.hot.dispose(() => {
+    clearInterval(interval)
+  })
+}
+```
+
+The `data` object is preserved across updates for the same module. Use it for small pieces of state.
+
+```ts
+let count = Number(import.meta.hot?.data.count ?? 0)
+
+export function increment() {
+  count++
+}
+
+if (import.meta.hot) {
+  import.meta.hot.dispose((data) => {
+    data.count = count
+  })
+}
+```
+
+### Invalidating updates
+
+Call `invalidate()` inside an accept callback when the update cannot be applied safely. `node-hmr` falls back to a process restart.
+
+```ts
+if (import.meta.hot) {
+  import.meta.hot.accept((module) => {
+    if (typeof module.value !== 'number') {
+      import.meta.hot?.invalidate('Updated module no longer exports value')
+      return
+    }
+  })
+}
+```
+
+## Related Packages
+
+- [`assets`](https://github.com/remix-run/remix/tree/main/packages/assets) - Consumes browser HMR channels for coordinating server and browser HMR updates
+- [`fetch-proxy`](https://github.com/remix-run/remix/tree/main/packages/fetch-proxy) - Creates fetch handlers for forwarding requests to another server
+- [`ui-hmr`](https://github.com/remix-run/remix/tree/main/packages/ui-hmr) - Provides code transforms and runtime for HMR for Remix UI components
+
+## License
+
+See [LICENSE](https://github.com/remix-run/remix/blob/main/LICENSE)

package/src/node-hmr/runtime.ts

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

package/src/node-hmr/types.d.ts

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

package/{dist/ui/theme.js → src/node-hmr.ts}

@@ -1,2 +1,2 @@
 // IMPORTANT: This file is auto-generated, please do not edit manually.
-export * from '@remix-run/ui/theme';
+export * from '@remix-run/node-hmr'

package/src/route-pattern/README.md

@@ -8,7 +8,7 @@ Type-safe URL matching and href generation for JavaScript. `route-pattern` suppo
 - **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
+- **Fast** - Indexed, bounded-state matching without variant expansion or regex backtracking
 - **Modular** - Import only the features you need to for smaller bundles
 - **Runtime agnostic** - Works across Node.js, Bun, Deno, Cloudflare Workers, and browsers
 
@@ -65,6 +65,8 @@ createHref('http(s)://:region.cdn.com/assets/*file.:ext', {
 
 For in-depth reference, visit the [`route-pattern` API docs](https://api.remix.run/api/remix/route-pattern)
 
+Examples in this README use `remix/route-pattern/*` imports. The same APIs are also available from the direct package entrypoints: `@remix-run/route-pattern`, `@remix-run/route-pattern/href`, `@remix-run/route-pattern/match`, `@remix-run/route-pattern/join`, and `@remix-run/route-pattern/specificity`.
+
 ## Pattern syntax
 
 ### Protocol
@@ -82,9 +84,14 @@ Protocol must be `http`, `https`, or `http(s)`:
 
 ```ts
 'users/:id' // matches /users/123
-'blog/:year-:month-:day/:slug' // matches /blog/2024-01-15/hello
+'blog/:date/:slug' // matches /blog/2024-01-15/hello
+'files/:name.:ext' // matches /files/readme.md
 ```
 
+Pathname variables possessively capture the largest non-empty run up to `/` or `.`. Hyphens are data, so UUIDs and slugs remain intact. A variable may have static text before it, but every path through following optionals must reach `/`, `.`, a wildcard, or the end of the hostname or pathname. Capture an inseparable value such as a date with one variable instead of `:year-:month-:day`.
+
+Raw `/` and `.` are structural delimiters. Their percent-encoded forms remain data and are decoded in the resulting param. Static pattern text may use either decoded text or percent encoding, so `/café` and `/caf%C3%A9` match the same pathname text.
+
 **Wildcards** match multi-segment paths using `*name`:
 
 ```ts
@@ -93,6 +100,8 @@ Protocol must be `http`, `https`, or `http(s)`:
 'files/*' // matches any path under /files, but doesn't capture the wildcard value
 ```
 
+Patterns may contain any number of wildcards when static text or a delimiter separates them. Adjacent wildcards such as `*left*right` are rejected because their capture boundary is ambiguous.
+
 **Optionals** make parts optional using `()`:
 
 ```ts
@@ -102,7 +111,9 @@ Protocol must be `http`, `https`, or `http(s)`:
 '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:
+Optionals compile as state branches rather than concrete variants, so independent and nested optionals do not cause exponential matcher construction. Empty optionals and adjacent optional branches that give the same URL different capture schemas are rejected.
+
+While variables, wildcards, and optionals are most prevalent in pathnames, you can also use them in hostnames:
 
 ```ts
 ':tenant.example.com/dashboard' // matches acme.example.com/dashboard
@@ -111,6 +122,19 @@ While variables, wilcards, and optionals are most prevalent in pathnames, you ca
 '(:locale.)example.com/docs(/:section)' // matches en.example.com/docs, en.example.com/docs/guides
 ```
 
+Capture names may repeat. `params` uses the last participating capture in pattern order, while `paramsMeta` retains every participating capture:
+
+```ts
+let matcher = createMatcher('/:id/:id')
+let match = matcher.match('https://example.com/first/second')
+
+match?.params
+// { id: 'second' }
+
+match?.paramsMeta.pathname.map(({ name, value }) => ({ name, value }))
+// [{ name: 'id', value: 'first' }, { name: 'id', value: 'second' }]
+```
+
 **Escape characters** with `\`:
 
 ```ts
@@ -149,6 +173,22 @@ docsMatcher.match(url)?.params
 // Type safe params     ^? { tenant: string | undefined, path: string, ext: string } | undefined
 ```
 
+Matchers accept absolute URL strings or `URL` objects. To match a relative URL reference, pass an absolute `baseURL`; the input is resolved with the same semantics as `new URL(input, baseURL)`, and the resolved URL is returned on the match.
+
+```ts
+let match = blogMatcher.match('../blog/v3', {
+  baseURL: 'https://example.com/admin/settings',
+})
+
+match?.params
+// { slug: 'v3' }
+
+match?.url.href
+// 'https://example.com/blog/v3'
+```
+
+This works for root-relative, path-relative, query-relative, and network-path references. Without `baseURL`, string inputs must still be absolute.
+
 ### Match against multiple patterns
 
 Use `createMultiMatcher` when you need to match many patterns and attach your own data to each match.
@@ -172,17 +212,46 @@ matcher.match('https://example.com/api/v2/users/profile')
 
 The matched pattern is only known at runtime, so matched `params` are not inferred when matching with `createMultiMatcher`.
 
+Each match returns:
+
+- `url`: the `URL` object that was matched
+- `pattern`: the matched `RoutePattern`
+- `data`: the data attached with `matcher.add(pattern, data)`
+- `params`: captured param values
+- `paramsMeta`: hostname and pathname param metadata
+
+`paramsMeta.hostname` and `paramsMeta.pathname` are arrays of `{ type, name, value, begin, end }` entries. The offsets are measured after URL normalization. A pattern with no hostname matches any hostname, represented in `paramsMeta.hostname` as an unnamed wildcard entry.
+
+Set `ignoreCase: true` to make pathname matching case-insensitive. Hostname matching is always case-insensitive, and search constraints are always case-sensitive.
+
+```ts
+let matcher = createMatcher('/Docs/:slug', { ignoreCase: true })
+
+matcher.match('https://example.com/docs/Intro')?.params
+// { slug: 'Intro' }
+```
+
+Matchers limit individual pattern size, total matcher size, and the work performed by one match. Pattern and matcher sizes are measured in UTF-8 bytes. Direct package consumers may lower or raise individual limits. Exceeding one throws `MatcherResourceError` with structured `details` instead of silently abandoning matching:
+
+```ts
+let matcher = createMultiMatcher({
+  limits: { maxPatternSize: 4096, maxMatchWork: 100_000 },
+})
+```
+
 ### 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:
 
+- Explicit protocol and port constraints are more specific than omitted constraints.
+- Static hostnames are more specific than dynamic hostnames, which are more specific than omitted hostnames.
 - 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:
+For advanced use cases, `/specificity` provides comparison utilities: `lessThan`, `greaterThan`, `equal`, `descending`, `ascending`, `compare`. `lessThan(a, b)` returns `true` when match `a` is less specific than match `b`. For example:
 
 ```ts
 import { createMultiMatcher } from 'remix/route-pattern/match'
@@ -191,12 +260,12 @@ 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)
+matcher.add('files/readme', null)
 
-let matches = matcher.matchAll('https://example.com/files/readme.md')
+let matches = matcher.matchAll('https://example.com/files/readme')
 
 matches.sort(descending).map((match) => match.pattern.toString())
-// ['/files/readme.md', '/files/:name', '/files/*path']
+// ['/files/readme', '/files/:name', '/files/*path']
 ```
 
 ## Generate hrefs
@@ -222,10 +291,47 @@ createHref('http(s)://:region.cdn.com/assets/*file.:ext', {
 })
 // 'https://us-west.cdn.com/assets/images/logo.png'
 
-createHref('blog/:slug?ref=docs', { slug: 'v3' }, { utm_source: 'newsletter' })
+createHref(
+  'blog/:slug?ref=docs',
+  { slug: 'v3' },
+  {
+    searchParams: { utm_source: 'newsletter' },
+  },
+)
 // '/blog/v3?utm_source=newsletter&ref=docs'
+
+createHref('users/:id', { id: 'a.b' })
+// '/users/a%2Eb' (the encoded dot remains variable data when matched)
+```
+
+Pass `baseURL` to generate a path-relative reference to a same-origin route. Patterns with a different origin remain absolute.
+
+```ts
+let baseURL = new URL('https://example.com/admin/settings')
+
+createHref('users/:id', { id: '123' }, { baseURL })
+// '../users/123'
+
+createHref('https://cdn.example.com/assets/*path', { path: 'logo.svg' }, { baseURL })
+// 'https://cdn.example.com/assets/logo.svg'
+```
+
+The `searchParams` option accepts a plain object or `URLSearchParams`. Use `URLSearchParams` when duplicate keys or their order matter:
+
+```ts
+let searchParams = new URLSearchParams([
+  ['tag', 'featured'],
+  ['tag', 'popular'],
+])
+
+createHref('search', undefined, { searchParams })
+// '/search?tag=featured&tag=popular'
 ```
 
+`createHref()` throws `CreateHrefError` when it cannot safely generate an href. The error exposes stable structured details on `error.details`; the string message is for humans.
+
+Common failures include missing required params, nameless wildcards, invalid hostname params, empty pathname variables, and origin patterns that specify a protocol or port without a concrete hostname.
+
 **Note:** optional groups without params are included in the generated href:
 
 ```ts
@@ -238,25 +344,47 @@ createHref('products(.json)')
 
 ## Parse & stringify patterns
 
-You can explicitly parse and stringify patterns:
+You can explicitly parse and stringify patterns. Create a `RoutePattern` with `RoutePattern.parse` and use the methods and helpers below instead of reading parsed token internals.
 
 ```ts
-import { RoutePattern } from 'remix/route-pattern'
+import { getRoutePatternCaptures, RoutePattern } from 'remix/route-pattern'
 
-let pattern = RoutePattern.parse('://example.com/blog/:slug')
+let pattern = RoutePattern.parse('://:tenant.example.com/blog/:slug(/*path)')
 //  ^? RoutePattern
 
 pattern.toString()
-// '://example.com/blog/:slug'
+// '://:tenant.example.com/blog/:slug(/*path)'
 
 pattern.toJSON()
-// { hostname: 'example.com', pathname: 'blog/:slug', ... }
+// { hostname: ':tenant.example.com', pathname: 'blog/:slug(/*path)', ... }
+
+getRoutePatternCaptures(pattern)
+// [
+//   { part: 'hostname', type: ':', name: 'tenant', optional: false },
+//   { part: 'pathname', type: ':', name: 'slug', optional: false },
+//   { part: 'pathname', type: '*', name: 'path', optional: true },
+// ]
 ```
 
 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.
 
+`RoutePattern.toJSON()` returns a `RoutePatternJSON` object with serialized `protocol`, `hostname`, `port`, `pathname`, and `search` fields. `RoutePattern.parse()` throws `ParseError` for malformed sources; the error exposes stable `type`, `source`, and `index` fields.
+
+The public support types are:
+
+- `RoutePatternCapture` from `remix/route-pattern`
+- `RoutePatternJSON` from `remix/route-pattern`
+- `CreateHrefErrorDetails` from `remix/route-pattern/href`
+- `CreateHrefOptions` and `CreateHrefSearchParams` from `remix/route-pattern/href`
+- `MatchParamMeta` from `remix/route-pattern/match`
+- `MatchOptions` from `remix/route-pattern/match`
+- `MatcherLimits` from `remix/route-pattern/match`
+- `MatcherResourceError` and `MatcherResourceErrorDetails` from `remix/route-pattern/match`
+
+Literal patterns are validated and infer named params until the type-level parser reaches its 64-step complexity budget. Larger runtime-valid patterns remain accepted and fall back to safe general pattern types instead of risking a TypeScript excessive-instantiation error.
+
 ## Combine patterns
 
 `joinPatterns` builds a new pattern from a base pattern.

package/src/session/README.md

@@ -126,7 +126,7 @@ This will clear all session data from storage the next time it is saved. It also
 
 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.
+Session storage objects read and save cookie values. Use the `session` middleware with a signed `Cookie` to parse the incoming `Cookie` header, expose the session on request context, and serialize any saved value back into a `Set-Cookie` response header.
 
 #### Filesystem Storage
 

package/src/session-middleware/README.md

@@ -24,7 +24,6 @@ import { session } from 'remix/middleware/session'
 
 let sessionCookie = createCookie('__session', {
   secrets: ['s3cr3t'], // session cookies must be signed!
-  httpOnly: true,
   secure: true,
   sameSite: 'lax',
 })
@@ -50,21 +49,24 @@ The middleware:
 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.
+Session cookies are HTTP-only by default.
 
 ### Login/Logout Flow
 
 A basic login/logout flow could look like this:
 
 ```ts
-import * as res from 'remix/router/response-helpers'
+import { html } from 'remix/html-template'
+import { createHtmlResponse } from 'remix/response/html'
+import { redirect } from 'remix/response/redirect'
 
 router.get('/login', ({ session }) => {
   let error = session.get('error')
-  return res.html(`
+  return createHtmlResponse(html`
     <html>
       <body>
         <h1>Login</h1>
-        ${typeof error === 'string' ? <div class="error">${error}</div> : null}
+        ${typeof error === 'string' ? html`<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" />
@@ -83,18 +85,18 @@ router.post('/login', ({ get, session }) => {
   let user = authenticateUser(username, password)
   if (!user) {
     session.flash('error', 'Invalid username or password')
-    return res.redirect('/login')
+    return redirect('/login')
   }
 
   session.regenerateId()
   session.set('userId', user.id)
 
-  return res.redirect('/dashboard')
+  return redirect('/dashboard')
 })
 
 router.post('/logout', ({ session }) => {
   session.destroy()
-  return res.redirect('/')
+  return redirect('/')
 })
 ```