Add polyfill loader

Author: istarkov

.storybook/main.ts

@@ -37,6 +37,10 @@ export default {
           directory: "../packages/sdk-components-react-radix",
           titlePrefix: "SDK Components React Radix",
         },
+        {
+          directory: "../packages/sdk-components-animation",
+          titlePrefix: "SDK Components Animation",
+        },
       ],
   framework: {
     name: "@storybook/react-vite",

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

@@ -0,0 +1,16 @@
+import { Scroll } from "@webstudio-is/sdk-components-animation";
+
+const Playground = () => {
+  return (
+    <>
+      <Scroll debug={true} />
+    </>
+  );
+};
+
+export default Playground;
+
+// Reduces Vercel function size from 29MB to 9MB for unknown reasons; effective when used in limited files.
+export const config = {
+  maxDuration: 30,
+};

packages/sdk-components-animation/package.json

@@ -51,9 +51,12 @@
     "react-dom": "18.3.0-canary-14898b6a9-20240318"
   },
   "dependencies": {
+    "@webstudio-is/css-engine": "workspace:*",
     "@webstudio-is/icons": "workspace:*",
     "@webstudio-is/react-sdk": "workspace:*",
-    "@webstudio-is/sdk": "workspace:*"
+    "@webstudio-is/sdk": "workspace:*",
+    "react-error-boundary": "^5.0.0",
+    "scroll-timeline-polyfill": "^1.1.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.70",

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

@@ -1 +1 @@
-export {};
+export { Scroll } from "./scroll";

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

@@ -0,0 +1,19 @@
+const Component = () => {
+  return <div>JO</div>;
+};
+
+export default {
+  title: "Components/Animate",
+};
+
+const Story = {
+  render() {
+    return (
+      <>
+        <Component />
+      </>
+    );
+  },
+};
+
+export { Story as Animate };

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

@@ -0,0 +1,94 @@
+import { Suspense, useId, useLayoutEffect } from "react";
+import { ErrorBoundary } from "react-error-boundary";
+import { ClientOnly } from "./shared/client-only";
+import { PolyfillLoader } from "./shared/scroll-polyfill";
+import { DebugDelayLoader } from "./shared/debug-delay-loader";
+import { escapeCssSpecifier } from "./shared/css-utils";
+
+const componentAttributeId = `data-ws-animate-id`;
+
+const Animate = ({ id }: { id: string }) => {
+  useLayoutEffect(() => {
+    const elt = document.querySelector(`[${componentAttributeId}="${id}"]`);
+    if (elt === null) {
+      return;
+    }
+
+    if (elt instanceof HTMLElement) {
+      const animation = elt.animate(
+        [{ offset: 0, transform: "translate(0, 100px)" }],
+        {
+          fill: "backwards",
+          duration: 400,
+          easing: "linear",
+        }
+      );
+
+      return () => {
+        animation.cancel();
+      };
+    }
+  }, [id]);
+
+  return undefined;
+};
+
+const StylesBeforeAnimate = ({ id }: { id: string }) => {
+  const styleContent = `
+  @keyframes ws-scroll-animation-${id} {
+    from {
+      transform: translate(0, 100px);
+    }
+  }
+
+  [${componentAttributeId}="${id}"] {
+    animation-name: ws-scroll-animation-${id};
+    animation-fill-mode: backwards;
+    animation-play-state: paused;
+    animation-duration: 1ms;
+
+  }
+  `;
+  return <style dangerouslySetInnerHTML={{ __html: styleContent }} />;
+};
+
+type ScrollProps = { debug?: boolean };
+
+export const Scroll = ({ debug = false }: ScrollProps) => {
+  const nakedId = useId();
+  const id = escapeCssSpecifier(nakedId);
+
+  return (
+    <>
+      <ClientOnly fallback={<StylesBeforeAnimate id={id} />}>
+        <Suspense fallback={<StylesBeforeAnimate id={id} />}>
+          <ErrorBoundary
+            fallback={null}
+            onError={(error) => {
+              console.error(`Polyfill loading error`, error);
+            }}
+          >
+            <PolyfillLoader />
+            {debug && <DebugDelayLoader />}
+          </ErrorBoundary>
+          <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>
+    </>
+  );
+};

packages/sdk-components-animation/src/shared/client-only.tsx

@@ -0,0 +1,20 @@
+import { useSyncExternalStore, type ReactNode } from "react";
+
+export const ClientOnly = ({
+  fallback,
+  children,
+}: {
+  fallback?: ReactNode;
+  children: ReactNode;
+}) => {
+  // https://tkdodo.eu/blog/avoiding-hydration-mismatches-with-use-sync-external-store
+  const isServer = useSyncExternalStore(
+    () => () => {},
+    () => false,
+    () => true
+  );
+  if (isServer) {
+    return fallback;
+  }
+  return children;
+};

packages/sdk-components-animation/src/shared/css-utils.ts

@@ -0,0 +1,3 @@
+export const escapeCssSpecifier = (name: string) => {
+  return name.replace(/[^a-zA-Z0-9-_]/g, "_");
+};

packages/sdk-components-animation/src/shared/debug-delay-loader.tsx

@@ -0,0 +1,12 @@
+// Artificial delay for loading the component for debugging purposes
+
+import { use } from "react";
+
+const wait = () => new Promise((resolve) => setTimeout(resolve, 1000));
+
+const waitglobal = wait();
+
+export const DebugDelayLoader = () => {
+  use(waitglobal);
+  return undefined;
+};

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

@@ -0,0 +1,18 @@
+import { use } from "react";
+
+let clientPolyfillCache: null | Promise<void> = null;
+
+const polyfill = () => {
+  if (clientPolyfillCache === null) {
+    clientPolyfillCache = import(
+      // @ts-expect-error no types exists
+      "scroll-timeline-polyfill/dist/scroll-timeline.js"
+    );
+  }
+  return clientPolyfillCache;
+};
+
+export const PolyfillLoader = () => {
+  use(polyfill());
+  return undefined;
+};