Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bytedance/magic-portal
⚡ A blazing fast micro-component and micro-frontend solution uses web-components under the hood.
https://github.com/bytedance/magic-portal
component micro-component micro-frontend microservices
Last synced: 12 days ago
JSON representation
⚡ A blazing fast micro-component and micro-frontend solution uses web-components under the hood.
- Host: GitHub
- URL: https://github.com/bytedance/magic-portal
- Owner: bytedance
- License: mit
- Created: 2021-06-11T07:10:01.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-07-29T14:19:34.000Z (over 3 years ago)
- Last Synced: 2024-08-02T05:23:48.023Z (3 months ago)
- Topics: component, micro-component, micro-frontend, microservices
- Language: TypeScript
- Homepage:
- Size: 282 KB
- Stars: 91
- Watchers: 9
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-blazingly-fast - magic-portal - ⚡ A blazing fast micro-component and micro-frontend solution uses web-components under the hood. (TypeScript)
README
Magic Portal
Make micro-components and micro-frontends never that easy again.
[](https://github.com/bytedance/magic-microservices/blob/main/LICENSE)
## Overview
A lightweight micro-frontend / micro-component solution inspired by [Portals](https://github.com/WICG/portals) proposal
## Feature
- ⚡ Blazing fast, based on [magic](https://github.com/bytedance/magic-microservices)
- 🚀 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
```bash
$ npm install @magic-microservices/portal
# or
$ yarn add @magic-microservices/portal
```
### Register portal component
```typescript
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.
```html
```
## 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.
```typescript
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:
```html
```
## Inspired by
Magic-portal is inspired by [Portals](https://github.com/WICG/portals) proposal, thanks!
## License
MIT