@graphcommerce/framer-next-pages 3.0.1 → 3.1.1

package/CHANGELOG.md

@@ -1,5 +1,70 @@
 # Change Log
 
+## 3.1.1
+
+### Patch Changes
+
+- [#1294](https://github.com/ho-nl/m2-pwa/pull/1294)
+  [`afb993244`](https://github.com/ho-nl/m2-pwa/commit/afb993244aabc8135ce54a79743cbf63bc5677d3)
+  Thanks [@paales](https://github.com/paales)! - Make sure the fallback handles localization
+  properly
+
+## 3.1.0
+
+### Minor Changes
+
+- [#1281](https://github.com/ho-nl/m2-pwa/pull/1281)
+  [`4bb963d75`](https://github.com/ho-nl/m2-pwa/commit/4bb963d7595b5ce6e3a4924cc2e3e8b0210cdcd6)
+  Thanks [@paales](https://github.com/paales)! - Add an option the FramerNextPages component to
+  define a fallback and fallbackRoute.
+
+### Patch Changes
+
+- [`973ff8645`](https://github.com/ho-nl/m2-pwa/commit/973ff86452a70ade9f4db13fdda6e963d7220e96)
+  Thanks [@paales](https://github.com/paales)! - made packages public
+
+- Updated dependencies
+  [[`973ff8645`](https://github.com/ho-nl/m2-pwa/commit/973ff86452a70ade9f4db13fdda6e963d7220e96)]:
+  - @graphcommerce/framer-utils@3.0.3
+
+## 3.0.2
+
+### Patch Changes
+
+- [#1274](https://github.com/ho-nl/m2-pwa/pull/1274)
+  [`381e4c86a`](https://github.com/ho-nl/m2-pwa/commit/381e4c86a8321ce96e1fa5c7d3c0a0c0ff3e02c7)
+  Thanks [@paales](https://github.com/paales)! - Moved `ApolloErrorAlert`, `ApolloErrorFullPage` and
+  `ApolloErrorSnackbar` to the ecommerce-ui package.
+
+  Created `ComposedSubmitButton` and `ComposedSubmitLinkOrButton` to reduce complexity from
+  `magento-graphcms` example.
+
+  Removed dependency an `@graphcommerce/react-hook-form` from `magento-graphcms` example.
+
+  Added dependency `@graphcommerce/ecommerce-ui` from `magento-graphcms` example.
+
+* [#1276](https://github.com/ho-nl/m2-pwa/pull/1276)
+  [`ce09388e0`](https://github.com/ho-nl/m2-pwa/commit/ce09388e0d7ef33aee660612340f6fbae15ceec2)
+  Thanks [@paales](https://github.com/paales)! - We've moved lots of internal packages from
+  `dependencies` to `peerDependencies`. The result of this is that there will be significantly less
+  duplicate packages in the node_modules folders.
+
+- [#1276](https://github.com/ho-nl/m2-pwa/pull/1276)
+  [`52a45bba4`](https://github.com/ho-nl/m2-pwa/commit/52a45bba4dc6dd6df3c81f5023df7d23ed8a534d)
+  Thanks [@paales](https://github.com/paales)! - Upgraded to
+  [NextJS 12.1](https://nextjs.org/blog/next-12-1)! This is just for compatibility, but we'll be
+  implementing
+  [On-demand Incremental Static Regeneration](https://nextjs.org/blog/next-12-1#on-demand-incremental-static-regeneration-beta)
+  soon.
+
+  This will greatly reduce the requirement to rebuid stuff and we'll add a management UI on the
+  frontend to be able to revalidate pages manually.
+
+- Updated dependencies
+  [[`ce09388e0`](https://github.com/ho-nl/m2-pwa/commit/ce09388e0d7ef33aee660612340f6fbae15ceec2),
+  [`52a45bba4`](https://github.com/ho-nl/m2-pwa/commit/52a45bba4dc6dd6df3c81f5023df7d23ed8a534d)]:
+  - @graphcommerce/framer-utils@3.0.2
+
 ## 3.0.1
 
 ### Patch Changes

package/components/Pages.tsx

@@ -15,6 +15,12 @@ function findPlainIdx(items: PageItem[]) {
 type PagesProps = Omit<AppPropsType<NextRouter>, 'pageProps' | 'Component'> & {
   Component: PageComponent
   pageProps?: { up?: UpPage | null }
+
+  /** Fallback URL that is loaded when there is no page available behind the current overlay */
+  fallback?: `/${string}`
+
+  /** The path to the route-file */
+  fallbackRoute?: `/${string}`
 }
 
 function getPageInfo(router: NextRouter) {
@@ -35,7 +41,7 @@ function getPageInfo(router: NextRouter) {
 // }
 
 export default function FramerNextPages(props: PagesProps) {
-  const { router, Component, pageProps: incomingProps } = props
+  const { router, Component, pageProps: incomingProps, fallback = '/', fallbackRoute = '/' } = props
 
   const items = useRef<PageItem[]>([])
   const idx = Number(global.window?.history.state?.idx ?? 0)
@@ -94,7 +100,16 @@ export default function FramerNextPages(props: PagesProps) {
         // 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 info = await (router as Router).getRouteInfo(
+          fallbackRoute,
+          fallback,
+          {},
+          fallback,
+          fallback,
+          { shallow: false },
+          router.locale,
+          false,
+        )
 
         const pageInfo = { asPath: up, pathname: up, locale: router.locale, query: {} }
         const Fallback = info.Component as PageComponent
@@ -113,7 +128,22 @@ export default function FramerNextPages(props: PagesProps) {
 
         cancel = requestIdleCallback(() => setFallback(fbItem))
       } catch (e) {
-        // Loading failed, we do nothing.
+        if (process.env.NODE_ENV !== 'production') {
+          console.log(
+            `%cTurn on "Preseve log on navigation" to see the error`,
+            'color: blue; font-family:sans-serif; font-size: 20px',
+          )
+
+          console.error(
+            `@graphcommerce/framer-next-pages encountered loading the fallback.
+This happens because the currently configured fallback '${fallback}'
+or fallbackRoute '${fallbackRoute}' isn't correct.
+
+Please make sure the fallbackRoute matches the filename of the index page you want to load. e.g. '/[...url]'
+and pass it as a param in <FramerNextPages fallbackRoute='/[...url]' /> in your _app.tsx file.
+`,
+          )
+        }
       }
     }
 
@@ -123,7 +153,7 @@ export default function FramerNextPages(props: PagesProps) {
     return () => {
       if (cancel) cancelIdleCallback(cancel)
     }
-  }, [shouldLoadFb, router])
+  }, [shouldLoadFb, router, fallbackRoute, fallback])
 
   // Add the fallback if it is available
   if (fb && plainIdx === -1) renderItems = [fb, ...renderItems]

package/package.json

@@ -2,11 +2,8 @@
   "name": "@graphcommerce/framer-next-pages",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "3.0.1",
+  "version": "3.1.1",
   "sideEffects": false,
-  "scripts": {
-    "dev": "tsc -W"
-  },
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
     "extends": "@graphcommerce/eslint-config-pwa",
@@ -15,17 +12,17 @@
     }
   },
   "dependencies": {
-    "@graphcommerce/framer-utils": "^3.0.1"
+    "@graphcommerce/framer-utils": "^3.0.3"
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^4.0.1",
-    "@graphcommerce/prettier-config-pwa": "^4.0.1",
-    "@graphcommerce/typescript-config-pwa": "^4.0.1",
-    "@playwright/test": "^1.18.1"
+    "@graphcommerce/eslint-config-pwa": "^4.0.3",
+    "@graphcommerce/prettier-config-pwa": "^4.0.2",
+    "@graphcommerce/typescript-config-pwa": "^4.0.2",
+    "@playwright/test": "^1.19.1"
   },
   "peerDependencies": {
     "framer-motion": "^6.2.4",
-    "next": "^12.0.10",
+    "next": "^12.1.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   }