From 62a80ddce2e700737c1e14af25deb7f3e5b06558 Mon Sep 17 00:00:00 2001
From: thislight <l1589002388@gmail.com>
Date: Mon, 25 Nov 2024 15:24:13 +0800
Subject: [PATCH] Scaffold: cache children with memo

---
 src/material/Scaffold.tsx | 29 +++++++++++++++++------------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/material/Scaffold.tsx b/src/material/Scaffold.tsx
index 4e905c3..a2c7b69 100644
--- a/src/material/Scaffold.tsx
+++ b/src/material/Scaffold.tsx
@@ -2,6 +2,7 @@ import { createElementSize } from "@solid-primitives/resize-observer";
 import {
   JSX,
   Show,
+  children,
   createRenderEffect,
   createSignal,
   splitProps,
@@ -21,8 +22,8 @@ type ScaffoldProps = ParentProps<
 /**
  * The passthrough props are passed to the content container.
  */
-const Scaffold: Component<ScaffoldProps> = (props) => {
-  const [managed, rest] = splitProps(props, [
+const Scaffold: Component<ScaffoldProps> = (oprops) => {
+  const [props, rest] = splitProps(oprops, [
     "topbar",
     "fab",
     "bottom",
@@ -34,9 +35,13 @@ const Scaffold: Component<ScaffoldProps> = (props) => {
 
   const topbarSize = createElementSize(topbarElement);
 
+  const topbar = children(() => props.topbar)
+  const fab = children(() => props.fab)
+  const bottom = children(() => props.bottom)
+
   return (
     <div
-      class={`Scaffold ${managed.class || ""}`}
+      class={`Scaffold ${props.class || ""}`}
       ref={(e) => {
         createRenderEffect(() => {
           e.style.setProperty(
@@ -45,28 +50,28 @@ const Scaffold: Component<ScaffoldProps> = (props) => {
           );
         });
 
-        if (managed.ref) {
-          (managed.ref as (val: typeof e) => void)(e);
+        if (props.ref) {
+          (props.ref as (val: typeof e) => void)(e);
         }
       }}
       {...rest}
     >
-      <Show when={props.topbar}>
+      <Show when={topbar()}>
         <div class="topbar" ref={setTopbarElement} role="presentation">
-          {props.topbar}
+          {topbar()}
         </div>
       </Show>
-      <Show when={props.fab}>
+      <Show when={fab()}>
         <div class="fab-dock" role="presentation">
-          {props.fab}
+          {fab()}
         </div>
       </Show>
 
-      {managed.children}
+      {props.children}
 
-      <Show when={props.bottom}>
+      <Show when={bottom()}>
         <div class="bottom-dock" role="presentation">
-          {props.bottom}
+          {bottom()}
         </div>
       </Show>
     </div>