feat: allow to specify extra attributes in getScriptTags & others (#210)

Author: nchaulet

packages/server/src/ChunkExtractor.js

@@ -20,15 +20,19 @@ function getAssets(chunks, getAsset) {
   return _.uniqBy(_.flatMap(chunks, chunk => getAsset(chunk)), 'url')
 }
 
-function assetToScriptTag(asset) {
+function extraPropsToString(extraProps) {
+  return Object.keys(extraProps).reduce((acc, key) => `${acc} ${key}="${extraProps[key]}"`, '');
+}
+
+function assetToScriptTag(asset, extraProps) {
   return `<script async data-chunk="${asset.chunk}" src="${
     asset.url
-  }"></script>`
+  }"${extraPropsToString(extraProps)}></script>`
 }
 
-function assetToScriptElement(asset) {
+function assetToScriptElement(asset, extraProps) {
   return (
-    <script key={asset.url} async data-chunk={asset.chunk} src={asset.url} />
+    <script key={asset.url} async data-chunk={asset.chunk} src={asset.url} {...extraProps} />
   )
 }
 
@@ -44,40 +48,41 @@ function assetToStyleString(asset) {
   })
 }
 
-function assetToStyleTag(asset) {
+function assetToStyleTag(asset, extraProps) {
   return `<link data-chunk="${asset.chunk}" rel="stylesheet" href="${
     asset.url
-  }">`
+  }"${extraPropsToString(extraProps)}>`
 }
 
-function assetToStyleTagInline(asset) {
+function assetToStyleTagInline(asset, extraProps) {
   return new Promise((resolve, reject) => {
     fs.readFile(asset.path, 'utf8', (err, data) => {
       if (err) {
         reject(err)
         return
       }
       resolve(
-        `<style type="text/css" data-chunk="${asset.chunk}">
+        `<style type="text/css" data-chunk="${asset.chunk}"${extraPropsToString(extraProps)}>
 ${data}
 </style>`,
       )
     })
   })
 }
 
-function assetToStyleElement(asset) {
+function assetToStyleElement(asset, extraProps) {
   return (
     <link
       key={asset.url}
       data-chunk={asset.chunk}
       rel="stylesheet"
       href={asset.url}
+      {...extraProps}
     />
   )
 }
 
-function assetToStyleElementInline(asset) {
+function assetToStyleElementInline(asset, extraProps) {
   return new Promise((resolve, reject) => {
     fs.readFile(asset.path, 'utf8', (err, data) => {
       if (err) {
@@ -89,6 +94,7 @@ function assetToStyleElementInline(asset) {
           key={asset.url}
           data-chunk={asset.chunk}
           dangerouslySetInnerHTML={{ __html: data }}
+          {...extraProps}
         />,
       )
     })
@@ -225,17 +231,18 @@ class ChunkExtractor {
     )};`
   }
 
-  getRequiredChunksScriptTag() {
-    return `<script>${this.getRequiredChunksScriptContent()}</script>`
+  getRequiredChunksScriptTag(extraProps) {
+    return `<script${extraPropsToString(extraProps)}>${this.getRequiredChunksScriptContent()}</script>`
   }
 
-  getRequiredChunksScriptElement() {
+  getRequiredChunksScriptElement(extraProps) {
     return (
       <script
         key="required"
         dangerouslySetInnerHTML={{
           __html: this.getRequiredChunksScriptContent(),
         }}
+        {...extraProps}
       />
     )
   }
@@ -275,18 +282,18 @@ class ChunkExtractor {
     return assets
   }
 
-  getScriptTags() {
-    const requiredScriptTag = this.getRequiredChunksScriptTag()
+  getScriptTags(extraProps = {}) {
+    const requiredScriptTag = this.getRequiredChunksScriptTag(extraProps)
     const mainAssets = this.getMainAssets('script')
-    const assetsScriptTags = mainAssets.map(asset => assetToScriptTag(asset))
+    const assetsScriptTags = mainAssets.map(asset => assetToScriptTag(asset, extraProps))
     return joinTags([requiredScriptTag, ...assetsScriptTags])
   }
 
-  getScriptElements() {
-    const requiredScriptElement = this.getRequiredChunksScriptElement()
+  getScriptElements(extraProps = {}) {
+    const requiredScriptElement = this.getRequiredChunksScriptElement(extraProps)
     const mainAssets = this.getMainAssets('script')
     const assetsScriptElements = mainAssets.map(asset =>
-      assetToScriptElement(asset),
+      assetToScriptElement(asset, extraProps),
     )
     return [requiredScriptElement, ...assetsScriptElements]
   }
@@ -299,28 +306,28 @@ class ChunkExtractor {
     return Promise.all(promises).then(results => joinTags(results))
   }
 
-  getStyleTags() {
+  getStyleTags(extraProps = {}) {
     const mainAssets = this.getMainAssets('style')
-    return joinTags(mainAssets.map(asset => assetToStyleTag(asset)))
+    return joinTags(mainAssets.map(asset => assetToStyleTag(asset, extraProps)))
   }
 
-  getInlineStyleTags() {
+  getInlineStyleTags(extraProps = {}) {
     const mainAssets = this.getMainAssets('style')
     const promises = mainAssets.map(asset =>
-      assetToStyleTagInline(asset).then(data => data),
+      assetToStyleTagInline(asset, extraProps).then(data => data),
     )
     return Promise.all(promises).then(results => joinTags(results))
   }
 
-  getStyleElements() {
+  getStyleElements(extraProps = {}) {
     const mainAssets = this.getMainAssets('style')
-    return mainAssets.map(asset => assetToStyleElement(asset))
+    return mainAssets.map(asset => assetToStyleElement(asset, extraProps))
   }
 
-  getInlineStyleElements() {
+  getInlineStyleElements(extraProps = {}) {
     const mainAssets = this.getMainAssets('style')
     const promises = mainAssets.map(asset =>
-      assetToStyleElementInline(asset).then(data => data),
+      assetToStyleElementInline(asset, extraProps).then(data => data),
     )
     return Promise.all(promises).then(results => results)
   }

packages/server/src/ChunkExtractor.test.js

@@ -54,6 +54,16 @@ describe('ChunkExtrator', () => {
 "<script>window.__LOADABLE_REQUIRED_CHUNKS__ = [\\"letters-A\\"];</script>
 <script async data-chunk=\\"letters-A\\" src=\\"/dist/node/letters-A.js\\"></script>
 <script async data-chunk=\\"main\\" src=\\"/dist/node/main.js\\"></script>"
+`)
+    })
+
+    it('should add extra props if specified', () => {
+      extractor.addChunk('letters-A')
+      expect(extractor.getScriptTags({ nonce: 'testnonce' }))
+        .toMatchInlineSnapshot(`
+"<script nonce=\\"testnonce\\">window.__LOADABLE_REQUIRED_CHUNKS__ = [\\"letters-A\\"];</script>
+<script async data-chunk=\\"letters-A\\" src=\\"/dist/node/letters-A.js\\" nonce=\\"testnonce\\"></script>
+<script async data-chunk=\\"main\\" src=\\"/dist/node/main.js\\" nonce=\\"testnonce\\"></script>"
 `)
     })
   })
@@ -100,6 +110,35 @@ Array [
     src="/dist/node/main.js"
   />,
 ]
+`)
+    })
+
+    it('should add extra props if specified', () => {
+      extractor.addChunk('letters-A')
+      expect(extractor.getScriptElements({ nonce: 'testnonce' }))
+        .toMatchInlineSnapshot(`
+Array [
+  <script
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "window.__LOADABLE_REQUIRED_CHUNKS__ = [\\"letters-A\\"];",
+      }
+    }
+    nonce="testnonce"
+  />,
+  <script
+    async={true}
+    data-chunk="letters-A"
+    nonce="testnonce"
+    src="/dist/node/letters-A.js"
+  />,
+  <script
+    async={true}
+    data-chunk="main"
+    nonce="testnonce"
+    src="/dist/node/main.js"
+  />,
+]
 `)
     })
   })
@@ -116,6 +155,15 @@ Array [
       expect(extractor.getStyleTags()).toMatchInlineSnapshot(`
 "<link data-chunk=\\"letters-A\\" rel=\\"stylesheet\\" href=\\"/dist/node/letters-A.css\\">
 <link data-chunk=\\"main\\" rel=\\"stylesheet\\" href=\\"/dist/node/main.css\\">"
+`)
+    })
+
+    it('should add extraProps if specified', () => {
+      extractor.addChunk('letters-A')
+      expect(extractor.getStyleTags({ nonce: 'testnonce' }))
+        .toMatchInlineSnapshot(`
+"<link data-chunk=\\"letters-A\\" rel=\\"stylesheet\\" href=\\"/dist/node/letters-A.css\\" nonce=\\"testnonce\\">
+<link data-chunk=\\"main\\" rel=\\"stylesheet\\" href=\\"/dist/node/main.css\\" nonce=\\"testnonce\\">"
 `)
     })
   })
@@ -137,6 +185,26 @@ h1 {
   color: cyan;
 }
 </style>"
+`),
+      )
+    })
+
+    it('should add extraProps if specified', () => {
+      extractor.addChunk('letters-A')
+      expect.assertions(1)
+      return extractor.getInlineStyleTags({ nonce: 'testnonce' }).then(data =>
+        expect(data).toMatchInlineSnapshot(`
+"<style type=\\"text/css\\" data-chunk=\\"letters-A\\" nonce=\\"testnonce\\">
+body {
+  background: pink;
+}
+
+</style>
+<style type=\\"text/css\\" data-chunk=\\"main\\" nonce=\\"testnonce\\">
+h1 {
+  color: cyan;
+}
+</style>"
 `),
       )
     })
@@ -170,6 +238,27 @@ Array [
     rel="stylesheet"
   />,
 ]
+`)
+    })
+
+    it('should add extraProps if specified', () => {
+      extractor.addChunk('letters-A')
+      expect(extractor.getStyleElements({ nonce: 'testnonce' }))
+        .toMatchInlineSnapshot(`
+Array [
+  <link
+    data-chunk="letters-A"
+    href="/dist/node/letters-A.css"
+    nonce="testnonce"
+    rel="stylesheet"
+  />,
+  <link
+    data-chunk="main"
+    href="/dist/node/main.css"
+    nonce="testnonce"
+    rel="stylesheet"
+  />,
+]
 `)
     })
   })