single-spa-canopy

Some helpers for single-spa child apps at canopy

Usage

import singleSpaCanopy from 'single-spa-canopy';
import React from 'react'; // if you're using react.

const canopyLifecycles = singleSpaCanopy({
  mainContentTransition: true,
  domElementGetter: () => document.getElementById('main-content'),
  React,
  featureToggles: ['toggle1', 'toggle2'],
  setPublicPath(path) {
    // Useful for hot reloading and other things. Works with sofe overridden services.
    __webpack_public_path__ = path
  },
  hotload: {
    module: module, // The module object in webpack bundles for your root javascript file
    __webpack_require__: __webpack_require__, // The __webpack_require__ variable defined globally in webpack bundles.
    dev: {
      enabled: true,
      waitForUnmount: false,
    },
    deploy: {
      enabled: false,
      waitForUnmount: false,
    },
  },
  overlay: {
    selectors: ['.cssQuerySelector', '#anotherSelector'],
    color: '#00A0B0',
    zIndex: 40
  }
});

export const bootstrap = [
  canopyLifecycles.bootstrap,
];

export const mount = [
  canopyLifecycles.mount,
];

export const unmount = [
  canopyLifecycles.unmount,
];

export const unload = [
  canopyLifecycles.unload,
];

Options

• mainContentTransition: (optional) A boolean value that defaults to true. If set to true, the three dots animation will show up when transitioning between apps
• domElementGetter: (optional) A function that returns the dom element in which the child app will be mounted. This is required if mainContentTransition is true.
• React: (optional) The react object, which will be used to determine if the child application is using the same version of React that is used by spalpatine.
• featureToggles: (optional) An array of strings, which are the names of feature toggles to fetch before this app is mounted.
• setPublicPath: (optional) A function to set the webpack public path, which is necessary for loading image assets or for hot reloading. Works with sofe overrides.
• hotload: (optional) An object that configures whether you would like to hot reload this single-spa application.
• overlay: (optional) An Object that configures overlays. This feature is still somewhat experimental and makes a lot of guesses on overlay settings, most of the time you won't need this setting. There are a lot of optional overrides that you can use. Some are shown above.
• position: (optional) A string that is applied to the CSS style (position) on the child app. Defaults to relative to enable the overlays to work.