feat: support nested props

apps/web/components/ComponentMonitor.tsx

@@ -181,22 +181,21 @@ export function ComponentMonitor({
           badgeClass: 'bg-success',
           name: 'return',
           componentId: parseComponentId(
-            isFromComponent ? message.componentId : message.targetId
+            isFromComponent ? message.containerId : message.targetId
           )!,
           summary: `[${requestId.split('-')[0]}] returned ${result} ${
             !isFromComponent ? 'to' : ''
           }`,
         };
       }
       case 'component.update': {
-        const { __componentcallbacks, ...simpleProps } = message.props || {};
         return {
           message,
           isFromComponent,
           badgeClass: 'bg-warning',
           name: 'update',
           componentId: parseComponentId(toComponent!)!,
-          summary: `updated props ${JSON.stringify(simpleProps)} on`,
+          summary: `updated props ${JSON.stringify(message.props || {})} on`,
         };
       }
       case 'component.domCallback': {

packages/application/src/container.ts

@@ -49,50 +49,50 @@ export function deserializeProps({
   }
 
   delete props.__bweMeta;
-  if (!props.__domcallbacks) {
-    return props;
-  }
 
-  Object.entries(props.__domcallbacks).forEach(
-    ([propKey, callback]: [string, any]) => {
-      props[propKey.split('::')[0]] = (...args: any[]) => {
-        let serializedArgs: any = args;
-        const event = args[0] || {};
+  return Object.fromEntries(
+    Object.entries(props).map(([k, v]) => {
+      const callbackMeta = v as { callbackIdentifier: string } | any;
+      if (!callbackMeta?.callbackIdentifier) {
+        return [k, v];
+      }
+
+      const { callbackIdentifier } = callbackMeta;
+      return [
+        k,
+        (...args: any[]) => {
+          let serializedArgs: any = args;
+          const event = args[0] || {};
 
         // TODO make this opt-in/out?
         event.preventDefault?.();
 
-        const { target } = event;
-        // is this a DOM event?
-        if (target && typeof target === 'object') {
+        const { target } = event;// is this a DOM event?
+          if (target && typeof target === 'object') {
           const { checked, name, type, value } = target;
-          serializedArgs = {
-            event: {
-              target: {
-                checked,
-                name,
-                type,
-                value,
+            serializedArgs = {
+              event: {
+                target: {
+                  checked,
+                  name,
+                  type,
+                  value,
+                },
               },
-            },
-          };
-        }
+            };
+          }
 
-        sendMessage({
-          componentId: id,
-          message: {
-            args: serializedArgs,
-            method: callback.__componentMethod,
-            type: 'component.domCallback',
-          },
-          onMessageSent,
-        });
-      };
-    }
+          sendMessage({
+            componentId: id,
+            message: {
+              args: serializedArgs,
+              method: callbackIdentifier,
+              type: 'component.domCallback',
+            },
+            onMessageSent,
+          });
+        },
+      ];
+    })
   );
-
-  delete props.__domcallbacks;
-  delete props.__componentcallbacks;
-
-  return props;
 }

packages/application/src/handlers.ts

@@ -39,11 +39,11 @@ export function onCallbackResponse({
     a component has executed a callback invoked from another component
     return the value of the callback execution to the calling component
   */
-  const { requestId, result, targetId, componentId } = data;
+  const { requestId, result, targetId, containerId } = data;
   sendMessage({
     componentId: targetId,
     message: {
-      componentId,
+      containerId,
       result,
       requestId,
       targetId,

packages/common/src/types/messaging.ts

@@ -34,7 +34,7 @@ export interface ComponentCallbackInvocation extends PostMessageParams {
 }
 
 export interface ComponentCallbackResponse extends PostMessageParams {
-  componentId: string;
+  containerId: string;
   requestId: string;
   result: string; // stringified JSON in the form of { result: any, error: string }
   targetId: string;

packages/common/src/types/render.ts

@@ -10,8 +10,6 @@ export interface KeyValuePair {
 
 export interface Props extends KeyValuePair {
   __bweMeta?: WebEngineMeta;
-  __domcallbacks?: { [key: string]: any };
-  __componentcallbacks?: { [key: string]: any };
   children?: any[];
   className?: string;
   id?: string;

packages/common/src/types/serialization.ts

@@ -1,5 +1,4 @@
 import type { Props } from './render';
-import { KeyValuePair } from './render';
 import type { ComponentTrust } from './trust';
 
 export interface ComponentChildMetadata {
@@ -10,22 +9,11 @@ export interface ComponentChildMetadata {
 }
 
 export type SerializedArgs = Array<
-  string | number | object | any[] | { __componentMethod: string }
+  string | number | object | any[] | { callbackIdentifier: string }
 >;
 
 export interface SerializedNode {
   childComponents?: ComponentChildMetadata[];
   type: string;
   props: Props;
 }
-
-export interface SerializedComponentCallback {
-  __componentMethod: string;
-  parentId: string;
-}
-
-export interface SerializedProps extends KeyValuePair {
-  __componentcallbacks?: {
-    [key: string]: SerializedComponentCallback;
-  };
-}

packages/container/src/callbacks.ts

@@ -40,7 +40,7 @@ export function invokeComponentCallback({
   args,
   buildRequest,
   callbacks,
-  componentId,
+  containerId,
   invokeCallback,
   method,
   postCallbackInvocationMessage,
@@ -49,19 +49,19 @@ export function invokeComponentCallback({
 }: InvokeComponentCallbackParams): any {
   // unknown method
   if (!callbacks[method]) {
-    console.error(`No method ${method} on component ${componentId}`);
+    console.error(`No method ${method} on container ${containerId}`);
     return null;
   }
 
   // some arguments to this callback are methods on other Components
   // these must be replaced with wrappers invoking Component methods
   if (
     typeof args?.some === 'function' &&
-    args.some((arg: any) => arg.__componentMethod)
+    args.some((arg: any) => arg?.callbackIdentifier)
   ) {
     args = args.map((arg: any) => {
-      const { __componentMethod: componentMethod } = arg;
-      if (!componentMethod) {
+      const { callbackIdentifier } = arg;
+      if (!callbackIdentifier) {
         return arg;
       }
 
@@ -72,12 +72,11 @@ export function invokeComponentCallback({
         postCallbackInvocationMessage({
           args: childArgs,
           callbacks,
-          componentId,
-          method: componentMethod,
+          containerId,
+          method: callbackIdentifier,
           requestId,
-          // TODO must specify a real value here
           serializeArgs,
-          targetId: componentMethod.split('::').slice(1).join('::'),
+          targetId: callbackIdentifier.split('::').slice(1).join('::'),
         });
       };
     });

packages/container/src/container.ts

@@ -33,7 +33,7 @@ export function initContainer({
     postComponentRenderMessage,
   } = composeMessagingMethods();
 
-  const { deserializeProps, serializeArgs, serializeNode } =
+  const { deserializeArgs, deserializeProps, serializeArgs, serializeNode } =
     composeSerializationMethods({
       buildRequest,
       callbacks,
@@ -67,11 +67,11 @@ export function initContainer({
   const processEvent = buildEventHandler({
     buildRequest,
     callbacks,
-    componentId,
+    containerId: componentId,
+    deserializeArgs,
     deserializeProps,
     invokeCallback,
     invokeComponentCallback,
-    parentContainerId,
     postCallbackInvocationMessage,
     postCallbackResponseMessage,
     requests,
@@ -97,7 +97,7 @@ export function initContainer({
   const props = buildSafeProxy({
     componentId,
     props: deserializeProps({
-      componentId,
+      containerId: componentId,
       props: componentPropsJson,
     }),
   });

packages/container/src/events.ts

@@ -6,11 +6,10 @@ import type { ProcessEventParams } from './types';
  * Return an event handler function to be registered under `window.addEventHandler('message', fn(event))`
  * @param buildRequest Function to build an inter-Component asynchronous callback request
  * @param callbacks The set of callbacks defined on the target Component
- * @param componentId ID of the target Component on which the
+ * @param containerId ID of the container handling messages
  * @param deserializeProps Function to deserialize props passed on the event
  * @param invokeCallback Function to execute the specified function in the current context
  * @param invokeComponentCallback Function to execute the specified function, either in the current context or another Component's
- * @param parentContainerId ID of the parent container
  * @param postCallbackInvocationMessage Request invocation on external Component via window.postMessage
  * @param postCallbackResponseMessage Send callback execution result to calling Component via window.postMessage
  * @param requests The set of inter-Component callback requests being tracked by the Component
@@ -21,11 +20,11 @@ import type { ProcessEventParams } from './types';
 export function buildEventHandler({
   buildRequest,
   callbacks,
-  componentId,
+  containerId,
+  deserializeArgs,
   deserializeProps,
   invokeCallback,
   invokeComponentCallback,
-  parentContainerId,
   postCallbackInvocationMessage,
   postCallbackResponseMessage,
   requests,
@@ -44,22 +43,17 @@ export function buildEventHandler({
       args: SerializedArgs;
       method: string;
     }) {
-      if (!parentContainerId) {
-        console.error(`no parent container for ${componentId}`);
-        return;
-      }
-
+      const deserializedArgs = deserializeArgs({ args, containerId });
       return invokeComponentCallback({
-        args,
+        args: deserializedArgs,
         buildRequest,
         callbacks,
-        componentId,
+        containerId,
         invokeCallback,
         method,
         postCallbackInvocationMessage,
         requests,
         serializeArgs,
-        targetId: parentContainerId,
       });
     }
 
@@ -108,7 +102,7 @@ export function buildEventHandler({
         result = applyRecursivelyToComponents(result, (n: any) =>
           serializeNode({
             node: n,
-            parentId: method,
+            parentId: method.split('::')[0],
             childComponents: [],
           })
         );
@@ -117,7 +111,7 @@ export function buildEventHandler({
           if (requestId) {
             postCallbackResponseMessage({
               error,
-              componentId,
+              containerId,
               requestId,
               result: value,
               targetId: originator,
@@ -188,7 +182,7 @@ export function buildEventHandler({
       case 'component.update': {
         updateProps(
           deserializeProps({
-            componentId,
+            containerId,
             props: event.data.props,
           })
         );

packages/container/src/messaging.ts

@@ -35,16 +35,16 @@ export function composeMessagingMethods() {
   function postCallbackInvocationMessage({
     args,
     callbacks,
-    componentId,
+    containerId,
     method,
     requestId,
     serializeArgs,
     targetId,
   }: PostMessageComponentCallbackInvocationParams): void {
     postMessage<ComponentCallbackInvocation>({
-      args: serializeArgs({ args, callbacks, componentId }),
+      args: serializeArgs({ args, callbacks, containerId }),
       method,
-      originator: componentId,
+      originator: containerId,
       requestId,
       targetId,
       type: 'component.callbackInvocation',
@@ -53,7 +53,7 @@ export function composeMessagingMethods() {
 
   function postCallbackResponseMessage({
     error,
-    componentId,
+    containerId,
     requestId,
     result,
     targetId,
@@ -63,7 +63,7 @@ export function composeMessagingMethods() {
 
     postMessage<ComponentCallbackResponse>({
       requestId,
-      componentId,
+      containerId,
       result: JSON.stringify({
         value: result,
         error: serializedError,