Skip to content
This repository was archived by the owner on Feb 7, 2024. It is now read-only.

Commit 02f1060

Browse files
carloskelly13carloskelly13
authored
Merge pull request #84 from FormidableLabs/task/upgrade-webpack-babel-react
Upgrade webpack, Babel, and React. Add TypeScript support.
2 parents 56144df + 1a93a70 commit 02f1060

16 files changed

+9160
-6913
lines changed

‎.babelrc

+6-5
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
{
22
"presets": [
3-
"es2015",
4-
"react",
5-
"stage-0"
3+
"@babel/preset-typescript",
4+
["@babel/preset-env", { "modules": false }],
5+
["@babel/preset-react", { "runtime": "automatic" }]
66
],
77
"plugins": [
8-
"transform-flow-strip-types",
9-
"transform-decorators-legacy"
8+
"@babel/plugin-transform-flow-strip-types",
9+
["@babel/plugin-proposal-decorators", { "version": "legacy" }],
10+
["@babel/plugin-proposal-class-properties"]
1011
]
1112
}

‎.prettierrc

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"tabWidth": 2,
3+
"useTabs": false
4+
}

‎demo/game/character.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,7 @@ import Matter from 'matter-js';
55

66
import { AudioPlayer, Body, Sprite } from '../../src';
77

8-
@observer
9-
export default class Character extends Component {
8+
export default @observer class Character extends Component {
109
static propTypes = {
1110
keys: PropTypes.object,
1211
onEnterBuilding: PropTypes.func,

‎demo/index.js

+3-20
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,6 @@
11
import React from 'react';
2-
import ReactDOM from 'react-dom';
2+
import ReactDOM from 'react-dom/client';
33
import Presentation from './presentation';
4-
import { AppContainer } from 'react-hot-loader';
54

6-
ReactDOM.render(
7-
<AppContainer>
8-
<Presentation />
9-
</AppContainer>,
10-
document.getElementById('root')
11-
);
12-
13-
if (process.env.NODE_ENV !== 'production') {
14-
module.hot.accept('./presentation', () => {
15-
const NextPresentation = require('./presentation').default;
16-
ReactDOM.render(
17-
<AppContainer>
18-
<NextPresentation />
19-
</AppContainer>,
20-
document.getElementById('root')
21-
);
22-
});
23-
}
5+
const root = ReactDOM.createRoot(document.getElementById('root'));
6+
root.render(<Presentation />);

‎demo/slides/loop.js

+4-3
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import React from 'react';
33
import Slide from './slide';
44

5+
56
export default {
67
slides: [
78
<Slide>
@@ -13,7 +14,7 @@ export default {
1314
<Slide>
1415
<pre>
1516
<code className="language-javascript">
16-
{require('raw-loader!../code-samples/raf.example')}
17+
{require('raw-loader!../code-samples/raf.example').default}
1718
</code>
1819
</pre>
1920
</Slide>,
@@ -23,7 +24,7 @@ export default {
2324
<Slide>
2425
<pre>
2526
<code className="language-javascript">
26-
{require('raw-loader!../code-samples/loop.example')}
27+
{require('raw-loader!../code-samples/loop.example').default}
2728
</code>
2829
</pre>
2930
</Slide>,
@@ -33,7 +34,7 @@ export default {
3334
<Slide>
3435
<pre>
3536
<code className="language-javascript">
36-
{require('raw-loader!../code-samples/loop-use.example')}
37+
{require('raw-loader!../code-samples/loop-use.example').default}
3738
</code>
3839
</pre>
3940
</Slide>,

‎demo/slides/physics.js

+9-9
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export default {
1111
<Slide>
1212
<pre>
1313
<code className="language-javascript">
14-
{require('raw-loader!../code-samples/physics-simple.example')}
14+
{require('raw-loader!../code-samples/physics-simple.example').default}
1515
</code>
1616
</pre>
1717
</Slide>,
@@ -24,14 +24,14 @@ export default {
2424
<Slide>
2525
<pre>
2626
<code className="language-javascript">
27-
{require('raw-loader!../code-samples/physics-world.example')}
27+
{require('raw-loader!../code-samples/physics-world.example').default}
2828
</code>
2929
</pre>
3030
</Slide>,
3131
<Slide>
3232
<pre>
3333
<code className="language-javascript">
34-
{require('raw-loader!../code-samples/physics-world-init.example')}
34+
{require('raw-loader!../code-samples/physics-world-init.example').default}
3535
</code>
3636
</pre>
3737
</Slide>,
@@ -41,7 +41,7 @@ export default {
4141
<Slide>
4242
<pre>
4343
<code className="language-javascript">
44-
{require('raw-loader!../code-samples/physics-update.example')}
44+
{require('raw-loader!../code-samples/physics-update.example').default}
4545
</code>
4646
</pre>
4747
</Slide>,
@@ -51,14 +51,14 @@ export default {
5151
<Slide>
5252
<pre>
5353
<code className="language-javascript">
54-
{require('raw-loader!../code-samples/physics-body.example')}
54+
{require('raw-loader!../code-samples/physics-body.example').default}
5555
</code>
5656
</pre>
5757
</Slide>,
5858
<Slide>
5959
<pre>
6060
<code className="language-javascript">
61-
{require('raw-loader!../code-samples/physics-body-update.example')}
61+
{require('raw-loader!../code-samples/physics-body-update.example').default}
6262
</code>
6363
</pre>
6464
</Slide>,
@@ -71,21 +71,21 @@ export default {
7171
<Slide>
7272
<pre>
7373
<code className="language-javascript">
74-
{require('raw-loader!../code-samples/physics-store.example')}
74+
{require('raw-loader!../code-samples/physics-store.example').default}
7575
</code>
7676
</pre>
7777
</Slide>,
7878
<Slide>
7979
<pre>
8080
<code className="language-javascript">
81-
{require('raw-loader!../code-samples/physics-mobx-update.example')}
81+
{require('raw-loader!../code-samples/physics-mobx-update.example').default}
8282
</code>
8383
</pre>
8484
</Slide>,
8585
<Slide>
8686
<pre>
8787
<code className="language-javascript">
88-
{require('raw-loader!../code-samples/physics-style.example')}
88+
{require('raw-loader!../code-samples/physics-style.example').default}
8989
</code>
9090
</pre>
9191
</Slide>,

‎demo/slides/scaling.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export default {
2323
<Slide>
2424
<pre>
2525
<code className="language-javascript">
26-
{require('raw-loader!../code-samples/stage.example')}
26+
{require('raw-loader!../code-samples/stage.example').default}
2727
</code>
2828
</pre>
2929
</Slide>,
@@ -33,14 +33,14 @@ export default {
3333
<Slide>
3434
<pre>
3535
<code className="language-javascript">
36-
{require('raw-loader!../code-samples/stage-size.example')}
36+
{require('raw-loader!../code-samples/stage-size.example').default}
3737
</code>
3838
</pre>
3939
</Slide>,
4040
<Slide>
4141
<pre>
4242
<code className="language-javascript">
43-
{require('raw-loader!../code-samples/stage-use.example')}
43+
{require('raw-loader!../code-samples/stage-use.example').default}
4444
</code>
4545
</pre>
4646
</Slide>,
@@ -50,7 +50,7 @@ export default {
5050
<Slide>
5151
<pre>
5252
<code className="language-javascript">
53-
{require('raw-loader!../code-samples/stage-blurry.example')}
53+
{require('raw-loader!../code-samples/stage-blurry.example').default}
5454
</code>
5555
</pre>
5656
</Slide>,

‎demo/slides/sprites.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -26,14 +26,14 @@ export default {
2626
<Slide>
2727
<pre>
2828
<code className="language-javascript">
29-
{require('raw-loader!../code-samples/sprite-manual.example')}
29+
{require('raw-loader!../code-samples/sprite-manual.example').default}
3030
</code>
3131
</pre>
3232
</Slide>,
3333
<Slide>
3434
<pre>
3535
<code className="language-javascript">
36-
{require('raw-loader!../code-samples/sprite-style.example')}
36+
{require('raw-loader!../code-samples/sprite-style.example').default}
3737
</code>
3838
</pre>
3939
</Slide>,
@@ -43,7 +43,7 @@ export default {
4343
<Slide>
4444
<pre>
4545
<code className="language-javascript">
46-
{require('raw-loader!../code-samples/sprite.example')}
46+
{require('raw-loader!../code-samples/sprite.example').default}
4747
</code>
4848
</pre>
4949
</Slide>,

‎demo/slides/tilemaps.js

+6-6
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export default {
2626
<Slide>
2727
<pre>
2828
<code className="language-javascript">
29-
{require('raw-loader!../code-samples/tilemap-map.example')}
29+
{require('raw-loader!../code-samples/tilemap-map.example').default}
3030
</code>
3131
</pre>
3232
</Slide>,
@@ -36,14 +36,14 @@ export default {
3636
<Slide>
3737
<pre>
3838
<code className="language-javascript">
39-
{require('raw-loader!../code-samples/tilemap-manual.example')}
39+
{require('raw-loader!../code-samples/tilemap-manual.example').default}
4040
</code>
4141
</pre>
4242
</Slide>,
4343
<Slide>
4444
<pre>
4545
<code className="language-javascript">
46-
{require('raw-loader!../code-samples/tilemap-render.example')}
46+
{require('raw-loader!../code-samples/tilemap-render.example').default}
4747
</code>
4848
</pre>
4949
</Slide>,
@@ -53,14 +53,14 @@ export default {
5353
<Slide>
5454
<pre>
5555
<code className="language-javascript">
56-
{require('raw-loader!../code-samples/tilemap.example')}
56+
{require('raw-loader!../code-samples/tilemap.example').default}
5757
</code>
5858
</pre>
5959
</Slide>,
6060
<Slide>
6161
<pre>
6262
<code className="language-javascript">
63-
{require('raw-loader!../code-samples/tilemap-buildings.example')}
63+
{require('raw-loader!../code-samples/tilemap-buildings.example').default}
6464
</code>
6565
</pre>
6666
</Slide>,
@@ -70,7 +70,7 @@ export default {
7070
<Slide>
7171
<pre>
7272
<code className="language-javascript">
73-
{require('raw-loader!../code-samples/tilemap-custom.example')}
73+
{require('raw-loader!../code-samples/tilemap-custom.example').default}
7474
</code>
7575
</pre>
7676
</Slide>,

‎package.json

+32-28
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-game-kit",
3-
"version": "1.0.6",
3+
"version": "2.0.0-alpha.1",
44
"description": "Make games with react",
55
"main": "lib",
66
"files": [
@@ -9,8 +9,8 @@
99
"umd"
1010
],
1111
"scripts": {
12-
"start": "webpack-dev-server --hot --inline --port 3000 --config webpack.config.dev.js --content-base demo/",
13-
"build": "babel src -d lib --copy-files",
12+
"start": "webpack-dev-server --config webpack.config.dev.js",
13+
"build": "babel src -d lib --copy-files --extensions \".ts,.tsx,.js,.jsx\"",
1414
"clean": "rimraf dist",
1515
"clean-build": "rimraf lib",
1616
"clean-umd": "rimraf umd",
@@ -19,9 +19,8 @@
1919
"dist": "npm run clean && webpack && npm run copy-assets && npm run copy-html-css",
2020
"lint": "eslint src demo *.js",
2121
"lint-fix": "eslint src demo *.js --fix",
22-
"umd": "webpack --config webpack.config.umd.js",
2322
"preversion": "npm run lint",
24-
"version": "npm run clean-build && npm run build && npm run clean-umd && npm run umd"
23+
"version": "npm run clean-build && npm run build"
2524
},
2625
"author": "Ken Wheeler",
2726
"license": "MIT",
@@ -30,36 +29,41 @@
3029
"matter-js": "^0.14.0"
3130
},
3231
"devDependencies": {
33-
"babel-cli": "^6.10.1",
34-
"babel-core": "^6.10.4",
35-
"babel-eslint": "^8.0.1",
36-
"babel-loader": "^7.1.2",
37-
"babel-plugin-transform-decorators-legacy": "^1.3.4",
38-
"babel-plugin-transform-flow-strip-types": "^6.14.0",
39-
"babel-preset-es2015": "^6.9.0",
40-
"babel-preset-react": "^6.11.1",
41-
"babel-preset-stage-0": "^6.5.0",
42-
"css-loader": "^0.28.7",
43-
"eslint": "^4.8.0",
44-
"eslint-config-formidable": "^3.0.0",
45-
"eslint-plugin-filenames": "^1.1.0",
46-
"eslint-plugin-import": "^2.7.0",
47-
"eslint-plugin-jsx-a11y": "^6.0.2",
48-
"eslint-plugin-react": "^7.4.0",
49-
"json-loader": "^0.5.4",
32+
"@babel/cli": "^7.19.3",
33+
"@babel/core": "^7.19.6",
34+
"@babel/plugin-proposal-class-properties": "^7.18.6",
35+
"@babel/plugin-proposal-decorators": "^7.20.0",
36+
"@babel/plugin-transform-flow-strip-types": "^7.19.0",
37+
"@babel/preset-env": "^7.19.4",
38+
"@babel/preset-react": "^7.18.6",
39+
"@babel/preset-typescript": "^7.18.6",
40+
"babel-eslint": "^10.1.0",
41+
"babel-loader": "^9.0.1",
42+
"babel-plugin-transform-decorators-legacy": "^1.3.5",
43+
"babel-plugin-transform-flow-strip-types": "^6.22.0",
44+
"css-loader": "^6.7.1",
45+
"csstype": "^3.1.1",
46+
"eslint": "^8.26.0",
47+
"eslint-config-formidable": "^4.0.0",
48+
"eslint-plugin-filenames": "^1.3.2",
49+
"eslint-plugin-import": "^2.26.0",
50+
"eslint-plugin-jsx-a11y": "^6.6.1",
51+
"eslint-plugin-react": "^7.31.10",
52+
"json-loader": "^0.5.7",
5053
"mobx": "^3.3.0",
5154
"mobx-react": "^4.3.3",
5255
"postcss-loader": "^2.0.6",
5356
"prop-types": "^15.5.10",
54-
"raw-loader": "^0.5.1",
55-
"react": "16.0.0",
56-
"react-dom": "16.0.0",
57-
"react-hot-loader": "^3.1.3",
57+
"raw-loader": "^4.0.2",
58+
"react": "18.2.0",
59+
"react-dom": "18.2.0",
60+
"react-hot-loader": "^4.13.0",
5861
"react-native": "0.50.4",
5962
"rimraf": "^2.5.4",
6063
"style-loader": "^0.19.0",
61-
"webpack": "^3.6.0",
62-
"webpack-dev-server": "^2.9.1"
64+
"webpack": "^5.74.0",
65+
"webpack-cli": "^4.10.0",
66+
"webpack-dev-server": "^4.11.1"
6367
},
6468
"sideEffects": false
6569
}

0 commit comments

Comments
 (0)