Bring over RR session code into @remix-run/session package #10797

brophdawg11 · 2025-10-22T19:59:40Z

Stacked on #10796

Adds a new @remix-run/session package - brought over from https://github.com/remix-run/react-router/blob/main/packages/react-router/lib/server-runtime/sessions.ts

mjackson

Overall we are headed in the right direction, thanks for the effort here this week! I hope the feedback helps.

packages/session/src/lib/session.ts

packages/fetch-router/src/lib/router.ts

packages/fetch-router/package.json

packages/session/src/lib/session.ts

brophdawg11 · 2025-10-29T19:04:15Z

packages/session/src/file-storage.ts

@@ -0,0 +1 @@
+export { createFileSessionStorage } from './lib/storage/file-storage.ts'


I needed to move this to a sub-export so that it didn't get picked up when a client-side API imported @remix-run/fetch-router and @remix-run/fetch-router importing the agnostic session stuff from @remix-run/sesson.

This happened from the bookstore routes.ts:

import { route, formAction, resources } from '@remix-run/fetch-router' export let routes = route({ ... })

When we tried to run pnpm dev:browser, it would error on the file-storage imports of node:fs

demos/bookstore/app/models/cart.ts

brophdawg11 · 2025-10-29T19:07:42Z

demos/bookstore/app/middleware/cart.ts

+ * To be used on any route that mutates the cart
+ */
+export const ensureCart: Middleware = async ({ session }) => {
+  createCartIfNotExists(session)


Middleware used by the cart API routes to ensure we always have a cart available if we're trying to mutate the cart

That's a great pattern.

brophdawg11 · 2025-10-29T19:08:22Z

demos/bookstore/app/utils/session.ts

+declare module '@remix-run/session' {
+  interface SessionData {
+    cartId?: string
+    userId?: string


Module augmentation to strongly type our session

brophdawg11 · 2025-10-29T19:08:52Z

demos/bookstore/app/cart.tsx

-      async add({ storage, formData }) {
-        // Simulate network latency
-        await new Promise((resolve) => setTimeout(resolve, 1000))
+      use: [ensureCart],


Cart middleware that runs before all cart API handlers

…t of fetch-router in the browser bundle

mjackson

Made some nice progress on this one, thanks @brophdawg11 🙏

I made a few comments, I hope they're helpful.

In the router itself, I think I may have led you astray asking you to set the session in context._session. I think we should probably always have a session storage (i.e. don't allow them to use createRouter({ sessionStorage: false }), and default to cookie storage) and setup a real session object every time. This will be cheap to do on requests that do not send a session Cookie header since it's just a new, empty session. No deserialize needed.

Then, on the way out we can just do as we're currently doing. If nobody interacted with the session, don't send the Set-Cookie.

To me, this is the lowest friction we can possibly provide for folks. They will always have a session object that just works, without any setup. It's cheap. And we won't be sending unnecessary cookies if they aren't using it.

Does that make sense?

packages/fetch-router/src/lib/request-context.test.ts

mjackson · 2025-10-31T21:18:26Z

demos/bookstore/package.json

    "@remix-run/node-fetch-server": "workspace:*"
  },
  "devDependencies": {
+    "@remix-run/session": "workspace:*",


Should be a regular dep, not a dev dep.

mjackson · 2025-10-31T21:20:13Z

packages/fetch-router/package.json

    "tsx": "^4.20.6"
  },
-  "peerDependencies": {
+  "dependencies": {


These should all be peer deps, not regular deps. The strategy with individual packages is that they should all use peer deps with other @remix-run/* packages and use --external when building.

huh yeah I thought I had done that but maybe a bad rebase flipped it back 👍

mjackson · 2025-10-31T21:24:26Z

packages/fetch-router/src/lib/router.test.ts

    assert.equal(handlerCalled, false)
  })
 })
+


This file is getting huge. Should we put these in a new sessions.test.ts file? I could probably separate out a few others too, like file-uploads.test.ts and middleware.test.ts

yeah I'll pull session tests out for now and we can pull the others out in a separate PR

mjackson · 2025-10-31T21:29:10Z

packages/session/package.json

+    }
+  },
+  "dependencies": {
+    "@remix-run/cookie": "workspace:^",


I've been using workspace:*. This could also work. I just want to be consistent about how we do it.

Looks like we have some of each throughout the repo - I'll use workspace:* for this new stuff and we can do a larger pass separately

mjackson · 2025-10-31T22:04:40Z

packages/session/src/index.ts

+  Session,
+} from './lib/session.ts'
+
+export { createCookieSessionStorage } from './lib/storage/cookie-storage.ts'


The file-storage package uses a pattern where we have separate exports for all implementations, e.g. @remix-run/file-storage/local and @remix-run/file-storage/memory.

I think the same pattern makes sense here. Let's put both cookie and memory storage into their own exports. So we'll have:

@remix-run/session/cookie-storage

@remix-run/session/file-storage

@remix-run/session/memory-storage

good call - I updated to follow the same pattern here. I think in RR we had a loose rule of only using a separate package when the build/runtime required it (i.e., react-router/dom) but I like the feel of these self contained sub-exports for semi-mutually-exclusive behaviors.

mjackson · 2025-10-31T22:11:08Z

packages/session/src/lib/session.ts

+export class Session<Data = SessionData, FlashData = Data> {
+  #id: string
+  #map: Map<keyof Data | FlashDataKey<keyof FlashData & string>, unknown>
+  #status: 'new' | 'clean' | 'dirty' | 'destroyed'


The new status feels redundant to me. clean, dirty, and destroyed make sense. But new feels the same as clean to me in the sense that in neither case does it need to be saved.

yeah the new only commit session on modifications alleviated the original use for new - removed

mjackson · 2025-10-31T22:18:54Z

packages/session/src/lib/session.ts

+/**
+ * An object of name/value pairs to be used in the session.
+ */
+export interface SessionData {


This feels like an awkward way to achieve type safety for session.data because there's no way to define different data in different session cookies. We should either come up with a solution that works for N session cookies on a site or just return unknown values out of session.data for now.

yeah this is carried forward from Remix v1 - happy to ditch it since it's just sort of a TS lie anyway

mjackson · 2025-10-31T22:29:30Z

demos/bookstore/app/middleware/cart.ts

+ * To be used on any route that mutates the cart
+ */
+export const ensureCart: Middleware = async ({ session }) => {
+  createCartIfNotExists(session)


That's a great pattern.

gyx1000 · 2025-11-03T07:29:03Z

packages/fetch-router/src/lib/router.ts

+      let cookie = await this.#sessionStorage.destroySession(session)
+      response.headers.append('Set-Cookie', cookie)
+    }
+


What do you think about implementing an optional touchSession feature on storage?
In cases where sessions are automatically cleaned up by storage upon expiration (cron, ttl), this would allow the idle timer to be reset without updating the entire content.

The touchSession would only be called if the session status is clean and the storage implements touchSession.
The custom storage backend could also manage a touchTTL to avoid updating the backend each time a session is read.

Sorry if you have already ruled out this strategy and I missed the information. If so, what approach would you take?

Lets land the session stuff in it's current state (largely following the implementation in RR) and then we can consider potential enhancements. Feel free to open a discussion outlining the use case and we can further discuss if something like this would be beneficial there 👍

Yes! Thank you for the work already done! 👌

brophdawg11 · 2025-11-03T22:50:26Z

Ended up starting a fresh PR to clean up some of this commit history after a few rebases onto the breaking changes in main. Closing this in favor of #10811

brophdawg11 mentioned this pull request Oct 22, 2025

Add session package #10790

Open

brophdawg11 force-pushed the brophdawg11/session branch from 003723b to 80537fe Compare October 22, 2025 20:11

MichaelDeBoey linked an issue Oct 23, 2025 that may be closed by this pull request

Add session package #10790

Open

brophdawg11 force-pushed the brophdawg11/session branch 2 times, most recently from 9dc0e74 to d15afe1 Compare October 23, 2025 14:16

mjackson requested changes Oct 24, 2025

View reviewed changes

This was linked to issues Oct 25, 2025

Add session-middleware to fetch-router #10794

Open

Add built-in session support in fetch-router #10791

Open

MichaelDeBoey requested changes Oct 25, 2025

View reviewed changes

packages/session/src/lib/session.ts Outdated Show resolved Hide resolved

packages/session/src/lib/session.ts Outdated Show resolved Hide resolved

brophdawg11 force-pushed the brophdawg11/session branch 3 times, most recently from 62f95fa to 7350dde Compare October 29, 2025 19:00

brophdawg11 commented Oct 29, 2025

View reviewed changes

demos/bookstore/app/models/cart.ts Show resolved Hide resolved

brophdawg11 commented Oct 29, 2025

View reviewed changes

brophdawg11 added 13 commits October 31, 2025 11:08

Bring over RR cookies code into @remix-run/cookies package

ee3a64e

Update build and exports

a10d448

Rename @remix-run/cookies -> @remix-run/cookie

f4a569b

Reorder package.json

0fdf0f1

Add README

9defa4d

Updates

b2b44af

Remove stale links

74f2015

Update copyright/author to Shopify/[email protected]

f54a3c1

bundle cookie dep and move to a devDependency

ff73c5a

PR feedback

8c3a2be

Remove space from license

e8ac562

Refactor createCookie() -> new Cookie()

bf7b4a1

Convert any's to unknown's

3029560

brophdawg11 added 19 commits October 31, 2025 11:22

Updates

32da854

Wire up automatic session management

a51e480

Automatic handling of session commit/destroy

153abef

Update bookstore to use built-in session

e8d31bf

Fix some type issues in tests

b70e70f

Fix lockfile

83edda1

Adopt NoOpSession approach

76a38f5

PR feedback

1191d86

Convert session to a class, inline middleware logic

9c9ed31

Cleanup

62c9c25

Fix up bookstore tests

fe8c8ff

Add a few comments

3dd1582

Support sub router sessions

f9227a7

Update to use new Cookie class API

fac0731

Bring over createFileSessionStorage

e4bb5a9

Fix lint issues

976a06b

Move file storage to a sub export so it's not pulled in from an impor…

b7cd2de

…t of fetch-router in the browser bundle

Update bookstore demo session/cart handling

acda0dc

Fix tests based on new cart flow

2d87615

brophdawg11 force-pushed the brophdawg11/cookies branch from cbe4632 to 8652d7b Compare October 31, 2025 16:29

brophdawg11 force-pushed the brophdawg11/session branch from 7350dde to 2d87615 Compare October 31, 2025 16:29

mjackson requested changes Oct 31, 2025

View reviewed changes

gyx1000 reviewed Nov 3, 2025

View reviewed changes

brophdawg11 force-pushed the brophdawg11/cookies branch from 93e76b3 to b8db250 Compare November 3, 2025 17:07

brophdawg11 mentioned this pull request Nov 3, 2025

Bring over RR session code into @remix-run/session package #10811

Closed

brophdawg11 closed this Nov 3, 2025

MichaelDeBoey deleted the brophdawg11/session branch November 4, 2025 09:13

MichaelDeBoey added pkg:session feat:sessions Sessions related issues labels Nov 5, 2025

		@@ -0,0 +1 @@
		export { createFileSessionStorage } from './lib/storage/file-storage.ts'

Bring over RR session code into @remix-run/session package #10797

Bring over RR session code into @remix-run/session package #10797

Conversation

brophdawg11 commented Oct 22, 2025

Uh oh!

mjackson left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mjackson left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

brophdawg11 commented Nov 3, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants