BottomSheet: first attempt for animation

src/platform/anim.ts

@@ -1,13 +1,47 @@
-import { createContext, useContext, type Accessor } from "solid-js";
+import {
+  createContext,
+  createRenderEffect,
+  createSignal,
+  untrack,
+  useContext,
+  type Accessor,
+  type Signal,
+} from "solid-js";
 
 export type HeroSource = {
-  [key: string | symbol | number]: HTMLElement | undefined;
+  [key: string | symbol | number]: DOMRect | undefined;
 };
 
-const HeroSourceContext = createContext<Accessor<HeroSource>>(() => ({}));
+const HeroSourceContext = createContext<Signal<HeroSource>>(undefined);
 
 export const HeroSourceProvider = HeroSourceContext.Provider;
 
-export function useHeroSource() {
+function useHeroSource() {
   return useContext(HeroSourceContext);
 }
+
+export function useHeroSignal(
+  key: string | symbol | number,
+): Accessor<DOMRect | undefined> {
+  const source = useHeroSource();
+  if (source) {
+    const [get, set] = createSignal<DOMRect>();
+
+    createRenderEffect(() => {
+      const value = source[0]();
+      console.debug("value", value);
+      if (value[key]) {
+        set(value[key]);
+        source[1]((x) => {
+          const cpy = Object.assign({}, x);
+          delete cpy[key];
+          return cpy;
+        });
+      }
+    });
+
+    return get;
+  } else {
+    return () => undefined;
+  }
+}

src/platform/host.ts

@@ -0,0 +1,12 @@
+export function isiOS() {
+  return [
+    'iPad Simulator',
+    'iPhone Simulator',
+    'iPod Simulator',
+    'iPad',
+    'iPhone',
+    'iPod'
+  ].includes(navigator.platform)
+  // iPad on iOS 13 detection
+  || (navigator.userAgent.includes("Mac") && "ontouchend" in document)
+}

src/platform/polyfills.ts

@@ -0,0 +1,8 @@
+//! This module has side effect.
+//! It recommended to include the module by <script> tag.
+if (!document.body.animate) {
+  // @ts-ignore: this file is polyfill, no exposed decls
+  import("web-animations-js").then(() => {
+    console.warn("web animation polyfill is included");
+  });
+}