useHeroSignal: reset the signal after read

src/material/BottomSheet.tsx

@@ -43,7 +43,7 @@ const MOVE_SPEED = 1400; // 1400px/s, bottom sheet is big and a bit heavier than
 const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
   let element: HTMLDialogElement;
   let animation: Animation | undefined;
-  const hero = useHeroSignal(HERO);
+  const [hero, setHero] = useHeroSignal(HERO);
   const [cache, setCache] = createSignal<ResolvedChildren | undefined>();
   const ochildren = children(() => props.children);
 
@@ -70,11 +70,13 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
       const animation = animateHero(startRect, endRect, element, true);
       const onClose = () => {
         element.close();
+        setHero();
       };
       animation.addEventListener("finish", onClose);
       animation.addEventListener("cancel", onClose);
     } else {
       element.close();
+      setHero();
     }
   };
 

src/platform/anim.ts

@@ -12,7 +12,9 @@ export type HeroSource = {
   [key: string | symbol | number]: DOMRect | undefined;
 };
 
-const HeroSourceContext = createContext<Signal<HeroSource>>(/* __@PURE__ */undefined);
+const HeroSourceContext = createContext<Signal<HeroSource>>(
+  /* __@PURE__ */ undefined,
+);
 
 export const HeroSourceProvider = HeroSourceContext.Provider;
 
@@ -25,7 +27,7 @@ function useHeroSource() {
  */
 export function useHeroSignal(
   key: string | symbol | number,
-): Accessor<DOMRect | undefined> {
+): Signal<DOMRect | undefined> {
   const source = useHeroSource();
   if (source) {
     const [get, set] = createSignal<DOMRect>();
@@ -42,8 +44,8 @@ export function useHeroSignal(
       }
     });
 
-    return get;
+    return [get, set];
   } else {
-    return () => undefined;
+    return [() => undefined, () => undefined];
   }
 }