@shuvi/platform-web 2.0.0-dev.33 → 2.0.0-dev.34

package/esm/shared/configTypes.d.ts

@@ -12,6 +12,30 @@ export interface IRouterConfig {
 export interface PlatformWebCustomConfig {
     ssr: boolean;
     router: IRouterConfig;
+    /**
+     * Run the initial hydration inside `startTransition`.
+     *
+     * `hydrateRoot` schedules the first hydration on `DefaultLane`, and
+     * `includesBlockingLane` counts that as blocking, so React renders it through
+     * `renderRootSync` — one uninterruptible task spanning the whole tree, which
+     * is the same shape as the legacy `hydrate` it replaced. Suspense boundaries
+     * do not break that up either: a boundary the server rendered completely is
+     * hydrated inline in the same pass, and only the placeholders emitted by
+     * `renderToPipeableStream` are deferred.
+     *
+     * A transition puts the work on a transition lane, which is not blocking, so
+     * React takes `renderRootConcurrent` and yields between units of work. The
+     * total CPU is unchanged; it is split into slices the browser can interleave
+     * with input, which is what Total Blocking Time measures. The commit phase
+     * stays synchronous, so a floor remains.
+     *
+     * Worth enabling in proportion to how much there is to hydrate: a large
+     * server-rendered document gains, a small one does not. Requires React 18 —
+     * with an earlier version this option has no effect.
+     *
+     * Defaults to false for backward compatibility.
+     */
+    hydrateInTransition?: boolean;
     routes?: IPageRouteConfig[];
     conventionRoutes: {
         include?: string[];

package/esm/shuvi-app/react/view/render.js

@@ -1,10 +1,22 @@
 let doRender;
 if (process.env.__SHUVI__AFTER__REACT__18__) {
     const { createRoot, hydrateRoot } = require('react-dom/client');
+    const { startTransition } = require('react');
     let renderRoot;
     doRender = ({ root, appContainer, shouldHydrate }, callback) => {
         if (shouldHydrate) {
-            renderRoot = hydrateRoot(appContainer, root);
+            if (process.env.__SHUVI__HYDRATE_IN_TRANSITION__) {
+                // `hydrateRoot` returns before the work it schedules runs, so the
+                // assignment still happens synchronously here and the branch below can
+                // reuse the root for client-side navigations. Only the lane changes:
+                // a transition lane is not blocking, so the render loop yields.
+                startTransition(() => {
+                    renderRoot = hydrateRoot(appContainer, root);
+                });
+            }
+            else {
+                renderRoot = hydrateRoot(appContainer, root);
+            }
             callback === null || callback === void 0 ? void 0 : callback();
         }
         else {

package/lib/node/shuvi-type-extensions-node.d.ts

@@ -33,6 +33,7 @@ declare global {
             router: PlatformWebCustomConfig['router'];
             routes?: PlatformWebCustomConfig['routes'];
             conventionRoutes: PlatformWebCustomConfig['conventionRoutes'];
+            hydrateInTransition?: PlatformWebCustomConfig['hydrateInTransition'];
         }
         interface CustomCorePluginHooks {
             addRoutes: typeof addRoutes;

package/lib/node/targets/react/bundler/index.js

@@ -95,7 +95,8 @@ const configWebpack = (config, { name, rspack }, context) => {
     if (name === shared_1.BUNDLER_TARGET_CLIENT) {
         config.plugin('version-env-plugin').use(rspack.DefinePlugin, [
             {
-                'process.env.__SHUVI__AFTER__REACT__18__': JSON.stringify(isReactVersionAfter18())
+                'process.env.__SHUVI__AFTER__REACT__18__': JSON.stringify(isReactVersionAfter18()),
+                'process.env.__SHUVI__HYDRATE_IN_TRANSITION__': JSON.stringify(Boolean(context.config.hydrateInTransition))
             }
         ]);
         if (context.mode === 'development') {

package/lib/shared/configTypes.d.ts

@@ -12,6 +12,30 @@ export interface IRouterConfig {
 export interface PlatformWebCustomConfig {
     ssr: boolean;
     router: IRouterConfig;
+    /**
+     * Run the initial hydration inside `startTransition`.
+     *
+     * `hydrateRoot` schedules the first hydration on `DefaultLane`, and
+     * `includesBlockingLane` counts that as blocking, so React renders it through
+     * `renderRootSync` — one uninterruptible task spanning the whole tree, which
+     * is the same shape as the legacy `hydrate` it replaced. Suspense boundaries
+     * do not break that up either: a boundary the server rendered completely is
+     * hydrated inline in the same pass, and only the placeholders emitted by
+     * `renderToPipeableStream` are deferred.
+     *
+     * A transition puts the work on a transition lane, which is not blocking, so
+     * React takes `renderRootConcurrent` and yields between units of work. The
+     * total CPU is unchanged; it is split into slices the browser can interleave
+     * with input, which is what Total Blocking Time measures. The commit phase
+     * stays synchronous, so a floor remains.
+     *
+     * Worth enabling in proportion to how much there is to hydrate: a large
+     * server-rendered document gains, a small one does not. Requires React 18 —
+     * with an earlier version this option has no effect.
+     *
+     * Defaults to false for backward compatibility.
+     */
+    hydrateInTransition?: boolean;
     routes?: IPageRouteConfig[];
     conventionRoutes: {
         include?: string[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shuvi/platform-web",
-  "version": "2.0.0-dev.33",
+  "version": "2.0.0-dev.34",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/shuvijs/shuvi.git",
@@ -72,15 +72,15 @@
   },
   "dependencies": {
     "@rspack/plugin-react-refresh": "^1.4.3",
-    "@shuvi/error-overlay": "2.0.0-dev.33",
-    "@shuvi/hook": "2.0.0-dev.33",
-    "@shuvi/platform-shared": "2.0.0-dev.33",
-    "@shuvi/router": "2.0.0-dev.33",
-    "@shuvi/router-react": "2.0.0-dev.33",
-    "@shuvi/runtime": "2.0.0-dev.33",
-    "@shuvi/shared": "2.0.0-dev.33",
-    "@shuvi/toolpack": "2.0.0-dev.33",
-    "@shuvi/utils": "2.0.0-dev.33",
+    "@shuvi/error-overlay": "2.0.0-dev.34",
+    "@shuvi/hook": "2.0.0-dev.34",
+    "@shuvi/platform-shared": "2.0.0-dev.34",
+    "@shuvi/router": "2.0.0-dev.34",
+    "@shuvi/router-react": "2.0.0-dev.34",
+    "@shuvi/runtime": "2.0.0-dev.34",
+    "@shuvi/shared": "2.0.0-dev.34",
+    "@shuvi/toolpack": "2.0.0-dev.34",
+    "@shuvi/utils": "2.0.0-dev.34",
     "content-type": "1.0.4",
     "core-js": "3.6.5",
     "doura": "0.0.13",
@@ -98,10 +98,10 @@
     "whatwg-fetch": "3.0.0"
   },
   "peerDependencies": {
-    "@shuvi/service": "2.0.0-dev.33"
+    "@shuvi/service": "2.0.0-dev.34"
   },
   "devDependencies": {
-    "@shuvi/service": "2.0.0-dev.33",
+    "@shuvi/service": "2.0.0-dev.34",
     "@testing-library/react": "^13.2.0",
     "@types/content-type": "^1.1.5",
     "@types/ejs": "^3.1.0",