-
Notifications
You must be signed in to change notification settings - Fork 394
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: use comment nodes for VFragment bookends (#3846)
* chore: add failing test for super-nested slots with static fragments + Light DOM + SSR hydration * chore: use comment nodes for VFragment bookends * test: adjacent text-node expressions of length zero * chore: update integration karma tests * chore: restore previous behavior in versions <= 59 * chore: use APIFeature.USE_COMMENTS_FOR_FRAGMENT_BOOKENDS instead of checking version directly * chore: use HIGHEST_API_VERSION from @lwc/shared in karma test options * chore: bump ci
- Loading branch information
Showing
24 changed files
with
243 additions
and
39 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
34 changes: 34 additions & 0 deletions
34
packages/@lwc/integration-karma/test-hydration/adjacent-text-nodes/index.spec.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
export default { | ||
props: {}, | ||
snapshot(target) { | ||
const first = target.shadowRoot.querySelector('.first'); | ||
const second = target.shadowRoot.querySelector('.second'); | ||
|
||
return { | ||
first, | ||
second, | ||
}; | ||
}, | ||
advancedTest(target, { Component, hydrateComponent, consoleSpy, container, selector }) { | ||
const snapshotBeforeHydration = this.snapshot(target); | ||
hydrateComponent(target, Component, this.props); | ||
const hydratedTarget = container.querySelector(selector); | ||
const snapshotAfterHydration = this.snapshot(hydratedTarget); | ||
|
||
for (const snapshotKey of Object.keys(snapshotBeforeHydration)) { | ||
expect(snapshotBeforeHydration[snapshotKey]) | ||
.withContext( | ||
`${snapshotKey} should be the same DOM element both before and after hydration` | ||
) | ||
.toBe(snapshotAfterHydration[snapshotKey]); | ||
expect(snapshotBeforeHydration[snapshotKey].childNodes) | ||
.withContext( | ||
`${snapshotKey} should have the same number of child nodes before & after hydration` | ||
) | ||
.toHaveSize(snapshotAfterHydration[snapshotKey].childNodes.length); | ||
} | ||
|
||
expect(consoleSpy.calls.warn).toHaveSize(0); | ||
expect(consoleSpy.calls.error).toHaveSize(0); | ||
}, | ||
}; |
4 changes: 4 additions & 0 deletions
4
packages/@lwc/integration-karma/test-hydration/adjacent-text-nodes/x/main/main.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
<template> | ||
<p class="first">{zeroLengthText}{zeroLengthText}</p> | ||
<p class="second">{zeroLengthText}{zeroLengthText}{zeroLengthText}{zeroLengthText}</p> | ||
</template> |
5 changes: 5 additions & 0 deletions
5
packages/@lwc/integration-karma/test-hydration/adjacent-text-nodes/x/main/main.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
import { LightningElement } from 'lwc'; | ||
|
||
export default class Main extends LightningElement { | ||
zeroLengthText = ''; | ||
} |
41 changes: 41 additions & 0 deletions
41
...ges/@lwc/integration-karma/test-hydration/light-dom/slots/nested-and-scoped/index.spec.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,41 @@ | ||
export default { | ||
props: {}, | ||
snapshot(target) { | ||
const cmpChild = target.querySelector('x-child'); | ||
const cmpChildDiv = target.querySelector('x-child div'); | ||
const [cmpScopedOuter, cmpScopedInner] = target.querySelectorAll('x-scoped'); | ||
|
||
return { | ||
target, | ||
cmpScopedOuter, | ||
cmpScopedInner, | ||
cmpChild, | ||
cmpChildDiv, | ||
}; | ||
}, | ||
advancedTest(target, { Component, hydrateComponent, consoleSpy, container, selector }) { | ||
const snapshotBeforeHydration = this.snapshot(target); | ||
hydrateComponent(target, Component, this.props); | ||
const hydratedTarget = container.querySelector(selector); | ||
const snapshotAfterHydration = this.snapshot(hydratedTarget); | ||
|
||
for (const snapshotKey of Object.keys(snapshotBeforeHydration)) { | ||
expect(snapshotBeforeHydration[snapshotKey]) | ||
.withContext( | ||
`${snapshotKey} should be the same DOM element both before and after hydration` | ||
) | ||
.toBe(snapshotAfterHydration[snapshotKey]); | ||
} | ||
|
||
for (const snapshotKey of ['target', 'cmpScopedOuter', 'cmpScopedInner']) { | ||
expect(snapshotBeforeHydration[snapshotKey].childNodes) | ||
.withContext( | ||
`${snapshotKey} should have the same number of child nodes before & after hydration` | ||
) | ||
.toHaveSize(snapshotAfterHydration[snapshotKey].childNodes.length); | ||
} | ||
|
||
expect(consoleSpy.calls.warn).toHaveSize(0); | ||
expect(consoleSpy.calls.error).toHaveSize(0); | ||
}, | ||
}; |
3 changes: 3 additions & 0 deletions
3
...lwc/integration-karma/test-hydration/light-dom/slots/nested-and-scoped/x/child/child.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
<template lwc:render-mode="light"> | ||
<div lwc:ref="childdiv"><x-child /></div> | ||
</template> |
5 changes: 5 additions & 0 deletions
5
.../@lwc/integration-karma/test-hydration/light-dom/slots/nested-and-scoped/x/child/child.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
import { LightningElement } from 'lwc'; | ||
|
||
export default class Child extends LightningElement { | ||
static renderMode = 'light'; | ||
} |
14 changes: 14 additions & 0 deletions
14
.../@lwc/integration-karma/test-hydration/light-dom/slots/nested-and-scoped/x/main/main.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
<template lwc:render-mode="light"> | ||
<div><x-main></div> | ||
<x-scoped instance="1"> | ||
<template lwc:slot-data="item1"> | ||
<x-scoped instance="2"> | ||
<template lwc:slot-data="item2"> | ||
<span>main: {item1.msg} {item2.msg}</span> | ||
<x-child></x-child> | ||
</template> | ||
</x-scoped> | ||
</template> | ||
</x-scoped> | ||
<div></x-main></div> | ||
</template> |
5 changes: 5 additions & 0 deletions
5
...es/@lwc/integration-karma/test-hydration/light-dom/slots/nested-and-scoped/x/main/main.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
import { LightningElement } from 'lwc'; | ||
|
||
export default class Main extends LightningElement { | ||
static renderMode = 'light'; | ||
} |
5 changes: 5 additions & 0 deletions
5
...c/integration-karma/test-hydration/light-dom/slots/nested-and-scoped/x/scoped/scoped.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
<template lwc:render-mode="light"> | ||
<div lwc:ref="div1"><x-scoped> ({instance})</div> | ||
<slot lwc:slot-bind={scopedItem}></slot> | ||
<div lwc:ref="div2"></x-scoped> ({instance})</div> | ||
</template> |
12 changes: 12 additions & 0 deletions
12
...lwc/integration-karma/test-hydration/light-dom/slots/nested-and-scoped/x/scoped/scoped.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
import { LightningElement, api } from 'lwc'; | ||
|
||
export default class scoped extends LightningElement { | ||
static renderMode = 'light'; | ||
@api instance = 'unknown'; | ||
|
||
get scopedItem() { | ||
return { | ||
msg: `from-x-scoped-${this.instance}`, | ||
}; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.