feat: router v7 plugin (#7106)

Author: yimingjfe

.changeset/thirty-spies-dream.md

@@ -0,0 +1,9 @@
+---
+'@modern-js/plugin-router-v7': patch
+'@modern-js/plugin-data-loader': patch
+'@modern-js/runtime': patch
+'@modern-js/runtime-utils': patch
+---
+
+feat: support plugin-router-v7
+feat: support plugin-router-v7

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

@@ -1,4 +1,4 @@
-import type { UNSAFE_DeferredData as DeferredData } from '@modern-js/runtime-utils/remix-router';
+import type { DeferredData } from '@modern-js/runtime-utils/browser';
 import { redirect } from '@modern-js/runtime-utils/router';
 // Todo move this file to `runtime/` dir
 import { compile } from 'path-to-regexp';
@@ -80,6 +80,7 @@ const handleNetworkErrorResponse = async (res: Response) => {
 };
 
 export const createRequest = (routeId: string, method = 'get') => {
+  const isRouterV7 = process.env._MODERN_ROUTER_VERSION === 'v7';
   return async ({
     params,
     request,
@@ -109,7 +110,8 @@ export const createRequest = (routeId: string, method = 'get') => {
     }
 
     if (isDeferredResponse(res)) {
-      return await parseDeferredReadableStream(res.body!);
+      const deferredData = await parseDeferredReadableStream(res.body!);
+      return isRouterV7 ? deferredData.data : deferredData;
     }
 
     // some response error not from modern.js

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

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

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

@@ -9,7 +9,6 @@ import {
   type UNSAFE_DeferredData as DeferredData,
   createStaticHandler,
   isRouteErrorResponse,
-  json,
 } from '@modern-js/runtime-utils/remix-router';
 import { matchEntry } from '@modern-js/runtime-utils/server';
 import { time } from '@modern-js/runtime-utils/time';
@@ -72,12 +71,14 @@ export const handleRequest: ServerLoaderBundle['handleRequest'] = async ({
   const end = time();
   const { reporter, loaderContext, monitors } = context;
   const headersData = parseHeaders(request);
+  const activeDeferreds = new Map<string, DeferredData>();
 
   return storage.run(
     {
       headers: headersData,
       monitors,
       request,
+      activeDeferreds,
     },
     async () => {
       const routes = transformNestedRoutes(routesConfig);
@@ -102,9 +103,18 @@ export const handleRequest: ServerLoaderBundle['handleRequest'] = async ({
             response.headers as unknown as Headers,
             basename,
           );
-        } else if (isPlainObject(response) && DEFERRED_SYMBOL in response) {
-          const deferredData = response[DEFERRED_SYMBOL] as DeferredData;
+        } else if (
+          isPlainObject(response) &&
+          (DEFERRED_SYMBOL in response || activeDeferreds.get(routeId))
+        ) {
+          let deferredData;
+          if (DEFERRED_SYMBOL in response) {
+            deferredData = response[DEFERRED_SYMBOL] as DeferredData;
+          } else {
+            deferredData = activeDeferreds.get(routeId)!;
+          }
           const body = createDeferredReadableStream(
+            // @ts-ignore
             deferredData,
             request.signal,
           );
@@ -152,12 +162,16 @@ export const handleRequest: ServerLoaderBundle['handleRequest'] = async ({
               : new Error('Unexpected Server Error');
 
           // Handle errors uniformly using the application/json
-          response = json(serializeError(errorInstance), {
-            status: 500,
-            headers: {
-              'X-Modernjs-Error': 'yes',
+          response = new Response(
+            JSON.stringify(serializeError(errorInstance)),
+            {
+              status: 500,
+              headers: {
+                'X-Modernjs-Error': 'yes',
+                'Content-Type': 'application/json',
+              },
             },
-          });
+          );
         }
       }
 

packages/document/main-doc/docs/en/apis/app/hooks/src/routes.mdx

@@ -88,3 +88,73 @@ export default () => {
 `<Outlet>` is a new API in React Router 6. For details, see [Outlet](https://reactrouter.com/en/main/components/outlet#outlet).
 
 :::
+
+## Upgrading to React Router v7
+
+React Router v7 reduces bundle size (approximately 15% smaller) compared to React Router v6, provides a more efficient route matching algorithm, and offers better support for React 19 and TypeScript. There are very few breaking changes compared to React Router v6, and Modern.js has made both versions compatible, allowing for a seamless upgrade by simply installing and registering the appropriate plugin.
+
+:::info
+
+For more changes from React Router v6 to React Router v7, check the [documentation](https://reactrouter.com/upgrading/v6#upgrade-to-v7)
+
+:::
+
+### Requirements
+
+React Router v7 has certain environment requirements:
+
+- Node.js 20+
+- React 18+
+- React DOM 18+
+
+### Install the Plugin
+
+First, install the Modern.js React Router v7 plugin:
+
+```bash
+pnpm add @modern-js/plugin-router-v7
+```
+
+### Configure the Plugin
+
+Register the plugin in `modern.config.ts`:
+
+```ts title="modern.config.ts"
+import { routerPlugin } from '@modern-js/plugin-router-v7';
+
+export default {
+  runtime: {
+    router: true,
+  },
+  plugins: [routerPlugin()],
+};
+```
+
+### Code Changes
+
+In React Router v7, you no longer need to use the `defer` API; you can directly return data in the data loader:
+
+```ts title="routes/page.data.ts"
+import { defer } from '@modern-js/runtime/router';
+
+export const loader = async ({ params }) => {
+  // Recommended v7 style
+  const user = fetchUser(params.id)
+  return { user };
+
+  // v6 style, still compatible with Modern.js
+  return defer({ data: 'hello' });
+};
+```
+
+React Router v7 has also deprecated the `json` API:
+
+```ts title="routes/page.data.ts"
+export const loader = async ({ params }) => {
+  // Recommended v7 style
+  return { data: 'hello' };
+
+  // v6 style, still compatible with Modern.js
+  return json({ data: 'hello' });
+};
+```

packages/document/main-doc/docs/zh/guides/basic-features/routes.mdx

@@ -495,6 +495,78 @@ import Motivation from '@site-docs/components/convention-routing-motivation';
 
 <Motivation />
 
+## 升级到 react-router v7
+
+React Router v7 相比 React Router v6 减少了包体积（小约 15%），提供了更高效的路由匹配算法，对 React 19 和 TypeScript 也提供了更好的支持，
+相比 React Router v6 breaking change 非常少，同时 Modern.js 也对两个版本做了兼容，只需在项目中安装并注册相应的插件即可无缝升级。
+
+:::info
+
+更多 react router v6 到 react router v7 的变更，请查看[文档](https://reactrouter.com/upgrading/v6#upgrade-to-v7)
+
+:::
+
+### 环境要求
+
+React Router v7 对环境有一定要求：
+
+- Node.js 20+
+- React 18+
+- React DOM 18+
+
+### 安装插件
+
+首先，安装 Modern.js 的 React Router v7 插件：
+
+```bash
+pnpm add @modern-js/plugin-router-v7
+```
+
+### 配置插件
+
+在 `modern.config.ts` 中注册插件：
+
+```ts title="modern.config.ts"
+import { routerPlugin } from '@modern-js/plugin-router-v7';
+
+export default {
+  runtime: {
+    router: true,
+  },
+  plugins: [routerPlugin()],
+};
+```
+
+### 修改代码
+
+在 react router v7 中，不需要再使用 `defer` API 了，直接在 data loader 中返回数据即可：
+
+```ts title="routes/page.data.ts"
+import { defer } from '@modern-js/runtime/router';
+
+export const loader = async ({ params }) => {
+  // 推荐的 v7 风格
+  const user = fetchUser(params.id)
+  return { user };
+
+  // v6 风格，Modern.js 做了兼容，仍然可以继续使用
+  return defer({ data: 'hello' });
+};
+```
+
+react router v7 同样废弃了 `json` API：
+
+```ts title="routes/page.data.ts"
+export const loader = async ({ params }) => {
+  // 推荐的 v7 风格
+  return { data: 'hello' };
+
+  // v6 风格，Modern.js 做了兼容，仍然可以继续使用
+  return json({ data: 'hello' });
+};
+```
+
+
 ## 常见问题
 
 1. 为什么要提供 `@modern-js/runtime/router` 来导出 React Router API ?

packages/runtime/plugin-router-v7/.npmignore

@@ -0,0 +1,31 @@
+.DS_Store
+
+.pnp
+.pnp.js
+.env.local
+.env.*.local
+*.log*
+
+node_modules/
+*.tsbuildinfo
+.eslintcache
+
+coverage/
+output/
+output_resource/
+tests/
+
+.vscode/**/*
+!.vscode/settings.json
+!.vscode/extensions.json
+.idea/
+
+src/
+
+modern.config.*
+jest.config.js
+.eslintrc.js
+.eslintrc
+tsconfig.json
+CHANGELOG.md
+

packages/runtime/plugin-router-v7/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-present Modern.js
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/runtime/plugin-router-v7/README.md

@@ -0,0 +1,26 @@
+<p align="center">
+  <a href="https://modernjs.dev" target="blank"><img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ylaelkeh7nuhfnuhf/modernjs-cover.png" width="300" alt="Modern.js Logo" /></a>
+</p>
+
+<h1 align="center">Modern.js</h1>
+
+<p align="center">
+  A Progressive React Framework for modern web development.
+</p>
+
+## Getting Started
+
+Please follow [Quick Start](https://modernjs.dev/en/guides/get-started/quick-start) to get started with Modern.js.
+
+## Documentation
+
+- [English Documentation](https://modernjs.dev/en/)
+- [中文文档](https://modernjs.dev)
+
+## Contributing
+
+Please read the [Contributing Guide](https://github.com/web-infra-dev/modern.js/blob/main/CONTRIBUTING.md).
+
+## License
+
+Modern.js is [MIT licensed](https://github.com/web-infra-dev/modern.js/blob/main/LICENSE).

packages/runtime/plugin-router-v7/jest.config.js

@@ -0,0 +1,12 @@
+const sharedConfig = require('@scripts/jest-config');
+
+/** @type {import('@jest/types').Config.InitialOptions} */
+module.exports = {
+  ...sharedConfig,
+  rootDir: __dirname,
+  moduleNameMapper: {
+    '^@meta/runtime$': '<rootDir>/node_modules/@modern-js/runtime/src',
+    '^@meta/runtime/context$':
+      '<rootDir>/node_modules/@modern-js/runtime/src/core/context',
+  },
+};