chore: update docusaurus to 3.8.0 (#9974)

> [!IMPORTANT] > We need to change the ENV `VERCEL_FORCE_NO_BUILD_CACHE` to `0` which is currently `1` to enable the cache on all deployments This pull request includes several updates to the documentation and benchmarking components, focusing on improving performance, error handling, and compatibility with newer versions of Docusaurus. The key changes include the removal of outdated configurations, updates to dependencies, and enhancements to the `BenchmarkChart` component for better error handling and data validation. ### Documentation and Configuration Updates: * **Removed outdated Babel and Webpack configurations**: The `babel.config.js` file was deleted, and the Webpack configuration was removed from `docusaurus.config.js` to align with the latest Docusaurus setup. [[1]](diffhunk://#diff-2ed4f5b03d34a87ef641e9e36af4a98a1c0ddaf74d07ce93665957be69b7b09aL1-L4) [[2]](diffhunk://#diff-28742c737e523f302e6de471b7fc27284dc8cf720be639e6afe4c17a550cd654L204-L225) * **Added experimental features in Docusaurus**: Introduced a `future` section in `docusaurus.config.js` to enable experimental features like `swcJsLoader`, `rspackBundler`, and `lightningCssMinimizer`, while disabling problematic settings due to known issues. ### Dependency Updates: * **Upgraded Docusaurus and related packages**: Updated dependencies in `package.json` to use Docusaurus version `^3.8.0` and newer versions of associated plugins and themes for improved performance and compatibility. [[1]](diffhunk://#diff-adfa337ce44dc2902621da20152a048dac41878cf3716dfc4cc56d03aa212a56L25-R39) [[2]](diffhunk://#diff-adfa337ce44dc2902621da20152a048dac41878cf3716dfc4cc56d03aa212a56L66-R67) ### Component Enhancements: * **Improved `BenchmarkChart` error handling**: Refactored the `BenchmarkChart` component to validate input data, handle errors gracefully, and provide meaningful fallback messages when data is missing or invalid. [[1]](diffhunk://#diff-ce9fccf51f6b863dd58a39f361a9cf980b10357bccc7381f928788483b30cb0eL4-R21) [[2]](diffhunk://#diff-ce9fccf51f6b863dd58a39f361a9cf980b10357bccc7381f928788483b30cb0eR72-R76) * **Fixed edge cases in chart rendering**: Addressed issues like invalid timestamps, undefined `p99` values, and empty data sets to ensure robust chart generation. [[1]](diffhunk://#diff-ce9fccf51f6b863dd58a39f361a9cf980b10357bccc7381f928788483b30cb0eL19-L29) [[2]](diffhunk://#diff-ce9fccf51f6b863dd58a39f361a9cf980b10357bccc7381f928788483b30cb0eL38-R61) ### Documentation Benchmark Updates: * **Simplified imports in benchmark files**: Replaced the use of `raw-loader` with direct imports for benchmark data in multiple `.mdx` files to streamline the documentation setup. [[1]](diffhunk://#diff-a9710709396e5ff6756aedf89dfcbd62aeea15368ba33bf3932ebf33046a29e8L66-R66) [[2]](diffhunk://#diff-0a9b6103c97c58792450bfd2d337bbb8a6b72df2ae326cc56ebc96e01c0acd6bL35-R35) [[3]](diffhunk://#diff-38f45388e065c57f1282a43bb319354da3c218e96d95ca20f4d11709f48491b8L36-R36) [[4]](diffhunk://#diff-b8e792ebe42fcb16a493e35d23b58a91c2117d949953487e70f379c64e5cb7c0L36-R36) [[5]](diffhunk://#diff-3778acfa893504004008b162fa95f21f1c7c40dcf1868bbbaaa504ac5d51901aL38-R38)
2025-08-11 12:47:35 +00:00 · 2025-05-30 01:15:28 -07:00
parent 5e87fafadf
commit 93a92446bf
10 changed files with 3794 additions and 1614 deletions
--- a/docs/babel.config.js
+++ b/docs/babel.config.js
@@ -1,4 +0,0 @@
-module.exports = {
-  presets: [require.resolve("@docusaurus/core/lib/babel/preset")],
-  compact: auto
-};
--- a/docs/docs/apis/benchmarks/_template.mdx
+++ b/docs/docs/apis/benchmarks/_template.mdx
@@ -63,7 +63,7 @@ TODO: describe the outcome of the test?

 ## Endpoint latencies

-import OutputSource from "!!raw-loader!./output.json";
+import OutputSource from "./output.json";

 import { BenchmarkChart } from '/src/components/benchmark_chart';

--- a/docs/docs/apis/benchmarks/v2.65.0/machine_jwt_profile_grant/index.mdx
+++ b/docs/docs/apis/benchmarks/v2.65.0/machine_jwt_profile_grant/index.mdx
@@ -32,7 +32,7 @@ Tests are halted after this test run because of too many [client read events](ht

 ## /token endpoint latencies

-import OutputSource from "!!raw-loader!./output.json";
+import OutputSource from "./output.json";

 import { BenchmarkChart } from '/src/components/benchmark_chart';

--- a/docs/docs/apis/benchmarks/v2.66.0/machine_jwt_profile_grant/index.mdx
+++ b/docs/docs/apis/benchmarks/v2.66.0/machine_jwt_profile_grant/index.mdx
@@ -33,7 +33,7 @@ The tests showed heavy database load by time by the first two database queries.

 ## Endpoint latencies

-import OutputSource from "!!raw-loader!./output.json";
+import OutputSource from "./output.json";

 import { BenchmarkChart } from '/src/components/benchmark_chart';

--- a/docs/docs/apis/benchmarks/v2.70.0/machine_jwt_profile_grant/index.mdx
+++ b/docs/docs/apis/benchmarks/v2.70.0/machine_jwt_profile_grant/index.mdx
@@ -33,7 +33,7 @@ The performance goals of [this issue](https://github.com/zitadel/zitadel/issues/

 ## Endpoint latencies

-import OutputSource from "!!raw-loader!./output.json";
+import OutputSource from "./output.json";

 import { BenchmarkChart } from '/src/components/benchmark_chart';

--- a/docs/docs/apis/benchmarks/v2.70.0/oidc_session/index.mdx
+++ b/docs/docs/apis/benchmarks/v2.70.0/oidc_session/index.mdx
@@ -35,7 +35,7 @@ The tests showed that querying the user takes too much time because Zitadel ensu

 ## Endpoint latencies

-import OutputSource from "!!raw-loader!./output.json";
+import OutputSource from "./output.json";

 import { BenchmarkChart } from '/src/components/benchmark_chart';

--- a/docs/docusaurus.config.js
+++ b/docs/docusaurus.config.js
@@ -201,28 +201,6 @@ module.exports = {
      runmeLinkLabel: 'Checkout via Runme'
    },
  },
-  webpack: {
-    jsLoader: (isServer) => ({
-      loader: require.resolve('swc-loader'),
-      options: {
-        jsc: {
-          parser: {
-            syntax: 'typescript',
-            tsx: true,
-          },
-          transform: {
-            react: {
-              runtime: 'automatic',
-            },
-          },
-          target: 'es2017',
-        },
-        module: {
-          type: isServer ? 'commonjs' : 'es6',
-        },
-      },
-    }),
-  },
  presets: [
    [
      "classic",
@@ -397,4 +375,17 @@ module.exports = {
    },
  ],
  themes: [ "docusaurus-theme-github-codeblock", "docusaurus-theme-openapi-docs"],
+  future: {
+    v4: false, // Disabled because of some problems related to https://github.com/facebook/docusaurus/issues/11040
+    experimental_faster: {
+      swcJsLoader: false, // Disabled because of memory usage > 8GB which is a problem on vercel default runners
+      swcJsMinimizer: true,
+      swcHtmlMinimizer : true,
+      lightningCssMinimizer: true,
+      mdxCrossCompilerCache: true,
+      ssgWorkerThreads: false, // Disabled because of some problems related to https://github.com/facebook/docusaurus/issues/11040
+      rspackBundler: true,
+      rspackPersistentCache: true,
+    },
+  },
 };
--- a/docs/package.json
+++ b/docs/package.json
@@ -6,7 +6,7 @@
    "docusaurus": "docusaurus",
    "start": "docusaurus start",
    "start:api": "yarn run generate && docusaurus start",
-    "build": "yarn run generate && NODE_OPTIONS=--max-old-space-size=8192 docusaurus build",
+    "build": "yarn run generate && docusaurus build",
    "swizzle": "docusaurus swizzle",
    "deploy": "docusaurus deploy",
    "clear": "docusaurus clear",
@@ -22,33 +22,27 @@
  },
  "dependencies": {
    "@bufbuild/buf": "^1.14.0",
-    "@docusaurus/core": "3.4.0",
-    "@docusaurus/preset-classic": "3.4.0",
-    "@docusaurus/theme-mermaid": "3.4.0",
-    "@docusaurus/theme-search-algolia": "3.4.0",
+    "@docusaurus/core": "^3.8.0",
+    "@docusaurus/faster": "^3.8.0",
+    "@docusaurus/preset-classic": "^3.8.0",
+    "@docusaurus/theme-mermaid": "^3.8.0",
+    "@docusaurus/theme-search-algolia": "^3.8.0",
    "@headlessui/react": "^1.7.4",
    "@heroicons/react": "^2.0.13",
-    "@mdx-js/react": "^3.0.0",
-    "@swc/core": "^1.3.74",
    "autoprefixer": "^10.4.13",
    "clsx": "^1.2.1",
-    "docusaurus-plugin-image-zoom": "^1.0.1",
-    "docusaurus-plugin-openapi-docs": "3.0.1",
+    "docusaurus-plugin-image-zoom": "^3.0.1",
+    "docusaurus-plugin-openapi-docs": "4.4.0",
    "docusaurus-theme-github-codeblock": "^2.0.2",
-    "docusaurus-theme-openapi-docs": "3.0.1",
+    "docusaurus-theme-openapi-docs": "4.4.0",
    "mdx-mermaid": "^2.0.0",
-    "mermaid": "^10.9.1",
    "postcss": "^8.4.31",
-    "prism-react-renderer": "^2.1.0",
    "raw-loader": "^4.0.2",
    "react": "^18.2.0",
    "react-copy-to-clipboard": "^5.1.0",
    "react-dom": "^18.2.0",
    "react-google-charts": "^5.2.1",
-    "react-player": "^2.15.1",
-    "sitemap": "7.1.1",
-    "swc-loader": "^0.2.3",
-    "wait-on": "6.0.1"
+    "react-player": "^2.15.1"
  },
  "browserslist": {
    "production": [
@@ -63,8 +57,8 @@
    ]
  },
  "devDependencies": {
-    "@docusaurus/module-type-aliases": "3.4.0",
-    "@docusaurus/types": "3.4.0",
+    "@docusaurus/module-type-aliases": "^3.8.0",
+    "@docusaurus/types": "^3.8.0",
    "tailwindcss": "^3.2.4"
  },
  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
--- a/docs/src/components/benchmark_chart.jsx
+++ b/docs/src/components/benchmark_chart.jsx
@@ -1,11 +1,24 @@
 import React from "react";
 import Chart from "react-google-charts";

-export function BenchmarkChart(testResults=[], height='500px') {
+export function BenchmarkChart({ testResults = [], height = '500px' } = {}) {
+    if (!Array.isArray(testResults)) {
+        console.error("BenchmarkChart: testResults is not an array. Received:", testResults);
+        return <p>Error: Benchmark data is not available or in the wrong format.</p>;
+    }
+
+    if (testResults.length === 0) {
+        return <p>No benchmark data to display.</p>;
+    }
+
    const dataPerMetric = new Map();
    let maxVValue = 0;

-    JSON.parse(testResults.testResults).forEach((result) => {
+    testResults.forEach((result) => {
+        if (!result || typeof result.metric_name === 'undefined') {
+            console.warn("BenchmarkChart: Skipping invalid result item:", result);
+            return;
+        }
        if (!dataPerMetric.has(result.metric_name)) {
            dataPerMetric.set(result.metric_name, [
                [
@@ -16,17 +29,16 @@ export function BenchmarkChart(testResults=[], height='500px') {
                ],
            ]);
        }
-        if (result.p99 > maxVValue) {
+        if (result.p99 !== undefined && result.p99 > maxVValue) {
            maxVValue = result.p99;
        }
        dataPerMetric.get(result.metric_name).push([
-            new Date(result.timestamp),
+            result.timestamp ? new Date(result.timestamp) : null,
            result.p50,
            result.p95,
            result.p99,
        ]);
    });
-
    const options = {
        legend: { position: 'bottom' },
        focusTarget: 'category',
@@ -35,17 +47,18 @@ export function BenchmarkChart(testResults=[], height='500px') {
        },
        vAxis: {
            title: 'latency (ms)',
-            maxValue: maxVValue,
+            maxValue: maxVValue > 0 ? maxVValue : undefined,
        },
        title: ''
    };
    const charts = [];
    
    dataPerMetric.forEach((data, metric) => {
-        const opt = Object.create(options);
+        const opt = { ...options };
        opt.title = metric;
        charts.push(
            <Chart
+                key={metric}
                chartType="LineChart"
                width="100%"
                height={height}
@@ -56,6 +69,9 @@ export function BenchmarkChart(testResults=[], height='500px') {
        );
    });

+    if (charts.length === 0) {
+        return <p>No chart data could be generated.</p>;
+    }

-    return (charts);
+    return <>{charts}</>;
 }
--- a/docs/yarn.lock
+++ b/docs/yarn.lock