Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

implement attribute function #277

Merged
merged 3 commits into from
Apr 3, 2019
Merged

implement attribute function #277

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7645586
implement attribute function
samio Mar 17, 2019
e44d8f1
remove unnecessary argument
samio Mar 19, 2019
008084b
add documentation
samio Mar 27, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 17 additions & 11 deletions packages/server/src/ChunkExtractor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,17 +20,21 @@ function getAssets(chunks, getAsset) {
return _.uniqBy(_.flatMap(chunks, chunk => getAsset(chunk)), 'url')
}

function extraPropsToString(extraProps) {
return Object.keys(extraProps).reduce(
(acc, key) => `${acc} ${key}="${extraProps[key]}"`,
function handleExtraProps(asset, extraProps) {
return typeof extraProps === 'function' ? extraProps(asset) : extraProps
}

function extraPropsToString(asset, extraProps) {
return Object.entries(handleExtraProps(asset, extraProps)).reduce(
(acc, [key, value]) => `${acc} ${key}="${value}"`,
'',
)
}

function assetToScriptTag(asset, extraProps) {
return `<script async data-chunk="${asset.chunk}" src="${
asset.url
}"${extraPropsToString(extraProps)}></script>`
}"${extraPropsToString(asset, extraProps)}></script>`
}

function assetToScriptElement(asset, extraProps) {
Expand All @@ -40,7 +44,7 @@ function assetToScriptElement(asset, extraProps) {
async
data-chunk={asset.chunk}
src={asset.url}
{...extraProps}
{...handleExtraProps(asset, extraProps)}
/>
)
}
Expand All @@ -60,7 +64,7 @@ function assetToStyleString(asset) {
function assetToStyleTag(asset, extraProps) {
return `<link data-chunk="${asset.chunk}" rel="stylesheet" href="${
asset.url
}"${extraPropsToString(extraProps)}>`
}"${extraPropsToString(asset, extraProps)}>`
}

function assetToStyleTagInline(asset, extraProps) {
Expand All @@ -72,6 +76,7 @@ function assetToStyleTagInline(asset, extraProps) {
}
resolve(
`<style type="text/css" data-chunk="${asset.chunk}"${extraPropsToString(
asset,
extraProps,
)}>
${data}
Expand All @@ -88,7 +93,7 @@ function assetToStyleElement(asset, extraProps) {
data-chunk={asset.chunk}
rel="stylesheet"
href={asset.url}
{...extraProps}
{...handleExtraProps(asset, extraProps)}
/>
)
}
Expand All @@ -105,7 +110,7 @@ function assetToStyleElementInline(asset, extraProps) {
key={asset.url}
data-chunk={asset.chunk}
dangerouslySetInnerHTML={{ __html: data }}
{...extraProps}
{...handleExtraProps(asset, extraProps)}
/>,
)
})
Expand All @@ -121,7 +126,7 @@ 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}"${extraPropsToString(extraProps)}>`
}" href="${asset.url}"${extraPropsToString(asset, extraProps)}>`
}

function assetToLinkElement(asset, extraProps) {
Expand All @@ -132,7 +137,7 @@ function assetToLinkElement(asset, extraProps) {
rel: asset.linkType,
as: asset.scriptType,
href: asset.url,
...extraProps,
...handleExtraProps(asset, extraProps),
}
return <link {...props} />
}
Expand Down Expand Up @@ -248,6 +253,7 @@ class ChunkExtractor {

getRequiredChunksScriptTag(extraProps) {
return `<script id="${LOADABLE_REQUIRED_CHUNKS_KEY}" type="application/json"${extraPropsToString(
null,
extraProps,
)}>${this.getRequiredChunksScriptContent()}</script>`
}
Expand All @@ -261,7 +267,7 @@ class ChunkExtractor {
dangerouslySetInnerHTML={{
__html: this.getRequiredChunksScriptContent(),
}}
{...extraProps}
{...handleExtraProps(null, extraProps)}
/>
)
}
Expand Down
127 changes: 121 additions & 6 deletions packages/server/src/ChunkExtractor.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,13 +66,26 @@ describe('ChunkExtrator', () => {
`)
})

it('should add extra props if specified', () => {
it('should add extra props if specified - object argument', () => {
extractor.addChunk('letters-A')
expect(extractor.getScriptTags({ nonce: 'testnonce' }))
.toMatchInlineSnapshot(`
"<script id=\\"__LOADABLE_REQUIRED_CHUNKS__\\" type=\\"application/json\\" nonce=\\"testnonce\\">[\\"letters-A\\"]</script>
<script async data-chunk=\\"main\\" src=\\"/dist/node/main.js\\" nonce=\\"testnonce\\"></script>
<script async data-chunk=\\"letters-A\\" src=\\"/dist/node/letters-A.js\\" nonce=\\"testnonce\\"></script>"
`)
})

it('should add extra props if specified - function argument', () => {
extractor.addChunk('letters-A')
expect(
extractor.getScriptTags(asset => {
return { nonce: asset ? asset.chunk : 'anonymous' }
}),
).toMatchInlineSnapshot(`
"<script id=\\"__LOADABLE_REQUIRED_CHUNKS__\\" type=\\"application/json\\" nonce=\\"anonymous\\">[\\"letters-A\\"]</script>
<script async data-chunk=\\"main\\" src=\\"/dist/node/main.js\\" nonce=\\"main\\"></script>
<script async data-chunk=\\"letters-A\\" src=\\"/dist/node/letters-A.js\\" nonce=\\"letters-A\\"></script>"
`)
})
})
Expand Down Expand Up @@ -153,7 +166,7 @@ Array [
`)
})

it('should add extra props if specified', () => {
it('should add extra props if specified - object argument', () => {
extractor.addChunk('letters-A')
expect(extractor.getScriptElements({ nonce: 'testnonce' }))
.toMatchInlineSnapshot(`
Expand Down Expand Up @@ -181,6 +194,40 @@ Array [
src="/dist/node/letters-A.js"
/>,
]
`)
})

it('should add extra props if specified - function argument', () => {
extractor.addChunk('letters-A')
expect(
extractor.getScriptElements(asset => {
return { nonce: asset ? asset.chunk : 'anonymous' }
}),
).toMatchInlineSnapshot(`
Array [
<script
dangerouslySetInnerHTML={
Object {
"__html": "[\\"letters-A\\"]",
}
}
id="__LOADABLE_REQUIRED_CHUNKS__"
nonce="anonymous"
type="application/json"
/>,
<script
async={true}
data-chunk="main"
nonce="main"
src="/dist/node/main.js"
/>,
<script
async={true}
data-chunk="letters-A"
nonce="letters-A"
src="/dist/node/letters-A.js"
/>,
]
`)
})
})
Expand Down Expand Up @@ -208,12 +255,24 @@ Array [
`)
})

it('should add extraProps if specified', () => {
it('should add extraProps if specified - object argument', () => {
extractor.addChunk('letters-A')
expect(extractor.getStyleTags({ nonce: 'testnonce' }))
.toMatchInlineSnapshot(`
"<link data-chunk=\\"main\\" rel=\\"stylesheet\\" href=\\"/dist/node/main.css\\" nonce=\\"testnonce\\">
<link data-chunk=\\"letters-A\\" rel=\\"stylesheet\\" href=\\"/dist/node/letters-A.css\\" nonce=\\"testnonce\\">"
`)
})

it('should add extraProps if specified - function argument', () => {
extractor.addChunk('letters-A')
expect(
extractor.getStyleTags(asset => ({
nonce: asset ? asset.chunk : 'anonymous',
})),
).toMatchInlineSnapshot(`
"<link data-chunk=\\"main\\" rel=\\"stylesheet\\" href=\\"/dist/node/main.css\\" nonce=\\"main\\">
<link data-chunk=\\"letters-A\\" rel=\\"stylesheet\\" href=\\"/dist/node/letters-A.css\\" nonce=\\"letters-A\\">"
`)
})
})
Expand All @@ -239,7 +298,7 @@ body {
)
})

it('should add extraProps if specified', () => {
it('should add extraProps if specified - object argument', () => {
extractor.addChunk('letters-A')
expect.assertions(1)
return extractor.getInlineStyleTags({ nonce: 'testnonce' }).then(data =>
Expand All @@ -258,6 +317,28 @@ body {
`),
)
})

it('should add extraProps if specified - function argument', () => {
extractor.addChunk('letters-A')
expect.assertions(1)
return extractor
.getInlineStyleTags(asset => ({ nonce: asset.chunk }))
.then(data =>
expect(data).toMatchInlineSnapshot(`
"<style type=\\"text/css\\" data-chunk=\\"main\\" nonce=\\"main\\">
h1 {
color: cyan;
}
</style>
<style type=\\"text/css\\" data-chunk=\\"letters-A\\" nonce=\\"letters-A\\">
body {
background: pink;
}

</style>"
`),
)
})
})

describe('#getStyleElements', () => {
Expand Down Expand Up @@ -309,7 +390,7 @@ Array [
`)
})

it('should add extraProps if specified', () => {
it('should add extraProps if specified - object argument', () => {
extractor.addChunk('letters-A')
expect(extractor.getStyleElements({ nonce: 'testnonce' }))
.toMatchInlineSnapshot(`
Expand All @@ -327,6 +408,27 @@ Array [
rel="stylesheet"
/>,
]
`)
})

it('should add extraProps if specified - function argument', () => {
extractor.addChunk('letters-A')
expect(extractor.getStyleElements(asset => ({ nonce: asset.chunk })))
.toMatchInlineSnapshot(`
Array [
<link
data-chunk="main"
href="/dist/node/main.css"
nonce="main"
rel="stylesheet"
/>,
<link
data-chunk="letters-A"
href="/dist/node/letters-A.css"
nonce="letters-A"
rel="stylesheet"
/>,
]
`)
})
})
Expand Down Expand Up @@ -417,7 +519,7 @@ body {
`)
})

it('should add extraProps if specified', () => {
it('should add extraProps if specified - object argument', () => {
extractor.addChunk('letters-A')
expect(extractor.getLinkTags({ nonce: 'testnonce' }))
.toMatchInlineSnapshot(`
Expand All @@ -427,6 +529,19 @@ body {
<link data-chunk=\\"letters-A\\" rel=\\"preload\\" as=\\"script\\" href=\\"/dist/node/letters-A.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\\">"
`)
})

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