implement hydration part

src/hydrate/runner/serialize.ts

@@ -46,7 +46,7 @@ export function serializeProperty(value: unknown) {
   /**
    * If the value is a primitive type, return it as is.
    */
-  if (SERIALIZABLE_TYPES.includes(typeof value)) {
+  if (SERIALIZABLE_TYPES.includes(typeof value) && value !== Infinity && value !== -Infinity && !isNaN(value as number)) {
     return value
   }
 

src/runtime/client-hydrate.ts

@@ -1,8 +1,9 @@
 import { BUILD } from '@app-data';
 import { plt, win } from '@platform';
-import { CMP_FLAGS } from '@utils';
+import { CMP_FLAGS, MEMBER_FLAGS } from '@utils';
 
 import type * as d from '../declarations';
+import { deserializeProperty, SERIALIZED_PREFIX } from '../hydrate/runner/serialize';
 import { patchSlottedNode } from './dom-extras';
 import { createTime } from './profile';
 import {
@@ -53,6 +54,44 @@ export const initializeClientHydrate = (
   const vnode: d.VNode = newVNode(tagName, null);
   vnode.$elm$ = hostElm;
 
+  const attributes: Record<string, unknown> = {};
+  const members = Object.entries(hostRef.$cmpMeta$.$members$ || {});
+  members.forEach(([memberName, [memberFlags, metaAttributeName]]) => {
+    if (!(memberFlags & MEMBER_FLAGS.Prop)) {
+      return
+    }
+    const attributeName = metaAttributeName || memberName;
+    let attrValue = hostElm.getAttribute(attributeName);
+
+    /**
+     * Allow hydrate parameters that contain a simple object, e.g.
+     * ```ts
+     * import { renderToString } from 'component-library/hydrate';
+     * await renderToString(`<car-detail car=${JSON.stringify({ year: 1234 })}></car-detail>`);
+     * ```
+     */
+    if (
+      (attrValue?.startsWith('{') && attrValue.endsWith('}')) ||
+      (attrValue?.startsWith('[') && attrValue.endsWith(']'))
+    ) {
+      try {
+        attrValue = JSON.parse(attrValue);
+      } catch (e) {
+        /* ignore */
+      }
+    }
+    /**
+     * Allow hydrate parameters that contain a complex non-serialized values.
+     */
+    else if (attrValue?.startsWith(SERIALIZED_PREFIX)) {
+      attrValue = deserializeProperty(attrValue);
+    }
+
+    attributes[attributeName] = attrValue;
+    hostRef.$instanceValues$.set(attributeName, attrValue);
+  });
+  vnode.$attrs$ = attributes;
+
   let scopeId: string;
   if (BUILD.scoped) {
     const cmpMeta = hostRef.$cmpMeta$;

src/runtime/vdom/vdom-render.ts

@@ -991,7 +991,17 @@ export const renderVdom = (hostRef: d.HostRef, renderFnResults: d.VNode | d.VNod
   // 'dummy' Host node (well, an empty vnode) since `renderVdom` assumes
   // implicitly that the top-level vdom node is 1) an only child and 2)
   // contains attrs that need to be set on the host element.
-  const rootVnode = isHost(renderFnResults) ? renderFnResults : h(null, null, renderFnResults as any);
+  const isHostElem = isHost(renderFnResults)
+  const rootVnode = isHostElem ? renderFnResults : h(null, null, renderFnResults as any);
+
+  /**
+   * Make sure to propagate attributes set on the host element to the root vnode.
+   * This is needed as otherwise the root vnode will not have any attributes set on it
+   * which causes issues when rendering the node during hydration.
+   */
+  if (isInitialLoad && !isHostElem && hostRef.$vnode$) {
+    rootVnode.$attrs$ = hostRef.$vnode$.$attrs$ || {};
+  }
 
   hostTagName = hostElm.tagName;
 

test/wdio/complex-properties/cmp.test.tsx

@@ -1,3 +1,4 @@
+/// <reference types="../dist/components.d.ts" />
 import { render } from '@wdio/browser-runner/stencil';
 import { $, expect } from '@wdio/globals';
 
@@ -25,10 +26,6 @@ describe('complex-properties', () => {
     const { html } = await renderToString(template, {
       fullDocument: false,
     });
-    const stage = document.createElement('div');
-    stage.setAttribute('id', 'stage');
-    stage.setHTMLUnsafe(html);
-    document.body.appendChild(stage);
 
     render({ html, components: [] });
     await expect($('complex-properties')).toHaveText(
@@ -43,4 +40,16 @@ describe('complex-properties', () => {
       ].join('\n'),
     );
   });
+
+  it('can change a complex property and see it updated correctly', async () => {
+    const elm = document.querySelector('complex-properties') as HTMLComplexPropertiesElement;
+    elm.foo = { bar: '456', loo: [4, 5, 6], qux: { quux: Symbol('new quux') } };
+    await expect(elm).toHaveText(
+      expect.stringContaining([
+        `this.foo.bar: 456`,
+        `this.foo.loo: 4, 5, 6`,
+        `this.foo.qux: symbol`,
+      ].join('\n')),
+    );
+  });
 });

test/wdio/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "scripts": {
     "build": "run-s build.no-external-runtime build.test-sibling build.main build.global-script build.prerender build.invisible-prehydration build.es2022",
-    "build.main": "node ../../bin/stencil build --debug --es5",
+    "build.main": "node ../../bin/stencil build --debug --es5 && cp src/components.d.ts dist/components.d.ts",
     "build.es2022": "node ../../bin/stencil build --debug --config stencil.config-es2022.ts",
     "build.global-script": "node ../../bin/stencil build --debug --es5 --config global-script.stencil.config.ts",
     "build.test-sibling": "cd test-sibling && npm run build",