Upgrade docusaurus to version 3 (#625)

* chore: upgrade prettier to latest version * chore: remove unnecessary prettier configuration from eslint configuration * chore: upgrade eslint * chore: reformat whole project using prettier * fix: mdx 3 complation errors * chore: upgrade docusaurus packages, and install missing dependencies * fix: breaking changes after upgrade to docusaurus 3 * chore: set pipeline node version to 20 * fix: broken route
single-spa · Mar 6, 2024 · 2cc03bc · 2cc03bc
1 parent ebef57c
commit 2cc03bc
Show file tree

Hide file tree

Showing 12 changed files with 8,184 additions and 16,431 deletions.
diff --git a/.github/workflows/build_deploy.yml b/.github/workflows/build_deploy.yml
@@ -6,7 +6,7 @@ on:
       - master
   pull_request:
     branches:
-      - '*'
+      - "*"
 
 jobs:
   build_and_deploy:
@@ -16,8 +16,8 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
-          cache: 'npm'
+          node-version: 20
+          cache: "npm"
       - name: Build website
         run: |
           npm ci

diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -143,7 +143,6 @@ module.exports = {
         { to: "https://baseplate.cloud", label: "Deploy", position: "right" },
       ],
     },
-    prismTheme: require("prism-react-renderer/themes/vsDark"),
   },
   plugins: [],
   presets: [

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
     "format:check": "prettier --check '**/*.{ts,js,tsx,jsx,scss,css,html,md}'"
   },
   "engines": {
-    "node": ">=16.14"
+    "node": ">=20"
   },
   "devDependencies": {
     "eslint": "^8.57.0",
@@ -20,12 +20,14 @@
     "prettier": "^3.2.5"
   },
   "dependencies": {
-    "@docusaurus/core": "^2.4.0",
-    "@docusaurus/preset-classic": "^2.4.0",
-    "classnames": "^2.2.6",
-    "markdown-to-jsx": "^6.11.4",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "@docusaurus/core": "^3.1.1",
+    "@docusaurus/preset-classic": "^3.1.1",
+    "@mdx-js/react": "^3.0.1",
+    "classnames": "^2.5.1",
+    "markdown-to-jsx": "^7.4.1",
+    "prism-react-renderer": "^2.3.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "browserslist": {
     "production": [

diff --git a/versioned_docs/version-4.x/migrating-existing-spas.md b/versioned_docs/version-4.x/migrating-existing-spas.md
@@ -34,7 +34,6 @@ and memory.
 
 Since existing SPAs are used to having an index.html file for their css, fonts,
 third party script-tags, etc., it's likely that you'll have to do some work
-to make sure all of those keep on working when your SPA becomes an html-less [
-application](building-applications.md). It is best to try to put all that
+to make sure all of those keep on working when your SPA becomes an html-less [application](building-applications.md). It is best to try to put all that
 you can into the JavaScript bundle, but your escape hatch is to put the things
 you need into your [single spa config](configuration).
diff --git a/versioned_docs/version-5.x/api.md b/versioned_docs/version-5.x/api.md
@@ -75,42 +75,48 @@ singleSpa.registerApplication({
 <h3>arguments</h3>
 
 <dl className="args-list">
-	<dt>name: string</dt>
-	<dd>App name that single-spa will register and reference this application with, and will be labelled with in dev tools.</dd>
-	<dt>app: Application | () => Application | Promise&lt;Application&gt; </dt>
-	<dd>Application object or a function that returns the resolved application (Promise or not)</dd>
-	<dt>activeWhen: string | (location) => boolean | (string | (location) => boolean)[]</dt>
-	<dd>Can be a path prefix which will match every URL starting with this path,
-	an activity function (as described in the simple arguments) or an array
-	containing both of them. If any of the criteria is true, it will keep the
-	application active. The path prefix also accepts dynamic values (they must
-	start with ':'), as some paths would receive url params and should still
-	trigger your application.
-	Examples:
-		<dl>
-			<dt>'/app1'</dt>
-			<dd>✅ https://app.com/app1</dd>
-			<dd>✅ https://app.com/app1/anything/everything</dd>
-			<dd>🚫 https://app.com/app2</dd>
-			<dt>'/users/:userId/profile'</dt>
-			<dd>✅ https://app.com/users/123/profile</dd>
-			<dd>✅ https://app.com/users/123/profile/sub-profile/</dd>
-			<dd>🚫 https://app.com/users//profile/sub-profile/</dd>
-			<dd>🚫 https://app.com/users/profile/sub-profile/</dd>
-			<dt>'/pathname/#/hash'</dt>
-			<dd>✅ https://app.com/pathname/#/hash</dd>
-			<dd>✅ https://app.com/pathname/#/hash/route/nested</dd>
-			<dd>🚫 https://app.com/pathname#/hash/route/nested</dd>
-			<dd>🚫 https://app.com/pathname#/another-hash</dd>
-			<dt>['/pathname/#/hash', '/app1']</dt>
-			<dd>✅ https://app.com/pathname/#/hash/route/nested</dd>
-			<dd>✅ https://app.com/app1/anything/everything</dd>
-			<dd>🚫 https://app.com/pathname/app1</dd>
-			<dd>🚫 https://app.com/app2</dd>
-		</dl>
-	</dd>
-	<dt>customProps?: Object | () => Object</dt>
-	<dd>Will be passed to the application during each lifecycle method.</dd>
+  <dt>name: string</dt>
+  <dd>App name that single-spa will register and reference this application with, and will be labelled with in dev tools.</dd>
+
+  <dt>app: Application | () =&gt; Application | Promise&lt;Application&gt;</dt>
+  <dd>Application object or a function that returns the resolved application (Promise or not)</dd>
+
+  <dt>activeWhen: string | (location) =&gt; boolean | (string | (location) =&gt; boolean)[]</dt>
+  <dd>
+    Can be a path prefix which will match every URL starting with this path,
+    an activity function (as described in the simple arguments) or an array
+    containing both of them. If any of the criteria is true, it will keep the
+    application active. The path prefix also accepts dynamic values (they must
+    start with ':'), as some paths would receive url params and should still
+    trigger your application.
+  </dd>
+
+  <dd>
+    Examples:
+    <dl className="examples-list">
+      <dt>'/app1'</dt>
+      <dd>✅ https://app.com/app1</dd>
+      <dd>✅ https://app.com/app1/anything/everything</dd>
+      <dd>🚫 https://app.com/app2</dd>
+      <dt>'/users/:userId/profile'</dt>
+      <dd>✅ https://app.com/users/123/profile</dd>
+      <dd>✅ https://app.com/users/123/profile/sub-profile/</dd>
+      <dd>🚫 https://app.com/users//profile/sub-profile/</dd>
+      <dd>🚫 https://app.com/users/profile/sub-profile/</dd>
+      <dt>'/pathname/#/hash'</dt>
+      <dd>✅ https://app.com/pathname/#/hash</dd>
+      <dd>✅ https://app.com/pathname/#/hash/route/nested</dd>
+      <dd>🚫 https://app.com/pathname#/hash/route/nested</dd>
+      <dd>🚫 https://app.com/pathname#/another-hash</dd>
+      <dt>['/pathname/#/hash', '/app1']</dt>
+      <dd>✅ https://app.com/pathname/#/hash/route/nested</dd>
+      <dd>✅ https://app.com/app1/anything/everything</dd>
+      <dd>🚫 https://app.com/pathname/app1</dd>
+      <dd>🚫 https://app.com/app2</dd>
+    </dl>
+  </dd>
+  <dt>customProps?: Object | () =&gt; Object</dt>
+  <dd>Will be passed to the application during each lifecycle method.</dd>
 </dl>
 
 <h3>returns</h3>

diff --git a/versioned_docs/version-5.x/ecosystem-vue.md b/versioned_docs/version-5.x/ecosystem-vue.md
@@ -96,7 +96,7 @@ export const unmount = vueLifecycles.unmount;
 
 ### Vue 3
 
-> :warning: **Vue 3's router only works properly with single-spa's [urlRerouteOnly](api.md#start) set to `true`! In single-spa@<=5, the default value for `urlRerouteOnly` is false. So make sure to update your root config to set it to true. Also, upgrade to vue-cli-plugin-single-spa@>=3 in order to ensure standalone mode sets urlRerouteOnly to true. [Github discussion](https://github.com/single-spa/single-spa-vue/issues/85)**
+> :warning: **Vue 3's router only works properly with single-spa's `urlRerouteOnly` set to `true`! In `single-spa@<=5`, the default value for `urlRerouteOnly` is false. So, make sure to update your root config to set it to true. Also, upgrade to `vue-cli-plugin-single-spa@>=3` in order to ensure standalone mode sets `urlRerouteOnly` to true.** [Github discussion](https://github.com/single-spa/single-spa-vue/issues/85)
 
 For Vue 3, change your application's entry file to be the following:
 

diff --git a/versioned_docs/version-6.x/api.md b/versioned_docs/version-6.x/api.md
@@ -75,42 +75,48 @@ singleSpa.registerApplication({
 <h3>arguments</h3>
 
 <dl className="args-list">
-	<dt>name: string</dt>
-	<dd>App name that single-spa will register and reference this application with, and will be labelled with in dev tools.</dd>
-	<dt>app: Application | () => Application | Promise&lt;Application&gt; </dt>
-	<dd>Application object or a function that returns the resolved application (Promise or not)</dd>
-	<dt>activeWhen: string | (location) => boolean | (string | (location) => boolean)[]</dt>
-	<dd>Can be a path prefix which will match every URL starting with this path,
-	an activity function (as described in the simple arguments) or an array
-	containing both of them. If any of the criteria is true, it will keep the
-	application active. The path prefix also accepts dynamic values (they must
-	start with ':'), as some paths would receive url params and should still
-	trigger your application.
-	Examples:
-		<dl>
-			<dt>'/app1'</dt>
-			<dd>✅ https://app.com/app1</dd>
-			<dd>✅ https://app.com/app1/anything/everything</dd>
-			<dd>🚫 https://app.com/app2</dd>
-			<dt>'/users/:userId/profile'</dt>
-			<dd>✅ https://app.com/users/123/profile</dd>
-			<dd>✅ https://app.com/users/123/profile/sub-profile/</dd>
-			<dd>🚫 https://app.com/users//profile/sub-profile/</dd>
-			<dd>🚫 https://app.com/users/profile/sub-profile/</dd>
-			<dt>'/pathname/#/hash'</dt>
-			<dd>✅ https://app.com/pathname/#/hash</dd>
-			<dd>✅ https://app.com/pathname/#/hash/route/nested</dd>
-			<dd>🚫 https://app.com/pathname#/hash/route/nested</dd>
-			<dd>🚫 https://app.com/pathname#/another-hash</dd>
-			<dt>['/pathname/#/hash', '/app1']</dt>
-			<dd>✅ https://app.com/pathname/#/hash/route/nested</dd>
-			<dd>✅ https://app.com/app1/anything/everything</dd>
-			<dd>🚫 https://app.com/pathname/app1</dd>
-			<dd>🚫 https://app.com/app2</dd>
-		</dl>
-	</dd>
-	<dt>customProps?: Object | () => Object</dt>
-	<dd>Will be passed to the application during each lifecycle method.</dd>
+  <dt>name: string</dt>
+  <dd>App name that single-spa will register and reference this application with, and will be labelled with in dev tools.</dd>
+
+  <dt>app: Application | () =&gt; Application | Promise&lt;Application&gt;</dt>
+  <dd>Application object or a function that returns the resolved application (Promise or not)</dd>
+
+  <dt>activeWhen: string | (location) =&gt; boolean | (string | (location) =&gt; boolean)[]</dt>
+  <dd>
+    Can be a path prefix which will match every URL starting with this path,
+    an activity function (as described in the simple arguments) or an array
+    containing both of them. If any of the criteria is true, it will keep the
+    application active. The path prefix also accepts dynamic values (they must
+    start with ':'), as some paths would receive url params and should still
+    trigger your application.
+  </dd>
+
+  <dd>
+    Examples:
+    <dl className="examples-list">
+      <dt>'/app1'</dt>
+      <dd>✅ https://app.com/app1</dd>
+      <dd>✅ https://app.com/app1/anything/everything</dd>
+      <dd>🚫 https://app.com/app2</dd>
+      <dt>'/users/:userId/profile'</dt>
+      <dd>✅ https://app.com/users/123/profile</dd>
+      <dd>✅ https://app.com/users/123/profile/sub-profile/</dd>
+      <dd>🚫 https://app.com/users//profile/sub-profile/</dd>
+      <dd>🚫 https://app.com/users/profile/sub-profile/</dd>
+      <dt>'/pathname/#/hash'</dt>
+      <dd>✅ https://app.com/pathname/#/hash</dd>
+      <dd>✅ https://app.com/pathname/#/hash/route/nested</dd>
+      <dd>🚫 https://app.com/pathname#/hash/route/nested</dd>
+      <dd>🚫 https://app.com/pathname#/another-hash</dd>
+      <dt>['/pathname/#/hash', '/app1']</dt>
+      <dd>✅ https://app.com/pathname/#/hash/route/nested</dd>
+      <dd>✅ https://app.com/app1/anything/everything</dd>
+      <dd>🚫 https://app.com/pathname/app1</dd>
+      <dd>🚫 https://app.com/app2</dd>
+    </dl>
+  </dd>
+  <dt>customProps?: Object | () =&gt; Object</dt>
+  <dd>Will be passed to the application during each lifecycle method.</dd>
 </dl>
 
 <h3>returns</h3>

diff --git a/versioned_docs/version-6.x/ecosystem-vue.md b/versioned_docs/version-6.x/ecosystem-vue.md
@@ -96,7 +96,7 @@ export const unmount = vueLifecycles.unmount;
 
 ### Vue 3
 
-> :warning: **Vue 3's router only works properly with single-spa's [urlRerouteOnly](api.md#start) set to `true`! In single-spa@<=5, the default value for `urlRerouteOnly` is false. So make sure to update your root config to set it to true. Also, upgrade to vue-cli-plugin-single-spa@>=3 in order to ensure standalone mode sets urlRerouteOnly to true. [Github discussion](https://github.com/single-spa/single-spa-vue/issues/85)**
+> :warning: **Vue 3's router only works properly with single-spa's `urlRerouteOnly` set to `true`! In `single-spa@<=5`, the default value for `urlRerouteOnly` is false. So, make sure to update your root config to set it to true. Also, upgrade to `vue-cli-plugin-single-spa@>=3` in order to ensure standalone mode sets `urlRerouteOnly` to true.** [Github discussion](https://github.com/single-spa/single-spa-vue/issues/85)
 
 For Vue 3, change your application's entry file to be the following: