Force useDeepSignal to track the component

.changeset/strong-adults-march.md

@@ -2,4 +2,4 @@
 "deepsignal": minor
 ---
 
-Add a peer dependency for @preact/signals-react 2.0.0
+Add support for @preact/signals-react 2.0.0

README.md

@@ -91,7 +91,8 @@ import { deepSignal } from "deepsignal/react";
 const state = deepSignal({});
 ```
 
-Starting from `@preact/[email protected]`, you should also follow the [React integration guide of `@preact/signals-react`](https://github.com/preactjs/signals/blob/main/packages/react/README.md#react-integration) to choose one of the integration methods.
+- If you want to use `deepSignal` outside of the components, please follow the [React integration guide of `@preact/signals-react`](https://github.com/preactjs/signals/blob/main/packages/react/README.md#react-integration) to choose one of the integration methods.
+- If rely exclusively on `useDeepSignal`, no integration is required.
 
 ### Without Preact/React
 

packages/deepsignal/react/src/index.ts

@@ -1,8 +1,10 @@
 import "@preact/signals-react";
 import { useMemo } from "react";
 import { deepSignal, type DeepSignal } from "../../core/src";
+import { useSignals } from "@preact/signals-react/runtime";
 
 export const useDeepSignal = <T extends object>(obj: T): DeepSignal<T> => {
+	useSignals();
 	return useMemo(() => deepSignal(obj), []);
 };
 

packages/deepsignal/react/test/index.test.tsx

@@ -6,24 +6,28 @@ import { createElement } from "react";
 import { createRoot, Root } from "react-dom/client";
 import { act } from "react-dom/test-utils";
 import { useDeepSignal, type DeepSignal } from "deepsignal/react";
-import "@preact/signals/auto";
 
 describe("deepsignal/react", () => {
 	let scratch: HTMLDivElement;
 	let root: Root;
-	function render(element: Parameters<Root["render"]>[0]) {
-		act(() => root.render(element));
-	}
+	let render: Root["render"];
 
-	const window = globalThis as any;
+	beforeEach(async () => {
+		scratch = document.createElement("div");
+		document.body.appendChild(scratch);
 
-	beforeEach(() => {
-		scratch = window.document.createElement("div");
-		root = createRoot(scratch);
+		const realRoot = createRoot(scratch);
+		root = {
+			render: element => act(() => realRoot.render(element)),
+			unmount: () => act(() => realRoot.unmount()),
+		};
+
+		render = root.render.bind(root);
 	});
 
 	afterEach(() => {
 		act(() => root.unmount());
+		scratch.remove();
 	});
 
 	describe("useDeepSignal", () => {
@@ -38,7 +42,7 @@ describe("deepsignal/react", () => {
 			}
 
 			// @ts-ignore
-			render(<App />);
+			await render(<App />);
 
 			expect(scratch.textContent).to.equal("test");
 			expect(spy).to.be.calledOnce;