Merge branch 'main' into markdalgleish/compression-middleware

Author: markdalgleish

AGENTS.md

@@ -21,6 +21,7 @@
 
 - **Imports**: Always use `import type { X }` for types (separate from value imports); use `export type { X }` for type exports; include `.ts` extensions
 - **Variables**: Prefer `let` for locals, `const` only at module scope; never use `var`
+- **Functions**: Use regular function declarations/expressions by default. Only use arrow functions as callbacks (e.g., route handlers, array methods) where preserving lexical `this` is beneficial or the syntax is more concise
 - **Classes**: Use native fields (omit `public`), `#private` for private members (no TypeScript accessibility modifiers)
 - **Formatting**: Prettier (printWidth: 100, no semicolons, single quotes, spaces not tabs)
 - **TypeScript**: Strict mode, ESNext target, ES2022 modules, bundler resolution, verbatimModuleSyntax

README.md

@@ -36,19 +36,25 @@ The benefit is code that's not just reusable, but **future-proof**.
 
 We currently publish the following packages:
 
+- [async-context-middleware](packages/async-context-middleware): Middleware for storing request context in AsyncLocalStorage
 - [cookie](packages/cookie): A comprehensive toolkit for effortlessly managing HTTP cookies
 - [fetch-proxy](packages/fetch-proxy): Seamlessly construct HTTP proxies with the familiar `fetch()` API
 - [fetch-router](packages/fetch-router): A minimal, composable router built on the web Fetch API and `route-pattern`.
 - [file-storage](packages/file-storage): Robust key/value storage tailored for JavaScript `File` objects, simplifying file management
+- [form-data-middleware](packages/form-data-middleware): Middleware for parsing FormData from request bodies
 - [form-data-parser](packages/form-data-parser): An enhanced `request.formData()` wrapper enabling efficient, streaming file uploads
 - [headers](packages/headers): A comprehensive toolkit for effortlessly managing HTTP headers
 - [html-template](packages/html-template): A safe HTML template tag with auto-escaping for JavaScript
 - [interaction](packages/interaction): Semantic, declarative events and Interactions
 - [lazy-file](packages/lazy-file): Optimize performance with lazy-loaded, streaming `Blob`s and `File`s for JavaScript
+- [logger-middleware](packages/logger-middleware): Middleware for logging HTTP requests and responses
+- [method-override-middleware](packages/method-override-middleware): Middleware for overriding HTTP request methods from form data
 - [multipart-parser](packages/multipart-parser): High-performance, streaming parser for multipart messages, perfect for handling complex form data
 - [node-fetch-server](packages/node-fetch-server): Build Node.js HTTP servers using the web-standard `fetch()` API, promoting code consistency
 - [route-pattern](packages/route-pattern): A powerful and flexible URL pattern matching library
 - [session](packages/session): A full-featured session management library for JavaScript
+- [session-middleware](packages/session-middleware): Middleware for managing sessions with cookie-based storage
+- [static-middleware](packages/static-middleware): Middleware for serving static files from the filesystem
 - [tar-parser](packages/tar-parser): A fast, streaming parser for tar archives, designed for efficient data extraction
 
 ## Contributing

demos/bookstore/app/auth.test.ts

@@ -47,6 +47,48 @@ describe('auth handlers', () => {
     assertContains(html, 'Invalid email or password')
   })
 
+  it('flash error message is cleared after being displayed once', async () => {
+    // POST invalid credentials to trigger flash message
+    let response = await router.fetch('https://remix.run/login', {
+      method: 'POST',
+      body: new URLSearchParams({
+        email: '[email protected]',
+        password: 'wrongpassword',
+      }),
+      redirect: 'manual',
+    })
+
+    assert.equal(response.status, 302)
+    assert.equal(response.headers.get('Location'), '/login')
+
+    // Follow redirect to see the error message (first request)
+    let sessionCookie = getSessionCookie(response)
+    let firstFollowUp = await router.fetch('https://remix.run/login', {
+      headers: {
+        Cookie: `session=${sessionCookie}`,
+      },
+    })
+
+    let firstHtml = await firstFollowUp.text()
+    assertContains(firstHtml, 'Invalid email or password')
+
+    // Get updated session cookie (session should be updated to clear flash)
+    let updatedSessionCookie = getSessionCookie(firstFollowUp) || sessionCookie
+
+    // Refresh the page (second request) - error should NOT be shown
+    let secondFollowUp = await router.fetch('https://remix.run/login', {
+      headers: {
+        Cookie: `session=${updatedSessionCookie}`,
+      },
+    })
+
+    let secondHtml = await secondFollowUp.text()
+    assert.ok(
+      !secondHtml.includes('Invalid email or password'),
+      'Expected flash error to be cleared after first display',
+    )
+  })
+
   it('POST /register creates new user and sets session', async () => {
     let uniqueEmail = `newuser-${Date.now()}@example.com`
 
@@ -135,4 +177,71 @@ describe('auth handlers', () => {
     assertContains(html, 'Invalid email or password')
     assertContains(html, 'returnTo=' + encodeURIComponent('/checkout'))
   })
+
+  it('POST /reset-password with mismatched passwords redirects back with error', async () => {
+    // First, request a password reset to get a token
+    let forgotPasswordResponse = await router.fetch('https://remix.run/forgot-password', {
+      method: 'POST',
+      body: new URLSearchParams({
+        email: '[email protected]',
+      }),
+    })
+
+    let html = await forgotPasswordResponse.text()
+    // Extract token from the reset link in the demo response
+    let tokenMatch = html.match(/\/reset-password\/([^"]+)/)
+    assert.ok(tokenMatch, 'Expected to find reset token in response')
+    let token = tokenMatch[1]
+
+    // Try to reset password with mismatched passwords
+    let response = await router.fetch(`https://remix.run/reset-password/${token}`, {
+      method: 'POST',
+      body: new URLSearchParams({
+        password: 'newpassword123',
+        confirmPassword: 'differentpassword',
+      }),
+      redirect: 'manual',
+    })
+
+    assert.equal(response.status, 302)
+    assert.equal(response.headers.get('Location'), `/reset-password/${token}`)
+
+    // Follow redirect to see the error message
+    let sessionCookie = getSessionCookie(response)
+    let followUpResponse = await router.fetch(`https://remix.run/reset-password/${token}`, {
+      headers: {
+        Cookie: `session=${sessionCookie}`,
+      },
+    })
+
+    let errorHtml = await followUpResponse.text()
+    assertContains(errorHtml, 'Passwords do not match')
+  })
+
+  it('POST /reset-password with invalid token redirects back with error', async () => {
+    let invalidToken = 'invalid-token-12345'
+
+    let response = await router.fetch(`https://remix.run/reset-password/${invalidToken}`, {
+      method: 'POST',
+      body: new URLSearchParams({
+        password: 'newpassword123',
+        confirmPassword: 'newpassword123',
+      }),
+      redirect: 'manual',
+    })
+
+    assert.equal(response.status, 302)
+    assert.equal(response.headers.get('Location'), `/reset-password/${invalidToken}`)
+
+    // Follow redirect to see the error message
+    let sessionCookie = getSessionCookie(response)
+    let followUpResponse = await router.fetch(`https://remix.run/reset-password/${invalidToken}`, {
+      headers: {
+        Cookie: `session=${sessionCookie}`,
+      },
+    })
+
+    let errorHtml = await followUpResponse.text()
+    assertContains(errorHtml, 'Invalid or expired reset token')
+  })
 })

demos/bookstore/app/auth.tsx

@@ -78,9 +78,9 @@ export default {
       async action({ session, formData, url }) {
         let email = formData.get('email')?.toString() ?? ''
         let password = formData.get('password')?.toString() ?? ''
-        let user = authenticateUser(email, password)
         let returnTo = url.searchParams.get('returnTo')
 
+        let user = authenticateUser(email, password)
         if (!user) {
           session.flash('error', 'Invalid email or password. Please try again.')
           return redirect(routes.auth.login.index.href(undefined, { returnTo }))
@@ -239,15 +239,22 @@ export default {
     },
 
     resetPassword: {
-      index({ params }) {
+      index({ params, session }) {
         let token = params.token
+        let error = session.get('error')
 
         return render(
           <Document>
             <div class="card" style="max-width: 500px; margin: 2rem auto;">
               <h1>Reset Password</h1>
               <p>Enter your new password below.</p>
 
+              {typeof error === 'string' ? (
+                <div class="alert alert-error" style="margin-bottom: 1.5rem;">
+                  {error}
+                </div>
+              ) : null}
+
               <form method="POST" action={routes.auth.resetPassword.action.href({ token })}>
                 <div class="form-group">
                   <label for="password">New Password</label>
@@ -280,45 +287,20 @@ export default {
         )
       },
 
-      async action({ formData, params }) {
+      async action({ session, formData, params }) {
         let password = formData.get('password')?.toString() ?? ''
         let confirmPassword = formData.get('confirmPassword')?.toString() ?? ''
 
         if (password !== confirmPassword) {
-          return render(
-            <Document>
-              <div class="card" style="max-width: 500px; margin: 2rem auto;">
-                <div class="alert alert-error">Passwords do not match.</div>
-                <p>
-                  <a
-                    href={routes.auth.resetPassword.index.href({ token: params.token })}
-                    class="btn"
-                  >
-                    Try Again
-                  </a>
-                </p>
-              </div>
-            </Document>,
-            { status: 400 },
-          )
+          session.flash('error', 'Passwords do not match.')
+          return redirect(routes.auth.resetPassword.index.href({ token: params.token }))
         }
 
         let success = resetPassword(params.token, password)
 
         if (!success) {
-          return render(
-            <Document>
-              <div class="card" style="max-width: 500px; margin: 2rem auto;">
-                <div class="alert alert-error">Invalid or expired reset token.</div>
-                <p>
-                  <a href={routes.auth.forgotPassword.index.href()} class="btn">
-                    Request New Link
-                  </a>
-                </p>
-              </div>
-            </Document>,
-            { status: 400 },
-          )
+          session.flash('error', 'Invalid or expired reset token.')
+          return redirect(routes.auth.resetPassword.index.href({ token: params.token }))
         }
 
         return render(

demos/bookstore/app/router.ts

@@ -1,11 +1,11 @@
 import { createRouter } from '@remix-run/fetch-router'
-import { asyncContext } from '@remix-run/fetch-router/async-context-middleware'
+import { asyncContext } from '@remix-run/async-context-middleware'
 import { compression } from '@remix-run/fetch-router/compression-middleware'
-import { formData } from '@remix-run/fetch-router/form-data-middleware'
-import { logger } from '@remix-run/fetch-router/logger-middleware'
-import { methodOverride } from '@remix-run/fetch-router/method-override-middleware'
-import { session } from '@remix-run/fetch-router/session-middleware'
-import { staticFiles } from '@remix-run/fetch-router/static-middleware'
+import { formData } from '@remix-run/form-data-middleware'
+import { logger } from '@remix-run/logger-middleware'
+import { methodOverride } from '@remix-run/method-override-middleware'
+import { session } from '@remix-run/session-middleware'
+import { staticFiles } from '@remix-run/static-middleware'
 
 import { routes } from '../routes.ts'
 import { sessionCookie, sessionStorage } from './utils/session.ts'
@@ -33,7 +33,6 @@ middleware.push(
     cacheControl: 'no-store, must-revalidate',
     etag: false,
     lastModified: false,
-    acceptRanges: false,
   }),
 )
 middleware.push(formData({ uploadHandler }))

demos/bookstore/app/utils/context.ts

@@ -1,9 +1,8 @@
 import { createStorageKey } from '@remix-run/fetch-router'
-import { getContext } from '@remix-run/fetch-router/async-context-middleware'
+import { getContext } from '@remix-run/async-context-middleware'
 
+import { type Cart, getCart } from '../models/cart.ts'
 import type { User } from '../models/users.ts'
-import type { Cart } from '../models/cart.ts'
-import { getCart } from '../models/cart.ts'
 
 // Storage key for attaching user data to request context
 let USER_KEY = createStorageKey<User>()

demos/bookstore/app/utils/uploads.ts

@@ -1,6 +1,6 @@
 import { dirname, resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
-import type { FileUpload } from '@remix-run/fetch-router/form-data-middleware'
+import type { FileUpload } from '@remix-run/form-data-middleware'
 import { LocalFileStorage } from '@remix-run/file-storage/local'
 
 const __dirname = dirname(fileURLToPath(import.meta.url))

demos/bookstore/package.json

@@ -3,15 +3,21 @@
   "private": true,
   "type": "module",
   "dependencies": {
+    "@remix-run/async-context-middleware": "workspace:*",
     "@remix-run/cookie": "workspace:*",
     "@remix-run/dom": "jam",
     "@remix-run/events": "jam",
     "@remix-run/fetch-router": "workspace:*",
     "@remix-run/file-storage": "workspace:*",
+    "@remix-run/form-data-middleware": "workspace:*",
     "@remix-run/headers": "workspace:*",
     "@remix-run/lazy-file": "workspace:*",
+    "@remix-run/logger-middleware": "workspace:*",
+    "@remix-run/method-override-middleware": "workspace:*",
     "@remix-run/node-fetch-server": "workspace:*",
-    "@remix-run/session": "workspace:*"
+    "@remix-run/session": "workspace:*",
+    "@remix-run/session-middleware": "workspace:*",
+    "@remix-run/static-middleware": "workspace:*"
   },
   "devDependencies": {
     "@types/node": "^24.6.0",

demos/sse/app/router.ts

@@ -1,7 +1,7 @@
 import { createRouter } from '@remix-run/fetch-router'
 import { compression } from '@remix-run/fetch-router/compression-middleware'
-import { logger } from '@remix-run/fetch-router/logger-middleware'
-import { staticFiles } from '@remix-run/fetch-router/static-middleware'
+import { logger } from '@remix-run/logger-middleware'
+import { staticFiles } from '@remix-run/static-middleware'
 
 import { routes } from '../routes.ts'
 import { home } from './home.tsx'
@@ -16,7 +16,7 @@ if (process.env.NODE_ENV === 'development') {
 middleware.push(compression())
 middleware.push(
   staticFiles('./public', {
-    cacheControl: 'no-store, must-revalidate',
+    cacheControl: 'no-store',
     etag: false,
     lastModified: false,
   }),

demos/sse/package.json

@@ -7,7 +7,9 @@
     "@remix-run/events": "jam",
     "@remix-run/fetch-router": "workspace:*",
     "@remix-run/interaction": "workspace:*",
-    "@remix-run/node-fetch-server": "workspace:*"
+    "@remix-run/logger-middleware": "workspace:*",
+    "@remix-run/node-fetch-server": "workspace:*",
+    "@remix-run/static-middleware": "workspace:*"
   },
   "devDependencies": {
     "@types/node": "^24.6.0",