mixspa-core

mixspa-core is a base library for micro-frontend.

Current Status:

What's the purpose for this library

The aim of this library what to be.

The following targets:

• A component or module can be an app to be load dynamically.
• A component or module can choice a different framework or library by itself.
• A component or module together with the backend service should have the whole and independent business.

What the api for this library?

1. Define an app

According the following to define a app. The id & render must be provided.

import Mixspa from '@mixspa/core';

Mixspa.define({
  tag: 'app-demo', /* This name will be used for tag name */
  init: function(element) {
    /* will be call when custom element has been created */
  },
  render: function(element) {
    let attrName = element.getAttribute('data-name'); //
    /* will be call after custom element has been rendered */
  },
  unmount: function(element) {
    /* will be call when custom element has been removed */
  },
  update: function(element) {
    /* will be call when attribute has been changed */
  }
});

The Mixspa will create a custom element for one app. About more details & the apis for element, please reference here: CustomElement

2. Register one app

import Mixspa from '@mixspa/core'

Mixspa.register({
  id: 'app-id',
  tag: 'app-demo',
  assets: ['https://www.app-demo.com/app.js', 'https://www.app-demo.com/app.css']
});

3. Get one app and load

import Mixspa from '@mixspa/core'

Mixspa.getApp('app-id').load([Element]).then(app => {
  let el = document.createElement(app.tag);
  el.attributeOne = 'attribute one';
  document.getElementById('app-container').appendChild(el);
});

4. Event in Mixspa

import Mixspa from '@mixspa/core'
/*
let listener = Mixspa.on('[module]:[action]', callback);  // bind event
*/
let listener = Mixspa.on('test:update', (message) => {
  console.log(message);
});

/*
Mixspa.off('[module]:[action]', listener);  // unbind event
*/
Mixspa.off('test:update', listener);

/*
Mixspa.emit('[module]:[action]', message);  // emit event
*/
Mixspa.emit('test:update', 'Hello Test');

5. Link in Mixspa

import Mixspa from '@mixspa/core'
/*
let listener = Mixspa.onLink(handler);  // bind link change event
*/
let listener = Mixspa.onLink((url) => {
  console.log(url);
});

/*
Mixspa.offLink(listener);  // unbind link change event
*/
Mixspa.offLink(listener);

/*
Mixspa.emitLink(url);  // emit link change event
*/
Mixspa.emitLink('http://test.url');

License

mixspa-app is released under the MIT license.