Adding hover() (#2916)

* Refactor to DOM package * Refactor * Latest * v11.13.0-beta.0 * Skip check * Fixing size measurement * Latest * Fixing publish command * Latest * Fixing test * Fixing test * Removing unused test * Latest * Adding playwright suite * Updating docker image for playwright * Updating * Latest * Adding config * Running yarn install * Attempting to install make * Make bundlesize optional dep * Fixing lockfile * Replacing bundlesize * Fixing * Skip test on CI * Adding hover
motiondivision · Dec 3, 2024 · d97b58f · d97b58f
1 parent f12b84d
commit d97b58f
Show file tree

Hide file tree

Showing 136 changed files with 1,069 additions and 936 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -95,10 +95,40 @@ jobs:
                       - node_modules
                   key: v1-dependencies-{{ checksum "package.json" }}
 
+    test-playwright:
+        docker:
+            - image: mcr.microsoft.com/playwright:v1.49.0-noble
+        resource_class: large
+        working_directory: ~/repo
+        steps:
+            - checkout
+
+            # Download and cache dependencies
+            - restore_cache:
+                  keys:
+                      - v1-dependencies-{{ checksum "package.json" }}
+                      # fallback to using the latest cache if no exact match is found
+                      - v1-dependencies-
+
+            - run:
+                  name: Playwright tests
+                  command: yarn && yarn test-playwright
+                  environment:
+                      JEST_JUNIT_OUTPUT: test_reports/framer-motion-playwright.xml
+
+            - store_test_results:
+                  path: test_reports
+
+            - save_cache:
+                  paths:
+                      - node_modules
+                  key: v1-dependencies-{{ checksum "package.json" }}
+
 workflows:
     version: 2
     build:
         jobs:
             - test
             - test-react
             - test-html
+            - test-playwright
diff --git a/.gitignore b/.gitignore
@@ -29,4 +29,8 @@ yarn-error.log
 .next
 stats.html
 
-lerna-debug.log
+lerna-debug.log
+
+playwright-report
+test-results
+test_results
diff --git a/.yarn/cache/@playwright-test-npm-1.49.0-0d251ef816-f8477aa61d.zip b/.yarn/cache/@playwright-test-npm-1.49.0-0d251ef816-f8477aa61d.zip
diff --git a/.yarn/cache/axios-npm-1.6.0-b0f6015a96-c7c9f2ae9e.zip b/.yarn/cache/axios-npm-1.6.0-b0f6015a96-c7c9f2ae9e.zip
diff --git a/.yarn/cache/axios-npm-1.7.7-cfbedc233d-882d4fe0ec.zip b/.yarn/cache/axios-npm-1.7.7-cfbedc233d-882d4fe0ec.zip
diff --git a/.yarn/cache/base64-js-npm-1.5.1-b2f7275641-669632eb37.zip b/.yarn/cache/base64-js-npm-1.5.1-b2f7275641-669632eb37.zip
diff --git a/.yarn/cache/bl-npm-4.1.0-7f94cdcf3f-9e8521fa7e.zip b/.yarn/cache/bl-npm-4.1.0-7f94cdcf3f-9e8521fa7e.zip
diff --git a/.yarn/cache/brotli-size-npm-0.1.0-c84892c221-c79b185162.zip b/.yarn/cache/brotli-size-npm-0.1.0-c84892c221-c79b185162.zip
diff --git a/.yarn/cache/buffer-npm-5.7.1-513ef8259e-e2cf8429e1.zip b/.yarn/cache/buffer-npm-5.7.1-513ef8259e-e2cf8429e1.zip
diff --git a/.yarn/cache/bundlesize-npm-0.18.2-8443dd0543-196a480323.zip b/.yarn/cache/bundlesize-npm-0.18.2-8443dd0543-196a480323.zip
diff --git a/.yarn/cache/bytes-npm-3.1.2-28b8643004-e4bcd3948d.zip b/.yarn/cache/bytes-npm-3.1.2-28b8643004-e4bcd3948d.zip
diff --git a/.yarn/cache/chalk-npm-2.1.0-2c9f4f0b44-c92abc5211.zip b/.yarn/cache/chalk-npm-2.1.0-2c9f4f0b44-c92abc5211.zip
diff --git a/.yarn/cache/ci-env-npm-1.17.0-d1dacafda6-e6a06d9a6c.zip b/.yarn/cache/ci-env-npm-1.17.0-d1dacafda6-e6a06d9a6c.zip
diff --git a/.yarn/cache/decompress-response-npm-4.2.1-abe5b4ebe4-4e783ca4df.zip b/.yarn/cache/decompress-response-npm-4.2.1-abe5b4ebe4-4e783ca4df.zip
diff --git a/.yarn/cache/deep-extend-npm-0.6.0-e182924219-7be7e5a8d4.zip b/.yarn/cache/deep-extend-npm-0.6.0-e182924219-7be7e5a8d4.zip
diff --git a/.yarn/cache/detect-libc-npm-1.0.3-c30ac344d4-daaaed925f.zip b/.yarn/cache/detect-libc-npm-1.0.3-c30ac344d4-daaaed925f.zip
diff --git a/.yarn/cache/expand-template-npm-2.0.3-80de959306-588c198472.zip b/.yarn/cache/expand-template-npm-2.0.3-80de959306-588c198472.zip
diff --git a/.yarn/cache/fs-constants-npm-1.0.0-59576b2177-18f5b71837.zip b/.yarn/cache/fs-constants-npm-1.0.0-59576b2177-18f5b71837.zip
diff --git a/.yarn/cache/fsevents-npm-2.3.2-a881d6ac9f-97ade64e75.zip b/.yarn/cache/fsevents-npm-2.3.2-a881d6ac9f-97ade64e75.zip
diff --git a/.yarn/cache/fsevents-patch-3340e2eb10-8.zip b/.yarn/cache/fsevents-patch-3340e2eb10-8.zip
diff --git a/.yarn/cache/github-build-npm-1.2.4-6c2da0cfaf-fb5a50384b.zip b/.yarn/cache/github-build-npm-1.2.4-6c2da0cfaf-fb5a50384b.zip
diff --git a/.yarn/cache/github-from-package-npm-0.0.0-519f80c9a1-14e448192a.zip b/.yarn/cache/github-from-package-npm-0.0.0-519f80c9a1-14e448192a.zip
diff --git a/.yarn/cache/gzip-size-npm-4.1.0-169e65f670-09cc329649.zip b/.yarn/cache/gzip-size-npm-4.1.0-169e65f670-09cc329649.zip
diff --git a/.yarn/cache/has-flag-npm-2.0.0-afbe649c60-7d060d142e.zip b/.yarn/cache/has-flag-npm-2.0.0-afbe649c60-7d060d142e.zip
diff --git a/.yarn/cache/ieee754-npm-1.2.1-fb63b3caeb-5144c0c981.zip b/.yarn/cache/ieee754-npm-1.2.1-fb63b3caeb-5144c0c981.zip
diff --git a/.yarn/cache/iltorb-npm-2.4.5-7505870392-a06f232ff3.zip b/.yarn/cache/iltorb-npm-2.4.5-7505870392-a06f232ff3.zip
diff --git a/.yarn/cache/mimic-response-npm-2.1.0-037463e454-014fad6ab9.zip b/.yarn/cache/mimic-response-npm-2.1.0-037463e454-014fad6ab9.zip
diff --git a/.yarn/cache/mkdirp-classic-npm-0.5.3-3b5c991910-3f4e088208.zip b/.yarn/cache/mkdirp-classic-npm-0.5.3-3b5c991910-3f4e088208.zip
diff --git a/.yarn/cache/nan-npm-2.20.0-5b5be83e88-eb09286e6c.zip b/.yarn/cache/nan-npm-2.20.0-5b5be83e88-eb09286e6c.zip
diff --git a/.yarn/cache/napi-build-utils-npm-1.0.2-892e4bba56-06c14271ee.zip b/.yarn/cache/napi-build-utils-npm-1.0.2-892e4bba56-06c14271ee.zip
diff --git a/.yarn/cache/node-abi-npm-2.30.1-36a2c4e28a-3f4b0c912c.zip b/.yarn/cache/node-abi-npm-2.30.1-36a2c4e28a-3f4b0c912c.zip
diff --git a/.yarn/cache/noop-logger-npm-0.1.1-c88441172d-9f99da270d.zip b/.yarn/cache/noop-logger-npm-0.1.1-c88441172d-9f99da270d.zip
diff --git a/.yarn/cache/playwright-core-npm-1.49.0-4a6c09b0ee-d8423ad0ca.zip b/.yarn/cache/playwright-core-npm-1.49.0-4a6c09b0ee-d8423ad0ca.zip
diff --git a/.yarn/cache/playwright-npm-1.49.0-d57440d7c1-f1bfb2fff6.zip b/.yarn/cache/playwright-npm-1.49.0-d57440d7c1-f1bfb2fff6.zip
diff --git a/.yarn/cache/prebuild-install-npm-5.3.6-843a9baf36-9b99e5ea2c.zip b/.yarn/cache/prebuild-install-npm-5.3.6-843a9baf36-9b99e5ea2c.zip
diff --git a/.yarn/cache/prettycli-npm-1.4.3-5cea747fde-1a07e77747.zip b/.yarn/cache/prettycli-npm-1.4.3-5cea747fde-1a07e77747.zip
diff --git a/.yarn/cache/proxy-from-env-npm-1.1.0-c13d07f26b-ed7fcc2ba0.zip b/.yarn/cache/proxy-from-env-npm-1.1.0-c13d07f26b-ed7fcc2ba0.zip
diff --git a/.yarn/cache/rc-npm-1.2.8-d6768ac936-2e26e052f8.zip b/.yarn/cache/rc-npm-1.2.8-d6768ac936-2e26e052f8.zip
diff --git a/.yarn/cache/simple-concat-npm-1.0.1-48df70de29-4d211042cc.zip b/.yarn/cache/simple-concat-npm-1.0.1-48df70de29-4d211042cc.zip
diff --git a/.yarn/cache/simple-get-npm-3.1.1-dce5923dba-80195e70bf.zip b/.yarn/cache/simple-get-npm-3.1.1-dce5923dba-80195e70bf.zip
diff --git a/.yarn/cache/strip-json-comments-npm-2.0.1-e7883b2d04-1074ccb632.zip b/.yarn/cache/strip-json-comments-npm-2.0.1-e7883b2d04-1074ccb632.zip
diff --git a/.yarn/cache/supports-color-npm-4.5.0-55827972e6-6da4f498d5.zip b/.yarn/cache/supports-color-npm-4.5.0-55827972e6-6da4f498d5.zip
diff --git a/.yarn/cache/tar-fs-npm-2.1.1-e374d3b7a2-f5b9a70059.zip b/.yarn/cache/tar-fs-npm-2.1.1-e374d3b7a2-f5b9a70059.zip
diff --git a/.yarn/cache/tar-stream-npm-2.2.0-884c79b510-699831a8b9.zip b/.yarn/cache/tar-stream-npm-2.2.0-884c79b510-699831a8b9.zip
diff --git a/.yarn/cache/which-pm-runs-npm-1.1.0-1a7fd7650e-39a56ee508.zip b/.yarn/cache/which-pm-runs-npm-1.1.0-1a7fd7650e-39a56ee508.zip
diff --git a/.yarn/cache/zlib-npm-1.0.5-9db0b95997-5ef5693a1d.zip b/.yarn/cache/zlib-npm-1.0.5-9db0b95997-5ef5693a1d.zip
diff --git a/Makefile b/Makefile
@@ -46,8 +46,7 @@ SOURCE_FILES := $(shell find packages/framer-motion/src packages/framer-motion-3
 TEST_REPORT_PATH := $(if $(CIRCLE_TEST_REPORTS),$(CIRCLE_TEST_REPORTS),$(CURDIR)/test_reports)
 
 build: bootstrap
-	cd packages/framer-motion && yarn build
-	cd packages/framer-motion-3d && yarn build
+	yarn build
 
 watch: bootstrap
 	cd packages/framer-motion && yarn watch
@@ -92,6 +91,7 @@ test-nextjs: build test-mkdir
 	yarn start-server-and-test "yarn dev-server || true" http://localhost:3000 "cd packages/framer-motion && cypress run --headless --config-file=cypress.rsc.json $(if $(CI), --config video=false, --reporter spec)"
 
 test-e2e: test-nextjs test-html test-react
+	yarn test-playwright
 
 test-single: build test-mkdir
 	yarn start-server-and-test "yarn dev-server" http://localhost:9990 "cd packages/framer-motion && cypress run --headless --spec cypress/integration/scroll.ts"

diff --git a/dev/html/package.json b/dev/html/package.json
@@ -9,6 +9,10 @@
         "build": "vite build",
         "preview": "vite preview"
     },
+    "dependencies": {
+        "motion": "workspace:*",
+        "motion-dom": "workspace:*"
+    },
     "devDependencies": {
         "vite": "^5.2.0"
     }

diff --git a/dev/html/public/playwright/gestures/hover.html b/dev/html/public/playwright/gestures/hover.html
@@ -0,0 +1,58 @@
+<html>
+    <head>
+        <style>
+            body {
+                margin: 0;
+            }
+
+            .box {
+                width: 100px;
+                height: 100px;
+                background-color: #0077ff;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="box" id="hover">test</div>
+        <div class="box" id="multi">multi</div>
+        <div class="box" id="once">once</div>
+        <script type="module" src="/src/inc.js"></script>
+        <script type="module">
+            const { hover } = window.MotionDOM
+
+            hover("#hover", ({ currentTarget }) => {
+                currentTarget.innerHTML = "start"
+
+                return () => {
+                    currentTarget.innerHTML = "end"
+                }
+            })
+
+            let multiCount = 0
+            hover("#multi", ({ currentTarget }) => {
+                currentTarget.innerHTML = multiCount
+                multiCount++
+
+                return () => {
+                    currentTarget.innerHTML = multiCount
+                    multiCount++
+                }
+            })
+
+            let onceCount = 0
+            hover(
+                "#once",
+                ({ currentTarget }) => {
+                    currentTarget.innerHTML = onceCount
+                    onceCount++
+
+                    return () => {
+                        currentTarget.innerHTML = onceCount
+                        onceCount++
+                    }
+                },
+                { once: true }
+            )
+        </script>
+    </body>
+</html>
diff --git a/dev/html/src/inc.js b/dev/html/src/inc.js
@@ -0,0 +1,3 @@
+import * as MotionDOM from "motion-dom"
+
+window.MotionDOM = MotionDOM
diff --git a/dev/inc/bundlesize.mjs b/dev/inc/bundlesize.mjs
@@ -0,0 +1,59 @@
+import fs from "fs"
+import path from "path"
+
+const packagePath = path.join(
+    process.cwd(),
+    "packages/framer-motion/package.json"
+)
+const pkg = JSON.parse(fs.readFileSync(packagePath, "utf8"))
+
+if (!pkg.bundlesize) {
+    console.log("No bundlesize configuration found")
+    process.exit(0)
+}
+
+let hasFailures = false
+
+pkg.bundlesize.forEach(async ({ path: filePath, maxSize }) => {
+    const fullPath = path.join(
+        process.cwd(),
+        "packages/framer-motion",
+        filePath
+    )
+
+    if (!fs.existsSync(fullPath)) {
+        console.error(`❌ File not found: ${filePath}`)
+        hasFailures = true
+        return
+    }
+
+    // Create gzipped version of file
+    const fileContent = fs.readFileSync(fullPath)
+    const gzipped = await import("zlib").then((zlib) => {
+        return new Promise((resolve, reject) => {
+            zlib.gzip(fileContent, (error, result) => {
+                if (error) reject(error)
+                else resolve(result)
+            })
+        })
+    })
+
+    const gzippedSize = gzipped.length
+    const maxBytes = parseFloat(maxSize) * 1024
+    const gzippedSizeKb = (gzippedSize / 1024).toFixed(2)
+
+    if (gzippedSize > maxBytes) {
+        console.error(
+            `❌ ${filePath} is ${gzippedSizeKb} kB (${maxSize} allowed)`
+        )
+        hasFailures = true
+    } else {
+        console.log(
+            `✅ ${filePath} is ${gzippedSizeKb} kB (${maxSize} allowed)`
+        )
+    }
+})
+
+if (hasFailures) {
+    process.exit(1)
+}
diff --git a/dev/next/package.json b/dev/next/package.json
@@ -1,15 +1,15 @@
 {
     "name": "next-env",
     "private": true,
-    "version": "11.12.0",
+    "version": "11.13.0-beta.0",
     "type": "module",
     "scripts": {
         "dev": "next dev",
         "dev-server": "next dev",
         "start": "next start"
     },
     "dependencies": {
-        "framer-motion": "^11.12.0",
+        "framer-motion": "^11.13.0-beta.0",
         "next": "14.x",
         "react": "^18.3.1",
         "react-dom": "^18.3.1"

diff --git a/dev/next/tsconfig.json b/dev/next/tsconfig.json
@@ -1,34 +1,23 @@
 {
-  "compilerOptions": {
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": false,
-    "noEmit": true,
-    "incremental": true,
-    "module": "esnext",
-    "esModuleInterop": true,
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ]
-  },
-  "include": [
-    "next-env.d.ts",
-    ".next/types/**/*.ts",
-    "**/*.ts",
-    "**/*.tsx"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+    "compilerOptions": {
+        "lib": ["dom", "dom.iterable", "esnext"],
+        "allowJs": true,
+        "skipLibCheck": true,
+        "strict": false,
+        "noEmit": true,
+        "incremental": true,
+        "module": "esnext",
+        "esModuleInterop": true,
+        "moduleResolution": "bundler",
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "jsx": "preserve",
+        "plugins": [
+            {
+                "name": "next"
+            }
+        ]
+    },
+    "include": ["next-env.d.ts", ".next/types/**/*.ts", "**/*.ts", "**/*.tsx"],
+    "exclude": ["node_modules"]
 }
diff --git a/dev/react/package.json b/dev/react/package.json
@@ -1,7 +1,7 @@
 {
     "name": "react-env",
     "private": true,
-    "version": "11.12.0",
+    "version": "11.13.0-beta.0",
     "type": "module",
     "scripts": {
         "dev": "vite",
@@ -11,7 +11,7 @@
         "preview": "vite preview"
     },
     "dependencies": {
-        "framer-motion": "^11.12.0",
+        "framer-motion": "^11.13.0-beta.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1"
     },

diff --git a/dev/react/tsconfig.json b/dev/react/tsconfig.json
@@ -1,25 +1,25 @@
 {
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
+    "compilerOptions": {
+        "target": "ES2020",
+        "useDefineForClassFields": true,
+        "lib": ["ES2020", "DOM", "DOM.Iterable"],
+        "module": "esnext",
+        "skipLibCheck": true,
 
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
+        /* Bundler mode */
+        "moduleResolution": "bundler",
+        "allowImportingTsExtensions": true,
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "noEmit": true,
+        "jsx": "react-jsx",
 
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+        /* Linting */
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "noFallthroughCasesInSwitch": true
+    },
+    "include": ["src"],
+    "references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/dev/react/tsconfig.node.json b/dev/react/tsconfig.node.json
@@ -1,11 +1,11 @@
 {
-  "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true,
-    "strict": true
-  },
-  "include": ["vite.config.ts"]
+    "compilerOptions": {
+        "composite": true,
+        "skipLibCheck": true,
+        "module": "esnext",
+        "moduleResolution": "bundler",
+        "allowSyntheticDefaultImports": true,
+        "strict": true
+    },
+    "include": ["vite.config.ts"]
 }
diff --git a/lerna.json b/lerna.json
@@ -1,9 +1,8 @@
 {
-    "version": "11.12.0",
-    "packages": [
-        "packages/*",
-        "dev/*"
-    ],
-    "npmClient": "yarn",
-    "useWorkspaces": true
-}
+  "version": "11.13.0-beta.0",
+  "packages": [
+    "packages/*",
+    "dev/*"
+  ],
+  "npmClient": "yarn"
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import * as MotionDOM from "motion-dom"

		window.MotionDOM = MotionDOM