Removed difference in behaviour of @preact/signals and @preact/signal…

packages/preact/src/index.ts

@@ -1,4 +1,4 @@
-import { options, Component } from "preact";
+import { options, Component, isValidElement } from "preact";
 import { useRef, useMemo, useEffect } from "preact/hooks";
 import {
 	signal,
@@ -80,9 +80,20 @@ function Text(this: AugmentedComponent, { data }: { data: Signal }) {
 			}
 		}
 
+		const defaultUpdaterCallback = this._updater!._callback;
+
 		// Replace this component's vdom updater with a direct text one:
 		this._updater!._callback = () => {
-			(this.base as Text).data = s.peek();
+			const node = this.base;
+			// if we need to update the text directly, we should ensure that current node is a text node
+			// if it is not, we should promise preact to create it via rerendering the whole component
+			if (isValidElement(s.peek()) || node?.nodeType !== 3) {
+				defaultUpdaterCallback();
+
+				return;
+			}
+
+			(node as Text).data = s.peek();
 		};
 
 		return computed(() => {

packages/preact/test/index.test.tsx

@@ -131,6 +131,93 @@ describe("@preact/signals", () => {
 			await sleep();
 			expect(spy).not.to.have.been.called;
 		});
+
+		it("should support rendering JSX in Text positions", async () => {
+			const sig = signal(<span>test</span>);
+			function App({ x }: { x: typeof sig }) {
+				return <span>{x}</span>;
+			}
+
+			render(<App x={sig} />, scratch);
+
+			const text = scratch.firstChild!.firstChild!;
+
+			expect(text.textContent).to.equal("test");
+			expect(text).to.be.an.instanceOf(HTMLSpanElement);
+			expect(text).to.have.property("firstChild").that.is.an.instanceOf(Text);
+		});
+
+		it("JSX in Text should be reactive", async () => {
+			const sig = signal(<span>test</span>);
+			const spy = sinon.spy();
+			function App({ x }: { x: typeof sig }) {
+				spy();
+				return <span>{x}</span>;
+			}
+
+			render(<App x={sig} />, scratch);
+			expect(spy).to.have.been.calledOnce;
+			spy.resetHistory();
+
+			const text = scratch.firstChild!.firstChild!;
+
+			expect(text.textContent).to.equal("test");
+			expect(text).to.be.an.instanceOf(HTMLSpanElement);
+			expect(text).to.have.property("firstChild").that.is.an.instanceOf(Text);
+
+			sig.value = <div>a</div>;
+
+			expect(spy).not.to.have.been.calledOnce;
+
+			rerender();
+			scratch.firstChild!.firstChild!.textContent!.should.equal("a");
+		});
+
+		it("should support swapping between JSX and string in Text positions", async () => {
+			const sig = signal<JSX.Element | string>(<span>test</span>);
+			function App({ x }: { x: typeof sig }) {
+				return <span>{x}</span>;
+			}
+
+			render(<App x={sig} />, scratch);
+
+			{
+				const text = scratch.firstChild!.firstChild!;
+
+				expect(text.textContent).to.equal("test");
+				expect(text).to.be.an.instanceOf(HTMLSpanElement);
+				expect(text).to.have.property("firstChild").that.is.an.instanceOf(Text);
+			}
+			sig.value = "a";
+			rerender();
+			{
+				const text = scratch.firstChild!.firstChild!;
+				expect(text.nodeType).to.equal(Node.TEXT_NODE);
+				expect(text.textContent).to.equal("a");
+
+				sig.value = "b";
+				expect(text.textContent).to.equal("b");
+			}
+
+			sig.value = <div>c</div>;
+			rerender();
+			await sleep();
+			{
+				const text = scratch.firstChild!.firstChild!;
+
+				expect(text).to.be.an.instanceOf(HTMLDivElement);
+				expect(text.textContent).to.equal("c");
+			}
+			{
+				sig.value = <span>d</span>;
+				rerender();
+				await sleep();
+
+				const text = scratch.firstChild!.firstChild!;
+				expect(text).to.be.an.instanceOf(HTMLSpanElement);
+				expect(text.textContent).to.equal("d");
+			}
+		});
 	});
 
 	describe("Component bindings", () => {
@@ -418,38 +505,44 @@ describe("@preact/signals", () => {
 		});
 	});
 
-	describe('hooks mixed with signals', () => {
-		it('signals should not stop context from propagating', () => {
-			const ctx = createContext({ test: 'should-not-exist' });
+	describe("hooks mixed with signals", () => {
+		it("signals should not stop context from propagating", () => {
+			const ctx = createContext({ test: "should-not-exist" });
 			let update: any;
 
 			function Provider(props: any) {
-				const [test, setTest] = useState('foo');
-				update = setTest
-				return (
-					<ctx.Provider value={{ test }}>{props.children}</ctx.Provider>
-				);
+				const [test, setTest] = useState("foo");
+				update = setTest;
+				return <ctx.Provider value={{ test }}>{props.children}</ctx.Provider>;
 			}
 
-			const s = signal('baz')
+			const s = signal("baz");
 			function Test() {
 				const value = useContext(ctx);
-				return <p>{value.test} {s.value}</p>
+				return (
+					<p>
+						{value.test} {s.value}
+					</p>
+				);
 			}
 
 			function App() {
-				return <Provider><Test /></Provider>
+				return (
+					<Provider>
+						<Test />
+					</Provider>
+				);
 			}
 
 			render(<App />, scratch);
 
-			expect(scratch.innerHTML).to.equal('<p>foo baz</p>')
+			expect(scratch.innerHTML).to.equal("<p>foo baz</p>");
 			act(() => {
-				update('bar')
-			})
-			expect(scratch.innerHTML).to.equal('<p>bar baz</p>')
-		})
-	})
+				update("bar");
+			});
+			expect(scratch.innerHTML).to.equal("<p>bar baz</p>");
+		});
+	});
 
 	describe("useSignalEffect()", () => {
 		it("should be invoked after commit", async () => {