WIP: Support React 18

examples/playground/components/after-paint/with-ssr.tsx

@@ -1,15 +1,12 @@
 import React from 'react';
 
-import { controlFetch, isServer } from '../../utils';
+import { createSuspendableData } from '../../utils';
 import { Result } from '../common/result';
 
-let hasThrown = false;
+const useSuspendableData = createSuspendableData();
 
 const ComponentWithSSR = () => {
-  if (!hasThrown && !isServer()) {
-    hasThrown = true;
-    throw controlFetch(true);
-  }
+  useSuspendableData();
 
   return <Result hasSsr />;
 };

examples/playground/components/after-paint/without-ssr.tsx

@@ -1,15 +1,12 @@
 import React from 'react';
 
-import { controlFetch } from '../../utils';
+import { createSuspendableData } from '../../utils';
 import { Result } from '../common/result';
 
-let hasThrown = false;
+const useSuspendableData = createSuspendableData();
 
 const ComponentWithoutSSR = () => {
-  if (!hasThrown) {
-    hasThrown = true;
-    throw controlFetch(true);
-  }
+  useSuspendableData();
 
   return <Result />;
 };

examples/playground/components/common/result.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { isServer } from '../../utils';
 
@@ -8,6 +8,11 @@ type Props = {
 };
 
 export const Result = ({ isFallback, hasSsr }: Props) => {
+  const [isDone, setDone] = useState(isFallback);
+  useEffect(() => {
+    setDone(true);
+  }, []);
+
   return (
     <div
       className="result"
@@ -16,10 +21,12 @@ export const Result = ({ isFallback, hasSsr }: Props) => {
       <h4>{hasSsr ? 'With ssr' : 'Without ssr'}</h4>
       <ul style={{ display: 'flex', margin: 0 }}>
         <li style={{ paddingRight: '1em' }}>
-          reactive: {isServer() ? '🅾️' : isFallback ? '☑️' : '✅'}
+          reactive:{' '}
+          {isServer() || !isDone ? '🅾️' : isFallback || !isDone ? '☑️' : '✅'}
         </li>
         <li style={{ paddingRight: '1em' }}>
-          content: {isFallback ? '🅾️' : isServer() ? '☑️' : '✅'}
+          content:{' '}
+          {isFallback || !isDone ? '🅾️' : isServer() || !isDone ? '☑️' : '✅'}
         </li>
       </ul>
     </div>

examples/playground/components/common/section.tsx

@@ -3,6 +3,7 @@ import { LazySuspense } from 'react-loosely-lazy';
 
 import { Result } from './result';
 import { Progress } from './progress';
+import { isServer } from '../../utils';
 
 type Props = {
   components: {
@@ -36,7 +37,8 @@ export const Section = memo(
         )}
         {WithoutSSR != null && (
           <LazySuspense fallback={<Result isFallback />}>
-            <WithoutSSR />
+            {/* given use renderToString, we fake SSR fallback render */}
+            {isServer() ? <Result isFallback /> : <WithoutSSR />}
           </LazySuspense>
         )}
       </Wrapper>

examples/playground/components/custom-wait/with-ssr.tsx

@@ -1,15 +1,12 @@
 import React from 'react';
 
-import { controlFetch, isServer } from '../../utils';
+import { createSuspendableData } from '../../utils';
 import { Result } from '../common/result';
 
-let hasThrown = false;
+const useSuspendableData = createSuspendableData();
 
 const ComponentWithSSR = () => {
-  if (!hasThrown && !isServer()) {
-    hasThrown = true;
-    throw controlFetch(true);
-  }
+  useSuspendableData();
 
   return <Result hasSsr />;
 };

examples/playground/components/custom-wait/without-ssr.tsx

@@ -1,15 +1,12 @@
 import React from 'react';
 
-import { controlFetch } from '../../utils';
+import { createSuspendableData } from '../../utils';
 import { Result } from '../common/result';
 
-let hasThrown = false;
+const useSuspendableData = createSuspendableData();
 
 const ComponentWithoutSSR = () => {
-  if (!hasThrown) {
-    hasThrown = true;
-    throw controlFetch(true);
-  }
+  useSuspendableData();
 
   return <Result />;
 };

examples/playground/components/for-paint/with-ssr.tsx

@@ -1,15 +1,12 @@
 import React from 'react';
 
-import { controlFetch, isServer } from '../../utils';
+import { createSuspendableData } from '../../utils';
 import { Result } from '../common/result';
 
-let hasThrown = false;
+const useSuspendableData = createSuspendableData();
 
 const ComponentWithSSR = () => {
-  if (!hasThrown && !isServer()) {
-    hasThrown = true;
-    throw controlFetch(true);
-  }
+  useSuspendableData();
 
   return <Result hasSsr />;
 };

examples/playground/components/for-paint/without-ssr.tsx

@@ -1,15 +1,12 @@
 import React from 'react';
 
-import { controlFetch } from '../../utils';
+import { createSuspendableData } from '../../utils';
 import { Result } from '../common/result';
 
-let hasThrown = false;
+const useSuspendableData = createSuspendableData();
 
 const ComponentNoSSR = () => {
-  if (!hasThrown) {
-    hasThrown = true;
-    throw controlFetch(true);
-  }
+  useSuspendableData();
 
   return <Result />;
 };

examples/playground/components/lazy/without-ssr.tsx

@@ -1,14 +1,11 @@
 import React from 'react';
-import { controlFetch } from '../../utils';
+import { createSuspendableData } from '../../utils';
 import { Result } from '../common/result';
 
-let hasThrown = false;
+const useSuspendableData = createSuspendableData();
 
 const ComponentWithSSR = () => {
-  if (!hasThrown) {
-    hasThrown = true;
-    throw controlFetch(true);
-  }
+  useSuspendableData();
 
   return <Result />;
 };

examples/playground/constants.tsx

@@ -7,7 +7,7 @@ export const steps = [
   'PAINT READY',
   'AFTER LOADING',
   'AFTER FETCHING',
-  'AFTER READY', // also 'LAZY READY'
+  'AFTER READY',
   'CUSTOM LOADING',
   'CUSTOM FETCHING',
   'CUSTOM READY',

examples/playground/index.tsx

@@ -1,11 +1,17 @@
-import React, { useState, useEffect, FunctionComponent } from 'react';
-import { hydrate, render } from 'react-dom';
+import React, {
+  useState,
+  useEffect,
+  FunctionComponent,
+  StrictMode,
+} from 'react';
+import { createRoot, hydrateRoot } from 'react-dom/client';
 import { renderToString } from 'react-dom/server';
 
 import { useLazyPhase, MODE } from 'react-loosely-lazy';
-import { listeners, steps, pastSteps } from './constants';
 
+import { listeners, steps, pastSteps } from './constants';
 import { buildServerComponents, buildClientComponents } from './components';
+import { isFailSsr, isRender } from './utils';
 
 /**
  * Controls App
@@ -84,37 +90,42 @@ const App = ({ initialStep, components }: AppProps) => {
   }, [step, startNextPhase]);
 
   return (
-    <>
+    <StrictMode>
       <h1>&nbsp;</h1>
       <main>
         <components.ForPaint />
         <components.AfterPaint />
         <components.Lazy />
         <components.CustomWait step={step} />
       </main>
-    </>
+    </StrictMode>
   );
 };
 
 const renderApp = (v: string) => {
   const appContainer = document.querySelector('#app');
-  const isFailSsr = window.location.search.includes('failssr');
-  const isRender = isFailSsr || window.location.search.includes('render');
-  const mode = isRender ? MODE.RENDER : MODE.HYDRATE;
+  const mode = isRender() ? MODE.RENDER : MODE.HYDRATE;
 
-  if (v === 'SSR' && appContainer && !isFailSsr) {
+  if (v === 'SSR' && appContainer && !isFailSsr()) {
     const components = buildServerComponents(mode);
     const ssr = renderToString(<App initialStep={v} components={components} />);
-    appContainer.innerHTML = isRender ? `<div>${ssr}</div>` : ssr;
+    appContainer.innerHTML = isRender() ? `<div>${ssr}</div>` : ssr;
   }
   if (v === 'PAINT LOADING') {
     const components = buildClientComponents(mode);
-    const renderer = isRender ? render : hydrate;
-
-    renderer(<App initialStep={v} components={components} />, appContainer);
+    if (isRender()) {
+      createRoot(appContainer!).render(
+        <App initialStep={v} components={components} />
+      );
+    } else {
+      hydrateRoot(
+        appContainer!,
+        <App initialStep={v} components={components} />
+      );
+    }
   }
 };
 
 listeners.add(renderApp);
 
-render(<Controls />, document.querySelector('#controls'));
+createRoot(document.querySelector('#controls')!).render(<Controls />);

examples/playground/utils.ts

@@ -1,6 +1,9 @@
 import { listeners } from './constants';
 
 export const isServer = () => window.name === 'nodejs';
+export const isFailSsr = () => window.location.search.includes('failssr');
+export const isRender = () =>
+  isFailSsr() || window.location.search.includes('render');
 
 export const controlLoad = <T>(result: T): Promise<T> => {
   let resolve: (v: T) => void;
@@ -14,7 +17,7 @@ export const controlLoad = <T>(result: T): Promise<T> => {
   return deferred;
 };
 
-export const controlFetch = <T>(result: T): Promise<T> => {
+const controlFetch = <T>(result: T): Promise<T> => {
   let resolve: (v: T) => void;
   const deferred = new Promise<T>(r => {
     resolve = r;
@@ -25,3 +28,20 @@ export const controlFetch = <T>(result: T): Promise<T> => {
 
   return deferred;
 };
+
+export const createSuspendableData = () => {
+  let promise: Promise<boolean> | null = null;
+  let resolved = false;
+
+  return function useSuspendableData() {
+    if (promise == null && !isServer()) {
+      promise = controlFetch(true);
+    }
+
+    if (promise && !resolved) {
+      throw promise.then(() => {
+        resolved = true;
+      });
+    }
+  };
+};