experimental: View Animations support (#4817)

## Description ref #2645 - [x] - Add view-timeline-name and scroll-timeline-name support, and prefixer (use custom property for unsupported browsers) - [x] - Add initial story ## Steps for reproduction https://6382151c8b47d4399fb9fc69-uljkhwtbmc.chromatic.com/iframe.html?args=&globals=&id=sdk-components-animation-view-animations--in-out&viewMode=story ## Code Review - [ ] hi @kof, I need you to do - conceptual review (architecture, feature-correctness) - detailed review (read every line) - test it on preview ## Before requesting a review - [ ] made a self-review - [ ] added inline comments where things may be not obvious (the "why", not "what") ## Before merging - [ ] tested locally and on preview environment (preview dev login: 0000) - [ ] updated [test cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md) document - [ ] added tests - [ ] if any new env variables are added, added them to `.env` file --------- Co-authored-by: Oleg Isonen <oleg008@gmail.com>
webstudio-is · Feb 4, 2025 · 3c42f8c · 3c42f8c
1 parent a9180f7
commit 3c42f8c
Show file tree

Hide file tree

Showing 29 changed files with 618 additions and 122 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -43,7 +43,16 @@ jobs:
         with:
           submodules-ssh-key: ${{ secrets.PRIVATE_GITHUB_DEPLOY_TOKEN }}
 
-      - uses: ./.github/actions/ci-setup
+      - uses: pnpm/action-setup@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: pnpm
+
+      - name: Pnpm install
+        run: |
+          pnpm install
 
       - uses: actions/cache@v4
         with:
@@ -62,6 +71,19 @@ jobs:
         run: |
           pnpm lint --cache --cache-strategy=content --cache-location=node_modules/.cache/eslint/.eslint-cache
 
+      - name: Cache Playwright browsers
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/ms-playwright
+          key: playwright-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            playwright-${{ runner.os }}-
+
+      - name: Playwright init
+        run: |
+          pnpm playwright install
+        working-directory: packages/sdk-components-animation
+
       - name: Test
         run: |
           pnpm -r test

diff --git a/@types/scroll-timeline.d.ts b/@types/scroll-timeline.d.ts
@@ -9,6 +9,11 @@ declare class ScrollTimeline extends AnimationTimeline {
   constructor(options?: ScrollTimelineOptions);
 }
 
+interface ViewTimelineOptions {
+  subject?: Element | Document | null;
+  axis?: ScrollAxis;
+}
+
 declare class ViewTimeline extends ScrollTimeline {
-  constructor(options?: ScrollTimelineOptions);
+  constructor(options?: ViewTimelineOptions);
 }
diff --git a/apps/builder/package.json b/apps/builder/package.json
@@ -135,7 +135,7 @@
     "type-fest": "^4.32.0",
     "typescript": "5.7.3",
     "vite": "^5.4.11",
-    "vitest": "^3.0.2"
+    "vitest": "^3.0.4"
   },
   "sideEffects": false,
   "license": "AGPL-3.0-or-later"

diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
     "dev": "pnpm --filter='@webstudio-is/builder' dev",
     "lint": "eslint \"**/*.{ts,tsx}\" --max-warnings 0",
     "checks": "pnpm -r test && pnpm -r typecheck && pnpm lint",
+    "playwright": "pnpm -r playwright-init",
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",
     "storybook:dev": "storybook dev -p 6006",
     "storybook:build": "storybook build",

diff --git a/packages/asset-uploader/package.json b/packages/asset-uploader/package.json
@@ -24,7 +24,7 @@
   "devDependencies": {
     "@types/fontkit": "^2.0.7",
     "@webstudio-is/tsconfig": "workspace:*",
-    "vitest": "^3.0.2",
+    "vitest": "^3.0.4",
     "zod": "^3.22.4"
   },
   "exports": {

diff --git a/packages/cli/package.json b/packages/cli/package.json
@@ -82,7 +82,7 @@
     "ts-expect": "^1.3.0",
     "vike": "^0.4.220",
     "vite": "^5.4.11",
-    "vitest": "^3.0.2",
+    "vitest": "^3.0.4",
     "wrangler": "^3.63.2"
   }
 }
diff --git a/packages/css-data/package.json b/packages/css-data/package.json
@@ -21,7 +21,7 @@
     "html-tags": "^4.0.0",
     "mdn-data": "2.8.0",
     "type-fest": "^4.32.0",
-    "vitest": "^3.0.2",
+    "vitest": "^3.0.4",
     "zod": "^3.22.4"
   },
   "peerDependencies": {

diff --git a/packages/css-data/src/__generated__/properties.ts b/packages/css-data/src/__generated__/properties.ts
diff --git a/packages/css-data/src/custom-data.ts b/packages/css-data/src/custom-data.ts
@@ -76,6 +76,26 @@ propertiesData["-webkit-box-orient"] = {
 };
 keywordValues["-webkit-box-orient"] = ["horizontal", "vertical"];
 
+propertiesData.viewTimelineName = {
+  unitGroups: [],
+  inherited: false,
+  initial: {
+    type: "unparsed",
+    value: "--view-timeline",
+  },
+  mdnUrl: "https://developer.mozilla.org/en-US/docs/Web/CSS/view-timeline-name",
+};
+propertiesData.scrollTimelineName = {
+  unitGroups: [],
+  inherited: false,
+  initial: {
+    type: "unparsed",
+    value: "--scroll-timeline",
+  },
+  mdnUrl:
+    "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-timeline-name",
+};
+
 keywordValues.listStyleType = [
   "disc",
   "circle",

diff --git a/packages/css-engine/package.json b/packages/css-engine/package.json
@@ -22,7 +22,7 @@
     "@webstudio-is/tsconfig": "workspace:*",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
-    "vitest": "^3.0.2"
+    "vitest": "^3.0.4"
   },
   "exports": {
     "webstudio": "./src/index.ts",

diff --git a/packages/css-engine/src/__generated__/types.ts b/packages/css-engine/src/__generated__/types.ts
diff --git a/packages/css-engine/src/core/prefixer.ts b/packages/css-engine/src/core/prefixer.ts
@@ -25,6 +25,17 @@ export const prefixStyles = (styleMap: StyleMap) => {
     if (property === "backdrop-filter") {
       newStyleMap.set("-webkit-backdrop-filter", value);
     }
+
+    // Safari and FF do not support this property and strip it from the CSS
+    // For polyfill to work we need to set it as a CSS property
+    // https://developer.mozilla.org/en-US/docs/Web/CSS/view-timeline-name
+    if (
+      property === "view-timeline-name" ||
+      property === "scroll-timeline-name"
+    ) {
+      newStyleMap.set(`--${property}`, value);
+    }
+
     newStyleMap.set(property, value);
   }
   return newStyleMap;

diff --git a/packages/design-system/package.json b/packages/design-system/package.json
@@ -17,7 +17,7 @@
     "@webstudio-is/tsconfig": "workspace:*",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
-    "vitest": "^3.0.2",
+    "vitest": "^3.0.4",
     "zod": "^3.22.4"
   },
   "peerDependencies": {

diff --git a/packages/fonts/package.json b/packages/fonts/package.json
@@ -13,7 +13,7 @@
   },
   "devDependencies": {
     "@webstudio-is/tsconfig": "workspace:*",
-    "vitest": "^3.0.2",
+    "vitest": "^3.0.4",
     "zod": "^3.22.4"
   },
   "peerDependencies": {

diff --git a/packages/http-client/package.json b/packages/http-client/package.json
@@ -16,7 +16,7 @@
   },
   "devDependencies": {
     "@webstudio-is/tsconfig": "workspace:*",
-    "vitest": "^3.0.2"
+    "vitest": "^3.0.4"
   },
   "exports": {
     "webstudio": "./src/index.ts",

diff --git a/packages/image/package.json b/packages/image/package.json
@@ -21,7 +21,7 @@
     "@webstudio-is/tsconfig": "workspace:*",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
-    "vitest": "^3.0.2"
+    "vitest": "^3.0.4"
   },
   "peerDependencies": {
     "react": "18.3.0-canary-14898b6a9-20240318",

diff --git a/packages/jsx-utils/package.json b/packages/jsx-utils/package.json
@@ -14,7 +14,7 @@
     "@webstudio-is/tsconfig": "workspace:^",
     "fast-glob": "^3.3.2",
     "type-fest": "^4.32.0",
-    "vitest": "^3.0.2"
+    "vitest": "^3.0.4"
   },
   "exports": {
     ".": {

diff --git a/packages/project-build/package.json b/packages/project-build/package.json
@@ -30,6 +30,6 @@
   },
   "devDependencies": {
     "@webstudio-is/tsconfig": "workspace:*",
-    "vitest": "^3.0.2"
+    "vitest": "^3.0.4"
   }
 }
diff --git a/packages/react-sdk/package.json b/packages/react-sdk/package.json
@@ -20,7 +20,7 @@
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
     "strip-indent": "^4.0.0",
     "type-fest": "^4.32.0",
-    "vitest": "^3.0.2",
+    "vitest": "^3.0.4",
     "zod": "^3.22.4"
   },
   "peerDependencies": {

diff --git a/packages/sdk-components-animation/package.json b/packages/sdk-components-animation/package.json
@@ -45,7 +45,9 @@
     "build:args": "NODE_OPTIONS=--conditions=webstudio generate-arg-types './src/*.tsx !./src/*.stories.tsx !./src/*.ws.ts !./src/*.template.tsx !./src/*.test.{ts,tsx}' -e asChild -e modal -e defaultOpen -e defaultChecked && prettier --write \"**/*.props.ts\"",
     "build:stories": "webstudio-sdk generate-stories && prettier --write \"src/__generated__/*.stories.tsx\"",
     "dts": "tsc --project tsconfig.dts.json",
-    "typecheck": "tsc"
+    "typecheck": "tsc",
+    "test": "vitest run",
+    "playwright-init": "playwright install --with-deps"
   },
   "peerDependencies": {
     "react": "18.3.0-canary-14898b6a9-20240318",
@@ -62,15 +64,18 @@
   "devDependencies": {
     "@types/react": "^18.2.70",
     "@types/react-dom": "^18.2.25",
+    "@vitest/browser": "^3.0.4",
+    "@webstudio-is/css-data": "workspace:*",
+    "@webstudio-is/design-system": "workspace:*",
     "@webstudio-is/generate-arg-types": "workspace:*",
     "@webstudio-is/sdk-cli": "workspace:^",
     "@webstudio-is/sdk-components-react": "workspace:*",
     "@webstudio-is/template": "workspace:*",
     "@webstudio-is/tsconfig": "workspace:*",
-    "@webstudio-is/css-data": "workspace:*",
-    "@webstudio-is/design-system": "workspace:*",
+    "playwright": "^1.50.1",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
-    "type-fest": "^4.32.0"
+    "type-fest": "^4.32.0",
+    "vitest": "^3.0.4"
   }
 }
diff --git a/packages/sdk-components-animation/private-src b/packages/sdk-components-animation/private-src
diff --git a/packages/sdk-components-animation/src/shared/animation-types.tsx b/packages/sdk-components-animation/src/shared/animation-types.tsx
@@ -76,7 +76,7 @@ type KeyframeEffectOptions = {
  * - "start" → `calc(0% + range)`
  * - "end" → `calc(100% - range)`
  */
-type ScrollNamedRange = "start" | "end";
+export type ScrollNamedRange = "start" | "end";
 
 /**
  * Scroll does not support https://drafts.csswg.org/scroll-animations/#named-ranges
@@ -99,15 +99,42 @@ type AnimationTiming = {
 };
 */
 
+type AnimationAxis = "block" | "inline" | "x" | "y";
+
 type ScrollAction = {
   type: "scroll";
   source?: "closest" | "nearest" | "root";
-  axis?: "block" | "inline" | "x" | "y";
+  axis?: AnimationAxis;
   animations: {
     timing: KeyframeEffectOptions & ScrollRangeOptions;
     keyframes: AnimationKeyframe[];
   }[];
 };
 
-// | ViewAction | ...
-export type AnimationAction = ScrollAction;
+export type ViewNamedRange =
+  | "contain"
+  | "cover"
+  | "entry"
+  | "exit"
+  | "entry-crossing"
+  | "exit-crossing";
+
+export type ViewRangeValue = [name: ViewNamedRange, value: RangeUnitValue];
+
+type ViewRangeOptions = {
+  rangeStart?: ViewRangeValue | undefined;
+  rangeEnd?: ViewRangeValue | undefined;
+};
+
+type ViewAction = {
+  type: "view";
+  subject?: string;
+
+  axis?: AnimationAxis;
+  animations: {
+    timing: KeyframeEffectOptions & ViewRangeOptions;
+    keyframes: AnimationKeyframe[];
+  }[];
+};
+
+export type AnimationAction = ScrollAction | ViewAction;
diff --git a/packages/sdk-components-animation/tsconfig.json b/packages/sdk-components-animation/tsconfig.json
@@ -1,11 +1,6 @@
 {
   "extends": "@webstudio-is/tsconfig/base.json",
-  "include": [
-    "src",
-    "../../@types/**/scroll-timeline.d.ts",
-    "private-src/scroll.stories.tsx",
-    "private-src/scroll.tsx"
-  ],
+  "include": ["src", "../../@types/**/scroll-timeline.d.ts", "private-src"],
   "compilerOptions": {
     "types": ["react/experimental", "react-dom/experimental", "@types/node"]
   }

diff --git a/packages/sdk-components-animation/vitest.config.ts b/packages/sdk-components-animation/vitest.config.ts
@@ -0,0 +1,37 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    passWithNoTests: true,
+    workspace: [
+      {
+        extends: "./vitest.config.ts",
+        test: {
+          include: ["**/*.browser.{test,spec}.ts"],
+          name: "browser",
+          browser: {
+            provider: "playwright", // or 'webdriverio'
+            enabled: true,
+            headless: true,
+            screenshotFailures: false,
+            instances: [{ browser: "chromium" }, { browser: "firefox" }],
+          },
+        },
+      },
+      {
+        extends: "./vitest.config.ts",
+        test: {
+          include: ["!**/*.browser.{test,spec}.ts", "**/*.{test,spec}.ts"],
+
+          name: "unit",
+          environment: "node",
+        },
+      },
+    ],
+  },
+  server: {
+    watch: {
+      ignored: [],
+    },
+  },
+});
diff --git a/packages/sdk-components-react/package.json b/packages/sdk-components-react/package.json
@@ -72,6 +72,6 @@
     "@webstudio-is/tsconfig": "workspace:*",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
-    "vitest": "^3.0.2"
+    "vitest": "^3.0.4"
   }
 }