Merge pull request #84 from FormidableLabs/task/upgrade-webpack-babel…

…-react Upgrade webpack, Babel, and React. Add TypeScript support.
FormidableLabs · Nov 1, 2022 · 02f1060 · 02f1060
2 parents 56144df + 1a93a70
commit 02f1060
Show file tree

Hide file tree

Showing 16 changed files with 9,160 additions and 6,913 deletions.
diff --git a/.babelrc b/.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"]
   ]
 }
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,4 @@
+{
+  "tabWidth": 2,
+  "useTabs": false
+}
diff --git a/demo/game/character.js b/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,

diff --git a/demo/index.js b/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 />);
diff --git a/demo/slides/loop.js b/demo/slides/loop.js
@@ -2,6 +2,7 @@
 import React from 'react';
 import Slide from './slide';
 
+
 export default {
   slides: [
     <Slide>
@@ -13,7 +14,7 @@ export default {
     <Slide>
       <pre>
         <code className="language-javascript">
-          {require('raw-loader!../code-samples/raf.example')}
+          {require('raw-loader!../code-samples/raf.example').default}
         </code>
       </pre>
     </Slide>,
@@ -23,7 +24,7 @@ export default {
     <Slide>
       <pre>
         <code className="language-javascript">
-          {require('raw-loader!../code-samples/loop.example')}
+          {require('raw-loader!../code-samples/loop.example').default}
         </code>
       </pre>
     </Slide>,
@@ -33,7 +34,7 @@ export default {
     <Slide>
       <pre>
         <code className="language-javascript">
-          {require('raw-loader!../code-samples/loop-use.example')}
+          {require('raw-loader!../code-samples/loop-use.example').default}
         </code>
       </pre>
     </Slide>,

diff --git a/demo/slides/physics.js b/demo/slides/physics.js
@@ -11,7 +11,7 @@ export default {
     <Slide>
       <pre>
         <code className="language-javascript">
-          {require('raw-loader!../code-samples/physics-simple.example')}
+          {require('raw-loader!../code-samples/physics-simple.example').default}
         </code>
       </pre>
     </Slide>,
@@ -24,14 +24,14 @@ export default {
     <Slide>
       <pre>
         <code className="language-javascript">
-          {require('raw-loader!../code-samples/physics-world.example')}
+          {require('raw-loader!../code-samples/physics-world.example').default}
         </code>
       </pre>
     </Slide>,
     <Slide>
       <pre>
         <code className="language-javascript">
-          {require('raw-loader!../code-samples/physics-world-init.example')}
+          {require('raw-loader!../code-samples/physics-world-init.example').default}
         </code>
       </pre>
     </Slide>,
@@ -41,7 +41,7 @@ export default {
     <Slide>
       <pre>
         <code className="language-javascript">
-          {require('raw-loader!../code-samples/physics-update.example')}
+          {require('raw-loader!../code-samples/physics-update.example').default}
         </code>
       </pre>
     </Slide>,
@@ -51,14 +51,14 @@ export default {
     <Slide>
       <pre>
         <code className="language-javascript">
-          {require('raw-loader!../code-samples/physics-body.example')}
+          {require('raw-loader!../code-samples/physics-body.example').default}
         </code>
       </pre>
     </Slide>,
     <Slide>
       <pre>
         <code className="language-javascript">
-          {require('raw-loader!../code-samples/physics-body-update.example')}
+          {require('raw-loader!../code-samples/physics-body-update.example').default}
         </code>
       </pre>
     </Slide>,
@@ -71,21 +71,21 @@ export default {
     <Slide>
       <pre>
         <code className="language-javascript">
-          {require('raw-loader!../code-samples/physics-store.example')}
+          {require('raw-loader!../code-samples/physics-store.example').default}
         </code>
       </pre>
     </Slide>,
     <Slide>
       <pre>
         <code className="language-javascript">
-          {require('raw-loader!../code-samples/physics-mobx-update.example')}
+          {require('raw-loader!../code-samples/physics-mobx-update.example').default}
         </code>
       </pre>
     </Slide>,
     <Slide>
       <pre>
         <code className="language-javascript">
-          {require('raw-loader!../code-samples/physics-style.example')}
+          {require('raw-loader!../code-samples/physics-style.example').default}
         </code>
       </pre>
     </Slide>,

diff --git a/demo/slides/scaling.js b/demo/slides/scaling.js
@@ -23,7 +23,7 @@ export default {
     <Slide>
       <pre>
         <code className="language-javascript">
-          {require('raw-loader!../code-samples/stage.example')}
+          {require('raw-loader!../code-samples/stage.example').default}
         </code>
       </pre>
     </Slide>,
@@ -33,14 +33,14 @@ export default {
     <Slide>
       <pre>
         <code className="language-javascript">
-          {require('raw-loader!../code-samples/stage-size.example')}
+          {require('raw-loader!../code-samples/stage-size.example').default}
         </code>
       </pre>
     </Slide>,
     <Slide>
       <pre>
         <code className="language-javascript">
-          {require('raw-loader!../code-samples/stage-use.example')}
+          {require('raw-loader!../code-samples/stage-use.example').default}
         </code>
       </pre>
     </Slide>,
@@ -50,7 +50,7 @@ export default {
     <Slide>
       <pre>
         <code className="language-javascript">
-          {require('raw-loader!../code-samples/stage-blurry.example')}
+          {require('raw-loader!../code-samples/stage-blurry.example').default}
         </code>
       </pre>
     </Slide>,

diff --git a/demo/slides/sprites.js b/demo/slides/sprites.js
@@ -26,14 +26,14 @@ export default {
     <Slide>
       <pre>
         <code className="language-javascript">
-          {require('raw-loader!../code-samples/sprite-manual.example')}
+          {require('raw-loader!../code-samples/sprite-manual.example').default}
         </code>
       </pre>
     </Slide>,
     <Slide>
       <pre>
         <code className="language-javascript">
-          {require('raw-loader!../code-samples/sprite-style.example')}
+          {require('raw-loader!../code-samples/sprite-style.example').default}
         </code>
       </pre>
     </Slide>,
@@ -43,7 +43,7 @@ export default {
     <Slide>
       <pre>
         <code className="language-javascript">
-          {require('raw-loader!../code-samples/sprite.example')}
+          {require('raw-loader!../code-samples/sprite.example').default}
         </code>
       </pre>
     </Slide>,

diff --git a/demo/slides/tilemaps.js b/demo/slides/tilemaps.js
@@ -26,7 +26,7 @@ export default {
     <Slide>
       <pre>
         <code className="language-javascript">
-          {require('raw-loader!../code-samples/tilemap-map.example')}
+          {require('raw-loader!../code-samples/tilemap-map.example').default}
         </code>
       </pre>
     </Slide>,
@@ -36,14 +36,14 @@ export default {
     <Slide>
       <pre>
         <code className="language-javascript">
-          {require('raw-loader!../code-samples/tilemap-manual.example')}
+          {require('raw-loader!../code-samples/tilemap-manual.example').default}
         </code>
       </pre>
     </Slide>,
     <Slide>
       <pre>
         <code className="language-javascript">
-          {require('raw-loader!../code-samples/tilemap-render.example')}
+          {require('raw-loader!../code-samples/tilemap-render.example').default}
         </code>
       </pre>
     </Slide>,
@@ -53,14 +53,14 @@ export default {
     <Slide>
       <pre>
         <code className="language-javascript">
-          {require('raw-loader!../code-samples/tilemap.example')}
+          {require('raw-loader!../code-samples/tilemap.example').default}
         </code>
       </pre>
     </Slide>,
     <Slide>
       <pre>
         <code className="language-javascript">
-          {require('raw-loader!../code-samples/tilemap-buildings.example')}
+          {require('raw-loader!../code-samples/tilemap-buildings.example').default}
         </code>
       </pre>
     </Slide>,
@@ -70,7 +70,7 @@ export default {
     <Slide>
       <pre>
         <code className="language-javascript">
-          {require('raw-loader!../code-samples/tilemap-custom.example')}
+          {require('raw-loader!../code-samples/tilemap-custom.example').default}
         </code>
       </pre>
     </Slide>,

diff --git a/package.json b/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
 }