From 261eb630a4f3c1443c05dc4468aaeb5291844857 Mon Sep 17 00:00:00 2001 From: Julian Benegas Date: Mon, 28 Nov 2022 21:04:49 -0300 Subject: [PATCH 1/2] better nextjs support --- packages/page-transition/package.json | 1 + packages/page-transition/src/provider.tsx | 41 +++++++-- yarn.lock | 102 ++++++++++++++++++++++ 3 files changed, 139 insertions(+), 5 deletions(-) diff --git a/packages/page-transition/package.json b/packages/page-transition/package.json index 3cc142a..8cdcc14 100644 --- a/packages/page-transition/package.json +++ b/packages/page-transition/package.json @@ -19,6 +19,7 @@ "devDependencies": { "@types/react": "^18.0.17", "@types/react-dom": "^18.0.6", + "next": "^13.0.5", "react": "^18.2.0", "react-dom": "^18.2.0", "tsconfig": "*", diff --git a/packages/page-transition/src/provider.tsx b/packages/page-transition/src/provider.tsx index 8d8b765..1476942 100644 --- a/packages/page-transition/src/provider.tsx +++ b/packages/page-transition/src/provider.tsx @@ -1,4 +1,5 @@ import * as React from "react"; +import type { NextRouter } from "next/router"; import { clearSavedPageStyles, savePageStyles } from "./save-page-styles"; import { useIsoLayoutEffect } from "./hooks/use-iso-layout-effect"; @@ -101,7 +102,13 @@ const useSetStatus = () => { // This is another component so that it doesn't trigger a re-render in the context provider const TransitionLayout = React.memo( - ({ children }: { children?: React.ReactNode }) => { + ({ + children, + nextRouter, + }: { + children?: React.ReactNode; + nextRouter: NextRouter | null; + }) => { const [displayChildren, setDisplayChildren] = React.useState(children); const { transitionsListRef } = usePageTransition(); const { setStatus } = useSetStatus(); @@ -112,20 +119,40 @@ const TransitionLayout = React.memo( oldPathnameRef.current = window.location.pathname; }, []); + // if nextRouter is present, we make the next.js hack to save the page's styles + // see https://github.com/vercel/next.js/issues/17464 + React.useEffect(() => { + if (!nextRouter) return; + + function handleRouteChangeStart() { + savePageStyles(); + } + + nextRouter.events.on("routeChangeStart", handleRouteChangeStart); + + return () => { + nextRouter.events.off("routeChangeStart", handleRouteChangeStart); + }; + }, [nextRouter]); + + const handleTransitionEnd = React.useCallback(() => { + if (!nextRouter) return; + clearSavedPageStyles(); + }, [nextRouter]); + useIsoLayoutEffect(() => { const newPathname = window.location.pathname; if ( children !== displayChildren && oldPathnameRef.current !== newPathname ) { - savePageStyles(); if (transitionsListRef.current.length === 0) { // there are no outro animations, so immediately transition setDisplayChildren(children); oldPathnameRef.current = newPathname; - clearSavedPageStyles(); setStatus("idle"); + handleTransitionEnd(); } else { setStatus("transitioning"); const transitionsPromise = transitionsListRef.current.map( @@ -143,7 +170,7 @@ const TransitionLayout = React.memo( transitionsListRef.current = resolvedTransitions.filter((t) => t.options?.kill ? false : true ); - clearSavedPageStyles(); + handleTransitionEnd(); }) .then(() => { setStatus("idle"); @@ -158,12 +185,16 @@ const TransitionLayout = React.memo( const PageTransitionProvider = ({ children, + nextRouter, }: { children?: React.ReactNode; + nextRouter?: NextRouter; }) => { return ( - {children} + + {children} + ); }; diff --git a/yarn.lock b/yarn.lock index a3eba05..67bea49 100644 --- a/yarn.lock +++ b/yarn.lock @@ -363,6 +363,11 @@ resolved "https://registry.yarnpkg.com/@next/env/-/env-13.0.3.tgz#f2ecec9a6634aed28dca9e7b79bd65d9c516a1b4" integrity sha512-/4WzeG61Ot/PxsghXkSqQJ6UohFfwXoZ3dtsypmR9EBP+OIax9JRq0trq8Z/LCT9Aq4JbihVkaazRWguORjTAw== +"@next/env@13.0.5": + version "13.0.5" + resolved "https://registry.yarnpkg.com/@next/env/-/env-13.0.5.tgz#f2fafaa42c6693260e00f443853b549509715ad1" + integrity sha512-F3KLtiDrUslAZhTYTh8Zk5ZaavbYwLUn3NYPBnOjAXU8hWm0QVGVzKIOuURQ098ofRU4e9oglf3Sj9pFx5nI5w== + "@next/eslint-plugin-next@12.3.1": version "12.3.1" resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-12.3.1.tgz#b821f27b0f175954d8d18e5d323fce040ecc79a6" @@ -375,66 +380,131 @@ resolved "https://registry.yarnpkg.com/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-13.0.3.tgz#87ce3b7d81ec198f5360f4393e5e03f112758696" integrity sha512-uxfUoj65CdFc1gX2q7GtBX3DhKv9Kn343LMqGNvXyuTpYTGMmIiVY7b9yF8oLWRV0gVKqhZBZifUmoPE8SJU6Q== +"@next/swc-android-arm-eabi@13.0.5": + version "13.0.5" + resolved "https://registry.yarnpkg.com/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-13.0.5.tgz#bb83f8a8bea5d3d813059a28624e9ff3c0c22bac" + integrity sha512-YO691dxHlviy6H0eghgwqn+5kU9J3iQnKERHTDSppqjjGDBl6ab4wz9XfI5AhljjkaTg3TknHoIEWFDoZ4Ve8g== + "@next/swc-android-arm64@13.0.3": version "13.0.3" resolved "https://registry.yarnpkg.com/@next/swc-android-arm64/-/swc-android-arm64-13.0.3.tgz#2029f759cb3e85082da15ced94704a68e390a0e9" integrity sha512-t2k+WDfg7Cq2z/EnalKGsd/9E5F4Hdo1xu+UzZXYDpKUI9zgE6Bz8ajQb8m8txv3qOaWdKuDa5j5ziq9Acd1Xw== +"@next/swc-android-arm64@13.0.5": + version "13.0.5" + resolved "https://registry.yarnpkg.com/@next/swc-android-arm64/-/swc-android-arm64-13.0.5.tgz#6082f7e4a7b07c5e1a1284ef0cb3b741b49f03de" + integrity sha512-ugbwffkUmp8cd2afehDC8LtQeFUxElRUBBngfB5UYSWBx18HW4OgzkPFIY8jUBH16zifvGZWXbICXJWDHrOLtw== + "@next/swc-darwin-arm64@13.0.3": version "13.0.3" resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.0.3.tgz#f5deafd3feccf7c24b81df9a6a06d4d13bec254f" integrity sha512-wV6j6SZ1bc/YHOLCLk9JVqaZTCCey6HBV7inl2DriHsHqIcO6F3+QiYf0KXwRP9BE0GSZZrYd5mZQm2JPTHdJA== +"@next/swc-darwin-arm64@13.0.5": + version "13.0.5" + resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.0.5.tgz#764f85446590b8f2894c9aca0c96e039cd1ca5e0" + integrity sha512-mshlh8QOtOalfZbc17uNAftWgqHTKnrv6QUwBe+mpGz04eqsSUzVz1JGZEdIkmuDxOz00cK2NPoc+VHDXh99IQ== + "@next/swc-darwin-x64@13.0.3": version "13.0.3" resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-13.0.3.tgz#4d4321c02b88fdd052e7a0cc8b3719ac16f8ad4b" integrity sha512-jaI2CMuYWvUtRixV3AIjUhnxUDU1FKOR+8hADMhYt3Yz+pCKuj4RZ0n0nY5qUf3qT1AtvnJXEgyatSFJhSp/wQ== +"@next/swc-darwin-x64@13.0.5": + version "13.0.5" + resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-13.0.5.tgz#f0e4855639279f85f4e0d2bc3d10e5b6c3dff33d" + integrity sha512-SfigOKW4Z2UB3ruUPyvrlDIkcJq1hiw1wvYApWugD+tQsAkYZKEoz+/8emCmeYZ6Gwgi1WHV+z52Oj8u7bEHPg== + "@next/swc-freebsd-x64@13.0.3": version "13.0.3" resolved "https://registry.yarnpkg.com/@next/swc-freebsd-x64/-/swc-freebsd-x64-13.0.3.tgz#f2cbac9dc03172ef94275a6380cdd4d08024fcd4" integrity sha512-nbyT0toBTJrcj5TCB9pVnQpGJ3utGyQj4CWegZs1ulaeUQ5Z7CS/qt8nRyYyOKYHtOdSCJ9Nw5F/RgKNkdpOdw== +"@next/swc-freebsd-x64@13.0.5": + version "13.0.5" + resolved "https://registry.yarnpkg.com/@next/swc-freebsd-x64/-/swc-freebsd-x64-13.0.5.tgz#1ccc56db2fd6c1a8e10d3952b7cc5fb98c1eed71" + integrity sha512-0NJg8HZr4yG8ynmMGFXQf+Mahvq4ZgBmUwSlLXXymgxEQgH17erH/LoR69uITtW+KTsALgk9axEt5AAabM4ucg== + "@next/swc-linux-arm-gnueabihf@13.0.3": version "13.0.3" resolved "https://registry.yarnpkg.com/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-13.0.3.tgz#1b12006a25518ddc6ee9c58852149f82639876cf" integrity sha512-1naLxYvRUQCoFCU1nMkcQueRc0Iux9xBv1L5pzH2ejtIWFg8BrSgyuluJG4nyAhFCx4WG863IEIkAaefOowVdA== +"@next/swc-linux-arm-gnueabihf@13.0.5": + version "13.0.5" + resolved "https://registry.yarnpkg.com/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-13.0.5.tgz#1dd70f03a33d0ea84a5cae03141437ff1e1b5642" + integrity sha512-Cye+h3oDT3NDWjACMlRaolL8fokpKie34FlPj9nfoW7bYKmoMBY1d4IO/GgBF+5xEl7HkH0Ny/qex63vQ0pN+A== + "@next/swc-linux-arm64-gnu@13.0.3": version "13.0.3" resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.0.3.tgz#f44a34fc073b91ad2ab7dd757c063e764e642ddc" integrity sha512-3Z4A8JkuGWpMVbUhUPQInK/SLY+kijTT78Q/NZCrhLlyvwrVxaQALJNlXzxDLraUgv4oVH0Wz/FIw1W9PUUhxA== +"@next/swc-linux-arm64-gnu@13.0.5": + version "13.0.5" + resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.0.5.tgz#053d8379a509d005128763013e7be8b92abb0304" + integrity sha512-5BfDS/VoRDR5QUGG9oedOCEZGmV2zxUVFYLUJVPMSMeIgqkjxWQBiG2BUHZI6/LGk9yvHmjx7BTvtBCLtRg6IQ== + "@next/swc-linux-arm64-musl@13.0.3": version "13.0.3" resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.0.3.tgz#5fd31e1149f151393b98239b5a6a96316459d19a" integrity sha512-MoYe9SM40UaunTjC+01c9OILLH3uSoeri58kDMu3KF/EFEvn1LZ6ODeDj+SLGlAc95wn46hrRJS2BPmDDE+jFQ== +"@next/swc-linux-arm64-musl@13.0.5": + version "13.0.5" + resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.0.5.tgz#4a260c6e2f8003b01668c9f2ecfefc102f307d04" + integrity sha512-xenvqlXz+KxVKAB1YR723gnVNszpsCvKZkiFFaAYqDGJ502YuqU2fwLsaSm/ASRizNcBYeo9HPLTyc3r/9cdMQ== + "@next/swc-linux-x64-gnu@13.0.3": version "13.0.3" resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.0.3.tgz#a9b414123f26912fc830e5a65dd02e1ca56e2ead" integrity sha512-z22T5WGnRanjLMXdF0NaNjSpBlEzzY43t5Ysp3nW1oI6gOkub6WdQNZeHIY7A2JwkgSWZmtjLtf+Fzzz38LHeQ== +"@next/swc-linux-x64-gnu@13.0.5": + version "13.0.5" + resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.0.5.tgz#d886be84865c4b3d720add8b0c1f7e71221972c2" + integrity sha512-9Ahi1bbdXwhrWQmOyoTod23/hhK05da/FzodiNqd6drrMl1y7+RujoEcU8Dtw3H1mGWB+yuTlWo8B4Iba8hqiQ== + "@next/swc-linux-x64-musl@13.0.3": version "13.0.3" resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.0.3.tgz#113f896de5e818ab40e6ec046538203cdd07dab0" integrity sha512-ZOMT7zjBFmkusAtr47k8xs/oTLsNlTH6xvYb+iux7yly2hZGwhfBLzPGBsbeMZukZ96IphJTagT+C033s6LNVA== +"@next/swc-linux-x64-musl@13.0.5": + version "13.0.5" + resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.0.5.tgz#2d4245512761d90f7e5086df6d6042f078b8e395" + integrity sha512-V+1mnh49qmS9fOZxVRbzjhBEz9IUGJ7AQ80JPWAYQM5LI4TxfdiF4APLPvJ52rOmNeTqnVz1bbKtVOso+7EZ4w== + "@next/swc-win32-arm64-msvc@13.0.3": version "13.0.3" resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.0.3.tgz#2ae5abe61f982a10f7742e97ac57f166751734aa" integrity sha512-Q4BM16Djl+Oah9UdGrvjFYgoftYB2jNd+rtRGPX5Mmxo09Ry/KiLbOZnoUyoIxKc1xPyfqMXuaVsAFQLYs0KEQ== +"@next/swc-win32-arm64-msvc@13.0.5": + version "13.0.5" + resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.0.5.tgz#19df9e548b3fe1a2aa8491dd7c01ca950977ac9e" + integrity sha512-wRE9rkp7I+/3Jf2T9PFIJOKq3adMWYEFkPOA7XAkUfYbQHlDJm/U5cVCWUsKByyQq5RThwufI91sgd19MfxRxg== + "@next/swc-win32-ia32-msvc@13.0.3": version "13.0.3" resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.0.3.tgz#1a9c0d36c7dab1620257e85ada702c5acd9875d6" integrity sha512-Sa8yGkNeRUsic8Qjf7MLIAfP0p0+einK/wIqJ8UO1y76j+8rRQu42AMs5H4Ax1fm9GEYq6I8njHtY59TVpTtGQ== +"@next/swc-win32-ia32-msvc@13.0.5": + version "13.0.5" + resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.0.5.tgz#a4de6f9d2556b48869f20b1c0f61c5a88a213319" + integrity sha512-Q1XQSLEhFuFhkKFdJIGt7cYQ4T3u6P5wrtUNreg5M+7P+fjSiC8+X+Vjcw+oebaacsdl0pWZlK+oACGafush1w== + "@next/swc-win32-x64-msvc@13.0.3": version "13.0.3" resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.0.3.tgz#7db0adbea7b4aafdbe2a7745d2c7c048903876ad" integrity sha512-IAptmSqA7k4tQzaw2NAkoEjj3+Dz9ceuvlEHwYh770MMDL4V0ku2m+UHrmn5HUCEDHhgwwjg2nyf6728q2jr1w== +"@next/swc-win32-x64-msvc@13.0.5": + version "13.0.5" + resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.0.5.tgz#f95f882900fe8bf84e049b720f18e851a7187cfe" + integrity sha512-t5gRblrwwiNZP6cT7NkxlgxrFgHWtv9ei5vUraCLgBqzvIsa7X+PnarZUeQCXqz6Jg9JSGGT9j8lvzD97UqeJQ== + "@nodelib/fs.scandir@2.1.5": version "2.1.5" resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5" @@ -557,6 +627,13 @@ dependencies: tslib "^2.4.0" +"@swc/helpers@0.4.14": + version "0.4.14" + resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.4.14.tgz#1352ac6d95e3617ccb7c1498ff019654f1e12a74" + integrity sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw== + dependencies: + tslib "^2.4.0" + "@types/is-ci@^3.0.0": version "3.0.0" resolved "https://registry.yarnpkg.com/@types/is-ci/-/is-ci-3.0.0.tgz#7e8910af6857601315592436f030aaa3ed9783c3" @@ -2706,6 +2783,31 @@ next@^13.0.3: "@next/swc-win32-ia32-msvc" "13.0.3" "@next/swc-win32-x64-msvc" "13.0.3" +next@^13.0.5: + version "13.0.5" + resolved "https://registry.yarnpkg.com/next/-/next-13.0.5.tgz#cddfd6804f84a21721da370e4425980876670173" + integrity sha512-awpc3DkphyKydwCotcBnuKwh6hMqkT5xdiBK4OatJtOZurDPBYLP62jtM2be/4OunpmwIbsS0Eyv+ZGU97ciEg== + dependencies: + "@next/env" "13.0.5" + "@swc/helpers" "0.4.14" + caniuse-lite "^1.0.30001406" + postcss "8.4.14" + styled-jsx "5.1.0" + optionalDependencies: + "@next/swc-android-arm-eabi" "13.0.5" + "@next/swc-android-arm64" "13.0.5" + "@next/swc-darwin-arm64" "13.0.5" + "@next/swc-darwin-x64" "13.0.5" + "@next/swc-freebsd-x64" "13.0.5" + "@next/swc-linux-arm-gnueabihf" "13.0.5" + "@next/swc-linux-arm64-gnu" "13.0.5" + "@next/swc-linux-arm64-musl" "13.0.5" + "@next/swc-linux-x64-gnu" "13.0.5" + "@next/swc-linux-x64-musl" "13.0.5" + "@next/swc-win32-arm64-msvc" "13.0.5" + "@next/swc-win32-ia32-msvc" "13.0.5" + "@next/swc-win32-x64-msvc" "13.0.5" + normalize-package-data@^2.5.0: version "2.5.0" resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8" From d5141b78ffa1480b65122caa5bff9fdda3b78f3e Mon Sep 17 00:00:00 2001 From: Julian Benegas Date: Mon, 28 Nov 2022 21:05:26 -0300 Subject: [PATCH 2/2] Create curvy-otters-pay.md --- .changeset/curvy-otters-pay.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/curvy-otters-pay.md diff --git a/.changeset/curvy-otters-pay.md b/.changeset/curvy-otters-pay.md new file mode 100644 index 0000000..d9f1d1c --- /dev/null +++ b/.changeset/curvy-otters-pay.md @@ -0,0 +1,5 @@ +--- +"@bsmnt/page-transition": patch +--- + +better nextjs support