Merge pull request #59 from luisherranz/support-preact-signals-react-2

Support @preact/signals-react 2

.changeset/strong-adults-march.md

@@ -0,0 +1,5 @@
+---
+"deepsignal": minor
+---
+
+Add support for @preact/signals-react 2.0.0

README.md

@@ -91,6 +91,9 @@ import { deepSignal } from "deepsignal/react";
 const state = deepSignal({});
 ```
 
+- 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.
+- For `useDeepSignal`, no integration is required.
+
 ### Without Preact/React
 
 ```sh

packages/deepsignal/package.json

@@ -45,9 +45,9 @@
 		"prepublishOnly": "cp ../../README.md . && cd ../.. && pnpm build"
 	},
 	"peerDependencies": {
-		"@preact/signals-core": "^1.3.1",
+		"@preact/signals-core": "^1.5.1",
 		"@preact/signals": "^1.1.4",
-		"@preact/signals-react": "^1.3.3",
+		"@preact/signals-react": "^1.3.8 || ^2.0.0",
 		"preact": "^10.16.0"
 	},
 	"peerDependenciesMeta": {
@@ -67,9 +67,9 @@
 	"devDependencies": {
 		"preact": "10.9.0",
 		"preact-render-to-string": "^5.2.4",
-		"@preact/signals-core": "^1.3.1",
+		"@preact/signals-core": "^1.5.1",
 		"@preact/signals": "^1.1.4",
-		"@preact/signals-react": "^1.3.3",
+		"@preact/signals-react": "^2.0.0",
 		"@types/react": "^18.0.18",
 		"@types/react-dom": "^18.0.6",
 		"react": "^18.2.0",

packages/deepsignal/react/package.json

@@ -9,8 +9,8 @@
 	"source": "src/index.ts",
 	"license": "MIT",
 	"dependencies": {
-		"@preact/signals-core": "^1.3.1",
-		"@preact/signals-react": "^1.3.3"
+		"@preact/signals-core": "^1.5.1",
+		"@preact/signals-react": "^2.0.0"
 	},
 	"peerDependencies": {
 		"react": "17.x || 18.x"

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

@@ -10,19 +10,24 @@ import { useDeepSignal, type DeepSignal } from "deepsignal/react";
 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", () => {
@@ -37,7 +42,7 @@ describe("deepsignal/react", () => {
 			}
 
 			// @ts-ignore
-			render(<App />);
+			await render(<App />);
 
 			expect(scratch.textContent).to.equal("test");
 			expect(spy).to.be.calledOnce;