feat(ref): export createRef

src/index.ts

@@ -1,3 +1,4 @@
 export * from './components';
 export { createElement, jsx } from './element';
+export { createRef } from './ref';
 export { render } from './render';

src/ref/index.ts

@@ -0,0 +1 @@
+export * from './ref';

src/ref/ref.test.ts

@@ -0,0 +1,12 @@
+import { createRef } from './ref';
+
+it('creates ref', () => {
+  expect(createRef()).toEqual({ current: null });
+});
+
+it('sets ref', () => {
+  type Type = 'value';
+  const ref = createRef<Type>();
+  ref.current = 'value';
+  expect(ref).toEqual({ current: 'value' });
+});

src/ref/ref.ts

@@ -0,0 +1,12 @@
+import type { Ref } from '../types';
+
+/**
+ * Creates a ref object which can contain arbitrary value.
+ *
+ * @returns - Creates an object with a single property `current` (initially set to `null`).
+ */
+export function createRef<Type>(): Ref<Type> {
+  return {
+    current: null,
+  };
+}

src/render/gameobject.test.tsx

@@ -1,7 +1,7 @@
 import Phaser from 'phaser';
 import type { JSX } from 'react';
 
-import { Container } from '..';
+import { Container, createRef } from '..';
 import { createGameObject } from './gameobject';
 
 jest.mock('phaser', () => {

src/render/ref.test.ts

@@ -1,18 +1,25 @@
 import type Phaser from 'phaser';
 
+import { createRef } from '..';
 import { attachRef } from './ref';
 
 const gameObject = {} as Phaser.GameObjects.GameObject;
 
-it('attaches ref', () => {
-  const mock = jest.fn();
-  expect(attachRef(gameObject, mock));
-  expect(mock).toBeCalledTimes(1);
-  expect(mock).toBeCalledWith(gameObject);
-});
-
 it('does not attach ref', () => {
   expect(
     attachRef(gameObject, null as unknown as Parameters<typeof attachRef>[1]),
   );
 });
+
+it('attaches ref callback', () => {
+  const callback = jest.fn();
+  expect(attachRef(gameObject, callback));
+  expect(callback).toBeCalledTimes(1);
+  expect(callback).toBeCalledWith(gameObject);
+});
+
+it('attaches ref object', () => {
+  const ref = createRef<Phaser.GameObjects.GameObject>();
+  expect(attachRef(gameObject, ref));
+  expect(ref).toEqual({ current: gameObject });
+});

src/render/ref.ts

@@ -12,5 +12,7 @@ export function attachRef(
 ) {
   if (typeof ref === 'function') {
     ref(gameObject);
+  } else if (ref && typeof ref === 'object') {
+    ref.current = gameObject;
   }
 }

src/types/index.ts

@@ -1,4 +1,5 @@
 export * from './events';
 export * from './phaser';
 export * from './props';
+export * from './ref';
 export * from './utils';

src/types/props.ts

@@ -1,10 +1,12 @@
 import type { JSX } from 'react';
 
-import type { Events, GameObject, RecursivePartial } from '.';
+import type { Events, GameObject, RecursivePartial, Ref } from '.';
+
+type RefCallback<Type> = (gameObject: Type) => void;
 
 interface ObjectProps<Type> extends Partial<Events> {
   children?: JSX.Element | JSX.Element[] | null;
-  ref?: (gameObject: Type) => void;
+  ref?: RefCallback<Type> | Ref<Type>;
 }
 
 export type GameObjectProps<Type = GameObject> = ObjectProps<Type> &

src/types/ref.ts

@@ -0,0 +1,3 @@
+export interface Ref<Type> {
+  current: Type | null;
+}