Skip to content

Commit

Permalink
fix: Add extra props option for links (#212)
Browse files Browse the repository at this point in the history
  • Loading branch information
mattcompiles authored and gregberge committed Jan 29, 2019
1 parent 69dbb8b commit 6714d2a
Show file tree
Hide file tree
Showing 2 changed files with 95 additions and 13 deletions.
44 changes: 31 additions & 13 deletions packages/server/src/ChunkExtractor.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,10 @@ function getAssets(chunks, getAsset) {
}

function extraPropsToString(extraProps) {
return Object.keys(extraProps).reduce((acc, key) => `${acc} ${key}="${extraProps[key]}"`, '');
return Object.keys(extraProps).reduce(
(acc, key) => `${acc} ${key}="${extraProps[key]}"`,
'',
)
}

function assetToScriptTag(asset, extraProps) {
Expand All @@ -32,7 +35,13 @@ function assetToScriptTag(asset, extraProps) {

function assetToScriptElement(asset, extraProps) {
return (
<script key={asset.url} async data-chunk={asset.chunk} src={asset.url} {...extraProps} />
<script
key={asset.url}
async
data-chunk={asset.chunk}
src={asset.url}
{...extraProps}
/>
)
}

Expand Down Expand Up @@ -62,7 +71,9 @@ function assetToStyleTagInline(asset, extraProps) {
return
}
resolve(
`<style type="text/css" data-chunk="${asset.chunk}"${extraPropsToString(extraProps)}>
`<style type="text/css" data-chunk="${asset.chunk}"${extraPropsToString(
extraProps,
)}>
${data}
</style>`,
)
Expand Down Expand Up @@ -106,21 +117,22 @@ const LINK_ASSET_HINTS = {
childAsset: 'data-parent-chunk',
}

function assetToLinkTag(asset) {
function assetToLinkTag(asset, extraProps) {
const hint = LINK_ASSET_HINTS[asset.type]
return `<link ${hint}="${asset.chunk}" rel="${asset.linkType}" as="${
asset.scriptType
}" href="${asset.url}">`
}" href="${asset.url}"${extraPropsToString(extraProps)}>`
}

function assetToLinkElement(asset) {
function assetToLinkElement(asset, extraProps) {
const hint = LINK_ASSET_HINTS[asset.type]
const props = {
key: asset.url,
[hint]: asset.chunk,
rel: asset.linkType,
as: asset.scriptType,
href: asset.url,
...extraProps,
}
return <link {...props} />
}
Expand Down Expand Up @@ -232,7 +244,9 @@ class ChunkExtractor {
}

getRequiredChunksScriptTag(extraProps) {
return `<script${extraPropsToString(extraProps)}>${this.getRequiredChunksScriptContent()}</script>`
return `<script${extraPropsToString(
extraProps,
)}>${this.getRequiredChunksScriptContent()}</script>`
}

getRequiredChunksScriptElement(extraProps) {
Expand Down Expand Up @@ -285,12 +299,16 @@ class ChunkExtractor {
getScriptTags(extraProps = {}) {
const requiredScriptTag = this.getRequiredChunksScriptTag(extraProps)
const mainAssets = this.getMainAssets('script')
const assetsScriptTags = mainAssets.map(asset => assetToScriptTag(asset, extraProps))
const assetsScriptTags = mainAssets.map(asset =>
assetToScriptTag(asset, extraProps),
)
return joinTags([requiredScriptTag, ...assetsScriptTags])
}

getScriptElements(extraProps = {}) {
const requiredScriptElement = this.getRequiredChunksScriptElement(extraProps)
const requiredScriptElement = this.getRequiredChunksScriptElement(
extraProps,
)
const mainAssets = this.getMainAssets('script')
const assetsScriptElements = mainAssets.map(asset =>
assetToScriptElement(asset, extraProps),
Expand Down Expand Up @@ -342,15 +360,15 @@ class ChunkExtractor {
return [...mainAssets, ...preloadAssets, ...prefetchAssets]
}

getLinkTags() {
getLinkTags(extraProps = {}) {
const assets = this.getPreAssets()
const linkTags = assets.map(asset => assetToLinkTag(asset))
const linkTags = assets.map(asset => assetToLinkTag(asset, extraProps))
return joinTags(linkTags)
}

getLinkElements() {
getLinkElements(extraProps = {}) {
const assets = this.getPreAssets()
return assets.map(asset => assetToLinkElement(asset))
return assets.map(asset => assetToLinkElement(asset, extraProps))
}
}

Expand Down
64 changes: 64 additions & 0 deletions packages/server/src/ChunkExtractor.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -334,6 +334,19 @@ h1 {
<link data-chunk=\\"main\\" rel=\\"preload\\" as=\\"script\\" href=\\"/dist/node/main.js\\">
<link data-parent-chunk=\\"main\\" rel=\\"preload\\" as=\\"script\\" href=\\"/dist/node/letters-C.js\\">
<link data-parent-chunk=\\"main\\" rel=\\"prefetch\\" as=\\"script\\" href=\\"/dist/node/letters-D.js\\">"
`)
})

it('should add extraProps if specified', () => {
extractor.addChunk('letters-A')
expect(extractor.getLinkTags({ nonce: 'testnonce' }))
.toMatchInlineSnapshot(`
"<link data-chunk=\\"letters-A\\" rel=\\"preload\\" as=\\"style\\" href=\\"/dist/node/letters-A.css\\" nonce=\\"testnonce\\">
<link data-chunk=\\"letters-A\\" rel=\\"preload\\" as=\\"script\\" href=\\"/dist/node/letters-A.js\\" nonce=\\"testnonce\\">
<link data-chunk=\\"main\\" rel=\\"preload\\" as=\\"style\\" href=\\"/dist/node/main.css\\" nonce=\\"testnonce\\">
<link data-chunk=\\"main\\" rel=\\"preload\\" as=\\"script\\" href=\\"/dist/node/main.js\\" nonce=\\"testnonce\\">
<link data-parent-chunk=\\"main\\" rel=\\"preload\\" as=\\"script\\" href=\\"/dist/node/letters-C.js\\" nonce=\\"testnonce\\">
<link data-parent-chunk=\\"main\\" rel=\\"prefetch\\" as=\\"script\\" href=\\"/dist/node/letters-D.js\\" nonce=\\"testnonce\\">"
`)
})
})
Expand Down Expand Up @@ -411,6 +424,57 @@ Array [
rel="prefetch"
/>,
]
`)
})

it('should add extraProps if specified', () => {
extractor.addChunk('letters-A')
expect(extractor.getLinkElements({ nonce: 'testnonce' }))
.toMatchInlineSnapshot(`
Array [
<link
as="style"
data-chunk="letters-A"
href="/dist/node/letters-A.css"
nonce="testnonce"
rel="preload"
/>,
<link
as="script"
data-chunk="letters-A"
href="/dist/node/letters-A.js"
nonce="testnonce"
rel="preload"
/>,
<link
as="style"
data-chunk="main"
href="/dist/node/main.css"
nonce="testnonce"
rel="preload"
/>,
<link
as="script"
data-chunk="main"
href="/dist/node/main.js"
nonce="testnonce"
rel="preload"
/>,
<link
as="script"
data-parent-chunk="main"
href="/dist/node/letters-C.js"
nonce="testnonce"
rel="preload"
/>,
<link
as="script"
data-parent-chunk="main"
href="/dist/node/letters-D.js"
nonce="testnonce"
rel="prefetch"
/>,
]
`)
})
})
Expand Down

0 comments on commit 6714d2a

Please sign in to comment.