Add data attribute to script component (#28310)

Add data attribute `data-nscript` to the script component
vercel · Aug 20, 2021 · 26255a6 · 26255a6
1 parent 8737ac0
commit 26255a6
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 0 deletions.
diff --git a/packages/next/client/script.tsx b/packages/next/client/script.tsx
@@ -35,6 +35,7 @@ const loadScript = (props: ScriptProps): void => {
     onLoad = () => {},
     dangerouslySetInnerHTML,
     children = '',
+    strategy = 'afterInteractive',
     onError,
   } = props
 
@@ -98,6 +99,8 @@ const loadScript = (props: ScriptProps): void => {
     el.setAttribute(attr, value)
   }
 
+  el.setAttribute('data-nscript', strategy)
+
   document.body.appendChild(el)
 }
 

diff --git a/packages/next/pages/_document.tsx b/packages/next/pages/_document.tsx
@@ -84,6 +84,7 @@ function getPreNextScripts(context: HtmlProps, props: OriginProps) {
           key={scriptProps.src || index}
           defer={!disableOptimizedLoading}
           nonce={props.nonce}
+          data-nscript="beforeInteractive"
           crossOrigin={props.crossOrigin || process.env.__NEXT_CROSS_ORIGIN}
         />
       )

diff --git a/test/integration/script-loader/test/index.test.js b/test/integration/script-loader/test/index.test.js
@@ -42,12 +42,15 @@ describe('Script Loader', () => {
 
       async function test(id) {
         const script = await browser.elementById(id)
+        const dataAttr = await script.getAttribute('data-nscript')
         const endScripts = await browser.elementsByCss(
           `#__NEXT_DATA__ ~ #${id}`
         )
 
         // Renders script tag
         expect(script).toBeDefined()
+        expect(dataAttr).toBeDefined()
+
         // Script is inserted at the end
         expect(endScripts.length).toBe(1)
       }
@@ -77,12 +80,15 @@ describe('Script Loader', () => {
 
       async function test(id) {
         const script = await browser.elementById(id)
+        const dataAttr = await script.getAttribute('data-nscript')
         const endScripts = await browser.elementsByCss(
           `#__NEXT_DATA__ ~ #${id}`
         )
 
         // Renders script tag
         expect(script).toBeDefined()
+        expect(dataAttr).toBeDefined()
+
         // Script is inserted at the end
         expect(endScripts.length).toBe(1)
       }
@@ -105,6 +111,7 @@ describe('Script Loader', () => {
 
       // Renders script tag
       expect(script.length).toBe(1)
+      expect(script.attr('data-nscript')).toBeDefined()
 
       // Script is inserted before NextScripts
       expect(