React <SignalValue> shim creates infinite recursion with Storybook

[bensaufley]

• Check if updating to the latest version resolves the issue

Environment

• I am using @preact/signals-core
• I am using @preact/signals
• I am using @preact/signals-react
  • I understand usage changed in v2, and I've followed the React Integration instructions

Describe the bug

I'm working on migrating a codebase that uses Signals from Preact to React and encountered an issue where components that use Signals throw a "Maximum call stack size exceeded" error. After some digging, I discovered the issue is that Storybook has an internal function called simplifyNodeForStringify, which is used for JSX stringification for docs (original PR: storybookjs/storybook#19188). This iterates over ReactNodes' props, recursively, and nullifies _owner in all ReactNodes. Because the SignalValue shim for signals-react defines the prop data as this, this creates infinite recursion.

To Reproduce

No actions needed to reproduce: go here and you can see it https://codesandbox.io/p/sandbox/jqpkdl

Expected behavior

I'm not sure what the data = this prop shim is intended to do, so I'm not sure how to resolve the issue. But obviously, the expectation is that @preact/signals-react does not break Storybook.

[bensaufley]

More specifically this is related to @storybook/addon-docs. The good news for me is … we actually weren't really making use of the docs addon, and I'm just going to remove it. But I think the issue is probably worth looking into.

[samuellwn]

To work around this bug, include the following in your main.jsx or somewhere it will always be executed.

import { signal, Signal } from "@preact/signals-react";

const testSignal = signal();
if ((testSignal as any)?.props?.data === testSignal) {
	Object.defineProperty(Signal.prototype, "props", {
		get() {
			return { data: { value: this.value, name: this.name } };
		},
	});
}