fix: allow suspense hydration

Author: theKashey

.size-limit.js

@@ -2,7 +2,7 @@ module.exports = [
   {
     path: ['dist/es2015/entrypoints/index.js', 'dist/es2015/entrypoints/boot.js'],
     ignore: ['tslib'],
-    limit: '4.1 KB',
+    limit: '4.2 KB',
   },
   {
     path: 'dist/es2015/entrypoints/index.js',

.size.json

@@ -2,16 +2,16 @@
   {
     "name": "dist/es2015/entrypoints/index.js, dist/es2015/entrypoints/boot.js",
     "passed": true,
-    "size": 4187
+    "size": 4217
   },
   {
     "name": "dist/es2015/entrypoints/index.js",
     "passed": true,
-    "size": 3817
+    "size": 3852
   },
   {
     "name": "dist/es2015/entrypoints/boot.js",
     "passed": true,
-    "size": 1923
+    "size": 1938
   }
 ]

src/entrypoints/server.ts

@@ -4,7 +4,7 @@ import { drainHydrateMarks, printDrainHydrateMarks } from '../loadable/marks';
 import { createLoadableStream } from '../loadable/stream';
 import { getLoadableTrackerCallback } from '../trackers/globalTracker';
 import { createLoadableTransformer } from '../transformers/loadableTransformer';
-import { Stream } from '../types';
+import { Stream as ImportedStreamTracker } from '../types';
 import { ImportedStream } from '../ui/context';
 
 export {
@@ -17,5 +17,5 @@ export {
   getLoadableTrackerCallback,
   getMarkedChunks,
   getMarkedFileNames,
-  Stream,
+  ImportedStreamTracker,
 };

src/ui/LazyBoundary.tsx

@@ -11,7 +11,8 @@ const LazyClientBoundary: React.FC<{
 }> = ({ children, fallback }) => (
   <React.Suspense
     // we keep fallback null during hydration as it is expected behavior for "ssr-ed" Suspense blocks - they should not "fallback"
-    fallback={useIsClientPhase() ? fallback : null}
+    // see https://github.com/sebmarkbage/react/blob/185700696ebbe737c99bd6c4b678d5f2a923bd29/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js#L668-L682
+    fallback={useIsClientPhase() ? fallback : (undefined as any)}
   >
     {children}
   </React.Suspense>

src/ui/context.tsx

@@ -2,16 +2,14 @@ import * as React from 'react';
 import { defaultStream } from '../loadable/stream';
 import { Stream } from '../types';
 
-interface TakeProps {
-  stream: Stream;
-}
-
 export const streamContext = React.createContext(defaultStream);
 
 /**
  * SSR. Tracker for used marks
  */
-export const ImportedStream: React.FC<TakeProps> = ({ stream, children, ...props }) => {
+export const ImportedStream: React.FC<{
+  stream: Stream;
+}> = ({ stream, children, ...props }) => {
   if (process.env.NODE_ENV !== 'development') {
     if ('takeUID' in props) {
       throw new Error('react-imported-component: `takeUID` was replaced by `stream`.');