fix: OffScreen to Activity

alibaba · Dec 14, 2023 · 91ee9dc · 91ee9dc
1 parent ebc8ae0
commit 91ee9dc
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 16 deletions.
diff --git a/examples/with-keep-alive/README.md b/examples/with-keep-alive/README.md
@@ -1,6 +1,6 @@
 # with-keep-alive
 
-Experimental keep-alive with React 18 `<Offscreen />`.
+Experimental keep-alive with React 18 `<Activity />`.
 
 ## How to debug
 
@@ -15,9 +15,11 @@ $ cd packages/runtime && yalc publish --push
 Then, install the example dependencies.
 
 ```bash
-$ cd examples/with-keep-alive && yarn install
+$ cd examples/with-keep-alive
 
 $ yalc add @ice/app @ice/runtime
 
+$ yarn install
+
 $ npm run start
 ```
diff --git a/examples/with-keep-alive/package.json b/examples/with-keep-alive/package.json
@@ -7,13 +7,15 @@
     "build": "ice build"
   },
   "dependencies": {
-    "@ice/runtime": "alpha",
-    "react": "experimental",
-    "react-dom": "experimental"
+    "react": "0.0.0-experimental-0cdfef19b-20231211",
+    "react-dom": "0.0.0-experimental-0cdfef19b-20231211"
   },
   "devDependencies": {
-    "@ice/app": "alpha",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.2"
+  },
+  "resolutions": {
+    "react": "0.0.0-experimental-0cdfef19b-20231211",
+    "react-dom": "0.0.0-experimental-0cdfef19b-20231211"
   }
 }
diff --git a/packages/runtime/src/KeepAliveOutlet.tsx b/packages/runtime/src/KeepAliveOutlet.tsx
@@ -2,11 +2,11 @@ import React, { useState, useEffect } from 'react';
 import { useOutlet, useLocation } from 'react-router-dom';
 
 // @ts-ignore
-const Offscreen = React.unstable_Offscreen;
+const Activity = React.unstable_Activity;
 
 // ref: https://leomyili.github.io/react-stillness-component/docs/examples/react-router/v6
 export default function KeepAliveOutlet() {
-  if (!Offscreen) {
+  if (!Activity) {
     throw new Error('`<KeepAliveOutlet />` now requires react experimental version. Please install it first.');
   }
   const [outlets, setOutlets] = useState([]);
@@ -32,9 +32,9 @@ export default function KeepAliveOutlet() {
       {
         outlets.map((o) => {
           return (
-            <Offscreen key={o.key} mode={location.pathname === o.pathname ? 'visible' : 'hidden'}>
+            <Activity key={o.key} mode={location.pathname === o.pathname ? 'visible' : 'hidden'}>
               {o.outlet}
-            </Offscreen>
+            </Activity>
           );
         })
       }

diff --git a/website/docs/guide/advanced/keep-alive.md b/website/docs/guide/advanced/keep-alive.md
@@ -47,13 +47,13 @@ export default function Layout() {
 
 ## 缓存其他组件
 
-除了缓存路由组件，还可以直接使用 React 18 提供的实验特性 `<Offscreen />` 组件，进一步缓存更细粒度的组件。
+除了缓存路由组件，还可以直接使用 React 18 提供的实验特性 `<Activity />` 组件，进一步缓存更细粒度的组件。
 
 ```tsx
 import React from 'react';
 
 // @ts-ignore
-const Offscreen = React.unstable_Offscreen;
+const Activity = React.unstable_Activity;
 
 export default function Home() {
   const [auth, setAuth] = React.useState('admin');
@@ -65,12 +65,12 @@ export default function Home() {
         <button onClick={() => setAuth('user')}>Set User</button>
       </div>
       <>
-        <Offscreen mode={auth === 'admin' ? 'visible' : 'hidden'}>
+        <Activity mode={auth === 'admin' ? 'visible' : 'hidden'}>
           Admin Name: <input />
-        </Offscreen>
-        <Offscreen mode={auth === 'user' ? 'visible' : 'hidden'}>
+        </Activity>
+        <Activity mode={auth === 'user' ? 'visible' : 'hidden'}>
           User Name: <input />
-        </Offscreen>
+        </Activity>
       </>
     </>
   )