(WIP) Suspense

packages/react-dom/.size-snapshot.json

@@ -19,13 +19,13 @@
     "gzipped": 961
   },
   "dist/curi-react-dom.umd.js": {
-    "bundled": 10609,
-    "minified": 4121,
-    "gzipped": 1741
+    "bundled": 11203,
+    "minified": 4257,
+    "gzipped": 1780
   },
   "dist/curi-react-dom.min.js": {
-    "bundled": 10579,
-    "minified": 4091,
-    "gzipped": 1725
+    "bundled": 11173,
+    "minified": 4227,
+    "gzipped": 1766
   }
 }

packages/react-universal/.size-snapshot.json

@@ -1,8 +1,8 @@
 {
   "dist/curi-react-universal.es.js": {
-    "bundled": 5331,
-    "minified": 2647,
-    "gzipped": 1000,
+    "bundled": 5835,
+    "minified": 2810,
+    "gzipped": 1048,
     "treeshaked": {
       "rollup": {
         "code": 110,
@@ -14,18 +14,18 @@
     }
   },
   "dist/curi-react-universal.js": {
-    "bundled": 5748,
-    "minified": 3001,
-    "gzipped": 1111
+    "bundled": 6282,
+    "minified": 3192,
+    "gzipped": 1162
   },
   "dist/curi-react-universal.umd.js": {
-    "bundled": 6337,
-    "minified": 2670,
-    "gzipped": 1144
+    "bundled": 6901,
+    "minified": 2806,
+    "gzipped": 1190
   },
   "dist/curi-react-universal.min.js": {
-    "bundled": 6327,
-    "minified": 2660,
-    "gzipped": 1128
+    "bundled": 6891,
+    "minified": 2796,
+    "gzipped": 1174
   }
 }

packages/react-universal/src/curiProvider.tsx

@@ -1,10 +1,14 @@
 import React from "react";
 import { Provider } from "./Context";
 
-import { CuriRouter, Emitted } from "@curi/router";
+import {
+  CuriRouter,
+  Emitted,
+} from "@curi/router";
 
 export interface RouterProps {
   children: React.ReactNode;
+  suspend?: boolean;
 }
 
 export default function curiProvider(
@@ -27,7 +31,14 @@ export default function curiProvider(
       const stopResponding = router.observe(
         (emitted: Emitted) => {
           if (!removed) {
-            setState(emitted);
+            if (props.suspend) {
+              // setTimeout until schedule is published
+              setTimeout(() => {
+                setState(emitted);
+              });
+            } else {
+              setState(emitted);
+            }
           }
         },
         { initial: false }

packages/react-universal/src/hooks/useFinishNavigation.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+
+import useCuri from "./useCuri";
+
+export default function useFinishNavigation() {
+  const { navigation } = useCuri();
+  React.useEffect(() => {
+    navigation.finish();
+  }, [navigation]);
+}

packages/react-universal/src/index.ts

@@ -10,6 +10,7 @@ import useActive from "./hooks/useActive";
 import useLocation from "./hooks/useLocation";
 import useHref from "./hooks/useHref";
 import useNavigating from "./hooks/useNavigating";
+import useFinishNavigation from "./hooks/useFinishNavigation";
 import {
   useStatefulNavigationHandler,
   useNavigationHandler
@@ -24,5 +25,6 @@ export {
   useHref,
   useNavigating,
   useStatefulNavigationHandler,
-  useNavigationHandler
+  useNavigationHandler,
+  useFinishNavigation
 };

packages/react-universal/tests/curiProvider.spec.tsx

@@ -25,8 +25,6 @@ describe("curiProvider()", () => {
     ReactDOM.unmountComponentAtNode(node);
   });
 
-  describe("router argument", () => {});
-
   describe("children prop", () => {
     it("renders children", () => {
       const history = InMemory();

packages/react-universal/tests/useFinishNavigation.spec.tsx

@@ -0,0 +1,96 @@
+import "jest";
+import React from "react";
+import ReactDOM from "react-dom";
+import { act } from "react-dom/test-utils"
+import { curi, prepareRoutes } from "@curi/router";
+import { InMemory } from "@hickory/in-memory";
+
+// @ts-ignore (resolved by jest)
+import { curiProvider, useFinishNavigation, useCuri } from "@curi/react-universal";
+
+describe("useFinishNavigation", () => {
+  let node;
+  const routes = prepareRoutes([
+    { name: "Home", path: "" },
+    { name: "About", path: "about" }
+  ]);
+
+  beforeEach(() => {
+    node = document.createElement("div");
+  });
+
+  afterEach(() => {
+    ReactDOM.unmountComponentAtNode(node);
+  });
+
+  it('"finishes" navigation after mounting', () => {
+    const history = InMemory();
+    const router = curi(history, routes, { suspend: true });
+    const Router = curiProvider(router);
+
+    let navigations = [];
+    // intercept and mock navigation.finish()
+    router.observe(
+      ({ navigation }) => {
+        navigation.finish = jest.fn();
+        navigations.push(navigation);
+      }
+    );
+
+    function App() {
+      const { navigation } = useCuri();
+      expect((navigation.finish as jest.Mock).mock.calls.length).toBe(0);
+      useFinishNavigation();
+      return null;
+    }
+
+    act(() => {
+      ReactDOM.render(
+        <Router>
+          <App />
+        </Router>,
+        node
+      );
+    });
+
+    expect(navigations[0].finish.mock.calls.length).toBe(1);
+  });
+
+  it('"finishes" navigation after updating', () => {
+    const history = InMemory();
+    const router = curi(history, routes, { suspend: true });
+    const Router = curiProvider(router);
+
+    let navigations = [];
+    // intercept and mock navigation.finish()
+    router.observe(
+      ({ navigation }) => {
+        navigation.finish = jest.fn();
+        navigations.push(navigation);
+      }
+    );
+
+    function App() {
+      const { navigation } = useCuri();
+      expect((navigation.finish as jest.Mock).mock.calls.length).toBe(0);
+      useFinishNavigation();
+      return null;
+    }
+
+    act(() => {
+      ReactDOM.render(
+        <Router>
+          <App />
+        </Router>,
+        node
+      );
+    });
+    expect(navigations[0].finish.mock.calls.length).toBe(1);
+
+    act(() => {
+      router.navigate({ name: "About" });
+    });
+
+    expect(navigations[1].finish.mock.calls.length).toBe(1);
+  });
+});

packages/react-universal/types/curiProvider.d.ts

@@ -2,5 +2,6 @@ import React from "react";
 import { CuriRouter } from "@curi/router";
 export interface RouterProps {
     children: React.ReactNode;
+    suspend?: boolean;
 }
 export default function curiProvider(router: CuriRouter): React.FunctionComponent<RouterProps>;

packages/react-universal/types/hooks/useFinishNavigation.d.ts

@@ -0,0 +1 @@
+export default function useFinishNavigation(): void;

packages/react-universal/types/index.d.ts

@@ -8,5 +8,6 @@ import useActive from "./hooks/useActive";
 import useLocation from "./hooks/useLocation";
 import useHref from "./hooks/useHref";
 import useNavigating from "./hooks/useNavigating";
+import useFinishNavigation from "./hooks/useFinishNavigation";
 import { useStatefulNavigationHandler, useNavigationHandler } from "./hooks/useNavigationHandler";
-export { curiProvider, Curious, useCuri, useActive, useLocation, useHref, useNavigating, useStatefulNavigationHandler, useNavigationHandler };
+export { curiProvider, Curious, useCuri, useActive, useLocation, useHref, useNavigating, useStatefulNavigationHandler, useNavigationHandler, useFinishNavigation };

packages/router/.size-snapshot.json

@@ -1,8 +1,8 @@
 {
   "dist/curi-router.es.js": {
-    "bundled": 18305,
-    "minified": 6196,
-    "gzipped": 2469,
+    "bundled": 19603,
+    "minified": 6550,
+    "gzipped": 2548,
     "treeshaked": {
       "rollup": {
         "code": 23,
@@ -14,18 +14,18 @@
     }
   },
   "dist/curi-router.js": {
-    "bundled": 18540,
-    "minified": 6386,
-    "gzipped": 2552
+    "bundled": 19838,
+    "minified": 6740,
+    "gzipped": 2630
   },
   "dist/curi-router.umd.js": {
-    "bundled": 30053,
-    "minified": 8979,
-    "gzipped": 3699
+    "bundled": 31415,
+    "minified": 9333,
+    "gzipped": 3784
   },
   "dist/curi-router.min.js": {
-    "bundled": 30013,
-    "minified": 8939,
-    "gzipped": 3681
+    "bundled": 31375,
+    "minified": 9293,
+    "gzipped": 3763
   }
 }