Update react and babel (#916)

* Upgrade react to 16.6.3 and related packages

* update react and babel

* upgrade babel deps

* Mock out unityContent

* bump version

* update code for babel pollyfill update

game_frontend/.babelrc

@@ -1,5 +1,10 @@
 {
-  "presets": ["react-app"],
+  "presets": [
+    ["@babel/preset-env", {
+      "useBuiltIns": "entry"
+    }],
+    "@babel/preset-react"
+  ],
   "plugins": [
     ["module-resolver", {
       "cwd": "babelrc",
@@ -10,6 +15,6 @@
         "api": "./src/redux/api"
       }
     }],
-    "transform-class-properties"
+    "@babel/plugin-proposal-class-properties"
   ]
 }

game_frontend/package.json

@@ -8,39 +8,41 @@
   "license": "MIT",
   "private": false,
   "devDependencies": {
-    "babel-eslint": "^9.0.0",
-    "enzyme": "^3.3.0",
-    "enzyme-adapter-react-16": "^1.1.1",
-    "enzyme-to-json": "^3.3.4",
-    "jest": "^22.4.0",
-    "jest-styled-components": "^5.0.1",
-    "react-test-renderer": "^16.2.0",
-    "redux-mock-store": "^1.5.1",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-eslint": "^10.0.1",
+    "babel-jest": "^23.6.0",
+    "enzyme": "^3.7.0",
+    "enzyme-adapter-react-16": "^1.7.0",
+    "enzyme-to-json": "^3.3.5",
+    "jest": "^23.6.0",
+    "jest-styled-components": "^6.3.1",
+    "react-test-renderer": "^16.6.3",
+    "redux-mock-store": "^1.5.3",
     "standard": "^12.0.1"
   },
   "dependencies": {
+    "@babel/core": "^7.2.0",
+    "@babel/plugin-proposal-class-properties": "^7.2.1",
+    "@babel/polyfill": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/runtime": "^7.2.0",
     "@material-ui/core": "^1.0.0",
     "@material-ui/icons": "^2.0.1",
     "@material-ui/lab": "^1.0.0-alpha.9",
-    "babel-core": "^6.26.0",
     "babel-plugin-module-resolver": "^3.1.1",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-polyfill": "^6.26.0",
-    "babel-preset-react-app": "^3.1.1",
-    "babel-runtime": "^6.23.0",
-    "parcel-bundler": "^1.9.2",
-    "react": "^16.3.0",
+    "parcel-bundler": "^1.10.3",
+    "react": "^16.6.3",
     "react-ace": "^6.1.0",
-    "react-dom": "^16.3.0",
-    "react-redux": "^5.0.7",
+    "react-dom": "^16.6.3",
+    "react-redux": "^6.0.0",
     "react-unity-webgl": "^7.0.7",
-    "redux": "^4.0.0",
-    "redux-devtools-extension": "^2.13.2",
+    "redux": "^4.0.1",
+    "redux-devtools-extension": "^2.13.7",
     "redux-observable": "^1.0.0",
     "rxjs": "^6.2.2",
     "shelljs": "^0.8.1",
     "socket.io-client": "^2.1.1",
-    "styled-components": "^3.2.5",
+    "styled-components": "^3.4.10",
     "webfontloader": "^1.6.28"
   },
   "scripts": {

game_frontend/src/components/GameView/__snapshots__/index.test.js.snap

@@ -7,23 +7,42 @@ exports[`<GameView /> does not show the loading bar when unity has loaded 1`] =
     unityContent={
       UnityContent {
         "buildJsonPath": "/static/unity/Build/unity.json",
+        "constructor": [MockFunction],
+        "on": [MockFunction] {
+          "calls": Array [
+            Array [
+              "loaded",
+              [Function],
+            ],
+            Array [
+              "loaded",
+              [Function],
+            ],
+          ],
+          "results": Array [
+            Object {
+              "isThrow": false,
+              "value": undefined,
+            },
+            Object {
+              "isThrow": false,
+              "value": undefined,
+            },
+          ],
+        },
+        "send": [MockFunction],
+        "setComponentInstance": [MockFunction],
+        "setFullscreen": [MockFunction],
+        "setUnityInstance": [MockFunction],
+        "triggerUnityEvent": [MockFunction],
         "uniqueID": 1,
         "unityConfig": Object {
           "adjustOnWindowResize": true,
           "id": "nill",
           "modules": Object {},
           "unityVersion": 2,
         },
-        "unityEvents": Array [
-          Object {
-            "eventCallback": [Function],
-            "eventName": "loaded",
-          },
-          Object {
-            "eventCallback": [Function],
-            "eventName": "loaded",
-          },
-        ],
+        "unityEvents": Array [],
         "unityLoaderJsPath": "/static/unity/Build/UnityLoader.js",
       }
     }
@@ -42,19 +61,34 @@ exports[`<GameView /> shows loading bar whilst unity is loading 1`] = `
     unityContent={
       UnityContent {
         "buildJsonPath": "/static/unity/Build/unity.json",
+        "constructor": [MockFunction],
+        "on": [MockFunction] {
+          "calls": Array [
+            Array [
+              "loaded",
+              [Function],
+            ],
+          ],
+          "results": Array [
+            Object {
+              "isThrow": false,
+              "value": undefined,
+            },
+          ],
+        },
+        "send": [MockFunction],
+        "setComponentInstance": [MockFunction],
+        "setFullscreen": [MockFunction],
+        "setUnityInstance": [MockFunction],
+        "triggerUnityEvent": [MockFunction],
         "uniqueID": 1,
         "unityConfig": Object {
           "adjustOnWindowResize": true,
           "id": "nill",
           "modules": Object {},
           "unityVersion": 2,
         },
-        "unityEvents": Array [
-          Object {
-            "eventCallback": [Function],
-            "eventName": "loaded",
-          },
-        ],
+        "unityEvents": Array [],
         "unityLoaderJsPath": "/static/unity/Build/UnityLoader.js",
       }
     }

game_frontend/src/components/GameView/index.test.js

@@ -2,6 +2,8 @@
 import React from 'react'
 import GameView, { GameViewLayout } from 'components/GameView'
 import { shallow } from 'enzyme/build/index'
+import { unityContent } from 'api/unity'
+jest.mock('api/unity')
 
 describe('<GameView />', () => {
   it('shows loading bar whilst unity is loading', () => {

game_frontend/src/index.js

@@ -1,4 +1,4 @@
-import 'babel-polyfill'
+import '@babel/polyfill'
 import React from 'react'
 import { render } from 'react-dom'