https://github.com/hyanmandian/micro-easy

The easiest way to use Micro Frontends approach
https://github.com/hyanmandian/micro-easy

embed event-driven handshake iframe microfrontend microfrontends postmessage typescript

Last synced: about 6 hours ago
JSON representation

The easiest way to use Micro Frontends approach

• Host: GitHub
• URL: https://github.com/hyanmandian/micro-easy
• Owner: hyanmandian
• License: mit
• Created: 2020-01-29T21:40:12.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2020-03-18T22:25:19.000Z (over 4 years ago)
• Last Synced: 2024-11-14T21:42:20.222Z (6 days ago)
• Topics: embed, event-driven, handshake, iframe, microfrontend, microfrontends, postmessage, typescript
• Language: TypeScript
• Homepage:
• Size: 507 KB
• Stars: 9
• Watchers: 4
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
![Package size](https://badgen.net/bundlephobia/minzip/@hyanmandian/micro-easy)

# Micro Easy

The easiest way to use [Micro Frontends](https://micro-frontends.org/) approach.

## Features

- Super tiny;

- Auto resize;

- Lazy loading;

- Error handling;

- Auto handshake;

- Two way communication (child to parent and parent to child).

## Getting started

```html

Ping

  async function init() {

    try {

      const child = await MicroEasy.getChild('child');

      child.on('pong', () => {

        console.log('pong');

      });

      document.querySelector('button').addEventListener('click', () => {

        child.emit('ping');

      });

    } catch (e) {

      // handle error (invalid_origin | not_found)

    }

  }

  init();

  Pong

  async function init() {

    try {

      const parent = await MicroEasy.getParent();

      parent.on('ping', () => {

        console.log('ping');

      });

      document.querySelector('button').addEventListener('click', () => {

        parent.emit('pong');

      });

    } catch (e) {

      // handle error (not_embedded)

    }

  }

  init();

```

## License

[MIT](LICENSE)