Enabling server-side-rendering for boardgame.io (fixes boardgameio#22) (

boardgameio#140)

* Removing react-json-view dependency to allow SSR

* Disabling socket io connection for ssr

* Creating test for Server side rendering

* update package-lock.json

* replace quotes with <strong>

package.json

@@ -118,7 +118,6 @@
     "mongodb": "^3.0.3",
     "mousetrap": "^1.6.1",
     "prop-types": "^15.5.10",
-    "react-json-view": "^1.13.0",
     "redux": "^3.7.2",
     "socket.io": "^2.0.3"
   },

src/client/debug/debug.js

@@ -7,7 +7,6 @@
  */
 
 import React from 'react';
-import ReactJson from 'react-json-view';
 import PropTypes from 'prop-types';
 import Mousetrap from 'mousetrap';
 import { GameLog } from '../log/log';
@@ -424,21 +423,17 @@ export class Debug extends React.Component {
             <h3>state</h3>
 
             <section>
-              <ReactJson
-                src={this.props.gamestate.G}
-                name="G"
-                enableClipboard={false}
-                displayDataTypes={false}
-              />
+              <pre>
+                <strong>G</strong>:{' '}
+                {JSON.stringify(this.props.gamestate.G, null, 2)}
+              </pre>
             </section>
 
             <section>
-              <ReactJson
-                src={this.props.gamestate.ctx}
-                name="ctx"
-                enableClipboard={false}
-                displayDataTypes={false}
-              />
+              <pre>
+                <strong>ctx</strong>:{' '}
+                {JSON.stringify(this.props.gamestate.ctx, null, 2)}
+              </pre>
             </section>
           </span>
         )}

src/client/react.js

@@ -80,7 +80,9 @@ export function Client({ game, numPlayers, board, multiplayer, debug }) {
     }
 
     componentWillMount() {
-      this.client.connect();
+      if (typeof window !== 'undefined') {
+        this.client.connect();
+      }
     }
 
     render() {

src/client/react.ssr.test.js

@@ -0,0 +1,24 @@
+/**
+ * @jest-environment node
+ */
+
+import React from 'react';
+import { Client } from './react';
+import Game from '../core/game';
+import ReactDOMServer from 'react-dom/server';
+
+class TestBoard extends React.Component {
+  render() {
+    return <div id="board">Board</div>;
+  }
+}
+
+test('board is rendered - ssr', () => {
+  const Board = Client({
+    game: Game({}),
+    board: TestBoard,
+    multiplayer: true,
+  });
+  let ssrRender = ReactDOMServer.renderToString(<Board />);
+  expect(ssrRender).toContain('debug-ui');
+});