Merge pull request #39 from GBSL-Informatik/feature/docusaurus-faster

feature/docusaurus-faster

README.md

@@ -2,6 +2,9 @@
 
 This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.
 
+> [!NOTE]  
+> Compatible with @docusaurus/faster (rspack and swc).
+
 ## ENV
 
 | Variable                 | For         | Default                 | Example             | Description                                                                                                                                                        |

docs/Komponentengalerie/install.mdx

@@ -0,0 +1,14 @@
+---
+page_id: 55e6e048-bebd-4594-acd9-e8c6da6b0bba
+---
+# Projekt Installieren
+
+🚧 TODO 🚧
+
+## Debug
+
+Im Projekt ist [@docusaurus/plugin-rsdoctor](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-rsdoctor) als dev dependency installiert. Dieses Plugin hilft bei der Analyse von Performance-Problemen und kann beim Aufsuchen von kritischen (langsamen) Code-Teilen helfen.
+
+```bash
+RSDOCTOR=true yarn run build
+```

docs/Komponentengalerie/pdf.mdx

@@ -93,6 +93,10 @@ Das PDF kann nicht heruntergeladen werden - der Download-Button wird ausgeblende
 
 ## Installation
 
+:::note[docusaurus/faster]
+Dieses Plugin ist auch mit `@docusaurus/faster` kompatibel.
+:::
+
 :::info[Code]
 - `src/plugins/remark-pdf`
 - `src/components/PdfViewer`
@@ -106,9 +110,22 @@ yarn add react-pdf@^9.1.1
 
 :::info[`docusaurus.config.ts]
 
-```ts {1,5,9-38}
+```ts {1-14,18,22-46}
+import CopyWebpackPlugin from 'copy-webpack-plugin';
 import pdfPlugin from './src/plugins/remark-pdf/plugin';
 
+const pdfjsDistPath = path.dirname(require.resolve('pdfjs-dist/package.json'));
+const cMapsDir = path.join(pdfjsDistPath, 'cmaps');
+const getCopyPlugin = (
+  currentBundler: CurrentBundler
+): typeof CopyWebpackPlugin => {
+  if (currentBundler.name === 'rspack') {
+    // @ts-expect-error: this exists only in Rspack
+    return currentBundler.instance.CopyRspackPlugin;
+  }
+  return CopyWebpackPlugin;
+}
+
 const REMARK_PLUGINS = [
     /* ... */
     pdfPlugin
@@ -117,28 +134,24 @@ const config: Config = {
     plugins: [
         () => {
             return {
-                name: 'pdfjd-copy-dependencies',
-                configureWebpack(config, isServer, utils) {
+                name: 'pdfjs-copy-dependencies',
+                configureWebpack(config, isServer, {currentBundler}) {
+                const Plugin = getCopyPlugin(currentBundler);
                     return {
                         resolve: {
                             alias: {
                                 canvas: false
                             }
                         },
                         plugins: [
-                            new CopyWebpackPlugin({
+                            new Plugin({
                                 patterns: [
-                                    // pdf-cmaps
-                                    {
-                                    from: 'node_modules/pdfjs-dist/cmaps/',
-                                    to: 'cmaps/'
-                                    },
                                     {
-                                        from: 'node_modules/pdfjs-dist/build/pdf.worker.mjs',
-                                        to: 'pdf.worker.mjs'
+                                        from: cMapsDir,
+                                        to: 'cmaps/'
                                     }
                                 ]
-                            }),
+                            })
                         ]
                     };
                 }

docusaurus.config.ts

@@ -1,6 +1,6 @@
 require('dotenv').config();
 import { themes as prismThemes } from 'prism-react-renderer';
-import type { Config } from '@docusaurus/types';
+import type { Config, CurrentBundler } from '@docusaurus/types';
 import type * as Preset from '@docusaurus/preset-classic';
 import path from 'path';
 
@@ -94,6 +94,18 @@ const REHYPE_PLUGINS = [
   rehypeKatex
 ]
 
+const pdfjsDistPath = path.dirname(require.resolve('pdfjs-dist/package.json'));
+const cMapsDir = path.join(pdfjsDistPath, 'cmaps');
+const getCopyPlugin = (
+  currentBundler: CurrentBundler
+): typeof CopyWebpackPlugin => {
+  if (currentBundler.name === 'rspack') {
+    // @ts-expect-error: this exists only in Rspack
+    return currentBundler.instance.CopyRspackPlugin;
+  }
+  return CopyWebpackPlugin;
+}
+
 
 const config: Config = {
   title: 'Teaching-Dev',
@@ -134,6 +146,29 @@ const config: Config = {
     API_URI: process.env.API_URI,
     GIT_COMMIT_SHA: GIT_COMMIT_SHA
   },
+  future: {
+    experimental_faster: {
+      /**
+       * no config options for swcJsLoader so far. 
+       * Instead configure it over the jsLoader in the next step 
+       */
+      swcJsLoader: false, 
+      swcJsMinimizer: true,
+      swcHtmlMinimizer: true,
+      lightningCssMinimizer: true,
+      rspackBundler: true,
+      mdxCrossCompilerCache: true,
+    },
+  },
+  webpack: {
+    jsLoader: (isServer) => ({
+      loader: 'builtin:swc-loader', // (only works with Rspack)
+      options: {
+        ...require("@docusaurus/faster").getSwcLoaderOptions({isServer}),
+        decorators: true
+      },
+    }),
+  },
 
   // Even if you don't use internationalization, you can use this field to set
   // useful metadata like html lang. For example, if your site is Chinese, you
@@ -289,6 +324,14 @@ const config: Config = {
   } satisfies Preset.ThemeConfig,
   plugins: [
     'docusaurus-plugin-sass',
+    process.env.RSDOCTOR === 'true' && [
+      'rsdoctor',
+      {
+        rsdoctorOptions: {
+          /* Options */
+        },
+      },
+    ],
     () => {
       return {
         name: 'alias-configuration',
@@ -310,28 +353,24 @@ const config: Config = {
     },
     () => {
       return {
-        name: 'pdfjd-copy-dependencies',
-        configureWebpack(config, isServer, utils) {
+        name: 'pdfjs-copy-dependencies',
+        configureWebpack(config, isServer, {currentBundler}) {
+          const Plugin = getCopyPlugin(currentBundler);
             return {
                 resolve: {
                   alias: {
                     canvas: false
                   }
                 },
                 plugins: [
-                    new CopyWebpackPlugin({
-                        patterns: [
-                            // pdf-cmaps
-                            {
-                              from: 'node_modules/pdfjs-dist/cmaps/',
-                              to: 'cmaps/'
-                            },
-                            {
-                                from: 'node_modules/pdfjs-dist/build/pdf.worker.mjs',
-                                to: 'pdf.worker.mjs'
-                            }
-                        ]
-                    }),
+                  new Plugin({
+                    patterns: [
+                      {
+                        from: cMapsDir,
+                        to: 'cmaps/'
+                      }
+                    ]
+                  })
                 ]
             };
         }

package.json

@@ -21,6 +21,7 @@
         "@azure/msal-browser": "^3.20.0",
         "@azure/msal-react": "^2.0.22",
         "@docusaurus/core": "^3.6.0",
+        "@docusaurus/faster": "^3.6.0",
         "@docusaurus/preset-classic": "^3.6.0",
         "@docusaurus/theme-classic": "^3.6.0",
         "@docusaurus/theme-common": "^3.6.0",
@@ -61,6 +62,7 @@
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.24.7",
         "@docusaurus/module-type-aliases": "^3.6.0",
+        "@docusaurus/plugin-rsdoctor": "^3.6.0",
         "@docusaurus/tsconfig": "^3.6.0",
         "@docusaurus/types": "^3.6.0",
         "@types/exceljs": "^1.3.0",