fix: null/undefined signal child hydration now works as expected

CrimsonChi · Sep 19, 2024 · 15ede28 · 15ede28
1 parent 898d795
commit 15ede28
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 4 deletions.
diff --git a/packages/lib/src/dom.ts b/packages/lib/src/dom.ts
@@ -172,7 +172,7 @@ function hydrateDom(vNode: VNode) {
   while (sibling && sibling.type === ELEMENT_TYPE.text) {
     const sib = sibling
     hydrationStack.bumpChildIndex()
-    const prevText = String(unwrap(prev.props.nodeValue))
+    const prevText = String(unwrap(prev.props.nodeValue) ?? "")
     const dom = (prev.dom as Text).splitText(prevText.length)
     sib.dom = dom
     if (Signal.isSignal(sib.props.nodeValue)) {

diff --git a/packages/lib/src/reconciler.ts b/packages/lib/src/reconciler.ts
@@ -256,7 +256,8 @@ function createChild(
   sig: Signal<any> | null = null
 ): VNode | null {
   if (
-    (typeof child === "string" && (child !== "" || sig)) ||
+    sig ||
+    (typeof child === "string" && child !== "") ||
     typeof child === "number" ||
     typeof child === "bigint"
   ) {

diff --git a/sandbox/ssr/src/pages/index/+Page.tsx b/sandbox/ssr/src/pages/index/+Page.tsx
@@ -3,9 +3,13 @@ export function Page() {
   const [codeInput, setCodeInput] = useState(
     "const x = () => <h1>Hello World!</h1>"
   )
-  const compiled = signal("")
+  const compiled = signal<string | undefined>(undefined)
+  const compiled2 = signal<string | undefined>(undefined)
+  const compiled3 = signal<number | undefined>(undefined)
   useEffect(() => {
     compiled.value = "bar"
+    compiled2.value = "test"
+    compiled3.value = 123
   }, [codeInput])
   return (
     <div className="p-6">
@@ -15,7 +19,9 @@ export function Page() {
         oninput={(e) => setCodeInput(e.target.value)}
       />
       <pre>
-        <code style="white-space:normal;">foo {compiled} baz</code>
+        <code style="white-space:normal;">
+          foo {compiled} {compiled2} baz {compiled3}
+        </code>
       </pre>
     </div>
   )