refactor: describe descendants in component content model (#5140)

Here replaced "transparent" keyword with more explicit "descendants"
list in component content model.

This will enable use case with child constraint while allowing other
instances to be children like here

```
  contentModel: {
    category: "instance",
    children: [
      "instance",
      "AnimateText",
      "StaggerAnimation",
      "VideoAnimation",
    ],
  },
```

and descendants are described like this

```
  contentModel: {
    category: "instance",
    children: ["instance"],
    descendants: ["VimeoSpinner", "VimeoPlayButton", "VimeoPreviewImage"],
  },
```

Author: TrySound

apps/builder/app/shared/content-model.test.tsx

@@ -561,41 +561,6 @@ describe("component content model", () => {
     ).toBeFalsy();
   });
 
-  test("prevent self nesting with descendants restriction", () => {
-    expect(
-      isTreeSatisfyingContentModel({
-        ...renderData(
-          <ws.element ws:tag="body" ws:id="bodyId">
-            <$.Vimeo>
-              <$.VimeoSpinner>
-                <$.VimeoSpinner></$.VimeoSpinner>
-              </$.VimeoSpinner>
-            </$.Vimeo>
-          </ws.element>
-        ),
-        metas: defaultMetas,
-        instanceSelector: ["bodyId"],
-      })
-    ).toBeFalsy();
-    expect(
-      isTreeSatisfyingContentModel({
-        ...renderData(
-          <ws.element ws:tag="body" ws:id="bodyId">
-            <$.Vimeo>
-              <$.VimeoSpinner>
-                <$.Vimeo>
-                  <$.VimeoSpinner></$.VimeoSpinner>
-                </$.Vimeo>
-              </$.VimeoSpinner>
-            </$.Vimeo>
-          </ws.element>
-        ),
-        metas: defaultMetas,
-        instanceSelector: ["bodyId"],
-      })
-    ).toBeTruthy();
-  });
-
   test("pass constraints when check deep in the tree", () => {
     expect(
       isTreeSatisfyingContentModel({

apps/builder/app/shared/content-model.ts

@@ -178,7 +178,7 @@ const computeAllowedCategories = ({
 
 const defaultComponentContentModel: ContentModel = {
   category: "instance",
-  children: ["rich-text", "instance", "transparent"],
+  children: ["rich-text", "instance"],
 };
 
 const getComponentContentModel = (meta: undefined | WsComponentMeta) =>
@@ -187,45 +187,29 @@ const getComponentContentModel = (meta: undefined | WsComponentMeta) =>
 const isComponentSatisfyingContentModel = ({
   metas,
   component,
-  allowedCategories,
+  allowedParentCategories,
+  allowedAncestorCategories,
 }: {
   metas: Metas;
   component: string;
-  allowedCategories: undefined | string[];
+  allowedParentCategories: undefined | string[];
+  allowedAncestorCategories: undefined | string[];
 }) => {
   const contentModel = getComponentContentModel(metas.get(component));
   return (
     // body does not have parent
-    allowedCategories === undefined ||
+    allowedParentCategories === undefined ||
     // parents may restrict specific components with none category
     // any instances
     // or nothing
-    allowedCategories.includes(component) ||
-    allowedCategories.includes(contentModel.category)
+    allowedParentCategories.includes(component) ||
+    allowedParentCategories.includes(contentModel.category) ||
+    allowedAncestorCategories?.includes(component) === true ||
+    allowedAncestorCategories?.includes(contentModel.category) === true
   );
 };
 
-const getComponentChildrenCategories = ({
-  metas,
-  component,
-  allowedCategories,
-}: {
-  metas: Metas;
-  component: string;
-  allowedCategories: undefined | string[];
-}) => {
-  const contentModel = getComponentContentModel(metas.get(component));
-  let childrenCategories = contentModel.children;
-  // transparent categories makes component inherit constraints from parent
-  if (childrenCategories.includes("transparent") && allowedCategories) {
-    childrenCategories = Array.from(
-      new Set([...childrenCategories, ...allowedCategories])
-    );
-  }
-  return childrenCategories;
-};
-
-const computeAllowedComponentCategories = ({
+const computeAllowedAncestorCategories = ({
   instances,
   metas,
   instanceSelector,
@@ -234,24 +218,43 @@ const computeAllowedComponentCategories = ({
   metas: Metas;
   instanceSelector: InstanceSelector;
 }) => {
-  let instance: undefined | Instance;
   let allowedCategories: undefined | string[];
   // skip selected instance for which these constraints are computed
   for (const instanceId of instanceSelector.slice(1).reverse()) {
-    instance = instances.get(instanceId);
+    const instance = instances.get(instanceId);
     // collection item can be undefined
     if (instance === undefined) {
       continue;
     }
-    allowedCategories = getComponentChildrenCategories({
-      metas,
-      component: instance.component,
-      allowedCategories,
-    });
+    const contentModel = getComponentContentModel(
+      metas.get(instance.component)
+    );
+    if (contentModel.descendants) {
+      allowedCategories ??= [];
+      allowedCategories = [...allowedCategories, ...contentModel.descendants];
+    }
   }
   return allowedCategories;
 };
 
+const getAllowedParentCategories = ({
+  instances,
+  metas,
+  instanceSelector,
+}: {
+  instances: Instances;
+  metas: Metas;
+  instanceSelector: InstanceSelector;
+}) => {
+  const instanceId = instanceSelector[1];
+  const instance = instances.get(instanceId);
+  if (instance === undefined) {
+    return;
+  }
+  const contentModel = getComponentContentModel(metas.get(instance.component));
+  return contentModel.children;
+};
+
 /**
  * Check all tags starting with specified instance select
  * for example
@@ -294,15 +297,17 @@ export const isTreeSatisfyingContentModel = ({
   instanceSelector,
   onError,
   _allowedCategories: allowedCategories,
-  _allowedComponentCategories: allowedComponentCategories,
+  _allowedAncestorCategories: allowedAncestorCategories,
+  _allowedParentCategories: allowedParentCategories,
 }: {
   instances: Instances;
   props: Props;
   metas: Metas;
   instanceSelector: InstanceSelector;
   onError?: (message: string) => void;
   _allowedCategories?: string[];
-  _allowedComponentCategories?: string[];
+  _allowedAncestorCategories?: string[];
+  _allowedParentCategories?: string[];
 }): boolean => {
   // compute constraints only when not passed from parent
   allowedCategories ??= computeAllowedCategories({
@@ -311,7 +316,12 @@ export const isTreeSatisfyingContentModel = ({
     props,
     metas,
   });
-  allowedComponentCategories ??= computeAllowedComponentCategories({
+  allowedParentCategories ??= getAllowedParentCategories({
+    instanceSelector,
+    instances,
+    metas,
+  });
+  allowedAncestorCategories ??= computeAllowedAncestorCategories({
     instanceSelector,
     instances,
     metas,
@@ -344,7 +354,8 @@ export const isTreeSatisfyingContentModel = ({
   const isComponentSatisfying = isComponentSatisfyingContentModel({
     metas,
     component: instance.component,
-    allowedCategories: allowedComponentCategories,
+    allowedParentCategories,
+    allowedAncestorCategories,
   });
   if (isComponentSatisfying === false) {
     const [_namespace, name] = parseComponentName(instance.component);
@@ -363,6 +374,16 @@ export const isTreeSatisfyingContentModel = ({
     }
   }
   let isSatisfying = isTagSatisfying && isComponentSatisfying;
+  const contentModel = getComponentContentModel(metas.get(instance.component));
+  allowedCategories = getTagChildrenCategories(tag, allowedCategories);
+  allowedParentCategories = contentModel.children;
+  if (contentModel.descendants) {
+    allowedAncestorCategories ??= [];
+    allowedAncestorCategories = [
+      ...allowedAncestorCategories,
+      ...contentModel.descendants,
+    ];
+  }
   for (const child of instance.children) {
     if (child.type === "id") {
       isSatisfying &&= isTreeSatisfyingContentModel({
@@ -371,12 +392,9 @@ export const isTreeSatisfyingContentModel = ({
         metas,
         instanceSelector: [child.value, ...instanceSelector],
         onError,
-        _allowedCategories: getTagChildrenCategories(tag, allowedCategories),
-        _allowedComponentCategories: getComponentChildrenCategories({
-          metas,
-          component: instance.component,
-          allowedCategories: allowedComponentCategories,
-        }),
+        _allowedCategories: allowedCategories,
+        _allowedParentCategories: allowedParentCategories,
+        _allowedAncestorCategories: allowedAncestorCategories,
       });
     }
   }

packages/sdk-components-animation/src/animate-children.ws.ts

@@ -1,5 +1,6 @@
 import { AnimationGroupIcon } from "@webstudio-is/icons/svg";
 import type { WsComponentMeta, WsComponentPropsMeta } from "@webstudio-is/sdk";
+import { animation } from "./shared/meta";
 
 export const meta: WsComponentMeta = {
   category: "animations",
@@ -8,9 +9,14 @@ export const meta: WsComponentMeta = {
   icon: AnimationGroupIcon,
   order: 5,
   label: "Animation Group",
-  constraints: {
-    relation: "child",
-    text: false,
+  contentModel: {
+    category: "instance",
+    children: [
+      "instance",
+      animation.AnimateText,
+      animation.StaggerAnimation,
+      animation.VideoAnimation,
+    ],
   },
 };
 

packages/sdk-components-animation/src/animate-text.ws.ts

@@ -1,8 +1,7 @@
 import { TextAnimationIcon } from "@webstudio-is/icons/svg";
 import type { WsComponentMeta, WsComponentPropsMeta } from "@webstudio-is/sdk";
-import { animation } from "./shared/meta";
-import { props } from "./__generated__/animate-text.props";
 import { div } from "@webstudio-is/sdk/normalize.css";
+import { props } from "./__generated__/animate-text.props";
 
 export const meta: WsComponentMeta = {
   category: "animations",
@@ -12,13 +11,10 @@ export const meta: WsComponentMeta = {
   icon: TextAnimationIcon,
   order: 6,
   label: "Text Animation",
-  constraints: [
-    { relation: "parent", component: { $eq: animation.AnimateChildren } },
-    {
-      relation: "child",
-      text: false,
-    },
-  ],
+  contentModel: {
+    category: "none",
+    children: ["instance"],
+  },
   presetStyle: {
     div,
   },

packages/sdk-components-animation/src/stagger-animation.ws.ts

@@ -1,8 +1,7 @@
 import { StaggerAnimationIcon } from "@webstudio-is/icons/svg";
 import type { WsComponentMeta, WsComponentPropsMeta } from "@webstudio-is/sdk";
-import { animation } from "./shared/meta";
-import { props } from "./__generated__/stagger-animation.props";
 import { div } from "@webstudio-is/sdk/normalize.css";
+import { props } from "./__generated__/stagger-animation.props";
 
 export const meta: WsComponentMeta = {
   category: "animations",
@@ -12,13 +11,10 @@ export const meta: WsComponentMeta = {
   icon: StaggerAnimationIcon,
   order: 6,
   label: "Stagger Animation",
-  constraints: [
-    { relation: "parent", component: { $eq: animation.AnimateChildren } },
-    {
-      relation: "child",
-      text: false,
-    },
-  ],
+  contentModel: {
+    category: "none",
+    children: ["instance"],
+  },
   presetStyle: {
     div,
   },

packages/sdk-components-animation/src/video-animation.ws.ts

@@ -1,19 +1,15 @@
 import { Youtube1cIcon } from "@webstudio-is/icons/svg";
 import type { WsComponentMeta, WsComponentPropsMeta } from "@webstudio-is/sdk";
-import { animation } from "./shared/meta";
 import { props } from "./__generated__/video-animation.props";
 
 export const meta: WsComponentMeta = {
   type: "container",
   icon: Youtube1cIcon,
   label: "Video Animation",
-  constraints: [
-    { relation: "parent", component: { $eq: animation.AnimateChildren } },
-    {
-      relation: "child",
-      text: false,
-    },
-  ],
+  contentModel: {
+    category: "none",
+    children: ["instance"],
+  },
 };
 
 export const propsMeta: WsComponentPropsMeta = {

packages/sdk-components-react/src/blockquote.ws.ts

@@ -60,7 +60,6 @@ const presetStyle = {
 } satisfies PresetStyle<typeof defaultTag>;
 
 export const meta: WsComponentMeta = {
-  type: "container",
   placeholder: "Blockquote",
   icon: BlockquoteIcon,
   states: defaultStates,

packages/sdk-components-react/src/body.ws.ts

@@ -24,7 +24,6 @@ const presetStyle = {
 } satisfies PresetStyle<typeof defaultTag>;
 
 export const meta: WsComponentMeta = {
-  type: "container",
   icon: BodyIcon,
   states: defaultStates,
   presetStyle,

packages/sdk-components-react/src/bold.ws.ts

@@ -14,7 +14,6 @@ const presetStyle = {
 } satisfies PresetStyle<typeof defaultTag>;
 
 export const meta: WsComponentMeta = {
-  type: "container",
   label: "Bold Text",
   icon: BoldIcon,
   states: defaultStates,

packages/sdk-components-react/src/box.ws.ts

@@ -20,7 +20,6 @@ import { props } from "./__generated__/box.props";
 
 export const meta: WsComponentMeta = {
   category: "general",
-  type: "container",
   description:
     "A container for content. By default this is a Div, but the tag can be changed in settings.",
   icon: BoxIcon,