Add test

Author: istarkov

apps/builder/app/routes/_ui.playground.tsx

@@ -3,7 +3,21 @@ import { Scroll } from "@webstudio-is/sdk-components-animation";
 const Playground = () => {
   return (
     <>
-      <Scroll debug={true} />
+      <Scroll debug={process.env.NODE_ENV !== "production"}>
+        <div
+          style={{ height: "200px", width: "200px", backgroundColor: "red" }}
+        ></div>
+        <div
+          style={{
+            height: "100px",
+            width: "100px",
+            backgroundColor: "yellow",
+            position: "fixed",
+            left: 0,
+            top: 0,
+          }}
+        ></div>
+      </Scroll>
     </>
   );
 };

packages/sdk-components-animation/src/scroll.tsx

@@ -7,41 +7,53 @@ import { escapeCssSpecifier } from "./shared/css-utils";
 
 const componentAttributeId = `data-ws-animate-id`;
 
+const createSelector = (id: string) => `[${componentAttributeId}="${id}"] > *`;
+
 const Animate = ({ id }: { id: string }) => {
   useLayoutEffect(() => {
-    const elt = document.querySelector(`[${componentAttributeId}="${id}"]`);
-    if (elt === null) {
+    const selector = createSelector(id);
+    const elements = document.querySelectorAll(selector);
+    if (elements.length === 0) {
       return;
     }
+    const disposables = Array.from(elements)
+      .map((elt) => {
+        if (elt instanceof HTMLElement) {
+          const animation = elt.animate(
+            [{ offset: 0, transform: "translate(0, 100px)" }],
+            {
+              fill: "backwards",
+              duration: 400,
+              easing: "linear",
+            }
+          );
 
-    if (elt instanceof HTMLElement) {
-      const animation = elt.animate(
-        [{ offset: 0, transform: "translate(0, 100px)" }],
-        {
-          fill: "backwards",
-          duration: 400,
-          easing: "linear",
+          return () => {
+            animation.cancel();
+          };
         }
-      );
+      })
+      .filter((disposable) => disposable !== undefined);
 
-      return () => {
-        animation.cancel();
-      };
-    }
+    return () => {
+      disposables.forEach((dispose) => dispose());
+    };
   }, [id]);
 
   return undefined;
 };
 
 const StylesBeforeAnimate = ({ id }: { id: string }) => {
+  const selector = createSelector(id);
+
   const styleContent = `
   @keyframes ws-scroll-animation-${id} {
     from {
       transform: translate(0, 100px);
     }
   }
 
-  [${componentAttributeId}="${id}"] {
+  ${selector} {
     animation-name: ws-scroll-animation-${id};
     animation-fill-mode: backwards;
     animation-play-state: paused;
@@ -52,9 +64,9 @@ const StylesBeforeAnimate = ({ id }: { id: string }) => {
   return <style dangerouslySetInnerHTML={{ __html: styleContent }} />;
 };
 
-type ScrollProps = { debug?: boolean };
+type ScrollProps = { debug?: boolean; children?: React.ReactNode };
 
-export const Scroll = ({ debug = false }: ScrollProps) => {
+export const Scroll = ({ debug = false, children }: ScrollProps) => {
   const nakedId = useId();
   const id = escapeCssSpecifier(nakedId);
 
@@ -74,21 +86,9 @@ export const Scroll = ({ debug = false }: ScrollProps) => {
           <Animate id={id} />
         </Suspense>
       </ClientOnly>
-      <div
-        {...{ [componentAttributeId]: id }}
-        style={{ height: "200px", width: "200px", backgroundColor: "red" }}
-      ></div>
-      <div
-        data-ws-id={id}
-        style={{
-          height: "100px",
-          width: "100px",
-          backgroundColor: "yellow",
-          position: "fixed",
-          left: 0,
-          top: 0,
-        }}
-      ></div>
+      <div {...{ [componentAttributeId]: id }} style={{ display: "contents" }}>
+        {children}
+      </div>
     </>
   );
 };