feat(hydrate): support object serialization for hydrated components

src/compiler/transformers/decorators-to-static/prop-decorator.ts

@@ -98,6 +98,8 @@ const parsePropDecorator = (
 
   const propMeta: d.ComponentCompilerStaticProperty = {
     type: typeStr,
+    attribute: getAttributeName(propName, propOptions),
+    reflect: getReflect(diagnostics, propDecorator, propOptions),
     mutable: !!propOptions.mutable,
     complexType: getComplexType(typeChecker, prop, type, program),
     required: prop.exclamationToken !== undefined && propName !== 'mode',
@@ -106,12 +108,8 @@ const parsePropDecorator = (
     getter: ts.isGetAccessor(prop),
     setter: !!foundSetter,
   };
-  if (ogPropName && ogPropName !== propName) propMeta.ogPropName = ogPropName;
-
-  // prop can have an attribute if type is NOT "unknown"
-  if (typeStr !== 'unknown') {
-    propMeta.attribute = getAttributeName(propName, propOptions);
-    propMeta.reflect = getReflect(diagnostics, propDecorator, propOptions);
+  if (ogPropName && ogPropName !== propName) {
+    propMeta.ogPropName = ogPropName;
   }
 
   // extract default value

src/hydrate/platform/proxy-host-element.ts

@@ -4,6 +4,7 @@ import { getValue, parsePropertyValue, setValue } from '@runtime';
 import { CMP_FLAGS, MEMBER_FLAGS } from '@utils';
 
 import type * as d from '../../declarations';
+import { deserializeProperty, SERIALIZED_PREFIX } from '../runner/serialize';
 
 export function proxyHostElement(elm: d.HostElement, cstr: d.ComponentConstructor): void {
   const cmpMeta = cstr.cmpMeta;
@@ -45,7 +46,7 @@ export function proxyHostElement(elm: d.HostElement, cstr: d.ComponentConstructo
         let attrValue = elm.getAttribute(attributeName);
 
         /**
-         * allow hydrate parameters that contain a simple object, e.g.
+         * 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>`);
@@ -60,14 +61,19 @@ export function proxyHostElement(elm: d.HostElement, cstr: d.ComponentConstructo
           } catch (e) {
             /* ignore */
           }
+        } else if (attrValue?.startsWith(SERIALIZED_PREFIX)) {
+          /**
+           * Allow hydrate parameters that contain a complex non-serialized values.
+           */
+          attrValue = deserializeProperty(attrValue);
         }
 
         const { get: origGetter, set: origSetter } =
           Object.getOwnPropertyDescriptor((cstr as any).prototype, memberName) || {};
 
         let attrPropVal: any;
 
-        if (attrValue != null) {
+        if (typeof attrValue !== 'undefined') {
           attrPropVal = parsePropertyValue(attrValue, memberFlags);
         }
 

src/hydrate/runner/index.ts

@@ -1,2 +1,3 @@
 export { createWindowFromHtml } from './create-window';
 export { hydrateDocument, renderToString, serializeDocumentToString, streamToString } from './render';
+export { deserializeProperty, serializeProperty } from './serialize';