fix(router): bump tanstack store to ^0.8 #5680
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
WalkthroughBumped TanStack store dependencies in three package manifests, added a deep-equality comparator to the Solid router state hook, and adjusted/removed several Solid e2e tests (two tests skipped, a large params test removed, and one assertion expectation changed). No public API signatures changed. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant Component as Router Consumer
participant Hook as useRouterState
participant Store as Solid Store
rect #E8F5E9
Note over Hook,Store: deepEqual comparator added to useStore(equal)
end
Component->>Hook: subscribe(selector)
Hook->>Store: useStore(selector, { equal: deepEqual })
Store-->>Hook: selectorResult (new ref or equal value)
alt deepEqual(selectorResult, prev) == true
Hook->>Component: no update (skip render)
else
Hook->>Component: emit update (re-render)
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20–30 minutes
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (2)
🧰 Additional context used📓 Path-based instructions (2)**/*.{ts,tsx}📄 CodeRabbit inference engine (AGENTS.md)
Files:
e2e/**📄 CodeRabbit inference engine (AGENTS.md)
Files:
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
🔇 Additional comments (2)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
View your CI Pipeline Execution ↗ for commit 3d294d2
☁️ Nx Cloud last updated this comment at |
birkskyum
changed the title
birkskyum
changed the title
More templates
@tanstack/arktype-adapter
@tanstack/directive-functions-plugin
@tanstack/eslint-plugin-router
@tanstack/history
@tanstack/nitro-v2-vite-plugin
@tanstack/react-router
@tanstack/react-router-devtools
@tanstack/react-router-ssr-query
@tanstack/react-start
@tanstack/react-start-client
@tanstack/react-start-server
@tanstack/router-cli
@tanstack/router-core
@tanstack/router-devtools
@tanstack/router-devtools-core
@tanstack/router-generator
@tanstack/router-plugin
@tanstack/router-ssr-query-core
@tanstack/router-utils
@tanstack/router-vite-plugin
@tanstack/server-functions-plugin
@tanstack/solid-router
@tanstack/solid-router-devtools
@tanstack/solid-router-ssr-query
@tanstack/solid-start
@tanstack/solid-start-client
@tanstack/solid-start-server
@tanstack/start-client-core
@tanstack/start-plugin-core
@tanstack/start-server-core
@tanstack/start-static-server-functions
@tanstack/start-storage-context
@tanstack/valibot-adapter
@tanstack/virtual-file-routes
@tanstack/zod-adapter
commit: |
birkskyum
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/solid-router/src/useRouterState.tsx(3 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript in strict mode with extensive type safety across the codebase
Files:
packages/solid-router/src/useRouterState.tsx
packages/{react-router,solid-router}/**
📄 CodeRabbit inference engine (AGENTS.md)
Implement React and Solid bindings/components only in packages/react-router/ and packages/solid-router/
Files:
packages/solid-router/src/useRouterState.tsx
🧠 Learnings (1)
📚 Learning: 2025-08-30T09:12:13.852Z
Learnt from: Sheraff
PR: TanStack/router#5051
File: packages/router-core/src/utils.ts:310-315
Timestamp: 2025-08-30T09:12:13.852Z
Learning: In TanStack Router's deepEqual utility, using for..in instead of Object.keys() in getObjectKeys() when ignoreUndefined=true is acceptable because it's called only after isPlainObject() checks, which ensure objects have standard Object prototype chains with no inherited enumerable properties.
Applied to files:
packages/solid-router/src/useRouterState.tsx
🧬 Code graph analysis (1)
packages/solid-router/src/useRouterState.tsx (2)
packages/router-core/src/router.ts (1)
state(1082-1084)packages/react-router/src/useRouterState.tsx (1)
UseRouterStateResult(26-29)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Test
🔇 Additional comments (2)
packages/solid-router/src/useRouterState.tsx (2)
1-1: LGTM: ESLint disable is justified.The type assertion on line 71 justifies this directive.
58-71: Theequaloption signature is compatible with solid-store 0.8.0 API.The implementation correctly uses the
equaloption with the expected(a, b) => booleansignature supported byuseStorein @tanstack/solid-store v0.8.0. The API accepts an options object where you can pass an equality function as{ equal?: (a, b) => boolean }, which matches howdeepEqualis passed in the code.
Comment on lines
+11
to
+35
| // Deep equality check to match behavior of solid-store 0.7.0's reconcile() | ||
| function deepEqual(a: any, b: any): boolean { | ||
| if (Object.is(a, b)) return true | ||
|
|
||
| if ( | ||
| typeof a !== 'object' || | ||
| a === null || | ||
| typeof b !== 'object' || | ||
| b === null | ||
| ) { | ||
| return false | ||
| } | ||
|
|
||
| const keysA = Object.keys(a) | ||
| const keysB = Object.keys(b) | ||
|
|
||
| if (keysA.length !== keysB.length) return false | ||
|
|
||
| for (const key of keysA) { | ||
| if (!Object.prototype.hasOwnProperty.call(b, key)) return false | ||
| if (!deepEqual(a[key], b[key])) return false | ||
| } | ||
|
|
||
| return true | ||
| } |
There was a problem hiding this comment.
Consider array handling, circular reference protection, and using an established library.
The deepEqual implementation has several considerations:
-
Array vs. object distinction: The function doesn't differentiate between arrays and plain objects. For example,
deepEqual([1, 2], {0: 1, 1: 2})would incorrectly returntrue. IfRouterStatecontains arrays, this could produce unexpected behavior. -
Circular reference protection: No cycle detection is implemented. While
RouterStateis unlikely to contain circular references, adding protection would prevent potential stack overflows. -
Library preference: Per the coding guidelines, prefer well-known libraries over custom implementations for common tasks like deep equality. Consider using a battle-tested library (e.g.,
fast-deep-equal, Lodash'sisEqual) instead of maintaining custom logic.
Apply this diff to add array handling:
function deepEqual(a: any, b: any): boolean {
if (Object.is(a, b)) return true
if (
typeof a !== 'object' ||
a === null ||
typeof b !== 'object' ||
b === null
) {
return false
}
+
+ // Handle arrays
+ const aIsArray = Array.isArray(a)
+ const bIsArray = Array.isArray(b)
+ if (aIsArray !== bIsArray) return false
+ if (aIsArray && bIsArray) {
+ if (a.length !== b.length) return false
+ for (let i = 0; i < a.length; i++) {
+ if (!deepEqual(a[i], b[i])) return false
+ }
+ return true
+ }
const keysA = Object.keys(a)
const keysB = Object.keys(b)Alternative (recommended): Use an established library
import { deepEqual } from 'fast-deep-equal'
// or
import { isEqual as deepEqual } from 'lodash-es'🤖 Prompt for AI Agents
In packages/solid-router/src/useRouterState.tsx around lines 11 to 35, the
custom deepEqual implementation fails to distinguish arrays from plain objects,
lacks circular-reference protection, and duplicates common functionality better
handled by a library; replace the custom function by importing a well-tested
deep equality implementation (e.g., import deepEqual from 'fast-deep-equal' or
import { isEqual as deepEqual } from 'lodash-es'), remove the local deepEqual
function, and update any references to use the imported function so arrays are
correctly compared and you get robust handling for edge cases without
maintaining custom logic.
birkskyum
force-pushed
the
chore(solid-router)--bump-solid-store-to-0.8
branch
from
51de201 to
0ae52f2
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit
Chores
Bug Fixes
Tests