fix: Update SuspenseList to handle hydration context and add unit tests for resolveSSRNode and createResource functions (#2531)

* fix: Update `SuspenseList` to handle hydration context

* chore: add changeset for `SuspenseList` hydration context fix

* test: add unit tests for `resolveSSRNode` and `createResource` functions

* chore: add changeset for `resolveSSRNode` and `createResource` tests

* chore: add TODO for `revealOrder` and `tail` support in `SuspenseList`

Author: dennev

.changeset/late-melons-raise.md

@@ -0,0 +1,5 @@
+---
+"solid-js": patch
+---
+
+Update `SuspenseList` to handle hydration context

.changeset/sad-heads-smell.md

@@ -0,0 +1,5 @@
+---
+"solid-js": patch
+---
+
+Add unit tests for `resolveSSRNode` and `createResource` functions

packages/solid/src/server/rendering.ts

@@ -1,16 +1,16 @@
 import {
-  Owner,
+  Accessor,
+  castError,
+  catchError,
+  cleanNode,
   createContext,
   createMemo,
-  useContext,
+  createOwner,
+  Owner,
   runWithOwner,
-  catchError,
-  Accessor,
   Setter,
   Signal,
-  castError,
-  cleanNode,
-  createOwner
+  useContext
 } from "./reactive.js";
 import type { JSX } from "../jsx.js";
 
@@ -623,7 +623,14 @@ export function SuspenseList(props: {
   revealOrder: "forwards" | "backwards" | "together";
   tail?: "collapsed" | "hidden";
 }) {
-  // TODO: support tail options
+  // TODO: support revealOrder and tail options
+  if (sharedConfig.context && !sharedConfig.context.noHydrate) {
+    const c = sharedConfig.context;
+    setHydrateContext(nextHydrateContext());
+    const result = props.children;
+    setHydrateContext(c);
+    return result;
+  }
   return props.children;
 }
 

packages/solid/test/rendering.spec.ts

@@ -0,0 +1,52 @@
+import { describe, expect, test } from "vitest";
+import { createResource } from "../src/index.js";
+import { resolveSSRNode } from "dom-expressions/src/server.js";
+
+describe("resolveSSRNode", () => {
+  test("should resolve a string node", () => {
+    expect(resolveSSRNode("Hello World")).toBe("Hello World");
+  });
+
+  test("should resolve a null or boolean node", () => {
+    expect(resolveSSRNode(null)).toBe("");
+    expect(resolveSSRNode(false)).toBe("");
+  });
+
+  test("should resolve an array of nodes", () => {
+    const nodes = ["<div>", "<span>", "</span>", "</div>"];
+    expect(resolveSSRNode(nodes)).toBe("<div><!--!$--><span><!--!$--></span><!--!$--></div>");
+  });
+
+  test("should resolve an object with 't' property", () => {
+    const node = { t: "<div>Text</div>" };
+    expect(resolveSSRNode(node)).toBe("<div>Text</div>");
+  });
+
+  test("should resolve a function node", () => {
+    const fn = () => "dynamic content";
+    expect(resolveSSRNode(fn)).toBe("dynamic content");
+  });
+});
+
+describe("createResource", () => {
+  test("should return initial value immediately if provided", () => {
+    const [data] = createResource(() => Promise.resolve("test"), { initialValue: "loading" });
+    expect(data()).toBe("loading");
+  });
+
+  test("should handle a promise and update the value", async () => {
+    const [data, { refetch }] = createResource(
+      () => new Promise(resolve => setTimeout(() => resolve("Success!"), 10))
+    );
+
+    // Initially, data should be undefined, and loading should be true
+    expect(data()).toBeUndefined();
+    expect(data.loading).toBe(true);
+
+    await new Promise(r => setTimeout(r, 20)); // Wait for the promise to resolve
+
+    // After resolution, data should have the new value, and loading should be false
+    expect(data()).toBe("Success!");
+    expect(data.loading).toBe(false);
+  });
+});