experimental: Abort controller (#4195)

## Description

I tried how the code will look like with abort controller, if you don't
like it - we can close this without merging


## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

Author: kof

apps/builder/app/builder/builder.tsx

@@ -32,7 +32,6 @@ import {
 } from "~/shared/nano-states";
 import { $settings, type Settings } from "./shared/client-settings";
 import { builderUrl, getCanvasUrl } from "~/shared/router-utils";
-import { useCopyPaste } from "~/shared/copy-paste";
 import { BlockingAlerts } from "./features/blocking-alerts";
 import { useSyncPageUrl } from "~/shared/pages";
 import { useMount, useUnmount } from "~/shared/hook-utils/use-mount";
@@ -58,6 +57,7 @@ import { updateWebstudioData } from "~/shared/instance-utils";
 import { migrateWebstudioDataMutable } from "~/shared/webstudio-data-migrator";
 import { Loading, LoadingBackground } from "./shared/loading";
 import { mergeRefs } from "@react-aria/utils";
+import { initCopyPaste } from "~/shared/copy-paste";
 
 registerContainers();
 
@@ -285,9 +285,7 @@ export const Builder = ({
   const isCloneDialogOpen = useStore($isCloneDialogOpen);
   const isPreviewMode = useStore($isPreviewMode);
   const { onRef: onRefReadCanvas, onTransitionEnd } = useReadCanvasRect();
-  // We need to initialize this in both canvas and builder,
-  // because the events will fire in either one, depending on where the focus is
-  useCopyPaste();
+
   useSetWindowTitle();
 
   const iframeRefCallback = mergeRefs((element: HTMLIFrameElement | null) => {
@@ -299,14 +297,24 @@ export const Builder = ({
   const [loadingState, setLoadingState] = useState(() => $loadingState.get());
 
   useEffect(() => {
+    const abortController = new AbortController();
+    // We need to initialize this in both canvas and builder,
+    // because the events will fire in either one, depending on where the focus is
+    // @todo we need to forward the events from canvas to builder and avoid importing this
+    // in both places
+    initCopyPaste(abortController);
+
     const unsubscribe = $loadingState.subscribe((loadingState) => {
       setLoadingState(loadingState);
       // We need to stop updating it once it's ready in case in the future it changes again.
       if (loadingState.state === "ready") {
         unsubscribe();
       }
     });
-    return unsubscribe;
+    return () => {
+      unsubscribe();
+      abortController.abort();
+    };
   }, []);
 
   const canvasUrl = getCanvasUrl();

apps/builder/app/canvas/canvas.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useEffect, useState, useLayoutEffect } from "react";
+import { useMemo, useEffect, useState, useLayoutEffect, useRef } from "react";
 import { ErrorBoundary, type FallbackProps } from "react-error-boundary";
 import { useStore } from "@nanostores/react";
 import type { Instances } from "@webstudio-is/sdk";
@@ -28,10 +28,10 @@ import {
   useCanvasStore,
 } from "~/shared/sync";
 import {
-  useManageDesignModeStyles,
   GlobalStyles,
   subscribeStyles,
   mountStyles,
+  manageDesignModeStyles,
 } from "./shared/styles";
 import {
   WebstudioComponentCanvas,
@@ -48,23 +48,24 @@ import {
   $isPreviewMode,
 } from "~/shared/nano-states";
 import { useDragAndDrop } from "./shared/use-drag-drop";
-import { useCopyPaste } from "~/shared/copy-paste";
+import { initCopyPaste } from "~/shared/copy-paste";
 import { setDataCollapsed, subscribeCollapsedToPubSub } from "./collapsed";
 import { useWindowResizeDebounced } from "~/shared/dom-hooks";
 import { subscribeInstanceSelection } from "./instance-selection";
 import { subscribeInstanceHovering } from "./instance-hovering";
 import { useHashLinkSync } from "~/shared/pages";
 import { useMount } from "~/shared/hook-utils/use-mount";
-import { useSelectedInstance } from "./use-selected-instance";
 import { subscribeInterceptedEvents } from "./interceptor";
 import type { ImageLoader } from "@webstudio-is/image";
 import { subscribeCommands } from "~/canvas/shared/commands";
 import { updateCollaborativeInstanceRect } from "./collaborative-instance";
 import { $params } from "./stores";
-import { useScrollNewInstanceIntoView } from "./shared/use-scroll-new-instance-into-view";
 import { subscribeInspectorEdits } from "./inspector-edits";
 import { initCanvasApi } from "~/shared/canvas-api";
 import { subscribeFontLoadingDone } from "./shared/font-weight-support";
+import { useDebounceEffect } from "~/shared/hook-utils/use-debounce-effect";
+import { subscribeSelected } from "./instance-selected";
+import { subscribeScrollNewInstanceIntoView } from "./shared/scroll-new-instance-into-view";
 
 registerContainers();
 
@@ -130,21 +131,43 @@ const useElementsTree = (
 };
 
 const DesignMode = () => {
-  useManageDesignModeStyles();
+  const debounceEffect = useDebounceEffect();
+  const ref = useRef<Instances>();
+
   useDragAndDrop();
-  // We need to initialize this in both canvas and builder,
-  // because the events will fire in either one, depending on where the focus is
-  // @todo we need to forward the events from canvas to builder and avoid importing this
-  // in both places
-  useCopyPaste();
 
-  useScrollNewInstanceIntoView();
-  useSelectedInstance();
-  useEffect(updateCollaborativeInstanceRect, []);
-  useEffect(subscribeInstanceSelection, []);
-  useEffect(subscribeInstanceHovering, []);
-  useEffect(subscribeInspectorEdits, []);
-  useEffect(subscribeFontLoadingDone, []);
+  useEffect(() => {
+    const abortController = new AbortController();
+    subscribeScrollNewInstanceIntoView(
+      debounceEffect,
+      ref,
+      abortController.signal
+    );
+    const unsubscribeSelected = subscribeSelected(debounceEffect);
+    return () => {
+      unsubscribeSelected();
+      abortController.abort();
+    };
+  }, [debounceEffect]);
+
+  useEffect(() => {
+    const abortController = new AbortController();
+    const options = { signal: abortController.signal };
+    // We need to initialize this in both canvas and builder,
+    // because the events will fire in either one, depending on where the focus is
+    // @todo we need to forward the events from canvas to builder and avoid importing this
+    // in both places
+    initCopyPaste(options);
+    manageDesignModeStyles(options);
+    updateCollaborativeInstanceRect(options);
+    subscribeInstanceSelection(options);
+    subscribeInstanceHovering(options);
+    subscribeInspectorEdits(options);
+    subscribeFontLoadingDone(options);
+    return () => {
+      abortController.abort();
+    };
+  }, []);
   return null;
 };
 

apps/builder/app/canvas/collaborative-instance.ts

@@ -7,7 +7,11 @@ import {
   $collaborativeInstanceRect,
 } from "~/shared/nano-states";
 
-export const updateCollaborativeInstanceRect = () => {
+export const updateCollaborativeInstanceRect = ({
+  signal,
+}: {
+  signal: AbortSignal;
+}) => {
   let frameHandler: number = -1;
   let elements: HTMLElement[] = [];
 
@@ -43,8 +47,8 @@ export const updateCollaborativeInstanceRect = () => {
     }
   });
 
-  return () => {
+  signal.addEventListener("abort", () => {
     unsubscribe();
     cancelAnimationFrame(frameHandler);
-  };
+  });
 };

apps/builder/app/canvas/inspector-edits.ts

@@ -1,14 +1,13 @@
 import { canvasApi } from "~/shared/canvas-api";
 import { $props } from "~/shared/nano-states";
 
-export const subscribeInspectorEdits = () => {
-  /**
-   * Prevents Radix from stealing focus when the content inside a dialog changes.
-   * (Radix focus scope uses a MutationObserver)
-   */
+export const subscribeInspectorEdits = ({
+  signal,
+}: {
+  signal: AbortSignal;
+}) => {
+  // Prevents Radix from stealing focus when the content inside a dialog changes.
+  // (Radix focus scope uses a MutationObserver)
   const unsubscribeProps = $props.listen(canvasApi.setInert);
-
-  return () => {
-    unsubscribeProps();
-  };
+  signal.addEventListener("abort", unsubscribeProps);
 };

apps/builder/app/canvas/instance-hovering.ts

@@ -11,7 +11,11 @@ import type { InstanceSelector } from "~/shared/tree-utils";
 
 type TimeoutId = undefined | ReturnType<typeof setTimeout>;
 
-export const subscribeInstanceHovering = () => {
+export const subscribeInstanceHovering = ({
+  signal,
+}: {
+  signal: AbortSignal;
+}) => {
   let hoveredElement: undefined | Element = undefined;
   let isScrolling = false;
 
@@ -24,35 +28,41 @@ export const subscribeInstanceHovering = () => {
 
   let mouseOutTimeoutId: TimeoutId = undefined;
 
-  const handleMouseOver = (event: MouseEvent) => {
-    if (event.target instanceof Element) {
-      const element = event.target.closest(`[${idAttribute}]`) ?? undefined;
-      if (element !== undefined) {
-        clearTimeout(mouseOutTimeoutId);
-        // store hovered element locally to update outline when scroll ends
-        hoveredElement = element;
-        updateHoveredInstance(element);
+  const eventOptions = { passive: true, signal };
+
+  window.addEventListener(
+    "mouseover",
+    (event: MouseEvent) => {
+      if (event.target instanceof Element) {
+        const element = event.target.closest(`[${idAttribute}]`) ?? undefined;
+        if (element !== undefined) {
+          clearTimeout(mouseOutTimeoutId);
+          // store hovered element locally to update outline when scroll ends
+          hoveredElement = element;
+          updateHoveredInstance(element);
+        }
       }
-    }
-  };
-
-  const handleMouseOut = () => {
-    mouseOutTimeoutId = setTimeout(() => {
-      hoveredElement = undefined;
-      $hoveredInstanceSelector.set(undefined);
-      $hoveredInstanceOutline.set(undefined);
-    }, 100);
+    },
+    eventOptions
+  );
 
-    // Fixes the bug, that new hover occures during timeout
-    const unsubscribe = $hoveredInstanceSelector.listen(() => {
-      clearTimeout(mouseOutTimeoutId);
-      unsubscribe();
-    });
-  };
+  window.addEventListener(
+    "mouseout",
+    () => {
+      mouseOutTimeoutId = setTimeout(() => {
+        hoveredElement = undefined;
+        $hoveredInstanceSelector.set(undefined);
+        $hoveredInstanceOutline.set(undefined);
+      }, 100);
 
-  const eventOptions = { passive: true };
-  window.addEventListener("mouseover", handleMouseOver, eventOptions);
-  window.addEventListener("mouseout", handleMouseOut, eventOptions);
+      // Fixes the bug, that new hover occures during timeout
+      const unsubscribe = $hoveredInstanceSelector.listen(() => {
+        clearTimeout(mouseOutTimeoutId);
+        unsubscribe();
+      });
+    },
+    eventOptions
+  );
 
   const updateHoveredRect = (
     elements: Element[],
@@ -114,11 +124,9 @@ export const subscribeInstanceHovering = () => {
     }
   );
 
-  return () => {
-    window.removeEventListener("mouseover", handleMouseOver);
-    window.removeEventListener("mouseout", handleMouseOut);
+  signal.addEventListener("abort", () => {
     unsubscribeScrollState();
     clearTimeout(mouseOutTimeoutId);
     unsubscribeHoveredInstanceId();
-  };
+  });
 };

apps/builder/app/canvas/instance-selection.ts

@@ -8,7 +8,11 @@ import {
 import { $textEditingInstanceSelector } from "~/shared/nano-states";
 import { emitCommand } from "./shared/commands";
 
-export const subscribeInstanceSelection = () => {
+export const subscribeInstanceSelection = ({
+  signal,
+}: {
+  signal: AbortSignal;
+}) => {
   let pointerDownElement: undefined | Element = undefined;
   let lastPointerUpTime = 0;
   let clickCount = 1;
@@ -78,11 +82,6 @@ export const subscribeInstanceSelection = () => {
     }
   };
 
-  addEventListener("pointerdown", handlePointerDown, { passive: true });
-  addEventListener("pointerup", handlePointerUp, { passive: true });
-
-  return () => {
-    removeEventListener("pointerdown", handlePointerDown);
-    removeEventListener("pointerup", handlePointerUp);
-  };
+  addEventListener("pointerdown", handlePointerDown, { passive: true, signal });
+  addEventListener("pointerup", handlePointerUp, { passive: true, signal });
 };

apps/builder/app/canvas/shared/font-weight-support.ts

@@ -81,9 +81,11 @@ const testFontWeights = (fontFamily: string) => {
   return supportedWeights.sort();
 };
 
-export const subscribeFontLoadingDone = () => {
-  // @todo move it to the call-site
-  const abortController = new AbortController();
+export const subscribeFontLoadingDone = ({
+  signal,
+}: {
+  signal: AbortSignal;
+}) => {
   document.fonts.addEventListener(
     "loadingdone",
     () => {
@@ -95,12 +97,8 @@ export const subscribeFontLoadingDone = () => {
       }
       $detectedFontsWeights.set(cache);
     },
-    { signal: abortController.signal }
+    { signal }
   );
-
-  return () => {
-    abortController.abort();
-  };
 };
 
 export const detectSupportedFontWeights = (stack: string) => {

apps/builder/app/canvas/shared/scroll-new-instance-into-view.ts

@@ -7,9 +7,10 @@ import { $instances } from "~/shared/nano-states";
  */
 export const subscribeScrollNewInstanceIntoView = (
   debounceEffect: (callback: () => void) => void,
-  previousInstances: { current?: Instances }
+  previousInstances: { current?: Instances },
+  signal: AbortSignal
 ) => {
-  return $instances.subscribe((instances) => {
+  const unsubscribe = $instances.subscribe((instances) => {
     if (previousInstances.current === undefined) {
       previousInstances.current = instances;
       return;
@@ -36,4 +37,5 @@ export const subscribeScrollNewInstanceIntoView = (
       });
     });
   });
+  signal.addEventListener("abort", unsubscribe);
 };

apps/builder/app/canvas/shared/styles.ts

@@ -1,4 +1,4 @@
-import { useEffect, useLayoutEffect } from "react";
+import { useLayoutEffect } from "react";
 import { computed } from "nanostores";
 import { useStore } from "@nanostores/react";
 import {
@@ -307,10 +307,15 @@ export const subscribeStyles = () => {
   };
 };
 
-export const useManageDesignModeStyles = () => {
-  useEffect(subscribeStateStyles, []);
-  useEffect(subscribeEphemeralStyle, []);
-  useEffect(subscribePreviewMode, []);
+export const manageDesignModeStyles = ({ signal }: { signal: AbortSignal }) => {
+  const unsubscribeStateStyles = subscribeStateStyles();
+  const unsubscribeEphemeralStyle = subscribeEphemeralStyle();
+  const unsubscribePreviewMode = subscribePreviewMode();
+  signal.addEventListener("abort", () => {
+    unsubscribeStateStyles();
+    unsubscribeEphemeralStyle();
+    unsubscribePreviewMode();
+  });
 };
 
 export const GlobalStyles = ({ params }: { params: Params }) => {