Package Exports
- @hyanmandian/micro-easy
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@hyanmandian/micro-easy) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
Micro Easy
The easiest way to use Micro Frontends approach.
Features
- Handshake;
- Super tiny;
- Auto resize;
- Lazy loading;
- Error handling;
- Two way communication (child to parent and parent to child).
Getting started
<!-- load our library in parent and child app -->
<script src="https://unpkg.com/@hyanmandian/micro-easy@0.1.4/dist/micro-easy.umd.production.min.js"></script>
<!-- load your child app on parent app and interact with it -->
<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>
<!-- wrap your child app and interact with parent app -->
<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>