diff --git a/apps/web/components/ComponentMonitor.tsx b/apps/web/components/ComponentMonitor.tsx index c16501a9..bd66a2dd 100644 --- a/apps/web/components/ComponentMonitor.tsx +++ b/apps/web/components/ComponentMonitor.tsx @@ -181,7 +181,7 @@ 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' : '' diff --git a/packages/application/src/handlers.ts b/packages/application/src/handlers.ts index 43209662..41568173 100644 --- a/packages/application/src/handlers.ts +++ b/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, diff --git a/packages/common/src/types/messaging.ts b/packages/common/src/types/messaging.ts index e2cb4b59..967644ba 100644 --- a/packages/common/src/types/messaging.ts +++ b/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; diff --git a/packages/container/src/callbacks.ts b/packages/container/src/callbacks.ts index 7b4c60dd..c0a3e02f 100644 --- a/packages/container/src/callbacks.ts +++ b/packages/container/src/callbacks.ts @@ -40,7 +40,7 @@ export function invokeComponentCallback({ args, buildRequest, callbacks, - componentId, + containerId, invokeCallback, method, postCallbackInvocationMessage, @@ -49,7 +49,7 @@ 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; } @@ -72,7 +72,7 @@ export function invokeComponentCallback({ postCallbackInvocationMessage({ args: childArgs, callbacks, - componentId, + containerId, method: callbackIdentifier, requestId, serializeArgs, diff --git a/packages/container/src/container.ts b/packages/container/src/container.ts index 189a6d14..2f858ffd 100644 --- a/packages/container/src/container.ts +++ b/packages/container/src/container.ts @@ -67,7 +67,7 @@ export function initContainer({ const processEvent = buildEventHandler({ buildRequest, callbacks, - componentId, + containerId: componentId, deserializeArgs, deserializeProps, invokeCallback, @@ -97,7 +97,7 @@ export function initContainer({ const props = buildSafeProxy({ componentId, props: deserializeProps({ - componentId, + containerId: componentId, props: componentPropsJson, }), }); diff --git a/packages/container/src/events.ts b/packages/container/src/events.ts index 7748e6db..23f4c8c2 100644 --- a/packages/container/src/events.ts +++ b/packages/container/src/events.ts @@ -6,7 +6,7 @@ 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 @@ -20,7 +20,7 @@ import type { ProcessEventParams } from './types'; export function buildEventHandler({ buildRequest, callbacks, - componentId, + containerId, deserializeArgs, deserializeProps, invokeCallback, @@ -43,12 +43,12 @@ export function buildEventHandler({ args: SerializedArgs; method: string; }) { - const deserializedArgs = deserializeArgs({ args, componentId }); + const deserializedArgs = deserializeArgs({ args, containerId }); return invokeComponentCallback({ args: deserializedArgs, buildRequest, callbacks, - componentId, + containerId, invokeCallback, method, postCallbackInvocationMessage, @@ -111,7 +111,7 @@ export function buildEventHandler({ if (requestId) { postCallbackResponseMessage({ error, - componentId, + containerId, requestId, result: value, targetId: originator, @@ -182,7 +182,7 @@ export function buildEventHandler({ case 'component.update': { updateProps( deserializeProps({ - componentId, + containerId, props: event.data.props, }) ); diff --git a/packages/container/src/messaging.ts b/packages/container/src/messaging.ts index 192608c8..c4b5a4fd 100644 --- a/packages/container/src/messaging.ts +++ b/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({ - 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({ requestId, - componentId, + containerId, result: JSON.stringify({ value: result, error: serializedError, diff --git a/packages/container/src/serialize.ts b/packages/container/src/serialize.ts index ff43ec47..440ee4bc 100644 --- a/packages/container/src/serialize.ts +++ b/packages/container/src/serialize.ts @@ -188,13 +188,13 @@ export const composeSerializationMethods: ComposeSerializationMethodsCallback = const deserializeArgs: DeserializeArgsCallback = ({ args, - componentId, + containerId, }) => { return deepTransform({ value: args, onSerializedCallback: (cb) => { return deserializePropsCallback({ - containerId: componentId, + containerId, callbackIdentifier: cb.callbackIdentifier, }); }, @@ -204,7 +204,7 @@ export const composeSerializationMethods: ComposeSerializationMethodsCallback = const serializeArgs: SerializeArgsCallback = ({ args, callbacks, - componentId, + containerId, }) => { return (args || []).map((arg) => { if (!arg) { @@ -212,7 +212,7 @@ export const composeSerializationMethods: ComposeSerializationMethodsCallback = } if (Array.isArray(arg)) { - return serializeArgs({ args: arg, callbacks, componentId }); + return serializeArgs({ args: arg, callbacks, containerId }); } if (typeof arg === 'object') { @@ -221,7 +221,7 @@ export const composeSerializationMethods: ComposeSerializationMethodsCallback = serializeArgs({ args: Object.values(arg), callbacks, - componentId, + containerId, }).map((value, i) => [argKeys[i], value]) ); } @@ -233,13 +233,13 @@ export const composeSerializationMethods: ComposeSerializationMethodsCallback = const fnKey = buildContainerMethodIdentifier({ callback: arg, callbackName: arg?.name, // FIXME - containerId: componentId, + containerId, }); callbacks[fnKey] = arg; return { callbackIdentifier: fnKey, - containerId: componentId, + containerId, }; }); }; @@ -257,7 +257,7 @@ export const composeSerializationMethods: ComposeSerializationMethodsCallback = postCallbackInvocationMessage({ args, callbacks, - componentId: containerId, + containerId, method: callbackIdentifier, requestId, serializeArgs, @@ -269,7 +269,7 @@ export const composeSerializationMethods: ComposeSerializationMethodsCallback = }; const deserializeProps: DeserializePropsCallback = ({ - componentId, + containerId, props, }) => { if (!props || Array.isArray(props) || typeof props !== 'object') { @@ -280,7 +280,7 @@ export const composeSerializationMethods: ComposeSerializationMethodsCallback = value: props, onSerializedCallback: (cb) => { return deserializePropsCallback({ - containerId: componentId, + containerId, callbackIdentifier: cb.callbackIdentifier, }); }, diff --git a/packages/container/src/types.ts b/packages/container/src/types.ts index 57792b9a..d8c14674 100644 --- a/packages/container/src/types.ts +++ b/packages/container/src/types.ts @@ -21,12 +21,12 @@ export type CallbackMap = { [key: string]: Function }; export type DeserializeArgsCallback = (params: DeserializeArgsParams) => any; export interface DeserializeArgsParams { args: any; - componentId: string; + containerId: string; } export type DeserializePropsCallback = (params: DeserializePropsParams) => any; export interface DeserializePropsParams { - componentId: string; + containerId: string; props: Props; } @@ -41,7 +41,7 @@ export interface InvokeComponentCallbackParams { args: SerializedArgs; buildRequest: BuildRequestCallback; callbacks: CallbackMap; - componentId: string; + containerId: string; invokeCallback: (args: InvokeCallbackParams) => any; method: string; postCallbackInvocationMessage: PostMessageComponentInvocationCallback; @@ -56,18 +56,18 @@ export type PostMessageComponentInvocationCallback = ( export interface PostMessageComponentCallbackInvocationParams { args: any[]; callbacks: CallbackMap; + containerId: string; method: string; requestId: string; serializeArgs: SerializeArgsCallback; targetId: string; - componentId: string; } export type PostMessageComponentResponseCallback = ( message: PostMessageComponentCallbackResponseParams ) => void; export interface PostMessageComponentCallbackResponseParams { - componentId: string; + containerId: string; error: Error | null; requestId: string; result: any; @@ -129,7 +129,7 @@ export type UpdateContainerPropsCallback = (props: Props) => void; export interface ProcessEventParams { buildRequest: BuildRequestCallback; callbacks: CallbackMap; - componentId: string; + containerId: string; deserializeArgs: DeserializeArgsCallback; deserializeProps: DeserializePropsCallback; invokeCallback: (args: InvokeCallbackParams) => any; @@ -177,7 +177,7 @@ export type SerializeArgsCallback = ( export interface SerializeArgsParams { args: any[]; callbacks: CallbackMap; - componentId: string; + containerId: string; } export interface PreactElement {