Fixed incomplete SSR hydration (#22)

Author: smikhalevski

src/main/enableSSRHydration.ts

@@ -36,8 +36,10 @@ export function enableSSRHydration(executorManager: ExecutorManager, options: SS
   }
 
   window.__REACT_EXECUTOR_SSR_STATE__ = {
-    push(chunk) {
-      executorManager.hydrate(stateParser(chunk));
+    push() {
+      for (let i = 0; i < arguments.length; ++i) {
+        executorManager.hydrate(stateParser(arguments[i]));
+      }
     },
   };
 }

src/main/global.d.ts

@@ -4,6 +4,6 @@ declare global {
   const __REACT_EXECUTOR_DEVTOOLS__: { plugin: ExecutorPlugin } | undefined;
 
   interface Window {
-    __REACT_EXECUTOR_SSR_STATE__?: { push(stateStr: string): void };
+    __REACT_EXECUTOR_SSR_STATE__?: { push(...stateStrs: string[]): void };
   }
 }

src/main/ssr/ReadableSSRExecutorManager.ts

@@ -23,7 +23,7 @@ export class ReadableSSRExecutorManager extends SSRExecutorManager implements Re
 
         const hydrationChunk = this.nextHydrationChunk();
 
-        if (hydrationChunk !== undefined) {
+        if (hydrationChunk !== '') {
           controller.enqueue(hydrationChunk);
         }
       },

src/main/ssr/SSRExecutorManager.ts

@@ -58,29 +58,29 @@ export class SSRExecutorManager extends ExecutorManager {
   }
 
   /**
-   * Returns a chunk that hydrates the client with the state accumulated during SSR, or `undefined` if there are no
+   * Returns a chunk that hydrates the client with the state accumulated during SSR, or an empty string if there are no
    * state changes since the last time {@link nextHydrationChunk} was called.
    */
-  nextHydrationChunk(): string | undefined {
-    const sources = [];
+  nextHydrationChunk(): string {
+    const stateStrs = [];
 
     for (const executor of this._executors.values()) {
       const hydratedVersion = this._hydratedVersions.get(executor);
 
       if ((hydratedVersion === undefined || hydratedVersion !== executor.version) && this._executorFilter(executor)) {
-        sources.push(JSON.stringify(this._stateStringifier(executor.toJSON())));
+        stateStrs.push(JSON.stringify(this._stateStringifier(executor.toJSON())));
 
         this._hydratedVersions.set(executor, executor.version);
       }
     }
 
-    if (sources.length === 0) {
-      return;
+    if (stateStrs.length === 0) {
+      return '';
     }
 
     return (
       '<script>(window.__REACT_EXECUTOR_SSR_STATE__=window.__REACT_EXECUTOR_SSR_STATE__||[]).push(' +
-      sources.join(',') +
+      stateStrs.join(',') +
       ');var e=document.currentScript;e&&e.parentNode.removeChild(e)</script>'
     );
   }

src/main/ssr/node/PipeableSSRExecutorManager.ts

@@ -29,11 +29,12 @@ export class PipeableSSRExecutorManager extends SSRExecutorManager {
 
           const hydrationChunk = this.nextHydrationChunk();
 
-          if (hydrationChunk !== undefined) {
+          if (hydrationChunk !== '') {
             stream.write(hydrationChunk, callback);
-          } else {
-            callback();
+            return;
           }
+
+          callback();
         });
       },
 

src/main/types.ts

@@ -80,18 +80,18 @@ export interface ExecutorEvent<Value = any> {
    * See {@link ExecutorEvent} for more details.
    */
   type:
-    | 'plugin_configured'
     | 'attached'
+    | 'detached'
     | 'activated'
-    | 'annotated'
+    | 'deactivated'
     | 'pending'
     | 'fulfilled'
     | 'rejected'
     | 'aborted'
     | 'cleared'
     | 'invalidated'
-    | 'deactivated'
-    | 'detached'
+    | 'annotated'
+    | 'plugin_configured'
     | (string & {});
 
   /**

src/test/enableSSRHydration.test.ts

@@ -28,6 +28,41 @@ describe('enableSSRHydration', () => {
     expect(executor.settledAt).toBe(50);
   });
 
+  test('hydrates multiple executors that are added after', () => {
+    const manager = new ExecutorManager();
+
+    enableSSRHydration(manager);
+
+    window.__REACT_EXECUTOR_SSR_STATE__!.push(
+      JSON.stringify({
+        key: 'xxx',
+        isFulfilled: true,
+        value: 111,
+        reason: undefined,
+        settledAt: 50,
+        invalidatedAt: 0,
+        annotations: {},
+      }),
+      JSON.stringify({
+        key: 'yyy',
+        isFulfilled: true,
+        value: 222,
+        reason: undefined,
+        settledAt: 100,
+        invalidatedAt: 0,
+        annotations: {},
+      })
+    );
+
+    const executor1 = manager.getOrCreate('xxx');
+    const executor2 = manager.getOrCreate('yyy');
+
+    expect(executor1.value).toBe(111);
+    expect(executor1.settledAt).toBe(50);
+    expect(executor2.value).toBe(222);
+    expect(executor2.settledAt).toBe(100);
+  });
+
   test('hydrates an executor that was added before', () => {
     window.__REACT_EXECUTOR_SSR_STATE__ = [
       JSON.stringify({

src/test/ssr/SSRExecutorManager.test.ts

@@ -10,19 +10,19 @@ describe('SSRExecutorManager', () => {
 
       manager.getOrCreate('xxx');
 
-      expect(manager.nextHydrationChunk()).toBeUndefined();
+      expect(manager.nextHydrationChunk()).toBe('');
     });
 
-    test('returns a hydration chunk', async () => {
+    test('returns the hydration chunk for a single executor', async () => {
       const manager = new SSRExecutorManager();
 
       const executor = manager.getOrCreate('xxx');
 
-      expect(manager.nextHydrationChunk()).toBeUndefined();
+      expect(manager.nextHydrationChunk()).toBe('');
 
       const promise = executor.execute(() => 111);
 
-      expect(manager.nextHydrationChunk()).toBeUndefined();
+      expect(manager.nextHydrationChunk()).toBe('');
 
       await promise;
 
@@ -31,6 +31,27 @@ describe('SSRExecutorManager', () => {
       );
     });
 
+    test('returns the hydration chunk for multiple executors', async () => {
+      const manager = new SSRExecutorManager();
+
+      const executor1 = manager.getOrCreate('xxx');
+      const executor2 = manager.getOrCreate('yyy');
+
+      expect(manager.nextHydrationChunk()).toBe('');
+
+      const promise1 = executor1.execute(() => 111);
+      const promise2 = executor2.execute(() => 222);
+
+      expect(manager.nextHydrationChunk()).toBe('');
+
+      await promise1;
+      await promise2;
+
+      expect(manager.nextHydrationChunk()).toBe(
+        '<script>(window.__REACT_EXECUTOR_SSR_STATE__=window.__REACT_EXECUTOR_SSR_STATE__||[]).push("{\\"key\\":\\"xxx\\",\\"isFulfilled\\":true,\\"value\\":111,\\"annotations\\":{},\\"settledAt\\":50,\\"invalidatedAt\\":0}","{\\"key\\":\\"yyy\\",\\"isFulfilled\\":true,\\"value\\":222,\\"annotations\\":{},\\"settledAt\\":50,\\"invalidatedAt\\":0}");var e=document.currentScript;e&&e.parentNode.removeChild(e)</script>'
+      );
+    });
+
     test('returns only changed executor states in consequent hydration chunks', async () => {
       const manager = new SSRExecutorManager();
 
@@ -43,7 +64,7 @@ describe('SSRExecutorManager', () => {
 
       const promise = executor2.execute(() => 222);
 
-      expect(manager.nextHydrationChunk()).toBeUndefined();
+      expect(manager.nextHydrationChunk()).toBe('');
 
       await promise;
 
@@ -60,7 +81,7 @@ describe('SSRExecutorManager', () => {
         .execute(() => Promise.reject('expected'))
         .catch(noop);
 
-      expect(manager.nextHydrationChunk()).toBeUndefined();
+      expect(manager.nextHydrationChunk()).toBe('');
     });
 
     test('respects executorFilter option', async () => {
@@ -78,7 +99,7 @@ describe('SSRExecutorManager', () => {
       );
     });
 
-    test('respects executorFilter option', async () => {
+    test('respects stateStringifier option', async () => {
       const stateStringifierMock = jest.fn(JSON.stringify);
 
       const manager = new SSRExecutorManager({