New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
react-unity-webgl
Advanced tools
react-unity-webgl - npm Package Compare versions
Comparing version 6.0.0 to 6.1.0
@@ -34,4 +34,2 @@ 'use strict'; | ||
| _this.state = { | ||
| progress: 0, | ||
| loaded: false, | ||
| error: null | ||
@@ -49,2 +47,7 @@ }; | ||
| }, { | ||
| key: 'componentWillUnmount', | ||
| value: function componentWillUnmount() { | ||
| this.unityLoaderService.unmount(); | ||
| } | ||
| }, { | ||
| key: 'instantiate', | ||
@@ -64,11 +67,7 @@ value: function instantiate() { | ||
| this.unityLoaderService.append(this.props.loader).then(function () { | ||
| module.exports.UnityInstance = UnityLoader.instantiate('unity-container', _this2.props.src, { | ||
| onProgress: function onProgress(gameInstance, progress) { | ||
| _this2.setState({ | ||
| loaded: progress === 1, | ||
| progress: progress | ||
| }); | ||
| }, | ||
| var unityInstance = UnityLoader.instantiate('unity', _this2.props.src, { | ||
| onProgress: _this2.onProgress.bind(_this2), | ||
| Module: _this2.props.module | ||
| }); | ||
| module.exports.UnityInstance = unityInstance; | ||
| }); | ||
@@ -78,34 +77,20 @@ } | ||
| }, { | ||
| key: 'onProgress', | ||
| value: function onProgress(unityInstance, progression) { | ||
| if (typeof this.props.onProgress !== 'undefined') { | ||
| this.props.onProgress(progression); | ||
| } | ||
| } | ||
| }, { | ||
| key: 'render', | ||
| value: function render() { | ||
| if (this.state.error !== null) { | ||
| return _react2.default.createElement( | ||
| 'div', | ||
| { className: 'unity' }, | ||
| _react2.default.createElement( | ||
| 'b', | ||
| null, | ||
| 'React-Unity-Webgl error' | ||
| ), | ||
| ' ', | ||
| this.state.error | ||
| ); | ||
| } | ||
| return _react2.default.createElement( | ||
| 'div', | ||
| { className: 'unity' }, | ||
| _react2.default.createElement( | ||
| 'div', | ||
| this.state.error !== null ? _react2.default.createElement( | ||
| 'b', | ||
| null, | ||
| _react2.default.createElement('div', { className: 'unity-container', id: 'unity-container' }) | ||
| ), | ||
| this.state.loaded === false && _react2.default.createElement( | ||
| 'div', | ||
| { className: 'unity-loader' }, | ||
| _react2.default.createElement( | ||
| 'div', | ||
| { className: 'bar' }, | ||
| _react2.default.createElement('div', { className: 'fill', style: { width: this.state.progress * 100 + '%' } }) | ||
| ) | ||
| ) | ||
| 'React-Unity-Webgl error ', | ||
| this.state.error | ||
| ) : _react2.default.createElement('div', { id: 'unity' }) | ||
| ); | ||
@@ -112,0 +97,0 @@ } |
@@ -14,2 +14,5 @@ 'use strict'; | ||
| _classCallCheck(this, UnityLoaderServer); | ||
| this.documentHead = document.getElementsByTagName('head')[0]; | ||
| this.unityLoaderScript = null; | ||
| } | ||
@@ -20,13 +23,22 @@ | ||
| value: function append(src) { | ||
| var _this = this; | ||
| return new Promise(function (resolve, reject) { | ||
| var unityLoaderScript = document.createElement('script'); | ||
| unityLoaderScript.type = 'text/javascript'; | ||
| unityLoaderScript.async = true; | ||
| unityLoaderScript.src = src; | ||
| unityLoaderScript.onload = function () { | ||
| _this.unityLoaderScript = document.createElement('script'); | ||
| _this.unityLoaderScript.type = 'text/javascript'; | ||
| _this.unityLoaderScript.async = true; | ||
| _this.unityLoaderScript.src = src; | ||
| _this.unityLoaderScript.onload = function () { | ||
| resolve(); | ||
| }; | ||
| document.getElementsByTagName('head')[0].appendChild(unityLoaderScript); | ||
| _this.documentHead.appendChild(_this.unityLoaderScript); | ||
| }); | ||
| } | ||
| }, { | ||
| key: 'unmount', | ||
| value: function unmount() { | ||
| if (this.unityLoaderScript !== null) { | ||
| this.documentHead.removeChild(this.unityLoaderScript); | ||
| } | ||
| } | ||
| }]); | ||
@@ -33,0 +45,0 @@ |
| { | ||
| "name": "react-unity-webgl", | ||
| "version": "6.0.0", | ||
| "version": "6.1.0", | ||
| "description": "A Unity WebGL component for your React application", | ||
@@ -5,0 +5,0 @@ "main": "lib/index.js", |
@@ -38,7 +38,17 @@ # React Unity WebGL | ||
| ### Overruling the module | ||
| ```js | ||
| // Overruling the module | ||
| this.myCustomModule = { ... } | ||
| <Unity ... module={ this.myCustomModule } /> | ||
| ``` | ||
| ### Tracking progression | ||
| ```js | ||
| <Unity ... onProgress={ this.onProgress } /> | ||
| onProgress (progression) { | ||
| console.log (`Loading ${(progression * 100)} % ...`) | ||
| if (progression === 1) | ||
| console.log (`Loading done!`) | ||
| } | ||
| ``` | ||
@@ -48,2 +58,3 @@ | ||
| # Calling Unity scripts functions from JavaScript in React | ||
@@ -125,21 +136,7 @@ Sometimes you need to send some data or notification to the Unity script from the browser’s JavaScript. The recommended way of doing it is to call methods on GameObjects in your content. To get started import the function SendMessage from react-unity-webgl. | ||
| # Styling | ||
| The following hierarchy will be applied to the React Unity WebGL component. Feel free to apply any styles to the component. | ||
| # 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 time. | ||
| ## 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. | ||
| ```scss | ||
| .unity { | ||
| .unity-container { | ||
| canvas { | ||
| /* don't forget to set my width and height! */ | ||
| } | ||
| } | ||
| .unity-loader { | ||
| .loading-bar { | ||
| .loading-fill { | ||
| /* the width will be set by the component */ | ||
| } | ||
| } | ||
| } | ||
| } | ||
| ``` | ||
@@ -149,4 +146,3 @@ | ||
| # 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! |
@@ -8,4 +8,2 @@ import React, { Component } from 'react' | ||
| this.state = { | ||
| progress: 0, | ||
| loaded: false, | ||
| error: null | ||
@@ -18,2 +16,5 @@ } | ||
| } | ||
| componentWillUnmount () { | ||
| this.unityLoaderService.unmount () | ||
| } | ||
| instantiate () { | ||
@@ -33,32 +34,23 @@ let error = null | ||
| this.unityLoaderService.append (this.props.loader).then (() => { | ||
| module.exports.UnityInstance = UnityLoader.instantiate ('unity-container', this.props.src, { | ||
| onProgress: ((gameInstance, progress) => { | ||
| this.setState({ | ||
| loaded: progress === 1, | ||
| progress: progress | ||
| }) | ||
| }), | ||
| let unityInstance = UnityLoader.instantiate ('unity', this.props.src, { | ||
| onProgress: this.onProgress.bind (this), | ||
| Module : this.props.module | ||
| }) | ||
| module.exports.UnityInstance = unityInstance | ||
| }) | ||
| } | ||
| } | ||
| onProgress (unityInstance, progression) { | ||
| if (typeof this.props.onProgress !== 'undefined') { | ||
| this.props.onProgress (progression) | ||
| } | ||
| } | ||
| render () { | ||
| if (this.state.error !== null) { return ( | ||
| <div className='unity'> | ||
| <b>React-Unity-Webgl error</b> {this.state.error} | ||
| </div> | ||
| )} | ||
| return ( | ||
| <div className='unity'> | ||
| <div> | ||
| <div className='unity-container' id='unity-container'></div> | ||
| </div> | ||
| {this.state.loaded === false && | ||
| <div className='unity-loader'> | ||
| <div className='bar'> | ||
| <div className='fill' style={{ width:`${(this.state.progress * 100)}%`}}></div> | ||
| </div> | ||
| </div> | ||
| } | ||
| {this.state.error !== null ? ( | ||
| <b>React-Unity-Webgl error {this.state.error}</b> | ||
| ):( | ||
| <div id='unity'></div> | ||
| )} | ||
| </div> | ||
@@ -65,0 +57,0 @@ ) |
| export default class UnityLoaderServer { | ||
| constructor () { | ||
| this.documentHead = document.getElementsByTagName ('head')[0] | ||
| this.unityLoaderScript = null | ||
| } | ||
| append (src) { | ||
| return new Promise ((resolve, reject) => { | ||
| let unityLoaderScript = document.createElement ('script') | ||
| unityLoaderScript.type = 'text/javascript' | ||
| unityLoaderScript.async = true | ||
| unityLoaderScript.src = src | ||
| unityLoaderScript.onload = () => { | ||
| this.unityLoaderScript = document.createElement ('script') | ||
| this.unityLoaderScript.type = 'text/javascript' | ||
| this.unityLoaderScript.async = true | ||
| this.unityLoaderScript.src = src | ||
| this.unityLoaderScript.onload = () => { | ||
| resolve () | ||
| } | ||
| document.getElementsByTagName ('head')[0].appendChild (unityLoaderScript) | ||
| this.documentHead.appendChild (this.unityLoaderScript) | ||
| }) | ||
| } | ||
| unmount () { | ||
| if (this.unityLoaderScript !== null) { | ||
| this.documentHead.removeChild (this.unityLoaderScript) | ||
| } | ||
| } | ||
| } |
Fixed alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Number of medium supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Total package byte prevSize
- decreased by-1.13%
20454
- Lines of code
- decreased by-2.19%
268
- Number of lines in readme file
- decreased by-2.68%
145
No dependency changes