refactor: delete prop resources (#4839)

Ref #4093

Here a few delete instance improvements

- fixed deleting resources bound to props (action in webhook form)
- rewrote all tests with jsx template
- switched from instance selector to instance path
- added slot test

Author: TrySound

apps/builder/app/builder/features/ai/apply-operations.ts

@@ -20,7 +20,7 @@ import {
   $styles,
 } from "~/shared/nano-states";
 import type { InstanceSelector } from "~/shared/tree-utils";
-import { $selectedInstance } from "~/shared/awareness";
+import { $selectedInstance, getInstancePath } from "~/shared/awareness";
 import { isInstanceDetachable } from "~/shared/matcher";
 
 export const applyOperations = (operations: operations.WsOperations) => {
@@ -107,7 +107,10 @@ const deleteInstanceByOp = (
       ) {
         return;
       }
-      deleteInstanceMutable(data, instanceSelector);
+      deleteInstanceMutable(
+        data,
+        getInstancePath(instanceSelector, data.instances)
+      );
     });
   }
 };

apps/builder/app/builder/features/pages/page-utils.ts

@@ -23,7 +23,12 @@ import {
   $variableValuesByInstanceSelector,
 } from "~/shared/nano-states";
 import { insertPageCopyMutable } from "~/shared/page-utils";
-import { $selectedPage, getInstanceKey, selectPage } from "~/shared/awareness";
+import {
+  $selectedPage,
+  getInstanceKey,
+  getInstancePath,
+  selectPage,
+} from "~/shared/awareness";
 
 /**
  * When page or folder needs to be deleted or moved to a different parent,
@@ -209,7 +214,10 @@ export const deletePageMutable = (pageId: Page["id"], data: WebstudioData) => {
   }
   const rootInstanceId = findPageByIdOrPath(pageId, pages)?.rootInstanceId;
   if (rootInstanceId !== undefined) {
-    deleteInstanceMutable(data, [rootInstanceId]);
+    deleteInstanceMutable(
+      data,
+      getInstancePath([rootInstanceId], data.instances)
+    );
   }
   removeByMutable(pages.pages, (page) => page.id === pageId);
   cleanupChildRefsMutable(pageId, pages.folders);

apps/builder/app/builder/features/workspace/canvas-tools/outline/block-instance-outline.tsx

@@ -48,6 +48,7 @@ import { skipInertHandlersAttribute } from "~/builder/shared/inert-handlers";
 
 import { insertTemplateAt } from "./block-utils";
 import { useEffectEvent } from "~/shared/hook-utils/effect-event";
+import { getInstancePath } from "~/shared/awareness";
 
 export const TemplatesMenu = ({
   onOpenChange,
@@ -382,7 +383,10 @@ export const BlockChildHoveredInstanceOutline = () => {
                 }
 
                 updateWebstudioData((data) => {
-                  deleteInstanceMutable(data, outline.selector);
+                  deleteInstanceMutable(
+                    data,
+                    getInstancePath(outline.selector, data.instances)
+                  );
                 });
 
                 setButtonOutline(undefined);

apps/builder/app/builder/shared/commands.ts

@@ -133,7 +133,7 @@ export const deleteSelectedInstance = () => {
     newSelectedInstanceSelector = parentInstanceSelector;
   }
   updateWebstudioData((data) => {
-    if (deleteInstanceMutable(data, selectedInstanceSelector)) {
+    if (deleteInstanceMutable(data, instancePath)) {
       selectInstance(newSelectedInstanceSelector);
     }
   });

apps/builder/app/canvas/features/text-editor/text-editor.tsx

@@ -89,6 +89,7 @@ import { setDataCollapsed } from "~/canvas/collapsed";
 import {
   $selectedPage,
   addTemporaryInstance,
+  getInstancePath,
   selectInstance,
 } from "~/shared/awareness";
 import { shallowEqual } from "shallow-equal";
@@ -1044,7 +1045,10 @@ const RichTextContentPluginInternal = ({
 
           if (blockChildSelector) {
             updateWebstudioData((data) => {
-              deleteInstanceMutable(data, rootInstanceSelector);
+              deleteInstanceMutable(
+                data,
+                getInstancePath(rootInstanceSelector, data.instances)
+              );
             });
           }
         }
@@ -1113,7 +1117,10 @@ const RichTextContentPluginInternal = ({
               updateWebstudioData((data) => {
                 deleteInstanceMutable(
                   data,
-                  isLastChild ? parentInstanceSelector : rootInstanceSelector
+                  getInstancePath(
+                    isLastChild ? parentInstanceSelector : rootInstanceSelector,
+                    data.instances
+                  )
                 );
               });
 
@@ -1128,7 +1135,10 @@ const RichTextContentPluginInternal = ({
               onNext(editor.getEditorState(), { reason: "left" });
 
               updateWebstudioData((data) => {
-                deleteInstanceMutable(data, blockChildSelector);
+                deleteInstanceMutable(
+                  data,
+                  getInstancePath(blockChildSelector, data.instances)
+                );
               });
 
               event.preventDefault();
@@ -1218,7 +1228,12 @@ const RichTextContentPluginInternal = ({
                 updateWebstudioData((data) => {
                   deleteInstanceMutable(
                     data,
-                    isLastChild ? parentInstanceSelector : rootInstanceSelector
+                    getInstancePath(
+                      isLastChild
+                        ? parentInstanceSelector
+                        : rootInstanceSelector,
+                      data.instances
+                    )
                   );
                 });
               }

apps/builder/app/shared/awareness.ts

@@ -81,19 +81,19 @@ export type InstancePath = Array<{
   instanceSelector: string[];
 }>;
 
-const getInstancePath = (
+export const getInstancePath = (
+  instanceSelector: string[],
   instances: Instances,
-  virtualInstances: Instances,
-  temporaryInstances: Instances,
-  instanceSelector: string[]
+  virtualInstances?: Instances,
+  temporaryInstances?: Instances
 ): InstancePath => {
   const instancePath: InstancePath = [];
   for (let index = 0; index < instanceSelector.length; index += 1) {
     const instanceId = instanceSelector[index];
     const instance =
       instances.get(instanceId) ??
-      virtualInstances.get(instanceId) ??
-      temporaryInstances.get(instanceId);
+      virtualInstances?.get(instanceId) ??
+      temporaryInstances?.get(instanceId);
     // collection item can be undefined
     if (instance === undefined) {
       continue;
@@ -114,10 +114,10 @@ export const $selectedInstancePath = computed(
       return;
     }
     return getInstancePath(
+      instanceSelector,
       instances,
       virtualInstances,
-      temporaryInstances,
-      instanceSelector
+      temporaryInstances
     );
   }
 );
@@ -134,10 +134,10 @@ export const $selectedInstancePathWithRoot = computed(
       instanceSelector = [...instanceSelector, ROOT_INSTANCE_ID];
     }
     return getInstancePath(
+      instanceSelector,
       instances,
       virtualInstances,
-      temporaryInstances,
-      instanceSelector
+      temporaryInstances
     );
   }
 );

apps/builder/app/shared/copy-paste/plugin-instance.ts

@@ -25,6 +25,7 @@ import {
   findClosestInsertable,
 } from "../instance-utils";
 import { isInstanceDetachable } from "../matcher";
+import { $selectedInstancePath } from "../awareness";
 
 const version = "@webstudio/instance/v0.1";
 
@@ -203,20 +204,20 @@ export const onCopy = () => {
 };
 
 export const onCut = () => {
-  const selectedInstanceSelector = $selectedInstanceSelector.get();
-  if (selectedInstanceSelector === undefined) {
+  const instancePath = $selectedInstancePath.get();
+  if (instancePath === undefined) {
     return;
   }
   // @todo tell user they can't delete root
-  if (selectedInstanceSelector.length === 1) {
+  if (instancePath.length === 1) {
     return;
   }
-  const data = getTreeData(selectedInstanceSelector);
+  const data = getTreeData(instancePath[0].instanceSelector);
   if (data === undefined) {
     return;
   }
   updateWebstudioData((data) => {
-    deleteInstanceMutable(data, selectedInstanceSelector);
+    deleteInstanceMutable(data, instancePath);
   });
   if (data === undefined) {
     return;