@shuvi/router-react 1.0.0-rc.5 → 1.0.0-rc.8

package/esm/Router.js

@@ -1,11 +1,10 @@
 import * as React from 'react';
-import { useRef, useReducer } from 'react';
 import * as PropTypes from 'prop-types';
 import invariant from '@shuvi/utils/lib/invariant';
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
 import { RouterContext, RouteContext } from './contexts';
 import { useInRouterContext } from './hooks';
 import { __DEV__ } from './constants';
-import { useIsomorphicEffect } from './utils';
 /**
  * Provides location context for the rest of the app.
  *
@@ -22,19 +21,13 @@ export function Router({ children = null, static: staticProp = false, router })
             router: router
         };
     }, [staticProp, router]);
-    const unmount = useRef(false);
-    const forceupdate = useReducer(s => s * -1, 1)[1];
-    useIsomorphicEffect(() => () => (unmount.current = true), []);
-    useIsomorphicEffect(() => {
-        router.listen(() => {
-            if (unmount.current) {
-                return;
-            }
-            forceupdate();
-        });
-    }, [router]);
+    const { subscribe, getSnapshot } = React.useMemo(() => ({
+        subscribe: (fn) => router.listen(fn),
+        getSnapshot: () => router.current
+    }), [router]);
+    const current = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
     return (React.createElement(RouterContext.Provider, { value: contextVal },
-        React.createElement(RouteContext.Provider, { children: children, value: router.current })));
+        React.createElement(RouteContext.Provider, { children: children, value: current })));
 }
 if (__DEV__) {
     Router.displayName = 'Router';

package/lib/Router.js

@@ -2,13 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Router = void 0;
 const React = require("react");
-const react_1 = require("react");
 const PropTypes = require("prop-types");
 const invariant_1 = require("@shuvi/utils/lib/invariant");
+const shim_1 = require("use-sync-external-store/shim");
 const contexts_1 = require("./contexts");
 const hooks_1 = require("./hooks");
 const constants_1 = require("./constants");
-const utils_1 = require("./utils");
 /**
  * Provides location context for the rest of the app.
  *
@@ -25,19 +24,13 @@ function Router({ children = null, static: staticProp = false, router }) {
             router: router
         };
     }, [staticProp, router]);
-    const unmount = (0, react_1.useRef)(false);
-    const forceupdate = (0, react_1.useReducer)(s => s * -1, 1)[1];
-    (0, utils_1.useIsomorphicEffect)(() => () => (unmount.current = true), []);
-    (0, utils_1.useIsomorphicEffect)(() => {
-        router.listen(() => {
-            if (unmount.current) {
-                return;
-            }
-            forceupdate();
-        });
-    }, [router]);
+    const { subscribe, getSnapshot } = React.useMemo(() => ({
+        subscribe: (fn) => router.listen(fn),
+        getSnapshot: () => router.current
+    }), [router]);
+    const current = (0, shim_1.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
     return (React.createElement(contexts_1.RouterContext.Provider, { value: contextVal },
-        React.createElement(contexts_1.RouteContext.Provider, { children: children, value: router.current })));
+        React.createElement(contexts_1.RouteContext.Provider, { children: children, value: current })));
 }
 exports.Router = Router;
 if (constants_1.__DEV__) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shuvi/router-react",
-  "version": "1.0.0-rc.5",
+  "version": "1.0.0-rc.8",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/shuvijs/shuvi.git",
@@ -28,15 +28,17 @@
     "node": ">= 12.0.0"
   },
   "dependencies": {
-    "@shuvi/router": "1.0.0-rc.5",
-    "@shuvi/platform-shared": "1.0.0-rc.5",
-    "@shuvi/utils": "1.0.0-rc.5",
-    "prop-types": "^15.8.1"
+    "@shuvi/router": "1.0.0-rc.8",
+    "@shuvi/platform-shared": "1.0.0-rc.8",
+    "@shuvi/utils": "1.0.0-rc.8",
+    "prop-types": "^15.8.1",
+    "use-sync-external-store": "1.1.0"
   },
   "devDependencies": {
     "@types/prop-types": "^15.7.5",
     "@types/react": "18.0.9",
     "@types/react-test-renderer": "18.0.0",
+    "@types/use-sync-external-store": "0.0.3",
     "react-test-renderer": "^18.1.0",
     "react": "18.1.0",
     "react-dom": "18.1.0"