diff --git a/packages/server/src/ChunkExtractor.js b/packages/server/src/ChunkExtractor.js
index bf0cf47c..a1cd755b 100644
--- a/packages/server/src/ChunkExtractor.js
+++ b/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 ``
+ }"${extraPropsToString(extraProps)}>`
}
-function assetToScriptElement(asset) {
+function assetToScriptElement(asset, extraProps) {
return (
-
+
)
}
@@ -44,13 +48,13 @@ function assetToStyleString(asset) {
})
}
-function assetToStyleTag(asset) {
+function assetToStyleTag(asset, extraProps) {
return ``
+ }"${extraPropsToString(extraProps)}>`
}
-function assetToStyleTagInline(asset) {
+function assetToStyleTagInline(asset, extraProps) {
return new Promise((resolve, reject) => {
fs.readFile(asset.path, 'utf8', (err, data) => {
if (err) {
@@ -58,7 +62,7 @@ function assetToStyleTagInline(asset) {
return
}
resolve(
- ``,
)
@@ -66,18 +70,19 @@ ${data}
})
}
-function assetToStyleElement(asset) {
+function assetToStyleElement(asset, extraProps) {
return (
)
}
-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 ``
+ getRequiredChunksScriptTag(extraProps) {
+ return ``
}
- getRequiredChunksScriptElement() {
+ getRequiredChunksScriptElement(extraProps) {
return (
)
}
@@ -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)
}
diff --git a/packages/server/src/ChunkExtractor.test.js b/packages/server/src/ChunkExtractor.test.js
index 79e5d6b9..c064eeeb 100644
--- a/packages/server/src/ChunkExtractor.test.js
+++ b/packages/server/src/ChunkExtractor.test.js
@@ -54,6 +54,16 @@ describe('ChunkExtrator', () => {
"
"
+`)
+ })
+
+ it('should add extra props if specified', () => {
+ extractor.addChunk('letters-A')
+ expect(extractor.getScriptTags({ nonce: 'testnonce' }))
+ .toMatchInlineSnapshot(`
+"
+
+"
`)
})
})
@@ -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 [
+ ,
+ ,
+ ,
+]
`)
})
})
@@ -116,6 +155,15 @@ Array [
expect(extractor.getStyleTags()).toMatchInlineSnapshot(`
"
"
+`)
+ })
+
+ it('should add extraProps if specified', () => {
+ extractor.addChunk('letters-A')
+ expect(extractor.getStyleTags({ nonce: 'testnonce' }))
+ .toMatchInlineSnapshot(`
+"
+"
`)
})
})
@@ -137,6 +185,26 @@ h1 {
color: cyan;
}
"
+`),
+ )
+ })
+
+ it('should add extraProps if specified', () => {
+ extractor.addChunk('letters-A')
+ expect.assertions(1)
+ return extractor.getInlineStyleTags({ nonce: 'testnonce' }).then(data =>
+ expect(data).toMatchInlineSnapshot(`
+"
+"
`),
)
})
@@ -170,6 +238,27 @@ Array [
rel="stylesheet"
/>,
]
+`)
+ })
+
+ it('should add extraProps if specified', () => {
+ extractor.addChunk('letters-A')
+ expect(extractor.getStyleElements({ nonce: 'testnonce' }))
+ .toMatchInlineSnapshot(`
+Array [
+ ,
+ ,
+]
`)
})
})