Development

.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": ["env"]
+  "presets": ["react", "env"]
 }

README.md

@@ -19,6 +19,7 @@ When building content for the web, you might need to communicate with other elem
 - [Calling JavaScript functions within React from Unity scripts](#calling-javascript-functions-within-react-from-unity-scripts)
 - [Notes](#notes)
     - [5.x to 6.x Upgrade note](#5x-to-6x-upgrade-note)
+    - [Best practices for adding the src and loader files on a public path](#best-practices-for-adding-the-src-and-loader-files-on-a-public-path)
 - [Contributing](#contributing)
 
 
@@ -37,7 +38,7 @@ $ npm install react-unity-webgl
 
 
 # Usage
-To get started import the default Unity class from react-unity-webgl and include it in your render while giving the public path to your src and loader files.
+To get started import the default Unity class from react-unity-webgl and include it in your render while giving the public path to your src and loader files. [Best practices for adding the src and loader files on a public path](#best-practices-for-adding-the-src-and-loader-files-on-a-public-path).
 
 ```js
 import React from 'react'
@@ -150,6 +151,16 @@ public class MenuController: MonoBehaviour {
     }
 }
 ```
+Or using the **legacy** way in Unity, for example:
+```cs
+using UnityEngine;
+
+public class MenuController: MonoBehaviour {
+    public void OpenReactMenuById (string menuId) {
+        Application.ExternalCall ("OpenMenu", menuId);
+    }
+}
+```
 Simple numeric types can be passed to JavaScript in function parameters without requiring any conversion. Other data types will be passed as a pointer in the emscripten heap (which is really just a big array in JavaScript). For strings, you can use the Pointer_stringify helper function to convert to a JavaScript string. To return a string value you need to call _malloc_ to allocate some memory and the writeStringToMemory helper function to write a JavaScript string to it. If the string is a return value, then the il2cpp runtime will take care of freeing the memory for you. For arrays of primitive types, emscripten provides different ArrayBufferViews into it’s heap for different sizes of integer, unsigned integer or floating point representations of memory: HEAP8, HEAPU8, HEAP16, HEAPU16, HEAP32, HEAPU32, HEAPF32, HEAPF64. To access a texture in WebGL, emscripten provides the GL.textures array which maps native texture IDs from Unity to WebGL texture objects. WebGL functions can be called on emscripten’s WebGL context, GLctx.
 
 Legacy ways of calling JavaScript code from Unity. You can use the Application.ExternalCall () and Application.ExternalEval () functions to invoke JavaScript code on the embedding web page. Note that expressions are evaluated in the local scope of the build. If you would like to execute JavaScript code in the global scope, see the Code Visibility section below.
@@ -159,7 +170,8 @@ Legacy ways of calling JavaScript code from Unity. You can use the Application.E
 
 
 # Notes
-Make sure your Unity build is in your public folder, this is due to the component **and** Unity itself will load files in Runtime and not Compile/Bundle time. 
+## Best practices for adding the src and loader files on a public path
+Make sure your Unity build is in your public folder, this is due to the component **and** Unity itself will load files in Runtime and not Compile/Bundle time. The public folder means that the folder should be accesible via a public web adress. The path within your `src` and `loader` should be relative to the html file your app is running in.
 ## 5.x to 6.x Upgrade note
 When upgrading from 5.x to 6.x, make sure you add the `loader` prop to the Unity component and remove the script tag from your HTML page refering to the UnityLoader.js file. See [Usage](#usage) for further details.
 
@@ -168,4 +180,4 @@ When upgrading from 5.x to 6.x, make sure you add the `loader` prop to the Unity
 
 
 # Contributing
-When contributing to this repository, please first discuss the change you wish to make via issue, email, or any other method with the owners of this repository before making a change. Before commiting, please compile your code using `npm run compile` and open a pull request. Thank you very much!
+When contributing to this repository, please first discuss the change you wish to make via issue, email, or any other method with the owners of this repository before making a change. Before commiting, please compile your code using `npm run compile` and open a pull request. Thank you very much!

library/components/Styles.js

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+/**
+ * Static styles used by the Unity component
+ */
+exports.default = {
+    unity: {
+        width: '100%',
+        height: '100%'
+    }
+};

lib/Unity.js → library/components/Unity.js

@@ -10,13 +10,13 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
-var _UnityLoaderService = require('./UnityLoaderService');
+var _UnityLoaderService = require('../services/UnityLoaderService');
 
 var _UnityLoaderService2 = _interopRequireDefault(_UnityLoaderService);
 
-var _Styles = require('./Styles');
+var _Unity = require('./Unity.styles');
 
-var _Styles2 = _interopRequireDefault(_Styles);
+var _Unity2 = _interopRequireDefault(_Unity);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -37,53 +37,52 @@ var Unity = function (_Component) {
         _this.state = {
             error: null
         };
-        _this.unityLoaderService = new _UnityLoaderService2.default();
+        _this._unityLoaderService = new _UnityLoaderService2.default();
         return _this;
     }
 
     _createClass(Unity, [{
         key: 'componentDidMount',
         value: function componentDidMount() {
-            this.instantiate();
+            this._instantiate();
         }
     }, {
         key: 'componentWillUnmount',
         value: function componentWillUnmount() {
-            this.unityLoaderService.unmount();
+            this._unityLoaderService.unmount();
         }
     }, {
-        key: 'instantiate',
-        value: function instantiate() {
+        key: '_instantiate',
+        value: function _instantiate() {
             var _this2 = this;
 
             var error = null;
-
             if (typeof this.props.loader === 'undefined') error = 'Please provide Unity with a path to the UnityLoader in the loader prop.';
             if (typeof this.props.src === 'undefined') error = 'Please provide Unity with a path to a valid JSON in the src prop.';
 
             if (error !== null) {
                 console.error(error);
                 this.setState({ error: error });
             } else {
-                this.unityLoaderService.append(this.props.loader).then(function () {
+                this._unityLoaderService.append(this.props.loader).then(function () {
                     var unityInstance = UnityLoader.instantiate('unity', _this2.props.src, {
-                        onProgress: _this2.onProgress.bind(_this2),
+                        onProgress: _this2._onProgress.bind(_this2),
                         Module: _this2.props.module
                     });
                     module.exports.UnityInstance = unityInstance;
                 });
             }
         }
     }, {
-        key: 'onProgress',
-        value: function onProgress(unityInstance, progression) {
+        key: '_onProgress',
+        value: function _onProgress(unityInstance, progression) {
             if (typeof this.props.onProgress !== 'undefined') {
                 this.props.onProgress(progression);
             }
         }
     }, {
-        key: 'getContainerStyles',
-        value: function getContainerStyles() {
+        key: '_getContainerStyles',
+        value: function _getContainerStyles() {
             return {
                 width: this.props.width || '100%',
                 height: this.props.height || '100%'
@@ -94,13 +93,13 @@ var Unity = function (_Component) {
         value: function render() {
             return _react2.default.createElement(
                 'div',
-                { className: 'unity', style: this.getContainerStyles() },
+                { className: 'unity', style: this._getContainerStyles() },
                 this.state.error !== null ? _react2.default.createElement(
                     'b',
                     null,
                     'React-Unity-Webgl error ',
                     this.state.error
-                ) : _react2.default.createElement('div', { style: _Styles2.default.unity, id: 'unity' })
+                ) : _react2.default.createElement('div', { style: _Unity2.default.unity, id: 'unity' })
             );
         }
     }]);

lib/index.js → library/index.js

@@ -5,13 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SendMessage = exports.RegisterExternalListener = undefined;
 
-var _Unity = require('./Unity');
+var _Unity = require('./components/Unity');
 
 var _Unity2 = _interopRequireDefault(_Unity);
 
-var _RegisterExternalListener = require('./RegisterExternalListener');
+var _RegisterExternalListener = require('./modules/RegisterExternalListener');
 
-var _SendMessage = require('./SendMessage');
+var _SendMessage = require('./modules/SendMessage');
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 

lib/SendMessage.js → library/modules/SendMessage.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SendMessage = SendMessage;
 
-var _Unity = require('./Unity');
+var _Unity = require('../components/Unity');
 
 /**
  * Sends a message to the Unity content. This works the same

lib/UnityLoaderService.js → library/services/UnityLoaderService.js

@@ -8,15 +8,15 @@ var _createClass = function () { function defineProperties(target, props) { for
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-var UnityLoaderServer = function () {
-    function UnityLoaderServer() {
-        _classCallCheck(this, UnityLoaderServer);
+var UnityLoaderService = function () {
+    function UnityLoaderService() {
+        _classCallCheck(this, UnityLoaderService);
 
         this.documentHead = document.getElementsByTagName('head')[0];
         this.unityLoaderScript = null;
     }
 
-    _createClass(UnityLoaderServer, [{
+    _createClass(UnityLoaderService, [{
         key: 'append',
         value: function append(src) {
             var _this = this;
@@ -41,7 +41,7 @@ var UnityLoaderServer = function () {
         }
     }]);
 
-    return UnityLoaderServer;
+    return UnityLoaderService;
 }();
 
-exports.default = UnityLoaderServer;
+exports.default = UnityLoaderService;

package.json

@@ -1,10 +1,11 @@
 {
   "name": "react-unity-webgl",
-  "version": "6.2.2",
+  "version": "6.2.3",
   "description": "A Unity WebGL component for your React application",
-  "main": "lib/index.js",
+  "main": "library/index.js",
+  "types": "source/types.d.ts",
   "scripts": {
-    "compile": "babel --presets react source --out-dir lib"
+    "compile": "babel --presets react source --out-dir library"
   },
   "repository": {
     "type": "git",

source/Unity.js → source/components/Unity.js

@@ -1,24 +1,23 @@
 import React, { Component } from 'react'
-import UnityLoaderService from './UnityLoaderService'
-import Styles from './Styles'
+import UnityLoaderService from '../services/UnityLoaderService'
+import Styles from './Unity.styles'
 
 export default class Unity extends Component {
     constructor (props) {
         super (props)
         this.state = {
             error: null
         }
-        this.unityLoaderService = new UnityLoaderService ()
+        this._unityLoaderService = new UnityLoaderService ()
     }
     componentDidMount () {
-        this.instantiate ()
+        this._instantiate ()
     }
     componentWillUnmount () {
-        this.unityLoaderService.unmount ()
+        this._unityLoaderService.unmount ()
     }
-    instantiate () {
+    _instantiate () {
         let error = null
-
         if (typeof this.props.loader === 'undefined')
             error = 'Please provide Unity with a path to the UnityLoader in the loader prop.'
         if (typeof this.props.src === 'undefined')
@@ -29,29 +28,29 @@ export default class Unity extends Component {
             this.setState ({ error: error })
         } 
         else {
-            this.unityLoaderService.append (this.props.loader).then (() => {
+            this._unityLoaderService.append (this.props.loader).then (() => {
                 let unityInstance = UnityLoader.instantiate ('unity', this.props.src, {
-                    onProgress: this.onProgress.bind (this),
+                    onProgress: this._onProgress.bind (this),
                     Module : this.props.module
                 })
                 module.exports.UnityInstance = unityInstance
             })
         }
     }
-    onProgress (unityInstance, progression) {
+    _onProgress (unityInstance, progression) {
         if (typeof this.props.onProgress !== 'undefined') {
             this.props.onProgress (progression)
         }
     }
-    getContainerStyles () {
+    _getContainerStyles () {
         return {
             width: this.props.width || '100%',
             height: this.props.height || '100%'
         }
     }
     render () {
         return (
-            <div className='unity' style={this.getContainerStyles ()}>
+            <div className='unity' style={this._getContainerStyles ()}>
                 {this.state.error !== null ? (
                     <b>React-Unity-Webgl error {this.state.error}</b>
                 ):(

source/index.js

@@ -1,6 +1,6 @@
-import Unity from './Unity'
-import { RegisterExternalListener } from './RegisterExternalListener'
-import { SendMessage } from './SendMessage'
+import Unity from './components/Unity'
+import { RegisterExternalListener } from './modules/RegisterExternalListener'
+import { SendMessage } from './modules/SendMessage'
 
 export default Unity
 export { RegisterExternalListener, SendMessage }

source/SendMessage.js → source/modules/SendMessage.js

@@ -1,4 +1,4 @@
-import { UnityInstance } from './Unity'
+import { UnityInstance } from '../components/Unity'
 
 /**
  * Sends a message to the Unity content. This works the same

source/UnityLoaderService.js → source/services/UnityLoaderService.js

@@ -1,4 +1,4 @@
-export default class UnityLoaderServer {
+export default class UnityLoaderService {
     constructor () {
         this.documentHead = document.getElementsByTagName ('head')[0]
         this.unityLoaderScript = null

source/types.d.ts

@@ -0,0 +1,40 @@
+export default class Unity extends React.Component<UnityProps, UnityState> { }
+
+export function SendMessage (
+    gameObjectName: string, 
+    methodName: string, 
+    paramterValue?: any
+): void;
+
+export function RegisterExternalListener (
+    functionName: string, 
+    callback: (e: any) => void 
+): void;
+
+interface UnityProps {
+    src: string;
+    loader: string;
+    onProgress?: (progression: number) => void;
+    width?: number;
+    height?: number;
+    module?: Module;
+}
+
+interface UnityState {
+    error?: string;
+}
+
+interface Module {
+    [x: string]: any;
+    preRun: any[];
+    postRun: any[];
+    print: (e: any) => void;
+    printErr: (e: any) => void;
+    Jobs: {
+        [x: string]: any;
+    };
+    buildDownloadProgress: {
+        [x: string]: any;
+    };
+    resolveBuildUrl: (e: any) => any;
+}