Micro frontend presentation

event-receiver.ts

init(): void {
  this.handleOnReceiveMessage = this.onReceiveMessage.bind(this)
  window.addEventListener('message', this.handleOnReceiveMessage)
}

onReceiveMessage(message: MessageEvent) {
  const action = message.data

  switch(action) {
    case 'a':
      doThis();
      break;
    case 'b':
      doThat();
      break;
    default:
      throw new Error('Unrecognized action')
  }
}

iframes.html

// /about page
<div id="container">
  <iframe src="https://about.project.com"></iframe>
</div>

// /products page
<div id="container">
  <iframe src="https://products.project.com"></iframe>
</div>

package.json

{
  "name": "@my-project/main",
  "version": "1.0.0",
  "description": "My amazing application",
  "dependencies": {
    "@my-project/frontend-1": "1.0.0",
    "@my-project/frontend-2": "1.0.0",
    "@my-project/frontend-3": "1.0.0",
  }
}

postMessage.ts

/**
* Send message to parent iframe or to specified window
* @param payload
* @param element
*/
public sendMessage(payload: IMessagePayload): Promise<any> {
  const message = this.formatPayload(payload)
  const deferred = createDeferred()

  this.createPromiseCache(message.trackingProperties.id, deferred)
  this.targetWindow.postMessage(message, '*')

  return deferred.promise
}

webcomponents-v2.html

<script src="https://about.project.com/bundle.js"></script>
<script src="https://products.project.com/bundle.js"></script>

// /about page
<div id="container">
  <about-micro-frontend></about-micro-frontend>
</div>

// /products page
<div id="container">
  <products-micro-frontend></products-micro-frontend>
</div>

webcomponents.html

// /about page
<div id="container">
  <about-micro-frontend></about-micro-frontend>
</div>

// /products page
<div id="container">
  <products-micro-frontend></products-micro-frontend>
</div>

webcomponents.json

{
  "name": "@my-project/web-components",
  "version": "1.0.0",
  "description": "My amazing application",
  "dependencies": {
    "@my-project/about-micro-frontend": "1.0.0",
    "@my-project/products-micro-frontend": "1.0.0"
  }
}