Feat: support props for KeepAliveOutlet

.changeset/brave-items-cover.md

@@ -0,0 +1,5 @@
+---
+'@ice/runtime': patch
+---
+
+feat: support props for KeepAliveOutlet

examples/with-keep-alive/src/pages/layout.tsx

@@ -4,7 +4,7 @@ export default function Layout() {
   return (
     <div>
       <h2>Layout</h2>
-      <KeepAliveOutlet />
+      <KeepAliveOutlet limit={2} paths={['/home']} />
     </div>
   );
 }

packages/runtime/src/KeepAliveOutlet.tsx

@@ -10,41 +10,54 @@ interface ActivityItem {
   pathname: string;
 }
 
-export default function KeepAliveOutlet() {
+interface OutletProps {
+  // The limitation number of outlets to keep alive.
+  limit?: number;
+  // When paths is configured, only the specified paths will be kept alive.
+  paths?: string[];
+}
+
+const OUTLET_LIMIT = 5;
+
+export default function KeepAliveOutlet(props: OutletProps) {
   if (!Activity) {
     throw new Error('`<KeepAliveOutlet />` now requires react experimental version. Please install it first.');
   }
   const [outlets, setOutlets] = useState<ActivityItem[]>([]);
   const location = useLocation();
   const outlet = useOutlet();
+  const outletLimit = props.limit || OUTLET_LIMIT;
+  const keepAlivePaths = props.paths;
+
   // Save the first outlet for SSR hydration.
   const outletRef = useRef({
     key: location.key,
     pathname: location.pathname,
     outlet,
   });
-
   useEffect(() => {
     // If outlets is empty, save the first outlet for SSR hydration,
     // and should not call setOutlets to avoid re-render.
     if (outlets.length !== 0 ||
       outletRef.current?.pathname !== location.pathname) {
       let currentOutlets = outletRef.current ? [outletRef.current] : outlets;
+      if (keepAlivePaths && keepAlivePaths.length > 0) {
+        currentOutlets = currentOutlets.filter(o => keepAlivePaths.includes(o.pathname));
+      }
       const result = currentOutlets.some(o => o.pathname === location.pathname);
       if (!result) {
         setOutlets([
-          // TODO: the max length of outlets should be configurable.
           ...currentOutlets,
           {
             key: location.key,
             pathname: location.pathname,
             outlet,
           },
-        ]);
+        ].slice(-outletLimit));
         outletRef.current = null;
       }
     }
-  }, [location.pathname, location.key, outlet, outlets]);
+  }, [location.pathname, location.key, outlet, outlets, outletLimit, keepAlivePaths]);
 
   // Render initail outlet for SSR hydration.
   const renderOutlets = outlets.length === 0 ? [outletRef.current] : outlets;