refactor: drop legacy matchers (#5146)

We already fully switched to component content model and no longer
necessary legacy matchers.

Author: TrySound

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

@@ -1,5 +1,10 @@
 import { nanoid } from "nanoid";
-import { getStyleDeclKey, Instance, type StyleSource } from "@webstudio-is/sdk";
+import {
+  getStyleDeclKey,
+  Instance,
+  isComponentDetachable,
+  type StyleSource,
+} from "@webstudio-is/sdk";
 import { generateDataFromEmbedTemplate } from "@webstudio-is/react-sdk";
 import type { copywriter, operations } from "@webstudio-is/ai";
 import { serverSyncStore } from "~/shared/sync";
@@ -23,7 +28,6 @@ import {
 } from "~/shared/nano-states";
 import type { InstanceSelector } from "~/shared/tree-utils";
 import { $selectedInstance, getInstancePath } from "~/shared/awareness";
-import { isInstanceDetachable } from "~/shared/matcher";
 import { isRichTextTree } from "~/shared/content-model";
 
 export const applyOperations = (operations: operations.WsOperations) => {
@@ -91,15 +95,10 @@ const deleteInstanceByOp = (
     if (instanceSelector.length === 1) {
       return;
     }
-    const metas = $registeredComponentMetas.get();
     updateWebstudioData((data) => {
-      if (
-        isInstanceDetachable({
-          metas,
-          instances: data.instances,
-          instanceSelector,
-        }) === false
-      ) {
+      const [instanceId] = instanceSelector;
+      const instance = data.instances.get(instanceId);
+      if (instance && !isComponentDetachable(instance.component)) {
         return;
       }
       deleteInstanceMutable(

apps/builder/app/builder/features/navigator/navigator-tree.tsx

@@ -66,7 +66,6 @@ import {
   getInstanceKey,
   selectInstance,
 } from "~/shared/awareness";
-import { isTreeMatching } from "~/shared/matcher";
 import {
   findClosestContainer,
   isRichTextContent,
@@ -562,12 +561,7 @@ const canDrop = (
   }
   // make sure dragging tree can be put inside of drop instance
   const containerInstanceSelector = [dragSelector[0], ...dropSelector];
-  let matches = isTreeMatching({
-    instances,
-    metas,
-    instanceSelector: containerInstanceSelector,
-  });
-  matches &&= isTreeSatisfyingContentModel({
+  const matches = isTreeSatisfyingContentModel({
     instances,
     metas,
     props,

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

@@ -1,5 +1,8 @@
 import { nanoid } from "nanoid";
-import { blockTemplateComponent } from "@webstudio-is/sdk";
+import {
+  blockTemplateComponent,
+  isComponentDetachable,
+} from "@webstudio-is/sdk";
 import type { Instance } from "@webstudio-is/sdk";
 import { toast } from "@webstudio-is/design-system";
 import { createCommandsEmitter, type Command } from "~/shared/commands-emitter";
@@ -36,7 +39,6 @@ import {
 import { $selectedInstancePath, selectInstance } from "~/shared/awareness";
 import { openCommandPanel } from "../features/command-panel";
 import { builderApi } from "~/shared/builder-api";
-import { isInstanceDetachable, isTreeMatching } from "~/shared/matcher";
 import { getSetting, setSetting } from "./client-settings";
 import { findAvailableVariables } from "~/shared/data-variables";
 import { atom } from "nanostores";
@@ -77,14 +79,7 @@ export const deleteSelectedInstance = () => {
   const [selectedItem, parentItem] = instancePath;
   const selectedInstanceSelector = selectedItem.instanceSelector;
   const instances = $instances.get();
-  const metas = $registeredComponentMetas.get();
-  if (
-    isInstanceDetachable({
-      metas,
-      instances,
-      instanceSelector: selectedInstanceSelector,
-    }) === false
-  ) {
+  if (!isComponentDetachable(selectedItem.instance.component)) {
     toast.error(
       "This instance can not be moved outside of its parent component."
     );
@@ -110,12 +105,12 @@ export const deleteSelectedInstance = () => {
       blockTemplateComponent;
 
     if (isTemplateInstance) {
-      builderApi.toast.info("You can't delete this instance in conent mode.");
+      builderApi.toast.info("You can't delete this instance in content mode.");
       return;
     }
 
     if (!isChildOfBlock) {
-      builderApi.toast.info("You can't delete this instance in conent mode.");
+      builderApi.toast.info("You can't delete this instance in content mode.");
       return;
     }
   }
@@ -180,12 +175,7 @@ export const wrapIn = (component: string) => {
           }
         }
       }
-      let matches = isTreeMatching({
-        metas,
-        instances: data.instances,
-        instanceSelector: newInstanceSelector,
-      });
-      matches &&= isTreeSatisfyingContentModel({
+      const matches = isTreeSatisfyingContentModel({
         instances: data.instances,
         props: data.props,
         metas,
@@ -231,12 +221,7 @@ export const unwrap = () => {
         );
         parentInstance.children.splice(index, 1, ...selectedInstance.children);
       }
-      let matches = isTreeMatching({
-        metas: $registeredComponentMetas.get(),
-        instances: data.instances,
-        instanceSelector: parentItem.instanceSelector,
-      });
-      matches &&= isTreeSatisfyingContentModel({
+      const matches = isTreeSatisfyingContentModel({
         instances: data.instances,
         props: data.props,
         metas: $registeredComponentMetas.get(),

apps/builder/app/canvas/shared/use-drag-drop.ts

@@ -29,10 +29,7 @@ import {
   type InstanceSelector,
   areInstanceSelectorsEqual,
 } from "~/shared/tree-utils";
-import {
-  findClosestInstanceMatchingFragment,
-  isTreeMatching,
-} from "~/shared/matcher";
+import { findClosestInstanceMatchingFragment } from "~/shared/matcher";
 import {
   findClosestContainer,
   findClosestRichText,
@@ -98,12 +95,7 @@ const findClosestDroppableInstanceSelector = (
       dragPayload.dragInstanceSelector[0],
       ...instanceSelector,
     ];
-    let matches = isTreeMatching({
-      instances,
-      metas,
-      instanceSelector: dropInstanceSelector,
-    });
-    matches &&= isTreeSatisfyingContentModel({
+    const matches = isTreeSatisfyingContentModel({
       instances,
       props,
       metas,

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

@@ -6,13 +6,10 @@ import {
   Instances,
   WebstudioFragment,
   findTreeInstanceIdsExcludingSlotDescendants,
+  isComponentDetachable,
   portalComponent,
 } from "@webstudio-is/sdk";
-import {
-  $selectedInstanceSelector,
-  $instances,
-  $registeredComponentMetas,
-} from "../nano-states";
+import { $selectedInstanceSelector, $instances } from "../nano-states";
 import type { InstanceSelector } from "../tree-utils";
 import {
   deleteInstanceMutable,
@@ -24,7 +21,6 @@ import {
   findClosestInsertable,
   type Insertable,
 } from "../instance-utils";
-import { isInstanceDetachable } from "../matcher";
 import { $selectedInstancePath } from "../awareness";
 import { findAvailableVariables } from "../data-variables";
 
@@ -38,8 +34,9 @@ type InstanceData = z.infer<typeof InstanceData>;
 
 const getTreeData = (instanceSelector: InstanceSelector) => {
   const instances = $instances.get();
-  const metas = $registeredComponentMetas.get();
-  if (isInstanceDetachable({ metas, instances, instanceSelector }) === false) {
+  const [targetInstanceId] = instanceSelector;
+  const instance = instances.get(targetInstanceId);
+  if (instance && !isComponentDetachable(instance.component)) {
     toast.error(
       "This instance can not be moved outside of its parent component."
     );
@@ -51,8 +48,6 @@ const getTreeData = (instanceSelector: InstanceSelector) => {
     return;
   }
 
-  const [targetInstanceId] = instanceSelector;
-
   return {
     instanceSelector,
     ...extractWebstudioFragment(getWebstudioData(), targetInstanceId),