From 28b7639ef5a6d4a54561b8bdfdcb3f1c5cef747d Mon Sep 17 00:00:00 2001 From: Ndricim Rrapi Date: Thu, 29 Aug 2024 16:12:08 +0200 Subject: [PATCH 01/22] Add initial documentation --- client/luigi-element.d.ts | 6 ++++++ container/src/services/webcomponents.service.ts | 1 + container/test-app/wc/clientAPI.html | 4 ++-- 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/client/luigi-element.d.ts b/client/luigi-element.d.ts index 31fefc3e89..6f17f2e1e8 100644 --- a/client/luigi-element.d.ts +++ b/client/luigi-element.d.ts @@ -419,6 +419,12 @@ export interface LuigiClient { getCurrentLocale: () => string; linkManager: () => LinkManager; uxManager: () => UxManager; + /** + * Published an event that can be listened to on the other end + * @param event event to be published + * @returns + * @memberof LuigiClient + */ publishEvent: (event: Event) => void; /** * Sets node parameters in Luigi Core. The parameters will be added to the URL. diff --git a/container/src/services/webcomponents.service.ts b/container/src/services/webcomponents.service.ts index 0461c1f6b6..a9d9587c3b 100644 --- a/container/src/services/webcomponents.service.ts +++ b/container/src/services/webcomponents.service.ts @@ -277,6 +277,7 @@ export class WebComponentService { }, publishEvent: ev => { if (eventBusElement && eventBusElement.eventBus) { + // compound component use case only eventBusElement.eventBus.onPublishEvent(ev, nodeId, wc_id); } const payload = { diff --git a/container/test-app/wc/clientAPI.html b/container/test-app/wc/clientAPI.html index 186331bdac..1efd548c74 100644 --- a/container/test-app/wc/clientAPI.html +++ b/container/test-app/wc/clientAPI.html @@ -96,9 +96,9 @@

} ); luigiContainer.addEventListener(MFEventID.CUSTOM_MESSAGE, event => { - console.log('Custom Event', event); + console.log('Custom Event 123', event); if (event.detail.id !== 'timer') { - alert(event.detail.id); + alert(event.detail.id + 'custom'); } }); From 8b4cc64ef657e3271c40dd04662acd67b989d44f Mon Sep 17 00:00:00 2001 From: Ndricim Rrapi Date: Thu, 29 Aug 2024 16:12:47 +0200 Subject: [PATCH 02/22] Add initial documentation --- client/luigi-element.d.ts | 2 +- container/test-app/wc/clientAPI.html | 16 +++++++++++----- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/client/luigi-element.d.ts b/client/luigi-element.d.ts index 6f17f2e1e8..ab775dcd70 100644 --- a/client/luigi-element.d.ts +++ b/client/luigi-element.d.ts @@ -422,7 +422,7 @@ export interface LuigiClient { /** * Published an event that can be listened to on the other end * @param event event to be published - * @returns + * @returns * @memberof LuigiClient */ publishEvent: (event: Event) => void; diff --git a/container/test-app/wc/clientAPI.html b/container/test-app/wc/clientAPI.html index 1efd548c74..ccee1e413d 100644 --- a/container/test-app/wc/clientAPI.html +++ b/container/test-app/wc/clientAPI.html @@ -10,7 +10,9 @@

component based microfrontend

- +
@@ -49,7 +51,7 @@

defer-init="true" >

- +
@@ -70,10 +72,14 @@

deferInitContainer.init(); }); // document.querySelector('luigi-container'); - const container = document.querySelector('[data-test-id="luigi-client-api-test-01"]') + const container = document.querySelector( + '[data-test-id="luigi-client-api-test-01"]' + ); const sendCustomMsgBtn = document.getElementById('sendCustomMessageBtn'); sendCustomMsgBtn.addEventListener('click', () => { - container.sendCustomMessage('custom-message-id', {dataToSend: 'cool custom Message'}); + container.sendCustomMessage('custom-message-id', { + dataToSend: 'cool custom Message' + }); }); [...document.querySelectorAll('luigi-container')].forEach(luigiContainer => { @@ -98,7 +104,7 @@

luigiContainer.addEventListener(MFEventID.CUSTOM_MESSAGE, event => { console.log('Custom Event 123', event); if (event.detail.id !== 'timer') { - alert(event.detail.id + 'custom'); + alert(event.detail.id + 'custom'); } }); From 8c2c33b1420fd4a6df4499913079ffba341559a2 Mon Sep 17 00:00:00 2001 From: Ndricim Rrapi Date: Mon, 2 Sep 2024 18:59:03 +0200 Subject: [PATCH 03/22] test --- container/src/services/webcomponents.service.ts | 1 + container/test-app/compound/compoundClientAPI.html | 11 ++++++++++- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/container/src/services/webcomponents.service.ts b/container/src/services/webcomponents.service.ts index a9d9587c3b..76dd220c75 100644 --- a/container/src/services/webcomponents.service.ts +++ b/container/src/services/webcomponents.service.ts @@ -638,6 +638,7 @@ export class WebComponentService { const listeners = ebListeners[srcNodeId + '.' + event.type] || []; listeners.push(...(ebListeners['*.' + event.type] || [])); + console.log('Test on publish') listeners.forEach(listenerInfo => { const target = listenerInfo.wcElement || compoundCnt.querySelector('[nodeId=' + listenerInfo.wcElementId + ']'); diff --git a/container/test-app/compound/compoundClientAPI.html b/container/test-app/compound/compoundClientAPI.html index 37a6a7495f..bd979e03d0 100644 --- a/container/test-app/compound/compoundClientAPI.html +++ b/container/test-app/compound/compoundClientAPI.html @@ -61,7 +61,14 @@

compoundContainer.addEventListener(MFEventID.CUSTOM_MESSAGE, e => { console.log('Publish Event', e.detail); }); + + compoundContainer.eventBus = { + onPublishEvent: (a,b,c)=>{ + console.log('On Publish eent called', a,b,c) + } + } compoundContainer.compoundConfig = { + renderer: { use: 'grid', config: { @@ -86,9 +93,10 @@

{ viewUrl: 'https://luigiwebcomponents.gitlab.io/layouts/panelHeader.js', context: { - title: 'My Awesome Grid 000', + title: 'My Awesome Grid 0001', description: 'Really awesome' }, + layoutConfig: { row: '1', column: '1 / -1' @@ -99,6 +107,7 @@

name: 'sendInput', action: 'update', dataConverter: data => { + console.log('data converter called on data', data) return 'new text: ' + data; } } From b293601bfdc87c6c10eb037268119c114586ac10 Mon Sep 17 00:00:00 2001 From: Ndricim Rrapi Date: Mon, 2 Sep 2024 18:59:32 +0200 Subject: [PATCH 04/22] test --- container/src/services/webcomponents.service.ts | 2 +- container/test-app/compound/compoundClientAPI.html | 13 ++++++------- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/container/src/services/webcomponents.service.ts b/container/src/services/webcomponents.service.ts index 76dd220c75..ad506d6bcf 100644 --- a/container/src/services/webcomponents.service.ts +++ b/container/src/services/webcomponents.service.ts @@ -638,7 +638,7 @@ export class WebComponentService { const listeners = ebListeners[srcNodeId + '.' + event.type] || []; listeners.push(...(ebListeners['*.' + event.type] || [])); - console.log('Test on publish') + console.log('Test on publish'); listeners.forEach(listenerInfo => { const target = listenerInfo.wcElement || compoundCnt.querySelector('[nodeId=' + listenerInfo.wcElementId + ']'); diff --git a/container/test-app/compound/compoundClientAPI.html b/container/test-app/compound/compoundClientAPI.html index bd979e03d0..717d0bf7c1 100644 --- a/container/test-app/compound/compoundClientAPI.html +++ b/container/test-app/compound/compoundClientAPI.html @@ -63,12 +63,11 @@

}); compoundContainer.eventBus = { - onPublishEvent: (a,b,c)=>{ - console.log('On Publish eent called', a,b,c) - } - } + onPublishEvent: (a, b, c) => { + console.log('On Publish eent called', a, b, c); + } + }; compoundContainer.compoundConfig = { - renderer: { use: 'grid', config: { @@ -96,7 +95,7 @@

title: 'My Awesome Grid 0001', description: 'Really awesome' }, - + layoutConfig: { row: '1', column: '1 / -1' @@ -107,7 +106,7 @@

name: 'sendInput', action: 'update', dataConverter: data => { - console.log('data converter called on data', data) + console.log('data converter called on data', data); return 'new text: ' + data; } } From b1b976ac04d223eec1bc3a6ce3b324ca813c5f08 Mon Sep 17 00:00:00 2001 From: Ndricim Rrapi Date: Wed, 4 Sep 2024 17:02:53 +0200 Subject: [PATCH 05/22] Add example --- container/test-app/compound/helloWorldWC.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/container/test-app/compound/helloWorldWC.js b/container/test-app/compound/helloWorldWC.js index e4214bfb75..b73c20f257 100644 --- a/container/test-app/compound/helloWorldWC.js +++ b/container/test-app/compound/helloWorldWC.js @@ -128,9 +128,13 @@ export default class extends HTMLElement { }); } }); + + this._shadowRoot.querySelector('.button2').addEventListener('click', () => { if (this.LuigiClient) { this.LuigiClient.publishEvent(new CustomEvent('btnClick')); + + this.LuigiClient.publishEvent(new CustomEvent('sendInput', { 'detail': 'Wow, my very own Event!' })); } }); From c28fea4a06efab3fc0ad8170caa67b507c92fdab Mon Sep 17 00:00:00 2001 From: Ndricim Rrapi Date: Wed, 4 Sep 2024 17:03:47 +0200 Subject: [PATCH 06/22] Add example --- container/test-app/compound/helloWorldWC.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/container/test-app/compound/helloWorldWC.js b/container/test-app/compound/helloWorldWC.js index b73c20f257..e3bc6c032f 100644 --- a/container/test-app/compound/helloWorldWC.js +++ b/container/test-app/compound/helloWorldWC.js @@ -129,12 +129,11 @@ export default class extends HTMLElement { } }); - this._shadowRoot.querySelector('.button2').addEventListener('click', () => { if (this.LuigiClient) { this.LuigiClient.publishEvent(new CustomEvent('btnClick')); - this.LuigiClient.publishEvent(new CustomEvent('sendInput', { 'detail': 'Wow, my very own Event!' })); + this.LuigiClient.publishEvent(new CustomEvent('sendInput', { detail: 'Wow, my very own Event!' })); } }); From 51d0202ad6135351fade8ba7d007f0a19c57febb Mon Sep 17 00:00:00 2001 From: Ndricim Rrapi Date: Thu, 5 Sep 2024 13:50:20 +0200 Subject: [PATCH 07/22] Add test 1 --- container/test-app/compound/helloWorldWC.js | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/container/test-app/compound/helloWorldWC.js b/container/test-app/compound/helloWorldWC.js index e3bc6c032f..fbd94b031a 100644 --- a/container/test-app/compound/helloWorldWC.js +++ b/container/test-app/compound/helloWorldWC.js @@ -14,7 +14,7 @@ export default class extends HTMLElement { templateBtn.innerHTML = ''; const templateBtn2 = document.createElement('template'); - templateBtn2.innerHTML = ''; + templateBtn2.innerHTML = ''; const addNodeParamsBtn = document.createElement('template'); addNodeParamsBtn.innerHTML = ''; @@ -129,22 +129,21 @@ export default class extends HTMLElement { } }); - this._shadowRoot.querySelector('.button2').addEventListener('click', () => { + this.$publishEventBtn = this._shadowRoot.querySelector('#publishEvent'); + this.$publishEventBtn.addEventListener('click', () => { if (this.LuigiClient) { - this.LuigiClient.publishEvent(new CustomEvent('btnClick')); - - this.LuigiClient.publishEvent(new CustomEvent('sendInput', { detail: 'Wow, my very own Event!' })); + this.LuigiClient.publishEvent(new CustomEvent('sendInput', { detail: 'My Own event data' })); } }); - this.$button2 = this._shadowRoot.querySelector('#addNodeParams'); - this.$button2.addEventListener('click', () => { + this.$addNodeParamsBtn = this._shadowRoot.querySelector('#addNodeParams'); + this.$addNodeParamsBtn.addEventListener('click', () => { if (this.LuigiClient) { this.LuigiClient.addNodeParams({ Luigi: 'rocks' }, true); } }); - this.$button3 = this._shadowRoot.querySelector('#getNodeParams'); - this.$button3.addEventListener('click', () => { + this.$getNodeParamsBtn = this._shadowRoot.querySelector('#getNodeParams'); + this.$getNodeParamsBtn.addEventListener('click', () => { if (this.LuigiClient) { let nodeParams = this.LuigiClient.getNodeParams(false); this.LuigiClient.uxManager().showAlert({ From 3378bca5604eab452478a3767da1221e2a05f57b Mon Sep 17 00:00:00 2001 From: Ndricim Rrapi Date: Thu, 5 Sep 2024 14:15:44 +0200 Subject: [PATCH 08/22] Add cypress test 2 --- .../compound/wc-compound-container.cy.js | 18 ++++++++++++++++++ .../src/services/webcomponents.service.ts | 1 - .../test-app/compound/compoundClientAPI.html | 6 +++--- container/test-app/compound/helloWorldWC.js | 2 +- 4 files changed, 22 insertions(+), 5 deletions(-) diff --git a/container/cypress/e2e/test-app/compound/wc-compound-container.cy.js b/container/cypress/e2e/test-app/compound/wc-compound-container.cy.js index 1cd7582460..5cb6a3da70 100644 --- a/container/cypress/e2e/test-app/compound/wc-compound-container.cy.js +++ b/container/cypress/e2e/test-app/compound/wc-compound-container.cy.js @@ -132,5 +132,23 @@ describe('Compound Container Tests', () => { cy.get('#defer-init-flag').should('exist'); }); + + it('LuigiClient API publishEvent', () => { + cy.on('window:alert', stub); + + // Set up a spy on console.log + cy.window().then((win) => { + cy.spy(win.console, 'log').as('consoleLogSpy'); + }); + + cy.get(containerSelector) + .shadow() + .contains('Publish event') + .click() + .then(() => { + expect(stub.getCall(0)).to.be.calledWith('sendInput'); + cy.get('@consoleLogSpy').should('be.calledWith', 'dataConverter(): Received Custom Message from "input1" MF My own event data'); + }); + }); }); }); diff --git a/container/src/services/webcomponents.service.ts b/container/src/services/webcomponents.service.ts index ad506d6bcf..a9d9587c3b 100644 --- a/container/src/services/webcomponents.service.ts +++ b/container/src/services/webcomponents.service.ts @@ -638,7 +638,6 @@ export class WebComponentService { const listeners = ebListeners[srcNodeId + '.' + event.type] || []; listeners.push(...(ebListeners['*.' + event.type] || [])); - console.log('Test on publish'); listeners.forEach(listenerInfo => { const target = listenerInfo.wcElement || compoundCnt.querySelector('[nodeId=' + listenerInfo.wcElementId + ']'); diff --git a/container/test-app/compound/compoundClientAPI.html b/container/test-app/compound/compoundClientAPI.html index 717d0bf7c1..f3cca16c6f 100644 --- a/container/test-app/compound/compoundClientAPI.html +++ b/container/test-app/compound/compoundClientAPI.html @@ -58,8 +58,9 @@

import MFEventID from '../bundle.js'; const compoundContainer = document.getElementById('dashboard'); + compoundContainer.addEventListener(MFEventID.CUSTOM_MESSAGE, e => { - console.log('Publish Event', e.detail); + // console.log('CUSTOM_MESSAGE Listener picked up: ', e.detail); }); compoundContainer.eventBus = { @@ -106,7 +107,7 @@

name: 'sendInput', action: 'update', dataConverter: data => { - console.log('data converter called on data', data); + console.log('dataConverter(): Received Custom Message from "input1" MF ' + data); return 'new text: ' + data; } } @@ -172,7 +173,6 @@

} ); compoundContainer.addEventListener(MFEventID.CUSTOM_MESSAGE, event => { - console.log('Custom Event', event); if (event.detail.id !== 'timer') { alert(event.detail.id); } diff --git a/container/test-app/compound/helloWorldWC.js b/container/test-app/compound/helloWorldWC.js index fbd94b031a..289c0c5ea2 100644 --- a/container/test-app/compound/helloWorldWC.js +++ b/container/test-app/compound/helloWorldWC.js @@ -132,7 +132,7 @@ export default class extends HTMLElement { this.$publishEventBtn = this._shadowRoot.querySelector('#publishEvent'); this.$publishEventBtn.addEventListener('click', () => { if (this.LuigiClient) { - this.LuigiClient.publishEvent(new CustomEvent('sendInput', { detail: 'My Own event data' })); + this.LuigiClient.publishEvent(new CustomEvent('sendInput', { detail: 'My own event data' })); } }); From 6d6fdd585eabfccf789a73cb614dd5f616c0cc39 Mon Sep 17 00:00:00 2001 From: Ndricim Rrapi Date: Thu, 5 Sep 2024 14:15:54 +0200 Subject: [PATCH 09/22] Add cypress test 2 --- .../e2e/test-app/compound/wc-compound-container.cy.js | 7 +++++-- container/test-app/compound/compoundClientAPI.html | 4 +++- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/container/cypress/e2e/test-app/compound/wc-compound-container.cy.js b/container/cypress/e2e/test-app/compound/wc-compound-container.cy.js index 5cb6a3da70..ee29f954f9 100644 --- a/container/cypress/e2e/test-app/compound/wc-compound-container.cy.js +++ b/container/cypress/e2e/test-app/compound/wc-compound-container.cy.js @@ -137,7 +137,7 @@ describe('Compound Container Tests', () => { cy.on('window:alert', stub); // Set up a spy on console.log - cy.window().then((win) => { + cy.window().then(win => { cy.spy(win.console, 'log').as('consoleLogSpy'); }); @@ -147,7 +147,10 @@ describe('Compound Container Tests', () => { .click() .then(() => { expect(stub.getCall(0)).to.be.calledWith('sendInput'); - cy.get('@consoleLogSpy').should('be.calledWith', 'dataConverter(): Received Custom Message from "input1" MF My own event data'); + cy.get('@consoleLogSpy').should( + 'be.calledWith', + 'dataConverter(): Received Custom Message from "input1" MF My own event data' + ); }); }); }); diff --git a/container/test-app/compound/compoundClientAPI.html b/container/test-app/compound/compoundClientAPI.html index f3cca16c6f..df8630913f 100644 --- a/container/test-app/compound/compoundClientAPI.html +++ b/container/test-app/compound/compoundClientAPI.html @@ -107,7 +107,9 @@

name: 'sendInput', action: 'update', dataConverter: data => { - console.log('dataConverter(): Received Custom Message from "input1" MF ' + data); + console.log( + 'dataConverter(): Received Custom Message from "input1" MF ' + data + ); return 'new text: ' + data; } } From bb419e6fc291c76ed931a93bb7025ebf9fc93c73 Mon Sep 17 00:00:00 2001 From: Ndricim Rrapi Date: Fri, 6 Sep 2024 13:13:46 +0200 Subject: [PATCH 10/22] Add wc test --- container/cypress/e2e/test-app/wc/wc-container.cy.js | 12 ++++++++++++ container/test-app/compound/compoundClientAPI.html | 10 ++-------- container/test-app/wc/clientAPI.html | 3 +-- container/test-app/wc/helloWorldWC.js | 2 +- 4 files changed, 16 insertions(+), 11 deletions(-) diff --git a/container/cypress/e2e/test-app/wc/wc-container.cy.js b/container/cypress/e2e/test-app/wc/wc-container.cy.js index 0ef0ebdf0d..8fed9dfba9 100644 --- a/container/cypress/e2e/test-app/wc/wc-container.cy.js +++ b/container/cypress/e2e/test-app/wc/wc-container.cy.js @@ -143,6 +143,18 @@ describe('Web Container Test', () => { .shadow() .find('#customMessageDiv') .should('have.text', 'Received Custom Message: cool custom Message'); + }); + + it('receive custom message from WC', () => { + cy.on('window:alert', stub); + + cy.get('[data-test-id="luigi-client-api-test-01"]') + .shadow() + .contains('Publish event') + .click() + .then(() => { + expect(stub.getCall(0)).to.be.calledWith('My Custom Message from Microfrontend'); + }); }); }); }); diff --git a/container/test-app/compound/compoundClientAPI.html b/container/test-app/compound/compoundClientAPI.html index df8630913f..e063676f52 100644 --- a/container/test-app/compound/compoundClientAPI.html +++ b/container/test-app/compound/compoundClientAPI.html @@ -60,14 +60,9 @@

const compoundContainer = document.getElementById('dashboard'); compoundContainer.addEventListener(MFEventID.CUSTOM_MESSAGE, e => { - // console.log('CUSTOM_MESSAGE Listener picked up: ', e.detail); + console.log('CUSTOM_MESSAGE Listener picked up: ', e.detail); }); - compoundContainer.eventBus = { - onPublishEvent: (a, b, c) => { - console.log('On Publish eent called', a, b, c); - } - }; compoundContainer.compoundConfig = { renderer: { use: 'grid', @@ -93,10 +88,9 @@

{ viewUrl: 'https://luigiwebcomponents.gitlab.io/layouts/panelHeader.js', context: { - title: 'My Awesome Grid 0001', + title: 'My Awesome Grid 001', description: 'Really awesome' }, - layoutConfig: { row: '1', column: '1 / -1' diff --git a/container/test-app/wc/clientAPI.html b/container/test-app/wc/clientAPI.html index ccee1e413d..c9cd0ae3fa 100644 --- a/container/test-app/wc/clientAPI.html +++ b/container/test-app/wc/clientAPI.html @@ -102,9 +102,8 @@

} ); luigiContainer.addEventListener(MFEventID.CUSTOM_MESSAGE, event => { - console.log('Custom Event 123', event); if (event.detail.id !== 'timer') { - alert(event.detail.id + 'custom'); + alert(event.detail.data); } }); diff --git a/container/test-app/wc/helloWorldWC.js b/container/test-app/wc/helloWorldWC.js index 2618d59a0f..79b96621ce 100644 --- a/container/test-app/wc/helloWorldWC.js +++ b/container/test-app/wc/helloWorldWC.js @@ -143,7 +143,7 @@ export default class extends HTMLElement { }); this._shadowRoot.querySelector('.button2').addEventListener('click', () => { if (this.LuigiClient) { - this.LuigiClient.publishEvent(new CustomEvent('btnClick')); + this.LuigiClient.publishEvent(new CustomEvent('sendMSG', {detail: 'My Custom Message from Microfrontend'})); } }); From 3af12bfcb20293d682b9fb2d5b39bad27fbc2e12 Mon Sep 17 00:00:00 2001 From: Ndricim Rrapi Date: Fri, 6 Sep 2024 13:14:17 +0200 Subject: [PATCH 11/22] Add wc test --- .../e2e/test-app/wc/wc-container.cy.js | 27 +++++++++---------- container/test-app/wc/helloWorldWC.js | 12 ++++----- 2 files changed, 18 insertions(+), 21 deletions(-) diff --git a/container/cypress/e2e/test-app/wc/wc-container.cy.js b/container/cypress/e2e/test-app/wc/wc-container.cy.js index 8fed9dfba9..5e1eb4c1f1 100644 --- a/container/cypress/e2e/test-app/wc/wc-container.cy.js +++ b/container/cypress/e2e/test-app/wc/wc-container.cy.js @@ -137,24 +137,23 @@ describe('Web Container Test', () => { .find('#customMessageDiv') .should('have.text', 'Received Custom Message: '); - cy.get('#sendCustomMessageBtn') - .click() + cy.get('#sendCustomMessageBtn').click(); cy.get(containerSelector) .shadow() .find('#customMessageDiv') .should('have.text', 'Received Custom Message: cool custom Message'); - }); - - it('receive custom message from WC', () => { - cy.on('window:alert', stub); - - cy.get('[data-test-id="luigi-client-api-test-01"]') - .shadow() - .contains('Publish event') - .click() - .then(() => { - expect(stub.getCall(0)).to.be.calledWith('My Custom Message from Microfrontend'); - }); + }); + + it('receive custom message from WC', () => { + cy.on('window:alert', stub); + + cy.get('[data-test-id="luigi-client-api-test-01"]') + .shadow() + .contains('Publish event') + .click() + .then(() => { + expect(stub.getCall(0)).to.be.calledWith('My Custom Message from Microfrontend'); }); + }); }); }); diff --git a/container/test-app/wc/helloWorldWC.js b/container/test-app/wc/helloWorldWC.js index 79b96621ce..ab8584e640 100644 --- a/container/test-app/wc/helloWorldWC.js +++ b/container/test-app/wc/helloWorldWC.js @@ -90,7 +90,6 @@ export default class extends HTMLElement { const customMessageDiv = document.createElement('template'); customMessageDiv.innerHTML = '
Received Custom Message:
'; - this._shadowRoot = this.attachShadow({ mode: 'open', @@ -143,7 +142,7 @@ export default class extends HTMLElement { }); this._shadowRoot.querySelector('.button2').addEventListener('click', () => { if (this.LuigiClient) { - this.LuigiClient.publishEvent(new CustomEvent('sendMSG', {detail: 'My Custom Message from Microfrontend'})); + this.LuigiClient.publishEvent(new CustomEvent('sendMSG', { detail: 'My Custom Message from Microfrontend' })); } }); @@ -313,13 +312,12 @@ export default class extends HTMLElement { } }); - this.addEventListener('custom-message-id', (event) => { - console.log('custom message received: ', event.detail) + this.addEventListener('custom-message-id', event => { + console.log('custom message received: ', event.detail); const customMessageDiv = this._shadowRoot.querySelector('#customMessageDiv'); customMessageDiv.textContent = `Received Custom Message: ${event.detail.dataToSend}`; - customMessageDiv.style = "color: red;"; - }) - + customMessageDiv.style = 'color: red;'; + }); } get context() { From b207a9ccea9d4dc8452466b41f752b1d6eb9a2fe Mon Sep 17 00:00:00 2001 From: Ndricim Rrapi Date: Fri, 6 Sep 2024 13:20:43 +0200 Subject: [PATCH 12/22] clean --- container/test-app/compound/compoundClientAPI.html | 2 +- container/test-app/wc/helloWorldWC.js | 13 +++++++------ 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/container/test-app/compound/compoundClientAPI.html b/container/test-app/compound/compoundClientAPI.html index e063676f52..dd019f233c 100644 --- a/container/test-app/compound/compoundClientAPI.html +++ b/container/test-app/compound/compoundClientAPI.html @@ -88,7 +88,7 @@

{ viewUrl: 'https://luigiwebcomponents.gitlab.io/layouts/panelHeader.js', context: { - title: 'My Awesome Grid 001', + title: 'My Awesome Grid 000', description: 'Really awesome' }, layoutConfig: { diff --git a/container/test-app/wc/helloWorldWC.js b/container/test-app/wc/helloWorldWC.js index ab8584e640..88cd9aaffd 100644 --- a/container/test-app/wc/helloWorldWC.js +++ b/container/test-app/wc/helloWorldWC.js @@ -14,7 +14,7 @@ export default class extends HTMLElement { templateBtn.innerHTML = ''; const templateBtn2 = document.createElement('template'); - templateBtn2.innerHTML = ''; + templateBtn2.innerHTML = ''; const addNodeParamsBtn = document.createElement('template'); addNodeParamsBtn.innerHTML = ''; @@ -140,20 +140,21 @@ export default class extends HTMLElement { }); } }); - this._shadowRoot.querySelector('.button2').addEventListener('click', () => { + this._shadowRoot.querySelector('#publishEvent').addEventListener('click', () => { if (this.LuigiClient) { + // send a custom event (similar to sendCustomMessage) this.LuigiClient.publishEvent(new CustomEvent('sendMSG', { detail: 'My Custom Message from Microfrontend' })); } }); - this.$button2 = this._shadowRoot.querySelector('#addNodeParams'); - this.$button2.addEventListener('click', () => { + this.$addNodeParamsBtn = this._shadowRoot.querySelector('#addNodeParams'); + this.$addNodeParamsBtn.addEventListener('click', () => { if (this.LuigiClient) { this.LuigiClient.addNodeParams({ Luigi: 'rocks' }, true); } }); - this.$button3 = this._shadowRoot.querySelector('#getNodeParams'); - this.$button3.addEventListener('click', () => { + this.$getNodeParamsBtn = this._shadowRoot.querySelector('#getNodeParams'); + this.$getNodeParamsBtn.addEventListener('click', () => { if (this.LuigiClient) { let nodeParams = this.LuigiClient.getNodeParams(false); this.LuigiClient.uxManager().showAlert({ From a02c639fa5c7f6272e4b6ca40189ee09dc305c22 Mon Sep 17 00:00:00 2001 From: Ndricim Rrapi Date: Fri, 6 Sep 2024 13:46:34 +0200 Subject: [PATCH 13/22] Add more docu --- client/luigi-element.d.ts | 61 +++++++++++++++++++++++++++++++++++++-- 1 file changed, 59 insertions(+), 2 deletions(-) diff --git a/client/luigi-element.d.ts b/client/luigi-element.d.ts index ab775dcd70..373dcac488 100644 --- a/client/luigi-element.d.ts +++ b/client/luigi-element.d.ts @@ -420,10 +420,67 @@ export interface LuigiClient { linkManager: () => LinkManager; uxManager: () => UxManager; /** - * Published an event that can be listened to on the other end - * @param event event to be published + * Publish an event that can be listened to on the core side. + * + * Similar to LuigiClient.sendCustomMessage(...) but for WebComponent based microfrontends. + * + * @param event Custom Event to be published * @returns * @memberof LuigiClient + * + * @example + * WC Container Scenario + * Sending a message from a WC based microfrontend to parent host + * + * // wcComponent.js + * this.LuigiClient.publishEvent(new CustomEvent('sendSomeMsg', { detail: 'My own message' })); + * + * // host.html + * myContainer.addEventListener('custom-message', event => { + * console.log('My custom message from microfrontend', event.detail.data); + * } + * + * Compound Container Scenario + * + * // Sending a message from child compound microfrontend (secondChild.js) to its parent (main.html) and siblings (firstChild.js) through the event bus + * + * + * // secondChild.js + * // Set the custom event name = sendInput + * this.LuigiClient.publishEvent(new CustomEvent('sendInput', { detail: 'My own message' })); + * + * // main.html + * myContainer.addEventListener('custom-message', event => { + * console.log('My custom message from microfrontend', event.detail.data); + * } + * + * // Note eventListeners.name must match CustomEvent name above + * // eventListeners.source = input1 = id of sibling.js, which is where the message being sent from + * compoundConfig = { + * ... + * children: [ + * { + * viewUrl: 'firstChild.js' + * ... + * eventListeners: [ + * { + * source: 'input1', + * name: 'sendInput', + * action: 'update', + * dataConverter: data => { + * console.log( + * 'dataConverter(): Received Custom Message from "input1" MF ' + data + * ); + * return 'new text: ' + data; + * } + * } + * ] + * }, + * { + * viewUrl: 'secondChild.js', + * id: 'input1', + * } + * */ publishEvent: (event: Event) => void; /** From d59980b747dd3e07755b98fe15ada517216dbbd8 Mon Sep 17 00:00:00 2001 From: Ndricim Rrapi Date: Fri, 6 Sep 2024 13:46:45 +0200 Subject: [PATCH 14/22] Add more docu --- client/luigi-element.d.ts | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/client/luigi-element.d.ts b/client/luigi-element.d.ts index 373dcac488..07b31cefef 100644 --- a/client/luigi-element.d.ts +++ b/client/luigi-element.d.ts @@ -420,40 +420,40 @@ export interface LuigiClient { linkManager: () => LinkManager; uxManager: () => UxManager; /** - * Publish an event that can be listened to on the core side. - * - * Similar to LuigiClient.sendCustomMessage(...) but for WebComponent based microfrontends. - * + * Publish an event that can be listened to on the core side. + * + * Similar to LuigiClient.sendCustomMessage(...) but for WebComponent based microfrontends. + * * @param event Custom Event to be published * @returns * @memberof LuigiClient - * + * * @example * WC Container Scenario * Sending a message from a WC based microfrontend to parent host - * + * * // wcComponent.js * this.LuigiClient.publishEvent(new CustomEvent('sendSomeMsg', { detail: 'My own message' })); - * + * * // host.html * myContainer.addEventListener('custom-message', event => { * console.log('My custom message from microfrontend', event.detail.data); * } - * + * * Compound Container Scenario - * + * * // Sending a message from child compound microfrontend (secondChild.js) to its parent (main.html) and siblings (firstChild.js) through the event bus * - * + * * // secondChild.js * // Set the custom event name = sendInput * this.LuigiClient.publishEvent(new CustomEvent('sendInput', { detail: 'My own message' })); - * + * * // main.html * myContainer.addEventListener('custom-message', event => { * console.log('My custom message from microfrontend', event.detail.data); * } - * + * * // Note eventListeners.name must match CustomEvent name above * // eventListeners.source = input1 = id of sibling.js, which is where the message being sent from * compoundConfig = { @@ -480,7 +480,7 @@ export interface LuigiClient { * viewUrl: 'secondChild.js', * id: 'input1', * } - * + * */ publishEvent: (event: Event) => void; /** From a9228e67bed61532771318c08f36a8071e953fbd Mon Sep 17 00:00:00 2001 From: Ndricim Rrapi Date: Tue, 17 Sep 2024 09:47:29 +0200 Subject: [PATCH 15/22] Apply changes --- client/luigi-client-wc-docu-mixin.js | 67 +++++++++++++++++++++++++++ client/luigi-element.d.ts | 65 +------------------------- docs/luigi-client-api.md | 69 ++++++++++++++++++++++++++++ scripts/package.json | 2 +- 4 files changed, 138 insertions(+), 65 deletions(-) create mode 100644 client/luigi-client-wc-docu-mixin.js diff --git a/client/luigi-client-wc-docu-mixin.js b/client/luigi-client-wc-docu-mixin.js new file mode 100644 index 0000000000..032ec7b840 --- /dev/null +++ b/client/luigi-client-wc-docu-mixin.js @@ -0,0 +1,67 @@ + /** + * + * Publish an event that can be listened to from the container host. + * + * Similar to {@link luigi-client-api.md#sendCustomMessage sendCustomMessage} but for WebComponent based microfrontends only. + * + * @param {CustomEvent} event Custom event to be published + * @memberof Lifecycle + * + * @example + * ** WC Container Scenario ** + * Sending a message from a WC based microfrontend to parent host + * + * // wcComponent.js + * this.LuigiClient.publishEvent(new CustomEvent('sendSomeMsg', { detail: 'My own message' })); + * + * // host.html + * myContainer.addEventListener('custom-message', event => { + * console.log('My custom message from microfrontend', event.detail.data); + * } + * + * + * ** Compound Container Scenario ** + * + * // Sending a message from child compound microfrontend (secondChild.js) to its parent (main.html) and siblings (firstChild.js) through the event bus + * + * + * // secondChild.js + * // Set the custom event name = sendInput + * this.LuigiClient.publishEvent(new CustomEvent('sendInput', { detail: 'My own message' })); + * + * // main.html + * myContainer.addEventListener('custom-message', event => { + * console.log('My custom message from microfrontend', event.detail.data); + * } + * + * // *Note:* eventListeners.name must match CustomEvent name above + * // eventListeners.source = input1 = id of sibling.js, which is where the message being sent from + * compoundConfig = { + * ... + * children: [ + * { + * viewUrl: 'firstChild.js' + * ... + * eventListeners: [ + * { + * source: 'input1', + * name: 'sendInput', + * action: 'update', + * dataConverter: data => { + * console.log( + * 'dataConverter(): Received Custom Message from "input1" MF ' + data + * ); + * return 'new text: ' + data; + * } + * } + * ] + * }, + * { + * viewUrl: 'secondChild.js', + * id: 'input1', + * } + * + */ + export function publishEvent (event) { + + } \ No newline at end of file diff --git a/client/luigi-element.d.ts b/client/luigi-element.d.ts index 07b31cefef..7a5e8d1151 100644 --- a/client/luigi-element.d.ts +++ b/client/luigi-element.d.ts @@ -419,70 +419,7 @@ export interface LuigiClient { getCurrentLocale: () => string; linkManager: () => LinkManager; uxManager: () => UxManager; - /** - * Publish an event that can be listened to on the core side. - * - * Similar to LuigiClient.sendCustomMessage(...) but for WebComponent based microfrontends. - * - * @param event Custom Event to be published - * @returns - * @memberof LuigiClient - * - * @example - * WC Container Scenario - * Sending a message from a WC based microfrontend to parent host - * - * // wcComponent.js - * this.LuigiClient.publishEvent(new CustomEvent('sendSomeMsg', { detail: 'My own message' })); - * - * // host.html - * myContainer.addEventListener('custom-message', event => { - * console.log('My custom message from microfrontend', event.detail.data); - * } - * - * Compound Container Scenario - * - * // Sending a message from child compound microfrontend (secondChild.js) to its parent (main.html) and siblings (firstChild.js) through the event bus - * - * - * // secondChild.js - * // Set the custom event name = sendInput - * this.LuigiClient.publishEvent(new CustomEvent('sendInput', { detail: 'My own message' })); - * - * // main.html - * myContainer.addEventListener('custom-message', event => { - * console.log('My custom message from microfrontend', event.detail.data); - * } - * - * // Note eventListeners.name must match CustomEvent name above - * // eventListeners.source = input1 = id of sibling.js, which is where the message being sent from - * compoundConfig = { - * ... - * children: [ - * { - * viewUrl: 'firstChild.js' - * ... - * eventListeners: [ - * { - * source: 'input1', - * name: 'sendInput', - * action: 'update', - * dataConverter: data => { - * console.log( - * 'dataConverter(): Received Custom Message from "input1" MF ' + data - * ); - * return 'new text: ' + data; - * } - * } - * ] - * }, - * { - * viewUrl: 'secondChild.js', - * id: 'input1', - * } - * - */ - publishEvent: (event: Event) => void; + /** * Sets node parameters in Luigi Core. The parameters will be added to the URL. * @param {Object} params diff --git a/docs/luigi-client-api.md b/docs/luigi-client-api.md index 0b337fd393..f8525cd579 100644 --- a/docs/luigi-client-api.md +++ b/docs/luigi-client-api.md @@ -33,6 +33,75 @@ This document outlines the features provided by the Luigi Client API. It covers Use the functions and parameters to define the Lifecycle of listeners, navigation nodes, and Event data. +#### publishEvent + + + +Publish an event that can be listened to from the container host. + +Similar to [sendCustomMessage](luigi-client-api.md#sendCustomMessage) but for WebComponent based microfrontends only. + +##### Parameters + +* `event` **[CustomEvent](https://developer.mozilla.org/docs/Web/API/CustomEvent/CustomEvent)** Custom event to be published + +##### Examples + +```javascript +** WC Container Scenario ** +Sending a message from a WC based microfrontend to parent host + +// wcComponent.js +this.LuigiClient.publishEvent(new CustomEvent('sendSomeMsg', { detail: 'My own message' })); + +// host.html +myContainer.addEventListener('custom-message', event => { + console.log('My custom message from microfrontend', event.detail.data); +} + + +** Compound Container Scenario ** + +// Sending a message from child compound microfrontend (secondChild.js) to its parent (main.html) and siblings (firstChild.js) through the event bus + + +// secondChild.js +// Set the custom event name = sendInput +this.LuigiClient.publishEvent(new CustomEvent('sendInput', { detail: 'My own message' })); + +// main.html +myContainer.addEventListener('custom-message', event => { + console.log('My custom message from microfrontend', event.detail.data); +} + +// *Note:* eventListeners.name must match CustomEvent name above +// eventListeners.source = input1 = id of sibling.js, which is where the message being sent from +compoundConfig = { + ... + children: [ + { + viewUrl: 'firstChild.js' + ... + eventListeners: [ + { + source: 'input1', + name: 'sendInput', + action: 'update', + dataConverter: data => { + console.log( + 'dataConverter(): Received Custom Message from "input1" MF ' + data + ); + return 'new text: ' + data; + } + } + ] + }, + { + viewUrl: 'secondChild.js', + id: 'input1', + } +``` + #### isLuigiClientInitialized Check if LuigiClient is initialized diff --git a/scripts/package.json b/scripts/package.json index 3d6405fab9..fbfc9a5ca5 100644 --- a/scripts/package.json +++ b/scripts/package.json @@ -10,7 +10,7 @@ "docu:container:generate:container-api": "documentation readme ../container/typings/LuigiContainer.svelte.d.ts --parse-extension ts -f md --readme-file=../docs/luigi-container-api.md --section=\"API Reference\" --markdown-toc=false --quiet --github false", "docu:container:generate:compound-container-api": "documentation readme ../container/typings/LuigiCompoundContainer.svelte.d.ts --parse-extension ts -f md --readme-file=../docs/luigi-compound-container-api.md --section=\"API Reference\" --markdown-toc=false --quiet --github false", "docu:client": "npm run docu:client:validate && npm run docu:client:generate:section", - "docu:client:generate:section": "documentation readme ../client/src/luigi-client.js -f md --readme-file=../docs/luigi-client-api.md --section=\"API Reference\" --markdown-toc=false --quiet --github false", + "docu:client:generate:section": "documentation readme ../client/src/luigi-client.js ../client/luigi-client-wc-docu-mixin.js -f md --readme-file=../docs/luigi-client-api.md --section=\"API Reference\" --markdown-toc=false --quiet --github false", "docu:client:validate": "documentation lint ../client/src/luigi-client.js", "docu:core": "npm run docu:core:validate && npm run docu:core:generate:sections", "docu:core:validate": "documentation lint --shallow ../core/src/core-api/config.js ../core/src/core-api/elements.js ../core/src/core-api/auth.js ../core/src/core-api/navigation.js ../core/src/core-api/i18n.js ../core/src/core-api/custom-messages.js ../core/src/core-api/ux.js ../core/src/core-api/globalsearch.js ../core/src/core-api/theming.js ../core/src/core-api/featuretoggles.js", From 152d5f414079c02df01336d938beba2b246d344d Mon Sep 17 00:00:00 2001 From: Ndricim Rrapi Date: Tue, 17 Sep 2024 09:48:10 +0200 Subject: [PATCH 16/22] Apply changes --- client/luigi-client-wc-docu-mixin.js | 132 +++++++++++++-------------- client/luigi-element.d.ts | 2 +- 2 files changed, 66 insertions(+), 68 deletions(-) diff --git a/client/luigi-client-wc-docu-mixin.js b/client/luigi-client-wc-docu-mixin.js index 032ec7b840..24a6c64b7d 100644 --- a/client/luigi-client-wc-docu-mixin.js +++ b/client/luigi-client-wc-docu-mixin.js @@ -1,67 +1,65 @@ - /** - * - * Publish an event that can be listened to from the container host. - * - * Similar to {@link luigi-client-api.md#sendCustomMessage sendCustomMessage} but for WebComponent based microfrontends only. - * - * @param {CustomEvent} event Custom event to be published - * @memberof Lifecycle - * - * @example - * ** WC Container Scenario ** - * Sending a message from a WC based microfrontend to parent host - * - * // wcComponent.js - * this.LuigiClient.publishEvent(new CustomEvent('sendSomeMsg', { detail: 'My own message' })); - * - * // host.html - * myContainer.addEventListener('custom-message', event => { - * console.log('My custom message from microfrontend', event.detail.data); - * } - * - * - * ** Compound Container Scenario ** - * - * // Sending a message from child compound microfrontend (secondChild.js) to its parent (main.html) and siblings (firstChild.js) through the event bus - * - * - * // secondChild.js - * // Set the custom event name = sendInput - * this.LuigiClient.publishEvent(new CustomEvent('sendInput', { detail: 'My own message' })); - * - * // main.html - * myContainer.addEventListener('custom-message', event => { - * console.log('My custom message from microfrontend', event.detail.data); - * } - * - * // *Note:* eventListeners.name must match CustomEvent name above - * // eventListeners.source = input1 = id of sibling.js, which is where the message being sent from - * compoundConfig = { - * ... - * children: [ - * { - * viewUrl: 'firstChild.js' - * ... - * eventListeners: [ - * { - * source: 'input1', - * name: 'sendInput', - * action: 'update', - * dataConverter: data => { - * console.log( - * 'dataConverter(): Received Custom Message from "input1" MF ' + data - * ); - * return 'new text: ' + data; - * } - * } - * ] - * }, - * { - * viewUrl: 'secondChild.js', - * id: 'input1', - * } - * - */ - export function publishEvent (event) { - - } \ No newline at end of file +/** + * + * Publish an event that can be listened to from the container host. + * + * Similar to {@link luigi-client-api.md#sendCustomMessage sendCustomMessage} but for WebComponent based microfrontends only. + * + * @param {CustomEvent} event Custom event to be published + * @memberof Lifecycle + * + * @example + * ** WC Container Scenario ** + * Sending a message from a WC based microfrontend to parent host + * + * // wcComponent.js + * this.LuigiClient.publishEvent(new CustomEvent('sendSomeMsg', { detail: 'My own message' })); + * + * // host.html + * myContainer.addEventListener('custom-message', event => { + * console.log('My custom message from microfrontend', event.detail.data); + * } + * + * + * ** Compound Container Scenario ** + * + * // Sending a message from child compound microfrontend (secondChild.js) to its parent (main.html) and siblings (firstChild.js) through the event bus + * + * + * // secondChild.js + * // Set the custom event name = sendInput + * this.LuigiClient.publishEvent(new CustomEvent('sendInput', { detail: 'My own message' })); + * + * // main.html + * myContainer.addEventListener('custom-message', event => { + * console.log('My custom message from microfrontend', event.detail.data); + * } + * + * // *Note:* eventListeners.name must match CustomEvent name above + * // eventListeners.source = input1 = id of sibling.js, which is where the message being sent from + * compoundConfig = { + * ... + * children: [ + * { + * viewUrl: 'firstChild.js' + * ... + * eventListeners: [ + * { + * source: 'input1', + * name: 'sendInput', + * action: 'update', + * dataConverter: data => { + * console.log( + * 'dataConverter(): Received Custom Message from "input1" MF ' + data + * ); + * return 'new text: ' + data; + * } + * } + * ] + * }, + * { + * viewUrl: 'secondChild.js', + * id: 'input1', + * } + * + */ +export function publishEvent(event) {} diff --git a/client/luigi-element.d.ts b/client/luigi-element.d.ts index 7a5e8d1151..f6a385510f 100644 --- a/client/luigi-element.d.ts +++ b/client/luigi-element.d.ts @@ -419,7 +419,7 @@ export interface LuigiClient { getCurrentLocale: () => string; linkManager: () => LinkManager; uxManager: () => UxManager; - + /** * Sets node parameters in Luigi Core. The parameters will be added to the URL. * @param {Object} params From 1d6f0027119ab64190823e58760035e310a26503 Mon Sep 17 00:00:00 2001 From: Ndricim Rrapi Date: Tue, 17 Sep 2024 09:50:07 +0200 Subject: [PATCH 17/22] ADd --- client/luigi-element.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/luigi-element.d.ts b/client/luigi-element.d.ts index f6a385510f..31fefc3e89 100644 --- a/client/luigi-element.d.ts +++ b/client/luigi-element.d.ts @@ -419,7 +419,7 @@ export interface LuigiClient { getCurrentLocale: () => string; linkManager: () => LinkManager; uxManager: () => UxManager; - + publishEvent: (event: Event) => void; /** * Sets node parameters in Luigi Core. The parameters will be added to the URL. * @param {Object} params From 8f1da376093bb93be8b415e03739c98b93ba7d16 Mon Sep 17 00:00:00 2001 From: Mahati Shankar Date: Thu, 26 Sep 2024 14:44:51 +0200 Subject: [PATCH 18/22] cosmetics --- docs/luigi-client-api.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/docs/luigi-client-api.md b/docs/luigi-client-api.md index f8525cd579..10a02dac94 100644 --- a/docs/luigi-client-api.md +++ b/docs/luigi-client-api.md @@ -39,7 +39,7 @@ Use the functions and parameters to define the Lifecycle of listeners, navigatio Publish an event that can be listened to from the container host. -Similar to [sendCustomMessage](luigi-client-api.md#sendCustomMessage) but for WebComponent based microfrontends only. +Similar to [sendCustomMessage](luigi-client-api.md#sendCustomMessage) but for WebComponent based microfrontends only. ##### Parameters @@ -59,11 +59,10 @@ myContainer.addEventListener('custom-message', event => { console.log('My custom message from microfrontend', event.detail.data); } - ** Compound Container Scenario ** -// Sending a message from child compound microfrontend (secondChild.js) to its parent (main.html) and siblings (firstChild.js) through the event bus - +// Sending a message from child compound microfrontend (secondChild.js) to its parent (main.html) +// and siblings (firstChild.js) through the event bus // secondChild.js // Set the custom event name = sendInput From d8383fb3c0c4b81fe31bd96712b7b7d43b0d21e9 Mon Sep 17 00:00:00 2001 From: Mahati Shankar Date: Thu, 26 Sep 2024 14:52:17 +0200 Subject: [PATCH 19/22] move changes to the doc comment --- client/luigi-client-wc-docu-mixin.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/client/luigi-client-wc-docu-mixin.js b/client/luigi-client-wc-docu-mixin.js index 24a6c64b7d..a7f4613f12 100644 --- a/client/luigi-client-wc-docu-mixin.js +++ b/client/luigi-client-wc-docu-mixin.js @@ -2,7 +2,7 @@ * * Publish an event that can be listened to from the container host. * - * Similar to {@link luigi-client-api.md#sendCustomMessage sendCustomMessage} but for WebComponent based microfrontends only. + * Similar to {@link luigi-client-api.md#sendCustomMessage sendCustomMessage} but for WebComponent based microfrontends only. * * @param {CustomEvent} event Custom event to be published * @memberof Lifecycle @@ -19,11 +19,10 @@ * console.log('My custom message from microfrontend', event.detail.data); * } * - * * ** Compound Container Scenario ** * - * // Sending a message from child compound microfrontend (secondChild.js) to its parent (main.html) and siblings (firstChild.js) through the event bus - * + * // Sending a message from child compound microfrontend (secondChild.js) to its parent (main.html) + * // and siblings (firstChild.js) through the event bus * * // secondChild.js * // Set the custom event name = sendInput From 695f6500a4f63c84c14d363d2975961c5154b946 Mon Sep 17 00:00:00 2001 From: Mahati Shankar Date: Mon, 30 Sep 2024 11:21:37 +0200 Subject: [PATCH 20/22] cosmetics --- client/luigi-client-wc-docu-mixin.js | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/client/luigi-client-wc-docu-mixin.js b/client/luigi-client-wc-docu-mixin.js index a7f4613f12..b8ddd71b0d 100644 --- a/client/luigi-client-wc-docu-mixin.js +++ b/client/luigi-client-wc-docu-mixin.js @@ -8,24 +8,22 @@ * @memberof Lifecycle * * @example - * ** WC Container Scenario ** - * Sending a message from a WC based microfrontend to parent host + * // case 1: publish an event from a WC based microfrontend * * // wcComponent.js + * // sending a message to parent host * this.LuigiClient.publishEvent(new CustomEvent('sendSomeMsg', { detail: 'My own message' })); * * // host.html * myContainer.addEventListener('custom-message', event => { - * console.log('My custom message from microfrontend', event.detail.data); + * console.log('My custom message from the microfrontend', event.detail.data); * } * - * ** Compound Container Scenario ** - * - * // Sending a message from child compound microfrontend (secondChild.js) to its parent (main.html) - * // and siblings (firstChild.js) through the event bus + * // case 2: publish an event from a compound microfrontend * * // secondChild.js - * // Set the custom event name = sendInput + * // Set the custom event name = sendInput and + * // send a message to its parent (main.html) and siblings * this.LuigiClient.publishEvent(new CustomEvent('sendInput', { detail: 'My own message' })); * * // main.html From 9efb3dd3c69a72bf90f38dd6d830d271cc291194 Mon Sep 17 00:00:00 2001 From: Ndricim Rrapi Date: Mon, 30 Sep 2024 12:13:01 +0200 Subject: [PATCH 21/22] Add changes --- client/luigi-client-wc-docu-mixin.js | 8 ++++---- docs/luigi-client-api.md | 18 ++++++++---------- 2 files changed, 12 insertions(+), 14 deletions(-) diff --git a/client/luigi-client-wc-docu-mixin.js b/client/luigi-client-wc-docu-mixin.js index b8ddd71b0d..fdb898a5df 100644 --- a/client/luigi-client-wc-docu-mixin.js +++ b/client/luigi-client-wc-docu-mixin.js @@ -22,8 +22,8 @@ * // case 2: publish an event from a compound microfrontend * * // secondChild.js - * // Set the custom event name = sendInput and - * // send a message to its parent (main.html) and siblings + * // Set the custom event name = 'sendInput' and + * // send a message to its parent (main.html) and sibling (firstChild.js) * this.LuigiClient.publishEvent(new CustomEvent('sendInput', { detail: 'My own message' })); * * // main.html @@ -31,8 +31,8 @@ * console.log('My custom message from microfrontend', event.detail.data); * } * - * // *Note:* eventListeners.name must match CustomEvent name above - * // eventListeners.source = input1 = id of sibling.js, which is where the message being sent from + * // Note: eventListeners.name must match CustomEvent name above + * // eventListeners.source = input1 = id of secondChild.js, which is where the message being sent from * compoundConfig = { * ... * children: [ diff --git a/docs/luigi-client-api.md b/docs/luigi-client-api.md index 10a02dac94..121ca1cf03 100644 --- a/docs/luigi-client-api.md +++ b/docs/luigi-client-api.md @@ -48,24 +48,22 @@ Similar to [sendCustomMessage](luigi-client-api.md#sendCustomMessage) but for We ##### Examples ```javascript -** WC Container Scenario ** -Sending a message from a WC based microfrontend to parent host +// case 1: publish an event from a WC based microfrontend // wcComponent.js +// sending a message to parent host this.LuigiClient.publishEvent(new CustomEvent('sendSomeMsg', { detail: 'My own message' })); // host.html myContainer.addEventListener('custom-message', event => { - console.log('My custom message from microfrontend', event.detail.data); + console.log('My custom message from the microfrontend', event.detail.data); } -** Compound Container Scenario ** - -// Sending a message from child compound microfrontend (secondChild.js) to its parent (main.html) -// and siblings (firstChild.js) through the event bus +// case 2: publish an event from a compound microfrontend // secondChild.js -// Set the custom event name = sendInput +// Set the custom event name = 'sendInput' and +// send a message to its parent (main.html) and sibling (firstChild.js) this.LuigiClient.publishEvent(new CustomEvent('sendInput', { detail: 'My own message' })); // main.html @@ -73,8 +71,8 @@ myContainer.addEventListener('custom-message', event => { console.log('My custom message from microfrontend', event.detail.data); } -// *Note:* eventListeners.name must match CustomEvent name above -// eventListeners.source = input1 = id of sibling.js, which is where the message being sent from +// Note: eventListeners.name must match CustomEvent name above +// eventListeners.source = input1 = id of secondChild.js, which is where the message being sent from compoundConfig = { ... children: [ From fb31b906373da1ef336b6207cd0edd8fef222d95 Mon Sep 17 00:00:00 2001 From: JohannesDoberer Date: Mon, 7 Oct 2024 11:03:13 +0200 Subject: [PATCH 22/22] suggestion --- client/luigi-client-wc-docu-mixin.js | 2 +- docs/luigi-client-api.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/client/luigi-client-wc-docu-mixin.js b/client/luigi-client-wc-docu-mixin.js index fdb898a5df..e9c52d4839 100644 --- a/client/luigi-client-wc-docu-mixin.js +++ b/client/luigi-client-wc-docu-mixin.js @@ -1,5 +1,5 @@ /** - * + * * Publish an event that can be listened to from the container host. * * Similar to {@link luigi-client-api.md#sendCustomMessage sendCustomMessage} but for WebComponent based microfrontends only. diff --git a/docs/luigi-client-api.md b/docs/luigi-client-api.md index c1f27a5b3a..a13e9351bb 100644 --- a/docs/luigi-client-api.md +++ b/docs/luigi-client-api.md @@ -35,7 +35,7 @@ Use the functions and parameters to define the Lifecycle of listeners, navigatio #### publishEvent - + Publish an event that can be listened to from the container host.