feat: make pusher widget accept list of actions

r0b1n · r0b1n · commit 250f50ee94a2 · 2026-06-15T09:36:32.000+02:00
diff --git a/packages/pluggableWidgets/pusher-web/src/Pusher.editorConfig.ts b/packages/pluggableWidgets/pusher-web/src/Pusher.editorConfig.ts
@@ -1,4 +1,4 @@
-import { Properties } from "@mendix/pluggable-widgets-tools";
+import { Problem, Properties } from "@mendix/pluggable-widgets-tools";
 import {
     container,
     rowLayout,
@@ -12,6 +12,26 @@ export function getProperties(_values: PusherPreviewProps, defaultProperties: Pr
     return defaultProperties;
 }
 
+export function check(values: PusherPreviewProps): Problem[] {
+    const errors: Problem[] = [];
+
+    // Check for duplicate action names
+    if (values.eventHandlers && values.eventHandlers.length > 0) {
+        const actionNames = values.eventHandlers.map(handler => handler.actionName).filter(name => name);
+        const duplicates = actionNames.filter((name, index) => actionNames.indexOf(name) !== index);
+
+        if (duplicates.length > 0) {
+            const uniqueDuplicates = Array.from(new Set(duplicates));
+            errors.push({
+                property: "eventHandlers",
+                message: `Duplicate action names found: ${uniqueDuplicates.join(", ")}. Each action name must be unique.`
+            });
+        }
+    }
+
+    return errors;
+}
+
 export function getPreview(values: PusherPreviewProps, isDarkMode: boolean): StructurePreviewProps {
     const palette = structurePreviewPalette[isDarkMode ? "dark" : "light"];
 
@@ -27,5 +47,6 @@ export function getCustomCaption(values: PusherPreviewProps): string {
 }
 
 export function getCaption(values: PusherPreviewProps): string {
-    return `Pusher widget [${values.notifyActionName}]`;
+    const handlerCount = values.eventHandlers?.length ?? 0;
+    return handlerCount > 0 ? `Pusher widget [${handlerCount} handler${handlerCount > 1 ? "s" : ""}]` : "Pusher widget";
 }
diff --git a/packages/pluggableWidgets/pusher-web/src/Pusher.tsx b/packages/pluggableWidgets/pusher-web/src/Pusher.tsx
@@ -7,18 +7,7 @@ import "./ui/Pusher.scss";
 import { getChannelName } from "./utils/getChannelName";
 
 export default function Pusher(props: PusherContainerProps): ReactElement {
-    const { class: className, objectSource, notifyActionName, notifyEventAction } = props;
-
-    // Event callback - triggered when Pusher event is received
-    const handleEvent = useCallback(
-        (data: unknown) => {
-            console.debug("[Pusher] Event received:", data);
-
-            // Execute configured action
-            executeAction(notifyEventAction);
-        },
-        [notifyEventAction]
-    );
+    const { class: className, objectSource, eventHandlers } = props;
 
     // Error callback
     const handleError = useCallback((error: Error) => {
@@ -34,13 +23,28 @@ export default function Pusher(props: PusherContainerProps): ReactElement {
             return undefined;
         }
 
+        // Build event bindings from configured handlers
+        const eventBindings = eventHandlers
+            .filter(handler => handler.actionName && handler.action?.canExecute)
+            .map(handler => ({
+                eventName: handler.actionName,
+                onEvent: () => {
+                    console.debug(`[Pusher] Event received: ${handler.actionName}`);
+                    executeAction(handler.action);
+                }
+            }));
+
+        // If no valid handlers, return undefined (no subscription)
+        if (eventBindings.length === 0) {
+            return undefined;
+        }
+
         return {
             channelName,
-            eventName: notifyActionName,
-            onEvent: handleEvent,
+            eventBindings,
             onError: handleError
         };
-    }, [channelName, notifyActionName, handleEvent, handleError]);
+    }, [channelName, eventHandlers, handleError]);
 
     usePusherSubscribe(subscription);
 
diff --git a/packages/pluggableWidgets/pusher-web/src/Pusher.xml b/packages/pluggableWidgets/pusher-web/src/Pusher.xml
@@ -10,14 +10,21 @@
                 <description />
             </property>
 
-            <property key="notifyActionName" type="string" required="true" defaultValue="change">
-                <caption>Action name</caption>
-                <description>The name should match the with the 'Notify' action parameter `ActionName`</description>
-            </property>
-
-            <property key="notifyEventAction" type="action" required="false">
-                <caption>Action</caption>
-                <description />
+            <property key="eventHandlers" type="object" isList="true" required="false">
+                <caption>Event Handlers</caption>
+                <description>Configure multiple event handlers for different Pusher events</description>
+                <properties>
+                    <propertyGroup caption="General">
+                        <property key="actionName" type="string" required="true">
+                            <caption>Action name</caption>
+                            <description>The name should match the 'Notify' action parameter `ActionName`</description>
+                        </property>
+                        <property key="action" type="action" required="false">
+                            <caption>Action</caption>
+                            <description>Client action to execute when this event is received</description>
+                        </property>
+                    </propertyGroup>
+                </properties>
             </property>
         </propertyGroup>
     </properties>
diff --git a/packages/pluggableWidgets/pusher-web/src/utils/PusherListener.ts b/packages/pluggableWidgets/pusher-web/src/utils/PusherListener.ts
@@ -7,17 +7,24 @@ export interface PusherConfig {
     csrfToken: string;
 }
 
+export interface EventBinding {
+    eventName: string;
+    onEvent: () => void;
+}
+
 export interface SubscriptionConfig {
     channelName: string;
-    eventName: string;
-    onEvent: (data: unknown) => void;
+    eventBindings: EventBinding[];
     onError?: (error: Error) => void;
 }
 
 export class PusherListener {
     private pusher: Pusher;
     private currentChannel: Channel | null = null;
-    private currentSubscription: SubscriptionConfig | null = null;
+    private currentChannelName: string | null = null;
+    private eventHandlersMap: Map<string, () => void> = new Map();
+    private globalCallback: ((eventName: string, data: unknown) => void) | null = null;
+    private onError?: (error: Error) => void;
 
     constructor(private config: PusherConfig) {
         this.pusher = new Pusher(this.config.key, {
@@ -36,46 +43,59 @@ export class PusherListener {
     }
 
     /**
-     * Subscribe to channel for specific object and event
-     * Automatically unsubscribes from previous channel if different
+     * Subscribe to channel for specific object and bind multiple events
+     * Only resubscribes when channel name changes, not when handlers change
      */
     subscribe(config: SubscriptionConfig): void {
-        // If already subscribed to same channel and event, do nothing
-        if (config === this.currentSubscription) {
-            return;
-        }
+        // Only resubscribe if channel name changes
+        if (config.channelName !== this.currentChannelName) {
+            this.unsubscribe();
+            this.currentChannelName = config.channelName;
+            this.currentChannel = this.pusher.subscribe(config.channelName);
 
-        // Unsubscribe from previous channel if exists
-        this.unsubscribe();
-
-        // Subscribe to new channel
-        this.currentSubscription = config;
-        this.currentChannel = this.pusher.subscribe(config.channelName);
+            // Setup global handler once per channel
+            this.globalCallback = (eventName: string, _data: unknown) => {
+                const handler = this.eventHandlersMap.get(eventName);
+                if (handler) {
+                    handler();
+                }
+            };
+            this.currentChannel.bind_global(this.globalCallback);
 
-        // Bind event handler
-        this.currentChannel.bind(config.eventName, config.onEvent);
+            // Bind error handler
+            this.currentChannel.bind("pusher:subscription_error", (error: unknown) => {
+                console.error(error);
+                const errorMsg =
+                    error === 515
+                        ? "Authentication failed. Please verify Pusher configuration constants."
+                        : `Subscription error: ${String(error)}`;
+                this.onError?.(new Error(errorMsg));
+            });
+        }
 
-        // Bind error handler
-        this.currentChannel.bind("pusher:subscription_error", (error: unknown) => {
-            console.error(error);
-            const errorMsg =
-                error === 515
-                    ? "Authentication failed. Please verify Pusher configuration constants."
-                    : `Subscription error: ${String(error)}`;
-            config.onError?.(new Error(errorMsg));
+        // Always update handler map (no rebinding needed)
+        this.eventHandlersMap.clear();
+        config.eventBindings.forEach(binding => {
+            this.eventHandlersMap.set(binding.eventName, binding.onEvent);
         });
+
+        // Store error handler for reference
+        this.onError = config.onError;
     }
 
     /**
      * Unsubscribe from current channel
      */
     unsubscribe(): void {
-        if (this.currentChannel && this.currentSubscription) {
-            // Unbind all channel events
-            this.currentChannel.unbind();
-            this.pusher.unsubscribe(this.currentSubscription.channelName);
+        if (this.currentChannel && this.currentChannelName) {
+            // Unbind all channel events (both global and specific)
+            this.currentChannel.unbind_all();
+            this.pusher.unsubscribe(this.currentChannelName);
             this.currentChannel = null;
-            this.currentSubscription = null;
+            this.currentChannelName = null;
+            this.globalCallback = null;
+            this.eventHandlersMap.clear();
+            this.onError = undefined;
         }
     }
 
diff --git a/packages/pluggableWidgets/pusher-web/typings/PusherProps.d.ts b/packages/pluggableWidgets/pusher-web/typings/PusherProps.d.ts
@@ -6,14 +6,23 @@
 import { ActionValue, DynamicValue, ObjectItem } from "mendix";
 import { CSSProperties } from "react";
 
+export interface EventHandlersType {
+    actionName: string;
+    action?: ActionValue;
+}
+
+export interface EventHandlersPreviewType {
+    actionName: string;
+    action: {} | null;
+}
+
 export interface PusherContainerProps {
     name: string;
     class: string;
     style?: CSSProperties;
     tabIndex?: number;
     objectSource: DynamicValue<ObjectItem>;
-    notifyActionName: string;
-    notifyEventAction?: ActionValue;
+    eventHandlers: EventHandlersType[];
 }
 
 export interface PusherPreviewProps {
@@ -28,6 +37,5 @@ export interface PusherPreviewProps {
     renderMode: "design" | "xray" | "structure";
     translate: (text: string) => string;
     objectSource: {} | { caption: string } | { type: string } | null;
-    notifyActionName: string;
-    notifyEventAction: {} | null;
+    eventHandlers: EventHandlersPreviewType[];
 }
