make sure refs work with hydration

bikeshaving · Feb 4, 2024 · 89238ac · 89238ac
1 parent b5e1947
commit 89238ac
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/src/crank.ts b/src/crank.ts
@@ -1216,6 +1216,9 @@ function commitHost<TNode, TScope>(
 	let value = ret.value as TNode;
 	if (hydrationValue != null) {
 		value = ret.value = hydrationValue;
+		if (typeof ret.el.ref === "function") {
+			ret.el.ref(value);
+		}
 	}
 
 	let props = ret.el.props;

diff --git a/test/refs.tsx b/test/refs.tsx
@@ -186,4 +186,13 @@ test("transcluded in async function component", async () => {
 	Assert.is(fn.lastCall.args[0], document.body.firstChild!.firstChild);
 });
 
+test("it works with hydrate", async () => {
+	const fn = Sinon.fake();
+	renderer.hydrate(<div ref={fn}>Hello</div>, document.body);
+	Assert.is(document.body.innerHTML, "<div>Hello</div>");
+	const div = document.body.firstChild;
+	Assert.is(fn.callCount, 1);
+	Assert.is(fn.lastCall.args[0], div);
+});
+
 test.run();