diff --git a/.circleci/config.yml b/.circleci/config.yml index 55e5d9289e..1865172aff 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -95,6 +95,35 @@ 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: @@ -102,3 +131,4 @@ workflows: - test - test-react - test-html + - test-playwright diff --git a/.gitignore b/.gitignore index 65951a7bdb..1e91876d13 100644 --- a/.gitignore +++ b/.gitignore @@ -29,4 +29,8 @@ yarn-error.log .next stats.html -lerna-debug.log \ No newline at end of file +lerna-debug.log + +playwright-report +test-results +test_results \ No newline at end of file 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 new file mode 100644 index 0000000000..45d3b4723e Binary files /dev/null and b/.yarn/cache/@playwright-test-npm-1.49.0-0d251ef816-f8477aa61d.zip differ diff --git a/.yarn/cache/axios-npm-1.6.0-b0f6015a96-c7c9f2ae9e.zip b/.yarn/cache/axios-npm-1.6.0-b0f6015a96-c7c9f2ae9e.zip deleted file mode 100644 index 1dfd47641b..0000000000 Binary files a/.yarn/cache/axios-npm-1.6.0-b0f6015a96-c7c9f2ae9e.zip and /dev/null differ diff --git a/.yarn/cache/axios-npm-1.7.7-cfbedc233d-882d4fe0ec.zip b/.yarn/cache/axios-npm-1.7.7-cfbedc233d-882d4fe0ec.zip deleted file mode 100644 index 93353ced67..0000000000 Binary files a/.yarn/cache/axios-npm-1.7.7-cfbedc233d-882d4fe0ec.zip and /dev/null differ 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 deleted file mode 100644 index a49ec87ac2..0000000000 Binary files a/.yarn/cache/base64-js-npm-1.5.1-b2f7275641-669632eb37.zip and /dev/null differ diff --git a/.yarn/cache/bl-npm-4.1.0-7f94cdcf3f-9e8521fa7e.zip b/.yarn/cache/bl-npm-4.1.0-7f94cdcf3f-9e8521fa7e.zip deleted file mode 100644 index 0b0454bb89..0000000000 Binary files a/.yarn/cache/bl-npm-4.1.0-7f94cdcf3f-9e8521fa7e.zip and /dev/null differ 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 deleted file mode 100644 index 71d740b192..0000000000 Binary files a/.yarn/cache/brotli-size-npm-0.1.0-c84892c221-c79b185162.zip and /dev/null differ diff --git a/.yarn/cache/buffer-npm-5.7.1-513ef8259e-e2cf8429e1.zip b/.yarn/cache/buffer-npm-5.7.1-513ef8259e-e2cf8429e1.zip deleted file mode 100644 index 15c7810bc9..0000000000 Binary files a/.yarn/cache/buffer-npm-5.7.1-513ef8259e-e2cf8429e1.zip and /dev/null differ diff --git a/.yarn/cache/bundlesize-npm-0.18.2-8443dd0543-196a480323.zip b/.yarn/cache/bundlesize-npm-0.18.2-8443dd0543-196a480323.zip deleted file mode 100644 index 4b0a5193e6..0000000000 Binary files a/.yarn/cache/bundlesize-npm-0.18.2-8443dd0543-196a480323.zip and /dev/null differ diff --git a/.yarn/cache/bytes-npm-3.1.2-28b8643004-e4bcd3948d.zip b/.yarn/cache/bytes-npm-3.1.2-28b8643004-e4bcd3948d.zip deleted file mode 100644 index 07737e5cd3..0000000000 Binary files a/.yarn/cache/bytes-npm-3.1.2-28b8643004-e4bcd3948d.zip and /dev/null differ diff --git a/.yarn/cache/chalk-npm-2.1.0-2c9f4f0b44-c92abc5211.zip b/.yarn/cache/chalk-npm-2.1.0-2c9f4f0b44-c92abc5211.zip deleted file mode 100644 index 975fe16a56..0000000000 Binary files a/.yarn/cache/chalk-npm-2.1.0-2c9f4f0b44-c92abc5211.zip and /dev/null differ 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 deleted file mode 100644 index 84f1777168..0000000000 Binary files a/.yarn/cache/ci-env-npm-1.17.0-d1dacafda6-e6a06d9a6c.zip and /dev/null differ 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 deleted file mode 100644 index d9f9f70e07..0000000000 Binary files a/.yarn/cache/decompress-response-npm-4.2.1-abe5b4ebe4-4e783ca4df.zip and /dev/null differ 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 deleted file mode 100644 index 87f0270ec5..0000000000 Binary files a/.yarn/cache/deep-extend-npm-0.6.0-e182924219-7be7e5a8d4.zip and /dev/null differ 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 deleted file mode 100644 index 9c78505ea4..0000000000 Binary files a/.yarn/cache/detect-libc-npm-1.0.3-c30ac344d4-daaaed925f.zip and /dev/null differ 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 deleted file mode 100644 index ec0c34f000..0000000000 Binary files a/.yarn/cache/expand-template-npm-2.0.3-80de959306-588c198472.zip and /dev/null differ 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 deleted file mode 100644 index 91f5b6f1f2..0000000000 Binary files a/.yarn/cache/fs-constants-npm-1.0.0-59576b2177-18f5b71837.zip and /dev/null differ diff --git a/.yarn/cache/fsevents-npm-2.3.2-a881d6ac9f-97ade64e75.zip b/.yarn/cache/fsevents-npm-2.3.2-a881d6ac9f-97ade64e75.zip new file mode 100644 index 0000000000..204c8e4846 Binary files /dev/null and b/.yarn/cache/fsevents-npm-2.3.2-a881d6ac9f-97ade64e75.zip differ diff --git a/.yarn/cache/fsevents-patch-3340e2eb10-8.zip b/.yarn/cache/fsevents-patch-3340e2eb10-8.zip new file mode 100644 index 0000000000..c4511f19bd Binary files /dev/null and b/.yarn/cache/fsevents-patch-3340e2eb10-8.zip differ 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 deleted file mode 100644 index 85e49c857a..0000000000 Binary files a/.yarn/cache/github-build-npm-1.2.4-6c2da0cfaf-fb5a50384b.zip and /dev/null differ 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 deleted file mode 100644 index 0b7c782c18..0000000000 Binary files a/.yarn/cache/github-from-package-npm-0.0.0-519f80c9a1-14e448192a.zip and /dev/null differ 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 deleted file mode 100644 index a94871b780..0000000000 Binary files a/.yarn/cache/gzip-size-npm-4.1.0-169e65f670-09cc329649.zip and /dev/null differ 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 deleted file mode 100644 index d01a2a6260..0000000000 Binary files a/.yarn/cache/has-flag-npm-2.0.0-afbe649c60-7d060d142e.zip and /dev/null differ diff --git a/.yarn/cache/ieee754-npm-1.2.1-fb63b3caeb-5144c0c981.zip b/.yarn/cache/ieee754-npm-1.2.1-fb63b3caeb-5144c0c981.zip deleted file mode 100644 index 74128ad8f2..0000000000 Binary files a/.yarn/cache/ieee754-npm-1.2.1-fb63b3caeb-5144c0c981.zip and /dev/null differ diff --git a/.yarn/cache/iltorb-npm-2.4.5-7505870392-a06f232ff3.zip b/.yarn/cache/iltorb-npm-2.4.5-7505870392-a06f232ff3.zip deleted file mode 100644 index b1b1fc3bc7..0000000000 Binary files a/.yarn/cache/iltorb-npm-2.4.5-7505870392-a06f232ff3.zip and /dev/null differ 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 deleted file mode 100644 index 39add20175..0000000000 Binary files a/.yarn/cache/mimic-response-npm-2.1.0-037463e454-014fad6ab9.zip and /dev/null differ 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 deleted file mode 100644 index 8663492ed4..0000000000 Binary files a/.yarn/cache/mkdirp-classic-npm-0.5.3-3b5c991910-3f4e088208.zip and /dev/null differ diff --git a/.yarn/cache/nan-npm-2.20.0-5b5be83e88-eb09286e6c.zip b/.yarn/cache/nan-npm-2.20.0-5b5be83e88-eb09286e6c.zip deleted file mode 100644 index c17680f708..0000000000 Binary files a/.yarn/cache/nan-npm-2.20.0-5b5be83e88-eb09286e6c.zip and /dev/null differ 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 deleted file mode 100644 index 3088994c28..0000000000 Binary files a/.yarn/cache/napi-build-utils-npm-1.0.2-892e4bba56-06c14271ee.zip and /dev/null differ 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 deleted file mode 100644 index 78cb2c39d7..0000000000 Binary files a/.yarn/cache/node-abi-npm-2.30.1-36a2c4e28a-3f4b0c912c.zip and /dev/null differ 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 deleted file mode 100644 index d9352d70f9..0000000000 Binary files a/.yarn/cache/noop-logger-npm-0.1.1-c88441172d-9f99da270d.zip and /dev/null differ 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 new file mode 100644 index 0000000000..60ce101104 Binary files /dev/null and b/.yarn/cache/playwright-core-npm-1.49.0-4a6c09b0ee-d8423ad0ca.zip differ diff --git a/.yarn/cache/playwright-npm-1.49.0-d57440d7c1-f1bfb2fff6.zip b/.yarn/cache/playwright-npm-1.49.0-d57440d7c1-f1bfb2fff6.zip new file mode 100644 index 0000000000..f048d0e949 Binary files /dev/null and b/.yarn/cache/playwright-npm-1.49.0-d57440d7c1-f1bfb2fff6.zip differ 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 deleted file mode 100644 index 4b4a75fcd4..0000000000 Binary files a/.yarn/cache/prebuild-install-npm-5.3.6-843a9baf36-9b99e5ea2c.zip and /dev/null differ diff --git a/.yarn/cache/prettycli-npm-1.4.3-5cea747fde-1a07e77747.zip b/.yarn/cache/prettycli-npm-1.4.3-5cea747fde-1a07e77747.zip deleted file mode 100644 index c589f61196..0000000000 Binary files a/.yarn/cache/prettycli-npm-1.4.3-5cea747fde-1a07e77747.zip and /dev/null differ 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 deleted file mode 100644 index a58e6bf3e4..0000000000 Binary files a/.yarn/cache/proxy-from-env-npm-1.1.0-c13d07f26b-ed7fcc2ba0.zip and /dev/null differ diff --git a/.yarn/cache/rc-npm-1.2.8-d6768ac936-2e26e052f8.zip b/.yarn/cache/rc-npm-1.2.8-d6768ac936-2e26e052f8.zip deleted file mode 100644 index f7372f98eb..0000000000 Binary files a/.yarn/cache/rc-npm-1.2.8-d6768ac936-2e26e052f8.zip and /dev/null differ 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 deleted file mode 100644 index 6b694bed92..0000000000 Binary files a/.yarn/cache/simple-concat-npm-1.0.1-48df70de29-4d211042cc.zip and /dev/null differ 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 deleted file mode 100644 index 27c45759e4..0000000000 Binary files a/.yarn/cache/simple-get-npm-3.1.1-dce5923dba-80195e70bf.zip and /dev/null differ 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 deleted file mode 100644 index 9c537fe050..0000000000 Binary files a/.yarn/cache/strip-json-comments-npm-2.0.1-e7883b2d04-1074ccb632.zip and /dev/null differ 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 deleted file mode 100644 index 10ef9f21a9..0000000000 Binary files a/.yarn/cache/supports-color-npm-4.5.0-55827972e6-6da4f498d5.zip and /dev/null differ 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 deleted file mode 100644 index f256de33b9..0000000000 Binary files a/.yarn/cache/tar-fs-npm-2.1.1-e374d3b7a2-f5b9a70059.zip and /dev/null differ 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 deleted file mode 100644 index 6d7267b313..0000000000 Binary files a/.yarn/cache/tar-stream-npm-2.2.0-884c79b510-699831a8b9.zip and /dev/null differ 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 deleted file mode 100644 index 41312799de..0000000000 Binary files a/.yarn/cache/which-pm-runs-npm-1.1.0-1a7fd7650e-39a56ee508.zip and /dev/null differ diff --git a/.yarn/cache/zlib-npm-1.0.5-9db0b95997-5ef5693a1d.zip b/.yarn/cache/zlib-npm-1.0.5-9db0b95997-5ef5693a1d.zip new file mode 100644 index 0000000000..88e1bf4243 Binary files /dev/null and b/.yarn/cache/zlib-npm-1.0.5-9db0b95997-5ef5693a1d.zip differ diff --git a/Makefile b/Makefile index 9a8c1f0225..ff8f6bb18c 100644 --- 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 index 013794ee18..5539b7bc82 100644 --- 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 new file mode 100644 index 0000000000..584843d042 --- /dev/null +++ b/dev/html/public/playwright/gestures/hover.html @@ -0,0 +1,58 @@ + + + + + +
test
+
multi
+
once
+ + + + diff --git a/dev/html/src/inc.js b/dev/html/src/inc.js new file mode 100644 index 0000000000..fc377f1ca1 --- /dev/null +++ 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 new file mode 100644 index 0000000000..1fc77b3ba9 --- /dev/null +++ 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 index 8624fbfbc7..c1f4f4df29 100644 --- a/dev/next/package.json +++ b/dev/next/package.json @@ -1,7 +1,7 @@ { "name": "next-env", "private": true, - "version": "11.12.0", + "version": "11.13.0-beta.0", "type": "module", "scripts": { "dev": "next dev", @@ -9,7 +9,7 @@ "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 index ccb2ed95d8..24de86f3aa 100644 --- 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 index a36845464e..e6192971a7 100644 --- 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 index a7fc6fbf23..2bb6ad677e 100644 --- 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 index 97ede7ee6f..120d496787 100644 --- 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 index 45aef59ea4..dee12414b2 100644 --- 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" +} \ No newline at end of file diff --git a/package.json b/package.json index bdfbf1366b..8c24c82f42 100644 --- a/package.json +++ b/package.json @@ -15,16 +15,18 @@ "dev-server": "turbo run dev-server", "lint": "turbo run lint", "test": "turbo run test", + "test-playwright": "yarn playwright test", "test-ci": "turbo run test-ci --no-cache", - "measure": "turbo run measure", + "measure": "turbo run measure && node dev/inc/bundlesize.mjs", "version": "yarn install && git stage yarn.lock", - "prepare": "make check-status && turbo run build measure", + "prepare": "make check-status &&turbo run build measure", "new": "lerna publish from-package", "new-alpha": "turbo run build && lerna publish from-package --canary --preid alpha" }, "devDependencies": { "@cypress/webpack-preprocessor": "^6.0.1", "@gsap/react": "^2.1.0", + "@playwright/test": "^1.48.0", "@rollup/plugin-alias": "^5.1.0", "@rollup/plugin-node-resolve": "^15.2.3", "@rollup/plugin-replace": "^5.0.5", @@ -39,7 +41,6 @@ "@typescript-eslint/eslint-plugin": "^7.4.0", "@typescript-eslint/parser": "^7.4.0", "animejs": "^3.2.2", - "bundlesize": "^0.18.1", "concurrently": "^7.3.0", "convert-tsconfig-paths-to-webpack-aliases": "^0.9.2", "cypress": "4", @@ -75,7 +76,8 @@ "turbo": "1.x", "type-fest": "^1.0.1", "typescript": "5.4.3", - "yarn-deduplicate": "^1.1.1" + "yarn-deduplicate": "^1.1.1", + "zlib": "^1.0.5" }, "packageManager": "yarn@3.1.0" } diff --git a/packages/config/package.json b/packages/config/package.json index f536596fad..7de828a42c 100644 --- a/packages/config/package.json +++ b/packages/config/package.json @@ -1,6 +1,6 @@ { "name": "config", - "version": "11.11.12", + "version": "11.13.0-beta.0", "main": "index.js", "private": true, "license": "MIT", diff --git a/packages/config/tsconfig.json b/packages/config/tsconfig.json index 182b194e35..13ad6a6b1c 100644 --- a/packages/config/tsconfig.json +++ b/packages/config/tsconfig.json @@ -2,7 +2,7 @@ "compilerOptions": { "target": "es2018", "module": "esnext", - "moduleResolution": "node", + "moduleResolution": "bundler", "isolatedModules": false, "importHelpers": true, "jsx": "react-jsx", diff --git a/packages/framer-motion-3d/package.json b/packages/framer-motion-3d/package.json index bcac777444..5fe529d65b 100644 --- a/packages/framer-motion-3d/package.json +++ b/packages/framer-motion-3d/package.json @@ -1,6 +1,6 @@ { "name": "framer-motion-3d", - "version": "11.12.0", + "version": "11.13.0-beta.0", "description": "A simple and powerful React animation library for @react-three/fiber", "main": "dist/cjs/index.js", "module": "dist/es/index.mjs", @@ -45,7 +45,7 @@ "postpublish": "git push --tags" }, "dependencies": { - "framer-motion": "^11.12.0", + "framer-motion": "^11.13.0-beta.0", "react-merge-refs": "^2.0.1" }, "peerDependencies": { @@ -60,5 +60,5 @@ "@rollup/plugin-commonjs": "^22.0.1", "three": "^0.137.0" }, - "gitHead": "eeb1cc452e2b468d838ec76fd501b131b383c5c9" + "gitHead": "9c70b0208d6492d195ce5fdb60ded6cae1a3245c" } diff --git a/packages/framer-motion/cypress/integration/layout-shared-lightbox-crossfade-repeated.ts b/packages/framer-motion/cypress/integration/layout-shared-lightbox-crossfade-repeated.ts deleted file mode 100644 index f8f5f03ff2..0000000000 --- a/packages/framer-motion/cypress/integration/layout-shared-lightbox-crossfade-repeated.ts +++ /dev/null @@ -1,232 +0,0 @@ -import { pipe } from "framer-motion" - -interface BoundingBox { - top: number - left: number - width: number - height: number -} - -function expectBbox(element: HTMLElement, expectedBbox: BoundingBox) { - const bbox = element.getBoundingClientRect() - expect(bbox.top).to.equal(expectedBbox.top) - expect(bbox.left).to.equal(expectedBbox.left) - expect(bbox.width).to.equal(expectedBbox.width) - expect(bbox.height).to.equal(expectedBbox.height) -} - -describe.skip("Shared layout lightbox example, toggle back and forth", () => { - it("Correctly animates back and forth with crossfade", () => { - function open(session: Cypress.cy) { - return session - .get("#item-parent") - .trigger("click") - .wait(50) - .should(([$box]: any) => { - expect(window.getComputedStyle($box).borderRadius).to.equal( - "2.25225% / 0.88968%" - ) - expect(window.getComputedStyle($box).opacity).to.equal("1") - expectBbox($box, { - top: 49, - left: 209, - width: 222, - height: 562, - }) - }) - .get("#item-child") - .should(([$box]: any) => { - expect(window.getComputedStyle($box).borderRadius).to.equal( - "50%" - ) - expect(window.getComputedStyle($box).opacity).to.equal( - "0.5" - ) - expectBbox($box, { - left: 525.1500244140625, - top: 260.1499938964844, - height: 50, - width: 50, - }) - }) - .get("#parent") - .should(([$box]: any) => { - expect(window.getComputedStyle($box).borderRadius).to.equal( - "2.25225% / 0.88968%" - ) - expect(window.getComputedStyle($box).opacity).to.equal( - "0.6" - ) - expectBbox($box, { - top: 49, - left: 209, - width: 222, - height: 562, - }) - }) - .get("#child") - .should(([$box]: any) => { - expect(window.getComputedStyle($box).borderRadius).to.equal( - "50%" - ) - expect(window.getComputedStyle($box).opacity).to.equal( - "0.5" - ) - expectBbox($box, { - top: 292.5, - left: 272.5, - width: 50, - height: 50, - }) - }) - } - - function close(session: Cypress.cy) { - return session - .get("#overlay") - .trigger("click") - .wait(50) - .get("#item-parent") - .should(([$box]: any) => { - expect(window.getComputedStyle($box).borderRadius).to.equal( - "0.271444% / 0.0864753%" - ) - expect(window.getComputedStyle($box).opacity).to.equal("1") - expectBbox($box, { - height: 578.199951171875, - left: 209.89999389648438, - top: 40.900001525878906, - width: 184.20001220703125, - }) - }) - .get("#item-child") - .should(([$box]: any) => { - expect(window.getComputedStyle($box).borderRadius).to.equal( - "50%" - ) - expect(window.getComputedStyle($box).opacity).to.equal( - "0.5" - ) - expectBbox($box, { - top: 303.75, - left: 274.75, - width: 50, - height: 50, - }) - }) - .get("#parent") - .should(([$box]: any) => { - expect(window.getComputedStyle($box).borderRadius).to.equal( - "0.271444% / 0.0864753%" - ) - expect(window.getComputedStyle($box).opacity).to.equal( - "0.0666667" - ) - expectBbox($box, { - height: 578.199951171875, - left: 209.89999389648438, - top: 40.900001525878906, - width: 184.20001220703125, - }) - }) - .get("#child") - .should(([$box]: any) => { - expect(window.getComputedStyle($box).borderRadius).to.equal( - "50%" - ) - expect(window.getComputedStyle($box).opacity).to.equal( - "0.5" - ) - expectBbox($box, { - top: 303.75, - left: 274.75, - width: 50, - height: 50, - }) - }) - } - - pipe( - open, - close, - (session: Cypress.cy) => session.wait(1000), - open, - close, - (session: Cypress.cy) => session.wait(1000), - open, - close - )( - cy - .visit( - `?test=layout-shared-lightbox-crossfade&type=crossfade&partial-ease=true` - ) - .wait(50) - ) - }) - it.skip("Correctly animates back and forth with switch", () => { - function open(session: Cypress.cy) { - return session - .get("#item-parent") - .trigger("click") - .wait(50) - .should(([$box]: any) => { - expect(window.getComputedStyle($box).visibility).to.equal( - "hidden" - ) - }) - .get("#parent") - .should(([$box]: any) => { - expect(window.getComputedStyle($box).borderRadius).to.equal( - "2.25225% / 0.88968%" - ) - expect(window.getComputedStyle($box).opacity).to.equal("1") - expectBbox($box, { - top: 49, - left: 209, - width: 222, - height: 562, - }) - }) - } - - function close(session: Cypress.cy) { - return session - .get("#overlay") - .trigger("click") - .wait(50) - .get("#item-parent") - .should(([$box]: any) => { - expect(window.getComputedStyle($box).visibility).to.equal( - "hidden" - ) - }) - .get("#parent") - .should(([$box]: any) => { - expect(window.getComputedStyle($box).borderRadius).to.equal( - "0.271444% / 0.0864753%" - ) - expect(window.getComputedStyle($box).opacity).to.equal("1") - expectBbox($box, { - height: 578.199951171875, - left: 209.89999389648438, - top: 40.900001525878906, - width: 184.20001220703125, - }) - }) - } - - pipe( - open, - close, - (session: Cypress.cy) => session.wait(200), - open, - close - )( - cy - .visit( - `?test=layout-shared-lightbox-crossfade&type=switch&partial-ease=true` - ) - .wait(50) - ) - }) -}) diff --git a/packages/framer-motion/package.json b/packages/framer-motion/package.json index f58712cb16..8c8716e6a6 100644 --- a/packages/framer-motion/package.json +++ b/packages/framer-motion/package.json @@ -1,6 +1,6 @@ { "name": "framer-motion", - "version": "11.12.0", + "version": "11.13.0-beta.0", "description": "A simple and powerful JavaScript animation library", "main": "dist/cjs/index.js", "module": "dist/es/index.mjs", @@ -80,9 +80,11 @@ "watch": "concurrently -c blue,red -n tsc,rollup --kill-others \"tsc --watch -p . --preserveWatchOutput\" \"rollup --config --watch --no-watch.clearScreen\"", "prepack": "yarn build", "postpublish": "git push --tags", - "measure": "rollup -c ./rollup.size.config.mjs && bundlesize" + "measure": "rollup -c ./rollup.size.config.mjs" }, "dependencies": { + "motion-dom": "^11.13.0-beta.0", + "motion-utils": "^11.13.0-beta.0", "tslib": "^2.4.0" }, "devDependencies": { @@ -108,7 +110,7 @@ "bundlesize": [ { "path": "./dist/size-rollup-motion.js", - "maxSize": "34.15 kB" + "maxSize": "34.4 kB" }, { "path": "./dist/size-rollup-m.js", @@ -116,11 +118,11 @@ }, { "path": "./dist/size-rollup-dom-animation.js", - "maxSize": "17.3 kB" + "maxSize": "17.35 kB" }, { "path": "./dist/size-rollup-dom-max.js", - "maxSize": "29.4 kB" + "maxSize": "29.6 kB" }, { "path": "./dist/size-rollup-animate.js", @@ -134,5 +136,6 @@ "path": "./dist/size-rollup-waapi-animate.js", "maxSize": "2.54 kB" } - ] + ], + "gitHead": "9c70b0208d6492d195ce5fdb60ded6cae1a3245c" } diff --git a/packages/framer-motion/src/animation/animate/index.ts b/packages/framer-motion/src/animation/animate/index.ts index c65b702588..8d8ed2a09e 100644 --- a/packages/framer-motion/src/animation/animate/index.ts +++ b/packages/framer-motion/src/animation/animate/index.ts @@ -1,3 +1,4 @@ +import { AnimationScope, ElementOrSelector } from "motion-dom" import { GenericKeyframesTarget } from "../../types" import type { MotionValue } from "../../value" import { GroupPlaybackControls } from "../GroupPlaybackControls" @@ -8,10 +9,8 @@ import { } from "../sequence/types" import { AnimationPlaybackControls, - AnimationScope, DOMKeyframesDefinition, DynamicAnimationOptions, - ElementOrSelector, ValueAnimationTransition, } from "../types" import { animateSequence } from "./sequence" diff --git a/packages/framer-motion/src/animation/animate/resolve-subjects.ts b/packages/framer-motion/src/animation/animate/resolve-subjects.ts index b7d2b39ca3..f0db9fa874 100644 --- a/packages/framer-motion/src/animation/animate/resolve-subjects.ts +++ b/packages/framer-motion/src/animation/animate/resolve-subjects.ts @@ -1,9 +1,6 @@ -import { - resolveElements, - SelectorCache, -} from "../../render/dom/utils/resolve-element" +import { AnimationScope, SelectorCache, resolveElements } from "motion-dom" import { ObjectTarget } from "../sequence/types" -import { AnimationScope, DOMKeyframesDefinition } from "../types" +import { DOMKeyframesDefinition } from "../types" import { isDOMKeyframes } from "../utils/is-dom-keyframes" export function resolveSubjects( diff --git a/packages/framer-motion/src/animation/animate/sequence.ts b/packages/framer-motion/src/animation/animate/sequence.ts index eef7e6ddbc..b1410bab99 100644 --- a/packages/framer-motion/src/animation/animate/sequence.ts +++ b/packages/framer-motion/src/animation/animate/sequence.ts @@ -1,7 +1,8 @@ +import { AnimationScope } from "motion-dom" import { spring } from "../generators/spring" import { createAnimationsFromSequence } from "../sequence/create" import { AnimationSequence, SequenceOptions } from "../sequence/types" -import { AnimationPlaybackControls, AnimationScope } from "../types" +import { AnimationPlaybackControls } from "../types" import { animateSubject } from "./subject" export function animateSequence( diff --git a/packages/framer-motion/src/animation/animate/subject.ts b/packages/framer-motion/src/animation/animate/subject.ts index 470aad4d81..5c1797345b 100644 --- a/packages/framer-motion/src/animation/animate/subject.ts +++ b/packages/framer-motion/src/animation/animate/subject.ts @@ -1,16 +1,15 @@ +import { AnimationScope, ElementOrSelector } from "motion-dom" +import { invariant } from "motion-utils" import { visualElementStore } from "../../render/store" import { GenericKeyframesTarget, TargetAndTransition } from "../../types" -import { invariant } from "../../utils/errors" import type { MotionValue } from "../../value" import { isMotionValue } from "../../value/utils/is-motion-value" import { animateTarget } from "../interfaces/visual-element-target" import { ObjectTarget } from "../sequence/types" import { AnimationPlaybackControls, - AnimationScope, DOMKeyframesDefinition, DynamicAnimationOptions, - ElementOrSelector, ValueAnimationTransition, } from "../types" import { diff --git a/packages/framer-motion/src/animation/animators/AcceleratedAnimation.ts b/packages/framer-motion/src/animation/animators/AcceleratedAnimation.ts index df9dc7ed95..f652cf6a55 100644 --- a/packages/framer-motion/src/animation/animators/AcceleratedAnimation.ts +++ b/packages/framer-motion/src/animation/animators/AcceleratedAnimation.ts @@ -4,7 +4,7 @@ import { circInOut } from "../../easing/circ" import { EasingDefinition } from "../../easing/types" import { DOMKeyframesResolver } from "../../render/dom/DOMKeyframesResolver" import { ResolvedKeyframes } from "../../render/utils/KeyframesResolver" -import { noop } from "../../utils/noop" +import { noop } from "motion-utils" import { millisecondsToSeconds, secondsToMilliseconds, diff --git a/packages/framer-motion/src/animation/animators/MainThreadAnimation.ts b/packages/framer-motion/src/animation/animators/MainThreadAnimation.ts index 70ed590e92..975a7bcf0e 100644 --- a/packages/framer-motion/src/animation/animators/MainThreadAnimation.ts +++ b/packages/framer-motion/src/animation/animators/MainThreadAnimation.ts @@ -20,7 +20,7 @@ import { secondsToMilliseconds, } from "../../utils/time-conversion" import { clamp } from "../../utils/clamp" -import { invariant } from "../../utils/errors" +import { invariant } from "motion-utils" import { frameloopDriver } from "./drivers/driver-frameloop" import { getFinalKeyframe } from "./waapi/utils/get-final-keyframe" import { isGenerator } from "../generators/utils/is-generator" diff --git a/packages/framer-motion/src/animation/animators/__tests__/MainThreadAnimation.test.ts b/packages/framer-motion/src/animation/animators/__tests__/MainThreadAnimation.test.ts index 2447b9e994..63ec8ade39 100644 --- a/packages/framer-motion/src/animation/animators/__tests__/MainThreadAnimation.test.ts +++ b/packages/framer-motion/src/animation/animators/__tests__/MainThreadAnimation.test.ts @@ -1,7 +1,7 @@ import { MainThreadAnimation, animateValue } from "../MainThreadAnimation" import { reverseEasing } from "../../../easing/modifiers/reverse" import { nextFrame } from "../../../gestures/__tests__/utils" -import { noop } from "../../../utils/noop" +import { noop } from "motion-utils" import { ValueAnimationOptions } from "../../types" import { syncDriver } from "./utils" import { KeyframeResolver } from "../../../render/utils/KeyframesResolver" diff --git a/packages/framer-motion/src/animation/animators/utils/can-animate.ts b/packages/framer-motion/src/animation/animators/utils/can-animate.ts index 8f35fc2bc4..fefcb5f1f1 100644 --- a/packages/framer-motion/src/animation/animators/utils/can-animate.ts +++ b/packages/framer-motion/src/animation/animators/utils/can-animate.ts @@ -1,5 +1,5 @@ import { ResolvedKeyframes } from "../../../render/utils/KeyframesResolver" -import { warning } from "../../../utils/errors" +import { warning } from "motion-utils" import { isGenerator } from "../../generators/utils/is-generator" import { AnimationGeneratorType } from "../../types" import { isAnimatable } from "../../utils/is-animatable" diff --git a/packages/framer-motion/src/animation/animators/waapi/NativeAnimation.ts b/packages/framer-motion/src/animation/animators/waapi/NativeAnimation.ts index 77090ed656..2887923abd 100644 --- a/packages/framer-motion/src/animation/animators/waapi/NativeAnimation.ts +++ b/packages/framer-motion/src/animation/animators/waapi/NativeAnimation.ts @@ -2,8 +2,7 @@ import { startWaapiAnimation } from "." import { createGeneratorEasing } from "../../../easing/utils/create-generator-easing" import { ProgressTimeline } from "../../../render/dom/scroll/observe" import { browserNumberValueTypes } from "../../../render/dom/value-types/number-browser" -import { invariant } from "../../../utils/errors" -import { noop } from "../../../utils/noop" +import { noop, invariant } from "motion-utils" import { millisecondsToSeconds, secondsToMilliseconds, diff --git a/packages/framer-motion/src/animation/animators/waapi/animate-elements.ts b/packages/framer-motion/src/animation/animators/waapi/animate-elements.ts index 0eb3a70637..74dafa0548 100644 --- a/packages/framer-motion/src/animation/animators/waapi/animate-elements.ts +++ b/packages/framer-motion/src/animation/animators/waapi/animate-elements.ts @@ -1,12 +1,10 @@ -import { resolveElements } from "../../../render/dom/utils/resolve-element" -import { invariant } from "../../../utils/errors" +import { resolveElements, ElementOrSelector, AnimationScope } from "motion-dom" +import { invariant } from "motion-utils" import { secondsToMilliseconds } from "../../../utils/time-conversion" import { AnimationPlaybackControls, - AnimationScope, DOMKeyframesDefinition, DynamicAnimationOptions, - ElementOrSelector, } from "../../types" import { getValueTransition } from "../../utils/get-value-transition" import { NativeAnimation } from "./NativeAnimation" diff --git a/packages/framer-motion/src/animation/animators/waapi/animate-style.ts b/packages/framer-motion/src/animation/animators/waapi/animate-style.ts index 59411ecec4..b0a96898ac 100644 --- a/packages/framer-motion/src/animation/animators/waapi/animate-style.ts +++ b/packages/framer-motion/src/animation/animators/waapi/animate-style.ts @@ -1,10 +1,9 @@ +import { AnimationScope, ElementOrSelector } from "motion-dom" import { GroupPlaybackControls } from "../../GroupPlaybackControls" import { AnimationPlaybackControls, - AnimationScope, DOMKeyframesDefinition, DynamicAnimationOptions, - ElementOrSelector, } from "../../types" import { animateElements } from "./animate-elements" diff --git a/packages/framer-motion/src/animation/animators/waapi/utils/__tests__/linear.test.ts b/packages/framer-motion/src/animation/animators/waapi/utils/__tests__/linear.test.ts index f56126e0ea..9c387f903c 100644 --- a/packages/framer-motion/src/animation/animators/waapi/utils/__tests__/linear.test.ts +++ b/packages/framer-motion/src/animation/animators/waapi/utils/__tests__/linear.test.ts @@ -1,4 +1,4 @@ -import { noop } from "../../../../../utils/noop" +import { noop } from "motion-utils" import { generateLinearEasing } from "../linear" describe("generateLinearEasing", () => { diff --git a/packages/framer-motion/src/animation/generators/__tests__/keyframes.test.ts b/packages/framer-motion/src/animation/generators/__tests__/keyframes.test.ts index 0a46a60444..03a0ae4818 100644 --- a/packages/framer-motion/src/animation/generators/__tests__/keyframes.test.ts +++ b/packages/framer-motion/src/animation/generators/__tests__/keyframes.test.ts @@ -1,4 +1,4 @@ -import { noop } from "../../../utils/noop" +import { noop } from "motion-utils" import { easeInOut } from "../../../easing/ease" import { defaultOffset } from "../../../utils/offsets/default" import { convertOffsetToTimes } from "../../../utils/offsets/time" diff --git a/packages/framer-motion/src/animation/generators/spring/find.ts b/packages/framer-motion/src/animation/generators/spring/find.ts index c1b7bcebf7..1553a987a4 100644 --- a/packages/framer-motion/src/animation/generators/spring/find.ts +++ b/packages/framer-motion/src/animation/generators/spring/find.ts @@ -1,4 +1,4 @@ -import { warning } from "../../../utils/errors" +import { warning } from "motion-utils" import { clamp } from "../../../utils/clamp" import { SpringOptions } from "../../types" import { diff --git a/packages/framer-motion/src/animation/hooks/animation-controls.ts b/packages/framer-motion/src/animation/hooks/animation-controls.ts index 4526d38df6..dd927a67c8 100644 --- a/packages/framer-motion/src/animation/hooks/animation-controls.ts +++ b/packages/framer-motion/src/animation/hooks/animation-controls.ts @@ -1,4 +1,4 @@ -import { invariant } from "../../utils/errors" +import { invariant } from "motion-utils" import { setTarget } from "../../render/utils/setters" import type { VisualElement } from "../../render/VisualElement" import { AnimationControls, AnimationDefinition } from "../types" diff --git a/packages/framer-motion/src/animation/hooks/use-animate-style.ts b/packages/framer-motion/src/animation/hooks/use-animate-style.ts index 15a48de09d..3f86e8ef66 100644 --- a/packages/framer-motion/src/animation/hooks/use-animate-style.ts +++ b/packages/framer-motion/src/animation/hooks/use-animate-style.ts @@ -1,7 +1,7 @@ import { useConstant } from "../../utils/use-constant" import { useUnmountEffect } from "../../utils/use-unmount-effect" import { createScopedWaapiAnimate } from "../animators/waapi/animate-style" -import { AnimationScope } from "../types" +import { AnimationScope } from "motion-dom" export function useAnimateMini() { const scope: AnimationScope = useConstant(() => ({ diff --git a/packages/framer-motion/src/animation/hooks/use-animate.ts b/packages/framer-motion/src/animation/hooks/use-animate.ts index ba4bad60ce..a694e8d102 100644 --- a/packages/framer-motion/src/animation/hooks/use-animate.ts +++ b/packages/framer-motion/src/animation/hooks/use-animate.ts @@ -1,7 +1,7 @@ import { useConstant } from "../../utils/use-constant" import { useUnmountEffect } from "../../utils/use-unmount-effect" import { createScopedAnimate } from "../animate" -import { AnimationScope } from "../types" +import { AnimationScope } from "motion-dom" export function useAnimate() { const scope: AnimationScope = useConstant(() => ({ diff --git a/packages/framer-motion/src/animation/optimized-appear/start.ts b/packages/framer-motion/src/animation/optimized-appear/start.ts index 4e4abd91b4..d247247403 100644 --- a/packages/framer-motion/src/animation/optimized-appear/start.ts +++ b/packages/framer-motion/src/animation/optimized-appear/start.ts @@ -4,7 +4,7 @@ import { NativeAnimationOptions } from "../animators/waapi/types" import { optimizedAppearDataId } from "./data-id" import { handoffOptimizedAppearAnimation } from "./handoff" import { appearAnimationStore, AppearStoreEntry, appearComplete } from "./store" -import { noop } from "../../utils/noop" +import { noop } from "motion-utils" import "./types" import { getOptimisedAppearId } from "./get-appear-id" import { MotionValue } from "../../value" diff --git a/packages/framer-motion/src/animation/sequence/create.ts b/packages/framer-motion/src/animation/sequence/create.ts index 88cecc620e..034fd6b7c7 100644 --- a/packages/framer-motion/src/animation/sequence/create.ts +++ b/packages/framer-motion/src/animation/sequence/create.ts @@ -1,3 +1,4 @@ +import { AnimationScope } from "motion-dom" import { Easing } from "../../easing/types" import { createGeneratorEasing } from "../../easing/utils/create-generator-easing" import { defaultOffset } from "../../utils/offsets/default" @@ -10,7 +11,6 @@ import { resolveSubjects } from "../animate/resolve-subjects" import { isGenerator } from "../generators/utils/is-generator" import { DynamicAnimationOptions, GeneratorFactory } from "../types" import { - AnimationScope, DOMKeyframesDefinition, Transition, UnresolvedValueKeyframe, diff --git a/packages/framer-motion/src/animation/sequence/types.ts b/packages/framer-motion/src/animation/sequence/types.ts index bf429e5531..5ea4331b0b 100644 --- a/packages/framer-motion/src/animation/sequence/types.ts +++ b/packages/framer-motion/src/animation/sequence/types.ts @@ -1,10 +1,10 @@ +import { ElementOrSelector } from "motion-dom" import { Easing } from "../../easing/types" import { GenericKeyframesTarget } from "../../types" import type { MotionValue } from "../../value" import { DynamicAnimationOptions } from "../types" import { DOMKeyframesDefinition, - ElementOrSelector, Transition, AnimationPlaybackOptions, UnresolvedValueKeyframe, diff --git a/packages/framer-motion/src/animation/types.ts b/packages/framer-motion/src/animation/types.ts index e572abe687..b28ff7ba7e 100644 --- a/packages/framer-motion/src/animation/types.ts +++ b/packages/framer-motion/src/animation/types.ts @@ -73,11 +73,6 @@ export interface ValueAnimationOptionsWithRenderContext< element?: VisualElement } -export interface AnimationScope { - readonly current: T - animations: AnimationPlaybackControls[] -} - export type StyleTransitions = { [K in keyof CSSStyleDeclarationWithTransform]?: Transition } @@ -105,12 +100,6 @@ export interface DynamicAnimationOptions delay?: number | DynamicOption } -export type ElementOrSelector = - | Element - | Element[] - | NodeListOf - | string - /** * @public */ diff --git a/packages/framer-motion/src/components/AnimatePresence/index.tsx b/packages/framer-motion/src/components/AnimatePresence/index.tsx index 84c6b28770..8131f2c4c6 100644 --- a/packages/framer-motion/src/components/AnimatePresence/index.tsx +++ b/packages/framer-motion/src/components/AnimatePresence/index.tsx @@ -5,7 +5,7 @@ import * as React from "react" import { AnimatePresenceProps } from "./types" import { PresenceChild } from "./PresenceChild" import { LayoutGroupContext } from "../../context/LayoutGroupContext" -import { invariant } from "../../utils/errors" +import { invariant } from "motion-utils" import { useIsomorphicLayoutEffect } from "../../three-entry" import { useConstant } from "../../utils/use-constant" import { ComponentKey, getChildKey, onlyElements } from "./utils" diff --git a/packages/framer-motion/src/components/AnimateSharedLayout.tsx b/packages/framer-motion/src/components/AnimateSharedLayout.tsx index 44f8d09615..2048e4aa3e 100644 --- a/packages/framer-motion/src/components/AnimateSharedLayout.tsx +++ b/packages/framer-motion/src/components/AnimateSharedLayout.tsx @@ -1,4 +1,4 @@ -import { invariant } from "../utils/errors" +import { invariant } from "motion-utils" import * as React from "react" import { useConstant } from "../utils/use-constant" import { LayoutGroup } from "./LayoutGroup" diff --git a/packages/framer-motion/src/components/Reorder/Group.tsx b/packages/framer-motion/src/components/Reorder/Group.tsx index 2ebde8cafe..a6eee5b1ca 100644 --- a/packages/framer-motion/src/components/Reorder/Group.tsx +++ b/packages/framer-motion/src/components/Reorder/Group.tsx @@ -1,6 +1,6 @@ "use client" -import { invariant } from "../../utils/errors" +import { invariant } from "motion-utils" import * as React from "react" import { forwardRef, diff --git a/packages/framer-motion/src/components/Reorder/Item.tsx b/packages/framer-motion/src/components/Reorder/Item.tsx index eb3d0d08ee..6c8df027ff 100644 --- a/packages/framer-motion/src/components/Reorder/Item.tsx +++ b/packages/framer-motion/src/components/Reorder/Item.tsx @@ -1,6 +1,6 @@ "use client" -import { invariant } from "../../utils/errors" +import { invariant } from "motion-utils" import * as React from "react" import { ReactHTML, FunctionComponent, useContext, forwardRef } from "react" import { ReorderContext } from "../../context/ReorderContext" diff --git a/packages/framer-motion/src/dom.ts b/packages/framer-motion/src/dom.ts index 7ed25421b7..28403cfbe8 100644 --- a/packages/framer-motion/src/dom.ts +++ b/packages/framer-motion/src/dom.ts @@ -1,3 +1,6 @@ +export { noop, invariant } from "motion-utils" +export { isDragActive } from "motion-dom" + export { motionValue, MotionValue } from "./value" export type { PassiveEffect, Subscriber } from "./value" export { animate, createScopedAnimate } from "./animation/animate" @@ -34,7 +37,6 @@ export { transform } from "./utils/transform" export { clamp } from "./utils/clamp" export { delayInSeconds as delay, DelayedFunction } from "./utils/delay" export * from "./utils/distance" -export * from "./utils/errors" export * from "./utils/interpolate" export { mix } from "./utils/mix" export { pipe } from "./utils/pipe" diff --git a/packages/framer-motion/src/easing/cubic-bezier.ts b/packages/framer-motion/src/easing/cubic-bezier.ts index f88e644e26..f0228b9cf6 100644 --- a/packages/framer-motion/src/easing/cubic-bezier.ts +++ b/packages/framer-motion/src/easing/cubic-bezier.ts @@ -16,7 +16,7 @@ const x = easeOut(0.5); // returns 0.627... */ -import { noop } from "../utils/noop" +import { noop } from "motion-utils" // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2. const calcBezier = (t: number, a1: number, a2: number) => diff --git a/packages/framer-motion/src/easing/utils/__tests__/map.test.ts b/packages/framer-motion/src/easing/utils/__tests__/map.test.ts index 6361634859..cd2371cbda 100644 --- a/packages/framer-motion/src/easing/utils/__tests__/map.test.ts +++ b/packages/framer-motion/src/easing/utils/__tests__/map.test.ts @@ -1,7 +1,7 @@ import { backIn } from "../../../easing/back" import { cubicBezier } from "../../../easing/cubic-bezier" import { easeInOut } from "../../../easing/ease" -import { noop } from "../../../utils/noop" +import { noop } from "motion-utils" import { easingDefinitionToFunction } from "../map" describe("easingDefinitionToFunction", () => { diff --git a/packages/framer-motion/src/easing/utils/map.ts b/packages/framer-motion/src/easing/utils/map.ts index 868ae70354..cacb4687a4 100644 --- a/packages/framer-motion/src/easing/utils/map.ts +++ b/packages/framer-motion/src/easing/utils/map.ts @@ -1,12 +1,11 @@ -import { invariant } from "../../utils/errors" +import { invariant, noop } from "motion-utils" import { cubicBezier } from "../../easing/cubic-bezier" -import { noop } from "../../utils/noop" import { easeIn, easeInOut, easeOut } from "../../easing/ease" import { circIn, circInOut, circOut } from "../../easing/circ" import { backIn, backInOut, backOut } from "../../easing/back" import { anticipate } from "../../easing/anticipate" import { Easing } from "../../easing/types" -import { isBezierDefinition } from "./is-bezier-definition"; +import { isBezierDefinition } from "./is-bezier-definition" const easingLookup = { linear: noop, diff --git a/packages/framer-motion/src/events/event-info.ts b/packages/framer-motion/src/events/event-info.ts index 836f97b1b5..ba5996ac3a 100644 --- a/packages/framer-motion/src/events/event-info.ts +++ b/packages/framer-motion/src/events/event-info.ts @@ -6,14 +6,11 @@ export type EventListenerWithPointInfo = ( info: EventInfo ) => void -export function extractEventInfo( - event: PointerEvent, - pointType: "page" | "client" = "page" -): EventInfo { +export function extractEventInfo(event: PointerEvent): EventInfo { return { point: { - x: event[`${pointType}X`], - y: event[`${pointType}Y`], + x: event.pageX, + y: event.pageY, }, } } diff --git a/packages/framer-motion/src/frameloop/frame.ts b/packages/framer-motion/src/frameloop/frame.ts index 55887f1ac6..3d7936c016 100644 --- a/packages/framer-motion/src/frameloop/frame.ts +++ b/packages/framer-motion/src/frameloop/frame.ts @@ -1,4 +1,4 @@ -import { noop } from "../utils/noop" +import { noop } from "motion-utils" import { createRenderBatcher } from "./batcher" export const { diff --git a/packages/framer-motion/src/gestures/drag/VisualElementDragControls.ts b/packages/framer-motion/src/gestures/drag/VisualElementDragControls.ts index 0a0c9f93e9..f192dad62a 100644 --- a/packages/framer-motion/src/gestures/drag/VisualElementDragControls.ts +++ b/packages/framer-motion/src/gestures/drag/VisualElementDragControls.ts @@ -1,7 +1,7 @@ -import { invariant } from "../../utils/errors" +import { invariant } from "motion-utils" +import { setDragLock } from "motion-dom" import { PanSession, PanInfo } from "../pan/PanSession" import { ResolvedConstraints } from "./types" -import { Lock, getGlobalLock } from "./utils/lock" import { isRefObject } from "../../utils/is-ref-object" import { addPointerEvent } from "../../events/add-pointer-event" import { @@ -57,10 +57,7 @@ export class VisualElementDragControls { private panSession?: PanSession - // This is a reference to the global drag gesture lock, ensuring only one component - // can "capture" the drag of one or both axes. - // TODO: Look into moving this into pansession? - private openGlobalLock: Lock | null = null + private openDragLock: VoidFunction | null = null isDragging = false private currentDirection: DragDirection | null = null @@ -101,7 +98,7 @@ export class VisualElementDragControls { dragSnapToOrigin ? this.pauseAnimation() : this.stopAnimation() if (snapToCursor) { - this.snapToCursor(extractEventInfo(event, "page").point) + this.snapToCursor(extractEventInfo(event).point) } } @@ -110,11 +107,12 @@ export class VisualElementDragControls { const { drag, dragPropagation, onDragStart } = this.getProps() if (drag && !dragPropagation) { - if (this.openGlobalLock) this.openGlobalLock() - this.openGlobalLock = getGlobalLock(drag) + if (this.openDragLock) this.openDragLock() + + this.openDragLock = setDragLock(drag) // If we don 't have the lock, don't start dragging - if (!this.openGlobalLock) return + if (!this.openDragLock) return } this.isDragging = true @@ -175,7 +173,7 @@ export class VisualElementDragControls { } = this.getProps() // If we didn't successfully receive the gesture lock, early return. - if (!dragPropagation && !this.openGlobalLock) return + if (!dragPropagation && !this.openDragLock) return const { offset } = info // Attempt to detect drag direction if directionLock is true @@ -261,9 +259,9 @@ export class VisualElementDragControls { this.panSession = undefined const { dragPropagation } = this.getProps() - if (!dragPropagation && this.openGlobalLock) { - this.openGlobalLock() - this.openGlobalLock = null + if (!dragPropagation && this.openDragLock) { + this.openDragLock() + this.openDragLock = null } animationState && animationState.setActive("whileDrag", false) diff --git a/packages/framer-motion/src/gestures/drag/index.ts b/packages/framer-motion/src/gestures/drag/index.ts index 3b468c78e5..107edcab1e 100644 --- a/packages/framer-motion/src/gestures/drag/index.ts +++ b/packages/framer-motion/src/gestures/drag/index.ts @@ -1,6 +1,6 @@ import { Feature } from "../../motion/features/Feature" import type { VisualElement } from "../../render/VisualElement" -import { noop } from "../../utils/noop" +import { noop } from "motion-utils" import { VisualElementDragControls } from "./VisualElementDragControls" export class DragGesture extends Feature { diff --git a/packages/framer-motion/src/gestures/drag/utils/lock.ts b/packages/framer-motion/src/gestures/drag/utils/lock.ts deleted file mode 100644 index c92a0e6daa..0000000000 --- a/packages/framer-motion/src/gestures/drag/utils/lock.ts +++ /dev/null @@ -1,52 +0,0 @@ -export type Lock = (() => void) | false - -export function createLock(name: string) { - let lock: null | string = null - return (): Lock => { - const openLock = (): void => { - lock = null - } - if (lock === null) { - lock = name - return openLock - } - return false - } -} - -const globalHorizontalLock = createLock("dragHorizontal") -const globalVerticalLock = createLock("dragVertical") - -export function getGlobalLock( - drag: boolean | "x" | "y" | "lockDirection" -): Lock { - let lock: Lock = false - if (drag === "y") { - lock = globalVerticalLock() - } else if (drag === "x") { - lock = globalHorizontalLock() - } else { - const openHorizontal = globalHorizontalLock() - const openVertical = globalVerticalLock() - if (openHorizontal && openVertical) { - lock = () => { - openHorizontal() - openVertical() - } - } else { - // Release the locks because we don't use them - if (openHorizontal) openHorizontal() - if (openVertical) openVertical() - } - } - return lock -} - -export function isDragActive() { - // Check the gesture lock - if we get it, it means no drag gesture is active - // and we can safely fire the tap gesture. - const openGestureLock = getGlobalLock(true) - if (!openGestureLock) return true - openGestureLock() - return false -} diff --git a/packages/framer-motion/src/gestures/hover.ts b/packages/framer-motion/src/gestures/hover.ts index 6eb85a84bb..13826b5ebe 100644 --- a/packages/framer-motion/src/gestures/hover.ts +++ b/packages/framer-motion/src/gestures/hover.ts @@ -1,41 +1,41 @@ -import { addPointerEvent } from "../events/add-pointer-event" -import { pipe } from "../utils/pipe" -import { isDragActive } from "./drag/utils/lock" -import { EventInfo } from "../events/types" import type { VisualElement } from "../render/VisualElement" import { Feature } from "../motion/features/Feature" import { frame } from "../frameloop" - -function addHoverEvent(node: VisualElement, isActive: boolean) { - const eventName = isActive ? "pointerenter" : "pointerleave" - const callbackName = isActive ? "onHoverStart" : "onHoverEnd" - - const handleEvent = (event: PointerEvent, info: EventInfo) => { - if (event.pointerType === "touch" || isDragActive()) return - - const props = node.getProps() - - if (node.animationState && props.whileHover) { - node.animationState.setActive("whileHover", isActive) - } - - const callback = props[callbackName] - if (callback) { - frame.postRender(() => callback(event, info)) - } +import { hover } from "motion-dom" +import { extractEventInfo } from "../events/event-info" + +function handleHoverEvent( + node: VisualElement, + event: PointerEvent, + isActive: boolean +) { + const { props } = node + + if (node.animationState && props.whileHover) { + node.animationState.setActive("whileHover", isActive) } - return addPointerEvent(node.current!, eventName, handleEvent, { - passive: !node.getProps()[callbackName], - }) + const callback = props[isActive ? "onHoverStart" : "onHoverEnd"] + if (callback) { + frame.postRender(() => callback(event, extractEventInfo(event))) + } } export class HoverGesture extends Feature { mount() { - this.unmount = pipe( - addHoverEvent(this.node, true), - addHoverEvent(this.node, false) - ) as VoidFunction + const { current, props } = this.node + if (!current) return + + this.unmount = hover( + current, + (startEvent) => { + handleHoverEvent(this.node, startEvent, true) + + return (endEvent) => + handleHoverEvent(this.node, endEvent, false) + }, + { passive: !props.onHoverStart && !props.onHoverEnd } + ) } unmount() {} diff --git a/packages/framer-motion/src/gestures/pan/index.ts b/packages/framer-motion/src/gestures/pan/index.ts index a4f67ba4f4..574dd432ed 100644 --- a/packages/framer-motion/src/gestures/pan/index.ts +++ b/packages/framer-motion/src/gestures/pan/index.ts @@ -1,7 +1,7 @@ import { PanInfo, PanSession } from "./PanSession" import { addPointerEvent } from "../../events/add-pointer-event" import { Feature } from "../../motion/features/Feature" -import { noop } from "../../utils/noop" +import { noop } from "motion-utils" import { getContextWindow } from "../../utils/get-context-window" import { frame } from "../../frameloop" diff --git a/packages/framer-motion/src/gestures/press.ts b/packages/framer-motion/src/gestures/press.ts index 68e6d212b8..d1256b1cdf 100644 --- a/packages/framer-motion/src/gestures/press.ts +++ b/packages/framer-motion/src/gestures/press.ts @@ -7,9 +7,9 @@ import { addDomEvent } from "../events/add-dom-event" import { addPointerEvent } from "../events/add-pointer-event" import { Feature } from "../motion/features/Feature" import { pipe } from "../utils/pipe" -import { isDragActive } from "./drag/utils/lock" +import { isDragActive } from "motion-dom" import { isNodeOrChild } from "./utils/is-node-or-child" -import { noop } from "../utils/noop" +import { noop } from "motion-utils" import { frame } from "../frameloop" function fireSyntheticPointerEvent( diff --git a/packages/framer-motion/src/motion/index.tsx b/packages/framer-motion/src/motion/index.tsx index 5885a6e5ba..ad0c4011cb 100644 --- a/packages/framer-motion/src/motion/index.tsx +++ b/packages/framer-motion/src/motion/index.tsx @@ -16,7 +16,7 @@ import { LayoutGroupContext } from "../context/LayoutGroupContext" import { LazyContext } from "../context/LazyContext" import { motionComponentSymbol } from "./utils/symbol" import { CreateVisualElement } from "../render/types" -import { invariant, warning } from "../utils/errors" +import { invariant, warning } from "motion-utils" import { featureDefinitions } from "./features/definitions" export interface MotionComponentConfig { diff --git a/packages/framer-motion/src/projection/animation/mix-values.ts b/packages/framer-motion/src/projection/animation/mix-values.ts index 6dddc66ab9..0373354400 100644 --- a/packages/framer-motion/src/projection/animation/mix-values.ts +++ b/packages/framer-motion/src/projection/animation/mix-values.ts @@ -3,7 +3,7 @@ import { EasingFunction } from "../../easing/types" import { ResolvedValues } from "../../render/types" import { progress as calcProgress } from "../../utils/progress" import { mixNumber } from "../../utils/mix/number" -import { noop } from "../../utils/noop" +import { noop } from "motion-utils" import { percent, px } from "../../value/types/numbers/units" const borders = ["TopLeft", "TopRight", "BottomLeft", "BottomRight"] diff --git a/packages/framer-motion/src/projection/node/create-projection-node.ts b/packages/framer-motion/src/projection/node/create-projection-node.ts index 032cb5a482..a94bf84f76 100644 --- a/packages/framer-motion/src/projection/node/create-projection-node.ts +++ b/packages/framer-motion/src/projection/node/create-projection-node.ts @@ -53,7 +53,7 @@ import { isSVGElement } from "../../render/dom/utils/is-svg-element" import { animateSingleValue } from "../../animation/animate/single-value" import { clamp } from "../../utils/clamp" import { frameSteps } from "../../frameloop/frame" -import { noop } from "../../utils/noop" +import { noop } from "motion-utils" import { time } from "../../frameloop/sync-time" import { microtask } from "../../frameloop/microtask" import { VisualElement } from "../../render/VisualElement" diff --git a/packages/framer-motion/src/render/dom/resize/handle-element.ts b/packages/framer-motion/src/render/dom/resize/handle-element.ts index 1655303145..7c20001852 100644 --- a/packages/framer-motion/src/render/dom/resize/handle-element.ts +++ b/packages/framer-motion/src/render/dom/resize/handle-element.ts @@ -1,5 +1,4 @@ -import { ElementOrSelector } from "../../../animation/types" -import { resolveElements } from "../utils/resolve-element" +import { ElementOrSelector, resolveElements } from "motion-dom" import { ResizeHandler } from "./types" const resizeHandlers = new WeakMap>>() diff --git a/packages/framer-motion/src/render/dom/resize/index.ts b/packages/framer-motion/src/render/dom/resize/index.ts index af126ce7ed..e071546b9d 100644 --- a/packages/framer-motion/src/render/dom/resize/index.ts +++ b/packages/framer-motion/src/render/dom/resize/index.ts @@ -1,4 +1,4 @@ -import { ElementOrSelector } from "../../../animation/types" +import { ElementOrSelector } from "motion-dom" import { resizeElement } from "./handle-element" import { resizeWindow } from "./handle-window" import { ResizeHandler } from "./types" diff --git a/packages/framer-motion/src/render/dom/scroll/index.ts b/packages/framer-motion/src/render/dom/scroll/index.ts index 61345c55a4..7b9fc5f8bf 100644 --- a/packages/framer-motion/src/render/dom/scroll/index.ts +++ b/packages/framer-motion/src/render/dom/scroll/index.ts @@ -3,7 +3,7 @@ import { scrollInfo } from "./track" import { ProgressTimeline, observeTimeline } from "./observe" import { supportsScrollTimeline } from "./supports" import { AnimationPlaybackControls } from "../../../animation/types" -import { noop } from "../../../utils/noop" +import { noop } from "motion-utils" declare class ScrollTimeline implements ProgressTimeline { constructor(options: ScrollOptions) diff --git a/packages/framer-motion/src/render/dom/utils/css-variables-conversion.ts b/packages/framer-motion/src/render/dom/utils/css-variables-conversion.ts index 37e2cf0c08..b47be24033 100644 --- a/packages/framer-motion/src/render/dom/utils/css-variables-conversion.ts +++ b/packages/framer-motion/src/render/dom/utils/css-variables-conversion.ts @@ -1,4 +1,4 @@ -import { invariant } from "../../../utils/errors" +import { invariant } from "motion-utils" import { isNumericalString } from "../../../utils/is-numerical-string" import { isCSSVariableToken, CSSVariableToken } from "./is-css-variable" diff --git a/packages/framer-motion/src/render/dom/utils/resolve-element.ts b/packages/framer-motion/src/render/dom/utils/resolve-element.ts deleted file mode 100644 index 42d798b798..0000000000 --- a/packages/framer-motion/src/render/dom/utils/resolve-element.ts +++ /dev/null @@ -1,43 +0,0 @@ -import type { - AnimationScope, - ElementOrSelector, -} from "../../../animation/types" -import { invariant } from "../../../utils/errors" - -export interface WithQuerySelectorAll { - querySelectorAll: Element["querySelectorAll"] -} - -export type SelectorCache = { [key: string]: NodeListOf } - -export function resolveElements( - elements: ElementOrSelector, - scope?: AnimationScope, - selectorCache?: SelectorCache -): Element[] { - if (typeof elements === "string") { - let root: WithQuerySelectorAll = document - - if (scope) { - invariant( - Boolean(scope.current), - "Scope provided, but no element detected." - ) - root = scope.current - } - - if (selectorCache) { - selectorCache[elements] ??= root.querySelectorAll(elements) - elements = selectorCache[elements] - } else { - elements = root.querySelectorAll(elements) - } - } else if (elements instanceof Element) { - elements = [elements] - } - - /** - * Return an empty array - */ - return Array.from(elements || []) -} diff --git a/packages/framer-motion/src/render/dom/viewport/index.ts b/packages/framer-motion/src/render/dom/viewport/index.ts index dfd62be8ce..7f9d614aaa 100644 --- a/packages/framer-motion/src/render/dom/viewport/index.ts +++ b/packages/framer-motion/src/render/dom/viewport/index.ts @@ -1,14 +1,13 @@ -import { ElementOrSelector } from "../../../animation/types" -import { resolveElements } from "../utils/resolve-element" +import { ElementOrSelector, resolveElements } from "motion-dom" export type ViewChangeHandler = (entry: IntersectionObserverEntry) => void -type MarginValue = `${number}${'px' | '%'}` +type MarginValue = `${number}${"px" | "%"}` type MarginType = - MarginValue | - `${MarginValue} ${MarginValue}` | - `${MarginValue} ${MarginValue} ${MarginValue}` | - `${MarginValue} ${MarginValue} ${MarginValue} ${MarginValue}` + | MarginValue + | `${MarginValue} ${MarginValue}` + | `${MarginValue} ${MarginValue} ${MarginValue}` + | `${MarginValue} ${MarginValue} ${MarginValue} ${MarginValue}` export interface InViewOptions { root?: Element | Document diff --git a/packages/framer-motion/src/three-entry.ts b/packages/framer-motion/src/three-entry.ts index 3c5aa560b8..96b627c5b8 100644 --- a/packages/framer-motion/src/three-entry.ts +++ b/packages/framer-motion/src/three-entry.ts @@ -13,7 +13,6 @@ export { makeUseVisualState, VisualState, } from "./motion/utils/use-visual-state" -export { isDragActive } from "./gestures/drag/utils/lock" export { addPointerEvent } from "./events/add-pointer-event" export { addPointerInfo } from "./events/event-info" export { isMotionValue } from "./value/utils/is-motion-value" diff --git a/packages/framer-motion/src/utils/interpolate.ts b/packages/framer-motion/src/utils/interpolate.ts index 54b48dbce6..4c4bedc4fd 100644 --- a/packages/framer-motion/src/utils/interpolate.ts +++ b/packages/framer-motion/src/utils/interpolate.ts @@ -1,9 +1,8 @@ -import { invariant } from "../utils/errors" import { EasingFunction } from "../easing/types" import { clamp } from "./clamp" import { pipe } from "./pipe" import { progress } from "./progress" -import { noop } from "./noop" +import { noop, invariant } from "motion-utils" import { mix } from "./mix" type Mix = (v: number) => T diff --git a/packages/framer-motion/src/utils/mix/color.ts b/packages/framer-motion/src/utils/mix/color.ts index 9ac66dc6ed..b2f72a3107 100644 --- a/packages/framer-motion/src/utils/mix/color.ts +++ b/packages/framer-motion/src/utils/mix/color.ts @@ -1,5 +1,5 @@ import { mixNumber } from "./number" -import { warning } from "../errors" +import { warning } from "motion-utils" import { hslaToRgba } from "../hsla-to-rgba" import { hex } from "../../value/types/color/hex" import { rgba } from "../../value/types/color/rgba" diff --git a/packages/framer-motion/src/utils/mix/complex.ts b/packages/framer-motion/src/utils/mix/complex.ts index 211fb0567b..dd319495e0 100644 --- a/packages/framer-motion/src/utils/mix/complex.ts +++ b/packages/framer-motion/src/utils/mix/complex.ts @@ -1,7 +1,7 @@ import { mixNumber as mixNumberImmediate } from "./number" import { mixColor } from "./color" import { pipe } from "../pipe" -import { warning } from "../errors" +import { warning } from "motion-utils" import { HSLA, RGBA } from "../../value/types/types" import { color } from "../../value/types/color" import { diff --git a/packages/framer-motion/src/value/use-inverted-scale.ts b/packages/framer-motion/src/value/use-inverted-scale.ts index 0c1b9839f4..31fa3b0860 100644 --- a/packages/framer-motion/src/value/use-inverted-scale.ts +++ b/packages/framer-motion/src/value/use-inverted-scale.ts @@ -1,6 +1,6 @@ import { useTransform } from "../value/use-transform" import { MotionValue } from "./" -import { invariant, warning } from "../utils/errors" +import { invariant, warning } from "motion-utils" import { useMotionValue } from "./use-motion-value" import { MotionContext } from "../context/MotionContext" import { useContext } from "react" diff --git a/packages/framer-motion/src/value/use-scroll.ts b/packages/framer-motion/src/value/use-scroll.ts index 6fcbcb1a39..46706fee3d 100644 --- a/packages/framer-motion/src/value/use-scroll.ts +++ b/packages/framer-motion/src/value/use-scroll.ts @@ -3,7 +3,7 @@ import { motionValue } from "." import { useConstant } from "../utils/use-constant" import { useEffect } from "react" import { useIsomorphicLayoutEffect } from "../three-entry" -import { warning } from "../utils/errors" +import { warning } from "motion-utils" import { scroll } from "../render/dom/scroll" import { ScrollInfoOptions } from "../render/dom/scroll/types" diff --git a/packages/motion-dom/LICENSE.md b/packages/motion-dom/LICENSE.md new file mode 100644 index 0000000000..2fb8bacf91 --- /dev/null +++ b/packages/motion-dom/LICENSE.md @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2018 [Framer](https://www.framer.com?utm_source=motion-license) B.V. + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/packages/motion-dom/package.json b/packages/motion-dom/package.json new file mode 100644 index 0000000000..59f92648dd --- /dev/null +++ b/packages/motion-dom/package.json @@ -0,0 +1,27 @@ +{ + "name": "motion-dom", + "version": "11.13.0-beta.0", + "main": "./lib/index.js", + "types": "./types/index.d.ts", + "module": "./lib/index.js", + "exports": { + ".": { + "types": "./types/index.d.ts", + "require": "./dist/cjs/index.js", + "import": "./dist/es/index.mjs", + "default": "./lib/index.js" + }, + "./hover": { + "types": "./types/gestures/hover.d.ts", + "require": "./dist/cjs/gestures/hover.js", + "import": "./dist/es/gestures/hover.mjs", + "default": "./lib/gestures/hover.js" + } + }, + "scripts": { + "clean": "rm -rf types dist lib", + "build": "yarn clean && tsc -p . && rollup -c", + "dev": "concurrently -c blue,red -n tsc,rollup --kill-others \"tsc --watch -p . --preserveWatchOutput\" \"rollup --config --watch --no-watch.clearScreen\"" + }, + "gitHead": "9c70b0208d6492d195ce5fdb60ded6cae1a3245c" +} diff --git a/packages/motion-dom/rollup.config.mjs b/packages/motion-dom/rollup.config.mjs new file mode 100644 index 0000000000..931d48864a --- /dev/null +++ b/packages/motion-dom/rollup.config.mjs @@ -0,0 +1,94 @@ +import resolve from "@rollup/plugin-node-resolve" +import replace from "@rollup/plugin-replace" +import dts from "rollup-plugin-dts" +import pkg from "./package.json" with { type: "json"} +import tsconfig from "./tsconfig.json" with { type: "json" } +import preserveDirectives from "rollup-plugin-preserve-directives"; + +const config = { + input: "lib/index.js", +} + +export const replaceSettings = (env) => { + const replaceConfig = env + ? { + "process.env.NODE_ENV": JSON.stringify(env), + preventAssignment: false, + } + : { + preventAssignment: false, + } + + replaceConfig.__VERSION__ = `${pkg.version}` + + return replace(replaceConfig) +} + +const external = [ + ...Object.keys(pkg.dependencies || {}), + ...Object.keys(pkg.peerDependencies || {}), + ...Object.keys(pkg.optionalDependencies || {}), + "react/jsx-runtime", +] + +const cjs = Object.assign({}, config, { + input: "lib/index.js", + output: { + entryFileNames: `[name].js`, + dir: "dist/cjs", + format: "cjs", + exports: "named", + esModule: true + }, + plugins: [resolve(), replaceSettings()], + external, + onwarn(warning, warn) { + if (warning.code === 'MODULE_LEVEL_DIRECTIVE') { + return + } + warn(warning) + } +}) + + +export const es = Object.assign({}, config, { + input: ["lib/index.js"], + output: { + entryFileNames: "[name].mjs", + format: "es", + exports: "named", + preserveModules: true, + dir: "dist/es", + }, + plugins: [resolve(), replaceSettings(), preserveDirectives()], + external, + onwarn(warning, warn) { + if (warning.code === 'MODULE_LEVEL_DIRECTIVE') { + return + } + warn(warning) + } +}) + +const typePlugins = [dts({compilerOptions: {...tsconfig, baseUrl:"types"}})] + +function createTypes(input, file) { + return { + input, + output: { + format: "es", + file: file, + }, + plugins: typePlugins, + } +} + + +const types = createTypes("types/index.d.ts", "dist/index.d.ts") + +// eslint-disable-next-line import/no-default-export +export default [ + cjs, + es, + types, +] diff --git a/packages/motion-dom/src/gestures/drag/state/is-active.ts b/packages/motion-dom/src/gestures/drag/state/is-active.ts new file mode 100644 index 0000000000..dfed63f381 --- /dev/null +++ b/packages/motion-dom/src/gestures/drag/state/is-active.ts @@ -0,0 +1,8 @@ +export const isDragging = { + x: false, + y: false, +} + +export function isDragActive() { + return isDragging.x || isDragging.y +} diff --git a/packages/motion-dom/src/gestures/drag/state/set-active.ts b/packages/motion-dom/src/gestures/drag/state/set-active.ts new file mode 100644 index 0000000000..9ab65deddd --- /dev/null +++ b/packages/motion-dom/src/gestures/drag/state/set-active.ts @@ -0,0 +1,23 @@ +import { isDragging } from "./is-active" + +export function setDragLock(axis: boolean | "x" | "y" | "lockDirection") { + if (axis === "x" || axis === "y") { + if (isDragging[axis]) { + return null + } else { + isDragging[axis] = true + return () => { + isDragging[axis] = false + } + } + } else { + if (isDragging.x || isDragging.y) { + return null + } else { + isDragging.x = isDragging.y = true + return () => { + isDragging.x = isDragging.y = false + } + } + } +} diff --git a/packages/motion-dom/src/gestures/hover.ts b/packages/motion-dom/src/gestures/hover.ts new file mode 100644 index 0000000000..5040232495 --- /dev/null +++ b/packages/motion-dom/src/gestures/hover.ts @@ -0,0 +1,93 @@ +import { ElementOrSelector, resolveElements } from "../utils/resolve-elements" +import { isDragActive } from "./drag/state/is-active" + +/** + * Options for the hover gesture. + * + * @public + */ +export interface HoverOptions { + /** + * Use passive event listeners. Doing so allows the browser to optimize + * scrolling performance by not allowing the use of `preventDefault()`. + * + * @default true + */ + passive?: boolean + + /** + * Remove the event listener after the first event. + * + * @default false + */ + once?: boolean +} + +/** + * A function to be called when a hover gesture starts. + * + * This function can optionally return a function that will be called + * when the hover gesture ends. + * + * @public + */ +export type OnHoverStartEvent = (event: PointerEvent) => void | OnHoverEndEvent + +/** + * A function to be called when a hover gesture ends. + * + * @public + */ +export type OnHoverEndEvent = (event: PointerEvent) => void + +/** + * Filter out events that are not pointer events, or are triggering + * while a Motion gesture is active. + */ +function filterEvents(callback: OnHoverStartEvent) { + return (event: PointerEvent) => { + if (event.pointerType === "touch" || isDragActive()) return + callback(event) + } +} + +/** + * Create a hover gesture. hover() is different to .addEventListener("pointerenter") + * in that it has an easier syntax, filters out polyfilled touch events, interoperates + * with drag gestures, and automatically removes the "pointerennd" event listener when the hover ends. + * + * @public + */ +export function hover( + elementOrSelector: ElementOrSelector, + onHoverStart: OnHoverStartEvent, + options: HoverOptions = {} +) { + const gestureAbortController = new AbortController() + + const eventOptions = { + passive: true, + ...options, + signal: gestureAbortController.signal, + } + + const onPointerEnter = filterEvents((enterEvent: PointerEvent) => { + const { target } = enterEvent + const onHoverEnd = onHoverStart(enterEvent) + + if (!onHoverEnd || !target) return + + const onPointerLeave = filterEvents((leaveEvent: PointerEvent) => { + onHoverEnd(leaveEvent) + target.removeEventListener("pointerleave", onPointerLeave) + }) + + target.addEventListener("pointerleave", onPointerLeave, eventOptions) + }) + + resolveElements(elementOrSelector).forEach((element) => { + element.addEventListener("pointerenter", onPointerEnter, eventOptions) + }) + + return () => gestureAbortController.abort() +} diff --git a/packages/motion-dom/src/index.ts b/packages/motion-dom/src/index.ts new file mode 100644 index 0000000000..e2af9d1eb9 --- /dev/null +++ b/packages/motion-dom/src/index.ts @@ -0,0 +1,5 @@ +export * from "./gestures/hover" + +export * from "./utils/resolve-elements" +export * from "./gestures/drag/state/is-active" +export * from "./gestures/drag/state/set-active" diff --git a/packages/motion-dom/src/utils/resolve-elements.ts b/packages/motion-dom/src/utils/resolve-elements.ts new file mode 100644 index 0000000000..6cc1799589 --- /dev/null +++ b/packages/motion-dom/src/utils/resolve-elements.ts @@ -0,0 +1,47 @@ +export type ElementOrSelector = + | Element + | Element[] + | NodeListOf + | string + +export interface WithQuerySelectorAll { + querySelectorAll: Element["querySelectorAll"] +} + +export interface AnimationScope { + readonly current: T + animations: any[] // TODO: Refactor to types package AnimationPlaybackControls[] +} + +export interface SelectorCache { + [key: string]: NodeListOf +} + +export function resolveElements( + elementOrSelector: ElementOrSelector, + scope?: AnimationScope, + selectorCache?: SelectorCache +): Element[] { + if (elementOrSelector instanceof Element) { + return [elementOrSelector] + } else if (typeof elementOrSelector === "string") { + let root: WithQuerySelectorAll = document + + if (scope) { + // TODO: Refactor to utils package + // invariant( + // Boolean(scope.current), + // "Scope provided, but no element detected." + // ) + root = scope.current + } + + const elements = + selectorCache?.[elementOrSelector] ?? + root.querySelectorAll(elementOrSelector) + + return elements ? Array.from(elements) : [] + } + + return Array.from(elementOrSelector) +} diff --git a/packages/motion-dom/tsconfig.json b/packages/motion-dom/tsconfig.json new file mode 100644 index 0000000000..ee65a1289e --- /dev/null +++ b/packages/motion-dom/tsconfig.json @@ -0,0 +1,25 @@ +{ + "extends": "config/tsconfig.json", + "filesGlob": ["./src/**/*.ts"], + "exclude": [ + "node_modules", + "build", + "**/__tests__/*", + "jest.setup.tsx", + "dev", + "types", + "dev/examples.framer", + "test", + "skins", + "dist", + "temp", + "api", + "cypress" + ], + "compilerOptions": { + "baseUrl": "src", + "declarationDir": "types", + "outDir": "lib", + "rootDir": "src" + } +} diff --git a/packages/motion-utils/LICENSE.md b/packages/motion-utils/LICENSE.md new file mode 100644 index 0000000000..2fb8bacf91 --- /dev/null +++ b/packages/motion-utils/LICENSE.md @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2018 [Framer](https://www.framer.com?utm_source=motion-license) B.V. + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/packages/motion-utils/package.json b/packages/motion-utils/package.json new file mode 100644 index 0000000000..d66b7f899b --- /dev/null +++ b/packages/motion-utils/package.json @@ -0,0 +1,21 @@ +{ + "name": "motion-utils", + "version": "11.13.0-beta.0", + "main": "./lib/index.js", + "types": "./types/index.d.ts", + "module": "./lib/index.js", + "exports": { + ".": { + "types": "./types/index.d.ts", + "require": "./dist/cjs/index.js", + "import": "./dist/es/index.mjs", + "default": "./lib/index.js" + } + }, + "scripts": { + "clean": "rm -rf types dist lib", + "build": "yarn clean && tsc -p . && rollup -c", + "dev": "concurrently -c blue,red -n tsc,rollup --kill-others \"tsc --watch -p . --preserveWatchOutput\" \"rollup --config --watch --no-watch.clearScreen\"" + }, + "gitHead": "9c70b0208d6492d195ce5fdb60ded6cae1a3245c" +} diff --git a/packages/motion-utils/rollup.config.mjs b/packages/motion-utils/rollup.config.mjs new file mode 100644 index 0000000000..931d48864a --- /dev/null +++ b/packages/motion-utils/rollup.config.mjs @@ -0,0 +1,94 @@ +import resolve from "@rollup/plugin-node-resolve" +import replace from "@rollup/plugin-replace" +import dts from "rollup-plugin-dts" +import pkg from "./package.json" with { type: "json"} +import tsconfig from "./tsconfig.json" with { type: "json" } +import preserveDirectives from "rollup-plugin-preserve-directives"; + +const config = { + input: "lib/index.js", +} + +export const replaceSettings = (env) => { + const replaceConfig = env + ? { + "process.env.NODE_ENV": JSON.stringify(env), + preventAssignment: false, + } + : { + preventAssignment: false, + } + + replaceConfig.__VERSION__ = `${pkg.version}` + + return replace(replaceConfig) +} + +const external = [ + ...Object.keys(pkg.dependencies || {}), + ...Object.keys(pkg.peerDependencies || {}), + ...Object.keys(pkg.optionalDependencies || {}), + "react/jsx-runtime", +] + +const cjs = Object.assign({}, config, { + input: "lib/index.js", + output: { + entryFileNames: `[name].js`, + dir: "dist/cjs", + format: "cjs", + exports: "named", + esModule: true + }, + plugins: [resolve(), replaceSettings()], + external, + onwarn(warning, warn) { + if (warning.code === 'MODULE_LEVEL_DIRECTIVE') { + return + } + warn(warning) + } +}) + + +export const es = Object.assign({}, config, { + input: ["lib/index.js"], + output: { + entryFileNames: "[name].mjs", + format: "es", + exports: "named", + preserveModules: true, + dir: "dist/es", + }, + plugins: [resolve(), replaceSettings(), preserveDirectives()], + external, + onwarn(warning, warn) { + if (warning.code === 'MODULE_LEVEL_DIRECTIVE') { + return + } + warn(warning) + } +}) + +const typePlugins = [dts({compilerOptions: {...tsconfig, baseUrl:"types"}})] + +function createTypes(input, file) { + return { + input, + output: { + format: "es", + file: file, + }, + plugins: typePlugins, + } +} + + +const types = createTypes("types/index.d.ts", "dist/index.d.ts") + +// eslint-disable-next-line import/no-default-export +export default [ + cjs, + es, + types, +] diff --git a/packages/framer-motion/src/utils/errors.ts b/packages/motion-utils/src/errors.ts similarity index 100% rename from packages/framer-motion/src/utils/errors.ts rename to packages/motion-utils/src/errors.ts diff --git a/packages/motion-utils/src/index.ts b/packages/motion-utils/src/index.ts new file mode 100644 index 0000000000..18534df27d --- /dev/null +++ b/packages/motion-utils/src/index.ts @@ -0,0 +1,2 @@ +export * from "./errors" +export * from "./noop" diff --git a/packages/framer-motion/src/utils/noop.ts b/packages/motion-utils/src/noop.ts similarity index 100% rename from packages/framer-motion/src/utils/noop.ts rename to packages/motion-utils/src/noop.ts diff --git a/packages/motion-utils/tsconfig.json b/packages/motion-utils/tsconfig.json new file mode 100644 index 0000000000..ee65a1289e --- /dev/null +++ b/packages/motion-utils/tsconfig.json @@ -0,0 +1,25 @@ +{ + "extends": "config/tsconfig.json", + "filesGlob": ["./src/**/*.ts"], + "exclude": [ + "node_modules", + "build", + "**/__tests__/*", + "jest.setup.tsx", + "dev", + "types", + "dev/examples.framer", + "test", + "skins", + "dist", + "temp", + "api", + "cypress" + ], + "compilerOptions": { + "baseUrl": "src", + "declarationDir": "types", + "outDir": "lib", + "rootDir": "src" + } +} diff --git a/packages/motion/LICENSE.md b/packages/motion/LICENSE.md new file mode 100644 index 0000000000..2fb8bacf91 --- /dev/null +++ b/packages/motion/LICENSE.md @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2018 [Framer](https://www.framer.com?utm_source=motion-license) B.V. + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/packages/motion/package.json b/packages/motion/package.json index 4983486d1a..d9c3105fd0 100644 --- a/packages/motion/package.json +++ b/packages/motion/package.json @@ -1,6 +1,6 @@ { "name": "motion", - "version": "11.12.0", + "version": "11.13.0-beta.0", "description": "An animation library for JavaScript and React.", "main": "dist/cjs/index.js", "module": "dist/es/motion/lib/index.mjs", @@ -70,7 +70,7 @@ "postpublish": "git push --tags" }, "dependencies": { - "framer-motion": "^11.12.0", + "framer-motion": "^11.13.0-beta.0", "tslib": "^2.4.0" }, "peerDependencies": { @@ -89,5 +89,5 @@ "optional": true } }, - "gitHead": "eeb1cc452e2b468d838ec76fd501b131b383c5c9" + "gitHead": "9c70b0208d6492d195ce5fdb60ded6cae1a3245c" } diff --git a/playwright.config.ts b/playwright.config.ts new file mode 100644 index 0000000000..d362f721dd --- /dev/null +++ b/playwright.config.ts @@ -0,0 +1,55 @@ +import { defineConfig, devices } from "@playwright/test" + +/** + * Read environment variables from file. + * https://github.com/motdotla/dotenv + */ +// import dotenv from 'dotenv'; +// import path from 'path'; +// dotenv.config({ path: path.resolve(__dirname, '.env') }); + +/** + * See https://playwright.dev/docs/test-configuration. + */ +export default defineConfig({ + testDir: "./tests", + /* Run tests in files in parallel */ + fullyParallel: true, + /* Fail the build on CI if you accidentally left test.only in the source code. */ + forbidOnly: !!process.env.CI, + /* Retry on CI only */ + retries: process.env.CI ? 2 : 0, + /* Opt out of parallel tests on CI. */ + workers: process.env.CI ? 1 : undefined, + /* Reporter to use. See https://playwright.dev/docs/test-reporters */ + reporter: "html", + /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ + use: { + /* Base URL to use in actions like `await page.goto('/')`. */ + baseURL: "http://localhost:8000/playwright/", + + /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ + trace: "on-first-retry", + }, + + /* Configure projects for major browsers */ + projects: [ + { + name: "chromium", + use: { ...devices["Desktop Chrome"] }, + }, + + { + name: "webkit", + use: { ...devices["Desktop Safari"] }, + }, + ], + + /* Run your local dev server before starting the tests */ + webServer: { + command: "yarn dev", + url: "http://localhost:8000", + reuseExistingServer: !process.env.CI, + cwd: "./dev/html", + }, +}) diff --git a/tests/gestures/hover.spec.ts b/tests/gestures/hover.spec.ts new file mode 100644 index 0000000000..2870de30b3 --- /dev/null +++ b/tests/gestures/hover.spec.ts @@ -0,0 +1,43 @@ +import { test, expect } from "@playwright/test" + +test.beforeEach(async ({ page }) => { + await page.goto("gestures/hover.html") +}) + +test.describe("hover", () => { + // CI doesn't support hover pointer types + if (process.env.CI) { + test.skip() + } + + test("default hover settings work correctly", async ({ page }) => { + const element = page.locator("#hover") + await expect(element).toHaveText("test") + await element.hover() + await expect(element).toHaveText("start") + await page.mouse.move(1000, 1000) // Move mouse away to trigger hover out + await expect(element).toHaveText("end") + }) + + test("once works correctly", async ({ page }) => { + const multi = page.locator("#multi") + const once = page.locator("#once") + + await expect(multi).toHaveText("multi") + await expect(once).toHaveText("once") + await multi.hover() + await expect(multi).toHaveText("0") + await once.hover() + await expect(once).toHaveText("0") + await page.mouse.move(1000, 1000) + await expect(multi).toHaveText("1") + await expect(once).toHaveText("1") + await multi.hover() + await expect(multi).toHaveText("2") + await once.hover() + await expect(once).toHaveText("1") + await page.mouse.move(1000, 1000) + await expect(multi).toHaveText("3") + await expect(once).toHaveText("1") + }) +}) diff --git a/yarn.lock b/yarn.lock index 4782cd785d..f09c4f7160 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2251,6 +2251,17 @@ __metadata: languageName: node linkType: hard +"@playwright/test@npm:^1.48.0": + version: 1.49.0 + resolution: "@playwright/test@npm:1.49.0" + dependencies: + playwright: 1.49.0 + bin: + playwright: cli.js + checksum: f8477aa61d59fd22c6161c48221ab246340dc37bbe2804e1a7d1be8cbd0fd861747fcb7ca559f4bc7328226ff2c90ccb7efa588a7d7d7829f3e57902b28fe39a + languageName: node + linkType: hard + "@react-three/fiber@npm:8.2.2": version: 8.2.2 resolution: "@react-three/fiber@npm:8.2.2" @@ -3535,7 +3546,7 @@ __metadata: languageName: node linkType: hard -"ansi-styles@npm:^3.1.0, ansi-styles@npm:^3.2.1": +"ansi-styles@npm:^3.2.1": version: 3.2.1 resolution: "ansi-styles@npm:3.2.1" dependencies: @@ -3936,17 +3947,6 @@ __metadata: languageName: node linkType: hard -"axios@npm:1.6.0": - version: 1.6.0 - resolution: "axios@npm:1.6.0" - dependencies: - follow-redirects: ^1.15.0 - form-data: ^4.0.0 - proxy-from-env: ^1.1.0 - checksum: c7c9f2ae9e0b9bad7d6f9a4dff030930b12ee667dedf54c3c776714f91681feb743c509ac0796ae5c01e12c4ab4a2bee74905068dd200fbc1ab86f9814578fb0 - languageName: node - linkType: hard - "axios@npm:^0.27.2": version: 0.27.2 resolution: "axios@npm:0.27.2" @@ -3957,17 +3957,6 @@ __metadata: languageName: node linkType: hard -"axios@npm:^1.6.2": - version: 1.7.7 - resolution: "axios@npm:1.7.7" - dependencies: - follow-redirects: ^1.15.6 - form-data: ^4.0.0 - proxy-from-env: ^1.1.0 - checksum: 882d4fe0ec694a07c7f5c1f68205eb6dc5a62aecdb632cc7a4a3d0985188ce3030e0b277e1a8260ac3f194d314ae342117660a151fabffdc5081ca0b5a8b47fe - languageName: node - linkType: hard - "babel-jest@npm:^29.7.0": version: 29.7.0 resolution: "babel-jest@npm:29.7.0" @@ -4069,13 +4058,6 @@ __metadata: languageName: node linkType: hard -"base64-js@npm:^1.3.1": - version: 1.5.1 - resolution: "base64-js@npm:1.5.1" - checksum: 669632eb3745404c2f822a18fc3a0122d2f9a7a13f7fb8b5823ee19d1d2ff9ee5b52c53367176ea4ad093c332fd5ab4bd0ebae5a8e27917a4105a4cfc86b1005 - languageName: node - linkType: hard - "base@npm:^0.11.1": version: 0.11.2 resolution: "base@npm:0.11.2" @@ -4114,17 +4096,6 @@ __metadata: languageName: node linkType: hard -"bl@npm:^4.0.3": - version: 4.1.0 - resolution: "bl@npm:4.1.0" - dependencies: - buffer: ^5.5.0 - inherits: ^2.0.4 - readable-stream: ^3.4.0 - checksum: 9e8521fa7e83aa9427c6f8ccdcba6e8167ef30cc9a22df26effcc5ab682ef91d2cbc23a239f945d099289e4bbcfae7a192e9c28c84c6202e710a0dfec3722662 - languageName: node - linkType: hard - "bluebird@npm:3.7.1": version: 3.7.1 resolution: "bluebird@npm:3.7.1" @@ -4185,16 +4156,6 @@ __metadata: languageName: node linkType: hard -"brotli-size@npm:0.1.0": - version: 0.1.0 - resolution: "brotli-size@npm:0.1.0" - dependencies: - duplexer: ^0.1.1 - iltorb: ^2.4.3 - checksum: c79b1851623919cf984fbb102f35f1088a92c9868c475347aabc7afe3de507badd398e2a866a60817d5b3411203f897cd3a64d5c86e24b32cb0307e71cd31dc2 - languageName: node - linkType: hard - "browserslist@npm:^4.18.1, browserslist@npm:^4.23.1": version: 4.23.3 resolution: "browserslist@npm:4.23.3" @@ -4241,16 +4202,6 @@ __metadata: languageName: node linkType: hard -"buffer@npm:^5.5.0": - version: 5.7.1 - resolution: "buffer@npm:5.7.1" - dependencies: - base64-js: ^1.3.1 - ieee754: ^1.1.13 - checksum: e2cf8429e1c4c7b8cbd30834ac09bd61da46ce35f5c22a78e6c2f04497d6d25541b16881e30a019c6fd3154150650ccee27a308eff3e26229d788bbdeb08ab84 - languageName: node - linkType: hard - "builtins@npm:^1.0.3": version: 1.0.3 resolution: "builtins@npm:1.0.3" @@ -4258,28 +4209,6 @@ __metadata: languageName: node linkType: hard -"bundlesize@npm:^0.18.1": - version: 0.18.2 - resolution: "bundlesize@npm:0.18.2" - dependencies: - axios: ^1.6.2 - brotli-size: 0.1.0 - bytes: ^3.1.0 - ci-env: ^1.4.0 - commander: ^2.20.0 - cosmiconfig: ^5.2.1 - github-build: ^1.2.4 - glob: ^7.1.4 - gzip-size: ^4.0.0 - prettycli: ^1.4.3 - bin: - bundlesize: index.js - bundlesize-init: src/init-status.js - bundlesize-pipe: pipe.js - checksum: 196a480323b3256531b66664c7e45c977bd46255925fb1bff5285b7a2c1541be403523959ba8a77a69c10759ab1c9a5bbb3edcf04e22fcc9ab8ca781bcc2b4bb - languageName: node - linkType: hard - "busboy@npm:1.6.0": version: 1.6.0 resolution: "busboy@npm:1.6.0" @@ -4303,13 +4232,6 @@ __metadata: languageName: node linkType: hard -"bytes@npm:^3.1.0": - version: 3.1.2 - resolution: "bytes@npm:3.1.2" - checksum: e4bcd3948d289c5127591fbedf10c0b639ccbf00243504e4e127374a15c3bc8eed0d28d4aaab08ff6f1cf2abc0cce6ba3085ed32f4f90e82a5683ce0014e1b6e - languageName: node - linkType: hard - "cacache@npm:^15.0.5, cacache@npm:^15.2.0": version: 15.3.0 resolution: "cacache@npm:15.3.0" @@ -4471,17 +4393,6 @@ __metadata: languageName: node linkType: hard -"chalk@npm:2.1.0": - version: 2.1.0 - resolution: "chalk@npm:2.1.0" - dependencies: - ansi-styles: ^3.1.0 - escape-string-regexp: ^1.0.5 - supports-color: ^4.0.0 - checksum: c92abc52114b133f9111708ae24405bfa11dd18d2edcf1094523c9365fd38ca60dba077ed8e1f8fb104800b33b93d0779707970a066e67ca1657f374792cdeaf - languageName: node - linkType: hard - "chalk@npm:^1.0.0, chalk@npm:^1.1.3": version: 1.1.3 resolution: "chalk@npm:1.1.3" @@ -4580,7 +4491,7 @@ __metadata: languageName: node linkType: hard -"chownr@npm:^1.1.1, chownr@npm:^1.1.4": +"chownr@npm:^1.1.4": version: 1.1.4 resolution: "chownr@npm:1.1.4" checksum: 115648f8eb38bac5e41c3857f3e663f9c39ed6480d1349977c4d96c95a47266fcacc5a5aabf3cb6c481e22d72f41992827db47301851766c4fd77ac21a4f081d @@ -4594,13 +4505,6 @@ __metadata: languageName: node linkType: hard -"ci-env@npm:^1.4.0": - version: 1.17.0 - resolution: "ci-env@npm:1.17.0" - checksum: e6a06d9a6c5abce1ab8fa0f1b0f80e7eb7615d59a937ed0a20a3589441cf49cff1fc64f4fa4b289e3b789dd4a1d9a8255f36a93ed3fc15b6e2be9b795d21fb46 - languageName: node - linkType: hard - "ci-info@npm:^2.0.0": version: 2.0.0 resolution: "ci-info@npm:2.0.0" @@ -5107,7 +5011,7 @@ __metadata: languageName: node linkType: hard -"cosmiconfig@npm:^5.2.0, cosmiconfig@npm:^5.2.1": +"cosmiconfig@npm:^5.2.0": version: 5.2.1 resolution: "cosmiconfig@npm:5.2.1" dependencies: @@ -5469,15 +5373,6 @@ __metadata: languageName: node linkType: hard -"decompress-response@npm:^4.2.0": - version: 4.2.1 - resolution: "decompress-response@npm:4.2.1" - dependencies: - mimic-response: ^2.0.0 - checksum: 4e783ca4dfe9417354d61349750fe05236f565a4415a6ca20983a311be2371debaedd9104c0b0e7b36e5f167aeaae04f84f1a0b3f8be4162f1d7d15598b8fdba - languageName: node - linkType: hard - "dedent@npm:^0.7.0": version: 0.7.0 resolution: "dedent@npm:0.7.0" @@ -5523,13 +5418,6 @@ __metadata: languageName: node linkType: hard -"deep-extend@npm:^0.6.0": - version: 0.6.0 - resolution: "deep-extend@npm:0.6.0" - checksum: 7be7e5a8d468d6b10e6a67c3de828f55001b6eb515d014f7aeb9066ce36bd5717161eb47d6a0f7bed8a9083935b465bc163ee2581c8b128d29bf61092fdf57a7 - languageName: node - linkType: hard - "deep-is@npm:^0.1.3": version: 0.1.4 resolution: "deep-is@npm:0.1.4" @@ -5659,15 +5547,6 @@ __metadata: languageName: node linkType: hard -"detect-libc@npm:^1.0.3": - version: 1.0.3 - resolution: "detect-libc@npm:1.0.3" - bin: - detect-libc: ./bin/detect-libc.js - checksum: daaaed925ffa7889bd91d56e9624e6c8033911bb60f3a50a74a87500680652969dbaab9526d1e200a4c94acf80fc862a22131841145a0a8482d60a99c24f4a3e - languageName: node - linkType: hard - "detect-newline@npm:^3.0.0": version: 3.1.0 resolution: "detect-newline@npm:3.1.0" @@ -5852,7 +5731,7 @@ __metadata: languageName: node linkType: hard -"end-of-stream@npm:^1.1.0, end-of-stream@npm:^1.4.1": +"end-of-stream@npm:^1.1.0": version: 1.4.4 resolution: "end-of-stream@npm:1.4.4" dependencies: @@ -6564,13 +6443,6 @@ __metadata: languageName: node linkType: hard -"expand-template@npm:^2.0.3": - version: 2.0.3 - resolution: "expand-template@npm:2.0.3" - checksum: 588c19847216421ed92befb521767b7018dc88f88b0576df98cb242f20961425e96a92cbece525ef28cc5becceae5d544ae0f5b9b5e2aa05acb13716ca5b3099 - languageName: node - linkType: hard - "expect@npm:^29.0.0, expect@npm:^29.7.0": version: 29.7.0 resolution: "expect@npm:29.7.0" @@ -6877,7 +6749,7 @@ __metadata: languageName: node linkType: hard -"follow-redirects@npm:^1.14.9, follow-redirects@npm:^1.15.0, follow-redirects@npm:^1.15.6": +"follow-redirects@npm:^1.14.9": version: 1.15.9 resolution: "follow-redirects@npm:1.15.9" peerDependenciesMeta: @@ -6989,7 +6861,7 @@ __metadata: "@react-three/fiber": 8.2.2 "@react-three/test-renderer": ^9.0.0 "@rollup/plugin-commonjs": ^22.0.1 - framer-motion: ^11.12.0 + framer-motion: ^11.13.0-beta.0 react-merge-refs: ^2.0.1 three: ^0.137.0 peerDependencies: @@ -7000,11 +6872,13 @@ __metadata: languageName: unknown linkType: soft -"framer-motion@^11.12.0, framer-motion@workspace:packages/framer-motion": +"framer-motion@^11.13.0-beta.0, framer-motion@workspace:packages/framer-motion": version: 0.0.0-use.local resolution: "framer-motion@workspace:packages/framer-motion" dependencies: "@types/three": 0.137.0 + motion-dom: ^11.13.0-beta.0 + motion-utils: ^11.13.0-beta.0 three: 0.137.0 tslib: ^2.4.0 peerDependencies: @@ -7028,13 +6902,6 @@ __metadata: languageName: node linkType: hard -"fs-constants@npm:^1.0.0": - version: 1.0.0 - resolution: "fs-constants@npm:1.0.0" - checksum: 18f5b718371816155849475ac36c7d0b24d39a11d91348cfcb308b4494824413e03572c403c86d3a260e049465518c4f0d5bd00f0371cdfcad6d4f30a85b350d - languageName: node - linkType: hard - "fs-extra@npm:^8.1.0": version: 8.1.0 resolution: "fs-extra@npm:8.1.0" @@ -7099,6 +6966,16 @@ __metadata: languageName: node linkType: hard +"fsevents@npm:2.3.2": + version: 2.3.2 + resolution: "fsevents@npm:2.3.2" + dependencies: + node-gyp: latest + checksum: 97ade64e75091afee5265e6956cb72ba34db7819b4c3e94c431d4be2b19b8bb7a2d4116da417950c3425f17c8fe693d25e20212cac583ac1521ad066b77ae31f + conditions: os=darwin + languageName: node + linkType: hard + "fsevents@npm:^2.3.2, fsevents@npm:~2.3.2, fsevents@npm:~2.3.3": version: 2.3.3 resolution: "fsevents@npm:2.3.3" @@ -7109,6 +6986,15 @@ __metadata: languageName: node linkType: hard +"fsevents@patch:fsevents@2.3.2#~builtin": + version: 2.3.2 + resolution: "fsevents@patch:fsevents@npm%3A2.3.2#~builtin::version=2.3.2&hash=18f3a7" + dependencies: + node-gyp: latest + conditions: os=darwin + languageName: node + linkType: hard + "fsevents@patch:fsevents@^2.3.2#~builtin, fsevents@patch:fsevents@~2.3.2#~builtin, fsevents@patch:fsevents@~2.3.3#~builtin": version: 2.3.3 resolution: "fsevents@patch:fsevents@npm%3A2.3.3#~builtin::version=2.3.3&hash=18f3a7" @@ -7350,22 +7236,6 @@ __metadata: languageName: node linkType: hard -"github-build@npm:^1.2.4": - version: 1.2.4 - resolution: "github-build@npm:1.2.4" - dependencies: - axios: 1.6.0 - checksum: fb5a50384b0b13cc0fb27bb578e628ced14f4307d762929400deb5f13ddc07c1d47f82958dc14808b649bd7f3b78040cb257bdd9005ceef8577a3efeba6741e1 - languageName: node - linkType: hard - -"github-from-package@npm:0.0.0": - version: 0.0.0 - resolution: "github-from-package@npm:0.0.0" - checksum: 14e448192a35c1e42efee94c9d01a10f42fe790375891a24b25261246ce9336ab9df5d274585aedd4568f7922246c2a78b8a8cd2571bfe99c693a9718e7dd0e3 - languageName: node - linkType: hard - "glob-parent@npm:^5.1.1, glob-parent@npm:^5.1.2, glob-parent@npm:~5.1.2": version: 5.1.2 resolution: "glob-parent@npm:5.1.2" @@ -7526,16 +7396,6 @@ __metadata: languageName: node linkType: hard -"gzip-size@npm:^4.0.0": - version: 4.1.0 - resolution: "gzip-size@npm:4.1.0" - dependencies: - duplexer: ^0.1.1 - pify: ^3.0.0 - checksum: 09cc32964974577137b9ecddea00c5056dc22f0b84bfde78a653ec9529f484f7930c2404164fec955361e065f885f9e6f92895a5ec78c510c6d85977d753748c - languageName: node - linkType: hard - "gzip-size@npm:^6.0.0": version: 6.0.0 resolution: "gzip-size@npm:6.0.0" @@ -7603,13 +7463,6 @@ __metadata: languageName: node linkType: hard -"has-flag@npm:^2.0.0": - version: 2.0.0 - resolution: "has-flag@npm:2.0.0" - checksum: 7d060d142ef6740c79991cb99afe5962b267e6e95538bf8b607026b9b1e7451288927bc8e7b4a9484a8b99935c0af023070f91ee49faef791ecd401dc58b2e8d - languageName: node - linkType: hard - "has-flag@npm:^3.0.0": version: 3.0.0 resolution: "has-flag@npm:3.0.0" @@ -7749,6 +7602,8 @@ __metadata: version: 0.0.0-use.local resolution: "html-env@workspace:dev/html" dependencies: + motion: "workspace:*" + motion-dom: "workspace:*" vite: ^5.2.0 languageName: unknown linkType: soft @@ -7875,13 +7730,6 @@ __metadata: languageName: node linkType: hard -"ieee754@npm:^1.1.13": - version: 1.2.1 - resolution: "ieee754@npm:1.2.1" - checksum: 5144c0c9815e54ada181d80a0b810221a253562422e7c6c3a60b1901154184f49326ec239d618c416c1c5945a2e197107aee8d986a3dd836b53dffefd99b5e7e - languageName: node - linkType: hard - "ignore-walk@npm:^3.0.3": version: 3.0.4 resolution: "ignore-walk@npm:3.0.4" @@ -7898,20 +7746,6 @@ __metadata: languageName: node linkType: hard -"iltorb@npm:^2.4.3": - version: 2.4.5 - resolution: "iltorb@npm:2.4.5" - dependencies: - detect-libc: ^1.0.3 - nan: ^2.14.0 - node-gyp: latest - npmlog: ^4.1.2 - prebuild-install: ^5.3.3 - which-pm-runs: ^1.0.0 - checksum: a06f232ff3b760891d24f075f3d7a6ad2cddf13d47c30b2a922c0d7cf97a4118a1819c4a59a5a2a59ed42a739217d0024c0d0a6d3313bab9c81b7cd3fbc2e5f7 - languageName: node - linkType: hard - "immer@npm:^9.0.7": version: 9.0.21 resolution: "immer@npm:9.0.21" @@ -7989,7 +7823,7 @@ __metadata: languageName: node linkType: hard -"inherits@npm:2, inherits@npm:^2.0.3, inherits@npm:^2.0.4, inherits@npm:~2.0.3": +"inherits@npm:2, inherits@npm:^2.0.3, inherits@npm:~2.0.3": version: 2.0.4 resolution: "inherits@npm:2.0.4" checksum: 4a48a733847879d6cf6691860a6b1e3f0f4754176e4d71494c41f3475553768b10f84b5ce1d40fbd0e34e6bfbb864ee35858ad4dd2cf31e02fc4a154b724d7f1 @@ -8003,7 +7837,7 @@ __metadata: languageName: node linkType: hard -"ini@npm:^1.3.2, ini@npm:^1.3.4, ini@npm:^1.3.5, ini@npm:~1.3.0": +"ini@npm:^1.3.2, ini@npm:^1.3.4, ini@npm:^1.3.5": version: 1.3.8 resolution: "ini@npm:1.3.8" checksum: dfd98b0ca3a4fc1e323e38a6c8eb8936e31a97a918d3b377649ea15bdb15d481207a0dda1021efbd86b464cae29a0d33c1d7dcaf6c5672bee17fa849bc50a1b3 @@ -10267,13 +10101,6 @@ __metadata: languageName: node linkType: hard -"mimic-response@npm:^2.0.0": - version: 2.1.0 - resolution: "mimic-response@npm:2.1.0" - checksum: 014fad6ab936657e5f2f48bd87af62a8e928ebe84472aaf9e14fec4fcb31257a5edff77324d8ac13ddc6685ba5135cf16e381efac324e5f174fb4ddbf902bf07 - languageName: node - linkType: hard - "min-indent@npm:^1.0.0": version: 1.0.1 resolution: "min-indent@npm:1.0.1" @@ -10319,7 +10146,7 @@ __metadata: languageName: node linkType: hard -"minimist@npm:^1.2.0, minimist@npm:^1.2.3, minimist@npm:^1.2.5, minimist@npm:^1.2.6, minimist@npm:^1.2.7": +"minimist@npm:^1.2.0, minimist@npm:^1.2.5, minimist@npm:^1.2.6, minimist@npm:^1.2.7": version: 1.2.8 resolution: "minimist@npm:1.2.8" checksum: 75a6d645fb122dad29c06a7597bddea977258957ed88d7a6df59b5cd3fe4a527e253e9bbf2e783e4b73657f9098b96a5fe96ab8a113655d4109108577ecf85b0 @@ -10473,13 +10300,6 @@ __metadata: languageName: node linkType: hard -"mkdirp-classic@npm:^0.5.2, mkdirp-classic@npm:^0.5.3": - version: 0.5.3 - resolution: "mkdirp-classic@npm:0.5.3" - checksum: 3f4e088208270bbcc148d53b73e9a5bd9eef05ad2cbf3b3d0ff8795278d50dd1d11a8ef1875ff5aea3fa888931f95bfcb2ad5b7c1061cfefd6284d199e6776ac - languageName: node - linkType: hard - "mkdirp-infer-owner@npm:^2.0.0": version: 2.0.0 resolution: "mkdirp-infer-owner@npm:2.0.0" @@ -10525,12 +10345,19 @@ __metadata: languageName: node linkType: hard +"motion-dom@^11.13.0-beta.0, motion-dom@workspace:*, motion-dom@workspace:packages/motion-dom": + version: 0.0.0-use.local + resolution: "motion-dom@workspace:packages/motion-dom" + languageName: unknown + linkType: soft + "motion-one@workspace:.": version: 0.0.0-use.local resolution: "motion-one@workspace:." dependencies: "@cypress/webpack-preprocessor": ^6.0.1 "@gsap/react": ^2.1.0 + "@playwright/test": ^1.48.0 "@rollup/plugin-alias": ^5.1.0 "@rollup/plugin-node-resolve": ^15.2.3 "@rollup/plugin-replace": ^5.0.5 @@ -10545,7 +10372,6 @@ __metadata: "@typescript-eslint/eslint-plugin": ^7.4.0 "@typescript-eslint/parser": ^7.4.0 animejs: ^3.2.2 - bundlesize: ^0.18.1 concurrently: ^7.3.0 convert-tsconfig-paths-to-webpack-aliases: ^0.9.2 cypress: 4 @@ -10582,14 +10408,21 @@ __metadata: type-fest: ^1.0.1 typescript: 5.4.3 yarn-deduplicate: ^1.1.1 + zlib: ^1.0.5 + languageName: unknown + linkType: soft + +"motion-utils@^11.13.0-beta.0, motion-utils@workspace:packages/motion-utils": + version: 0.0.0-use.local + resolution: "motion-utils@workspace:packages/motion-utils" languageName: unknown linkType: soft -"motion@workspace:packages/motion": +"motion@workspace:*, motion@workspace:packages/motion": version: 0.0.0-use.local resolution: "motion@workspace:packages/motion" dependencies: - framer-motion: ^11.12.0 + framer-motion: ^11.13.0-beta.0 tslib: ^2.4.0 peerDependencies: "@emotion/is-prop-valid": "*" @@ -10646,15 +10479,6 @@ __metadata: languageName: node linkType: hard -"nan@npm:^2.14.0": - version: 2.20.0 - resolution: "nan@npm:2.20.0" - dependencies: - node-gyp: latest - checksum: eb09286e6c238a3582db4d88c875db73e9b5ab35f60306090acd2f3acae21696c9b653368b4a0e32abcef64ee304a923d6223acaddd16169e5eaaf5c508fb533 - languageName: node - linkType: hard - "nanoid@npm:^3.3.6, nanoid@npm:^3.3.7": version: 3.3.7 resolution: "nanoid@npm:3.3.7" @@ -10683,13 +10507,6 @@ __metadata: languageName: node linkType: hard -"napi-build-utils@npm:^1.0.1": - version: 1.0.2 - resolution: "napi-build-utils@npm:1.0.2" - checksum: 06c14271ee966e108d55ae109f340976a9556c8603e888037145d6522726aebe89dd0c861b4b83947feaf6d39e79e08817559e8693deedc2c94e82c5cbd090c7 - languageName: node - linkType: hard - "natural-compare@npm:^1.4.0": version: 1.4.0 resolution: "natural-compare@npm:1.4.0" @@ -10715,7 +10532,7 @@ __metadata: version: 0.0.0-use.local resolution: "next-env@workspace:dev/next" 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 @@ -10787,15 +10604,6 @@ __metadata: languageName: node linkType: hard -"node-abi@npm:^2.7.0": - version: 2.30.1 - resolution: "node-abi@npm:2.30.1" - dependencies: - semver: ^5.4.1 - checksum: 3f4b0c912ce4befcd7ceab4493ba90b51d60dfcc90f567c93f731d897ef8691add601cb64c181683b800f21d479d68f9a6e15d8ab8acd16a5706333b9e30a881 - languageName: node - linkType: hard - "node-fetch@npm:^2.6.1, node-fetch@npm:^2.6.7": version: 2.7.0 resolution: "node-fetch@npm:2.7.0" @@ -10885,13 +10693,6 @@ __metadata: languageName: node linkType: hard -"noop-logger@npm:^0.1.1": - version: 0.1.1 - resolution: "noop-logger@npm:0.1.1" - checksum: 9f99da270d074a2f268de2eae3ebcb44f12cc2f7241417c7be9f1e206f614afa632a27b91febab86163f88bb54466d638e49c9f62d899105f18d5ed5bcd51ed1 - languageName: node - linkType: hard - "nopt@npm:^4.0.1": version: 4.0.3 resolution: "nopt@npm:4.0.3" @@ -11114,7 +10915,7 @@ __metadata: languageName: node linkType: hard -"npmlog@npm:^4.0.1, npmlog@npm:^4.1.2": +"npmlog@npm:^4.1.2": version: 4.1.2 resolution: "npmlog@npm:4.1.2" dependencies: @@ -11820,6 +11621,30 @@ __metadata: languageName: node linkType: hard +"playwright-core@npm:1.49.0": + version: 1.49.0 + resolution: "playwright-core@npm:1.49.0" + bin: + playwright-core: cli.js + checksum: d8423ad0cab2e672856529bf6b98b406e7e605da098b847b9b54ee8ebd8d716ed8880a9afff4b38f0a2e3f59b95661c74589116ce3ff2b5e0ae3561507086c94 + languageName: node + linkType: hard + +"playwright@npm:1.49.0": + version: 1.49.0 + resolution: "playwright@npm:1.49.0" + dependencies: + fsevents: 2.3.2 + playwright-core: 1.49.0 + dependenciesMeta: + fsevents: + optional: true + bin: + playwright: cli.js + checksum: f1bfb2fff65cad2ce996edab74ec231dfd21aeb5961554b765ce1eaec27efb87eaba37b00e91ecd27727b82861e5d8c230abe4960e93f6ada8be5ad1020df306 + languageName: node + linkType: hard + "please-upgrade-node@npm:^3.0.2": version: 3.2.0 resolution: "please-upgrade-node@npm:3.2.0" @@ -11890,31 +11715,6 @@ __metadata: languageName: node linkType: hard -"prebuild-install@npm:^5.3.3": - version: 5.3.6 - resolution: "prebuild-install@npm:5.3.6" - dependencies: - detect-libc: ^1.0.3 - expand-template: ^2.0.3 - github-from-package: 0.0.0 - minimist: ^1.2.3 - mkdirp-classic: ^0.5.3 - napi-build-utils: ^1.0.1 - node-abi: ^2.7.0 - noop-logger: ^0.1.1 - npmlog: ^4.0.1 - pump: ^3.0.0 - rc: ^1.2.7 - simple-get: ^3.0.3 - tar-fs: ^2.0.0 - tunnel-agent: ^0.6.0 - which-pm-runs: ^1.0.0 - bin: - prebuild-install: bin.js - checksum: 9b99e5ea2c1db44efbd1bc1f3d04f887e66ae282af8560191ee3005886c8d3fab578ad3e903d0965fec082d3c0779e6337a63152dc9d0f847f1bc95317356ea1 - languageName: node - linkType: hard - "prelude-ls@npm:^1.2.1": version: 1.2.1 resolution: "prelude-ls@npm:1.2.1" @@ -11960,15 +11760,6 @@ __metadata: languageName: node linkType: hard -"prettycli@npm:^1.4.3": - version: 1.4.3 - resolution: "prettycli@npm:1.4.3" - dependencies: - chalk: 2.1.0 - checksum: 1a07e777470689290707c11cef870eeda5eb12a5f96408279e22e8629a5c8584393dba8e38feb55406e84f734ed941a85ad007323061f732c95da2a958ee7ee8 - languageName: node - linkType: hard - "proc-log@npm:^4.1.0, proc-log@npm:^4.2.0": version: 4.2.0 resolution: "proc-log@npm:4.2.0" @@ -12058,13 +11849,6 @@ __metadata: languageName: node linkType: hard -"proxy-from-env@npm:^1.1.0": - version: 1.1.0 - resolution: "proxy-from-env@npm:1.1.0" - checksum: ed7fcc2ba0a33404958e34d95d18638249a68c430e30fcb6c478497d72739ba64ce9810a24f53a7d921d0c065e5b78e3822759800698167256b04659366ca4d4 - languageName: node - linkType: hard - "ps-tree@npm:1.2.0": version: 1.2.0 resolution: "ps-tree@npm:1.2.0" @@ -12195,20 +11979,6 @@ __metadata: languageName: node linkType: hard -"rc@npm:^1.2.7": - version: 1.2.8 - resolution: "rc@npm:1.2.8" - dependencies: - deep-extend: ^0.6.0 - ini: ~1.3.0 - minimist: ^1.2.0 - strip-json-comments: ~2.0.1 - bin: - rc: ./cli.js - checksum: 2e26e052f8be2abd64e6d1dabfbd7be03f80ec18ccbc49562d31f617d0015fbdbcf0f9eed30346ea6ab789e0fdfe4337f033f8016efdbee0df5354751842080e - languageName: node - linkType: hard - "react-dev-utils@npm:^12.0.1": version: 12.0.1 resolution: "react-dev-utils@npm:12.0.1" @@ -12263,7 +12033,7 @@ __metadata: "@typescript-eslint/parser": ^7.2.0 "@vitejs/plugin-react-swc": ^3.5.0 eslint-plugin-react-refresh: ^0.4.6 - framer-motion: ^11.12.0 + framer-motion: ^11.13.0-beta.0 react: ^18.3.1 react-dom: ^18.3.1 styled-components: ^6.1.11 @@ -12456,7 +12226,7 @@ __metadata: languageName: node linkType: hard -"readable-stream@npm:3, readable-stream@npm:^3.0.0, readable-stream@npm:^3.0.2, readable-stream@npm:^3.1.1, readable-stream@npm:^3.4.0": +"readable-stream@npm:3, readable-stream@npm:^3.0.0, readable-stream@npm:^3.0.2": version: 3.6.2 resolution: "readable-stream@npm:3.6.2" dependencies: @@ -13163,7 +12933,7 @@ __metadata: languageName: node linkType: hard -"semver@npm:2 || 3 || 4 || 5, semver@npm:^5.3.0, semver@npm:^5.4.1, semver@npm:^5.5.0, semver@npm:^5.6.0, semver@npm:^5.7.1": +"semver@npm:2 || 3 || 4 || 5, semver@npm:^5.3.0, semver@npm:^5.5.0, semver@npm:^5.6.0, semver@npm:^5.7.1": version: 5.7.2 resolution: "semver@npm:5.7.2" bin: @@ -13325,24 +13095,6 @@ __metadata: languageName: node linkType: hard -"simple-concat@npm:^1.0.0": - version: 1.0.1 - resolution: "simple-concat@npm:1.0.1" - checksum: 4d211042cc3d73a718c21ac6c4e7d7a0363e184be6a5ad25c8a1502e49df6d0a0253979e3d50dbdd3f60ef6c6c58d756b5d66ac1e05cda9cacd2e9fc59e3876a - languageName: node - linkType: hard - -"simple-get@npm:^3.0.3": - version: 3.1.1 - resolution: "simple-get@npm:3.1.1" - dependencies: - decompress-response: ^4.2.0 - once: ^1.3.1 - simple-concat: ^1.0.0 - checksum: 80195e70bf171486e75c31e28e5485468195cc42f85940f8b45c4a68472160144d223eb4d07bc82ef80cb974b7c401db021a540deb2d34ac4b3b8883da2d6401 - languageName: node - linkType: hard - "simple-git@npm:^1.85.0": version: 1.132.0 resolution: "simple-git@npm:1.132.0" @@ -14026,13 +13778,6 @@ __metadata: languageName: node linkType: hard -"strip-json-comments@npm:~2.0.1": - version: 2.0.1 - resolution: "strip-json-comments@npm:2.0.1" - checksum: 1074ccb63270d32ca28edfb0a281c96b94dc679077828135141f27d52a5a398ef5e78bcf22809d23cadc2b81dfbe345eb5fd8699b385c8b1128907dec4a7d1e1 - languageName: node - linkType: hard - "strong-log-transformer@npm:^2.1.0": version: 2.1.0 resolution: "strong-log-transformer@npm:2.1.0" @@ -14136,15 +13881,6 @@ __metadata: languageName: node linkType: hard -"supports-color@npm:^4.0.0": - version: 4.5.0 - resolution: "supports-color@npm:4.5.0" - dependencies: - has-flag: ^2.0.0 - checksum: 6da4f498d5c71e8619f06e4a11d16f044105faf7590b5b005fc84933fbefdf72c2b4e5b7174c66da6ddc68e7f6ef56cc960a5ebd6f2d542d910e259e61b02335 - languageName: node - linkType: hard - "supports-color@npm:^5.3.0, supports-color@npm:^5.5.0": version: 5.5.0 resolution: "supports-color@npm:5.5.0" @@ -14232,31 +13968,6 @@ __metadata: languageName: node linkType: hard -"tar-fs@npm:^2.0.0": - version: 2.1.1 - resolution: "tar-fs@npm:2.1.1" - dependencies: - chownr: ^1.1.1 - mkdirp-classic: ^0.5.2 - pump: ^3.0.0 - tar-stream: ^2.1.4 - checksum: f5b9a70059f5b2969e65f037b4e4da2daf0fa762d3d232ffd96e819e3f94665dbbbe62f76f084f1acb4dbdcce16c6e4dac08d12ffc6d24b8d76720f4d9cf032d - languageName: node - linkType: hard - -"tar-stream@npm:^2.1.4": - version: 2.2.0 - resolution: "tar-stream@npm:2.2.0" - dependencies: - bl: ^4.0.3 - end-of-stream: ^1.4.1 - fs-constants: ^1.0.0 - inherits: ^2.0.3 - readable-stream: ^3.1.1 - checksum: 699831a8b97666ef50021c767f84924cfee21c142c2eb0e79c63254e140e6408d6d55a065a2992548e72b06de39237ef2b802b99e3ece93ca3904a37622a66f3 - languageName: node - linkType: hard - "tar@npm:^4.4.12": version: 4.4.19 resolution: "tar@npm:4.4.19" @@ -15347,13 +15058,6 @@ __metadata: languageName: node linkType: hard -"which-pm-runs@npm:^1.0.0": - version: 1.1.0 - resolution: "which-pm-runs@npm:1.1.0" - checksum: 39a56ee50886fb33ec710e3b36dc9fe3d0096cac44850d9ca0c6186c4cb824d6c8125f013e0562e7c94744e1e8e4a6ab695592cdb12555777c7a4368143d822c - languageName: node - linkType: hard - "which-typed-array@npm:^1.1.13, which-typed-array@npm:^1.1.14, which-typed-array@npm:^1.1.15": version: 1.1.15 resolution: "which-typed-array@npm:1.1.15" @@ -15700,6 +15404,13 @@ __metadata: languageName: node linkType: hard +"zlib@npm:^1.0.5": + version: 1.0.5 + resolution: "zlib@npm:1.0.5" + checksum: 5ef5693a1deb70f65845424f5ecce1ee956e50320aa438126759fd28ec8a25ae876acb3b179b4f5050427e7e0dfcd9e45bdae23f055b2d732bc2fe1dbe4da169 + languageName: node + linkType: hard + "zustand@npm:^3.7.1": version: 3.7.2 resolution: "zustand@npm:3.7.2"