From d3edf2ea24fbee9cc252d38b4f272bb99e9c307f Mon Sep 17 00:00:00 2001 From: Bogdan Chadkin Date: Wed, 30 Apr 2025 01:44:08 +0400 Subject: [PATCH 1/2] refactor: move animate property to sdk runtime Vite 6 is having troubles bundling app which depends on whole sdk. Plus it may increase app bundle size. --- .../builder/features/navigator/navigator-tree.tsx | 8 +++----- packages/react-sdk/src/props.ts | 2 -- packages/sdk-components-animation/private-src | 2 +- .../src/animate-children.tsx | 12 +++++------- packages/sdk/src/runtime.ts | 5 ++++- 5 files changed, 13 insertions(+), 16 deletions(-) diff --git a/apps/builder/app/builder/features/navigator/navigator-tree.tsx b/apps/builder/app/builder/features/navigator/navigator-tree.tsx index 0dd8d960e652..0770d982bd87 100644 --- a/apps/builder/app/builder/features/navigator/navigator-tree.tsx +++ b/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( diff --git a/packages/react-sdk/src/props.ts b/packages/react-sdk/src/props.ts index a9de2e6aa594..bafaf8924eb1 100644 --- a/packages/react-sdk/src/props.ts +++ b/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. diff --git a/packages/sdk-components-animation/private-src b/packages/sdk-components-animation/private-src index b1951061c7f7..f49c1ffac997 160000 --- a/packages/sdk-components-animation/private-src +++ b/packages/sdk-components-animation/private-src @@ -1 +1 @@ -Subproject commit b1951061c7f792bc01cfb6ed96ecb3aa5893c711 +Subproject commit f49c1ffac997996879baaf80b4de5a91279d8fd2 diff --git a/packages/sdk-components-animation/src/animate-children.tsx b/packages/sdk-components-animation/src/animate-children.tsx index 34e09ad32596..d4513ac395ef 100644 --- a/packages/sdk-components-animation/src/animate-children.tsx +++ b/packages/sdk-components-animation/src/animate-children.tsx @@ -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 ); } diff --git a/packages/sdk/src/runtime.ts b/packages/sdk/src/runtime.ts index bb6b751488bf..87ee4b9f12ca 100644 --- a/packages/sdk/src/runtime.ts +++ b/packages/sdk/src/runtime.ts @@ -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 ) => { return props[indexProperty] as string | undefined; }; + +export const animationCanPlayOnCanvasProperty = + "data-ws-animation-can-play-on-canvas"; From 9d5368ac54bdbb52cfa1f136ace1d67f1309afd0 Mon Sep 17 00:00:00 2001 From: Bogdan Chadkin Date: Wed, 30 Apr 2025 10:56:15 +0400 Subject: [PATCH 2/2] Update submodules --- packages/sdk-components-animation/private-src | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/sdk-components-animation/private-src b/packages/sdk-components-animation/private-src index f49c1ffac997..3cb7601c98c7 160000 --- a/packages/sdk-components-animation/private-src +++ b/packages/sdk-components-animation/private-src @@ -1 +1 @@ -Subproject commit f49c1ffac997996879baaf80b4de5a91279d8fd2 +Subproject commit 3cb7601c98c79bee062c68af377ea2430363c84f