Use new babel API's to manage babel options #6801

jquense · 2018-07-27T14:06:31Z

~~VERY WIP~~

~~I wanted to throw it up early tho to get feedback and make sure we are on the right track here.~~

Edit by @m-allanson: This has been picked up by @KyleAMathews and is ready for review.

jquense · 2018-07-27T14:06:50Z

packages/gatsby/src/utils/babel-loader.js

+
+module.exports = ({ stage, browserslist, resolve = require.resolve }) =>
+  babelLoader.customLoader(babel => {
+    const presetEnv = babel.createConfigItem([


i'm not sure i'm doing this right

jquense · 2018-07-27T14:07:15Z

packages/gatsby/src/utils/babel-loader.js

+      // Passed Babel's 'PartialConfig' object.
+      config(partialConfig) {
+        // TODO: we should run partialConfig through the gatsby babel API plugin
+        // The problem there is this is sync and the API run is async :/


this is an interesting problem. we have no way of doing sync node api calls...

I guess we could just do them all ahead of time?

KyleAMathews · 2018-07-27T14:09:19Z

Deploy preview for gatsbygram ready!

Built with commit 66de295

https://deploy-preview-6801--gatsbygram.netlify.com

KyleAMathews · 2018-07-27T14:10:21Z

Deploy preview for using-postcss-sass failed.

Built with commit 66de295

https://app.netlify.com/sites/using-postcss-sass/deploys/5b737b503813f03812ac0932

KyleAMathews · 2018-07-27T14:10:33Z

Deploy preview for using-styled-components failed.

Built with commit ac1ea8f

https://app.netlify.com/sites/using-styled-components/deploys/5b75d74c3813f00495ac0908

KyleAMathews · 2018-07-27T14:11:04Z

Deploy preview for image-processing failed.

Built with commit ac1ea8f

https://app.netlify.com/sites/image-processing/deploys/5b75d74b3813f00495ac0902

gatsbybot · 2018-07-27T14:11:22Z

Deploy preview for using-drupal ready!

Built with commit 66de295

https://deploy-preview-6801--using-drupal.netlify.com

KyleAMathews · 2018-07-27T14:11:45Z

Deploy preview for using-jss failed.

Built with commit 6b27a5c

https://app.netlify.com/sites/using-jss/deploys/5b7371f382d3f120786b4244

KyleAMathews · 2018-07-27T14:11:50Z

Deploy preview for using-contentful failed.

Built with commit ac1ea8f

https://app.netlify.com/sites/using-contentful/deploys/5b75d74c3813f00495ac090b

KyleAMathews · 2018-07-27T14:12:13Z

Deploy preview for using-glamor failed.

Built with commit ac1ea8f

https://app.netlify.com/sites/using-glamor/deploys/5b75d74b3813f00495ac0905

KyleAMathews · 2018-07-27T14:12:33Z

Deploy preview for using-remark failed.

Built with commit 6b27a5c

https://app.netlify.com/sites/using-remark/deploys/5b7371f182d3f120786b422f

jquense · 2018-07-27T14:14:32Z

i know bots! they all gonna fail

KyleAMathews · 2018-07-27T14:39:06Z

Deploy preview for gatsbyjs failed.

Built with commit bdca781

https://app.netlify.com/sites/gatsbyjs/deploys/5b733fe13813f0655cc338c2

KyleAMathews · 2018-08-10T14:41:46Z

working on this now btw

KyleAMathews · 2018-08-10T18:12:35Z

So this seems to be working now. Basically what I arrived at is that we run the same API calls in onPreBootstrap and then write out the result to disk. Then at each stage e.g. develop, build-javascript, build-html, we write to disk the stage. Then in our babel-loader, we can read in that info and generate the plugin/preset config items.

@jquense & @loganfsmyth would love to hear your thoughts

loganfsmyth · 2018-08-12T01:59:42Z

packages/gatsby/src/internal-plugins/load-babel-config/gatsby-node.js

+  })
+  const babelrcState = store.getState().babelrc
+  const babelState = JSON.stringify(babelrcState.stages, null, 4)
+  fs.writeFile(directoryPath(`.cache/babelState.json`), babelState)


Is this missing an await?

loganfsmyth · 2018-08-12T02:09:38Z

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

@@ -28,6 +28,12 @@ module.exports = async (
 ) => {
  const directoryPath = withBasePath(directory)

+  await fs.writeFile(


Is the stage able to be passed through to the loaders as an argument? That seems like it would be easier.

No idea... I'll just set it on process.env actually instead of this method.

loganfsmyth · 2018-08-12T02:11:48Z

packages/gatsby/src/utils/babel-loader.js

+      return {
+        loader: {
+          cacheDirectory: true,
+          babelrc: false,


I don't think you'd want to set this since you have partialConfig.hasFilesystemConfig() explicitly checked.

loganfsmyth · 2018-08-12T02:13:54Z

packages/gatsby/src/utils/babel-loader.js

+  const reduxPresets = []
+  pluginBabelConfig[stage].plugins.forEach(plugin => {
+    reduxPlugins.push(
+      babel.createConfigItem([require.resolve(plugin.name), plugin.options], {


Might be worth caching this somehow to avoid re-resolving for every single file that Gatsby compiles. Or does Node already cache that for require?

Yeah, node caches that so we should be fine.

…ystemConfig()`

…sby plugin additions

KyleAMathews · 2018-08-15T00:12:26Z

Think this is ready for another review @jquense, @loganfsmyth, @pieh, @m-allanson.

Main thing now left to do is add some tests + do some more manual testing.

Manually tested scenarios:

no .babelrc and no gatsby plugins making modifications
no .babelrc and gatsby plugins making modifications
.babelrc and gatsby plugins making modifications

m-allanson · 2018-08-15T14:35:45Z

Nice! I'm not familiar with babel-loader's custom() method - this was a useful reference: https://github.com/babel/babel-loader#customized-loader

m-allanson · 2018-08-16T20:20:06Z

www/package.json

-    "gatsby-plugin-manifest": "next",
-    "gatsby-plugin-netlify": "next",
+    "gatsby-plugin-manifest": "^2.0.2-beta.5",
+    "gatsby-plugin-netlify": "^2.0.0-beta.6",


Should these stay on next?

🤷‍♂️ it's the same but yeah — I'll remove them to reduce PR noise

pieh · 2018-08-16T20:23:41Z

packages/gatsby/src/internal-plugins/load-babel-config/gatsby-node.js

@@ -1,97 +1,28 @@
 /* @flow */

-const fs = require(`fs`)
-const path = require(`path`)
-const json5 = require(`json5`)


seems like we can remove json5 from package.json (this and tests you remove are only places where this is used)

pieh

LGTM!

m-allanson

🛩

jquense · 2018-08-16T22:11:48Z

nice! thanks for picking this up 👍

* WIP: flesh out how the babel-loader might work * WIP * Write out babel plugin info + stage for custom babel-loader * cleanups * Add missing await * Don't set babelrc to false since we check for `partialConfig.hasFilesystemConfig()` * Set env variable instead of writing out file * Remove old file for creating config * Add back stage specific plugins * Add required plugins/presets to babel config even if there's a file-defined schema * Update sample .babelrc people can copy into their site * Trim away more unused code * update snapshot * Add fallback plugins for when a .babelrc isn't defined + merge in gatsby plugin additions * Comments * Add back plugin * Update snapshots * update tests * Add some docs * test helper libs * Fix lint errors * Remove json5 from gatsby's package.json as it's unused now * mock resolve

WIP: flesh out how the babel-loader might work

24155bd

jquense commented Jul 27, 2018

View reviewed changes

m-allanson requested a review from KyleAMathews August 6, 2018 13:50

KyleAMathews added 4 commits August 9, 2018 09:52

Merge remote-tracking branch 'origin/master' into babel-api

446a2eb

WIP

e814fd0

Merge remote-tracking branch 'origin/master' into babel-api

c37459d

Merge remote-tracking branch 'origin/master' into babel-api

8846126

KyleAMathews added 2 commits August 10, 2018 19:04

Write out babel plugin info + stage for custom babel-loader

ec7bc2b

cleanups

69afca8

loganfsmyth reviewed Aug 12, 2018

View reviewed changes

KyleAMathews added 3 commits August 14, 2018 15:33

Merge remote-tracking branch 'origin/master' into babel-api

ba147ee

Add missing await

20b4855

Don't set babelrc to false since we check for `partialConfig.hasFiles…

d79b0ce

…ystemConfig()`

KyleAMathews added 3 commits August 14, 2018 16:44

Trim away more unused code

e1e1db5

update snapshot

bdca781

Add fallback plugins for when a .babelrc isn't defined + merge in gat…

7693394

…sby plugin additions

KyleAMathews added 2 commits August 14, 2018 19:19

Comments

6b27a5c

Add back plugin

66de295

KyleAMathews changed the title ~~WIP: Use new babel API's to manage babel options~~ Use new babel API's to manage babel options Aug 15, 2018

Update snapshots

99dedbf

m-allanson assigned KyleAMathews Aug 16, 2018

KyleAMathews added 3 commits August 16, 2018 13:33

update tests

9883d64

Add some docs

cef9f22

test helper libs

ac1ea8f

m-allanson reviewed Aug 16, 2018

View reviewed changes

Merge remote-tracking branch 'origin/master' into babel-api

ee0523c

pieh reviewed Aug 16, 2018

View reviewed changes

pieh previously approved these changes Aug 16, 2018

View reviewed changes

Fix lint errors

5481a14

KyleAMathews dismissed pieh’s stale review via 5481a14 August 16, 2018 20:25

m-allanson previously approved these changes Aug 16, 2018

View reviewed changes

Remove json5 from gatsby's package.json as it's unused now

e223d25

KyleAMathews dismissed m-allanson’s stale review via e223d25 August 16, 2018 20:34

mock resolve

f75d497

KyleAMathews merged commit 592f391 into master Aug 16, 2018

KyleAMathews deleted the babel-api branch August 16, 2018 20:45

This was referenced Aug 17, 2018

[v2] TypeScript broken after gatsby@2.0.0-beta.106 #7398

Closed

[gatsby-plugin-typescript] load TS preset via onCreateBabelConfig #7417

Merged

pieh mentioned this pull request Feb 13, 2019

Providing function as option to babel plugin does not work #11746

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use new babel API's to manage babel options #6801

Use new babel API's to manage babel options #6801

jquense commented Jul 27, 2018 •

edited by m-allanson

jquense Jul 27, 2018

jquense Jul 27, 2018

KyleAMathews Aug 9, 2018

KyleAMathews commented Jul 27, 2018 •

edited by gatsbybot

KyleAMathews commented Jul 27, 2018 •

edited

KyleAMathews commented Jul 27, 2018 •

edited

KyleAMathews commented Jul 27, 2018 •

edited

gatsbybot commented Jul 27, 2018 •

edited

KyleAMathews commented Jul 27, 2018 •

edited

KyleAMathews commented Jul 27, 2018 •

edited

KyleAMathews commented Jul 27, 2018 •

edited

KyleAMathews commented Jul 27, 2018 •

edited

jquense commented Jul 27, 2018

KyleAMathews commented Jul 27, 2018 •

edited

KyleAMathews commented Aug 10, 2018

KyleAMathews commented Aug 10, 2018

loganfsmyth Aug 12, 2018

KyleAMathews Aug 14, 2018

loganfsmyth Aug 12, 2018

KyleAMathews Aug 14, 2018

loganfsmyth Aug 12, 2018

KyleAMathews Aug 14, 2018

loganfsmyth Aug 12, 2018 •

edited

KyleAMathews Aug 14, 2018

KyleAMathews commented Aug 15, 2018

m-allanson commented Aug 15, 2018

m-allanson Aug 16, 2018

KyleAMathews Aug 16, 2018

pieh Aug 16, 2018

pieh left a comment

m-allanson left a comment

jquense commented Aug 16, 2018

Use new babel API's to manage babel options #6801

Use new babel API's to manage babel options #6801

Conversation

jquense commented Jul 27, 2018 • edited by m-allanson

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

KyleAMathews commented Jul 27, 2018 • edited by gatsbybot

KyleAMathews commented Jul 27, 2018 • edited

KyleAMathews commented Jul 27, 2018 • edited

KyleAMathews commented Jul 27, 2018 • edited

gatsbybot commented Jul 27, 2018 • edited

KyleAMathews commented Jul 27, 2018 • edited

KyleAMathews commented Jul 27, 2018 • edited

KyleAMathews commented Jul 27, 2018 • edited

KyleAMathews commented Jul 27, 2018 • edited

jquense commented Jul 27, 2018

KyleAMathews commented Jul 27, 2018 • edited

KyleAMathews commented Aug 10, 2018

KyleAMathews commented Aug 10, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

loganfsmyth Aug 12, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

KyleAMathews commented Aug 15, 2018

m-allanson commented Aug 15, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pieh left a comment

Choose a reason for hiding this comment

m-allanson left a comment

Choose a reason for hiding this comment

jquense commented Aug 16, 2018

jquense commented Jul 27, 2018 •

edited by m-allanson

KyleAMathews commented Jul 27, 2018 •

edited by gatsbybot

KyleAMathews commented Jul 27, 2018 •

edited

KyleAMathews commented Jul 27, 2018 •

edited

KyleAMathews commented Jul 27, 2018 •

edited

gatsbybot commented Jul 27, 2018 •

edited

KyleAMathews commented Jul 27, 2018 •

edited

KyleAMathews commented Jul 27, 2018 •

edited

KyleAMathews commented Jul 27, 2018 •

edited

KyleAMathews commented Jul 27, 2018 •

edited

KyleAMathews commented Jul 27, 2018 •

edited

loganfsmyth Aug 12, 2018 •

edited