Added data events

Author: validide

docs/demo/embeded-nav-bar.html

@@ -64,6 +64,9 @@
         manager.initialize();
         var contentMethods = new ufe.ContentCommunicationHandlerMethods();
         contentMethods.dispose = function() { dispose(); };
+        contentMethods.handleDataEvent = function(data) {
+          console.log('Iframe recevied data: \n\n' + JSON.stringify(data));
+         };
         communicationHandler = new ufe.CrossWindowContentCommunicationHandler(
           manager,
           contentMethods
@@ -104,6 +107,7 @@
         } else {
           if (communicationHandler) {
             communicationHandler.dispatchBeforeUpdate();
+
             setTimeout(() => {
               communicationHandler.dispatchUpdated();
             }, 1000);
@@ -123,6 +127,7 @@
           // Simulate a delay to consider exts processing
           window.setTimeout(() => {
             communicationHandler.dispatchMounted();
+            communicationHandler.sendData(['Data from content!']);
           }, 1000);
         }
       }

docs/demo/js/app.js

@@ -28,7 +28,10 @@
       case 'error':
         console.error(evt.error);
         break;
-      default:
+      case 'data':
+        console.log('Data from child:\n' + JSON.stringify(evt.data));
+          break;
+        default:
         alert('Unknown event: ' + evt.type);
     }
   }
@@ -43,6 +46,7 @@
   globalHandlers['beforeDestroy'] = mfeEventHadler;
   globalHandlers['destroyed'] = mfeEventHadler;
   globalHandlers['error'] = mfeEventHadler;
+  globalHandlers['data'] = mfeEventHadler;
 
 
   var configuration = new ufe.RootComponentOptions();
@@ -206,6 +210,10 @@
       if (!navbarIframeId)
         return;
 
+      mfe.getChild(navbarIframeId).sendData({
+        'foo': 'bar'
+      })
+
       await mfe.removeChild(navbarIframeId);
       navbarIframeId = '';
     }

docs/demo/lib/bundle/index.js

@@ -42,6 +42,7 @@ export abstract class ChildComponent extends Component {
     methods.mounted = () => this.callHandler(ComponentEventType.Mounted);
     methods.beforeUpdate = () => this.callHandler(ComponentEventType.BeforeUpdate);
     methods.updated = () => this.callHandler(ComponentEventType.Updated);
+    methods.data = (data: any) => this.callHandler(ComponentEventType.Data, data);
     methods.beforeDispose = () => this.contentBeginDisposed();
     methods.disposed = () => this.contentDisposed();
     return this.getCommunicationHandlerCore(methods);
@@ -139,4 +140,12 @@ export abstract class ChildComponent extends Component {
     this.contentDisposePromise = null;
     await super.disposeCore();
   }
+
+  /**
+   * Send data.
+   * @param data The data to send.
+   */
+  public sendData(data: any): void{
+    this.communicationHandler?.sendData(data);
+  }
 }

docs/demo/lib/bundle/index.js.map

@@ -26,6 +26,10 @@ export class ContainerCommunicationHandlerMethods {
    * Call the container to signal the component has disposed(almost).
    */
   public [CommunicationsEventKind.Disposed]: () => void = noop;
+  /**
+   * Call the container to signal the component has disposed(almost).
+   */
+  public [CommunicationsEventKind.Data]: (data: any) => void = noop;
 }
 
 /**
@@ -65,7 +69,7 @@ export abstract class ContainerCommunicationHandler {
     if (!method)
       return;
 
-    method();
+    method(e.data);
   }
 
   /**
@@ -97,6 +101,16 @@ export abstract class ContainerCommunicationHandler {
     this.communicationsManager?.send(event);
   }
 
+  /**
+   * Send data.
+   * @param data The data to send.
+   */
+  public sendData(data: any): void{
+    const event = new CommunicationsEvent(CommunicationsEventKind.Data);
+    event.data = data;
+    this.communicationsManager?.send(event);
+  }
+
   /**
    * Reuest that the content begins disposing.
    */

src/core/children/childComponent.ts

@@ -10,6 +10,10 @@ export class ContentCommunicationHandlerMethods {
    * Method to dispose the content.
    */
   public dispose: () => void = noop;
+  /**
+   * Method to dispose the content.
+   */
+  public handleDataEvent: (data: any) => void = noop;
 }
 
 /**
@@ -49,6 +53,11 @@ export abstract class ContentCommunicationHandler {
           this.methods.dispose();
         }
         break;
+      case CommunicationsEventKind.Data:
+        if (this.methods) {
+          this.methods.handleDataEvent(e.data);
+        }
+        break;
       default:
         throw new Error(`The "${e.kind}" event is not configured.`);
     }
@@ -76,6 +85,15 @@ export abstract class ContentCommunicationHandler {
     this.communicationsManager?.send(event);
   }
 
+  /**
+   * Dispatch event to signal mounting finished.
+   */
+  public sendData(data: any): void {
+    const evt = new CommunicationsEvent(CommunicationsEventKind.Data);
+    evt.data = data;
+    this.send(evt);
+  }
+
   /**
    * Dispatch event to signal mounting finished.
    */

src/core/children/communications/containerHandler.ts

@@ -7,7 +7,8 @@ export enum CommunicationsEventKind {
   BeforeUpdate = 'beforeUpdate',
   Updated = 'updated',
   BeforeDispose = 'beforeDispose',
-  Disposed = 'disposed'
+  Disposed = 'disposed',
+  Data = 'data'
 }
 
 /**

src/core/children/communications/contentHandler.ts

@@ -160,7 +160,7 @@ export abstract class Component {
    * Call a specific event handler.
    * @param type The type of handler to call.
    */
-  protected callHandler(type: ComponentEventType): void {
+  protected callHandler(type: ComponentEventType, data?: any): void {
     if (type === ComponentEventType.Error)
       throw new Error(`For calling the "${ComponentEventType.Error}" handler use the "callErrorHandler" method.`);
 
@@ -170,13 +170,15 @@ export abstract class Component {
 
     if (handler) {
       try {
-        handler(new ComponentEvent(
+        const event = new ComponentEvent(
           this.id,
           type,
           this.rootElement,
           this.getParentElement(),
           null
-        ));
+        );
+        event.data = data;
+        handler(event);
       } catch (error) {
         this.callErrorHandler(error);
       }

src/core/children/communications/event.ts

@@ -10,7 +10,8 @@ export enum ComponentEventType {
   Updated = 'updated',
   BeforeDestroy = 'beforeDestroy',
   Destroyed = 'destroyed',
-  Error = 'error'
+  Error = 'error',
+  Data = 'data'
 }
 
 /**
@@ -28,6 +29,7 @@ export class ComponentEvent {
   public parentEl: HTMLElement;
   public error: Error | null;
   public timestamp: Date;
+  public data: any;
 
   /**
    * COnstructor.

src/core/component.ts

@@ -14,6 +14,7 @@ export class ComponentEventHandlers {
   [ComponentEventType.BeforeDestroy]?: ComponentEventHandler;
   [ComponentEventType.Destroyed]?: ComponentEventHandler;
   [ComponentEventType.Error]?: ComponentEventHandler;
+  [ComponentEventType.Data]?: ComponentEventHandler;
 }
 
 /**