feat(gatsby): enable babel in deps

e2e-tests/development-runtime/cypress/integration/functionality/queries-in-packages.js

@@ -0,0 +1,14 @@
+describe(`queries in packages`, () => {
+  beforeEach(() => {
+    cy.visit(`/queries-in-packages`).waitForRouteChange()
+  })
+
+  it(`Should extract and run query from gatsby component`, () => {
+    // we are using `gatsby-seo` package which sets
+    // window's title to title passed as prop followed by siteMetadata.title
+    cy.title().should(
+      `eq`,
+      `Testing queries in packages | Gatsby Default Starter`
+    )
+  })
+})

e2e-tests/development-runtime/package.json

@@ -10,6 +10,7 @@
     "gatsby-plugin-offline": "^2.1.0",
     "gatsby-plugin-react-helmet": "^3.0.6",
     "gatsby-plugin-sharp": "^2.0.37",
+    "gatsby-seo": "^0.1.0",
     "gatsby-source-filesystem": "^2.0.33",
     "gatsby-transformer-remark": "^2.3.12",
     "gatsby-transformer-sharp": "^2.1.19",
@@ -25,11 +26,11 @@
   "license": "MIT",
   "scripts": {
     "build": "gatsby build",
-    "develop": "cross-env ENABLE_GATSBY_REFRESH_ENDPOINT=true gatsby develop",
+    "develop": "cross-env CYPRESS_SUPPORT=y ENABLE_GATSBY_REFRESH_ENDPOINT=true gatsby develop",
     "serve": "gatsby serve",
     "start": "npm run develop",
     "format": "prettier --write \"src/**/*.js\"",
-    "test": "CYPRESS_SUPPORT=y npm run start-server-and-test || (npm run reset && exit 1)",
+    "test": "npm run start-server-and-test || (npm run reset && exit 1)",
     "posttest": "npm run reset",
     "reset": "node scripts/reset.js",
     "reset:preview": "node plugins/gatsby-source-fake-data/reset.js && npm run update:preview",

e2e-tests/development-runtime/src/pages/queries-in-packages.js

@@ -0,0 +1,13 @@
+import React from "react"
+import SEO from "gatsby-seo"
+
+import Layout from "../components/layout"
+
+export default () => (
+  <Layout>
+    <SEO
+      title="Testing queries in packages"
+      keywords={[`gatsby`, `application`, `react`, `queries in component`]}
+    />
+  </Layout>
+)

e2e-tests/production-runtime/cypress/integration/queries-in-packages.js

@@ -0,0 +1,14 @@
+describe(`queries in packages`, () => {
+  beforeEach(() => {
+    cy.visit(`/queries-in-packages`).waitForRouteChange()
+  })
+
+  it(`Should extract and run query from gatsby component`, () => {
+    // we are using `gatsby-seo` package which sets
+    // window's title to title passed as prop followed by siteMetadata.title
+    cy.title().should(
+      `eq`,
+      `Testing queries in packages | Gatsby Default Starter`
+    )
+  })
+})

e2e-tests/production-runtime/package.json

@@ -9,6 +9,7 @@
     "gatsby-plugin-manifest": "^2.0.17",
     "gatsby-plugin-offline": "^2.0.23",
     "gatsby-plugin-react-helmet": "^3.0.6",
+    "gatsby-seo": "^0.1.0",
     "glob": "^7.1.3",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",

e2e-tests/production-runtime/src/pages/queries-in-packages.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import SEO from 'gatsby-seo'
+
+import Layout from '../components/layout'
+
+export default () => (
+  <Layout>
+    <SEO
+      title="Testing queries in packages"
+      keywords={[`gatsby`, `application`, `react`, `queries in component`]}
+    />
+  </Layout>
+)

packages/gatsby/src/query/query-compiler.js

@@ -10,6 +10,7 @@ import RelayParser from "@gatsbyjs/relay-compiler/lib/RelayParser"
 import ASTConvert from "@gatsbyjs/relay-compiler/lib/ASTConvert"
 import GraphQLCompilerContext from "@gatsbyjs/relay-compiler/lib/GraphQLCompilerContext"
 import filterContextForNode from "@gatsbyjs/relay-compiler/lib/filterContextForNode"
+import getGatsbyDependents from "../utils/gatsby-dependents"
 const _ = require(`lodash`)
 
 import { store } from "../redux"
@@ -102,11 +103,14 @@ class Runner {
   async parseEverything() {
     const filesRegex = path.join(`/**`, `*.+(t|j)s?(x)`)
 
+    const modulesThatUseGatsby = await getGatsbyDependents()
+
     let files = [
       path.join(this.base, `src`),
       path.join(this.base, `.cache`, `fragments`),
     ]
       .concat(this.additional.map(additional => path.join(additional, `src`)))
+      .concat(modulesThatUseGatsby.map(module => module.path))
       .reduce(
         (merged, folderPath) =>
           merged.concat(

packages/gatsby/src/utils/__tests__/__snapshots__/webpack-utils.js.snap

@@ -1,22 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`webpack utils js returns default values without any options 1`] = `
-Object {
-  "exclude": /\\(node_modules\\|bower_components\\)/,
-  "test": /\\\\\\.\\(js\\|mjs\\|jsx\\)\\$/,
-  "type": "javascript/auto",
-  "use": Array [
-    Object {
-      "loader": "<PROJECT_ROOT>/packages/gatsby/src/utils/babel-loader.js",
-      "options": Object {},
-    },
-  ],
-}
-`;
-
-exports[`webpack utils js returns default values without any options 2`] = `
+exports[`webpack utils dependencies returns default values without any options 1`] = `
 Object {
-  "exclude": /@babel\\(\\?:\\\\/\\|\\\\\\\\\\{1,2\\}\\)runtime\\|core-js/,
+  "exclude": [Function],
   "test": /\\\\\\.\\(js\\|mjs\\)\\$/,
   "type": "javascript/auto",
   "use": Array [
@@ -40,3 +26,17 @@ Object {
   ],
 }
 `;
+
+exports[`webpack utils js returns default values without any options 1`] = `
+Object {
+  "include": [Function],
+  "test": /\\\\\\.\\(js\\|mjs\\|jsx\\)\\$/,
+  "type": "javascript/auto",
+  "use": Array [
+    Object {
+      "loader": "<PROJECT_ROOT>/packages/gatsby/src/utils/babel-loader.js",
+      "options": Object {},
+    },
+  ],
+}
+`;

packages/gatsby/src/utils/__tests__/webpack-utils.js

@@ -21,15 +21,126 @@ describe(`webpack utils`, () => {
 
       expect(rule).toMatchSnapshot()
     })
+    describe(`include function`, () => {
+      let js
+      beforeAll(() => {
+        js = config.rules.js({
+          modulesThatUseGatsby: [
+            {
+              name: `gatsby-seo`,
+              path: `/Users/sidharthachatterjee/Code/gatsby-seo-test/node_modules/gatsby-seo`,
+            },
+          ],
+        })
+      })
 
+      it(`includes source files from user code`, () => {
+        expect(
+          js.include(
+            `/Users/sidharthachatterjee/Code/gatsby-seo-test/src/pages/index.js`
+          )
+        ).toEqual(true)
+      })
+      it(`includes files from .cache`, () => {
+        expect(
+          js.include(
+            `/Users/sidharthachatterjee/Code/gatsby-seo-test/.cache/production-app.js`
+          )
+        ).toEqual(true)
+      })
+      it(`includes dependencies that use gatsby`, () => {
+        expect(
+          js.include(
+            `/Users/sidharthachatterjee/Code/gatsby-seo-test/node_modules/gatsby-seo/index.js`
+          )
+        ).toEqual(true)
+      })
+      it(`does not include other dependencies`, () => {
+        expect(
+          js.include(
+            `/Users/sidharthachatterjee/Code/gatsby-seo-test/node_modules/react/index.js`
+          )
+        ).toEqual(false)
+      })
+      it(`includes gatsby-browser.js`, () => {
+        expect(
+          js.include(
+            `/Users/sidharthachatterjee/Code/gatsby-seo-test/gatsby-browser.js`
+          )
+        ).toEqual(true)
+      })
+    })
+  })
+  describe(`dependencies`, () => {
     it(`adds dependency rule`, () => {
       expect(config.rules.dependencies).toEqual(expect.any(Function))
     })
-
     it(`returns default values without any options`, () => {
       const rule = config.rules.dependencies()
 
       expect(rule).toMatchSnapshot()
     })
+    describe(`exclude function`, () => {
+      let dependencies
+      beforeAll(() => {
+        dependencies = config.rules.dependencies({
+          modulesThatUseGatsby: [
+            {
+              name: `gatsby-seo`,
+              path: `/Users/sidharthachatterjee/Code/gatsby-seo-test/node_modules/gatsby-seo`,
+            },
+          ],
+        })
+      })
+      it(`excludes source files from user code`, () => {
+        expect(
+          dependencies.exclude(
+            `/Users/sidharthachatterjee/Code/gatsby-seo-test/src/pages/index.js`
+          )
+        ).toEqual(true)
+      })
+      it(`excludes files from .cache`, () => {
+        expect(
+          dependencies.exclude(
+            `/Users/sidharthachatterjee/Code/gatsby-seo-test/.cache/production-app.js`
+          )
+        ).toEqual(true)
+      })
+      it(`excludes dependencies that use gatsby`, () => {
+        expect(
+          dependencies.exclude(
+            `/Users/sidharthachatterjee/Code/gatsby-seo-test/node_modules/gatsby-seo/index.js`
+          )
+        ).toEqual(true)
+      })
+      it(`excludes babel-runtime`, () => {
+        expect(
+          dependencies.exclude(
+            `/Users/misiek/test/pr15285/node_modules/@babel/runtime/helpers/interopRequireDefault.js`
+          )
+        ).toEqual(true)
+      })
+      it(`excludes core-js`, () => {
+        expect(
+          dependencies.exclude(
+            `/Users/misiek/test/pr15285/node_modules/core-js/modules/es6.array.iterator.js`
+          )
+        ).toEqual(true)
+      })
+      it(`includes dependencies that don't use gatsby`, () => {
+        expect(
+          dependencies.exclude(
+            `/Users/sidharthachatterjee/Code/gatsby-seo-test/node_modules/react/index.js`
+          )
+        ).toEqual(false)
+      })
+      it(`excludes gatsby-browser.js`, () => {
+        expect(
+          dependencies.exclude(
+            `/Users/sidharthachatterjee/Code/gatsby-seo-test/gatsby-browser.js`
+          )
+        ).toEqual(true)
+      })
+    })
   })
 })

packages/gatsby/src/utils/__tests__/webpack.config.js

@@ -55,7 +55,7 @@ describe(`basic functionality`, () => {
         )
       )
     )
-  })
+  }, 30000)
 })
 
 describe(`environment variables`, () => {

packages/gatsby/src/utils/gatsby-dependents.js

@@ -1,15 +1,16 @@
 import { store } from "../redux"
+import { memoize } from "lodash"
 import rpt from "read-package-tree"
 import { promisify } from "util"
 
 const rptAsync = promisify(rpt)
 // Returns [Object] with name and path
-module.exports = async () => {
+module.exports = memoize(async () => {
   const { program } = store.getState()
   const allNodeModules = await rptAsync(
     program.directory,
     // Include anything that has `gatsby` in its name but not `gatsby` itself
     (node, moduleName) => /gatsby/.test(moduleName) && moduleName !== `gatsby`
   )
   return allNodeModules.children
-}
+})

packages/gatsby/src/utils/webpack-utils.js

@@ -290,13 +290,27 @@ module.exports = async ({
   const rules = {}
 
   /**
-   * JavaScript loader via babel, excludes node_modules
+   * JavaScript loader via babel, includes userland code
+   * and packages that depend on `gatsby`
    */
   {
-    let js = (options = {}) => {
+    let js = (
+      { modulesThatUseGatsby, ...options } = { modulesThatUseGatsby: [] }
+    ) => {
       return {
         test: /\.(js|mjs|jsx)$/,
-        exclude: vendorRegex,
+        include: modulePath => {
+          // when it's not coming from node_modules we treat it as a source file.
+          if (!vendorRegex.test(modulePath)) {
+            return true
+          }
+
+          // If the module uses Gatsby as a dependency
+          // we want to treat it as src so we can extract queries
+          return modulesThatUseGatsby.some(module =>
+            modulePath.includes(module.path)
+          )
+        },
         type: `javascript/auto`,
         use: [loaders.js(options)],
       }
@@ -306,10 +320,14 @@ module.exports = async ({
   }
 
   /**
-   * Node_modules JavaScript loader via babel (exclude core-js & babel-runtime to speedup babel transpilation)
+   * Node_modules JavaScript loader via babel
+   * Excludes core-js & babel-runtime to speedup babel transpilation
+   * Excludes modules that use Gatsby since the `rules.js` already transpiles those
    */
   {
-    let dependencies = (options = {}) => {
+    let dependencies = (
+      { modulesThatUseGatsby, ...options } = { modulesThatUseGatsby: [] }
+    ) => {
       const jsOptions = {
         babelrc: false,
         configFile: false,
@@ -326,7 +344,28 @@ module.exports = async ({
 
       return {
         test: /\.(js|mjs)$/,
-        exclude: /@babel(?:\/|\\{1,2})runtime|core-js/,
+        exclude: modulePath => {
+          if (vendorRegex.test(modulePath)) {
+            // If dep uses Gatsby, exclude
+            if (
+              modulesThatUseGatsby.some(module =>
+                modulePath.includes(module.path)
+              )
+            ) {
+              return true
+            }
+            // If dep is babel-runtime or core-js, exclude
+            if (/@babel(?:\/|\\{1,2})runtime|core-js/.test(modulePath)) {
+              return true
+            }
+
+            // If dep is in node_modules and none of the above, include
+            return false
+          }
+
+          // If dep is user land code, exclude
+          return true
+        },
         type: `javascript/auto`,
         use: [loaders.js(jsOptions)],
       }