Support forwardRef in @preact/signals-react (#246)

* Support forwardRef in @preact/signals-react

* Create thin-coats-wash.md

---------

Co-authored-by: Finn <[email protected]>
Co-authored-by: Jovi De Croock <[email protected]>

Author: 3 people

.changeset/thin-coats-wash.md

@@ -0,0 +1,5 @@
+---
+"@preact/signals-react": patch
+---
+
+Support forwardRef in @preact/signals-react

packages/react/src/index.ts

@@ -24,10 +24,12 @@ export { signal, computed, batch, effect, Signal, type ReadonlySignal };
 const Empty = [] as const;
 const ReactElemType = Symbol.for("react.element"); // https://github.com/facebook/react/blob/346c7d4c43a0717302d446da9e7423a8e28d8996/packages/shared/ReactSymbols.js#L15
 const ReactMemoType = Symbol.for("react.memo"); // https://github.com/facebook/react/blob/346c7d4c43a0717302d446da9e7423a8e28d8996/packages/shared/ReactSymbols.js#L30
+const ReactForwardRefType = Symbol.for("react.forward_ref"); // https://github.com/facebook/react/blob/346c7d4c43a0717302d446da9e7423a8e28d8996/packages/shared/ReactSymbols.js#L25
 const ProxyInstance = new WeakMap<
 	FunctionComponent<any>,
 	FunctionComponent<any>
 >();
+
 const SupportsProxy = typeof Proxy === "function";
 
 const ProxyHandlers = {
@@ -161,9 +163,14 @@ function WrapJsx<T>(jsx: T): T {
 			return jsx.call(jsx, ProxyFunctionalComponent(type), props, ...rest);
 		}
 
-		if (type && typeof type === "object" && type.$$typeof === ReactMemoType) {
-			type.type = ProxyFunctionalComponent(type.type);
-			return jsx.call(jsx, type, props, ...rest);
+		if (type && typeof type === "object") {
+			if (type.$$typeof === ReactMemoType) {
+				type.type = ProxyFunctionalComponent(type.type);
+				return jsx.call(jsx, type, props, ...rest);
+			} else if (type.$$typeof === ReactForwardRefType) {
+				type.render = ProxyFunctionalComponent(type.render);
+				return jsx.call(jsx, type, props, ...rest);
+			}
 		}
 
 		if (typeof type === "string" && props) {

packages/react/test/index.test.tsx

@@ -2,7 +2,8 @@
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;
 
 import { signal, useComputed, useSignalEffect } from "@preact/signals-react";
-import { createElement, useMemo, memo, StrictMode, createRef } from "react";
+import { createElement, forwardRef, useMemo, memo, StrictMode, createRef } from "react";
+
 import { createRoot, Root } from "react-dom/client";
 import { renderToStaticMarkup } from "react-dom/server";
 import { act } from "react-dom/test-utils";
@@ -160,6 +161,26 @@ describe("@preact/signals-react", () => {
 			expect(scratch.textContent).to.equal("bar");
 		});
 
+		it("should update forwardRef'ed component via signals", async () => {
+			const sig = signal("foo");
+
+			const Inner = forwardRef(() => {
+				return <p>{sig.value}</p>;
+			});
+
+			function App() {
+				return <Inner />;
+			}
+
+			render(<App />);
+			expect(scratch.textContent).to.equal("foo");
+
+			act(() => {
+				sig.value = "bar";
+			});
+			expect(scratch.textContent).to.equal("bar");
+		});
+
 		it("should consistently rerender in strict mode", async () => {
 			const sig = signal<string>(null!);