Update version of the packages to 1.2.3 (core) and 1.2.2 (react)

.eslintrc.json

@@ -0,0 +1,16 @@
+{
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  },
+  "extends": [
+    "plugin:@stencil/recommended"
+  ],
+  "rules": {
+    "@stencil/strict-mutable": "off"
+  },
+  "settings": {
+    "react": {
+      "version": "16.7"
+    }
+  }
+}

README.md

@@ -38,7 +38,7 @@ Looking for [Phaser Framework CE (Community Edition)](https://github.com/photons
 
 ### Script tag
 
-- Put a script tag similar to this `<script src='https://unpkg.com/@ion-phaser/[email protected].2/dist/ionphaser.js'></script>` in the head of your index.html
+- Put a script tag similar to this `<script src='https://unpkg.com/@ion-phaser/[email protected].3/dist/ionphaser.js'></script>` in the head of your index.html
 - Then you can use the element anywhere in your template, JSX, html etc
 
 ### Node Modules

demo-react/package.json

@@ -4,10 +4,15 @@
   "private": true,
   "dependencies": {
     "@ion-phaser/react": "file:../react",
-    "phaser": "^3.19.0",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
-    "react-scripts": "3.1.1"
+    "@types/jest": "^25.2.1",
+    "@types/node": "^13.13.4",
+    "@types/react": "^16.9.34",
+    "@types/react-dom": "^16.9.7",
+    "phaser": "^3.23.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-scripts": "3.4.1",
+    "typescript": "^3.8.3"
   },
   "scripts": {
     "start": "react-scripts start",

demo-react/src/App.tsx

@@ -0,0 +1,86 @@
+/**
+ * @flow
+ */
+
+import React, { useState } from 'react'
+import Phaser, {  } from 'phaser'
+import { IonPhaser } from '@ion-phaser/react'
+import logo from './assets/logo.png'
+
+import './App.css'
+
+class MainScene extends Phaser.Scene {
+  private helloWorld: Phaser.GameObjects.Text
+
+  init () {
+    this.cameras.main.setBackgroundColor('#24252A')
+  }
+
+  create () {
+    this.helloWorld = this.add.text(
+      this.cameras.main.centerX, 
+      this.cameras.main.centerY, 
+      "Hello World", { 
+        font: "40px Arial", 
+        fill: "#ffffff" 
+      }
+    );
+    this.helloWorld.setOrigin(0.5);
+  }
+  update () {
+    this.helloWorld.angle += 1;
+  }
+}
+
+const game: Phaser.Types.Core.GameConfig = {
+  width: "100%",
+  height: "100%",
+  type: Phaser.AUTO,
+  scale: {
+    mode: Phaser.Scale.FIT,
+    autoCenter: Phaser.Scale.CENTER_BOTH,
+    width: '100%',
+    height: '100%'
+  },
+  render: {
+    antialias: false,
+    pixelArt: true,
+    roundPixels: true
+  },
+  physics: {
+    default: 'arcade',
+    arcade: {
+      gravity: { y: 400 },
+      debug: true
+    }
+  },
+  scene: MainScene
+};
+
+const destroy = () => window.location.reload()
+
+export default function App () {
+  const [initialize, setInitialize] = useState(false)
+
+  return (
+    <div className="App">
+      <header className="App-header">
+        { initialize ? (
+          <>
+            <IonPhaser game={game} initialize={initialize} />
+            <div onClick={destroy} className="flex destroyButton">
+              <a href="#1" className="bttn">Destroy</a>
+            </div>
+          </>
+        ) : (
+          <>
+            <img src={logo} className="App-logo" alt="logo" />
+            <div onClick={() => setInitialize(true)} className="flex">
+              <a href="#1" className="bttn">Initialize</a>
+            </div>
+          </>
+        )}
+      </header>
+    </div>
+  );
+}

demo-react/src/index.js → demo-react/src/index.tsx

@@ -9,4 +9,4 @@ ReactDOM.render(<App />, document.getElementById('root'));
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
+serviceWorker.unregister();

demo-react/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

demo-react/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react"
+  },
+  "include": [
+    "src"
+  ]
+}