Skip to content

Commit 61bb5e3

Browse files
christian-bromannchristian-bromann
authoredJun 26, 2024··
fix(hyrdate): support vdom annotation in nested dsd structures (#5856)
* fix(hyrdate): support vdom annotation in nested dsd structures * prettier * update snapshots * prettier
·
v4.29.0v4.19.0
1 parent 850ad4f commit 61bb5e3

File tree

10 files changed

+132
-10
lines changed

10 files changed

+132
-10
lines changed
 

‎src/hydrate/platform/index.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ export const win = window;
5656
export const doc = win.document;
5757

5858
export const readTask = (cb: Function) => {
59-
process.nextTick(() => {
59+
nextTick(() => {
6060
try {
6161
cb();
6262
} catch (e) {
@@ -66,7 +66,7 @@ export const readTask = (cb: Function) => {
6666
};
6767

6868
export const writeTask = (cb: Function) => {
69-
process.nextTick(() => {
69+
nextTick(() => {
7070
try {
7171
cb();
7272
} catch (e) {

‎src/runtime/vdom/vdom-annotations.ts

+6-1
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,12 @@ const parseVNodeAnnotations = (
111111
}
112112

113113
if (node.nodeType === NODE_TYPE.ElementNode) {
114-
node.childNodes.forEach((childNode) => {
114+
/**
115+
* we need to insert the vnode annotations on the host element children as well
116+
* as on the children from its shadowRoot if there is one
117+
*/
118+
const childNodes = [...Array.from(node.childNodes), ...Array.from(node.shadowRoot?.childNodes || [])];
119+
childNodes.forEach((childNode) => {
115120
const hostRef = getHostRef(childNode);
116121
if (hostRef != null && !docData.staticComponents.has(childNode.nodeName.toLowerCase())) {
117122
const cmpData: CmpData = {

‎test/end-to-end/src/declarative-shadow-dom/__snapshots__/test.e2e.ts.snap

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`renderToString can render a scoped component within a shadow component 1`] = `"<car-list cars=\\"[{&quot;make&quot;:&quot;VW&quot;,&quot;model&quot;:&quot;Vento&quot;,&quot;year&quot;:2024},{&quot;make&quot;:&quot;VW&quot;,&quot;model&quot;:&quot;Beetle&quot;,&quot;year&quot;:2023}]\\" class=\\"sc-car-list-h\\" custom-hydrate-flag=\\"\\" s-id=\\"1\\"><template shadowrootmode=\\"open\\"><style sty-id=\\"sc-car-list\\">/*!@:host*/.sc-car-list-h{display:block;margin:10px;padding:10px;border:1px solid blue}/*!@ul*/ul.sc-car-list{display:block;margin:0;padding:0}/*!@li*/li.sc-car-list{list-style:none;margin:0;padding:20px}/*!@.selected*/.selected.sc-car-list{font-weight:bold;background:rgb(255, 255, 210)}</style><ul class=\\"sc-car-list\\" c-id=\\"1.0.0.0\\"><li class=\\"sc-car-list\\" c-id=\\"1.1.1.0\\"><car-detail class=\\"sc-car-list\\" custom-hydrate-flag=\\"\\" c-id=\\"1.2.2.0\\"><!----><section>2024 VW Vento</section></car-detail></li><li class=\\"sc-car-list\\" c-id=\\"1.3.1.1\\"><car-detail class=\\"sc-car-list\\" custom-hydrate-flag=\\"\\" c-id=\\"1.4.2.0\\"><!----><section>2023 VW Beetle</section></car-detail></li></ul></template><!--r.1--></car-list>"`;
3+
exports[`renderToString can render a scoped component within a shadow component 1`] = `"<car-list cars=\\"[{&quot;make&quot;:&quot;VW&quot;,&quot;model&quot;:&quot;Vento&quot;,&quot;year&quot;:2024},{&quot;make&quot;:&quot;VW&quot;,&quot;model&quot;:&quot;Beetle&quot;,&quot;year&quot;:2023}]\\" class=\\"sc-car-list-h\\" custom-hydrate-flag=\\"\\" s-id=\\"1\\"><template shadowrootmode=\\"open\\"><style sty-id=\\"sc-car-list\\">/*!@:host*/.sc-car-list-h{display:block;margin:10px;padding:10px;border:1px solid blue}/*!@ul*/ul.sc-car-list{display:block;margin:0;padding:0}/*!@li*/li.sc-car-list{list-style:none;margin:0;padding:20px}/*!@.selected*/.selected.sc-car-list{font-weight:bold;background:rgb(255, 255, 210)}</style><ul class=\\"sc-car-list\\" c-id=\\"1.0.0.0\\"><li class=\\"sc-car-list\\" c-id=\\"1.1.1.0\\"><car-detail class=\\"sc-car-list\\" custom-hydrate-flag=\\"\\" c-id=\\"1.2.2.0\\" s-id=\\"2\\"><!--r.2--><section c-id=\\"2.0.0.0\\"><!--t.2.1.1.0-->2024 VW Vento</section></car-detail></li><li class=\\"sc-car-list\\" c-id=\\"1.3.1.1\\"><car-detail class=\\"sc-car-list\\" custom-hydrate-flag=\\"\\" c-id=\\"1.4.2.0\\" s-id=\\"3\\"><!--r.3--><section c-id=\\"3.0.0.0\\"><!--t.3.1.1.0-->2023 VW Beetle</section></car-detail></li></ul></template><!--r.1--></car-list>"`;
44

5-
exports[`renderToString can render nested components 1`] = `"<another-car-list cars=\\"[{&quot;make&quot;:&quot;VW&quot;,&quot;model&quot;:&quot;Vento&quot;,&quot;year&quot;:2024},{&quot;make&quot;:&quot;VW&quot;,&quot;model&quot;:&quot;Beetle&quot;,&quot;year&quot;:2023}]\\" class=\\"sc-another-car-list-h\\" custom-hydrate-flag=\\"\\" s-id=\\"1\\"><template shadowrootmode=\\"open\\"><style sty-id=\\"sc-another-car-list\\">/*!@:host*/.sc-another-car-list-h{display:block;margin:10px;padding:10px;border:1px solid blue}/*!@ul*/ul.sc-another-car-list{display:block;margin:0;padding:0}/*!@li*/li.sc-another-car-list{list-style:none;margin:0;padding:20px}/*!@.selected*/.selected.sc-another-car-list{font-weight:bold;background:rgb(255, 255, 210)}</style><ul class=\\"sc-another-car-list\\" c-id=\\"1.0.0.0\\"><li class=\\"sc-another-car-list\\" c-id=\\"1.1.1.0\\"><another-car-detail class=\\"sc-another-car-list sc-another-car-detail-h\\" custom-hydrate-flag=\\"\\" c-id=\\"1.2.2.0\\"><template shadowrootmode=\\"open\\"><style sty-id=\\"sc-another-car-detail\\">/*!@section*/section.sc-another-car-detail{color:green}</style><section class=\\"sc-another-car-detail\\">2024 VW Vento</section></template><!----></another-car-detail></li><li class=\\"sc-another-car-list\\" c-id=\\"1.3.1.1\\"><another-car-detail class=\\"sc-another-car-list sc-another-car-detail-h\\" custom-hydrate-flag=\\"\\" c-id=\\"1.4.2.0\\"><template shadowrootmode=\\"open\\"><style sty-id=\\"sc-another-car-detail\\">/*!@section*/section.sc-another-car-detail{color:green}</style><section class=\\"sc-another-car-detail\\">2023 VW Beetle</section></template><!----></another-car-detail></li></ul></template><!--r.1--></another-car-list>"`;
5+
exports[`renderToString can render nested components 1`] = `"<another-car-list cars=\\"[{&quot;make&quot;:&quot;VW&quot;,&quot;model&quot;:&quot;Vento&quot;,&quot;year&quot;:2024},{&quot;make&quot;:&quot;VW&quot;,&quot;model&quot;:&quot;Beetle&quot;,&quot;year&quot;:2023}]\\" class=\\"sc-another-car-list-h\\" custom-hydrate-flag=\\"\\" s-id=\\"1\\"><template shadowrootmode=\\"open\\"><style sty-id=\\"sc-another-car-list\\">/*!@:host*/.sc-another-car-list-h{display:block;margin:10px;padding:10px;border:1px solid blue}/*!@ul*/ul.sc-another-car-list{display:block;margin:0;padding:0}/*!@li*/li.sc-another-car-list{list-style:none;margin:0;padding:20px}/*!@.selected*/.selected.sc-another-car-list{font-weight:bold;background:rgb(255, 255, 210)}</style><ul class=\\"sc-another-car-list\\" c-id=\\"1.0.0.0\\"><li class=\\"sc-another-car-list\\" c-id=\\"1.1.1.0\\"><another-car-detail class=\\"sc-another-car-list sc-another-car-detail-h\\" custom-hydrate-flag=\\"\\" c-id=\\"1.2.2.0\\" s-id=\\"2\\"><template shadowrootmode=\\"open\\"><style sty-id=\\"sc-another-car-detail\\">/*!@section*/section.sc-another-car-detail{color:green}</style><section class=\\"sc-another-car-detail\\" c-id=\\"2.0.0.0\\"><!--t.2.1.1.0-->2024 VW Vento</section></template><!--r.2--></another-car-detail></li><li class=\\"sc-another-car-list\\" c-id=\\"1.3.1.1\\"><another-car-detail class=\\"sc-another-car-list sc-another-car-detail-h\\" custom-hydrate-flag=\\"\\" c-id=\\"1.4.2.0\\" s-id=\\"3\\"><template shadowrootmode=\\"open\\"><style sty-id=\\"sc-another-car-detail\\">/*!@section*/section.sc-another-car-detail{color:green}</style><section class=\\"sc-another-car-detail\\" c-id=\\"3.0.0.0\\"><!--t.3.1.1.0-->2023 VW Beetle</section></template><!--r.3--></another-car-detail></li></ul></template><!--r.1--></another-car-list>"`;
66

77
exports[`renderToString renders scoped component 1`] = `"<another-car-detail class=\\"sc-another-car-detail-h\\" custom-hydrate-flag=\\"\\" s-id=\\"1\\"><template shadowrootmode=\\"open\\"><style sty-id=\\"sc-another-car-detail\\">/*!@section*/section.sc-another-car-detail{color:green}</style></template><!--r.1--></another-car-detail>"`;
88

‎test/end-to-end/src/declarative-shadow-dom/test.e2e.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -127,18 +127,18 @@ describe('renderToString', () => {
127127
});
128128
expect(html).toMatchSnapshot();
129129
expect(html).toContain(
130-
'<car-detail class="sc-car-list" custom-hydrate-flag="" c-id="1.2.2.0"><!----><section>2024 VW Vento</section></car-detail>',
130+
'<car-detail class="sc-car-list" custom-hydrate-flag="" c-id="1.2.2.0" s-id="2"><!--r.2--><section c-id="2.0.0.0"><!--t.2.1.1.0-->2024 VW Vento</section></car-detail>',
131131
);
132132
expect(html).toContain(
133-
'<car-detail class="sc-car-list" custom-hydrate-flag="" c-id="1.4.2.0"><!----><section>2023 VW Beetle</section></car-detail>',
133+
'<car-detail class="sc-car-list" custom-hydrate-flag="" c-id="1.4.2.0" s-id="3"><!--r.3--><section c-id="3.0.0.0"><!--t.3.1.1.0-->2023 VW Beetle</section></car-detail>',
134134
);
135135
});
136136

137137
it('can render a scoped component within a shadow component (sync)', async () => {
138138
const input = `<car-list cars=${JSON.stringify([vento, beetle])}></car-list>`;
139139
const expectedResults = [
140-
'<car-detail class="sc-car-list" custom-hydrate-flag="" c-id="1.2.2.0"><!----><section>2024 VW Vento</section></car-detail>',
141-
'<car-detail class="sc-car-list" custom-hydrate-flag="" c-id="1.4.2.0"><!----><section>2023 VW Beetle</section></car-detail>',
140+
'<car-detail class="sc-car-list" custom-hydrate-flag="" c-id="1.2.2.0" s-id="2"><!--r.2--><section c-id="2.0.0.0"><!--t.2.1.1.0-->2024 VW Vento</section></car-detail>',
141+
'<car-detail class="sc-car-list" custom-hydrate-flag="" c-id="1.4.2.0" s-id="3"><!--r.3--><section c-id="3.0.0.0"><!--t.3.1.1.0-->2023 VW Beetle</section></car-detail>',
142142
] as const;
143143
const opts = {
144144
serializeShadowRoot: true,

‎test/wdio/declarative-shadow-dom/page-list-item.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
:host {
2+
display: block;
3+
}

‎test/wdio/declarative-shadow-dom/page-list-item.tsx

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { Component, h, Prop } from '@stencil/core';
2+
3+
@Component({
4+
tag: 'page-list-item',
5+
styleUrl: 'page-list-item.css',
6+
shadow: true,
7+
})
8+
export class MyOtherComponent {
9+
/**
10+
* Set the number to be displayed.
11+
*/
12+
@Prop() label!: number;
13+
14+
/**
15+
* Set the number to be displayed.
16+
*/
17+
@Prop() active = false;
18+
19+
render() {
20+
const paginationItemClass: any = {
21+
'pagination-item': true,
22+
active: this.active,
23+
};
24+
25+
return (
26+
<div>
27+
<div class={paginationItemClass}>{this.label}</div>
28+
</div>
29+
);
30+
}
31+
}

‎test/wdio/declarative-shadow-dom/page-list.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
:host {
2+
display: block;
3+
}

‎test/wdio/declarative-shadow-dom/page-list.test.ts

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
// @ts-ignore may not be existing when project hasn't been built
2+
type HydrateModule = typeof import('../../hydrate');
3+
let renderToString: HydrateModule['renderToString'];
4+
5+
describe('renderToString', () => {
6+
before(async () => {
7+
// @ts-ignore may not be existing when project hasn't been built
8+
const mod = await import('/hydrate/index.mjs');
9+
renderToString = mod.renderToString;
10+
});
11+
12+
beforeEach(async () => {
13+
const { html } = await renderToString(`<page-list last-page="5" current-page="1"></page-list>`, {
14+
serializeShadowRoot: true,
15+
prettyHtml: true,
16+
fullDocument: false,
17+
});
18+
const stage = document.createElement('div');
19+
stage.setAttribute('id', 'stage');
20+
stage.setHTMLUnsafe(html);
21+
document.body.appendChild(stage);
22+
});
23+
24+
afterEach(() => {
25+
document.querySelector('#stage')?.remove();
26+
});
27+
28+
it('can hydrate a nested shadow component', async () => {
29+
expect(typeof customElements.get('page-list-item')).toBe('undefined');
30+
31+
// @ts-expect-error resolved through WDIO
32+
const { defineCustomElements } = await import('/dist/loader/index.js');
33+
defineCustomElements().catch(console.error);
34+
35+
// wait for Stencil to take over and reconcile
36+
await browser.waitUntil(async () => customElements.get('page-list-item'));
37+
expect(typeof customElements.get('page-list-item')).toBe('function');
38+
await expect($('page-list')).toHaveText('0\n1\n2\n3\n4');
39+
});
40+
});

‎test/wdio/declarative-shadow-dom/page-list.tsx

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { Component, h, Prop, State } from '@stencil/core';
2+
3+
@Component({
4+
tag: 'page-list',
5+
styleUrl: 'page-list.css',
6+
shadow: true,
7+
})
8+
export class PatternlibPagination {
9+
@Prop({ mutable: true }) lastPage: number | null = null;
10+
@State() pages: Array<number> = [];
11+
12+
private fillPageArray(start: number, num: number): Array<number> {
13+
const pages = [];
14+
for (let i = 0; i < num; i++) {
15+
pages.push(start + i);
16+
}
17+
return pages;
18+
}
19+
20+
componentWillLoad(): void {
21+
// range guard
22+
this.lastPage = this.lastPage && this.lastPage >= 1 ? this.lastPage : 1;
23+
this.pages = this.fillPageArray(0, this.lastPage);
24+
}
25+
26+
render() {
27+
return (
28+
<div>
29+
<div class="pagination">
30+
<div class="pagination-pages pagination-notation">
31+
{this.pages.map((i) => (
32+
<page-list-item label={i}></page-list-item>
33+
))}
34+
</div>
35+
</div>
36+
</div>
37+
);
38+
}
39+
}

‎test/wdio/setup.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@ const testRequiresManualSetup =
1414
window.__wdioSpec__.includes('custom-elements-delegates-focus') ||
1515
window.__wdioSpec__.includes('custom-elements-output') ||
1616
window.__wdioSpec__.includes('global-script') ||
17-
window.__wdioSpec__.endsWith('custom-tag-name.test.tsx');
17+
window.__wdioSpec__.endsWith('custom-tag-name.test.tsx') ||
18+
window.__wdioSpec__.endsWith('page-list.test.ts');
1819

1920
/**
2021
* setup all components defined in tests except for those where we want ot manually setup

0 commit comments

Comments
 (0)
Please sign in to comment.