feat(gatsby): enable babel in deps (#15284)

sidharthachatterjee · GatsbyJS Bot · commit 4ea3fa190ae8 · 2019-07-02T21:51:09.000+02:00
* Add modules that use gatsby to query compiler

* Run babel on modules that use Gatsby

* Update snapshot

* Set higher timeout in test

* Apply suggestions from code review

Co-Authored-By: Ward Peeters &lt;ward@coding-tech.com&gt;

* Missing )

* Suggestions from Ward

* Add tests for include and exclude functions

* Add one more test for exclude function

* moar tests

* add some sanity e2e tests

* Fix production runtime tests

* fix(e2e-production-runtime): adjust siteMetadata to shape gatsby-seo needs
diff --git a/e2e-tests/development-runtime/cypress/integration/functionality/queries-in-packages.js b/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`
+    )
+  })
+})
diff --git a/e2e-tests/development-runtime/package.json b/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",
diff --git a/e2e-tests/development-runtime/src/pages/queries-in-packages.js b/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>
+)
diff --git a/e2e-tests/production-runtime/cypress/integration/queries-in-packages.js b/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`
+    )
+  })
+})
diff --git a/e2e-tests/production-runtime/gatsby-config.js b/e2e-tests/production-runtime/gatsby-config.js
@@ -1,10 +1,8 @@
 module.exports = {
   siteMetadata: {
     title: `Gatsby Default Starter`,
-    author: {
-      name: `Kyle Mathews`,
-      bio: `lives and works in San Francisco building useful things`,
-    },
+    author: `Kyle Mathews`,
+    description: `This is site for production runtime e2e tests`,
   },
   plugins: [
     `gatsby-plugin-react-helmet`,
diff --git a/e2e-tests/production-runtime/package.json b/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",
diff --git a/e2e-tests/production-runtime/src/components/bio.js b/e2e-tests/production-runtime/src/components/bio.js
@@ -7,11 +7,7 @@ function Bio() {
       query={bioQuery}
       render={data => (
         <div>
-          <p data-testid="bio">
-            A site by {data.site.siteMetadata.author.name} who
-            {` `}
-            {data.site.siteMetadata.author.bio}
-          </p>
+          <p data-testid="bio">A site by {data.site.siteMetadata.author}</p>
         </div>
       )}
     />
@@ -22,10 +18,7 @@ export const bioQuery = graphql`
   {
     site {
       siteMetadata {
-        author {
-          bio
-          name
-        }
+        author
       }
     }
   }
diff --git a/e2e-tests/production-runtime/src/components/static-query/exported-variable-query.js b/e2e-tests/production-runtime/src/components/static-query/exported-variable-query.js
@@ -5,7 +5,7 @@ function ExportedVariable(props) {
   return (
     <StaticQuery
       query={nameQuery}
-      render={data => <p {...props}>{data.site.siteMetadata.author.name}</p>}
+      render={data => <p {...props}>{data.site.siteMetadata.author}</p>}
     />
   )
 }
@@ -14,9 +14,7 @@ export const nameQuery = graphql`
   {
     site {
       siteMetadata {
-        author {
-          name
-        }
+        author
       }
     }
   }
diff --git a/e2e-tests/production-runtime/src/pages/queries-in-packages.js b/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>
+)
diff --git a/packages/gatsby/src/query/query-compiler.js b/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(
diff --git a/packages/gatsby/src/utils/__tests__/__snapshots__/webpack-utils.js.snap b/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 {},
+    },
+  ],
+}
+`;
diff --git a/packages/gatsby/src/utils/__tests__/webpack-utils.js b/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)
+      })
+    })
   })
 })
diff --git a/packages/gatsby/src/utils/__tests__/webpack.config.js b/packages/gatsby/src/utils/__tests__/webpack.config.js
@@ -55,7 +55,7 @@ describe(`basic functionality`, () => {
         )
       )
     )
-  })
+  }, 30000)
 })
 
 describe(`environment variables`, () => {
diff --git a/packages/gatsby/src/utils/gatsby-dependents.js b/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
-}
+})
diff --git a/packages/gatsby/src/utils/webpack-utils.js b/packages/gatsby/src/utils/webpack-utils.js
diff --git a/packages/gatsby/src/utils/webpack.config.js b/packages/gatsby/src/utils/webpack.config.js

Original file line number	Diff line number	Diff line change
`@@ -7,11 +7,7 @@ function Bio() {`
`7`	`7`	`query={bioQuery}`
`8`	`8`	`render={data => (`
`9`	`9`	`<div>`
`10`		`- <p data-testid="bio">`
`11`		`- A site by {data.site.siteMetadata.author.name} who`
`12`		- {` `}
`13`		`- {data.site.siteMetadata.author.bio}`
`14`		`- </p>`
	`10`	`+ <p data-testid="bio">A site by {data.site.siteMetadata.author}</p>`
`15`	`11`	`</div>`
`16`	`12`	`)}`
`17`	`13`	`/>`
@@ -22,10 +18,7 @@ export const bioQuery = graphql`
`22`	`18`	`{`
`23`	`19`	`site {`
`24`	`20`	`siteMetadata {`
`25`		`- author {`
`26`		`- bio`
`27`		`- name`
`28`		`- }`
	`21`	`+ author`
`29`	`22`	`}`
`30`	`23`	`}`
`31`	`24`	`}`
Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@ function ExportedVariable(props) {`
`5`	`5`	`return (`
`6`	`6`	`<StaticQuery`
`7`	`7`	`query={nameQuery}`
`8`		`- render={data => <p {...props}>{data.site.siteMetadata.author.name}</p>}`
	`8`	`+ render={data => <p {...props}>{data.site.siteMetadata.author}</p>}`
`9`	`9`	`/>`
`10`	`10`	`)`
`11`	`11`	`}`
@@ -14,9 +14,7 @@ export const nameQuery = graphql`
`14`	`14`	`{`
`15`	`15`	`site {`
`16`	`16`	`siteMetadata {`
`17`		`- author {`
`18`		`- name`
`19`		`- }`
	`17`	`+ author`
`20`	`18`	`}`
`21`	`19`	`}`
`22`	`20`	`}`