fix: 🐛 MiniMap is observing content resizing

Author: prc5

src/components/mini-map/mini-map.tsx

@@ -6,6 +6,7 @@ import {
   useTransformEffect,
   useTransformInit,
 } from "hooks";
+import { useResize } from "./use-resize.hook";
 
 export type MiniMapProps = {
   width?: number;
@@ -131,6 +132,10 @@ export const MiniMap: React.FC<MiniMapProps> = ({
     initialize();
   });
 
+  useResize(instance.contentComponent, () => {
+    initialize();
+  });
+
   const wrapperStyle = useMemo(() => {
     return {
       ...size,

src/components/mini-map/use-resize.hook.ts

@@ -0,0 +1,67 @@
+import { useEffect, useRef } from "react";
+
+export type NonNullableKeys<T> = {
+  [P in keyof T]-?: NonNullable<T[P]>;
+};
+
+export type Nullable<T> = T | null;
+
+export type ElementRect = Omit<DOMRect, "toJSON">;
+
+const initialElementRect: ElementRect = {
+  width: 0,
+  height: 0,
+  y: 0,
+  x: 0,
+  top: 0,
+  bottom: 0,
+  left: 0,
+  right: 0,
+};
+
+type ResizeHandler<T extends HTMLElement> = (
+  elementRect: ElementRect,
+  element: T,
+) => void;
+
+export const useResize = <T extends HTMLElement>(
+  ref: Nullable<T>,
+  onResize: ResizeHandler<T>,
+) => {
+  const resizeObserverRef = useRef<ResizeObserver>();
+
+  const rectRef = useRef(initialElementRect);
+
+  const didUnmount = useRef(false);
+
+  useEffect(() => {
+    didUnmount.current = false;
+    if (ref) {
+      resizeObserverRef.current = new ResizeObserver(
+        (entries: ResizeObserverEntry[]) => {
+          const newSize = ref.getBoundingClientRect();
+          if (
+            !Array.isArray(entries) ||
+            !entries.length ||
+            didUnmount.current ||
+            newSize.width === rectRef.current.width ||
+            newSize.height === rectRef.current.height
+          )
+            return;
+
+          onResize(newSize, ref);
+          rectRef.current = newSize;
+        },
+      );
+
+      resizeObserverRef.current?.observe(ref);
+    }
+
+    return () => {
+      didUnmount.current = true;
+      if (ref) {
+        resizeObserverRef.current?.unobserve(ref);
+      }
+    };
+  }, [onResize, ref]);
+};

src/hooks/use-transform-init.tsx

@@ -13,10 +13,8 @@ export const useTransformInit = (
     let unmountCallback: void | (() => void);
     let unmount: void | (() => void);
     if (libraryContext.contentComponent && libraryContext.wrapperComponent) {
-      console.warn(333);
       unmountCallback = callback(getState(libraryContext));
     } else {
-      console.warn(444);
       unmount = libraryContext.onInit((ref) => {
         unmountCallback = callback(getState(ref.instance));
       });