Feat: update react-router for new feature (#6764)

* feat: update react-router for new feature

* feat: export new api of react-router

* fix: merge error

.changeset/warm-wombats-taste.md

@@ -0,0 +1,6 @@
+---
+'@ice/runtime': patch
+'@ice/app': patch
+---
+
+feat: export new api of react-router

packages/ice/package.json

@@ -93,7 +93,7 @@
     "esbuild": "^0.17.16",
     "jest": "^29.0.2",
     "react": "^18.2.0",
-    "react-router": "6.14.2",
+    "react-router": "6.21.3",
     "sass": "^1.50.0",
     "unplugin": "^1.6.0",
     "webpack": "^5.88.0",

packages/ice/src/constant.ts

@@ -41,6 +41,7 @@ export const RUNTIME_EXPORTS = [
   {
     specifier: [
       'Link',
+      'NavLink',
       'Outlet',
       'useParams',
       'useSearchParams',
@@ -48,6 +49,8 @@ export const RUNTIME_EXPORTS = [
       'useData',
       'useConfig',
       'useNavigate',
+      'useNavigation',
+      'useRevalidator',
     ],
     source: '@ice/runtime/router',
   },

packages/plugin-i18n/package.json

@@ -49,7 +49,7 @@
     "@ice/pkg": "^1.5.0",
     "@ice/app": "workspace:^",
     "@ice/runtime": "workspace:^",
-    "@remix-run/router": "^1.6.1",
+    "@remix-run/router": "^1.14.2",
     "@types/accept-language-parser": "^1.5.3",
     "@types/react": "^18.0.33",
     "cross-env": "^7.0.3",

packages/plugin-pha/package.json

@@ -17,7 +17,7 @@
     "build": "tsc"
   },
   "dependencies": {
-    "@remix-run/router": "^1.6.1",
+    "@remix-run/router": "^1.14.2",
     "chalk": "^4.0.0",
     "consola": "^2.15.3",
     "humps": "^2.0.1",

packages/runtime/package.json

@@ -54,13 +54,13 @@
   "dependencies": {
     "@ice/jsx-runtime": "^0.2.2",
     "@ice/shared": "^1.0.2",
-    "@remix-run/router": "1.7.2",
+    "@remix-run/router": "1.14.2",
     "abortcontroller-polyfill": "1.7.5",
     "ejs": "^3.1.6",
     "fs-extra": "^10.0.0",
     "history": "^5.3.0",
     "htmlparser2": "^8.0.1",
-    "react-router-dom": "6.14.2",
+    "react-router-dom": "6.21.3",
     "semver": "^7.4.0",
     "source-map": "^0.7.4"
   },

packages/runtime/src/index.ts

@@ -1,10 +1,3 @@
-import {
-  Link,
-  Outlet,
-  useParams,
-  useSearchParams,
-  useLocation,
-} from 'react-router-dom';
 import type {
   RuntimePlugin,
   AppContext,
@@ -122,12 +115,6 @@ export {
   dataLoader,
   callDataLoader,
   getRequestContext,
-  // react-router-dom API
-  Link,
-  Outlet,
-  useParams,
-  useSearchParams,
-  useLocation,
   history,
 
   KeepAliveOutlet,
@@ -147,6 +134,18 @@ export {
   RouteErrorComponent,
 };
 
+export {
+  Link,
+  NavLink,
+  Outlet,
+  useParams,
+  useSearchParams,
+  useLocation,
+  useNavigate,
+  useNavigation,
+  useRevalidator,
+} from 'react-router-dom';
+
 export type {
   RuntimePlugin,
   AppContext,

packages/runtime/src/router.ts

@@ -1,10 +1,13 @@
 export {
   Link,
+  NavLink,
   Outlet,
   useParams,
   useSearchParams,
   useLocation,
   useNavigate,
+  useNavigation,
+  useRevalidator,
 } from 'react-router-dom';
 
 export { useData, useConfig } from './RouteContext.js';

packages/runtime/src/singleRouter.tsx

@@ -278,7 +278,7 @@ export const matchRoutes = (
 };
 
 export const Link = () => null;
-
+export const NavLink = () => null;
 export const useParams = () => {
   return {};
 };
@@ -292,6 +292,14 @@ export const useNavigate = () => {
   return {};
 };
 
+export const useNavigation = () => {
+  throw new Error('useNavigation is not supported in single router mode');
+};
+
+export const useRevalidator = () => {
+  throw new Error('useRevalidator is not supported in single router mode');
+};
+
 export const getSingleRoute = async (routes: RouteItem[], basename: string, routeModuleCache = {}) => {
   const matchedRoutes = matchRoutes(routes, location, basename);
   const routeModules = await loadRouteModules(matchedRoutes.map(({ route }) => route), routeModuleCache);
@@ -327,5 +335,3 @@ export const getSingleRoute = async (routes: RouteItem[], basename: string, rout
     );
   }, null as React.ReactElement | null);
 };
-
-

pnpm-lock.yaml

@@ -1739,8 +1739,8 @@ importers:
         specifier: ^18.2.0
         version: 18.2.0
       react-router:
-        specifier: 6.14.2
+        specifier: 6.21.3
-        version: 6.14.2(react@18.2.0)
+        version: 6.21.3(react@18.2.0)
       sass:
         specifier: ^1.50.0
         version: 1.50.0
@@ -1937,8 +1937,8 @@ importers:
         specifier: workspace:^
         version: link:../runtime
       '@remix-run/router':
-        specifier: ^1.6.1
+        specifier: ^1.14.2
-        version: 1.6.1
+        version: 1.14.2
       '@types/accept-language-parser':
         specifier: ^1.5.3
         version: 1.5.3
@@ -2069,8 +2069,8 @@ importers:
   packages/plugin-pha:
     dependencies:
       '@remix-run/router':
-        specifier: ^1.6.1
+        specifier: ^1.14.2
-        version: 1.6.1
+        version: 1.14.2
       chalk:
         specifier: ^4.0.0
         version: 4.1.2
@@ -2310,8 +2310,8 @@ importers:
         specifier: ^1.0.2
         version: link:../shared
       '@remix-run/router':
-        specifier: 1.7.2
+        specifier: 1.14.2
-        version: 1.7.2
+        version: 1.14.2
       abortcontroller-polyfill:
         specifier: 1.7.5
         version: 1.7.5
@@ -2328,8 +2328,8 @@ importers:
         specifier: ^8.0.1
         version: 8.0.1
       react-router-dom:
-        specifier: 6.14.2
+        specifier: 6.21.3
-        version: 6.14.2(react-dom@18.2.0)(react@18.2.0)
+        version: 6.21.3(react-dom@18.2.0)(react@18.2.0)
       semver:
         specifier: ^7.4.0
         version: 7.4.0
@@ -7794,13 +7794,9 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /@remix-run/router@1.6.1:
+  /@remix-run/router@1.14.2:
-    resolution: {integrity: sha512-YUkWj+xs0oOzBe74OgErsuR3wVn+efrFhXBWrit50kOiED+pvQe2r6MWY0iJMQU/mSVKxvNzL4ZaYvjdX+G7ZA==}
+    resolution: {integrity: sha512-ACXpdMM9hmKZww21yEqWwiLws/UPLhNKvimN8RrYSqPSvB3ov7sLvAcfvaxePeLvccTQKGdkDIhLYApZVDFuKg==}
-    engines: {node: '>=14'}
+    engines: {node: '>=14.0.0'}
-
-  /@remix-run/router@1.7.2:
-    resolution: {integrity: sha512-7Lcn7IqGMV+vizMPoEl5F0XDshcdDYtMI6uJLQdQz5CfZAwy3vvGKYSUk789qndt5dEC4HfSjviSYlSoHGL2+A==}
-    engines: {node: '>=14'}
 
   /@remix-run/web-blob@3.0.4:
     resolution: {integrity: sha512-AfegzZvSSDc+LwnXV+SwROTrDtoLiPxeFW+jxgvtDAnkuCX1rrzmVJ6CzqZ1Ai0bVfmJadkG5GxtAfYclpPmgw==}
@@ -20670,17 +20666,17 @@ packages:
       tiny-invariant: 1.3.1
       tiny-warning: 1.0.3
 
-  /react-router-dom@6.14.2(react-dom@18.2.0)(react@18.2.0):
+  /react-router-dom@6.21.3(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-5pWX0jdKR48XFZBuJqHosX3AAHjRAzygouMTyimnBPOLdY3WjzUSKhus2FVMihUFWzeLebDgr4r8UeQFAct7Bg==}
+    resolution: {integrity: sha512-kNzubk7n4YHSrErzjLK72j0B5i969GsuCGazRl3G6j1zqZBLjuSlYBdVdkDOgzGdPIffUOc9nmgiadTEVoq91g==}
-    engines: {node: '>=14'}
+    engines: {node: '>=14.0.0'}
     peerDependencies:
       react: '>=16.8'
       react-dom: '>=16.8'
     dependencies:
-      '@remix-run/router': 1.7.2
+      '@remix-run/router': 1.14.2
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-      react-router: 6.14.2(react@18.2.0)
+      react-router: 6.21.3(react@18.2.0)
     dev: false
 
   /react-router@5.3.4(react@17.0.2):
@@ -20699,13 +20695,13 @@ packages:
       tiny-invariant: 1.3.1
       tiny-warning: 1.0.3
 
-  /react-router@6.14.2(react@18.2.0):
+  /react-router@6.21.3(react@18.2.0):
-    resolution: {integrity: sha512-09Zss2dE2z+T1D03IheqAFtK4UzQyX8nFPWx6jkwdYzGLXd5ie06A6ezS2fO6zJfEb/SpG6UocN2O1hfD+2urQ==}
+    resolution: {integrity: sha512-a0H638ZXULv1OdkmiK6s6itNhoy33ywxmUFT/xtSoVyf9VnC7n7+VT4LjVzdIHSaF5TIh9ylUgxMXksHTgGrKg==}
-    engines: {node: '>=14'}
+    engines: {node: '>=14.0.0'}
     peerDependencies:
       react: '>=16.8'
     dependencies:
-      '@remix-run/router': 1.7.2
+      '@remix-run/router': 1.14.2
       react: 18.2.0
 
   /react-textarea-autosize@8.4.0(@types/react@17.0.53)(react@17.0.2):