The router for easy microfrontends
import { registerApplication, checkActivityFunctions } from 'single-spa'
registerApplication({
name: "app1",
app: () => System.import('app1'),
activeWhen: '/app1'
})
// Both 5.5.1 and 5.5.2
checkActivityFunctions(new URL('http://localhost:8080/app1')) // ['app1']
checkActivityFunctions(new URL('http://localhost:8080/app1/sub')) // ['app1']
// With 5.5.1, single-spa did not require the location to have a slash after the prefix
checkActivityFunctions(new URL('http://localhost:8080/app1WithExtra')) // ['app1']
// Changed with 5.5.2 - single-spa now requires the location to have a slash after the prefix
checkActivityFunctions(new URL('http://localhost:8080/app1WithExtra')) // []
includes
to indexOf
for IE11 support. (#558)single-spa:before-app-change
and single-spa:before-no-app-change
events. (#545 #547)single-spa:before-routing-event
and single-spa:before-mount-routing-event
now shows the new statuses for apps, meaning the status that the app will be in after the routing event finishes. Previously the current, older status was being reported as the new status. (#547)reroute
(https://github.com/single-spa/single-spa/pull/529 via @arturovt)single-spa:before-mount-routing-event
fired to the window - Documentation (https://github.com/single-spa/single-spa/pull/534 via @joeldenning)pathToActiveWhen
is exposed as a single-spa export - Documentation (https://github.com/single-spa/single-spa/pull/535 via @joeldenning)if
statement. Fixes IE10 issues (https://github.com/single-spa/single-spa/pull/537 via @bloody-ux)lib/esm/single-spa.min.js
now works in IE11. For those who don't need IE11 support, you can use the new lib/es2015/single-spa.min.js
build. See related https://unpkg.com/browse/[email protected]/lib/ (#517 via @frehner)single-spa:app-change
event (https://github.com/single-spa/single-spa/issues/508 via @joeldenning) (see below)window.addEventListener('single-spa:app-change', evt => {
console.log(evt.newAppStatuses) // { app1: MOUNTED, app2: NOT_MOUNTED }
console.log(evt.appsByNewStatus) // { MOUNTED: ['app1'], NOT_MOUNTED: ['app2'] }
console.log(evt.totalAppChanges) // 2
})