From 43116222642f8be0be88f0566f18bf89c8115ef9 Mon Sep 17 00:00:00 2001
From: Janicklas Ralph James <janicklas@google.com>
Date: Tue, 25 May 2021 13:59:18 -0700
Subject: [PATCH 1/6] Script component docs

---
 docs/basic-features/script.md | 47 +++++++++++++++++++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 docs/basic-features/script.md

diff --git a/docs/basic-features/script.md b/docs/basic-features/script.md
new file mode 100644
index 0000000000000..dc1cb97285923
--- /dev/null
+++ b/docs/basic-features/script.md
@@ -0,0 +1,47 @@
+---
+description: Next.js supports built-in third-party Script loading optimization
+---
+
+# Script Component
+
+Since version **10.2**, Next.js has built-in Script component.
+
+Example of usage
+
+```js
+import Script from 'next/script'
+
+// Before
+<script
+  async
+  src="https://www.google-analytics.com/analytics.js"
+/>
+
+// After
+<Script
+  src="https://www.google-analytics.com/analytics.js"
+/>
+```
+
+Three loading strategies will be initially supported for wrapping 3Ps:
+
+- before-interactive
+  - script is fetched and executed _before_ page is interactive (i.e. before self-bundled javascript is executed)
+  - script is injected in SSR’s HTML - similar to self-bundled JS
+- after-interactive (**default**)
+  - script is fetched and executed _after_ page is interactive (i.e. after self-bundled javascript is executed)
+  - script is injected during hydration and will execute soon after hydration
+- lazy-onload
+  - script is injected at onload, and will execute in a subsequent idle period (using rIC)
+
+NOTE: above strategies work the same for inline scripts wrapped with ScriptLoader.
+
+## Which 3Ps to wrap with Script Loader
+
+We recommend the following Script Loader strategies for these categories of 3Ps
+
+| Loading strategy   | 3P categories                                                                                |
+| ------------------ | -------------------------------------------------------------------------------------------- |
+| before-interactive | polyfill.io<br>Bot detection, security & authentication<br>User consent management (GDPR)    |
+| after-interactive  | Tag-managers<br>Analytics                                                                    |
+| lazy-onload        | customer relationship management eg. Google feedback, chat support widget<br>social networks |

From b54bfff8fabcee9b432da074ec980f304f1ad0cf Mon Sep 17 00:00:00 2001
From: Janicklas Ralph James <janicklas@google.com>
Date: Wed, 9 Jun 2021 11:15:36 -0700
Subject: [PATCH 2/6] Update docs with examples and feedback changes

---
 docs/basic-features/script.md                 | 63 +++++++++++++++----
 .../script-loader/pages/_document.js          |  5 --
 2 files changed, 50 insertions(+), 18 deletions(-)

diff --git a/docs/basic-features/script.md b/docs/basic-features/script.md
index dc1cb97285923..e13c05e95a61c 100644
--- a/docs/basic-features/script.md
+++ b/docs/basic-features/script.md
@@ -4,7 +4,7 @@ description: Next.js supports built-in third-party Script loading optimization
 
 # Script Component
 
-Since version **10.2**, Next.js has built-in Script component.
+Since version **11**, Next.js has built-in Script component.
 
 Example of usage
 
@@ -12,7 +12,7 @@ Example of usage
 import Script from 'next/script'
 
 // Before
-<script
+<cript
   async
   src="https://www.google-analytics.com/analytics.js"
 />
@@ -23,25 +23,62 @@ import Script from 'next/script'
 />
 ```
 
-Three loading strategies will be initially supported for wrapping 3Ps:
+Three loading strategies will be initially supported for wrapping third-party scripts:
 
-- before-interactive
+- beforeInteractive
   - script is fetched and executed _before_ page is interactive (i.e. before self-bundled javascript is executed)
   - script is injected in SSR’s HTML - similar to self-bundled JS
-- after-interactive (**default**)
+- afterInteractive (**default**)
   - script is fetched and executed _after_ page is interactive (i.e. after self-bundled javascript is executed)
   - script is injected during hydration and will execute soon after hydration
-- lazy-onload
+- lazyOnload
   - script is injected at onload, and will execute in a subsequent idle period (using rIC)
 
 NOTE: above strategies work the same for inline scripts wrapped with ScriptLoader.
 
-## Which 3Ps to wrap with Script Loader
+Example scenarios
 
-We recommend the following Script Loader strategies for these categories of 3Ps
+```js
+import Script from 'next/script'
+
+
+// Loading polyfills before-interactive
+<Script
+  src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserverEntry%2CIntersectionObserver"
+  strategy="beforeInteractive"
+></Script>
+
+// Lazy load FB scripts
+<Script
+  src="https://connect.facebook.net/en_US/sdk.js"
+  strategy="lazyOnload"
+></Script>
+
+// Use the onLoad callback to execute code on script load
+<Script id="stripe-js" src="https://js.stripe.com/v3/" onLoad={() => {
+  this.setState({stripe: window.Stripe('pk_test_12345')});
+}}></Script>
+
+// Loading strategy works for inline scripts too
+<Script strategy="lazyOnload">
+  {`document.getElementById('banner').removeClass('hidden')`}
+</Script>
+
+// or
+<Script
+  dangerouslySetInnerHTML={{
+    __html: `document.getElementById('banner').removeClass('hidden')`,
+  }}
+>
+</Script>
+```
+
+## Which third-party scripts to wrap with Script Loader
+
+We recommend the following Script Loader strategies for these categories of third-party scripts
 
-| Loading strategy   | 3P categories                                                                                |
-| ------------------ | -------------------------------------------------------------------------------------------- |
-| before-interactive | polyfill.io<br>Bot detection, security & authentication<br>User consent management (GDPR)    |
-| after-interactive  | Tag-managers<br>Analytics                                                                    |
-| lazy-onload        | customer relationship management eg. Google feedback, chat support widget<br>social networks |
+| Loading strategy  | 3P categories                                                                                |
+| ----------------- | -------------------------------------------------------------------------------------------- |
+| beforeInteractive | polyfill.io<br>Bot detection, security & authentication<br>User consent management (GDPR)    |
+| afterInteractive  | Tag-managers<br>Analytics                                                                    |
+| lazyOnload        | customer relationship management eg. Google feedback, chat support widget<br>social networks |
diff --git a/test/integration/script-loader/pages/_document.js b/test/integration/script-loader/pages/_document.js
index d0b9a63d3a4a1..930580e96dd83 100644
--- a/test/integration/script-loader/pages/_document.js
+++ b/test/integration/script-loader/pages/_document.js
@@ -30,11 +30,6 @@ export default class MyDocument extends Document {
             src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js?a=documentLazyOnload"
             strategy="lazyOnload"
           ></Script>
-          <Script
-            id="documentBlock"
-            src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js?a=documentBlock"
-            strategy="dangerouslyBlockRendering"
-          ></Script>
           <Script
             id="documentBeforeInteractive"
             src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js?a=documentBeforeInteractive"

From 45e2dd367b36f0f40ccaa84a3600255c481a0485 Mon Sep 17 00:00:00 2001
From: Janicklas Ralph James <janicklas@google.com>
Date: Wed, 9 Jun 2021 11:18:30 -0700
Subject: [PATCH 3/6] Fix typo

---
 docs/basic-features/script.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/basic-features/script.md b/docs/basic-features/script.md
index e13c05e95a61c..81b5cc1362ab1 100644
--- a/docs/basic-features/script.md
+++ b/docs/basic-features/script.md
@@ -12,7 +12,7 @@ Example of usage
 import Script from 'next/script'
 
 // Before
-<cript
+<Script
   async
   src="https://www.google-analytics.com/analytics.js"
 />

From 2862abfa527d50094fc59af356a85944e8e25632 Mon Sep 17 00:00:00 2001
From: Janicklas Ralph James <janicklas@google.com>
Date: Wed, 9 Jun 2021 13:14:01 -0700
Subject: [PATCH 4/6] Add example

---
 docs/basic-features/script.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/docs/basic-features/script.md b/docs/basic-features/script.md
index 81b5cc1362ab1..3a319df6310f0 100644
--- a/docs/basic-features/script.md
+++ b/docs/basic-features/script.md
@@ -71,6 +71,14 @@ import Script from 'next/script'
   }}
 >
 </Script>
+
+// All script attributes are forwarded to the final element
+<Script
+  src="https://www.google-analytics.com/analytics.js"
+  id="analytics"
+  nonce="XUENAJFW"
+  data-test="analytics"
+></Script>
 ```
 
 ## Which third-party scripts to wrap with Script Loader

From 53fdcd15d11450008d23325e1b5dc5ff3165a6c8 Mon Sep 17 00:00:00 2001
From: Janicklas Ralph James <janicklas@google.com>
Date: Mon, 14 Jun 2021 13:07:36 -0700
Subject: [PATCH 5/6] Update text

---
 docs/basic-features/script.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/basic-features/script.md b/docs/basic-features/script.md
index 3a319df6310f0..12ce5d2ee2a4b 100644
--- a/docs/basic-features/script.md
+++ b/docs/basic-features/script.md
@@ -1,5 +1,5 @@
 ---
-description: Next.js supports built-in third-party Script loading optimization
+description: Next.js helps you optimize loading third-party scripts with the built-in next/script component.
 ---
 
 # Script Component

From fee393f7fc1451ec4ea2b78be494665e856e9072 Mon Sep 17 00:00:00 2001
From: JJ Kasper <jj@jjsweb.site>
Date: Tue, 15 Jun 2021 09:14:35 -0500
Subject: [PATCH 6/6] Apply suggestions from code review

---
 docs/basic-features/script.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/basic-features/script.md b/docs/basic-features/script.md
index 12ce5d2ee2a4b..ba9f45c9e63af 100644
--- a/docs/basic-features/script.md
+++ b/docs/basic-features/script.md
@@ -4,7 +4,7 @@ description: Next.js helps you optimize loading third-party scripts with the bui
 
 # Script Component
 
-Since version **11**, Next.js has built-in Script component.
+Since version **11**, Next.js has a built-in Script component.
 
 Example of usage
 
@@ -32,7 +32,7 @@ Three loading strategies will be initially supported for wrapping third-party sc
   - script is fetched and executed _after_ page is interactive (i.e. after self-bundled javascript is executed)
   - script is injected during hydration and will execute soon after hydration
 - lazyOnload
-  - script is injected at onload, and will execute in a subsequent idle period (using rIC)
+  - script is injected at onload, and will execute in a subsequent idle period (using `requestIdleCallback`)
 
 NOTE: above strategies work the same for inline scripts wrapped with ScriptLoader.
 
@@ -85,7 +85,7 @@ import Script from 'next/script'
 
 We recommend the following Script Loader strategies for these categories of third-party scripts
 
-| Loading strategy  | 3P categories                                                                                |
+| Loading strategy  | third-party categories                                                                       |
 | ----------------- | -------------------------------------------------------------------------------------------- |
 | beforeInteractive | polyfill.io<br>Bot detection, security & authentication<br>User consent management (GDPR)    |
 | afterInteractive  | Tag-managers<br>Analytics                                                                    |