perf: improve instance selection performance (#5151)

We had a few issues

- instance selector was resynced even though computed from awareness
- when click in navigator both click and focus events do selection

So fixed by reducing 6 or more reselections when click on instances in
navigator.

Author: TrySound

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

@@ -3,7 +3,6 @@ import {
   $blockChildOutline,
   $hoveredInstanceSelector,
   $instances,
-  $selectedInstanceSelector,
   $textEditingInstanceSelector,
   findBlockChildSelector,
 } from "~/shared/nano-states";
@@ -15,6 +14,7 @@ import {
 } from "~/shared/dom-utils";
 import { subscribeScrollState } from "./shared/scroll-state";
 import { isDescendantOrSelf, type InstanceSelector } from "~/shared/tree-utils";
+import { $awareness } from "~/shared/awareness";
 
 type TimeoutId = undefined | ReturnType<typeof setTimeout>;
 
@@ -203,15 +203,14 @@ export const subscribeInstanceHovering = ({
   );
 
   // selected instance selection can change hovered instance outlines (example Block/Template/Child)
-  const usubscribeSelectedInstanceSelector =
-    $selectedInstanceSelector.subscribe(() => {
-      const instanceSelector = $hoveredInstanceSelector.get();
-      if (instanceSelector) {
-        updateHoveredRect(instanceSelector);
-      } else {
-        $hoveredInstanceOutline.set(undefined);
-      }
-    });
+  const usubscribeSelectedInstanceSelector = $awareness.subscribe(() => {
+    const instanceSelector = $hoveredInstanceSelector.get();
+    if (instanceSelector) {
+      updateHoveredRect(instanceSelector);
+    } else {
+      $hoveredInstanceOutline.set(undefined);
+    }
+  });
 
   signal.addEventListener("abort", () => {
     unsubscribeScrollState();

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

@@ -11,7 +11,6 @@ import {
   $selectedInstanceRenderState,
   $stylesIndex,
   $instances,
-  $selectedInstanceSelector,
   $propValuesByInstanceSelectorWithMemoryProps,
   $styles,
   $selectedInstanceStates,
@@ -33,6 +32,7 @@ import {
   setDataCollapsed,
 } from "~/canvas/collapsed";
 import type { InstanceSelector } from "~/shared/tree-utils";
+import { $awareness } from "~/shared/awareness";
 
 const setOutline = (instanceId: Instance["id"], elements: HTMLElement[]) => {
   $selectedInstanceOutline.set({
@@ -347,17 +347,16 @@ export const subscribeSelected = (
   let previousSelectedInstance: readonly string[] | undefined = undefined;
   let unsubscribeSelectedInstance = () => {};
 
-  const unsubscribe = $selectedInstanceSelector.subscribe(
-    (instanceSelector) => {
-      if (instanceSelector !== previousSelectedInstance) {
-        unsubscribeSelectedInstance();
-        unsubscribeSelectedInstance =
-          subscribeSelectedInstance(instanceSelector ?? [], debounceEffect) ??
-          (() => {});
-        previousSelectedInstance = instanceSelector;
-      }
+  const unsubscribe = $awareness.subscribe((awareness) => {
+    const instanceSelector = awareness?.instanceSelector;
+    if (instanceSelector !== previousSelectedInstance) {
+      unsubscribeSelectedInstance();
+      unsubscribeSelectedInstance =
+        subscribeSelectedInstance(instanceSelector ?? [], debounceEffect) ??
+        (() => {});
+      previousSelectedInstance = instanceSelector;
     }
-  );
+  });
 
   return () => {
     unsubscribe();

apps/builder/app/shared/awareness.ts

@@ -178,7 +178,12 @@ export const selectInstance = (
   instanceSelector: undefined | Instance["id"][]
 ) => {
   const awareness = $awareness.get();
-  if (awareness) {
+  if (
+    awareness &&
+    // prevent triggering select across the builder when selector is the same
+    // useful when click and focus events have to select instance
+    awareness.instanceSelector?.join() !== instanceSelector?.join()
+  ) {
     $awareness.set({
       pageId: awareness.pageId,
       instanceSelector,

apps/builder/app/shared/nano-states/misc.ts

@@ -23,9 +23,8 @@ import type { TokenPermissions } from "@webstudio-is/authorization-token";
 import type { AssetType } from "@webstudio-is/asset-uploader";
 import type { DragStartPayload } from "~/canvas/shared/use-drag-drop";
 import { type InstanceSelector } from "../tree-utils";
-import { $selectedInstanceSelector } from "./instances";
 import type { ChildrenOrientation } from "node_modules/@webstudio-is/design-system/src/components/primitives/dnd/geometry-utils";
-import { $selectedInstance } from "../awareness";
+import { $awareness, $selectedInstance } from "../awareness";
 import type { UserPlanFeatures } from "../db/user-plan-features.server";
 
 export const $project = atom<Project | undefined>();
@@ -92,7 +91,7 @@ export const $selectedStyleSources = atom(
 );
 export const $selectedStyleState = atom<StyleDecl["state"]>();
 // reset style state whenever selected instance change
-onSet($selectedInstanceSelector, () => {
+onSet($awareness, () => {
   $selectedStyleState.set(undefined);
 });
 

apps/builder/app/shared/sync/sync-stores.ts

@@ -13,7 +13,6 @@ import {
   $styleSourceSelections,
   $assets,
   $selectedPageHash,
-  $selectedInstanceSelector,
   $selectedInstanceSizes,
   $selectedInstanceRenderState,
   $hoveredInstanceSelector,
@@ -86,10 +85,6 @@ export const createObjectPool = () => {
   return new SyncObjectPool([
     new ImmerhinSyncObject("server", serverSyncStore),
     new ImmerhinSyncObject("client", clientSyncStore),
-    new NanostoresSyncObject(
-      "selectedInstanceSelector",
-      $selectedInstanceSelector
-    ),
     new NanostoresSyncObject("awareness", $awareness),
     new NanostoresSyncObject("temporaryInstances", $temporaryInstances),