Magic Portal
Make micro-components and micro-frontends never that easy again.
Overview
A lightweight micro-frontend / micro-component solution inspired by Portals proposal
Feature
⚡ Blazing fast, based on magic🚀 Portability: write your code and use it with any frameworks.🔨 Adaptable: an adapter for any JS module, friendly to existing code.💪 Web Components driven design
Quick Start
Installation
$ npm install @magic-microservices/portal
# or
$ yarn add @magic-microservices/portalRegister portal component
import portal, { PortalHtmlEntryPlugin } from '@magic-microservices/portal'
await portal({
plugins: [new PortalHtmlEntryPlugin()], // fetch and parse html
})Use built-in portal component 🎉
Registration should be placed before instantiation. Portal html entry plugin uses fetch under the hood, make sure the corresponding website's CORS has configured.
<magic-portal src='//some-where-you-want-to-go' />Advanced usage
Manifest and extremely fast rendering experience
You may found the example above used PortalHtmlEntryPlugin to achieve HTML fetching and parsing at runtime, however in the best practice, this step should be avoided and moved to AOT(Ahead of Time) compilation.
Manifest is a file that describes how HTML looks like (ie.scripts and styles),
and we could use PortalManifestWebpackPlugin to generate that in compilation stage.
import PortalManifestWebpackPlugin from '@magic-microservices/portal-manifest-webpack-plugin'
// webpack.config.js
plugins: [
...,
new PortalManifestWebpackPlugin()
]PortalManifestWebpackPlugin takes advantage of html-webpack-plugin under the hood. To use this plugin, make sure Webpack is using that.
After that, each Webpack build would generate a manifest.json which corresponding to your HTML and you could use this file directly in magic-portal just like this:
<magic-portal manifest='//some-where/manifest.json' />Inspired by
Magic-portal is inspired by Portals proposal, thanks!
License
MIT