Fix accessing signals from Preact Class Component constructor. (#679)

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

Author: WeirdConstructor

.changeset/loud-impalas-swim.md

@@ -0,0 +1,5 @@
+---
+"@preact/signals": patch
+---
+
+Fix accessing signals from Preact Class Component constructor.

packages/preact/src/index.ts

@@ -1,4 +1,4 @@
-import { options, Component, isValidElement } from "preact";
+import { options, Component, isValidElement, Fragment } from "preact";
 import { useRef, useMemo, useEffect } from "preact/hooks";
 import {
 	signal,
@@ -190,25 +190,29 @@ hook(OptionsTypes.DIFF, (old, vnode) => {
 
 /** Set up Updater before rendering a component */
 hook(OptionsTypes.RENDER, (old, vnode) => {
-	setCurrentUpdater();
-
-	let updater;
+	// Ignore the Fragment inserted by preact.createElement().
+	if (vnode.type !== Fragment) {
+		setCurrentUpdater();
 
-	let component = vnode.__c;
-	if (component) {
-		component._updateFlags &= ~HAS_PENDING_UPDATE;
+		let updater;
 
-		updater = component._updater;
-		if (updater === undefined) {
-			component._updater = updater = createUpdater(() => {
-				component._updateFlags |= HAS_PENDING_UPDATE;
-				component.setState({});
-			});
+		let component = vnode.__c;
+		if (component) {
+			component._updateFlags &= ~HAS_PENDING_UPDATE;
+
+			updater = component._updater;
+			if (updater === undefined) {
+				component._updater = updater = createUpdater(() => {
+					component._updateFlags |= HAS_PENDING_UPDATE;
+					component.setState({});
+				});
+			}
 		}
+
+		currentComponent = component;
+		setCurrentUpdater(updater);
 	}
 
-	currentComponent = component;
-	setCurrentUpdater(updater);
 	old(vnode);
 });
 

packages/preact/test/index.test.tsx

@@ -7,7 +7,13 @@ import {
 	useSignal,
 } from "@preact/signals";
 import type { ReadonlySignal } from "@preact/signals";
-import { createElement, createRef, render, createContext } from "preact";
+import {
+	createElement,
+	createRef,
+	render,
+	createContext,
+	Component,
+} from "preact";
 import type { ComponentChildren, FunctionComponent, VNode } from "preact";
 import { useContext, useEffect, useRef, useState } from "preact/hooks";
 import { setupRerender, act } from "preact/test-utils";
@@ -962,4 +968,37 @@ describe("@preact/signals", () => {
 			"<div><div>4</div><div>5</div><div>6</div></div>"
 		);
 	});
+
+	describe("Preact class Component", () => {
+		it("should support reading signal in class component constructor", async () => {
+			const count = signal(1);
+			const spy = sinon.spy();
+
+			class App extends Component<{ x: number }, unknown> {
+				constructor(props: { x: number }) {
+					super(props);
+					spy("constructor:" + count.value);
+				}
+
+				componentWillMount() {
+					spy("willmount:" + count.value);
+				}
+
+				render() {
+					return <div>{count}</div>;
+				}
+			}
+			expect(() =>
+				act(() => {
+					render(<App x={1} />, scratch);
+					count.value = 2;
+					rerender();
+				})
+			).not.to.throw();
+			expect(scratch.innerHTML).to.equal("<div>2</div>");
+			expect(spy).to.have.been.calledTwice;
+			expect(spy).to.have.been.calledWith("constructor:1");
+			expect(spy).to.have.been.calledWith("willmount:1");
+		});
+	});
 });