fix(ssr): slow property hydration, incorrect rendering (#6325)

* fix(ssr): slow property hydration, incorrect rendering

* chore: fiddle

* chore: prettier

---------

Co-authored-by: John Jenkins <[email protected]>

Author: johnjenkins

src/runtime/vdom/vdom-render.ts

@@ -734,6 +734,17 @@ export const patch = (oldVNode: d.VNode, newVNode: d.VNode, isInitialRender = fa
     ) {
       // no new child vnodes, but there are old child vnodes to remove
       removeVnodes(oldChildren, 0, oldChildren.length - 1);
+    } else if (
+      BUILD.hydrateClientSide &&
+      isInitialRender &&
+      BUILD.updatable &&
+      oldChildren !== null &&
+      newChildren === null
+    ) {
+      // initial render and we have old children from SSR but
+      // no initial client-side children. Store the old children
+      // on the new vnode so they can be resolved later (i.e. updated or removed)
+      newVNode.$children$ = oldChildren;
     }
 
     if (BUILD.svg && isSvgMode && tag === 'svg') {

test/wdio/ssr-hydration/cmp.test.tsx

@@ -424,7 +424,7 @@ describe('Sanity check SSR > Client hydration', () => {
     expect(nestedCmp.childNodes[1].textContent).toBe('after');
   });
 
-  it('renders slots nodes appropriately in a `scoped: true` child with `serializeShadowRoot: "scoped"` parent', async () => {
+  it('renders slot nodes appropriately in a `scoped: true` child with `serializeShadowRoot: "scoped"` parent', async () => {
     if (document.querySelector('#stage')) {
       document.querySelector('#stage')?.remove();
       await browser.waitUntil(async () => !document.querySelector('#stage'));
@@ -501,4 +501,40 @@ describe('Sanity check SSR > Client hydration', () => {
     expect(wrapCmp.childNodes.length).toBe(3);
     expect(wrapCmp.textContent).toBe('one23');
   });
+
+  it('correctly renders a slow to hydrate component with a prop', async () => {
+    if (document.querySelector('#stage')) {
+      document.querySelector('#stage')?.remove();
+      await browser.waitUntil(async () => !document.querySelector('#stage'));
+    }
+    const { html } = await renderToString(`<slow-ssr-prop></slow-ssr-prop>`, {
+      fullDocument: true,
+      serializeShadowRoot: 'declarative-shadow-dom',
+      beforeHydrate: (doc) => {
+        // simulate a slow prop update
+        const slowCmp = doc.querySelector('slow-ssr-prop');
+        slowCmp.anArray = ['one', 'two', 'three'];
+      },
+    });
+    const stage = document.createElement('div');
+    stage.setAttribute('id', 'stage');
+    stage.setHTMLUnsafe(html);
+    document.body.appendChild(stage);
+
+    // @ts-expect-error resolved through WDIO
+    const { defineCustomElements } = await import('/dist/loader/index.js');
+    defineCustomElements().catch(console.error);
+
+    // wait for Stencil to take over and reconcile
+    await browser.waitUntil(async () => customElements.get('slow-ssr-prop'));
+    expect(typeof customElements.get('slow-ssr-prop')).toBe('function');
+
+    const slowCmp: any = document.querySelector('slow-ssr-prop');
+    setTimeout(() => {
+      slowCmp.anArray = ['one', 'two', 'three', 'four'];
+    }, 400);
+    await browser.pause(600);
+
+    expect(slowCmp.shadowRoot.querySelector('div').textContent).toBe('An array component:onetwothreefour');
+  });
 });

test/wdio/ssr-hydration/slow-prop.tsx

@@ -0,0 +1,29 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+
+@Component({
+  tag: 'slow-ssr-prop',
+  shadow: true,
+  styles: `
+    :host {
+      display: block;
+    }
+  `,
+})
+export class MyApp {
+  @Prop() anArray = [];
+
+  render() {
+    return (
+      <Host>
+        <div>
+          An array component:
+          <ol>
+            {this.anArray.map((item) => (
+              <li>{item}</li>
+            ))}
+          </ol>
+        </div>
+      </Host>
+    );
+  }
+}