reduce ResizeObserver number

.gitignore

@@ -3,3 +3,4 @@ dist/
 dev-dist/
 .env.local
 .env.*.local
+.DS_Store

package.json

@@ -52,8 +52,8 @@
     "@solid-primitives/map": "^0.4.13",
     "@solid-primitives/page-visibility": "^2.0.17",
     "@solid-primitives/resize-observer": "^2.0.26",
+    "@solid-primitives/static-store": "^0.1.0",
     "@solidjs/router": "^0.15.2",
-    "@solid-primitives/rootless": "^1.4.5",
     "@suid/icons-material": "^0.8.1",
     "@suid/material": "^0.18.0",
     "blurhash": "^2.0.5",
@@ -74,5 +74,11 @@
     "workbox-core": "^7.3.0",
     "workbox-precaching": "^7.3.0"
   },
-  "packageManager": "bun@1.1.34"
+  "packageManager": "bun@1.1.34",
+  "trustedDependencies": [
+    "edgedriver"
+  ],
+  "patchedDependencies": {
+    "@suid/vite-plugin@0.3.1": "patches/@suid%2Fvite-plugin@0.3.1.patch"
+  }
 }

patches/@suid%2Fvite-plugin@0.3.1.patch

@@ -0,0 +1,15 @@
+diff --git a/index.mjs b/index.mjs
+index 2cf42b9506e130fcc9c1ca166d03d3d8b9b5781c..7dc283602ff09b94c6300f45eac223125eebeb46 100644
+--- a/index.mjs
++++ b/index.mjs
+@@ -2,8 +2,8 @@ import $generate from "@babel/generator";
+ import { parse } from "@babel/parser";
+ import $traverse from "@babel/traverse";
+ import * as types from "@babel/types";
+-const traverse = $traverse.default;
+-const generate = $generate.default;
++const traverse = $traverse.default ?? $traverse;
++const generate = $generate.default ?? $generate;
+ const defaultOptions = {
+   disableOptimizeDeps: [
+     "@suid/base",

src/App.tsx

@@ -33,6 +33,7 @@ import { Service } from "./serviceworker/services.js";
 import { makeEventListener } from "@solid-primitives/event-listener";
 import { ServiceWorkerProvider } from "./platform/host.js";
 import StackedRouter from "./platform/StackedRouter.js";
+import {ResizeObserverBoundary} from "~platform/resize-observer.jsx";
 
 const AccountSignIn = lazy(() => import("./accounts/SignIn.js"));
 const AccountMastodonOAuth2Callback = lazy(
@@ -157,6 +158,7 @@ const App: Component = () => {
       }}
     >
       <ThemeProvider theme={theme}>
+        <ResizeObserverBoundary>
         <AppLocaleProvider
           value={{
             language: lang,
@@ -176,6 +178,7 @@ const App: Component = () => {
             </ServiceWorkerProvider>
           </ClientProvider>
         </AppLocaleProvider>
+        </ResizeObserverBoundary>
       </ThemeProvider>
     </ErrorBoundary>
   );

src/material/Scaffold.tsx

@@ -1,4 +1,4 @@
-import { createElementSize } from "@solid-primitives/resize-observer";
+import { createElementSize } from "~platform/resize-observer";
 import {
   JSX,
   Show,

src/platform/Masonry.tsx

@@ -10,7 +10,7 @@ import {
 } from "solid-js";
 import { Dynamic, type DynamicProps } from "solid-js/web";
 import MasonryLayout from "masonry-layout";
-import { createElementSize } from "@solid-primitives/resize-observer";
+import { createElementSize } from "~platform/resize-observer";
 import "./Masonry.css";
 
 type MasonryContainer =

src/platform/MediaQuickview.css

@@ -1,76 +0,0 @@
-.MediaQuickview__root {
-  display: contents;
-}
-
-.MediaQuickview {
-  border: none;
-  position: fixed;
-  width: 100vw;
-  width: 100dvw;
-  height: 100vh;
-  height: 100dvh;
-  max-width: 100vw;
-  max-height: 100vh;
-  contain: content;
-  padding: 0;
-
-  &::backdrop {
-    background: none;
-  }
-
-  >.Scaffold>.topbar {
-    position: fixed;
-    left: 0;
-    right: 0;
-
-    >* {
-      background-color: var(--tutu-color-surface);
-      color: var(--tutu-color-on-surface);
-    }
-  }
-
-  >.Scaffold>.pages {
-    display: grid;
-    grid-auto-flow: column;
-    grid-auto-columns: 100%;
-    height: 100%;
-    width: 100%;
-    overflow: auto hidden;
-    scroll-snap-type: x mandatory;
-    scroll-snap-align: center;
-    scroll-snap-stop: always;
-
-
-    >.page {
-      width: 100%;
-      height: 100%;
-      max-width: 100vw;
-      max-height: 100vh;
-      contain: strict;
-
-      cursor: grab;
-
-      >* {
-        display: block;
-
-        object-fit: contain;
-        object-position: center;
-        transform-origin: 0 0;
-      }
-    }
-  }
-
-  &.lightout {
-    >.Scaffold {
-      >.topbar {
-        visibility: hidden;
-      }
-    }
-  }
-
-  &.moving {
-    >.Scaffold>.pages>.page {
-      cursor: grabbing;
-    }
-  }
-}

src/platform/MediaQuickview.tsx

@@ -1,331 +0,0 @@
-import { createCallback, createSubRoot } from "@solid-primitives/rootless";
-import {
-  batch,
-  createMemo,
-  createRenderEffect,
-  createSignal,
-  Index,
-  Match,
-  onCleanup,
-  onMount,
-  Switch,
-  type Component,
-} from "solid-js";
-import { render } from "solid-js/web";
-import Scaffold from "~material/Scaffold";
-import { isPointNotInRect } from "./dom";
-import "./MediaQuickview.css";
-import AppTopBar from "~material/AppTopBar";
-import { IconButton } from "@suid/material";
-import { Close } from "@suid/icons-material";
-import { createStore, unwrap } from "solid-js/store";
-
-function renderIsolateMediaQuickview(
-  each: QuickviewMedia[],
-  index: number,
-  transitionFrom?: Element,
-) {
-  createSubRoot((disposeAll) => {
-    let container: HTMLDivElement;
-
-    createRenderEffect(() => {
-      container = document.createElement("div");
-      container.setAttribute("role", "presentation");
-      container.classList.add("MediaQuickview__root");
-      document.querySelector("body")!.appendChild(container);
-
-      onCleanup(() => container.remove());
-
-      const dispose = render(() => {
-        return (
-          <MediaQuickview
-            each={each}
-            defaultIndex={index}
-            transitonFrom={transitionFrom}
-            onClose={disposeAll}
-          />
-        );
-      }, container);
-
-      onCleanup(dispose);
-    });
-  });
-}
-
-export function createMediaQuickview() {
-  return createCallback(renderIsolateMediaQuickview);
-}
-
-type VisualMediaMeta = {
-  width: number;
-  height: number;
-};
-
-function ImagePage(props: {
-  src: string;
-  alt?: string;
-  scale: number;
-  offsetX: number;
-  offsetY: number;
-
-  onMetadata?(metadata: VisualMediaMeta): void;
-}) {
-  const [loaded, setLoaded] = createSignal(false);
-
-  return (
-    <img
-      onLoad={({ currentTarget }) => {
-        const { naturalHeight, naturalWidth } = currentTarget;
-
-        props.onMetadata?.({
-          width: naturalWidth,
-          height: naturalHeight,
-        });
-
-        setLoaded(true);
-      }}
-      src={props.src}
-      alt={props.alt}
-      style={{
-        transform: `scale(${props.scale}) translateX(${-props.offsetX}px) translateY(${-props.offsetY}px)`,
-        opacity: loaded() ? 1 : 0,
-      }}
-    ></img>
-  );
-}
-
-export type QuickviewMedia = {
-  cat: "image" | "video" | "gifv" | "audio" | "unknown";
-  src: string;
-  alt?: string;
-};
-
-export type MediaQuickviewProps = {
-  each: QuickviewMedia[];
-  defaultIndex: number;
-  transitonFrom?: Element;
-
-  onClose?(): void;
-};
-
-const MediaQuickview: Component<MediaQuickviewProps> = (props) => {
-  let root: HTMLDialogElement;
-
-  const [lightOut, setLightOut] = createSignal(false);
-
-  function onDialogClick(
-    event: MouseEvent & { currentTarget: HTMLDialogElement },
-  ) {
-    event.stopPropagation();
-
-    if (
-      isPointNotInRect(
-        event.currentTarget.getBoundingClientRect(),
-        event.clientX,
-        event.clientY,
-      )
-    ) {
-      event.currentTarget.close();
-    } else {
-      setLightOut((x) => !x);
-    }
-  }
-
-  const [transformations, setTransformations] = createStore(
-    [] as {
-      scale: number;
-      /**
-       * positive = the left edge move towards left
-       */
-      offsetX: number;
-      /**
-       * positive = the top edge move towards top
-       */
-      offsetY: number;
-
-      size?: {
-        width: number;
-        height: number;
-      };
-    }[],
-  );
-
-  const transformationGetOrSetDefault = (index: number) => {
-    if (transformations.length <= index) {
-      setTransformations(index, {
-        scale: 1,
-        offsetX: 0,
-        offsetY: 0,
-      });
-    }
-    return transformations[index];
-  };
-
-  const onWheel = (
-    index: number,
-    event: WheelEvent & { currentTarget: HTMLElement },
-  ) => {
-    // This is a de-facto standard for scaling:
-    // Browsers will simulate ctrl + wheel for two point scaling gesture on trackpad.
-    if (event.ctrlKey) {
-      event.preventDefault();
-      event.stopPropagation();
-
-      const { clientX, clientY, currentTarget, deltaY } = event;
-
-      const offset = -deltaY; // not reversed wheel: wheel up = scale +, wheel down = scale -
-      const scaleOffset = offset / currentTarget.clientHeight;
-
-      // Map the screen scale to the image viewport scale
-      const userOriginX = clientX - currentTarget.clientLeft;
-      const userOriginY = clientY - currentTarget.clientTop;
-      setTransformations(index, ({ scale, offsetX, offsetY }) => {
-        const nscale = scale + scaleOffset;
-        return {
-          offsetX: offsetX + (userOriginX * nscale - userOriginX),
-          offsetY: offsetY + (userOriginY * nscale - userOriginX),
-          scale: nscale,
-        };
-      });
-    }
-  };
-
-  const [isMoving, setIsMoving] = createSignal(false);
-  let movOriginX: number = 0,
-    movOriginY: number = 0;
-
-  const onMouseDown = (event: MouseEvent) => {
-    event.preventDefault();
-    setIsMoving(true);
-    movOriginX = event.clientX;
-    movOriginY = event.clientY;
-  };
-
-  const onMouseMove = (index: number, event: MouseEvent) => {
-    if (!isMoving()) {
-      return;
-    }
-    const dx = movOriginX - event.clientX;
-    const dy = movOriginY - event.clientY;
-
-    setTransformations(index, ({ offsetX, offsetY }) => {
-      return {
-        offsetX: offsetX + dx,
-        offsetY: offsetY + dy,
-      };
-    });
-
-    movOriginX = event.clientX;
-    movOriginY = event.clientY;
-  };
-
-  const onMouseUp = (event: MouseEvent) => {
-    setIsMoving(false);
-  };
-
-  const recenter = (index: number) => {
-    const sz = transformations[index].size;
-    if (!sz) return;
-    const { width, height } = sz;
-
-    const xscale = Math.min(window.innerWidth / width, 1);
-    const yscale = Math.min(window.innerHeight / height, 1);
-
-    const finalScale = Math.min(xscale, yscale);
-
-    const nheight = height * finalScale;
-    const top = (window.innerHeight - nheight) / 2;
-
-    const nwidth = width * finalScale;
-    const left = (window.innerWidth - nwidth) / 2;
-
-    setTransformations(index, {
-      scale: finalScale,
-      offsetX: -left,
-      offsetY: -top,
-    });
-  };
-
-  const onMetadata = (index: number, { width, height }: VisualMediaMeta) => {
-    setTransformations(index, {
-      size: {
-        width,
-        height,
-      },
-    });
-
-    recenter(index);
-  };
-
-  return (
-    <dialog
-      ref={(e) => {
-        root = e;
-        onMount(() => {
-          e.showModal();
-        });
-      }}
-      class="MediaQuickview"
-      classList={{ lightout: lightOut(), moving: isMoving() }}
-      onClose={props.onClose}
-      onCancel={props.onClose}
-      onClick={onDialogClick}
-    >
-      <Scaffold
-        topbar={
-          <AppTopBar>
-            <IconButton
-              color="inherit"
-              onClick={(e) => root.close()}
-              disableFocusRipple
-            >
-              <Close />
-            </IconButton>
-          </AppTopBar>
-        }
-      >
-        <div
-          ref={(e) => {
-            onMount(() => {
-              e.children.item(props.defaultIndex)!.scrollIntoView({
-                behavior: "instant",
-                inline: "center",
-              });
-            });
-          }}
-          class="pages"
-        >
-          <Index each={props.each}>
-            {(item, index) => {
-              return (
-                <section
-                  class="page"
-                  onWheel={[onWheel, index]}
-                  onMouseDown={onMouseDown}
-                  onMouseMove={[onMouseMove, index]}
-                  onMouseUp={onMouseUp}
-                  onMouseLeave={onMouseUp}
-                >
-                  <Switch>
-                    <Match when={item().cat === "image"}>
-                      <ImagePage
-                        onMetadata={(m) => onMetadata(index, m)}
-                        src={item().src}
-                        alt={item().alt}
-                        scale={transformationGetOrSetDefault(index).scale}
-                        offsetX={transformationGetOrSetDefault(index).offsetX}
-                        offsetY={transformationGetOrSetDefault(index).offsetY}
-                      />
-                    </Match>
-                  </Switch>
-                </section>
-              );
-            }}
-          </Index>
-        </div>
-      </Scaffold>
-    </dialog>
-  );
-};
-
-export default MediaQuickview;

src/platform/resize-observer.tsx

@@ -0,0 +1,158 @@
+import {
+  createContext,
+  createEffect,
+  onCleanup,
+  sharedConfig,
+  useContext,
+  type JSX,
+} from "solid-js";
+import { isDev, isServer } from "solid-js/web";
+import { createStaticStore } from "@solid-primitives/static-store";
+
+export type ObserveCallback<E extends Element> = (
+  entry: ResizeObserverEntry & { readonly target: E },
+) => void;
+export type ObserveElement = <E extends Element = Element>(
+  element: E,
+  callback: ObserveCallback<E>,
+) => () => void;
+
+const ResizeObserverContext = /* @__PURE__ */ createContext<ObserveElement>();
+
+export function useResizeObserver() {
+  const observe = useContext(ResizeObserverContext);
+
+  if (isDev && !observe) {
+    throw new TypeError(
+      "ObserverElement is not found, this function must be called in <ResizeOberserBoundary />",
+    );
+  }
+
+  return observe!;
+}
+
+function ResizeObserverBoundaryClient(props: { children: JSX.Element }) {
+  const map = new Map<
+    Element,
+    ObserveCallback<Element> | ObserveCallback<Element>[]
+  >();
+
+  const observer = new ResizeObserver((entries) => {
+    for (const entry of entries) {
+      const callback = map.get(entry.target);
+      if (!callback) return;
+      if (Array.isArray(callback)) {
+        for (const f of callback) {
+          f(entry);
+        }
+      } else {
+        callback(entry);
+      }
+    }
+  });
+
+  onCleanup(() => {
+    observer.disconnect();
+  });
+
+  const observe: ObserveElement = (
+    element: Element,
+    callback: ObserveCallback<any>,
+  ) => {
+    const callbacks = map.get(element);
+    if (!callbacks) {
+      map.set(element, callback);
+      observer.observe(element);
+    } else if (Array.isArray(callbacks)) {
+      callbacks.push(callback);
+    } else {
+      map.set(element, [callbacks, callback]);
+    }
+
+    return () => {
+      const callbacks = map.get(element);
+      if (callbacks === null) {
+        observer.unobserve(element);
+      } else if (Array.isArray(callbacks)) {
+        const idx = callbacks.indexOf(callback);
+        if (idx !== -1) {
+          callbacks.splice(idx, 1);
+        }
+
+        if (callbacks.length === 0) {
+          observer.unobserve(element);
+          map.delete(element);
+        }
+      } else {
+        observer.unobserve(element);
+        map.delete(element);
+      }
+    };
+  };
+
+  return (
+    <ResizeObserverContext.Provider value={observe}>
+      {props.children}
+    </ResizeObserverContext.Provider>
+  );
+}
+
+function ResizeObserverBoundaryServer(props: { children: JSX.Element }) {
+  return (
+    <ResizeObserverContext.Provider
+      value={(() => {}) as unknown as ObserveElement}
+    >
+      {props.children}
+    </ResizeObserverContext.Provider>
+  );
+}
+
+export const ResizeObserverBoundary = isServer
+  ? ResizeObserverBoundaryServer
+  : ResizeObserverBoundaryClient;
+
+const ELEMENT_SIZE_FALLBACK = { width: null, height: null };
+
+function getElementSize(target: Element) {
+  if (isServer || !target) {
+    return { ...ELEMENT_SIZE_FALLBACK };
+  }
+  const { width, height } = target.getBoundingClientRect();
+  return { width, height };
+}
+
+export type NullableSize = {width: number | null, height: number | null}
+
+export function createElementSize(
+  target: Element | (() => Element | undefined | null | false),
+): Readonly<NullableSize> {
+  if (isServer) {
+    return ELEMENT_SIZE_FALLBACK;
+  }
+  const isFn = typeof target === "function";
+  const [size, setSize] = createStaticStore(
+    sharedConfig.context || isFn
+      ? ELEMENT_SIZE_FALLBACK
+      : getElementSize(target),
+  );
+  const callback: ObserveCallback<Element> = (entry) => {
+    setSize(getElementSize(entry.target));
+  };
+  const observe = useResizeObserver();
+  if (isFn) {
+    createEffect(() => {
+      const el = target();
+      if (el) {
+        setSize(getElementSize(el));
+        const unobserve = observe(el, callback);
+        onCleanup(unobserve);
+      }
+    });
+  } else {
+    const unobserve = observe(target, callback);
+    onCleanup(unobserve);
+  }
+  return size;
+}
+
+export { useWindowSize } from "@solid-primitives/resize-observer";

src/timelines/toots/MediaAttachmentGrid.tsx

@@ -5,13 +5,14 @@ import {
   Match,
   Switch,
   createMemo,
+  createRenderEffect,
   createSignal,
+  onCleanup,
   untrack,
 } from "solid-js";
-import {
+import MediaViewer from "../MediaViewer";
-  createElementSize,
+import { render } from "solid-js/web";
-  useWindowSize,
+import { createElementSize, useWindowSize } from "~platform/resize-observer";
-} from "@solid-primitives/resize-observer";
 import { useStore } from "@nanostores/solid";
 import { $settings } from "../../settings/stores";
 import { averageColorHex } from "~platform/blurhash";
@@ -20,7 +21,6 @@ import "~material/cards.css";
 import { Preview } from "@suid/icons-material";
 import { IconButton } from "@suid/material";
 import Masonry from "~platform/Masonry";
-import { createMediaQuickview } from "~platform/MediaQuickview";
 
 type ElementSize = { width: number; height: number };
 
@@ -55,23 +55,39 @@ const MediaAttachmentGrid: Component<{
   sensitive?: boolean;
 }> = (props) => {
   const [rootRef, setRootRef] = createSignal<HTMLElement>();
+  const [viewerIndex, setViewerIndex] = createSignal<number>();
+  const viewerOpened = () => typeof viewerIndex() !== "undefined";
   const settings = useStore($settings);
   const windowSize = useWindowSize();
   const [reveal, setReveal] = createSignal([] as number[]);
 
-  const openMediaQuickview = createMediaQuickview();
+  createRenderEffect(() => {
+    const vidx = viewerIndex();
+    if (typeof vidx === "undefined") return;
+    const container = document.createElement("div");
+    container.setAttribute("role", "presentation");
+    document.body.appendChild(container);
+    const dispose = render(() => {
+      onCleanup(() => {
+        document.body.removeChild(container);
+      });
+
+      return (
+        <MediaViewer
+          show={viewerOpened()}
+          index={viewerIndex() || 0}
+          onIndexUpdated={setViewerIndex}
+          media={props.attachments}
+          onClose={() => setViewerIndex()}
+        />
+      );
+    }, container);
+
+    onCleanup(dispose);
+  });
 
   const openViewerFor = (index: number) => {
-    openMediaQuickview(
+    setViewerIndex(index);
-      props.attachments.map((item) => {
-        return {
-          cat: item.type,
-          src: item.url as string,
-          alt: item.description || undefined,
-        };
-      }),
-      index,
-    );
   };
 
   const columnCount = () => {