diff --git a/packages/container/src/callbacks.ts b/packages/container/src/callbacks.ts index 73b4d21b..9e4b29e3 100644 --- a/packages/container/src/callbacks.ts +++ b/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, diff --git a/packages/container/src/container.ts b/packages/container/src/container.ts index c55368e4..9d2182c0 100644 --- a/packages/container/src/container.ts +++ b/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,6 +40,12 @@ 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, @@ -50,7 +53,6 @@ export function initContainer({ 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, diff --git a/packages/container/src/events.ts b/packages/container/src/events.ts index cd68f2fb..689fb6fc 100644 --- a/packages/container/src/events.ts +++ b/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, diff --git a/packages/container/src/index.ts b/packages/container/src/index.ts index 6dca21a1..7cfd0d46 100644 --- a/packages/container/src/index.ts +++ b/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, diff --git a/packages/container/src/messaging.ts b/packages/container/src/messaging.ts index bf44c220..96270c66 100644 --- a/packages/container/src/messaging.ts +++ b/packages/container/src/messaging.ts @@ -24,65 +24,70 @@ export function buildRequest(): CallbackRequest { }; } -export function postMessage(message: T) { - window.parent.postMessage(message, '*'); -} +export function composeMessagingMethods() { + function postMessage(message: T) { + window.parent.postMessage(message, '*'); + } -export function postCallbackInvocationMessage({ - args, - callbacks, - componentId, - method, - postMessage, - requestId, - serializeArgs, - targetId, -}: PostMessageComponentCallbackInvocationParams): void { - postMessage({ - args: serializeArgs({ args, callbacks, componentId }), + function postCallbackInvocationMessage({ + args, + callbacks, + componentId, method, - originator: componentId, requestId, + serializeArgs, targetId, - type: 'component.callbackInvocation', - }); -} + }: PostMessageComponentCallbackInvocationParams): void { + postMessage({ + 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({ - 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({ + postMessage({ + 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({ + childComponents, + componentId, + node, + trust, + type: 'component.render', + }); + } + + return { + postCallbackInvocationMessage, + postCallbackResponseMessage, + postComponentRenderMessage, + }; } diff --git a/packages/container/src/render.ts b/packages/container/src/render.ts index 8c2dcfb7..e787a05f 100644 --- a/packages/container/src/render.ts +++ b/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) { diff --git a/packages/container/src/serialize.ts b/packages/container/src/serialize.ts index 84b26c39..d0e91ca4 100644 --- a/packages/container/src/serialize.ts +++ b/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, diff --git a/packages/container/src/types.ts b/packages/container/src/types.ts index 954d54cc..b5333461 100644 --- a/packages/container/src/types.ts +++ b/packages/container/src/types.ts @@ -91,10 +91,6 @@ export interface PostMessageParams { type: EventType; } -export type PostMessageCallback = ( - 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; - 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 diff --git a/packages/iframe/src/SandboxedIframe.tsx b/packages/iframe/src/SandboxedIframe.tsx index d2ae0c3d..4d147b32 100644 --- a/packages/iframe/src/SandboxedIframe.tsx +++ b/packages/iframe/src/SandboxedIframe.tsx @@ -5,10 +5,7 @@ import { invokeCallback, invokeComponentCallback, buildRequest, - postMessage, - postCallbackInvocationMessage, - postCallbackResponseMessage, - postComponentRenderMessage, + composeMessagingMethods, dispatchRenderEvent, initContainer, isMatchingProps, @@ -72,15 +69,12 @@ function buildSandboxedComponent({ buildRequest: ${buildRequest.toString()}, buildSafeProxy: ${buildSafeProxy.toString()}, buildUseComponentCallback: ${buildUseComponentCallback.toString()}, + composeMessagingMethods: ${composeMessagingMethods.toString()}, composeSerializationMethods: ${composeSerializationMethods.toString()}, dispatchRenderEvent: ${dispatchRenderEvent.toString()}, invokeCallback: ${invokeCallback.toString()}, invokeComponentCallback: ${invokeComponentCallback.toString()}, isMatchingProps: ${isMatchingProps.toString()}, - postCallbackInvocationMessage: ${postCallbackInvocationMessage.toString()}, - postCallbackResponseMessage: ${postCallbackResponseMessage.toString()}, - postComponentRenderMessage: ${postComponentRenderMessage.toString()}, - postMessage: ${postMessage.toString()}, preactify: ${preactify.toString()}, renderContainerComponent: ${renderContainerComponent.toString()}, }, @@ -95,7 +89,7 @@ function buildSandboxedComponent({ preactHooksDiffed: Preact.options.diffed, preactRootComponentName: Preact.Fragment.name, render: Preact.render, - trust: '${JSON.stringify(trust)}', + trust: ${JSON.stringify(trust)}, updateContainerProps: (updateProps) => { const originalProps = props; // if nothing has changed, the same [props] object will be returned