@graphcommerce/framer-next-pages 2.108.11 → 2.109.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.109.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/framer-next-pages@2.108.11...@graphcommerce/framer-next-pages@2.109.0) (2022-01-03)
+
+
+### Features
+
+* **framer-next-pages:** reduce rerenders when navigating to a new page ([5cf3301](https://github.com/ho-nl/m2-pwa/commit/5cf330130bb3527057da015e3c4a6fa295d7262e))
+
+
+
+
+
 ## [2.108.10](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/framer-next-pages@2.108.9...@graphcommerce/framer-next-pages@2.108.10) (2021-12-23)
 
 

package/README.md

@@ -156,23 +156,9 @@ We have multiple hooks available to animate based on certain states, etc.
 ```tsx
 export default function MyComponent() {
   const { level, depth, direction } = usePageContext()
-  const pageRouter = usePageRouter()
 }
 ```
 
-### usePageRouter
-
-The pageRouter maintains state for the old page.
-
-E.g.:
-
-- `/my-regular-page`:
-  - `useRouter().asPath === '/overlay'`
-  - `usePageRouter().asPath === '/my-regular-page'` We maintain the state here!
-- `/overlay`:
-  - `useRouter().asPath === '/overlay'`
-  - `usePageRouter().asPath === '/overlay'`
-
 ### usePageContext().level
 
 If we have multiple pages layered on top of each other we get the level the page
@@ -226,7 +212,7 @@ count that shows us if we can go back
 ```tsx
 function MyComponent {
   const { backSteps } = usePageContext();
-  const router = usePageRouter();
+  const router = useRouter();
   return <button onClick={backSteps > 0 && () => router.back()}>back</button>
 }
 ```
@@ -239,8 +225,8 @@ close the overlay. So we give the times it needs to go back.
 ```tsx
 function MyComponent {
   const { closeSteps } = usePageContext();
-  const router = usePageRouter();
-  return <button onClick={closeSteps > 0 && () => router.go(closeSteps * -1)}>close</button>
+  const go = useGo();
+  return <button onClick={closeSteps > 0 && () => go(closeSteps * -1)}>close</button>
 }
 ```
 

package/components/PageRenderer.tsx

@@ -0,0 +1,52 @@
+import { RouterContext } from 'next/dist/shared/lib/router-context'
+import { AppPropsType } from 'next/dist/shared/lib/utils'
+import { NextRouter, useRouter } from 'next/router'
+import React, { useMemo } from 'react'
+import { pageRouterContext } from '../context/pageRouterContext'
+import { PageItem } from '../types'
+
+// eslint-disable-next-line react/jsx-no-useless-fragment
+const NoLayout: React.FC = ({ children }) => <>{children}</>
+
+export type PageRendererProps = Omit<AppPropsType, 'router'> & {
+  Layout: React.ComponentType<AppPropsType>
+  layoutProps: AppPropsType
+}
+
+const PageRendererLayout = React.memo((props: PageItem) => {
+  const { PageComponent, layoutProps, pageProps, routerContext } = props
+
+  const Layout = PageComponent.pageOptions?.Layout ?? NoLayout
+
+  return (
+    <pageRouterContext.Provider value={routerContext}>
+      <Layout {...layoutProps}>
+        <PageComponent {...pageProps} />
+      </Layout>
+    </pageRouterContext.Provider>
+  )
+})
+
+export function PageRenderer(props: PageItem) {
+  const { routerContext } = props
+  const router = useRouter()
+
+  const { asPath, pathname, locale, query } = routerContext.pageInfo
+
+  const pageRouter = useMemo(() => {
+    const overrideProps = { asPath, pathname, locale, query }
+    return new Proxy<NextRouter>(router, {
+      get: (target, prop: string, receiver) =>
+        overrideProps[prop] ?? Reflect.get(target, prop, receiver),
+    })
+
+    // We don't want to re-render when the router changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [asPath, locale, pathname, query])
+
+  return (
+    <RouterContext.Provider value={pageRouter}>
+      <PageRendererLayout {...props} />
+    </RouterContext.Provider>
+  )
+}

package/components/Pages.tsx

@@ -1,27 +1,42 @@
 import { AnimatePresence } from 'framer-motion'
 import { requestIdleCallback, cancelIdleCallback } from 'next/dist/client/request-idle-callback'
 import { AppPropsType } from 'next/dist/shared/lib/utils'
-import type { NextRouter, Router } from 'next/router'
+import { NextRouter, Router, useRouter } from 'next/router'
 import React, { useEffect, useRef, useState } from 'react'
+import {} from 'react-dom'
 import { pageContext } from '../context/pageContext'
-import { createRouterProxy, pageRouterContext } from '../context/pageRouterContext'
 import type { PageComponent, PageItem, UpPage } from '../types'
 import Page from './Page'
+import { PageRenderer } from './PageRenderer'
 
 function findPlainIdx(items: PageItem[]) {
   return items.reduce((acc, item, i) => (typeof item.overlayGroup === 'string' ? acc : i), -1)
 }
 
-type PagesProps = Omit<AppPropsType<NextRouter>, 'pageProps'> & {
+type PagesProps = Omit<AppPropsType<NextRouter>, 'pageProps' | 'Component'> & {
   Component: PageComponent
-  pageProps?: { up?: UpPage }
+  pageProps?: { up?: UpPage | null }
 }
 
-// eslint-disable-next-line react/jsx-no-useless-fragment
-const NoopLayout: React.FC = ({ children }) => <>{children}</>
+function getPageInfo(router: NextRouter) {
+  const { asPath, pathname, query, locale } = router
+  return { asPath, pathname, query, locale }
+}
+
+// function useEarlyRerender() {
+//   const router = useRouter()
+//   const [url, set] = useState<string>()
+
+//   useEffect(() => {
+//     router.events.on('routeChangeStart', set)
+//     return () => router.events.off('routeChangeStart', set)
+//   }, [router.events])
+
+//   return url
+// }
 
 export default function FramerNextPages(props: PagesProps) {
-  const { router, Component, pageProps } = props
+  const { router, Component, pageProps: incomingProps } = props
 
   const items = useRef<PageItem[]>([])
   const idx = Number(global.window?.history.state?.idx ?? 0)
@@ -35,22 +50,31 @@ export default function FramerNextPages(props: PagesProps) {
 
   let activeItem: PageItem = items.current[idx]
 
-  const mustRerender = () =>
-    JSON.stringify(pageProps) !== JSON.stringify(items.current[idx]?.actualPageProps)
+  const currentItem = items.current[idx]
+
+  const mustRerender = () => {
+    const differentRouter =
+      JSON.stringify(currentItem?.routerContext.pageInfo) !== JSON.stringify(getPageInfo(router))
+    const differentProps = JSON.stringify(incomingProps) !== JSON.stringify(currentItem?.pageProps)
+    return differentRouter || differentProps
+  }
 
   if (!activeItem || mustRerender()) {
-    const proxy = createRouterProxy(router)
+    const pageInfo = getPageInfo(router)
 
     activeItem = {
-      children: <Component {...(pageProps as Record<string, unknown>)} />,
-      currentRouter: proxy,
-      Layout: Component.pageOptions?.Layout,
-      layoutProps: Component.pageOptions?.layoutProps,
-      actualPageProps: pageProps,
-      sharedKey: Component.pageOptions?.sharedKey?.(proxy) ?? proxy.pathname,
+      PageComponent: Component,
+      layoutProps: { ...Component.pageOptions?.layoutProps, ...incomingProps },
+      pageProps: incomingProps,
+      sharedKey: Component.pageOptions?.sharedKey?.(pageInfo) ?? pageInfo.pathname,
       overlayGroup: Component.pageOptions?.overlayGroup,
       historyIdx: idx,
-      up: Component.pageOptions?.up ?? pageProps?.up,
+      routerContext: {
+        pageInfo,
+        prevPage: items.current[idx - 1]?.routerContext,
+        prevUp: items.current[idx - 1]?.routerContext.up,
+        up: Component.pageOptions?.up ?? incomingProps?.up ?? undefined,
+      },
     }
     items.current[idx] = activeItem
   }
@@ -68,21 +92,24 @@ export default function FramerNextPages(props: PagesProps) {
     let cancel: number
     async function loadFallback() {
       try {
-        const info = await (router as Router).getRouteInfo('/', '/', {}, '/', '/', {
-          shallow: false,
-        })
-        const proxy = createRouterProxy(router, { asPath: '/', pathname: '/', query: {} })
+        // todo: implement fallback loading for up property
+        // const up = items.current[0].PageComponent.pageOptions?.up?.href ?? '/'
+        const up = '/'
+        const info = await (router as Router).getRouteInfo(up, up, {}, up, up, { shallow: false })
+
+        const pageInfo = { asPath: up, pathname: up, locale: router.locale, query: {} }
         const Fallback = info.Component as PageComponent
         const fbItem: PageItem = {
-          children: <Fallback {...(info.props?.pageProps as Record<string, unknown>)} />,
-          currentRouter: proxy,
-          Layout: Fallback.pageOptions?.Layout,
-          layoutProps: Fallback.pageOptions?.layoutProps,
-          actualPageProps: info.props?.pageProps,
-          sharedKey: Fallback.pageOptions?.sharedKey?.(proxy) ?? proxy.pathname,
+          PageComponent: Fallback,
+          layoutProps: { ...Fallback.pageOptions?.layoutProps, ...info.props?.pageProps },
+          pageProps: info.props?.pageProps,
+          sharedKey: Fallback.pageOptions?.sharedKey?.(pageInfo) ?? pageInfo.pathname,
           overlayGroup: Fallback.pageOptions?.overlayGroup,
           historyIdx: -1,
-          up: Fallback.pageOptions?.up ?? info.props?.pageProps?.up,
+          routerContext: {
+            pageInfo,
+            up: Fallback.pageOptions?.up ?? info.props?.pageProps?.up,
+          },
         }
 
         cancel = requestIdleCallback(() => setFallback(fbItem))
@@ -118,57 +145,33 @@ export default function FramerNextPages(props: PagesProps) {
       if (!item || seen.has(item.sharedKey)) return false
       seen.add(item.sharedKey)
 
-      if (
+      return !(
         typeof activeItem.overlayGroup === 'string' &&
         typeof item.overlayGroup === 'string' &&
         activeItem.overlayGroup !== item.overlayGroup
-      ) {
-        return false
-      }
-      return true
+      )
     })
     .reverse()
 
   return (
     <AnimatePresence initial={false}>
       {renderItems.map((item, itemIdx) => {
-        const {
-          children,
-          historyIdx,
-          sharedKey,
-          Layout = NoopLayout,
-          layoutProps,
-          actualPageProps,
-          currentRouter,
-          overlayGroup,
-          up,
-        } = item
+        const { historyIdx, sharedKey, overlayGroup } = item
         const active = itemIdx === renderItems.length - 1
         const depth = itemIdx - (renderItems.length - 1)
-
         const closeIdx = renderItems[itemIdx - 1]?.historyIdx ?? -1
         const closeSteps = closeIdx > -1 ? historyIdx - closeIdx : 0
-
         const backSteps = historyIdx - closeIdx - 1
 
-        const { currentRouter: prevRouter, up: prevUp } = items.current[historyIdx - 1] ?? {}
-
         return (
           <pageContext.Provider
             key={sharedKey}
-            // Since we very carefully prevent rerenders of this component we can safely ignore the eslint error
+            // We're actually rerendering here but since the actual page renderer is memoized we can safely do this
             // eslint-disable-next-line react/jsx-no-constructed-context-values
             value={{ depth, active, direction, closeSteps, backSteps, historyIdx, overlayGroup }}
           >
             <Page active={active} historyIdx={historyIdx}>
-              <pageRouterContext.Provider
-                // eslint-disable-next-line react/jsx-no-constructed-context-values
-                value={{ currentRouter, prevRouter, up, prevUp }}
-              >
-                <Layout {...actualPageProps} {...layoutProps}>
-                  {children}
-                </Layout>
-              </pageRouterContext.Provider>
+              <PageRenderer {...item} />
             </Page>
           </pageContext.Provider>
         )

package/context/pageRouterContext.ts

@@ -1,39 +1,5 @@
-import { NextRouter } from 'next/router'
 import { createContext } from 'react'
-import { PageRouterContext, RouterProxy } from '../types'
+import { PageContext } from '../types'
 
-export const pageRouterContext = createContext(undefined as unknown as PageRouterContext)
+export const pageRouterContext = createContext(undefined as unknown as PageContext)
 pageRouterContext.displayName = 'PageRouterContext'
-
-type OverrideProps = Partial<Pick<NextRouter, 'asPath' | 'pathname' | 'query' | 'locale'>>
-
-export function createRouterProxy(router: NextRouter, override?: OverrideProps): RouterProxy {
-  function go(delta: number) {
-    if (delta >= 0) {
-      console.error(`Called .go(${delta}), only negative numbers are allowed. Redirecting to home`)
-      // eslint-disable-next-line @typescript-eslint/no-floating-promises
-      router.push('/', '/')
-      return
-    }
-
-    const deltaAbs = Math.abs(delta)
-    for (let i = 0; i < deltaAbs; i++) {
-      router.back()
-    }
-  }
-
-  // We create an object with the current stale properties
-  const overrideProps = {
-    asPath: router.asPath,
-    pathname: router.pathname,
-    query: router.query,
-    locale: router.locale,
-    go,
-    ...override,
-  }
-
-  return new Proxy<RouterProxy>(router as RouterProxy, {
-    get: (target, prop: string, receiver) =>
-      overrideProps[prop] ?? Reflect.get(target, prop, receiver),
-  })
-}

package/hooks/useGo.ts

@@ -0,0 +1,16 @@
+import { useRouter } from 'next/router'
+
+export function useGo(delta: number) {
+  const { push, back } = useRouter()
+  return () => {
+    if (delta >= 0) {
+      // console.error(`Called .go(${delta}), only negative numbers are allowed. Redirecting to home`)
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      // push('/', '/')
+      return
+    }
+
+    const deltaAbs = Math.abs(delta)
+    for (let i = 0; i < deltaAbs; i++) back()
+  }
+}

package/hooks/useHistoryLink.ts

@@ -1,4 +1,4 @@
-import { usePageRouter } from './usePageRouter'
+import { useRouter } from 'next/router'
 import { usePrevPageRouter } from './usePrevPageRouter'
 
 export type UseHistoryLink = { href: string }
@@ -8,12 +8,13 @@ type ClickEvent = { preventDefault: () => void }
 export function useHistoryLink(options: UseHistoryLink) {
   const { href } = options
   const prevRouter = usePrevPageRouter()
+  const router = useRouter()
 
   const onClick =
     href === prevRouter?.asPath
       ? (e: ClickEvent) => {
           e.preventDefault()
-          prevRouter.back()
+          router.back()
         }
       : undefined
 
@@ -22,7 +23,7 @@ export function useHistoryLink(options: UseHistoryLink) {
 
 export function useHistoryGo(options: UseHistoryLink) {
   const { onClick, href } = useHistoryLink(options)
-  const router = usePageRouter()
+  const router = useRouter()
 
   return () => {
     if (onClick) onClick({ preventDefault: () => {} })

package/hooks/usePageRouter.ts

@@ -1,24 +1,6 @@
-import { useContext } from 'react'
-import { pageRouterContext } from '../context/pageRouterContext'
-import { RouterProxy } from '../types'
+import { useRouter } from 'next/router'
 
-/**
- * The pageRouter maintains state for the old page.
- *
- * E.g.:
- *
- * `/my-regular-page`:
- *
- * - `useRouter().asPath === '/overlay'`
- * - `usePageRouter().asPath === '/my-regular-page'` We maintain the state
- *
- * `/overlay`:
- *
- * - `useRouter().asPath === '/overlay'`
- * - `usePageRouter().asPath === '/overlay'`
- *
- * Adds an additional method: usePageRouter().go(-1)
- */
-export function usePageRouter(): RouterProxy {
-  return useContext(pageRouterContext).currentRouter
+export const usePageRouter = () => {
+  console.warn('usePageRouter does nothing, use next/router useRouter instead')
+  return useRouter()
 }

package/hooks/usePrevPageRouter.ts

@@ -1,8 +1,7 @@
 import { useContext } from 'react'
 import { pageRouterContext } from '../context/pageRouterContext'
-import { RouterProxy } from '../types'
 
-/** Same as usePageRouter but gives back the router of the previous page. */
-export function usePrevPageRouter(): RouterProxy | undefined {
-  return useContext(pageRouterContext).prevRouter
+/** Same as useRouter but gives back the router of the previous page. */
+export function usePrevPageRouter() {
+  return useContext(pageRouterContext).prevPage?.pageInfo
 }

package/index.ts

@@ -4,6 +4,7 @@ export * from './context/pageContext'
 export * from './context/pageRouterContext'
 export type { PageOptions, PageComponent } from './types'
 
+export * from './hooks/useGo'
 export * from './hooks/usePageContext'
 export * from './hooks/usePageRouter'
 export * from './hooks/useHistoryLink'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/framer-next-pages",
-  "version": "2.108.11",
+  "version": "2.109.0",
   "sideEffects": false,
   "scripts": {
     "dev": "tsc -W"
@@ -16,11 +16,11 @@
     }
   },
   "dependencies": {
-    "@graphcommerce/framer-utils": "^2.103.20"
+    "@graphcommerce/framer-utils": "^2.103.21"
   },
   "devDependencies": {
     "@graphcommerce/browserslist-config-pwa": "^3.0.3",
-    "@graphcommerce/eslint-config-pwa": "^3.1.9",
+    "@graphcommerce/eslint-config-pwa": "^3.1.10",
     "@graphcommerce/prettier-config-pwa": "^3.0.5",
     "@graphcommerce/typescript-config-pwa": "^3.1.2",
     "@playwright/test": "^1.17.1"
@@ -31,5 +31,5 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
-  "gitHead": "a9174584cfeb04807a72b6c609175c24e24ac818"
+  "gitHead": "bc5423d7547f8685db4cd8fc6d8f7a2a51ebed05"
 }

package/types.ts

@@ -2,11 +2,11 @@ import { NextComponentType, NextPageContext } from 'next'
 import { NextRouter } from 'next/router'
 import React from 'react'
 
-export type RouterProxy = NextRouter & { go(delta: number): void; prevUpUrl: string }
+type PageInfo = Pick<NextRouter, 'asPath' | 'query' | 'locale' | 'pathname'>
 
-export type PageRouterContext = {
-  currentRouter: RouterProxy
-  prevRouter?: RouterProxy
+export type PageContext = {
+  pageInfo: PageInfo
+  prevPage?: PageContext
   up?: UpPage
   prevUp?: UpPage
 }
@@ -111,7 +111,7 @@ export type PageOptions<T extends Record<string, unknown> = Record<string, unkno
    * }
    * ```
    */
-  sharedKey?: (router: NextRouter) => string | undefined
+  sharedKey?: (pageInfo: PageInfo) => string | undefined
 
   /**
    * Create a Layout to share a wrapping component between multiple routes.
@@ -124,7 +124,7 @@ export type PageOptions<T extends Record<string, unknown> = Record<string, unkno
   /** Pass props to the SharedComponent */
   layoutProps?: Partial<Omit<T, 'children'>>
 
-  up?: UpPage
+  up?: UpPage | null
 }
 
 export type PageComponent<T = Record<string, unknown>> = NextComponentType<NextPageContext, T> & {
@@ -140,10 +140,10 @@ export type UpPage = { href: string; title: string }
  * @private
  */
 export type PageItem = {
-  currentRouter: RouterProxy
-  children: React.ReactNode
+  routerOverride?: Partial<NextRouter>
+  PageComponent: PageComponent
   historyIdx: number
   sharedKey: string
-  actualPageProps?: Record<string, unknown>
-  up?: UpPage
-} & Omit<PageOptions<Record<string, unknown>>, 'sharedKey'>
+  pageProps?: Record<string, unknown>
+  routerContext: PageContext
+} & Omit<PageOptions<Record<string, unknown>>, 'sharedKey' | 'up'>

package/utils/createRouterProxy.ts

@@ -0,0 +1,15 @@
+import { NextRouter } from 'next/router'
+
+export type OverrideProps = Partial<Pick<NextRouter, 'asPath' | 'pathname' | 'query' | 'locale'>>
+
+export function createRouterProxy(router: NextRouter, override?: OverrideProps): NextRouter {
+  // We create an object with the current stale properties
+  const { asPath, pathname, query, locale } = router
+
+  const overrideProps: OverrideProps = { asPath, pathname, query, locale, ...override }
+
+  return new Proxy<NextRouter>(router, {
+    get: (target, prop: string, receiver) =>
+      overrideProps[prop] ?? Reflect.get(target, prop, receiver),
+  })
+}