joeldenning

// The things imported with ES6 are things we want to execute right up front.
// The things required below are things we want to execute only when someone needs them.
// Switching between the two impacts performance. In general, it's better to be lazy with
// executing code, but there are some things we need to do right up front.
import SystemJS from 'systemjs'

if (window.sofeManifest) {
  SystemJS.config(sofeManifest)
  delete window.sofeManifest
}

joeldenning

import * as isActive from './child-app-active.functions.js';
import * as singleSpa from 'single-spa'

// Main-content apps
singleSpa.registerApplication('workflow-ui', () => SystemJS.import('workflow-ui!sofe'), isActive.workflowUI);
singleSpa.registerApplication('end-user-forms-ui', () => SystemJS.import('end-user-forms-ui!sofe'), isActive.endUserFormsUI);
singleSpa.registerApplication('sme-qa-ui', () => SystemJS.import('sme-qa-ui!sofe'), isActive.smeQAUI);
singleSpa.registerApplication('letters-ui', () => SystemJS.import('letters-ui!sofe'), isActive.lettersUI);
singleSpa.registerApplication('docs-ui', () => SystemJS.import('docs-ui!sofe'), isActive.docsUI);

joeldenning

/* Util functions
*/

/* Use this function to check that the hash begins with a certain prefix
 */
export function hashPrefix(location, ...prefixes) {
  return prefixes.some(prefix => location.hash.indexOf(`#/${prefix}`) === 0);
}

/* App-specific implementations that determine if they are active or not.

joeldenning

Creating a new single-spa subapp

1. Create new repo in gitlab

2. Clone it locally

3. Create .babelrc in project root:

{
    "presets": [
        "@babel/preset-env",

joeldenning

{"lastUpload":"2020-07-06T15:36:05.434Z","extensionVersion":"v3.4.3"}

joeldenning

// You can run this in browser console
const React = await import('https://cdn.jsdelivr.net/npm/@esm-bundle/react/esm/react.production.min.js');
const ReactDOM = await import('https://cdn.jsdelivr.net/npm/@esm-bundle/react-dom/esm/react-dom.resolved.production.min.js');
const rxjs = await import('https://cdn.jsdelivr.net/npm/@esm-bundle/rxjs/esm/rxjs.min.js');
const rxjsOperators = await import('https://cdn.jsdelivr.net/npm/@esm-bundle/rxjs/esm/rxjs-operators.min.js');

joeldenning

import React from 'react'
import styles from './TemplatesTable.css'
// Table, TableHeader, and TableBody handle CSS, not logic
import Table from '../utils/Table.component'
import TableHeader from '../utils/TableHeader.component'
import TableBody from '../utils/TableBody.component'
import { getTemplates } from './Templates.resource.js'
​
export default function TemplatesTable(props) {
  const [state, dispatch] = React.useReducer(reducer, initialState);

joeldenning

This Gist works for CRA 3. For CRA 4, you can try community maintained craco plugin for converting to a single-spa application at https://github.com/hasanayan/craco-plugin-single-spa-application (thanks @hasanayan):

1. Install react-app-rewired, as explained in https://github.com/timarney/react-app-rewired.
2. Create a file in src called single-spa-entry.js (or tsx for typescript)
3. Modify config-overrides.js, as shown in the config-overrides.js file provided in this gist.
4. (Optional) remove src/main.js, since single-spa-entry is the new entry
5. (Optional) remove public/index.html, since single-spa applications share a single html file, instead of one html file per project.

joeldenning

var test;test =
/******/ (() => { // webpackBootstrap
/******/ 	"use strict";
/******/ 	var __webpack_modules__ = ({

/***/ "./src/test-spa.js":
/*!*************************!*\
  !*** ./src/test-spa.js ***!
  \*************************/
/*! namespace exports */

joeldenning

import * as __WEBPACK_EXTERNAL_MODULE__0__ from '../../test/fixtures/externals/foo-external.js';
import * as __WEBPACK_EXTERNAL_MODULE__1__ from '../../test/fixtures/externals/bar-external.js';

var LIB =
/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {