From f7b344e2b268f242f76e1cd4409b83375cd86fb2 Mon Sep 17 00:00:00 2001 From: saurabhdaware Date: Tue, 10 Dec 2024 13:28:18 +0530 Subject: [PATCH 1/5] fix: mark motion as optional peer deps --- packages/blade/package.json | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/blade/package.json b/packages/blade/package.json index 2cd24d1489b..41226ceb557 100644 --- a/packages/blade/package.json +++ b/packages/blade/package.json @@ -294,7 +294,7 @@ "react-dom": ">=18", "styled-components": "^5", "framer-motion": ">=4", - "motion": ">=11.12.0", + "motion": ">=11", "react-native": "^0.72", "@floating-ui/react-native": "^0.10.0", "react-native-reanimated": "^3.4.1", @@ -314,6 +314,9 @@ }, "react-native-reanimated": { "optional": true + }, + "motion": { + "optional": true } }, "resolutions": { From cb8733aefa336f763f19a5c63506b873c5e8cc17 Mon Sep 17 00:00:00 2001 From: saurabhdaware Date: Tue, 10 Dec 2024 13:41:43 +0530 Subject: [PATCH 2/5] feat: mark motion external --- packages/blade/package.json | 4 ---- packages/blade/rollup.config.mjs | 6 +++++- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/blade/package.json b/packages/blade/package.json index 41226ceb557..d06afe05148 100644 --- a/packages/blade/package.json +++ b/packages/blade/package.json @@ -294,7 +294,6 @@ "react-dom": ">=18", "styled-components": "^5", "framer-motion": ">=4", - "motion": ">=11", "react-native": "^0.72", "@floating-ui/react-native": "^0.10.0", "react-native-reanimated": "^3.4.1", @@ -314,9 +313,6 @@ }, "react-native-reanimated": { "optional": true - }, - "motion": { - "optional": true } }, "resolutions": { diff --git a/packages/blade/rollup.config.mjs b/packages/blade/rollup.config.mjs index 90ae580f8f2..b56c24c99ea 100644 --- a/packages/blade/rollup.config.mjs +++ b/packages/blade/rollup.config.mjs @@ -51,7 +51,11 @@ const nativeExtensions = [ const packageJsonDeps = Object.keys(packagejson.dependencies).filter( (name) => name !== 'patch-package', ); -const externalDependencies = packageJsonDeps; + +// `framer-motion` was renamed to `motion`. To support the older versions of framer-motion, we have kept `framer-motion` as peer dependency right now. +// Although we also want to make sure that if someone installs `motion` instead, it should externalize correctly +// We cannot mark `motion` and `framer-motion` both as peer dependencies because `motion` might end up installing different `framer-motion` version internally which can end up clashing (TLDR: I tried and it didn't work) +const externalDependencies = [...packageJsonDeps, 'motion']; const inputRootDirectory = 'src'; const outputRootDirectory = 'build'; From 1b410fd4dfe4c04bffe3378ce296cbd87399c04a Mon Sep 17 00:00:00 2001 From: saurabhdaware Date: Tue, 10 Dec 2024 14:03:05 +0530 Subject: [PATCH 3/5] fix: check if its working without motion as external --- packages/blade/rollup.config.mjs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/blade/rollup.config.mjs b/packages/blade/rollup.config.mjs index b56c24c99ea..fb570a7abfc 100644 --- a/packages/blade/rollup.config.mjs +++ b/packages/blade/rollup.config.mjs @@ -55,7 +55,7 @@ const packageJsonDeps = Object.keys(packagejson.dependencies).filter( // `framer-motion` was renamed to `motion`. To support the older versions of framer-motion, we have kept `framer-motion` as peer dependency right now. // Although we also want to make sure that if someone installs `motion` instead, it should externalize correctly // We cannot mark `motion` and `framer-motion` both as peer dependencies because `motion` might end up installing different `framer-motion` version internally which can end up clashing (TLDR: I tried and it didn't work) -const externalDependencies = [...packageJsonDeps, 'motion']; +const externalDependencies = packageJsonDeps; const inputRootDirectory = 'src'; const outputRootDirectory = 'build'; From 23149bb70e8e675eaaa6af4af054876ec7a2a039 Mon Sep 17 00:00:00 2001 From: saurabhdaware Date: Tue, 10 Dec 2024 14:19:08 +0530 Subject: [PATCH 4/5] fix: mark motion/react as external --- packages/blade/rollup.config.mjs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/blade/rollup.config.mjs b/packages/blade/rollup.config.mjs index fb570a7abfc..4685bde90b5 100644 --- a/packages/blade/rollup.config.mjs +++ b/packages/blade/rollup.config.mjs @@ -55,7 +55,7 @@ const packageJsonDeps = Object.keys(packagejson.dependencies).filter( // `framer-motion` was renamed to `motion`. To support the older versions of framer-motion, we have kept `framer-motion` as peer dependency right now. // Although we also want to make sure that if someone installs `motion` instead, it should externalize correctly // We cannot mark `motion` and `framer-motion` both as peer dependencies because `motion` might end up installing different `framer-motion` version internally which can end up clashing (TLDR: I tried and it didn't work) -const externalDependencies = packageJsonDeps; +const externalDependencies = [...packageJsonDeps, 'motion/react']; const inputRootDirectory = 'src'; const outputRootDirectory = 'build'; From 16a0afe9294764df245417013c496f1b5830a197 Mon Sep 17 00:00:00 2001 From: saurabhdaware Date: Tue, 10 Dec 2024 15:38:14 +0530 Subject: [PATCH 5/5] feat: recommend framer-motion name instead --- .../docs/guides/Installation.stories.mdx | 4 ++-- .../blade/docs/migration-docs/upgrade-v12.md | 23 +++++++++---------- packages/blade/rollup.config.mjs | 5 +--- .../BaseMotion/docs/MotionInstallation.mdx | 7 +++--- .../src/utils/storybook/Sandbox/baseCode.ts | 8 +++---- 5 files changed, 21 insertions(+), 26 deletions(-) diff --git a/packages/blade/docs/guides/Installation.stories.mdx b/packages/blade/docs/guides/Installation.stories.mdx index 308b9b4ef38..7abfc244696 100644 --- a/packages/blade/docs/guides/Installation.stories.mdx +++ b/packages/blade/docs/guides/Installation.stories.mdx @@ -93,7 +93,7 @@ Before you install the package, make sure that you have performed the following Blade has a few peer dependencies that you may already have installed in your project. If so, you can skip adding them again. ```shell - yarn add @razorpay/blade styled-components@5.3.11 @razorpay/i18nify-js@1.9.3 @razorpay/i18nify-react@4.0.8 motion@11.12.0 + yarn add @razorpay/blade styled-components@5.3.11 @razorpay/i18nify-js@1.9.3 @razorpay/i18nify-react@4.0.8 framer-motion@11.13.3 ``` @@ -255,7 +255,7 @@ Before you install the package, make sure that you have performed the following Add motion to your application - Assuming you've followed the first step and installed `motion` in your project, Here's how we recommend you to setup the project- + Assuming you've followed the first step and installed `framer-motion` in your project, Here's how we recommend you to setup the project- diff --git a/packages/blade/docs/migration-docs/upgrade-v12.md b/packages/blade/docs/migration-docs/upgrade-v12.md index 1a409f09f02..34c731b9398 100644 --- a/packages/blade/docs/migration-docs/upgrade-v12.md +++ b/packages/blade/docs/migration-docs/upgrade-v12.md @@ -8,13 +8,13 @@ We've changed the structure of motion easing tokens inorder to simplify the stru 2. Motion React Setup -Blade v12 introduces `motion` (prev `framer-motion`) as peer dependency and requires you to set it up in your projects. +Blade v12 introduces `framer-motion` as peer dependency and requires you to set it up in your projects. ## Steps to Migrate - **Step 1:** Upgrade to latest `@razorpay/blade` package in your project - **Step 2:** [Perform Tokens Changes](#token-changes) using Codemod or manually -- **Step 3:** [Setup `motion/react` (or `framer-motion`)](#motion-react-framer-motion-setup) +- **Step 3:** [Setup framer-motion](#motion-react-framer-motion-setup) ## Token Changes @@ -47,7 +47,7 @@ You can skip this if you've run the codemod but in case not or you see some edge > [!IMPORTANT] > -> `framer-motion` library is now known as `motion/react` +> `framer-motion` library is now known as `motion/react`. We still use `framer-motion` imports in blade to support older versions. > > Checkout the [announcement by creator of framer-motion](https://bsky.app/profile/citizenofnowhe.re/post/3lar365ouuk2v) @@ -59,10 +59,10 @@ You can skip this if you've run the codemod but in case not or you see some edge We realised that several projects in razorpay are already using `framer-motion` and are on older versions. To give some time to consumers to upgrade to framer-motion v11+, we'll be supporting framer-motion v4+ from blade. Although we will be dropping this support in next major version of blade so we recommend planning out framer-motion upgrade in coming quarter. -- **If you're on React 18**, migrating to framer-motion v11 should be fairly simple and low-effort. Checkout [Migrating from framer-motion v4+ to motion/react v11+](#migrating-from-framer-motion-v4-to-motionreact-aka-framer-motion-v11) +- **If you're on React 18**, migrating to framer-motion v11 should be fairly simple and low-effort. Checkout [Migrating from framer-motion v4+ to framer-motion v11+](#migrating-from-framer-motion-v4-to-motionreact-aka-framer-motion-v11) - **For projects not on React 18 yet**, do plan out the upgrade soon to make sure future blade upgrades don't become blocker -#### Migrating from `framer-motion` v4+ to `motion/react` (aka `framer-motion` v11) +#### Migrating from `framer-motion` v4+ to `framer-motion` v11+ 1. Ensure you're on React 18 as `framer-motion` v7 makes React 18 a minimum supported version. a. [Checkout React 18 upgrade guide](https://react.dev/blog/2022/03/08/react-18-upgrade-guide) or use [React's official codemod for upgrading](https://github.com/reactjs/react-codemod) @@ -75,19 +75,19 @@ These are mostly the changes you'll need if you're using core API. But if you're ### Setting Up Motion in New Projects -- #### Install `motion` +- #### Install `framer-motion` ```sh - yarn add motion --dev # or pnpm install motion --save-dev + yarn add framer-motion@^11 --dev # or pnpm install framer-motion --save-dev ``` -- #### Setup reduced bundle version of `motion/react +- #### Setup reduced bundle version of `framer-motion` ##### If you're only using basic presets like `Fade`, `Move`, `Slide`, `Stagger`, `AnimateInteractions`, etc ```ts // features.js - import { domAnimation } from 'motion/react'; + import { domAnimation } from 'framer-motion'; export default domAnimation; // ~15kb ``` @@ -95,15 +95,14 @@ These are mostly the changes you'll need if you're using core API. But if you're ```ts // features.js - import { domMax } from 'motion/react'; + import { domMax } from 'framer-motion'; export default domMax; // ~25kb (This includes domAnimation bundle as well so no need to import domAnimation again) ``` ##### Lazy load into your App.js ```tsx - import { LazyMotion } from 'motion/react'; - import { m } from 'motion'; + import { LazyMotion, m } from 'framer-motion'; // Make sure to return the specific export containing the feature bundle. const loadFeatures = () => import('./features.js').then((res) => res.default); diff --git a/packages/blade/rollup.config.mjs b/packages/blade/rollup.config.mjs index 4685bde90b5..f78f85ef85d 100644 --- a/packages/blade/rollup.config.mjs +++ b/packages/blade/rollup.config.mjs @@ -52,10 +52,7 @@ const packageJsonDeps = Object.keys(packagejson.dependencies).filter( (name) => name !== 'patch-package', ); -// `framer-motion` was renamed to `motion`. To support the older versions of framer-motion, we have kept `framer-motion` as peer dependency right now. -// Although we also want to make sure that if someone installs `motion` instead, it should externalize correctly -// We cannot mark `motion` and `framer-motion` both as peer dependencies because `motion` might end up installing different `framer-motion` version internally which can end up clashing (TLDR: I tried and it didn't work) -const externalDependencies = [...packageJsonDeps, 'motion/react']; +const externalDependencies = packageJsonDeps; const inputRootDirectory = 'src'; const outputRootDirectory = 'build'; diff --git a/packages/blade/src/components/BaseMotion/docs/MotionInstallation.mdx b/packages/blade/src/components/BaseMotion/docs/MotionInstallation.mdx index fff9a3210bc..287cfb2c992 100644 --- a/packages/blade/src/components/BaseMotion/docs/MotionInstallation.mdx +++ b/packages/blade/src/components/BaseMotion/docs/MotionInstallation.mdx @@ -6,7 +6,7 @@ This setup is taken from [Motion React - Reduce Bundle Size Docs](https://motion ```ts // features.js -import { domAnimation } from 'motion/react'; +import { domAnimation } from 'framer-motion'; export default domAnimation; // ~15kb ``` @@ -14,15 +14,14 @@ export default domAnimation; // ~15kb ```ts // features.js -import { domMax } from 'motion/react'; +import { domMax } from 'framer-motion'; export default domMax; // ~25kb (This includes domAnimation bundle as well so no need to import domAnimation again) ``` ### 2. Lazy load into your App.js ```tsx -import { LazyMotion } from 'motion/react'; -import { m } from 'motion'; +import { LazyMotion, m } from 'framer-motion'; // Make sure to return the specific export containing the feature bundle. const loadFeatures = () => import('./features.js').then((res) => res.default); diff --git a/packages/blade/src/utils/storybook/Sandbox/baseCode.ts b/packages/blade/src/utils/storybook/Sandbox/baseCode.ts index 4f8b267da24..6350b5c8679 100644 --- a/packages/blade/src/utils/storybook/Sandbox/baseCode.ts +++ b/packages/blade/src/utils/storybook/Sandbox/baseCode.ts @@ -59,7 +59,7 @@ export const getReactScriptsJSDependencies = (): Dependencies => { react: '^18', 'react-dom': '^18', 'react-scripts': '4.0.3', - motion: '11.12.0', + 'framer-motion': '11.13.3', '@razorpay/blade': getBladeVersion(), 'styled-components': packageJson.peerDependencies['styled-components'], '@razorpay/i18nify-js': packageJson.peerDependencies['@razorpay/i18nify-js'], @@ -74,7 +74,7 @@ export const getViteReactTSDependencies = (): Dependencies => { react: '^19', 'react-dom': '^19', 'react-router-dom': '^6', - motion: '11.12.0', + 'framer-motion': '11.13.3', 'react-scripts': '4.0.3', '@types/react': '^19', '@types/react-dom': '^19', @@ -107,7 +107,7 @@ export const vitePackageJSON = JSON.stringify( ); export const featuresJS = dedent`// features.js -import { domMax } from 'motion/react'; +import { domMax } from 'framer-motion'; // ~25kb (Only expose domAnimations instead of domMax if you're not using Morph preset or layout animations in your project) export default domMax; `; @@ -262,7 +262,7 @@ export const getIndexTSX = ({ import React from 'react'; import { createRoot } from "react-dom/client"; import { createGlobalStyle } from "styled-components"; -import { LazyMotion } from 'motion/react'; +import { LazyMotion } from 'framer-motion'; const loadFeatures = () => import('./features.js').then((res) => res.default);