Use parse/stringify from flatted lib to support circular structures (fixes #222) (#240)

* use parse/stringify from flatted lib to support circular structures

* use the esm variant instead of cjs of flatted

* don't ignore flatted/esm when transforming

* need to use flatted/esm in test also

* fix

Author: Stefan-Hanke

package-lock.json

@@ -120,6 +120,7 @@
   "dependencies": {
     "@koa/cors": "^2.2.1",
     "firebase": "^5.0.4",
+    "flatted": "^0.2.3",
     "koa": "^2.3.0",
     "koa-body": "^2.5.0",
     "koa-router": "^7.2.1",
@@ -156,7 +157,7 @@
       "raf/polyfill"
     ],
     "transformIgnorePatterns": [
-      "node_modules/(?!(boardgame.io)/)"
+      "node_modules/(?!(boardgame.io|flatted)/)"
     ],
     "testPathIgnorePatterns": [
       "/examples/react-native/",

package.json

@@ -31,6 +31,7 @@ const globals = {
   'prop-types': 'PropTypes',
   mousetrap: 'Mousetrap',
   'socket.io-client': 'io',
+  flatted: 'Flatted',
 };
 
 export default [
@@ -77,13 +78,17 @@ export default [
 
   {
     input: 'packages/core.js',
+    external: Object.keys(globals),
+    globals,
     output: { file: 'dist/core.js', format: 'umd' },
     name: 'Core',
     plugins,
   },
 
   {
     input: 'packages/ai.js',
+    external: Object.keys(globals),
+    globals,
     output: { file: 'dist/ai.js', format: 'umd' },
     name: 'AI',
     plugins,

rollup.npm.js

@@ -16,6 +16,7 @@ import { PlayerInfo } from './playerinfo';
 import { DebugMove } from './debug-move';
 import { GameLog } from '../log/log';
 import { restore } from '../../core/action-creators';
+import { parse, stringify } from 'flatted';
 import './debug.css';
 
 /**
@@ -102,14 +103,14 @@ export class Debug extends React.Component {
   }
 
   saveState = () => {
-    const json = JSON.stringify(this.props.gamestate);
+    const json = stringify(this.props.gamestate);
     window.localStorage.setItem('gamestate', json);
   };
 
   restoreState = () => {
     const gamestateJSON = window.localStorage.getItem('gamestate');
     if (gamestateJSON !== null) {
-      const gamestate = JSON.parse(gamestateJSON);
+      const gamestate = parse(gamestateJSON);
       this.props.store.dispatch(restore(gamestate));
     }
   };
@@ -237,14 +238,14 @@ export class Debug extends React.Component {
               <section>
                 <pre className="json">
                   <strong>ctx</strong>:{' '}
-                  {JSON.stringify(this.props.gamestate.ctx, null, 2)}
+                  {stringify(this.props.gamestate.ctx, null, 2)}
                 </pre>
               </section>
 
               <section>
                 <pre className="json">
                   <strong>G</strong>:{' '}
-                  {JSON.stringify(this.props.gamestate.G, null, 2)}
+                  {stringify(this.props.gamestate.G, null, 2)}
                 </pre>
               </section>
             </span>

src/client/debug/debug.js

@@ -7,6 +7,7 @@
  */
 
 import React from 'react';
+import { stringify } from 'flatted';
 import { restore, makeMove, gameEvent } from '../../core/action-creators';
 import Game from '../../core/game';
 import { CreateGameReducer } from '../../core/reducer';
@@ -84,7 +85,7 @@ describe('save / restore', () => {
   });
 
   const restoredState = { restore: true };
-  let restoredJSON = JSON.stringify(restoredState);
+  let restoredJSON = stringify(restoredState);
   const setItem = jest.fn();
   const getItem = jest.fn(() => restoredJSON);
 

src/client/debug/debug.test.js

@@ -8,11 +8,12 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import { stringify } from 'flatted';
 
 const Item = props => (
   <div className="gameinfo-item">
     <strong>{props.name} </strong>
-    <div>{JSON.stringify(props.value)}</div>
+    <div>{stringify(props.value)}</div>
   </div>
 );
 

src/client/debug/gameinfo.js

@@ -6,6 +6,7 @@
  * https://opensource.org/licenses/MIT.
  */
 
+import { parse, stringify } from 'flatted';
 import * as Actions from './action-types';
 import { Random } from './random';
 import { Events } from './events';
@@ -72,7 +73,7 @@ export function CreateGameReducer({ game, numPlayers, multiplayer }) {
   initial.ctx = Random.detach(initial.ctx);
   initial.ctx = Events.detach(initial.ctx);
 
-  const deepCopy = obj => JSON.parse(JSON.stringify(obj));
+  const deepCopy = obj => parse(stringify(obj));
   initial._initial = deepCopy(initial);
 
   /**