Merge pull request #137 from near/feat/messaging-closure

feat: messaging closure

packages/container/src/callbacks.ts

@@ -74,7 +74,6 @@ export function invokeComponentCallback({
           callbacks,
           componentId,
           method: componentMethod,
-          postMessage,
           requestId,
           // TODO must specify a real value here
           serializeArgs,

packages/container/src/container.ts

@@ -14,15 +14,12 @@ export function initContainer({
     buildRequest,
     buildSafeProxy,
     buildUseComponentCallback,
+    composeMessagingMethods,
     composeSerializationMethods,
     dispatchRenderEvent,
     invokeCallback,
     invokeComponentCallback,
     isMatchingProps,
-    postCallbackInvocationMessage,
-    postCallbackResponseMessage,
-    postComponentRenderMessage,
-    postMessage,
     preactify,
     renderContainerComponent,
   },
@@ -43,14 +40,19 @@ export function initContainer({
   const callbacks: { [key: string]: Function } = {};
   const requests: { [key: string]: CallbackRequest } = {};
 
+  const {
+    postCallbackInvocationMessage,
+    postCallbackResponseMessage,
+    postComponentRenderMessage,
+  } = composeMessagingMethods();
+
   const { deserializeProps, serializeArgs, serializeNode, serializeProps } =
     composeSerializationMethods({
       buildRequest,
       callbacks,
       parentContainerId,
       postCallbackInvocationMessage,
       preactRootComponentName,
-      postMessage,
       requests,
     });
 
@@ -77,11 +79,10 @@ export function initContainer({
     if (containerComponent && isRootComponent) {
       dispatchRenderEvent({
         callbacks,
-        componentId: componentId,
+        componentId,
         node: containerComponent(),
         nodeRenders,
         postComponentRenderMessage,
-        postMessage,
         preactRootComponentName,
         serializeNode,
         serializeProps,
@@ -101,7 +102,6 @@ export function initContainer({
     parentContainerId,
     postCallbackInvocationMessage,
     postCallbackResponseMessage,
-    postMessage,
     renderDom: (node: Node) => preactify({ node, createElement, Component }),
     requests,
     serializeArgs,

packages/container/src/events.ts

@@ -32,7 +32,6 @@ export function buildEventHandler({
   parentContainerId,
   postCallbackInvocationMessage,
   postCallbackResponseMessage,
-  postMessage,
   renderDom,
   requests,
   serializeArgs,
@@ -124,7 +123,6 @@ export function buildEventHandler({
             postCallbackResponseMessage({
               error,
               componentId,
-              postMessage,
               requestId,
               result: value,
               targetId: originator,

packages/container/src/index.ts

@@ -2,13 +2,7 @@ export { invokeCallback, invokeComponentCallback } from './callbacks';
 export { initContainer } from './container';
 export { buildEventHandler } from './events';
 export { buildUseComponentCallback } from './hooks';
-export {
-  buildRequest,
-  postMessage,
-  postCallbackInvocationMessage,
-  postCallbackResponseMessage,
-  postComponentRenderMessage,
-} from './messaging';
+export { buildRequest, composeMessagingMethods } from './messaging';
 export {
   buildSafeProxy,
   dispatchRenderEvent,

packages/container/src/messaging.ts

@@ -24,65 +24,70 @@ export function buildRequest(): CallbackRequest {
   };
 }
 
-export function postMessage<T extends PostMessageParams>(message: T) {
-  window.parent.postMessage(message, '*');
-}
+export function composeMessagingMethods() {
+  function postMessage<T extends PostMessageParams>(message: T) {
+    window.parent.postMessage(message, '*');
+  }
 
-export function postCallbackInvocationMessage({
-  args,
-  callbacks,
-  componentId,
-  method,
-  postMessage,
-  requestId,
-  serializeArgs,
-  targetId,
-}: PostMessageComponentCallbackInvocationParams): void {
-  postMessage<ComponentCallbackInvocation>({
-    args: serializeArgs({ args, callbacks, componentId }),
+  function postCallbackInvocationMessage({
+    args,
+    callbacks,
+    componentId,
     method,
-    originator: componentId,
     requestId,
+    serializeArgs,
     targetId,
-    type: 'component.callbackInvocation',
-  });
-}
+  }: PostMessageComponentCallbackInvocationParams): void {
+    postMessage<ComponentCallbackInvocation>({
+      args: serializeArgs({ args, callbacks, componentId }),
+      method,
+      originator: componentId,
+      requestId,
+      targetId,
+      type: 'component.callbackInvocation',
+    });
+  }
 
-export function postCallbackResponseMessage({
-  error,
-  componentId,
-  postMessage,
-  requestId,
-  result,
-  targetId,
-}: PostMessageComponentCallbackResponseParams): void {
-  const serializedError =
-    error && JSON.stringify(error, Object.getOwnPropertyNames(error));
-
-  postMessage<ComponentCallbackResponse>({
-    requestId,
+  function postCallbackResponseMessage({
+    error,
     componentId,
-    result: JSON.stringify({
-      value: result,
-      error: serializedError,
-    }),
+    requestId,
+    result,
     targetId,
-    type: 'component.callbackResponse',
-  });
-}
+  }: PostMessageComponentCallbackResponseParams): void {
+    const serializedError =
+      error && JSON.stringify(error, Object.getOwnPropertyNames(error));
 
-export function postComponentRenderMessage({
-  childComponents,
-  componentId,
-  node,
-  postMessage,
-  trust,
-}: PostMessageComponentRenderParams): void {
-  postMessage<ComponentRender>({
+    postMessage<ComponentCallbackResponse>({
+      requestId,
+      componentId,
+      result: JSON.stringify({
+        value: result,
+        error: serializedError,
+      }),
+      targetId,
+      type: 'component.callbackResponse',
+    });
+  }
+
+  function postComponentRenderMessage({
     childComponents,
     componentId,
     node,
     trust,
-    type: 'component.render',
-  });
+  }: PostMessageComponentRenderParams): void {
+    postMessage<ComponentRender>({
+      childComponents,
+      componentId,
+      node,
+      trust,
+      type: 'component.render',
+    });
+  }
+
+  return {
+    postCallbackInvocationMessage,
+    postCallbackResponseMessage,
+    postComponentRenderMessage,
+  };
 }

packages/container/src/render.ts

@@ -40,9 +40,7 @@ export const preactify: PreactifyCallback = ({
   }
 
   // TODO handle other builtins
-  const isComponent = !!props!.src?.match(
-    /[0-9a-z._-]{5,}\/[0-9a-z._-]+/gi
-  );
+  const isComponent = !!props!.src?.match(/[0-9a-z._-]{5,}\/[0-9a-z._-]+/gi);
   const { children } = props;
   if (!children) {
     return undefined;
@@ -107,7 +105,6 @@ export const dispatchRenderEvent: DispatchRenderEventCallback = ({
   node,
   nodeRenders,
   postComponentRenderMessage,
-  postMessage,
   serializeNode,
   trust,
 }) => {
@@ -160,10 +157,9 @@ export const dispatchRenderEvent: DispatchRenderEventCallback = ({
 
   try {
     postComponentRenderMessage({
-      childComponents,
+      childComponents: childComponents || [],
       componentId: componentId,
       node: serializedNode,
-      postMessage,
       trust,
     });
   } catch (error) {

packages/container/src/serialize.ts

@@ -26,7 +26,6 @@ interface SerializeChildComponentParams {
  * @param parentContainerId ID of the parent container
  * @param postCallbackInvocationMessage Request invocation on external Component via window.postMessage
  * @param preactRootComponentName The name of the root/Fragment Preact function
- * @param postMessage Method for calling postMessage on the parent window
  * @param requests Set of current callback requests
  */
 export const composeSerializationMethods: ComposeSerializationMethodsCallback =
@@ -36,7 +35,6 @@ export const composeSerializationMethods: ComposeSerializationMethodsCallback =
     parentContainerId,
     postCallbackInvocationMessage,
     preactRootComponentName,
-    postMessage,
     requests,
   }) => {
     /**
@@ -185,7 +183,6 @@ export const composeSerializationMethods: ComposeSerializationMethodsCallback =
                 callbacks,
                 componentId,
                 method: __componentMethod, // the key on the props object passed to this Component
-                postMessage,
                 requestId,
                 serializeArgs,
                 targetId: parentContainerId,

packages/container/src/types.ts

@@ -91,10 +91,6 @@ export interface PostMessageParams {
   type: EventType;
 }
 
-export type PostMessageCallback = <T extends PostMessageParams>(
-  message: T
-) => void;
-
 export type PostMessageComponentInvocationCallback = (
   message: PostMessageComponentCallbackInvocationParams
 ) => void;
@@ -111,7 +107,6 @@ export interface PostMessageComponentCallbackInvocationParams {
   args: any[];
   callbacks: CallbackMap;
   method: string;
-  postMessage: PostMessageCallback;
   requestId: string;
   serializeArgs: SerializeArgsCallback;
   targetId: string;
@@ -131,12 +126,14 @@ export interface ComponentCallbackResponse extends PostMessageParams {
 export interface PostMessageComponentCallbackResponseParams {
   componentId: string;
   error: Error | null;
-  postMessage: PostMessageCallback;
   requestId: string;
   result: any;
   targetId: string;
 }
 
+export type PostMessageComponentRenderCallback = (
+  message: PostMessageComponentRenderParams
+) => void;
 export interface ComponentRender extends PostMessageParams {
   childComponents: ComponentChildMetadata[];
   componentId: string;
@@ -148,7 +145,6 @@ export interface PostMessageComponentRenderParams {
   childComponents: ComponentChildMetadata[];
   componentId: string;
   node: SerializedNode;
-  postMessage: PostMessageCallback;
   trust: ComponentTrust;
 }
 
@@ -174,7 +170,6 @@ export interface ComposeSerializationMethodsParams {
   parentContainerId: string | null;
   postCallbackInvocationMessage: PostMessageComponentInvocationCallback;
   preactRootComponentName: string;
-  postMessage: PostMessageCallback;
   requests: RequestMap;
 }
 
@@ -187,6 +182,12 @@ export type ComposeSerializationMethodsCallback = (
   serializeProps: SerializePropsCallback;
 };
 
+export type ComposeMessagingMethodsCallback = () => {
+  postCallbackInvocationMessage: PostMessageComponentInvocationCallback;
+  postCallbackResponseMessage: PostMessageComponentResponseCallback;
+  postComponentRenderMessage: PostMessageComponentRenderCallback;
+};
+
 export type UpdateContainerPropsCallback = (props: Props) => void;
 
 export interface ProcessEventParams {
@@ -199,7 +200,6 @@ export interface ProcessEventParams {
   parentContainerId: string | null;
   postCallbackInvocationMessage: PostMessageComponentInvocationCallback;
   postCallbackResponseMessage: PostMessageComponentResponseCallback;
-  postMessage: PostMessageCallback;
   renderDom: (node: any) => object;
   requests: RequestMap;
   serializeArgs: SerializeArgsCallback;
@@ -213,6 +213,7 @@ export interface InitContainerParams {
     buildRequest: BuildRequestCallback;
     buildSafeProxy: BuildSafeProxyCallback;
     buildUseComponentCallback: BuildUseComponentCallback;
+    composeMessagingMethods: ComposeMessagingMethodsCallback;
     composeSerializationMethods: ComposeSerializationMethodsCallback;
     dispatchRenderEvent: DispatchRenderEventCallback;
     invokeCallback: (args: InvokeCallbackParams) => any;
@@ -221,7 +222,6 @@ export interface InitContainerParams {
     postCallbackInvocationMessage: PostMessageComponentInvocationCallback;
     postCallbackResponseMessage: PostMessageComponentResponseCallback;
     postComponentRenderMessage: (p: any) => void;
-    postMessage: PostMessageCallback;
     preactify: PreactifyCallback;
     renderContainerComponent: RenderContainerComponentCallback;
   };
@@ -236,7 +236,7 @@ export interface InitContainerParams {
     preactRootComponentName: string;
     props: any;
     render: PreactRender;
-    trust: string;
+    trust: ComponentTrust;
     updateContainerProps: UpdateContainerPropsCallback;
   };
 }
@@ -332,12 +332,11 @@ export interface DispatchRenderEventParams {
   componentId: string;
   node: Node;
   nodeRenders: Map<string, string>;
-  postComponentRenderMessage: (p: any) => void;
-  postMessage: PostMessageCallback;
+  postComponentRenderMessage: PostMessageComponentRenderCallback;
   preactRootComponentName: string;
   serializeNode: (p: SerializeNodeParams) => SerializedNode;
   serializeProps: SerializePropsCallback;
-  trust: string;
+  trust: ComponentTrust;
 }
 export type DispatchRenderEventCallback = (
   params: DispatchRenderEventParams