feat(gatsby-plugin-catch-links): Add ability to exclude links (#15416)

* WIP: Catch-links with option to exlude path

refs #14835

* Fix tests

examples/using-remark/gatsby-config.js

@@ -68,7 +68,13 @@ module.exports = {
     },
     `gatsby-transformer-yaml`,
     `gatsby-plugin-sharp`,
-    `gatsby-plugin-catch-links`,
+    {
+      resolve: `gatsby-plugin-catch-links`,
+      options: {
+        // Links are relative to this directory
+        excludeRegex: /excluded-link/,
+      },
+    },
     `gatsby-plugin-glamor`,
   ],
 }

examples/using-remark/src/pages/2017-03-21---copy-linked-files-intercepting-local-links/index.md

@@ -34,5 +34,7 @@ article using a relative path.
 
 Also, let's link to "[Rendering math equations with KaTeX](https://using-remark.gatsbyjs.org/katex/)" article using an absolute path.
 
+And this [link will be excluded](/excluded-link).
+
 [1]: https://www.gatsbyjs.org/packages/gatsby-remark-copy-linked-files/
 [2]: https://www.gatsbyjs.org/packages/gatsby-plugin-catch-links/

packages/gatsby-plugin-catch-links/README.md

@@ -22,6 +22,21 @@ npm install --save gatsby-plugin-catch-links
 plugins: [`gatsby-plugin-catch-links`]
 ```
 
+## Plugin Options
+
+**`excludeRegex`** [Regular Expression][optional]
+
+Regular expression for paths to be excluded from being handled by this plugin.
+
+```javascript
+{
+  resolve: `gatsby-plugin-catch-links`,
+  options: {
+    excludePattern: /(excluded-link|external)/,
+  },
+},
+```
+
 ## Examples
 
 - Check out this live example [_Using Remark_](https://using-remark.gatsbyjs.org/copy-linked-files-intercepting-local-links/#intercepting-local-links) to see this plugin in action. The full source code for this example can be found here [here](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-remark).

packages/gatsby-plugin-catch-links/src/__tests__/catch-links.js

@@ -264,7 +264,7 @@ describe(`navigation is routed through gatsby if the destination href`, () => {
 
   beforeAll(() => {
     hrefHandler = jest.fn()
-    eventDestroyer = catchLinks.default(window, hrefHandler)
+    eventDestroyer = catchLinks.default(window, {}, hrefHandler)
   })
 
   afterAll(() => {
@@ -364,7 +364,7 @@ describe(`navigation is routed through browser if resources have failed and the
 
   beforeAll(() => {
     hrefHandler = jest.fn()
-    eventDestroyer = catchLinks.default(window, hrefHandler)
+    eventDestroyer = catchLinks.default(window, {}, hrefHandler)
     global.___failedResources = true
   })
 
@@ -408,7 +408,7 @@ describe(`pathPrefix is handled if catched link to ${pathPrefix}/article navigat
 
   beforeAll(() => {
     hrefHandler = jest.fn()
-    eventDestroyer = catchLinks.default(window, hrefHandler)
+    eventDestroyer = catchLinks.default(window, {}, hrefHandler)
   })
 
   afterAll(() => {

packages/gatsby-plugin-catch-links/src/__tests__/gatsby-browser.js

@@ -10,6 +10,10 @@ describe(`gatsby-plugin-catch-links`, () => {
   })
   it(`calls catchLinks in gatsby-browser's onClientEntry API`, () => {
     onClientEntry()
-    expect(mockedCatchLinks).toHaveBeenCalledWith(window, expect.any(Function))
+    expect(mockedCatchLinks).toHaveBeenCalledWith(
+      window,
+      {},
+      expect.any(Function)
+    )
   })
 })

packages/gatsby-plugin-catch-links/src/catch-links.js

@@ -105,7 +105,10 @@ export const hashShouldBeFollowed = (origin, destination) =>
     /* Don't catch links pointed to the same page but with a hash. */
     destination.pathname === origin.pathname)
 
-export const routeThroughBrowserOrApp = hrefHandler => event => {
+export const routeThroughBrowserOrApp = (
+  hrefHandler,
+  pluginOptions
+) => event => {
   if (window.___failedResources) return true
 
   if (userIsForcingNavigation(event)) return true
@@ -143,6 +146,16 @@ export const routeThroughBrowserOrApp = hrefHandler => event => {
 
   if (hashShouldBeFollowed(origin, destination)) return true
 
+  if (pluginOptions.excludeRegex) {
+    console.log(
+      `pluginOptions.excludeRegex.test(destination.pathname)`,
+      pluginOptions.excludeRegex.test(destination.pathname)
+    )
+    if (pluginOptions.excludeRegex.test(destination.pathname)) {
+      return true
+    }
+  }
+
   event.preventDefault()
 
   // See issue #8907: destination.pathname already includes pathPrefix added
@@ -157,8 +170,8 @@ export const routeThroughBrowserOrApp = hrefHandler => event => {
   return false
 }
 
-export default function(root, cb) {
-  const clickHandler = routeThroughBrowserOrApp(cb)
+export default function(root, pluginOptions, cb) {
+  const clickHandler = routeThroughBrowserOrApp(cb, pluginOptions)
 
   root.addEventListener(`click`, clickHandler)
 

packages/gatsby-plugin-catch-links/src/gatsby-browser.js

@@ -2,8 +2,8 @@ import { navigate } from "gatsby"
 
 import catchLinks from "./catch-links"
 
-exports.onClientEntry = () => {
-  catchLinks(window, href => {
+exports.onClientEntry = (_, pluginOptions = {}) => {
+  catchLinks(window, pluginOptions, href => {
     navigate(href)
   })
 }