Type Signal as valid React JSX (#271)

* type signal as a react element

* silence typescript errors

* refactor react adapter typing

* add computed text binding test

* add changeset

---------

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

Author: billybimbob

.changeset/metal-emus-design.md

@@ -0,0 +1,5 @@
+---
+"@preact/signals-react": patch
+---
+
+type Signal as a React Element

packages/core/src/index.ts

@@ -183,6 +183,7 @@ function addDependency(signal: Signal): Node | undefined {
 	return undefined;
 }
 
+// @ts-ignore internal Signal is viewed as a function
 declare class Signal<T = any> {
 	/** @internal */
 	_value: unknown;
@@ -224,6 +225,7 @@ declare class Signal<T = any> {
 }
 
 /** @internal */
+// @ts-ignore internal Signal is viewed as function
 function Signal(this: Signal, value?: unknown) {
 	this._value = value;
 	this._version = 0;

packages/react/src/index.ts

@@ -4,6 +4,7 @@ import {
 	useEffect,
 	Component,
 	type FunctionComponent,
+	type ReactElement,
 } from "react";
 import React from "react";
 import jsxRuntime from "react/jsx-runtime";
@@ -44,7 +45,11 @@ const ProxyHandlers = {
 	 *
 	 * @see https://github.com/facebook/react/blob/2d80a0cd690bb5650b6c8a6c079a87b5dc42bd15/packages/react-reconciler/src/ReactFiberHooks.old.js#L460
 	 */
-	apply(Component: FunctionComponent, thisArg: any, argumentsList: any) {
+	apply(
+		Component: FunctionComponent<any>,
+		thisArg: any,
+		argumentsList: Parameters<FunctionComponent<any>>
+	) {
 		const store = useMemo(createEffectStore, Empty);
 
 		useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
@@ -54,6 +59,7 @@ const ProxyHandlers = {
 		try {
 			const children = Component.apply(thisArg, argumentsList);
 			return children;
+			// eslint-disable-next-line no-useless-catch
 		} catch (e) {
 			// Re-throwing promises that'll be handled by suspense
 			// or an actual error.
@@ -69,6 +75,7 @@ const ProxyHandlers = {
 function ProxyFunctionalComponent(Component: FunctionComponent<any>) {
 	return ProxyInstance.get(Component) || WrapWithProxy(Component);
 }
+
 function WrapWithProxy(Component: FunctionComponent<any>) {
 	if (SupportsProxy) {
 		const ProxyComponent = new Proxy(Component, ProxyHandlers);
@@ -93,9 +100,10 @@ function WrapWithProxy(Component: FunctionComponent<any>) {
 	 * el.type.defaultProps;
 	 * ```
 	 */
-	const WrappedComponent = function () {
-		return ProxyHandlers.apply(Component, undefined, arguments);
+	const WrappedComponent: FunctionComponent<any> = (...args) => {
+		return ProxyHandlers.apply(Component, undefined, args);
 	};
+
 	ProxyInstance.set(Component, WrappedComponent);
 	ProxyInstance.set(WrappedComponent, WrappedComponent);
 
@@ -204,6 +212,12 @@ JsxPro.jsxs && /*  */ (JsxPro.jsxs = WrapJsx(JsxPro.jsxs));
 JsxDev.jsxDEV && /**/ (JsxDev.jsxDEV = WrapJsx(JsxDev.jsxDEV));
 JsxPro.jsxDEV && /**/ (JsxPro.jsxDEV = WrapJsx(JsxPro.jsxDEV));
 
+declare module "@preact/signals-core" {
+	// @ts-ignore internal Signal is viewed as function
+	// eslint-disable-next-line @typescript-eslint/no-empty-interface
+	interface Signal extends ReactElement {}
+}
+
 /**
  * A wrapper component that renders a Signal's value directly as a Text node.
  */

packages/react/src/internal.d.ts

@@ -1,14 +1,10 @@
-import { Signal } from "@preact/signals-core";
-
 export interface Effect {
 	_sources: object | undefined;
 	_start(): () => void;
 	_callback(): void;
 	_dispose(): void;
 }
 
-export type Updater = Signal<unknown>;
-
 export interface JsxRuntimeModule {
 	jsx?(type: any, ...rest: any[]): unknown;
 	jsxs?(type: any, ...rest: any[]): unknown;

packages/react/test/index.test.tsx

@@ -1,7 +1,7 @@
 // @ts-ignore-next-line
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;
 
-import { signal, useComputed, useSignalEffect } from "@preact/signals-react";
+import { signal, computed, useComputed, useSignalEffect } from "@preact/signals-react";
 import { createElement, forwardRef, useMemo, memo, StrictMode, createRef } from "react";
 
 import { createRoot, Root } from "react-dom/client";
@@ -41,6 +41,16 @@ describe("@preact/signals-react", () => {
 			expect(text).to.have.property("data", "test");
 		});
 
+		it("should render computed as Text", () => {
+			const sig = signal("test");
+			const comp = computed(() => `${sig} ${sig}`);
+			render(<span>{comp}</span>);
+			const span = scratch.firstChild;
+			expect(span).to.have.property("firstChild").that.is.an.instanceOf(Text);
+			const text = span?.firstChild;
+			expect(text).to.have.property("data", "test test");
+		});
+
 		it("should update Signal-based Text (no parent component)", () => {
 			const sig = signal("test");
 			render(<span>{sig}</span>);
@@ -149,7 +159,7 @@ describe("@preact/signals-react", () => {
 
 			function App() {
 				sig.value;
-				return useMemo(() => <Inner foo={1} />, []);
+				return useMemo(() => <Inner />, []);
 			}
 
 			render(<App />);