How can I log G from a move? It logs a Proxy I can’t inspect.

[ilse-langnar]

I have a move called put_on_board but I don't have access to the G object, only to the ctx and card

Notes

I'm using it with Vue.js

console.log(G) screenshot

moves: {
  put_on_board: ( G, ctx, card ) => {
      console.log( G )
      console.log( ctx )
      console.log( card )
  }
}

[delucis]

Hi! This is because G gets turned into an Immer “draft” object inside moves to allow for easier updates (there are some details on the “Immutability” doc page), that’s why you see the Proxy, which will usually expire before you can inspect it in the console.

Basically, say you do G.score = 5 in your move. With a standard JavaScript object, that would mutate the score property directly on that object. Any other code that perhaps was trying to keep track of an older G state for example, would be liable to also get updated because both are holding a reference to a single G object. We use Immer to avoid this.

You have a couple of options:

1. Log out a part of G that is not an Object, e.g.

   console.log(G.score); // 5

2. Use Immer’s current helper to extract a normal JS object

   import { current } from 'immer';
   
   // in a move
   console.log(current(G)); // { score: 5 }

[jstacoder]

you could also just store G as json and then parse as json to get back the actual object ie:
console.log(JSON.parse(JSON.stringify(G)))