Merge pull request #62 from mattes3/master

Makes it work regardless of exact React version

Author: Jeffrey Lanters

.gitignore

@@ -12,4 +12,7 @@ logs
 *.js
 #.ts
 
+dist/
+*.tgz
+
 #.github

README.md

@@ -53,3 +53,21 @@ export class App extends React.Component {
   }
 }
 ```
+
+# Development and test cycle
+
+If you want to modify this package and iteratively test it in inside your application, use the following steps while you're inside the directory of your own application:
+
+```sh
+cd ../react-unity-webgl/
+npm pack
+cd ../yourapp
+npm remove react-unity-webgl
+npm install ../react-unity-webgl/react-unity-webgl-x.y.z.tgz
+```
+
+The "npm pack" command creates a .tgz file exactly the way it would if you were going to publish the package to npm. You can use that .tgz file to install it in your app. That way you can be sure that everything works exactly as it will do when you publish the package, later.
+
+Do not use a symlink-based technique (e.g. with the "npm link" command) because [npm link breaks libraries that are based on React](https://dev.to/vcarl/testing-npm-packages-before-publishing-h7o).
+
+This package here _must not_ have a dependency on React, only a dev dependency on @types/react. Otherwise, the users of this package might install two different versions of React which will lead to problems.

package.json

@@ -2,7 +2,7 @@
   "name": "react-unity-webgl",
   "version": "7.1.0",
   "description": "React Unity WebGL provides an easy solution for embedding Unity WebGL builds in your React application, with two-way communication between your React and Unity application with advanced API's.",
-  "main": "source/Export.js",
+  "main": "./dist/Exports.js",
   "scripts": {
     "start": "tsc --watch",
     "compile": "tsc",
@@ -23,10 +23,8 @@
     "url": "https://github.com/elraccoone/react-unity-webgl/issues"
   },
   "homepage": "https://github.com/elraccoone/react-unity-webgl/wiki",
-  "dependencies": {
-    "react": "16.4.1"
-  },
   "devDependencies": {
-    "@types/react": "16.4.1"
+    "@types/react": "16.4.1",
+    "typescript": "^3.4.5"
   }
 }

source/components/Unity.ts

@@ -4,8 +4,8 @@ import IUnityState from "../interfaces/IUnityState";
 import UnityContent from "../UnityContent";
 import UnityLoaderService from "../services/UnityLoaderService";
 import "../declarations/UnityLoader";
-import "./declarations/UnityInstance";
-import "./declarations/ReactUnityWebgl";
+import "../declarations/UnityInstance";
+import "../declarations/ReactUnityWebgl";
 
 export default class Unity extends React.Component<IUnityProps, IUnityState> {
   /**
@@ -136,7 +136,7 @@ export default class Unity extends React.Component<IUnityProps, IUnityState> {
   public render(): React.ReactNode {
     return React.createElement("div", {
       className: this.props.className || "",
-      ref: ref => (this.htmlElement = ref!),
+      ref: (ref: any) => (this.htmlElement = ref!),
       id: `__ReactUnityWebGL_${this.props.unityContent.uniqueID}__`,
       style: {
         width: this.props.width || "800px",

tsconfig.json

@@ -1,11 +1,12 @@
 {
-  "compilerOptions": {
-    "target": "es5",
-    "module": "commonjs",
-    "declaration": true,
-    "declarationMap": true,
-    "sourceMap": true,
-    "strict": true,
-    "esModuleInterop": true
-  }
-}
+    "compilerOptions": {
+        "target": "es5",
+        "module": "commonjs",
+        "declaration": true,
+        "declarationMap": true,
+        "sourceMap": true,
+        "strict": true,
+        "esModuleInterop": true,
+        "outDir": "dist"
+    }
+}