fix: handle pending store reads in server projections

Co-authored-by: Brenley Dueck <brenleydueck@gmail.com>
Co-authored-by: Cursor <cursoragent@cursor.com>

Author: 3 people

.changeset/fix-ssr-server-projection-pending-store.md

@@ -0,0 +1,5 @@
+---
+"solid-js": patch
+---
+
+Handle pending store reads in server projections during SSR.

packages/solid/src/server/signals.ts

@@ -1080,7 +1080,34 @@ export function createProjection<T extends object>(
   const draft = useProxy ? createDeepProxy(state as any, patches) : (state as any as T);
 
   const runProjection = () => runWithOwner(owner, () => fn(draft));
-  const result = runProjection();
+  let result: void | T | Promise<void | T> | AsyncIterable<void | T>;
+  try {
+    result = runProjection();
+  } catch (error) {
+    if (!(error instanceof NotReadyError)) throw error;
+
+    const deferred = createDeferredPromise<T>();
+    const [pending, markReady] = createPendingProxy(state, deferred.promise);
+    settleServerAsync<void | T, T>(
+      Promise.reject(error),
+      () => runProjection() as void | T | PromiseLike<void | T>,
+      deferred,
+      (value: void | T) => {
+        if (value !== undefined && value !== state && value !== draft) {
+          Object.assign(state, value);
+        }
+        markReady();
+        return state as T;
+      },
+      (_error: any) => {
+        markReady();
+      },
+      () => disposed
+    );
+    if (ctx?.async && !getContext(NoHydrateContext) && owner.id)
+      ctx.serialize(owner.id, deferred.promise, options?.deferStream);
+    return pending;
+  }
 
   // Async iterable (generator)
   const iteratorFn = (result as any)?.[Symbol.asyncIterator];

packages/solid/test/server/ssr-async.spec.ts

@@ -4,6 +4,7 @@ import {
   createRoot,
   createMemo,
   createSignal,
+  createStore,
   createProjection,
   NotReadyError,
   getOwner,
@@ -567,6 +568,41 @@ describe("Loading SSR Async", () => {
       expect([...fragmentResults.values()][0]).toBe("<div>HELLO</div>");
     });
 
+    test("sync projection callback can wrap a pending async store read", async () => {
+      const { context, registeredFragments, fragmentResults } = createMockSSRContext();
+      sharedConfig.context = context;
+
+      const d = deferred<{ id: string; name: string }[]>();
+
+      createRoot(
+        () => {
+          Loading({
+            fallback: "Loading...",
+            get children() {
+              const [users] = createStore(() => d.promise, [] as { id: string; name: string }[]);
+              const projected = createProjection(
+                () => users.map(user => ({ ...user, label: user.name.toUpperCase() })),
+                [] as { id: string; name: string; label: string }[]
+              );
+              return ssr(["<div>", "</div>"], () =>
+                projected.map(user => user.label).join(",")
+              ) as any;
+            }
+          });
+        },
+        { id: "t" }
+      );
+
+      expect(registeredFragments.size).toBe(1);
+
+      d.resolve([{ id: "1", name: "hello" }]);
+      await tick();
+      await tick();
+
+      expect(fragmentResults.size).toBe(1);
+      expect([...fragmentResults.values()][0]).toBe("<div>HELLO</div>");
+    });
+
     test("async iterator memo can wrap a pending async read before first yield", async () => {
       const { context, fragmentResults } = createMockSSRContext();
       sharedConfig.context = context;