refactor: guard react router consistency

.changeset/good-eels-give.md

@@ -0,0 +1,8 @@
+---
+'@modern-js/plugin-data-loader': patch
+'@modern-js/runtime': patch
+'@modern-js/utils': patch
+---
+
+refactor: guard react-router version consistency
+refactor: 保证 react-router 相关包的版本一致性

packages/cli/plugin-data-loader/src/cli/createRequest.ts

@@ -2,7 +2,7 @@
 /* eslint-disable node/prefer-global/url */
 import { compile } from 'path-to-regexp';
 import { redirect } from 'react-router-dom';
-import { type UNSAFE_DeferredData as DeferredData } from '@modern-js/utils/runtime/router';
+import { type UNSAFE_DeferredData as DeferredData } from '@modern-js/utils/runtime/remix-router';
 import {
   LOADER_ID_PARAM,
   DIRECT_PARAM,

packages/cli/plugin-data-loader/src/cli/data.ts

@@ -13,7 +13,7 @@
 import {
   UNSAFE_DeferredData as DeferredData,
   AbortedDeferredError,
-} from '@modern-js/utils/runtime/router';
+} from '@modern-js/utils/runtime/remix-router';
 
 const DEFERRED_VALUE_PLACEHOLDER_PREFIX = '__deferred_promise:';
 export async function parseDeferredReadableStream(

packages/cli/plugin-data-loader/src/runtime/index.ts

@@ -10,8 +10,8 @@ import {
   ErrorResponse,
   UNSAFE_DEFERRED_SYMBOL as DEFERRED_SYMBOL,
   type UNSAFE_DeferredData as DeferredData,
-  transformNestedRoutes,
-} from '@modern-js/utils/runtime/router';
+} from '@modern-js/utils/runtime/remix-router';
+import { transformNestedRoutes } from '@modern-js/utils/runtime/nested-routes';
 import { isPlainObject } from '@modern-js/utils/lodash';
 import { CONTENT_TYPE_DEFERRED, LOADER_ID_PARAM } from '../common/constants';
 import { matchEntry, ServerContext } from '../common/utils';

packages/cli/plugin-data-loader/src/runtime/response.ts

@@ -11,7 +11,7 @@ import { TextEncoder } from 'util';
 import {
   type UNSAFE_DeferredData as DeferredData,
   type TrackedPromise,
-} from '@modern-js/utils/runtime/router';
+} from '@modern-js/utils/runtime/remix-router';
 import { serializeJson } from '@modern-js/utils/runtime-node';
 
 function isTrackedPromise(value: any): value is TrackedPromise {

packages/runtime/plugin-runtime/package.json

@@ -175,7 +175,6 @@
     "invariant": "^2.2.4",
     "react-helmet": "^6.1.0",
     "react-is": "^18",
-    "react-router-dom": "^6.8.1",
     "react-side-effect": "^2.1.1",
     "redux-logger": "^3.0.6",
     "styled-components": "^5.3.1",

packages/runtime/plugin-runtime/src/router/runtime/DeferredDataScripts.node.tsx

@@ -1,11 +1,11 @@
 /* eslint-disable react/no-danger */
-import { TrackedPromise } from '@modern-js/utils/runtime/router';
+import { type TrackedPromise } from '@modern-js/utils/runtime/remix-router';
 import { Suspense, useEffect, useRef, useMemo, useContext } from 'react';
 import {
   Await,
   UNSAFE_DataRouterContext as DataRouterContext,
   useAsyncError,
-} from 'react-router-dom';
+} from '@modern-js/utils/runtime/router';
 import { serializeJson } from '@modern-js/utils/runtime-node';
 import { JSX_SHELL_STREAM_END_MARK } from '../../common';
 import { serializeErrors } from './utils';

packages/runtime/plugin-runtime/src/router/runtime/PrefetchLink.tsx

@@ -14,7 +14,7 @@ import {
   useMatches,
   NavLink as RouterNavLink,
   NavLinkProps as RouterNavLinkProps,
-} from 'react-router-dom';
+} from '@modern-js/utils/runtime/router';
 import { RuntimeReactContext } from '../../core';
 import { RouteAssets, RouteManifest } from './types';
 

packages/runtime/plugin-runtime/src/router/runtime/hooks.ts

@@ -1,5 +1,5 @@
 import { createWaterfall } from '@modern-js/plugin';
-import { RouteObject } from 'react-router-dom';
+import { RouteObject } from '@modern-js/utils/runtime/router';
 
 const modifyRoutes = createWaterfall<RouteObject[]>();
 

packages/runtime/plugin-runtime/src/router/runtime/index.ts

@@ -1,4 +1,4 @@
-import { useRouteLoaderData as useRouteData } from 'react-router-dom';
+import { useRouteLoaderData as useRouteData } from '@modern-js/utils/runtime/router';
 import { routerPlugin } from './plugin';
 import type { SingleRouteConfig, RouterConfig } from './types';
 
@@ -78,7 +78,7 @@ export type {
   Search,
   ShouldRevalidateFunction,
   To,
-} from 'react-router-dom';
+} from '@modern-js/utils/runtime/router';
 
 // Note: Keep in sync with react-router-dom exports!
 export {
@@ -144,9 +144,7 @@ export {
   createPath,
   unstable_useBlocker,
   unstable_usePrompt,
-} from 'react-router-dom';
-
-// `react-router-dom` has its own dependency: `@remix-run/router`.
-// In order to make sure `plugin-data-loader` and user's loaders(mainly `defer` API) depend on the singleton of `@remix-run/router`,
-// we export these API from the same package `@modern-js/utils/runtime`.
-export { defer, json, redirect } from '@modern-js/utils/runtime/router';
+  defer,
+  json,
+  redirect,
+} from '@modern-js/utils/runtime/router';

packages/runtime/plugin-runtime/src/router/runtime/plugin.node.tsx

@@ -1,11 +1,11 @@
 import React, { useContext } from 'react';
-import { createStaticHandler } from '@modern-js/utils/runtime/router';
+import { createStaticHandler } from '@modern-js/utils/runtime/remix-router';
 import {
   createStaticRouter,
   StaticRouterProvider,
-} from 'react-router-dom/server';
+} from '@modern-js/utils/runtime-node/router';
 import hoistNonReactStatics from 'hoist-non-react-statics';
-import { createRoutesFromElements } from 'react-router-dom';
+import { createRoutesFromElements } from '@modern-js/utils/runtime/router';
 import { RuntimeReactContext } from '../../core';
 import type { Plugin } from '../../core';
 import { SSRServerContext } from '../../ssr/serverRender/types';

packages/runtime/plugin-runtime/src/router/runtime/plugin.tsx

@@ -7,7 +7,7 @@ import {
   useMatches,
   useLocation,
   RouteObject,
-} from 'react-router-dom';
+} from '@modern-js/utils/runtime/router';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 import { parsedJSONFromElement } from '@modern-js/utils/runtime-browser';
 import { Plugin } from '../../core';

packages/runtime/plugin-runtime/src/router/runtime/server.ts

@@ -1 +1 @@
-export * from 'react-router-dom/server';
+export * from '@modern-js/utils/runtime-node/router';

packages/runtime/plugin-runtime/src/router/runtime/types.ts

@@ -1,4 +1,4 @@
-import type { RouteProps, RouteObject } from 'react-router-dom';
+import type { RouteProps, RouteObject } from '@modern-js/utils/runtime/router';
 import { PageRoute, NestedRoute } from '@modern-js/types';
 
 declare global {

packages/runtime/plugin-runtime/src/router/runtime/utils.tsx

@@ -1,17 +1,16 @@
 import React from 'react';
-import { Route } from 'react-router-dom';
+import { Route, isRouteErrorResponse } from '@modern-js/utils/runtime/router';
 import {
   type NestedRoute,
   type PageRoute,
   type SSRMode,
 } from '@modern-js/types';
 import {
   ErrorResponse,
-  isRouteErrorResponse,
-  type Router,
   type StaticHandlerContext,
-  renderNestedRoute,
-} from '@modern-js/utils/runtime/router';
+  type Router,
+} from '@modern-js/utils/runtime/remix-router';
+import { renderNestedRoute } from '@modern-js/utils/runtime/nested-routes';
 import { RouterConfig } from './types';
 import { DefaultNotFound } from './DefaultNotFound';
 import DeferredDataScripts from './DeferredDataScripts';

packages/runtime/plugin-runtime/src/router/runtime/withRouter.tsx

@@ -1,7 +1,11 @@
 // legacy withRouter
 
 import React from 'react';
-import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import {
+  useLocation,
+  useNavigate,
+  useParams,
+} from '@modern-js/utils/runtime/router';
 
 export interface WithRouterProps {
   location: ReturnType<typeof useLocation>;

packages/runtime/plugin-runtime/src/runtimeContext.ts

@@ -1,5 +1,5 @@
 import { Store } from '@modern-js-reduck/store';
-import type { StaticHandlerContext } from '@modern-js/utils/runtime/router';
+import type { StaticHandlerContext } from '@modern-js/utils/runtime/remix-router';
 import { createContext } from 'react';
 import { createLoaderManager } from './core/loader/loaderManager';
 import { runtime } from './core/plugin';

packages/runtime/plugin-runtime/src/ssr/serverRender/renderToStream/bulidTemplate.before.ts

@@ -1,6 +1,6 @@
 import ReactHelmet, { HelmetData } from 'react-helmet';
 // Todo: This import will introduce router code, like remix, even if router config is false
-import { matchRoutes } from 'react-router-dom';
+import { matchRoutes } from '@modern-js/utils/runtime/router';
 import helmetReplace from '../helmet';
 import { RuntimeContext } from '../types';
 import { CSS_CHUNKS_PLACEHOLDER } from '../utils';

packages/runtime/plugin-runtime/tests/router/prefetch.test.tsx

@@ -3,7 +3,7 @@ import {
   createMemoryRouter,
   LoaderFunctionArgs,
   RouterProvider,
-} from 'react-router-dom';
+} from '@modern-js/utils/runtime/router';
 import { render, fireEvent, act, waitFor } from '@testing-library/react';
 import { Link } from '../../src/router';
 import { RuntimeReactContext } from '../../src';

packages/toolkit/utils/package.json

@@ -38,6 +38,14 @@
       "jsnext:source": "./src/runtime/router.ts",
       "default": "./dist/esm/runtime/router.js"
     },
+    "./runtime/remix-router": {
+      "jsnext:source": "./src/runtime/remixRouter.ts",
+      "default": "./dist/esm/runtime/remixRouter.js"
+    },
+    "./runtime/nested-routes": {
+      "jsnext:source": "./src/runtime/nestedRoutes.tsx",
+      "default": "./dist/esm/runtime/nestedRoutes.js"
+    },
     "./runtime-browser": {
       "jsnext:source": "./src/runtime-browser/index.ts",
       "default": "./dist/esm/runtime-browser/index.js"
@@ -46,6 +54,10 @@
       "jsnext:source": "./src/runtime-node/index.ts",
       "default": "./dist/esm/runtime-node/index.js"
     },
+    "./runtime-node/router": {
+      "jsnext:source": "./src/runtime-node/router.ts",
+      "default": "./dist/esm/runtime-node/router.js"
+    },
     "./universal/constants": {
       "jsnext:source": "./src/universal/constants.ts",
       "import": "./dist/esm/universal/constants.js",
@@ -104,6 +116,14 @@
         "types": "./dist/types/runtime/router.d.ts",
         "default": "./dist/esm/runtime/router.js"
       },
+      "./runtime/remix-router": {
+        "types": "./dist/types/runtime/remixRouter.d.ts",
+        "default": "./dist/esm/runtime/remixRouter.js"
+      },
+      "./runtime/nested-routes": {
+        "types": "./dist/types/runtime/nestedRoutes.d.ts",
+        "default": "./dist/esm/runtime/nestedRoutes.js"
+      },
       "./runtime-browser": {
         "jsnext:source": "./src/runtime-browser/index.d.ts",
         "default": "./dist/esm/runtime-browser/index.js"
@@ -112,6 +132,10 @@
         "types": "./dist/types/runtime-node/index.d.ts",
         "default": "./dist/esm/runtime-node/index.js"
       },
+      "./runtime-node/router": {
+        "types": "./dist/types/runtime-node/router.d.ts",
+        "default": "./dist/esm/runtime-node/router.js"
+      },
       "./universal/constants": {
         "types": "./dist/types/universal/constants.d.ts",
         "import": "./dist/esm/universal/constants.js",
@@ -161,12 +185,21 @@
       "runtime/router": [
         "./dist/types/runtime/router.d.ts"
       ],
+      "runtime/remix-router": [
+        "./dist/types/runtime/remixRouter.d.ts"
+      ],
+      "runtime/nested-routes": [
+        "./dist/types/runtime/nestedRoutes.d.ts"
+      ],
       "runtime-browser": [
         "./dist/types/runtime-browser/index.d.ts"
       ],
       "runtime-node": [
         "./dist/types/runtime-node/index.d.ts"
       ],
+      "runtime-node/router": [
+        "./dist/types/runtime-node/router.d.ts"
+      ],
       "universal/constants": [
         "./dist/types/universal/constants.d.ts"
       ],
@@ -255,13 +288,13 @@
     "caniuse-lite": "^1.0.30001451",
     "lodash": "^4.17.21",
     "serialize-javascript": "^6.0.0",
-    "@remix-run/router": "^1.3.2",
+    "react-router-dom": "6.11.2",
+    "@remix-run/router": "1.6.2",
     "@swc/helpers": "0.5.1"
   },
   "peerDependencies": {
     "react": ">=17.0.0",
-    "react-dom": ">=17.0.0",
-    "react-router-dom": "^6.8.1"
+    "react-dom": ">=17.0.0"
   },
   "peerDependenciesMeta": {
     "react": {

packages/toolkit/utils/src/runtime-node/router.ts

@@ -0,0 +1 @@
+export * from 'react-router-dom/server';

packages/toolkit/utils/src/runtime/router.ts

@@ -1,2 +1 @@
-export * from './nestedRoutes';
-export * from './remixRouter';
+export * from 'react-router-dom';