From 9e538e8644ace9c4a16b1b9238d255b979456086 Mon Sep 17 00:00:00 2001
From: Mark Brocato <mark.brocato@moovweb.com>
Date: Tue, 9 Jun 2020 11:42:38 +0300
Subject: [PATCH 1/3] Added NextScriptDeferred component that allows you to
 import scripts with defer instead of async in _document.js.

---
 package.json                    |  2 +-
 src/NextScriptDeferred.js       | 20 ++++++++++++++++++++
 test/NextScriptDeferred.test.js | 31 +++++++++++++++++++++++++++++++
 3 files changed, 52 insertions(+), 1 deletion(-)
 create mode 100644 src/NextScriptDeferred.js
 create mode 100644 test/NextScriptDeferred.test.js

diff --git a/package.json b/package.json
index 2a65ea33..b3d5bf3e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-storefront",
-  "version": "8.7.2",
+  "version": "8.8.0",
   "description": "Build and deploy e-commerce progressive web apps (PWAs) in record time.",
   "module": "./index.js",
   "license": "Apache-2.0",
diff --git a/src/NextScriptDeferred.js b/src/NextScriptDeferred.js
new file mode 100644
index 00000000..2b3e26a0
--- /dev/null
+++ b/src/NextScriptDeferred.js
@@ -0,0 +1,20 @@
+import React from 'react'
+import { NextScript } from 'next/document'
+
+/**
+ * Adds script elements for Next.js static assets with defer instead of async
+ * to improve paint metrics in lighthouse.
+ *
+ * This should be used in the body of `pages/_document.js` in place of `NextScript`.
+ */
+export default class NextScriptDeferred extends NextScript {
+  getScripts() {
+    return super.getScripts().map(script => {
+      return React.cloneElement(script, {
+        key: script.props.src,
+        defer: true,
+        async: undefined,
+      })
+    })
+  }
+}
diff --git a/test/NextScriptDeferred.test.js b/test/NextScriptDeferred.test.js
new file mode 100644
index 00000000..42466935
--- /dev/null
+++ b/test/NextScriptDeferred.test.js
@@ -0,0 +1,31 @@
+import React, { Component } from 'react'
+import { mount } from 'enzyme'
+
+describe('NextScriptDeferred', () => {
+  let NextScriptDeferred
+
+  beforeEach(() => {
+    jest.isolateModules(() => {
+      jest.doMock('next/document', () => ({
+        NextScript: class NextScript extends Component {
+          getScripts() {
+            return [<script src="foo.js" async />]
+          }
+
+          render() {
+            return <>{this.getScripts()}</>
+          }
+        },
+      }))
+
+      NextScriptDeferred = require('react-storefront/NextScriptDeferred').default
+    })
+  })
+
+  it('should remove async and add defer to all script tags returned from super.getScripts', () => {
+    const wrapper = mount(<NextScriptDeferred />)
+    const scriptProps = wrapper.find('script').props()
+    expect(scriptProps.async).not.toBeDefined()
+    expect(scriptProps.defer).toBe(true)
+  })
+})

From c9e11a186da690d4d209874a832ed5d9f5ebd1a4 Mon Sep 17 00:00:00 2001
From: Mark Brocato <mark.brocato@moovweb.com>
Date: Tue, 9 Jun 2020 11:51:55 +0300
Subject: [PATCH 2/3] Add mode

---
 src/NextScriptDeferred.js       | 20 --------------------
 test/NextScriptDeferred.test.js | 31 -------------------------------
 2 files changed, 51 deletions(-)
 delete mode 100644 src/NextScriptDeferred.js
 delete mode 100644 test/NextScriptDeferred.test.js

diff --git a/src/NextScriptDeferred.js b/src/NextScriptDeferred.js
deleted file mode 100644
index 2b3e26a0..00000000
--- a/src/NextScriptDeferred.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react'
-import { NextScript } from 'next/document'
-
-/**
- * Adds script elements for Next.js static assets with defer instead of async
- * to improve paint metrics in lighthouse.
- *
- * This should be used in the body of `pages/_document.js` in place of `NextScript`.
- */
-export default class NextScriptDeferred extends NextScript {
-  getScripts() {
-    return super.getScripts().map(script => {
-      return React.cloneElement(script, {
-        key: script.props.src,
-        defer: true,
-        async: undefined,
-      })
-    })
-  }
-}
diff --git a/test/NextScriptDeferred.test.js b/test/NextScriptDeferred.test.js
deleted file mode 100644
index 42466935..00000000
--- a/test/NextScriptDeferred.test.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import React, { Component } from 'react'
-import { mount } from 'enzyme'
-
-describe('NextScriptDeferred', () => {
-  let NextScriptDeferred
-
-  beforeEach(() => {
-    jest.isolateModules(() => {
-      jest.doMock('next/document', () => ({
-        NextScript: class NextScript extends Component {
-          getScripts() {
-            return [<script src="foo.js" async />]
-          }
-
-          render() {
-            return <>{this.getScripts()}</>
-          }
-        },
-      }))
-
-      NextScriptDeferred = require('react-storefront/NextScriptDeferred').default
-    })
-  })
-
-  it('should remove async and add defer to all script tags returned from super.getScripts', () => {
-    const wrapper = mount(<NextScriptDeferred />)
-    const scriptProps = wrapper.find('script').props()
-    expect(scriptProps.async).not.toBeDefined()
-    expect(scriptProps.defer).toBe(true)
-  })
-})

From ca205621c23e9288d03e488bbd3ddd196d3c7d5d Mon Sep 17 00:00:00 2001
From: Mark Brocato <mark.brocato@moovweb.com>
Date: Tue, 9 Jun 2020 11:52:11 +0300
Subject: [PATCH 3/3] add missing files

---
 src/NextScript.js       | 30 ++++++++++++++++++++++++++++++
 test/NextScript.test.js | 38 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 68 insertions(+)
 create mode 100644 src/NextScript.js
 create mode 100644 test/NextScript.test.js

diff --git a/src/NextScript.js b/src/NextScript.js
new file mode 100644
index 00000000..041160f2
--- /dev/null
+++ b/src/NextScript.js
@@ -0,0 +1,30 @@
+import React from 'react'
+import { NextScript as OriginalNextScript } from 'next/document'
+import PropTypes from 'prop-types'
+
+/**
+ * A replacement for NextScript from `next/document` that gives you greater control over how script elements are rendered.
+ * This should be used in the body of `pages/_document.js` in place of `NextScript`.
+ */
+export default class NextScript extends OriginalNextScript {
+  static propTypes = {
+    /**
+     * Set to `defer` to use `defer` instead of `async` when rendering script elements.
+     */
+    mode: PropTypes.oneOf(['async', 'defer']),
+  }
+
+  static defaultProps = {
+    mode: 'async',
+  }
+
+  getScripts() {
+    return super.getScripts().map(script => {
+      return React.cloneElement(script, {
+        key: script.props.src,
+        defer: this.props.mode === 'defer' ? true : undefined,
+        async: this.props.mode === 'async' ? true : undefined,
+      })
+    })
+  }
+}
diff --git a/test/NextScript.test.js b/test/NextScript.test.js
new file mode 100644
index 00000000..ca38a4bf
--- /dev/null
+++ b/test/NextScript.test.js
@@ -0,0 +1,38 @@
+import React, { Component } from 'react'
+import { mount } from 'enzyme'
+
+describe('NextScriptDeferred', () => {
+  let NextScript
+
+  beforeEach(() => {
+    jest.isolateModules(() => {
+      jest.doMock('next/document', () => ({
+        NextScript: class OriginalNextScript extends Component {
+          getScripts() {
+            return [<script src="foo.js" async />]
+          }
+
+          render() {
+            return <>{this.getScripts()}</>
+          }
+        },
+      }))
+
+      NextScript = require('react-storefront/NextScript').default
+    })
+  })
+
+  it('should remove async and add defer to all script tags returned from super.getScripts', () => {
+    const wrapper = mount(<NextScript mode="defer" />)
+    const scriptProps = wrapper.find('script').props()
+    expect(scriptProps.async).toBe(undefined)
+    expect(scriptProps.defer).toBe(true)
+  })
+
+  it('should use async by default', () => {
+    const wrapper = mount(<NextScript />)
+    const scriptProps = wrapper.find('script').props()
+    expect(scriptProps.async).toBe(true)
+    expect(scriptProps.defer).toBe(undefined)
+  })
+})