Nervous Penpal Message

    mooa
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.2 • Public • Published

    Mooa

    Build Status Coverage Status Maintainability node npm

    A single SPA Utils for Angular 2+

    based on single-spa && single-spa-angular-cli

    difference:

    • Host <-> Apps Architecture
    • Configurable App (no loader require)
    • Independent App in Different Repo and runnable

    Mooa Architecture

    Examples: see in examples/

    Online Demo:

    1. http://mooa.pho.im/ (host in AWS S3)
    2. http://mooa.phodal.com/ (host in GitHub Pages)

    Features:

    1. SPA by Configurable file, ex: apps.json
    2. Pluggable APP
    3. support Child APP navigate
    4. CLI for Generate Config

    Goal:

    1. 构建插件化的 Web 开发平台,满足业务快速变化及分布式多团队并行开发的需求
    2. 构建服务化的中间件,搭建高可用及高复用的前端微服务平台
    3. 支持前端的独立交付及部署

    Boilerplate

    App Boilerplate: https://github.com/phodal/mooa-boilerplate

    Usage

    1. Install mooa

    in Host and Child App

    yarn add mooa

    2. Config Host

    1. add get Apps logic in AppComponent (app.component.ts)
    constructor(private rendererRenderer2, httpHttpClient, private routerRouter) {
      // config Mooa
      this.mooa = new Mooa({
        mode: 'iframe',
        debug: false,
        parentElement: 'app-home',
        urlPrefix: 'app',
        switchMode: 'coexist',
        preload: true,
        includeZone: true
      });
      http.get<IAppOption[]>('/assets/apps.json')
        .subscribe(
          data => {
            this.createApps(data);
          },
          err => console.log(err)
        );
    }
     
    private createApps(dataIAppOption[]) {
      data.map((config) => {
        this.mooa.registerApplication(config.name, config, mooaRouter.hashPrefix(config.prefix));
      });
     
      this.router.events.subscribe((event) => {
        if (event instanceof NavigationEnd) {
          this.mooa.reRouter(event);
        }
      });
     
      return this.mooa.start();
    }

    3. Config App

    1. config App main.ts for load
    import mooaPlatform from 'mooa';
     
    if (environment.production) {
      enableProdMode();
    }
     
    mooaPlatform.mount('help').then((opts) => {
      platformBrowserDynamic().bootstrapModule(AppModule).then((module) => {
        opts['attachUnmount'](module);
      });
    });
     
    1. setup app routing in app.module.ts
    const appRoutes: Routes = [
      {path: '*', component: AppComponent}
      ...
    ];
     
    @NgModule({
      declarations: [
        AppComponent,
        ...
      ],
      imports: [
        BrowserModule,
        RouterModule.forRoot(
          appRoutes
        )
      ],
      providers: [
        {provide: APP_BASE_HREF, useValue: mooaPlatform.appBase()},
      ],
      bootstrap: [AppComponent]
    })
    export class AppModule {
     
    }
    1. Add for handle URL Change in app.component.ts
    constructor(private routerRouter) {
      mooaPlatform.handleRouterUpdate(this.router, 'app1');
    }

    4. Setup apps.json with Mooa CLI

    1. install global cli
    npm install -g mooa
    1. create URL list files

    Examples: apps.txt

    http://mooa.phodal.com/assets/app1
    http://mooa.phodal.com/assets/help
    
    1. Generate Config File
    mooa -g apps.txt

    Examples:

    [
      {
        "name": "app1",
        "selector": "app-app1",
        "baseScriptUrl": "/assets/app1",
        "styles": [
          "styles.bundle.css"
        ],
        "prefix": "app/app1",
        "scripts": [
          "inline.bundle.js",
          "polyfills.bundle.js",
          "main.bundle.js"
        ]
      }
    ]

    Mooa Config

    config in Host app's app.component.ts

    this.mooa = new Mooa({
      mode: 'iframe',
      debug: false,
      parentElement: 'app-home',
      urlPrefix: 'app',
      switchMode: 'coexist'
    }) 

    mode: 'iframe'

    use iframe as application container:

    <app-home _nghost-c2="">
      <iframe frameborder="" width="100%" height="100%" src="http://localhost:4200/app/help/homeassets/iframe.html" id="help_206547"></iframe>
    </app-home>

    switchMode: 'coexist'

    hidden application when inactive:

    <app-home _nghost-c2="">
      <app-app1 _nghost-c0="" ng-version="5.2.8" style="display: none;"><nav _ngcontent-c0="" class="navbar"></app-app1>
      <iframe frameborder="" width="100%" height="100%" src="http://localhost:4200/app/help/homeassets/iframe.html" id="help_206547"></iframe>
    </app-home>

    For Angular Lazyload Module

    inline.bundle.js will load script for / path.

    So, just copy *.chunk.js files to dist/, then deploy it.

    API

    registerApplicationByLink

    exmples:

    mooa.registerApplicationByLink('help', '/assets/help', mooaRouter.matchRoute('help'));

    registerApplication

    mooa.registerApplication(config.name, config, mooaRouter.matchRoute(config.prefix));

    hybrid

    if (config.sourceType) {
      that.mooa.registerApplicationByLink(config.name, config.link, mooaRouter.matchRoute(config.name));
    } else {
      that.mooa.registerApplication(config.name, config, mooaRouter.matchRoute(config.prefix));
    }

    navigateTo Custom App

    mooaPlatform.navigateTo({
      appName: 'help',
      router: 'home'
    });

    License

    Phodal's Idea

    Copyright (c) 2013-2014 Christopher Simpkins Copyright (c) 2017-2018 Robin Coma Delperier

    © 2018 A Phodal Huang's Idea. This code is distributed under the MIT license. See LICENSE in this directory.

    Install

    npm i mooa

    DownloadsWeekly Downloads

    83

    Version

    0.1.2

    License

    MIT

    Unpacked Size

    388 kB

    Total Files

    76

    Last publish

    Collaborators

    • phodal