Make micro-components and micro-frontends never that easy again.
A lightweight micro-frontend / micro-component solution inspired by Portals proposal
- ⚡ 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
$ npm install @magic-microservices/portal
# or
$ yarn add @magic-microservices/portalimport portal, { PortalHtmlEntryPlugin } from '@magic-microservices/portal'
await portal({
plugins: [new PortalHtmlEntryPlugin()], // fetch and parse html
})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' />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' />Magic-portal is inspired by Portals proposal, thanks!
MIT