From e59b95c8801350ee9e292a74624e74147b98e041 Mon Sep 17 00:00:00 2001 From: Matthias Bohlen Date: Fri, 26 Apr 2019 10:57:48 +0200 Subject: [PATCH 1/2] Make sure it works regardless of React version ...and with an interative development and test cycle. --- .gitignore | 3 +++ README.md | 18 ++++++++++++++++++ package.json | 9 ++++----- source/components/Unity.ts | 6 +++--- tsconfig.json | 21 +++++++++++---------- 5 files changed, 39 insertions(+), 18 deletions(-) diff --git a/.gitignore b/.gitignore index 4c7757c4..256b0a58 100644 --- a/.gitignore +++ b/.gitignore @@ -12,4 +12,7 @@ logs *.js #.ts +dist/ +*.tgz + #.github \ No newline at end of file diff --git a/README.md b/README.md index a7505ca3..314415aa 100644 --- a/README.md +++ b/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. \ No newline at end of file diff --git a/package.json b/package.json index 2b0919e4..f7170231 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,8 @@ "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", + "typings": "./dist/Exports.d.ts", "scripts": { "start": "tsc --watch", "compile": "tsc", @@ -24,10 +25,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" } } diff --git a/source/components/Unity.ts b/source/components/Unity.ts index 187d1222..dbc7254c 100644 --- a/source/components/Unity.ts +++ b/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 { /** @@ -133,7 +133,7 @@ export default class Unity extends React.Component { 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", diff --git a/tsconfig.json b/tsconfig.json index f21f3a0a..ac72b3bb 100644 --- a/tsconfig.json +++ b/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" + } +} \ No newline at end of file From 8b6ab9240a8a9a8f677ca8cb3318e7fa0d7450f1 Mon Sep 17 00:00:00 2001 From: Matthias Bohlen Date: Fri, 26 Apr 2019 11:02:11 +0200 Subject: [PATCH 2/2] Remove superfluous entry in package.json --- package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package.json b/package.json index f7170231..acdaec96 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,6 @@ "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": "./dist/Exports.js", - "typings": "./dist/Exports.d.ts", "scripts": { "start": "tsc --watch", "compile": "tsc",