npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

mooa

v0.1.2

Published

[![Build Status](https://travis-ci.org/phodal/mooa.svg?branch=master)](https://travis-ci.org/phodal/mooa) [![Coverage Status](https://coveralls.io/repos/github/phodal/mooa/badge.svg?branch=master)](https://coveralls.io/github/phodal/mooa?branch=master) [!

Downloads

73

Readme

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 renderer: Renderer2, http: HttpClient, private router: Router) {
  // 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(data: IAppOption[]) {
  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 router: Router) {
  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.