From cfb1724dac56ca1a489f283d8dee6c36678fc9b1 Mon Sep 17 00:00:00 2001 From: arc-alex Date: Sat, 11 Jan 2025 17:03:15 +0100 Subject: [PATCH 1/2] replace framer-motion with motion --- apps/client/package.json | 2 +- .../features/viewers/backstage/Backstage.tsx | 2 +- .../src/features/viewers/public/Public.tsx | 2 +- .../src/features/viewers/timer/Timer.tsx | 2 +- pnpm-lock.yaml | 68 +++++++++++++------ 5 files changed, 52 insertions(+), 24 deletions(-) diff --git a/apps/client/package.json b/apps/client/package.json index 43e1721c37..9238f217a2 100644 --- a/apps/client/package.json +++ b/apps/client/package.json @@ -19,7 +19,7 @@ "axios": "^1.2.0", "color": "^4.2.3", "csv-stringify": "^6.4.5", - "framer-motion": "^11.15.0", + "motion": "^11.17.0", "react": "^18.3.1", "react-colorful": "^5.6.1", "react-dom": "^18.3.1", diff --git a/apps/client/src/features/viewers/backstage/Backstage.tsx b/apps/client/src/features/viewers/backstage/Backstage.tsx index 5b69fcf352..57136621bc 100644 --- a/apps/client/src/features/viewers/backstage/Backstage.tsx +++ b/apps/client/src/features/viewers/backstage/Backstage.tsx @@ -1,7 +1,7 @@ import { useEffect, useState } from 'react'; import QRCode from 'react-qr-code'; import { useSearchParams } from 'react-router-dom'; -import { AnimatePresence, motion } from 'framer-motion'; +import { AnimatePresence, motion } from 'motion/react'; import { CustomFields, OntimeEvent, ProjectData, Settings, SupportedEvent } from 'ontime-types'; import { millisToString, removeLeadingZero } from 'ontime-utils'; diff --git a/apps/client/src/features/viewers/public/Public.tsx b/apps/client/src/features/viewers/public/Public.tsx index 34ffa3e8ec..f9f38f46e3 100644 --- a/apps/client/src/features/viewers/public/Public.tsx +++ b/apps/client/src/features/viewers/public/Public.tsx @@ -1,6 +1,6 @@ import QRCode from 'react-qr-code'; import { useSearchParams } from 'react-router-dom'; -import { AnimatePresence, motion } from 'framer-motion'; +import { AnimatePresence, motion } from 'motion/react'; import { CustomFields, OntimeEvent, ProjectData, Settings } from 'ontime-types'; import Schedule from '../../../common/components/schedule/Schedule'; diff --git a/apps/client/src/features/viewers/timer/Timer.tsx b/apps/client/src/features/viewers/timer/Timer.tsx index 504d0b545b..eb07b6237b 100644 --- a/apps/client/src/features/viewers/timer/Timer.tsx +++ b/apps/client/src/features/viewers/timer/Timer.tsx @@ -1,5 +1,5 @@ import { useSearchParams } from 'react-router-dom'; -import { AnimatePresence, motion } from 'framer-motion'; +import { AnimatePresence, motion } from 'motion/react'; import { CustomFields, MessageState, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3d91379722..5ce8578660 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -6,6 +6,9 @@ settings: catalogs: default: + '@types/node': + specifier: 20.14.10 + version: 20.14.10 '@typescript-eslint/eslint-plugin': specifier: 7.16.1 version: 7.16.1 @@ -128,9 +131,9 @@ importers: csv-stringify: specifier: ^6.4.5 version: 6.4.5 - framer-motion: - specifier: ^11.15.0 - version: 11.15.0(@emotion/is-prop-valid@1.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + motion: + specifier: ^11.17.0 + version: 11.17.0(@emotion/is-prop-valid@1.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: specifier: ^18.3.1 version: 18.3.1 @@ -266,7 +269,7 @@ importers: version: 31.2.0 electron-builder: specifier: ^24.13.3 - version: 24.13.3(electron-builder-squirrel-windows@24.13.3) + version: 24.13.3(electron-builder-squirrel-windows@24.13.3(dmg-builder@24.13.3)) eslint: specifier: 'catalog:' version: 8.56.0 @@ -3133,8 +3136,8 @@ packages: resolution: {integrity: sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==} engines: {node: '>=0.8'} - framer-motion@11.15.0: - resolution: {integrity: sha512-MLk8IvZntxOMg7lDBLw2qgTHHv664bYoYmnFTmE0Gm/FW67aOJk0WM3ctMcG+Xhcv+vh5uyyXwxvxhSeJzSe+w==} + framer-motion@11.17.0: + resolution: {integrity: sha512-uTNLH9JPMD3ad14WBt3KYRTR+If4tGPLgKTKTIIPaEBMkvazs6EkWNcmCh65qA/tyinOqIbQiuCorXX0qQsNoQ==} peerDependencies: '@emotion/is-prop-valid': '*' react: ^18.0.0 || ^19.0.0 @@ -3863,11 +3866,25 @@ packages: engines: {node: '>=10'} hasBin: true - motion-dom@11.14.3: - resolution: {integrity: sha512-lW+D2wBy5vxLJi6aCP0xyxTxlTfiu+b+zcpVbGVFUxotwThqhdpPRSmX8xztAgtZMPMeU0WGVn/k1w4I+TbPqA==} + motion-dom@11.16.4: + resolution: {integrity: sha512-2wuCie206pCiP2K23uvwJeci4pMFfyQKpWI0Vy6HrCTDzDCer4TsYtT7IVnuGbDeoIV37UuZiUr6SZMHEc1Vww==} - motion-utils@11.14.3: - resolution: {integrity: sha512-Xg+8xnqIJTpr0L/cidfTTBFkvRw26ZtGGuIhA94J9PQ2p4mEa06Xx7QVYZH0BP+EpMSaDlu+q0I0mmvwADPsaQ==} + motion-utils@11.16.0: + resolution: {integrity: sha512-ngdWPjg31rD4WGXFi0eZ00DQQqKKu04QExyv/ymlC+3k+WIgYVFbt6gS5JsFPbJODTF/r8XiE/X+SsoT9c0ocw==} + + motion@11.17.0: + resolution: {integrity: sha512-mWZhIOWH2slNXPUWhr6cEu98bl9NMX7u9r7vdNI+Bm3/jrOEa3e44GmyUuwXr9hWR+rWII27YTnKb6CDD1vU2g==} + peerDependencies: + '@emotion/is-prop-valid': '*' + react: ^18.0.0 || ^19.0.0 + react-dom: ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + '@emotion/is-prop-valid': + optional: true + react: + optional: true + react-dom: + optional: true ms@2.0.0: resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==} @@ -7224,7 +7241,7 @@ snapshots: app-builder-bin@4.0.0: {} - app-builder-lib@24.13.3(dmg-builder@24.13.3)(electron-builder-squirrel-windows@24.13.3): + app-builder-lib@24.13.3(dmg-builder@24.13.3(electron-builder-squirrel-windows@24.13.3))(electron-builder-squirrel-windows@24.13.3(dmg-builder@24.13.3)): dependencies: '@develar/schema-utils': 2.6.5 '@electron/notarize': 2.2.1 @@ -7815,7 +7832,7 @@ snapshots: dmg-builder@24.13.3(electron-builder-squirrel-windows@24.13.3): dependencies: - app-builder-lib: 24.13.3(dmg-builder@24.13.3)(electron-builder-squirrel-windows@24.13.3) + app-builder-lib: 24.13.3(dmg-builder@24.13.3(electron-builder-squirrel-windows@24.13.3))(electron-builder-squirrel-windows@24.13.3(dmg-builder@24.13.3)) builder-util: 24.13.1 builder-util-runtime: 9.2.4 fs-extra: 10.1.0 @@ -7884,7 +7901,7 @@ snapshots: electron-builder-squirrel-windows@24.13.3(dmg-builder@24.13.3): dependencies: - app-builder-lib: 24.13.3(dmg-builder@24.13.3)(electron-builder-squirrel-windows@24.13.3) + app-builder-lib: 24.13.3(dmg-builder@24.13.3(electron-builder-squirrel-windows@24.13.3))(electron-builder-squirrel-windows@24.13.3(dmg-builder@24.13.3)) archiver: 5.3.2 builder-util: 24.13.1 fs-extra: 10.1.0 @@ -7892,9 +7909,9 @@ snapshots: - dmg-builder - supports-color - electron-builder@24.13.3(electron-builder-squirrel-windows@24.13.3): + electron-builder@24.13.3(electron-builder-squirrel-windows@24.13.3(dmg-builder@24.13.3)): dependencies: - app-builder-lib: 24.13.3(dmg-builder@24.13.3)(electron-builder-squirrel-windows@24.13.3) + app-builder-lib: 24.13.3(dmg-builder@24.13.3(electron-builder-squirrel-windows@24.13.3))(electron-builder-squirrel-windows@24.13.3(dmg-builder@24.13.3)) builder-util: 24.13.1 builder-util-runtime: 9.2.4 chalk: 4.1.2 @@ -8441,10 +8458,10 @@ snapshots: frac@1.1.2: {} - framer-motion@11.15.0(@emotion/is-prop-valid@1.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + framer-motion@11.17.0(@emotion/is-prop-valid@1.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: - motion-dom: 11.14.3 - motion-utils: 11.14.3 + motion-dom: 11.16.4 + motion-utils: 11.16.0 tslib: 2.8.1 optionalDependencies: '@emotion/is-prop-valid': 1.3.1 @@ -9245,9 +9262,20 @@ snapshots: mkdirp@1.0.4: {} - motion-dom@11.14.3: {} + motion-dom@11.16.4: + dependencies: + motion-utils: 11.16.0 - motion-utils@11.14.3: {} + motion-utils@11.16.0: {} + + motion@11.17.0(@emotion/is-prop-valid@1.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + dependencies: + framer-motion: 11.17.0(@emotion/is-prop-valid@1.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + tslib: 2.8.1 + optionalDependencies: + '@emotion/is-prop-valid': 1.3.1 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) ms@2.0.0: {} From b6af3d73e4de251155100ceb21255874ff4c5a5f Mon Sep 17 00:00:00 2001 From: arc-alex Date: Sat, 11 Jan 2025 17:15:25 +0100 Subject: [PATCH 2/2] load only needed components --- apps/client/src/App.tsx | 36 ++++++++++--------- .../features/viewers/backstage/Backstage.tsx | 3 +- .../src/features/viewers/public/Public.tsx | 3 +- .../src/features/viewers/timer/Timer.tsx | 3 +- 4 files changed, 25 insertions(+), 20 deletions(-) diff --git a/apps/client/src/App.tsx b/apps/client/src/App.tsx index 431f8b6974..538d339627 100644 --- a/apps/client/src/App.tsx +++ b/apps/client/src/App.tsx @@ -2,6 +2,7 @@ import { BrowserRouter } from 'react-router-dom'; import { ChakraProvider } from '@chakra-ui/react'; import { QueryClientProvider } from '@tanstack/react-query'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; +import { domAnimation, LazyMotion } from 'motion/react'; import ErrorBoundary from './common/components/error-boundary/ErrorBoundary'; import IdentifyOverlay from './common/components/identify-overlay/IdentifyOverlay'; @@ -12,30 +13,31 @@ import system from './theme/theme'; import { TranslationProvider } from './translation/TranslationProvider'; import AppRouter from './AppRouter'; import { baseURI } from './externals'; - connectSocket(); function App() { return ( - - - -
+ + + + +
+ + + + + + + +
- - - - +
- -
- -
- - - - + + + + ); } diff --git a/apps/client/src/features/viewers/backstage/Backstage.tsx b/apps/client/src/features/viewers/backstage/Backstage.tsx index 57136621bc..1ae8add638 100644 --- a/apps/client/src/features/viewers/backstage/Backstage.tsx +++ b/apps/client/src/features/viewers/backstage/Backstage.tsx @@ -1,7 +1,8 @@ import { useEffect, useState } from 'react'; import QRCode from 'react-qr-code'; import { useSearchParams } from 'react-router-dom'; -import { AnimatePresence, motion } from 'motion/react'; +import { AnimatePresence } from 'motion/react'; +import * as motion from 'motion/react-m'; import { CustomFields, OntimeEvent, ProjectData, Settings, SupportedEvent } from 'ontime-types'; import { millisToString, removeLeadingZero } from 'ontime-utils'; diff --git a/apps/client/src/features/viewers/public/Public.tsx b/apps/client/src/features/viewers/public/Public.tsx index f9f38f46e3..02aa386b1e 100644 --- a/apps/client/src/features/viewers/public/Public.tsx +++ b/apps/client/src/features/viewers/public/Public.tsx @@ -1,6 +1,7 @@ import QRCode from 'react-qr-code'; import { useSearchParams } from 'react-router-dom'; -import { AnimatePresence, motion } from 'motion/react'; +import { AnimatePresence } from 'motion/react'; +import * as motion from 'motion/react-m'; import { CustomFields, OntimeEvent, ProjectData, Settings } from 'ontime-types'; import Schedule from '../../../common/components/schedule/Schedule'; diff --git a/apps/client/src/features/viewers/timer/Timer.tsx b/apps/client/src/features/viewers/timer/Timer.tsx index eb07b6237b..209956e173 100644 --- a/apps/client/src/features/viewers/timer/Timer.tsx +++ b/apps/client/src/features/viewers/timer/Timer.tsx @@ -1,5 +1,6 @@ import { useSearchParams } from 'react-router-dom'; -import { AnimatePresence, motion } from 'motion/react'; +import { AnimatePresence } from 'motion/react'; +import * as motion from 'motion/react-m'; import { CustomFields, MessageState,