@microzord/webpack-plugin NPM

microzord

Attention: WIP

It is a pre-alpha version of the library. Please, do not use it until official release.

What is it?

It is a small tool that allows you to add and render multiple apps on one page. It has simple ideomatic APIs for all modern frameworks and builds bridges between them.

🧙 Framework agnostic. You can have an Angular application with a React app header and a Vue app footer. Each app can have endless amount of nested apps inside. There are also wrappers for every modern framework with simple API.

🧩 Modular. You can insert another app in your app in any place as an ordinary component. Use the same methods to bind data and to handle its events.

🐝 Tiny as a bee and works as well. No new code in the bundle of child application and a bit more than 1 KB library for host application to get all the benefits!

Installation and usage

An extensive demo is coming soon...

An example of usage external apps in Angular app

app.module.ts

@NgModule({
  imports: [
    MicrozordHostModule.register({
      apps: [
        {
          name: 'react-menu',
          assetMap: '/react-menu/microzord.json',
        },
        {
          name: 'vue-footer-app',
          assetMap: '/vue-footer-app/microzord.json',
        },
      ],
    }),
  ],
})
export class AppModule {}

Usage in application:

<header microzord="react-menu"></header>

<div>Any content</div>

<footer microzord="vue-footer-app" (hook)="onFooterLifecycleEvent($event)"></footer>

Core team

License

🆓 Feel free to use our library in your commercial and private applications

All microzord packages are covered by Apache 2.0