Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/deep-towns-attend.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@playcanvas/react': patch
---

Fix useAppEvent dropping arguments for custom events
36 changes: 33 additions & 3 deletions packages/lib/src/hooks/use-app-event.test.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
import { renderHook } from '@testing-library/react';
import { renderHook, waitFor } from '@testing-library/react';
import React from 'react';
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';

import { Application } from '../Application.tsx';

import { useAppEvent } from './use-app-event.ts';
import { useApp } from './use-app.tsx';

/**
* Note that we can't test the actual firing of the callbacks in tests,
* because these events are not fire in the Null device type.
* Note that we can't test the actual firing of the built-in frame events in tests,
* because these events are not fired in the Null device type. Custom events can be
* fired directly with `app.fire(...)`.
*
* It's possible that we can run headless once we have a node-wgpu environment.
*/
Expand Down Expand Up @@ -113,4 +115,32 @@ describe('useAppEvent', () => {
// Should not throw during cleanup
unmount();
});

it('should forward all arguments to the callback for custom events', async () => {
// eslint-disable-next-line @typescript-eslint/consistent-type-definitions -- preserve the interface generic coverage
interface CustomEventMap {
levelComplete: (level: number, score: number) => void;
}

const levelCompleteCallback = vi.fn();
let capturedApp: ReturnType<typeof useApp> | undefined;

renderHook(
() => {
capturedApp = useApp();
useAppEvent<CustomEventMap>('levelComplete', levelCompleteCallback);
},
{
wrapper: ({ children }) => <Application deviceTypes={['null']}>{children}</Application>
}
);

await waitFor(() => expect(capturedApp).toBeDefined());

capturedApp!.fire('levelComplete', 3, 1000);

// PlayCanvas pads unused fire() arguments with undefined, so compare the leading ones
expect(levelCompleteCallback).toHaveBeenCalledTimes(1);
expect(levelCompleteCallback.mock.calls[0].slice(0, 2)).toEqual([3, 1000]);
});
});
9 changes: 2 additions & 7 deletions packages/lib/src/hooks/use-app-event.ts
Original file line number Diff line number Diff line change
Expand Up @@ -81,14 +81,9 @@ export function useAppEvent<TEventMap = BaseEventCallbackMap, TEventName extends

const handler = useCallback(
(...args: unknown[]) => {
if (event === 'update') {
// update event always receives delta time as first argument
(callback as (dt: number) => void)(args[0] as number);
} else {
(callback as () => void)();
}
(callback as (...args: unknown[]) => void)(...args);
},
[callback, event]
[callback]
);

useEffect(() => {
Expand Down
Loading