Application API

rollcake-spa exports named classes, functions and variables rather than a single default export. This means importing must happen in one of two ways:

import { RollCakeSpa, RollCakeMFBroker, RollCakeRouter } from '@rollcakejs/rollcake-spa';

// or

import * as rollCakeSpa from '@rollcakejs/rollcake-spa';

createElement

createElement it's a method to perform the creation of the Element class which is responsible for append DOM nodes.

Simple arguments

// components/ReactPage.js

import { createElement, CUSTOM_ELEMENT_TAG} from ‘@rollcakejs/rollcake-spa’;

const ReactMf = () => createElement({

tag: CUSTOM_ELEMENT_TAG.MICROFRONTEND,

attr: {

name: ‘react-bucket’

}

});

export default ReactMf;

arguments

tag: string

Contain the HTML tag that will be created in DOM.

attr: Object

Contain in it attribute declaration what should be add as attribute with the DOM element being created, e.g.: name, class, style, id, and others.

props: Object

Contain props that will be inserted with the DOM element being created, e.g.: textContent, innerHTML, innerText, and eventListener.

children: Array of Elements

A list of elements that will be render under the current element

returns

Object

createPage

createPage it's a method to perform the creation of the Page class which is responsible for order the render and destruction of elements, and lifecycle functions.

Simple arguments

// pages/ReactPage.js

import { createPage } from ‘@rollcakejs/rollcake-spa’;

import ReactMf from ‘../components/ReactMf’;

const ReactPage = () => createPage({

onInit: function() { console.log(‘initialized!’) },

onDestroy: function() { console.log(‘destroyed!’) },

onUpdate: function() { console.log(‘updated’) },

content: function() {

return ReactMf();

}

});

export default ReactPage;

arguments

onInit: () => void

Function that will be executed when the page be initialized

onDestroy: () => void

Function that will be executed when the page be destroyed

onUpdate: () => void

Function that will be executed when the shared data base of the application be updated

content: () => Object

Elements that will be applied to the DOM after render method be executed

returns

Object

RollCakeMFBroker

RollCakeMFBroker class register parcels and prepare a fully shareable communication and data storage environment between them and the application. This one, can be consider this module with the most value-added artifact of the project.

Simple arguments

// mf-broker.config.js

import { RollCakeMFBroker } from ‘@rollcakejs/rollcake-spa’;

const buckets = [

{

name: ‘react-bucket’,

address: ‘https://locahost:3000’

}

];

export default new RollCakeMFBroker(buckets);

arguments

Buckets: Array of Bucket

List of buckets that should be register and intermidated by broker.

returns

Object

RollCakeRouter

RollCakeRouter class will be responsible for making the declaration, identification and control of routes of the application.

Simple arguments

// router.config.js

import { RollCakeRouter, NAVIGATION_MODE } from ‘@rollcakejs/rollcake-spa’;

import ReactPage from ‘./components/ReactPage’;

const routes = [

{

path: ‘/react’,

item: ReactPage

}

];

export default new RollCakeRouter({

routes,

mode: NAVIGATION_MODE.HISTORY

});

arguments

Routes: Array of Route

List of pages and location that could be render.

Mode: string

Preferred mode navigation of router.

returns

Object

RollCakeSpa

RollCakeSpa class will be responsible for the use and integration of all previous classes, along with the ability to render, destroy, and update on-screen elements.

Simple arguments

// index.js

import { RollCakeSpa } from ‘@rollcakejs/rollcake-spa’;

import Router from ‘./router.config’;

import MFBroker from ‘./mf-broker.config’;

const MFBroker = new RollCakeMFBroker([{

name: ‘react-bucket’,

address: ‘https://localhost:3000’

}]);

new RollCakeSpa(MFBroker, Router, document.getElementById(‘root’));

arguments

MFBroker: RollCakeMFBroker

Instance of the class responsible for register and reference the parcels.

Router: RollCakeRouter

Instance of the class responsible for control route preferences.

entryDOMNode: HTMLElement

Reference of a DOM node that will receive the elements to be render.

loadingContent?: () => Element

Function that will be trigger while the parcels are being fetched.

returns

Object