Upgrade webpack, Babel, and React. Add TypeScript support.

Author: carloskelly13

.babelrc

@@ -1,11 +1,12 @@
 {
   "presets": [
-    "es2015",
-    "react",
-    "stage-0"
+    "@babel/preset-typescript",
+    ["@babel/preset-env", { "modules": false }],
+    ["@babel/preset-react", { "runtime": "automatic" }]
   ],
   "plugins": [
-    "transform-flow-strip-types",
-    "transform-decorators-legacy"
+    "@babel/plugin-transform-flow-strip-types",
+    ["@babel/plugin-proposal-decorators", { "version": "legacy" }],
+    ["@babel/plugin-proposal-class-properties"]
   ]
 }

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "tabWidth": 2,
+  "useTabs": false
+}

demo/game/character.js

@@ -5,8 +5,7 @@ import Matter from 'matter-js';
 
 import { AudioPlayer, Body, Sprite } from '../../src';
 
-@observer
-export default class Character extends Component {
+export default @observer class Character extends Component {
   static propTypes = {
     keys: PropTypes.object,
     onEnterBuilding: PropTypes.func,

demo/index.js

@@ -1,23 +1,6 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import Presentation from './presentation';
-import { AppContainer } from 'react-hot-loader';
 
-ReactDOM.render(
-  <AppContainer>
-    <Presentation />
-  </AppContainer>,
-  document.getElementById('root')
-);
-
-if (process.env.NODE_ENV !== 'production') {
-  module.hot.accept('./presentation', () => {
-    const NextPresentation = require('./presentation').default;
-    ReactDOM.render(
-      <AppContainer>
-        <NextPresentation />
-      </AppContainer>,
-      document.getElementById('root')
-    );
-  });
-}
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<Presentation />);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-game-kit",
-  "version": "1.0.6",
+  "version": "2.0.0-alpha.1",
   "description": "Make games with react",
   "main": "lib",
   "files": [
@@ -9,8 +9,8 @@
     "umd"
   ],
   "scripts": {
-    "start": "webpack-dev-server --hot --inline --port 3000 --config webpack.config.dev.js --content-base demo/",
-    "build": "babel src -d lib --copy-files",
+    "start": "webpack-dev-server --config webpack.config.dev.js",
+    "build": "babel src -d lib --copy-files --extensions \".ts,.tsx,.js,.jsx\"",
     "clean": "rimraf dist",
     "clean-build": "rimraf lib",
     "clean-umd": "rimraf umd",
@@ -19,9 +19,8 @@
     "dist": "npm run clean && webpack && npm run copy-assets && npm run copy-html-css",
     "lint": "eslint src demo *.js",
     "lint-fix": "eslint src demo *.js --fix",
-    "umd": "webpack --config webpack.config.umd.js",
     "preversion": "npm run lint",
-    "version": "npm run clean-build && npm run build && npm run clean-umd && npm run umd"
+    "version": "npm run clean-build && npm run build"
   },
   "author": "Ken Wheeler",
   "license": "MIT",
@@ -30,36 +29,41 @@
     "matter-js": "^0.14.0"
   },
   "devDependencies": {
-    "babel-cli": "^6.10.1",
-    "babel-core": "^6.10.4",
-    "babel-eslint": "^8.0.1",
-    "babel-loader": "^7.1.2",
-    "babel-plugin-transform-decorators-legacy": "^1.3.4",
-    "babel-plugin-transform-flow-strip-types": "^6.14.0",
-    "babel-preset-es2015": "^6.9.0",
-    "babel-preset-react": "^6.11.1",
-    "babel-preset-stage-0": "^6.5.0",
-    "css-loader": "^0.28.7",
-    "eslint": "^4.8.0",
-    "eslint-config-formidable": "^3.0.0",
-    "eslint-plugin-filenames": "^1.1.0",
-    "eslint-plugin-import": "^2.7.0",
-    "eslint-plugin-jsx-a11y": "^6.0.2",
-    "eslint-plugin-react": "^7.4.0",
-    "json-loader": "^0.5.4",
+    "@babel/cli": "^7.19.3",
+    "@babel/core": "^7.19.6",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-decorators": "^7.20.0",
+    "@babel/plugin-transform-flow-strip-types": "^7.19.0",
+    "@babel/preset-env": "^7.19.4",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "^9.0.1",
+    "babel-plugin-transform-decorators-legacy": "^1.3.5",
+    "babel-plugin-transform-flow-strip-types": "^6.22.0",
+    "css-loader": "^6.7.1",
+    "csstype": "^3.1.1",
+    "eslint": "^8.26.0",
+    "eslint-config-formidable": "^4.0.0",
+    "eslint-plugin-filenames": "^1.3.2",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-react": "^7.31.10",
+    "json-loader": "^0.5.7",
     "mobx": "^3.3.0",
     "mobx-react": "^4.3.3",
     "postcss-loader": "^2.0.6",
     "prop-types": "^15.5.10",
-    "raw-loader": "^0.5.1",
-    "react": "16.0.0",
-    "react-dom": "16.0.0",
-    "react-hot-loader": "^3.1.3",
+    "raw-loader": "^4.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-hot-loader": "^4.13.0",
     "react-native": "0.50.4",
     "rimraf": "^2.5.4",
     "style-loader": "^0.19.0",
-    "webpack": "^3.6.0",
-    "webpack-dev-server": "^2.9.1"
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.11.1"
   },
   "sideEffects": false
 }