single-spa · joeldenning · Mar 4, 2024 · Mar 4, 2024 · Mar 4, 2024 · Mar 4, 2024
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -4,25 +4,17 @@ module.exports = {
     commonjs: true,
     es6: true,
   },
-  extends: ['eslint:recommended', 'plugin:react/recommended', 'eslint-config-prettier'],
+  extends: [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "eslint-config-prettier",
+  ],
   parserOptions: {
     ecmaFeatures: {
       jsx: true,
     },
     ecmaVersion: 2018,
-    sourceType: 'module',
-  },
-  plugins: ['react', 'eslint-plugin-prettier'],
-  rules: {
-    'prettier/prettier': [
-      'error',
-      {
-        tabWidth: 2,
-        singleQuote: true,
-        trailingComma: 'all',
-        bracketSpacing: true,
-        jsxBracketSameLine: true,
-      }
-    ],
+    sourceType: "module",
   },
+  plugins: ["react"],
 };
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1 @@
+static/img/icons
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -1,8 +1 @@
-{
-  "bracketSpacing": true,
-  "printWidth": 80,
-  "singleQuote": true,
-  "tabWidth": 2,
-  "trailingComma": "all",
-  "jsxBracketSameLine": true
-}
+{}
diff --git a/blog/2016-02-26-a-case-for-soa-in-the-browser.md b/blog/2016-02-26-a-case-for-soa-in-the-browser.md
@@ -47,10 +47,10 @@ You can load a sofe service either with static or asynchronous imports.
 
 ```js
 // Static imports
-import auth from 'auth-service!sofe';
+import auth from "auth-service!sofe";
 const user = auth.getLoggedInUser();
 // Asynchronous imports
-System.import('auth-service!sofe').then(auth => auth.getLoggedInUser());
+System.import("auth-service!sofe").then((auth) => auth.getLoggedInUser());
 ```
 
 The real power behind sofe is that services are resolved at run-time, making them unversioned. If <strong>auth-service</strong> is redeployed, it is immediately made available to all upstream dependencies. The above scenario becomes much easier to resolve because there is only one version of each shared library as services. This is powerful because it allows you to deploy once, update everywhere. Also because the code is loaded at run-time, we can also enable developer tools to override what service is loaded into your application. Or in other words, you can test code on production without actually deploying to production.

diff --git a/blog/2016-12-16-a-step-by-step-guide-to-single-spa.md b/blog/2016-12-16-a-step-by-step-guide-to-single-spa.md
@@ -36,7 +36,7 @@ So for now, just have a `<script>` to a single JavaScript file (root-application
 Since Webpack is probably the more common use case, my code examples from here on will assume that you’re using Webpack 2. The equivalent Webpack 1 or JSPM code has all the same concepts and only some minor code differences.
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <meta charset="utf-8" />
@@ -61,22 +61,22 @@ Another way to look at it is that single-spa is a master router on top of your o
 To do this, first `npm install single-spa` and then call the [registerApplication](https://github.com/single-spa/single-spa/blob/master/docs/root-application.md#declaring-child-applications) function:
 
 ```js
-import {registerApplication, start} from 'single-spa';
+import { registerApplication, start } from "single-spa";
 
 // Register your first application with single-spa. More apps will be registered as you create them
-registerApplication('cool-app', loadCoolApp, isCoolAppActive);
+registerApplication("cool-app", loadCoolApp, isCoolAppActive);
 
 // Tell single-spa that you're ready for it to mount your application to the DOM
 start();
 
 // This is a "loading function"
 function loadCoolApp() {
-  return import('./cool-app/cool.app.js');
+  return import("./cool-app/cool.app.js");
 }
 
 // This is an "activity function"
 function isCoolAppActive() {
-  return window.location.hash.startsWith('#/cool');
+  return window.location.hash.startsWith("#/cool");
 }
 ```
 
@@ -116,9 +116,9 @@ Here is a simple example:
 let user;
 
 export function bootstrap() {
-  return fetch('/api/users/0')
-    .then(response => response.json())
-    .then(json => (user = json));
+  return fetch("/api/users/0")
+    .then((response) => response.json())
+    .then((json) => (user = json));
 }
 
 export function mount() {
@@ -128,7 +128,7 @@ export function mount() {
    * can implement a "mount" and "unmount" to become a single-spa application.
    */
   return Promise.resolve().then(() => {
-    document.getElementById('user-app').innerHTML = `
+    document.getElementById("user-app").innerHTML = `
         <div>
           Hello ${user.name}!
         <div>
@@ -141,7 +141,7 @@ export function unmount() {
    * or vue.$destroy()
    */
   return Promise.resolve().then(() => {
-    document.getElementById('user-app').innerHTML = '';
+    document.getElementById("user-app").innerHTML = "";
   });
 }
 ```
@@ -159,17 +159,17 @@ Each child application can be written in any framework, so long as it implements
 So going back to our previous example, we could choose to write our “cool.app.js” as an Angular 1 app, and choose something else for future apps:
 
 ```js
-import singleSpaAngularJS from 'single-spa-angularjs';
-import angular from 'angular';
-import './app.module.js';
-import './routes.js';
+import singleSpaAngularJS from "single-spa-angularjs";
+import angular from "angular";
+import "./app.module.js";
+import "./routes.js";
 
-const domElementGetter = () => document.getElementById('cool-app');
+const domElementGetter = () => document.getElementById("cool-app");
 
 const angularLifecycles = singleSpaAngularJS({
   angular,
   domElementGetter,
-  mainAngularModule: 'single-spa-app',
+  mainAngularModule: "single-spa-app",
   uiRouter: true,
   preserveGlobal: true,
 });
@@ -185,12 +185,12 @@ export const mount = [angularLifecycles.mount];
 export const unmount = [angularLifecycles.unmount];
 
 function aboutToBootstrap() {
-  console.log('about to bootstrapping');
+  console.log("about to bootstrapping");
   return Promise.resolve();
 }
 
 function doneBootstrap() {
-  console.log('finished bootstrapping');
+  console.log("finished bootstrapping");
   return Promise.resolve();
 }
 ```

diff --git a/blog/2023-10-11-introducing-single-spa-new-core-team-members.md b/blog/2023-10-11-introducing-single-spa-new-core-team-members.md
@@ -20,4 +20,4 @@ These three new members will be joining current members Joel Denning, Carlos Fil
 
 As part of this team update, we’ll also be creating a public roadmap, providing transparency about Single-Spa's future direction. To maintain transparency and encourage collaboration, we're establishing monthly meetings where the core team will discuss progress, challenges, and ideas. Meeting notes will be publicly available, ensuring that the community is well-informed and able to participate in our discussions.
 
-So stay tuned and join us on this journey shaping the future of microfrontends.
+So stay tuned and join us on this journey shaping the future of microfrontends.
diff --git a/blog/2023-11-07-core-team-meeting-notes.md b/blog/2023-11-07-core-team-meeting-notes.md
@@ -18,6 +18,7 @@ Attendees: Joel Denning, Milan Kovacic, Jake Hayes
 - Maintenance update/plan
 
 ## Roadmap Brainstorm
+
 - Adding unit tests to existing projects
 - SystemJS -> ESM migration
 - create-single-spa update (https://github.com/cruft/cruft)
@@ -29,4 +30,4 @@ Attendees: Joel Denning, Milan Kovacic, Jake Hayes
 - Consolidate example projects
 - Feature voting
 - Automated integration tests for popular frameworks
-- Update create-single-spa dependencies
+- Update create-single-spa dependencies
diff --git a/blog/2023-11-27-single-spa-6.md b/blog/2023-11-27-single-spa-6.md
@@ -102,11 +102,11 @@ If externalizing single-spa in your webpack config (very common, and the default
 // webpack.config.js
 module.exports = {
   resolve: {
-    "alias": {
-      "single-spa": require.resolve("single-spa/lib/es5/esm/single-spa.min.js")
-    }
-  }
-}
+    alias: {
+      "single-spa": require.resolve("single-spa/lib/es5/esm/single-spa.min.js"),
+    },
+  },
+};
 ```
 
 #### Rollup
@@ -187,22 +187,22 @@ lib
 
 ## Async navigation cancelation
 
-We've added support for async navigation cancelation. To use it, call `cancelNavigation(promise)` with a promise as an argument. Single-spa will wait until that promise resolves/rejects before proceeding with navigation. If the promise resolves with a truthy value, navigation is canceled. If the promise resolves with a falsy value or rejects, navigation is not canceled.  [Github link](https://github.com/single-spa/single-spa/pull/826)
+We've added support for async navigation cancelation. To use it, call `cancelNavigation(promise)` with a promise as an argument. Single-spa will wait until that promise resolves/rejects before proceeding with navigation. If the promise resolves with a truthy value, navigation is canceled. If the promise resolves with a falsy value or rejects, navigation is not canceled. [Github link](https://github.com/single-spa/single-spa/pull/826)
 
 ```js
-window.addEventListener("single-spa:before-routing-event", evt => {
+window.addEventListener("single-spa:before-routing-event", (evt) => {
   if (evt.detail.oldUrl === "/settings") {
-    evt.detail.cancelNavigation(checkSettingsOkay())
+    evt.detail.cancelNavigation(checkSettingsOkay());
   }
-})
+});
 
 async function checkSettingsOkay() {
-  const response = await fetch('/api/settings-okay')
+  const response = await fetch("/api/settings-okay");
   if (response.ok) {
     return true;
   } else {
     alert("Please fix your settings before leaving the page");
-    return false
+    return false;
   }
 }
 ```
@@ -212,15 +212,15 @@ async function checkSettingsOkay() {
 We've exposed a new `patchHistoryApi()` api. This lets you use single-spa's modified implementations of pushState/replaceState/popstate/hashchange without using single-spa applications. This is intended to be used by single-spa users who exclusively use single-spa parcels, rather than applications [Github link](https://github.com/single-spa/single-spa/pull/827)
 
 ```js
-import { patchHistoryApi, mountRootParcel } from 'single-spa';
+import { patchHistoryApi, mountRootParcel } from "single-spa";
 
 patchHistoryApi({
-  urlRerouteOnly: true
-})
+  urlRerouteOnly: true,
+});
 
 // now you don't need to call start() if you're only using parcels
 
-mountRootParcel(parcelConfig, parcelProps)
+mountRootParcel(parcelConfig, parcelProps);
 ```
 
 ### New profiler

diff --git a/blog/2024-01-03-core-team-meeting-notes.md b/blog/2024-01-03-core-team-meeting-notes.md
@@ -34,4 +34,3 @@ Attendees: Joel Denning Jake Hayes, Milan Kovacic
 - Feature voting
 - Automated integration tests for popular frameworks
 - Update create-single-spa dependencies 🚧
-
Original file line number	Diff line number	Diff line change
Expand Up		@@ -20,4 +20,4 @@ These three new members will be joining current members Joel Denning, Carlos Fil

		As part of this team update, we’ll also be creating a public roadmap, providing transparency about Single-Spa's future direction. To maintain transparency and encourage collaboration, we're establishing monthly meetings where the core team will discuss progress, challenges, and ideas. Meeting notes will be publicly available, ensuring that the community is well-informed and able to participate in our discussions.

		So stay tuned and join us on this journey shaping the future of microfrontends.
		So stay tuned and join us on this journey shaping the future of microfrontends.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -34,4 +34,3 @@ Attendees: Joel Denning Jake Hayes, Milan Kovacic
		- Feature voting
		- Automated integration tests for popular frameworks
		- Update create-single-spa dependencies 🚧