Skip to content

Commit 33db292

Browse files
committed
Fix accidental frozen obj
When using `useSetFragment`, the obj returned was frozen. This cause a javascript invariant violation which breaks the proxy leading to this error discovered on #173 ``` Uncaught TypeError: 'get' on proxy: property 'toggleForm' is a read-only and non-configurable data property on the proxy target but the proxy did not return its actual value (expected '#<Object>' but got '#<Object>') at Item (ItemsList.jsx:11:5) at Object.react_stack_bottom_frame (react-dom-client.development.js:23863:20) ... etc .. ``` The fix is to use a local instance of Immer and setting the auto freeze to false.
1 parent 76445fa commit 33db292

File tree

2 files changed

+9
-7
lines changed

2 files changed

+9
-7
lines changed

superglue/lib/hooks/useSetFragment.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
import { useDispatch, useSelector } from 'react-redux'
2-
import { produce } from 'immer'
2+
import { Immer } from 'immer'
33
import { saveFragment } from '../actions'
44
import { RootState, Fragment } from '../types'
55
import { Unproxy } from '../types'
66
import { FragmentProxy } from './useContent'
77

8+
const immer = new Immer()
9+
immer.setAutoFreeze(false)
10+
811
/**
912
* Utility type to extract the data type from a Fragment wrapper
1013
* @public
@@ -75,7 +78,7 @@ export function useSetFragment() {
7578
throw new Error(`Fragment with id "${fragmentId}" not found`)
7679
}
7780

78-
const updatedFragment = produce(currentFragment, updater)
81+
const updatedFragment = immer.produce(currentFragment, updater)
7982

8083
dispatch(
8184
saveFragment({

superglue/spec/lib/useSetFragment.spec.jsx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -51,13 +51,14 @@ describe('useSetFragment', () => {
5151
})
5252
})
5353

54-
// Verify the fragment was updated in the store
5554
const updatedState = store.getState()
5655
expect(updatedState.fragments['user_123']).toEqual({
5756
id: 123,
5857
name: 'Jane',
5958
email: 'john@example.com',
6059
})
60+
61+
expect(Object.isFrozen(updatedState.fragments['user_123'])).toBe(false)
6162
})
6263

6364
it('should update existing fragment with string reference', () => {
@@ -83,19 +84,19 @@ describe('useSetFragment', () => {
8384
const set = result.current
8485

8586
act(() => {
86-
// Using string directly instead of object
8787
set('user_123', (draft) => {
8888
draft.name = 'Jane'
8989
})
9090
})
9191

92-
// Verify the fragment was updated in the store
9392
const updatedState = store.getState()
9493
expect(updatedState.fragments['user_123']).toEqual({
9594
id: 123,
9695
name: 'Jane',
9796
email: 'john@example.com',
9897
})
98+
99+
expect(Object.isFrozen(updatedState.fragments['user_123'])).toBe(false)
99100
})
100101

101102
it('should handle nested object updates', () => {
@@ -184,7 +185,6 @@ describe('useSetFragment', () => {
184185
const set = result.current
185186

186187
act(() => {
187-
// Using string directly
188188
set('posts_collection', (draft) => {
189189
draft.push({ title: 'Post 3' })
190190
})
@@ -229,7 +229,6 @@ describe('useSetFragment', () => {
229229
set({ __id: 'user_123' }, (userDraft) => {
230230
userDraft.name = 'Jane'
231231

232-
// Nested set call
233232
set(userDraft.profile, (profileDraft) => {
234233
profileDraft.avatar = '/new.jpg'
235234
})

0 commit comments

Comments
 (0)