feat(gatsby): enable modern builds for gatsby #14289

wardpeet · 2019-05-24T07:16:52Z

Description

Gatsby generates 2 bundles. One .js & one .mjs, the .js will be used for legacy browsers (<script nomodule>) & mjs will be used for es supported modules.

Changes I made:

remove process.env from babel-preset-env, use options instead.
add modern option to babel-preset-env
enable js & mjs bundling by webpack
add module, nomodule script tags to pages (make sure we fix the ios/safari bug)
add option do disable modern builds
add e2e tests

I wonder if we should detect if a given browserlist is already > modern zo we don't have to add 2 script tags. Perhaps just disable when a custom babelrc and browserlist are given?

@DSchau created a killer todo, so for more info:
#2114 (comment)

Related Issues

#2114

Note

We lose preload for legacy browsers on first visit when a modern build is generated because there is no way for us to conditionally preload one set (legacy or modern) before knowing the browser and by then it is perhaps too late to add preload tags

- use moder & stage param

KyleAMathews · 2019-05-24T17:13:18Z

Great work! Is the idea we'll release this behind a command-line flag / experimental config value?

- add module scripts to static build html - make sure prefetch works with modern files - combine modern & legacy stats together

wardpeet · 2019-05-24T22:13:24Z

I was thinking of writing an issue about creating a new options inside gatsby-config.js called _experiments where we could have these kinds of feature flags (Release Toggles).

DSchau · 2019-05-24T22:15:47Z

@wardpeet please do! I've been thinking that would be really valuable--basically a way that we can get more fine-grained control (and likely analytics data, as well) of these experiments and make them a little more user-friendly than setting an environment variable.

(It shouldn't necessarily block this though--but I do love the idea!)

wardpeet

Added some comments for myself so I don't forget XD

wardpeet · 2019-05-24T22:15:31Z

packages/gatsby/cache-dir/static-entry.js

@@ -275,6 +298,8 @@ export default (pagePath, callback) => {
  scripts
    .slice(0)
    .reverse()
+    // remove legacy scripts from our preload as we preload our modern files instead


I'm unsure if there is a workaround for this that we can have our cake and eat it too. A way to do this is document.write but I rather don't want to use it.

let's add a disclaimer to the PR to say that we lose preload for legacy browers on first run

Added the note!

wardpeet · 2019-05-24T22:16:52Z

packages/gatsby/cache-dir/static-entry.js

+    })
+
+  // Patches browsers who have a flawed noModule - module system
+  // Sadly we lose preload for legacy browsers


Suggested change

// Sadly we lose preload for legacy browsers

// Sadly we lose the benefit of the preload scanner for legacy browsers

// because the the sources are hidden in javascript.

wardpeet · 2019-05-24T22:23:50Z

packages/gatsby/cache-dir/static-entry.js

+  // @see https://caniuse.com/#feat=es6-module
+  // 1. Safari 10.1 supports modules, but does not support the `nomodule` attribute - it will load <script nomodule> anyway.
+  // 2. Edge does not executes noModule but still fetches it
+  const noModuleBugFixScripts = `(function(b){function c(e){var d=b.createElement("script");d.src=e;b.body.appendChild(d)}"noModule"in b.createElement("script")||/Version\\/10\\.1(\\.\\d+)* Safari|Version\\/10\\.\\d(\\.\\d+)*.*Safari|Edge\\/1[6-8]\\.\\d/i.test(navigator.userAgent)||(%scripts%)})(document)`


I had no clue on how to write this in a nicer way. Basically it detects if noModule exists or it does not exists and is safari 10.1.x or safari ios 10.x as they do have know type="module" but not nomodule

Suggested change

const noModuleBugFixScripts = `(function(b){function c(e){var d=b.createElement("script");d.src=e;b.body.appendChild(d)}"noModule"in b.createElement("script")||/Version\\/10\\.1(\\.\\d+)* Safari|Version\\/10\\.\\d(\\.\\d+)*.*Safari|Edge\\/1[6-8]\\.\\d/i.test(navigator.userAgent)||(%scripts%)})(document)`

const noModuleBugFixScripts = `(function(b){function c(e){var d=b.createElement("script");d.src=e;b.body.appendChild(d)}"noModule"in b.createElement("script")||/Version\\/10\\.1(\\.\\d+)* Safari|Version\\/10\\.\\d(\\.\\d+)*.*Safari/i.test(navigator.userAgent)||(%scripts%)})(document)`

wardpeet · 2019-05-24T22:25:04Z

@DSchau I think it's best to keep this under an experiment for now, I have no idea if this is going to be flawless 😄 for all websites.

sidharthachatterjee · 2019-06-03T15:22:32Z

I think you should document 3 things on the blog post/documentation page:

that we "handle" the Safari bug with the dynamic script tag addition
the Chrome Core JS catastrophe
Side note for folks to beware if they have custom plugin code that reads webpack.stats.json while mentioning that we handle the official ones (guess-js, postcss, netlify cms, netlify headers, offline plugin)

Once per page manifest lands, we have to update this (cc @Moocar )

Random thought: In the future, a build that is set using browserslist might be "more modern" than modern so we might need to be careful about naming here 😉

moonmeister · 2019-07-10T22:58:10Z

This may be helpful:

https://jasonformat.com/modern-script-loading/

wardpeet · 2019-07-12T07:08:27Z

Thanks @moonmeister! I will indeed thinker a bit about that blog post

wardpeet · 2019-07-17T08:57:33Z

packages/gatsby/cache-dir/loader.js

-      createComponentUrls(resourceName).map(url => prefetchHelper(url))
-    )
+    let componentUrls = createComponentUrls(resourceName)
+    if (process.env.MODERN_BUILD) {


lets filter inside static-entry to only save modern / legacy assets inside the window.___chunkMapping variable

wardpeet · 2019-07-17T09:04:01Z

packages/gatsby/cache-dir/static-entry.js

@@ -275,6 +298,8 @@ export default (pagePath, callback) => {
  scripts
    .slice(0)
    .reverse()
+    // remove legacy scripts from our preload as we preload our modern files instead


let's add a disclaimer to the PR to say that we lose preload for legacy browers on first run

sidharthachatterjee

Looking great overall! Thank you @wardpeet ❤️

Left a few small comments

sidharthachatterjee · 2019-07-17T11:57:18Z

e2e-tests/modern-builds/README.md

@@ -0,0 +1,3 @@
+# production-runtime


Suggested change

# production-runtime

# modern-builds

sidharthachatterjee · 2019-07-17T11:57:46Z

e2e-tests/modern-builds/README.md

@@ -0,0 +1,3 @@
+# production-runtime
+
+A Gatsby project to test our production runtime for Themes


Suggested change

A Gatsby project to test our production runtime for Themes

A Gatsby project to test out modern builds

sidharthachatterjee · 2019-07-17T11:58:28Z

e2e-tests/modern-builds/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{


File can be deleted since it isn't used

sidharthachatterjee · 2019-07-17T11:59:20Z

e2e-tests/modern-builds/cypress/plugins/index.js

@@ -0,0 +1,17 @@
+// ***********************************************************


Probably get rid of this folder and its contents as well

sidharthachatterjee · 2019-07-17T11:59:42Z

e2e-tests/modern-builds/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "production-runtime",


Suggested change

"name": "production-runtime",

"name": "modern-builds",

sidharthachatterjee · 2019-07-17T11:59:55Z

e2e-tests/modern-builds/package.json

+  "name": "production-runtime",
+  "description": "Gatsby default starter",
+  "version": "1.0.0",
+  "author": "Sidhartha Chatterjee <sid@gatsbyjs.com>",


Suggested change

"author": "Sidhartha Chatterjee <sid@gatsbyjs.com>",

"author": "Ward Peeters <ward@gatsbyjs.com>",

e2e-tests/modern-builds/package.json

packages/gatsby/cache-dir/static-entry.js

ChristopherBiscardi · 2019-08-19T02:37:29Z

Looks like this takes advantage of webpack multi-compiler yeah? Might affect gatsby-plugin-mdx's html field resolution. Would love a ping whenever there's a testable release.

wardpeet · 2019-08-19T11:48:31Z

I'm going to restructure this PR in small chunks and probably remove the multi compiler instance as it's probably going to break things.

I'll close this PR for now and re-open smaller chunks. I'll keep the branch alive.

wardpeet added 3 commits May 24, 2019 08:52

update babel-preset-gatsby with modern option

16f2ba1

enable gatsby to use new babel-preset

ba811f3

- use moder & stage param

enable modern builds in build-javascript

7fb16a5

wardpeet added 2 commits May 25, 2019 00:09

add module scripts to gatsby

b2119ce

- add module scripts to static build html - make sure prefetch works with modern files - combine modern & legacy stats together

add nomodule safari/edge fix

39a60a8

wardpeet force-pushed the feat/modern-builds branch from c8c5b4c to 39a60a8 Compare May 24, 2019 22:09

wardpeet commented May 24, 2019

View reviewed changes

wardpeet mentioned this pull request Jun 6, 2019

[WIP]: chore(*): publish es versions of browser packages #12761

Closed

wardpeet mentioned this pull request Jun 14, 2019

chore(gatsby): add ie polyfill to webpack entry #13241

Closed

wardpeet mentioned this pull request Jun 27, 2019

Gatsby's Use Of Polyfills and the 'Missing Resources for x' error #12399

Closed

wardpeet added 2 commits July 17, 2019 11:23

Merge branch 'master' into feat/modern-builds

7a61cf7

add flag ENABLE_MODERN_BUILDS to enable modern syntax

2479897

wardpeet commented Jul 17, 2019

View reviewed changes

wardpeet and others added 2 commits July 17, 2019 12:31

savepoint

8ffefd1

Fix build

d964eb0

sidharthachatterjee marked this pull request as ready for review July 17, 2019 11:20

sidharthachatterjee requested review from a team as code owners July 17, 2019 11:20

sidharthachatterjee self-assigned this Jul 17, 2019

sidharthachatterjee self-requested a review July 17, 2019 11:21

sidharthachatterjee added the bot: merge on green Gatsbot will merge these PRs automatically when all tests passes label Jul 17, 2019

Lint

3c7fcb3

wardpeet removed the bot: merge on green Gatsbot will merge these PRs automatically when all tests passes label Jul 17, 2019

sidharthachatterjee suggested changes Jul 17, 2019

View reviewed changes

wardpeet added 6 commits July 17, 2019 17:16

fix stage & modern for dependencies

d801a91

fix modern-builds in static-entry

8d1b31d

move modern check to javascript

6eb26de

write tests

bf9ecee

add to circleci

b570b2d

fix litn

d4523b1

wardpeet mentioned this pull request Jul 22, 2019

Upgrade core-js package to version 3 #15601

Closed

wardpeet closed this Aug 19, 2019

wardpeet deleted the feat/modern-builds branch September 23, 2020 18:50

wardpeet restored the feat/modern-builds branch September 23, 2020 18:50

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(gatsby): enable modern builds for gatsby #14289

feat(gatsby): enable modern builds for gatsby #14289

wardpeet commented May 24, 2019 •

edited

Loading

KyleAMathews commented May 24, 2019

wardpeet commented May 24, 2019

DSchau commented May 24, 2019 •

edited

Loading

wardpeet left a comment

wardpeet May 24, 2019

wardpeet Jul 17, 2019

sidharthachatterjee Jul 17, 2019

wardpeet May 24, 2019

wardpeet May 24, 2019

wardpeet commented May 24, 2019

sidharthachatterjee commented Jun 3, 2019 •

edited

Loading

moonmeister commented Jul 10, 2019

wardpeet commented Jul 12, 2019

wardpeet Jul 17, 2019

wardpeet Jul 17, 2019

sidharthachatterjee left a comment

sidharthachatterjee Jul 17, 2019

sidharthachatterjee Jul 17, 2019

sidharthachatterjee Jul 17, 2019

sidharthachatterjee Jul 17, 2019

sidharthachatterjee Jul 17, 2019

sidharthachatterjee Jul 17, 2019

ChristopherBiscardi commented Aug 19, 2019

wardpeet commented Aug 19, 2019

	// Sadly we lose preload for legacy browsers
	// Sadly we lose the benefit of the preload scanner for legacy browsers
	// because the the sources are hidden in javascript.

	const noModuleBugFixScripts = `(function(b){function c(e){var d=b.createElement("script");d.src=e;b.body.appendChild(d)}"noModule"in b.createElement("script")\|\|/Version\\/10\\.1(\\.\\d+)* Safari\|Version\\/10\\.\\d(\\.\\d+).Safari\|Edge\\/1[6-8]\\.\\d/i.test(navigator.userAgent)\|\|(%scripts%)})(document)`
	const noModuleBugFixScripts = `(function(b){function c(e){var d=b.createElement("script");d.src=e;b.body.appendChild(d)}"noModule"in b.createElement("script")\|\|/Version\\/10\\.1(\\.\\d+)* Safari\|Version\\/10\\.\\d(\\.\\d+).Safari/i.test(navigator.userAgent)\|\|(%scripts%)})(document)`

		@@ -0,0 +1,3 @@
		# production-runtime

		A Gatsby project to test our production runtime for Themes

	A Gatsby project to test our production runtime for Themes
	A Gatsby project to test out modern builds

		@@ -0,0 +1,17 @@
		// ***********************************************************

	"author": "Sidhartha Chatterjee <sid@gatsbyjs.com>",
	"author": "Ward Peeters <ward@gatsbyjs.com>",

feat(gatsby): enable modern builds for gatsby #14289

feat(gatsby): enable modern builds for gatsby #14289

Conversation

wardpeet commented May 24, 2019 • edited Loading

Description

Related Issues

Note

KyleAMathews commented May 24, 2019

wardpeet commented May 24, 2019

DSchau commented May 24, 2019 • edited Loading

wardpeet left a 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

Choose a reason for hiding this comment

wardpeet commented May 24, 2019

sidharthachatterjee commented Jun 3, 2019 • edited Loading

moonmeister commented Jul 10, 2019

wardpeet commented Jul 12, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sidharthachatterjee left a 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ChristopherBiscardi commented Aug 19, 2019

wardpeet commented Aug 19, 2019

wardpeet commented May 24, 2019 •

edited

Loading

DSchau commented May 24, 2019 •

edited

Loading

sidharthachatterjee commented Jun 3, 2019 •

edited

Loading