fix: spread nested required chunks array

This commit is contained in:
Mark Woodward 2020-08-04 08:25:46 +01:00
parent 664cfa148a
commit 95e6ecb0dd
2 changed files with 119 additions and 133 deletions

View File

@ -297,7 +297,7 @@ class ChunkExtractor {
].join('')
}
getRequiredChunksScriptElement(extraProps) {
getRequiredChunksScriptElements(extraProps) {
const id = getRequiredChunkKey(this.namespace)
const props = {
type: 'application/json',
@ -381,14 +381,14 @@ class ChunkExtractor {
}
getScriptElements(extraProps = {}) {
const requiredScriptElement = this.getRequiredChunksScriptElement(
const requiredScriptElements = this.getRequiredChunksScriptElements(
extraProps,
)
const mainAssets = this.getMainAssets('script')
const assetsScriptElements = mainAssets.map(asset =>
assetToScriptElement(asset, extraProps),
)
return [requiredScriptElement, ...assetsScriptElements]
return [...requiredScriptElements, ...assetsScriptElements]
}
getCssString() {

View File

@ -133,26 +133,24 @@ describe('ChunkExtrator', () => {
})
expect(extractor.getScriptElements()).toMatchInlineSnapshot(`
Array [
Array [
<script
dangerouslySetInnerHTML={
Object {
"__html": "[]",
}
<script
dangerouslySetInnerHTML={
Object {
"__html": "[]",
}
id="testapp__LOADABLE_REQUIRED_CHUNKS__"
type="application/json"
/>,
<script
dangerouslySetInnerHTML={
Object {
"__html": "{\\"namedChunks\\":[]}",
}
}
id="testapp__LOADABLE_REQUIRED_CHUNKS__"
type="application/json"
/>,
<script
dangerouslySetInnerHTML={
Object {
"__html": "{\\"namedChunks\\":[]}",
}
id="testapp__LOADABLE_REQUIRED_CHUNKS___ext"
type="application/json"
/>,
],
}
id="testapp__LOADABLE_REQUIRED_CHUNKS___ext"
type="application/json"
/>,
<script
async={true}
data-chunk="main"
@ -165,26 +163,24 @@ describe('ChunkExtrator', () => {
it('should return main script tag without chunk', () => {
expect(extractor.getScriptElements()).toMatchInlineSnapshot(`
Array [
Array [
<script
dangerouslySetInnerHTML={
Object {
"__html": "[]",
}
<script
dangerouslySetInnerHTML={
Object {
"__html": "[]",
}
id="__LOADABLE_REQUIRED_CHUNKS__"
type="application/json"
/>,
<script
dangerouslySetInnerHTML={
Object {
"__html": "{\\"namedChunks\\":[]}",
}
}
id="__LOADABLE_REQUIRED_CHUNKS__"
type="application/json"
/>,
<script
dangerouslySetInnerHTML={
Object {
"__html": "{\\"namedChunks\\":[]}",
}
id="__LOADABLE_REQUIRED_CHUNKS___ext"
type="application/json"
/>,
],
}
id="__LOADABLE_REQUIRED_CHUNKS___ext"
type="application/json"
/>,
<script
async={true}
data-chunk="main"
@ -198,26 +194,24 @@ describe('ChunkExtrator', () => {
extractor.addChunk('letters-A')
expect(extractor.getScriptElements()).toMatchInlineSnapshot(`
Array [
Array [
<script
dangerouslySetInnerHTML={
Object {
"__html": "[\\"chunk-0-for-letters-A\\"]",
}
<script
dangerouslySetInnerHTML={
Object {
"__html": "[\\"chunk-0-for-letters-A\\"]",
}
id="__LOADABLE_REQUIRED_CHUNKS__"
type="application/json"
/>,
<script
dangerouslySetInnerHTML={
Object {
"__html": "{\\"namedChunks\\":[\\"letters-A\\"]}",
}
}
id="__LOADABLE_REQUIRED_CHUNKS__"
type="application/json"
/>,
<script
dangerouslySetInnerHTML={
Object {
"__html": "{\\"namedChunks\\":[\\"letters-A\\"]}",
}
id="__LOADABLE_REQUIRED_CHUNKS___ext"
type="application/json"
/>,
],
}
id="__LOADABLE_REQUIRED_CHUNKS___ext"
type="application/json"
/>,
<script
async={true}
data-chunk="main"
@ -236,26 +230,24 @@ describe('ChunkExtrator', () => {
extractor.addChunk('letters-E')
expect(extractor.getScriptElements()).toMatchInlineSnapshot(`
Array [
Array [
<script
dangerouslySetInnerHTML={
Object {
"__html": "[\\"letters-E\\"]",
}
<script
dangerouslySetInnerHTML={
Object {
"__html": "[\\"letters-E\\"]",
}
id="__LOADABLE_REQUIRED_CHUNKS__"
type="application/json"
/>,
<script
dangerouslySetInnerHTML={
Object {
"__html": "{\\"namedChunks\\":[\\"letters-E\\"]}",
}
}
id="__LOADABLE_REQUIRED_CHUNKS__"
type="application/json"
/>,
<script
dangerouslySetInnerHTML={
Object {
"__html": "{\\"namedChunks\\":[\\"letters-E\\"]}",
}
id="__LOADABLE_REQUIRED_CHUNKS___ext"
type="application/json"
/>,
],
}
id="__LOADABLE_REQUIRED_CHUNKS___ext"
type="application/json"
/>,
<script
async={true}
data-chunk="main"
@ -275,28 +267,26 @@ describe('ChunkExtrator', () => {
expect(extractor.getScriptElements({ nonce: 'testnonce' }))
.toMatchInlineSnapshot(`
Array [
Array [
<script
dangerouslySetInnerHTML={
Object {
"__html": "[\\"chunk-0-for-letters-A\\"]",
}
<script
dangerouslySetInnerHTML={
Object {
"__html": "[\\"chunk-0-for-letters-A\\"]",
}
id="__LOADABLE_REQUIRED_CHUNKS__"
nonce="testnonce"
type="application/json"
/>,
<script
dangerouslySetInnerHTML={
Object {
"__html": "{\\"namedChunks\\":[\\"letters-A\\"]}",
}
}
id="__LOADABLE_REQUIRED_CHUNKS__"
nonce="testnonce"
type="application/json"
/>,
<script
dangerouslySetInnerHTML={
Object {
"__html": "{\\"namedChunks\\":[\\"letters-A\\"]}",
}
id="__LOADABLE_REQUIRED_CHUNKS___ext"
nonce="testnonce"
type="application/json"
/>,
],
}
id="__LOADABLE_REQUIRED_CHUNKS___ext"
nonce="testnonce"
type="application/json"
/>,
<script
async={true}
data-chunk="main"
@ -321,28 +311,26 @@ describe('ChunkExtrator', () => {
}),
).toMatchInlineSnapshot(`
Array [
Array [
<script
dangerouslySetInnerHTML={
Object {
"__html": "[\\"chunk-0-for-letters-A\\"]",
}
<script
dangerouslySetInnerHTML={
Object {
"__html": "[\\"chunk-0-for-letters-A\\"]",
}
id="__LOADABLE_REQUIRED_CHUNKS__"
nonce="anonymous"
type="application/json"
/>,
<script
dangerouslySetInnerHTML={
Object {
"__html": "{\\"namedChunks\\":[\\"letters-A\\"]}",
}
}
id="__LOADABLE_REQUIRED_CHUNKS__"
nonce="anonymous"
type="application/json"
/>,
<script
dangerouslySetInnerHTML={
Object {
"__html": "{\\"namedChunks\\":[\\"letters-A\\"]}",
}
id="__LOADABLE_REQUIRED_CHUNKS___ext"
nonce="anonymous"
type="application/json"
/>,
],
}
id="__LOADABLE_REQUIRED_CHUNKS___ext"
nonce="anonymous"
type="application/json"
/>,
<script
async={true}
data-chunk="main"
@ -368,26 +356,24 @@ describe('ChunkExtrator', () => {
expect(extractor.getScriptElements()).toMatchInlineSnapshot(`
Array [
Array [
<script
dangerouslySetInnerHTML={
Object {
"__html": "[]",
}
<script
dangerouslySetInnerHTML={
Object {
"__html": "[]",
}
id="__LOADABLE_REQUIRED_CHUNKS__"
type="application/json"
/>,
<script
dangerouslySetInnerHTML={
Object {
"__html": "{\\"namedChunks\\":[]}",
}
}
id="__LOADABLE_REQUIRED_CHUNKS__"
type="application/json"
/>,
<script
dangerouslySetInnerHTML={
Object {
"__html": "{\\"namedChunks\\":[]}",
}
id="__LOADABLE_REQUIRED_CHUNKS___ext"
type="application/json"
/>,
],
}
id="__LOADABLE_REQUIRED_CHUNKS___ext"
type="application/json"
/>,
<script
async={true}
data-chunk="main"