Merge pull request #13 from PhilippMolitor/dev

release 2020.1.0

Author: Philipp Molitor

.github/workflows/ci-dev.yaml

@@ -0,0 +1,32 @@
+name: Build/CI
+
+on:
+  push:
+    branches: ['dev']
+  pull_request:
+    branches: ['dev']
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [14.x]
+    steps:
+      - name: checkout
+        uses: actions/checkout@v2
+
+      - name: install node ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: cache node_modules
+        uses: actions/cache@v2
+        with:
+          path: '**/node_modules'
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+
+      - run: yarn --frozen-lockfile
+      - run: yarn test
+      - run: yarn build

.github/workflows/release-npmjs.yaml

@@ -0,0 +1,34 @@
+name: Release
+
+on:
+  release:
+    types:
+      - released
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [14.x]
+    steps:
+      - name: checkout
+        uses: actions/checkout@v2
+
+      - name: install node ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: cache node_modules
+        uses: actions/cache@v2
+        with:
+          path: '**/node_modules'
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+
+      - run: yarn --frozen-lockfile
+      - run: yarn test
+      - run: yarn build
+      - run: yarn publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.npmignore

@@ -1,5 +1,6 @@
 # IDEs
 .vscode/
+.github/
 
 # node
 node_modules/

README.md

@@ -2,11 +2,13 @@
 
 <p align="center">
 
-<img src="https://img.shields.io/npm/l/react-unity-renderer?style=flat-square">
-<img src="https://img.shields.io/npm/dw/react-unity-renderer?style=flat-square">
-<img src="https://img.shields.io/github/stars/PhilippMolitor/react-unity-renderer?style=flat-square">
-<img src="https://img.shields.io/npm/v/react-unity-renderer?style=flat-square">
-<img src="https://img.shields.io/bundlephobia/minzip/react-unity-renderer?style=flat-square">
+<img src="https://github.com/PhilippMolitor/react-unity-renderer/actions/workflows/ci-dev.yaml/badge.svg?branch=dev">
+<img src="https://github.com/PhilippMolitor/react-unity-renderer/actions/workflows/release-npmjs.yaml/badge.svg?event=release">
+<img src="https://img.shields.io/npm/l/react-unity-renderer">
+<img src="https://img.shields.io/npm/dw/react-unity-renderer">
+<img src="https://img.shields.io/github/stars/PhilippMolitor/react-unity-renderer">
+<img src="https://img.shields.io/npm/v/react-unity-renderer">
+<img src="https://img.shields.io/bundlephobia/minzip/react-unity-renderer">
 
 </p>
 
@@ -75,6 +77,11 @@ export const UnityGameComponent: VFC = (): JSX.Element => {
   const [progress, setProgress] = useState<number>(0);
   const [ready, setReady] = useState<boolean>(false);
 
+  // Attach some event handlers to the context
+  useEffect(() => {
+    ctx.on('message', (m: string) => console.log(message));
+  }, []);
+
   return (
     <UnityRenderer
       context={ctx}
@@ -182,6 +189,24 @@ export async function fetchLoaderConfig(
 
 You can then use it to construct a `UnityContext` and pass this context to your `UnityRenderer` via the `context` prop.
 
+## Sending events from Unity
+
+In order to send events from Unity to the react application, use the global method for that in your `*.jslib` mapping file:
+
+```javascript
+mergeInto(LibraryManager.library, {
+  RunSomeActionInJavaScript: function (message, number) {
+    // surround with try/catch to make unity not crash in case the method is
+    // not defined in the global scope yet
+    try {
+      window.UnityBridge('event-name')(Pointer_stringify(message), number);
+    } catch (e) {}
+  },
+});
+```
+
+If the event name has no registered event handlers, the `UnityBridge(event: string)` function will log a warning via `console.warn(...)`.
+
 ## Module augmentation
 
 Take the following example:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-unity-renderer",
-  "version": "2020.0.3",
+  "version": "2020.1.0",
   "description": "React Unity Renderer allows to interactively embed Unity WebGL builds into a React powered project.",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

src/components/__tests__/UnityRenderer.test.tsx

@@ -1,6 +1,5 @@
 import { mount, ReactWrapper } from 'enzyme';
 
-import { UnityContext } from '../../lib/context';
 import { UnityRenderer } from '../UnityRenderer';
 
 describe('<UnityRenderer /> (unconfigured)', () => {

src/lib/__tests__/context.test.ts

@@ -1,3 +1,5 @@
+/// <reference path="../../../typings/unity.d.ts" />
+
 import { UnityContext, UnityLoaderConfig } from '../context';
 
 describe('UnityContext', () => {
@@ -15,9 +17,95 @@ describe('UnityContext', () => {
     productVersion: 'k',
   };
 
+  beforeEach(async () => {
+    // @ts-ignore
+    delete window.__UnityBridgeRegistry__;
+    // @ts-ignore
+    delete window.UnityBridge;
+  });
+
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
   it('stores and retrieves the loader configuration', async () => {
     const ctx = new UnityContext(cfg);
 
-    expect(ctx.getConfig()).toEqual(cfg);
+    expect(ctx.getConfig()).toStrictEqual(cfg);
+  });
+
+  it('creates the global event registry', async () => {
+    expect(window.__UnityBridgeRegistry__).toBe(undefined);
+
+    new UnityContext(cfg);
+
+    expect(window.__UnityBridgeRegistry__).toStrictEqual({});
+  });
+
+  it('creates the global event lookup handler', async () => {
+    expect(window.UnityBridge).toBe(undefined);
+
+    new UnityContext(cfg);
+
+    expect(typeof window.UnityBridge).toBe('function');
+  });
+
+  it('registers an event handler to the global registry', async () => {
+    const ctx = new UnityContext(cfg);
+    const handler = jest.fn();
+
+    ctx.on('test', handler);
+    expect(window.__UnityBridgeRegistry__).toStrictEqual({ test: [handler] });
+    expect(handler).not.toHaveBeenCalled();
+
+    window.UnityBridge('test')('string', 42);
+    expect(handler).toHaveBeenCalledWith('string', 42);
+  });
+
+  it('logs a warning when calling an unknown event', async () => {
+    new UnityContext(cfg);
+
+    let message: string = '';
+    const consoleWarn = jest
+      .spyOn(console, 'warn')
+      .mockImplementation((m: string) => (message = m));
+
+    expect(consoleWarn).not.toHaveBeenCalled();
+    window.UnityBridge('test')(42, test);
+
+    expect(consoleWarn).toHaveBeenCalled();
+    expect(message).toMatch(/\"test\"/);
+  });
+
+  it('unregisters a previously registered event', async () => {
+    const ctx = new UnityContext(cfg);
+    expect(window.__UnityBridgeRegistry__).toStrictEqual({});
+
+    // add handler
+    const handler = jest.fn();
+    ctx.on('test', handler);
+    expect(window.__UnityBridgeRegistry__).toStrictEqual({ test: [handler] });
+
+    // remove it again
+    ctx.off('test');
+    expect(window.__UnityBridgeRegistry__).toStrictEqual({ test: [] });
+  });
+
+  it('registers events with the same name for to contexts', async () => {
+    const ctxA = new UnityContext(cfg);
+    const ctxB = new UnityContext(cfg);
+
+    const handlerA = jest.fn();
+    const handlerB = jest.fn();
+    ctxA.on('test-a-b', handlerA);
+    ctxB.on('test-a-b', handlerB);
+
+    window.UnityBridge('test-a-b')('abtest', 42);
+    expect(handlerA).toHaveBeenCalledWith('abtest', 42);
+    expect(handlerB).toHaveBeenCalledWith('abtest', 42);
+
+    expect(window.__UnityBridgeRegistry__).toStrictEqual({
+      'test-a-b': [handlerA, handlerB], // order matters here!
+    });
   });
 });