micro-easy

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

★ 9 Open GitHub ↗

The easiest way to use Micro Frontends approach

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

![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

<script src="https://unpkg.com/@hyanmandian/micro-easy@0.1.4/dist/micro-easy.umd.production.min.js"></script>

<button>Ping</button>
<micro-easy
  src="http://example.com/"
  name="child"
  sandbox="allow-scripts allow-same-origin"
></micro-easy>
<script>
  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();
</script>

<micro-easy-wrapper>
  <button>Pong</button>
</micro-easy-wrapper>
<script>
  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();
</script>
```

## License

[MIT](LICENSE)

micro-easy

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README