refactor: move animate property to sdk runtime (#5171)

Vite 6 is having troubles bundling app which depends on whole sdk. Plus
it may increase app bundle size.

Author: TrySound

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

@@ -20,10 +20,7 @@ import {
   TreeSortableItem,
   type TreeDropTarget,
 } from "@webstudio-is/design-system";
-import {
-  animationCanPlayOnCanvasAttribute,
-  showAttribute,
-} from "@webstudio-is/react-sdk";
+import { showAttribute } from "@webstudio-is/react-sdk";
 import {
   ROOT_INSTANCE_ID,
   collectionComponent,
@@ -34,6 +31,7 @@ import {
   type Instance,
   type WsComponentMeta,
 } from "@webstudio-is/sdk";
+import { animationCanPlayOnCanvasProperty } from "@webstudio-is/sdk/runtime";
 import {
   EyeClosedIcon,
   EyeOpenIcon,
@@ -675,7 +673,7 @@ export const NavigatorTree = () => {
 
           // Hook memory prop
           const isAnimationSelected =
-            propValues?.get(animationCanPlayOnCanvasAttribute) === true;
+            propValues?.get(animationCanPlayOnCanvasProperty) === true;
 
           const props = propsByInstanceId.get(item.instance.id);
           const actionProp = props?.find(

packages/react-sdk/src/props.ts

@@ -128,8 +128,6 @@ export const componentAttribute = "data-ws-component" as const;
 export const showAttribute = "data-ws-show" as const;
 export const collapsedAttribute = "data-ws-collapsed" as const;
 export const textContentAttribute = "data-ws-text-content" as const;
-export const animationCanPlayOnCanvasAttribute =
-  "data-ws-animation-can-play-on-canvas";
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.

packages/sdk-components-animation/private-src

@@ -1,9 +1,7 @@
-import {
-  animationCanPlayOnCanvasAttribute,
-  type Hook,
-} from "@webstudio-is/react-sdk";
-import type { AnimationAction } from "@webstudio-is/sdk";
 import { forwardRef, type ElementRef } from "react";
+import type { Hook } from "@webstudio-is/react-sdk";
+import type { AnimationAction } from "@webstudio-is/sdk";
+import { animationCanPlayOnCanvasProperty } from "@webstudio-is/sdk/runtime";
 
 type ScrollProps = {
   debug?: boolean;
@@ -30,7 +28,7 @@ export const hooksAnimateChildren: Hook = {
     ) {
       context.setMemoryProp(
         event.instancePath[0],
-        animationCanPlayOnCanvasAttribute,
+        animationCanPlayOnCanvasProperty,
         undefined
       );
     }
@@ -42,7 +40,7 @@ export const hooksAnimateChildren: Hook = {
     ) {
       context.setMemoryProp(
         event.instancePath[0],
-        animationCanPlayOnCanvasAttribute,
+        animationCanPlayOnCanvasProperty,
         true
       );
     }

packages/sdk-components-animation/src/animate-children.tsx

@@ -10,10 +10,13 @@ export const getTagFromProps = (
   return props[tagProperty] as string | undefined;
 };
 
-export const indexProperty = "data-ws-index" as const;
+export const indexProperty = "data-ws-index";
 
 export const getIndexWithinAncestorFromProps = (
   props: Record<string, unknown>
 ) => {
   return props[indexProperty] as string | undefined;
 };
+
+export const animationCanPlayOnCanvasProperty =
+  "data-ws-animation-can-play-on-canvas";