Drawable OnChange + Immer.js | Object is not extensible

[chrislicodes]

Hey - first of all: This library is so fun to work with, thank you for sharing everything related to LiChess @ornicar & the other contributors! 🔥

For Context: I am working on an Obsidian Plugin: https://github.com/chrislicodes/obsidian-chess-study
This Plugin is running on React and wraps Chessground in React logic.

The plain setup on trunk works as expected. Now I wanted to support move variants and for that, it was time to refactor the local game state management - so I am now using Immer.js + Reducer to track the GameState. However, when I want to sync the Drawables here: Link to repo

I would expect the onChange of "drawable" to simply call the passed action and thats it. This also works for the first Shape that I draw, but as soon as I try to add a second shape, the following error is thrown:

I tried to debug this, copy the inputs into a fresh new array and co., but it seems like Immer.js stuff is somehow leaking into draw.ts, or in other words: I would expect that the onChange is executed and simply passes the shapes to the function, but something inside api.set({}) must then take this over.

I've created a minimal CodeSandbox example here: https://codesandbox.io/p/sandbox/minimal-chessground-example-jnb4zy

Is this a bug in chessground, or did I miss something about how api.set works? 🤔

I can turn autoFreeze off for now, but I don't understand how this can affect chessground internals.

Ah! There is no copy of the Shape array if set, so if the passed array is frozen then the code will break. I guess this is so specific that its not worth to always copy it internally. I will just make sure to pass an "unfrozen" array. 😅