autoShapes array does not truncate when changed in the config

[jlambert23]

I am running into an issue where the autoShapes are not properly updating while using react-chessground. I tracked the problem to config.ts so decided to create the issue here. config.ts is what is being used as input from the props to rerender the chessboard.

From what I've found, the merge function only replaces the base's array elements with elements of the same index in the extend's array. If the extend's array is smaller, only those values will be copied over. If the extend's array is empty, then there are no changes made to the base array. In either case, it's only possible for the corresponding array in base to grow, never shrink (see TS playground demo).

It's also evident that this functionality has caused a hiccup before because there is some post-processing being performed for lastMove to handle this exact scenario.

I think this is an inherit problem with the merge algorithm, but I imagine changing it to replace arrays instead of merging them might cause some unexpected behavior. In which case, I suggest adding post-processing for autoShapes, similar to that of lastMove:

  if ('lastMove' in config && !config.lastMove) state.lastMove = undefined;
  // in case of ZH drop last move, there's a single square.
  // if the previous last move had two squares,
  // the merge algorithm will incorrectly keep the second square.
  else if (config.lastMove) state.lastMove = config.lastMove;

For reference, this has also been reported in react-chessground, however the issue seems to stem directly from the code in config.ts.