Merge pull request #446 from software-mansion/@patrycjakalinska/prepare-for-stable-t-rex

docs: Bump t-rex to stable with Docusaurus 3.7

Author: michalsek

packages/audiodocs/docs/guides/lets-make-some-noise.mdx

@@ -108,7 +108,7 @@ import LetsMakeSomeNoiseSrc from '!!raw-loader!@site/src/examples/LetsMakeSomeNo
 In this guide, we have learned how to create a simple audio player using [`AudioContext`](/core/audio-context) and [``AudioBufferSourceNode``](/sources/audio-buffer-source-node) as well as how we can load audio data from a remote source. To sum up:
 
 - `AudioContext` is the main object that controls the audio graph.
-- the [`decodeAudioData`](/core/base-audio-context#decodeaudiodata) method can be used to load audio data from a remote resource in the form of an [`AudioBuffer`](sources/audio-buffer).
+- the [`decodeAudioData`](/core/base-audio-context#decodeaudiodata) method can be used to load audio data from a remote resource in the form of an [`AudioBuffer`](/sources/audio-buffer).
 - `AudioBufferSourceNode` can be used with any `AudioBuffer`.
 - In order to hear the sounds, we need to connect the source node to the destination node exposed by `AudioContext`.
 - We can control the playback of the sound using [`start`](/sources/audio-buffer-source-node#start) and [`stop`](/sources/audio-scheduled-source-node#stop) methods of the `AudioBufferSourceNode` (and other source nodes, which we will show later).

packages/audiodocs/docs/guides/noise-generation.mdx

@@ -89,6 +89,7 @@ The last noise type I would like to describe is brownian noise (also known as Br
 
 Brownian noise, similarly to pink one, decreases in power by $\dfrac{12dB}{octave}$ and sounds similar to waterfall. The implementation is taken from article by Zach Denton, [How to Generate Noise with the Web Audio API](https://noisehack.com/generate-noise-web-audio-api/):
 
+
 ```tsx
   const createBrownianNoise = () => {
     const aCtx = new AudioContext();

packages/audiodocs/docs/sources/audio-buffer.mdx

@@ -13,7 +13,7 @@ specific sample rate which is the quantity of frames that will play in one secon
 ![](/img/audioBuffer.png)
 
 It can be created from audio file using `decodeAudioData`, `decodeAudioDataSource` or from raw data using `constructor`.
-Once you have data in `AudioBuffer`, audio can be played by passing it to [`AudioBufferSourceNode`](/sources/audio-buffer-source-node).
+Once you have data in `AudioBuffer`, audio can be played by passing it to [`AudioBufferSourceNode`](audio-buffer-source-node).
 
 ## Constructor
 

packages/audiodocs/docusaurus.config.js

@@ -3,8 +3,8 @@
 
 const lightCodeTheme = require('./src/theme/CodeBlock/highlighting-light.js');
 const darkCodeTheme = require('./src/theme/CodeBlock/highlighting-dark.js');
-const math = require('remark-math');
-const katex = require('rehype-katex');
+import remarkMath from 'remark-math';
+import rehypeKatex from 'rehype-katex';
 // This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)
 
 const webpack = require('webpack');
@@ -44,8 +44,8 @@ const config = {
           breadcrumbs: false,
           sidebarCollapsible: false,
           sidebarPath: require.resolve('./sidebars.js'),
-          remarkPlugins: [math],
-          rehypePlugins: [katex],
+          remarkPlugins: [remarkMath],
+          rehypePlugins: [rehypeKatex],
           editUrl:
             'https://github.com/software-mansion/react-native-audio-api/edit/main/packages/audiodocs/docs',
         },
@@ -109,6 +109,7 @@ const config = {
       copyright: `All trademarks and copyrights belong to their respective owners.`,
     },
     prism: {
+      additionalLanguages: ['bash'],
       theme: lightCodeTheme,
       darkTheme: darkCodeTheme,
     },
@@ -127,26 +128,26 @@ const config = {
 
           const raf = require('raf');
           raf.polyfill();
-
+        
           return {
             mergeStrategy: {
               'resolve.extensions': 'prepend',
             },
             plugins: [
               new webpack.DefinePlugin({
-                ...processMock,
-                __DEV__: 'false',
-                setImmediate: () => {},
+              ...processMock,
+              __DEV__: 'false',
               }),
             ],
             module: {
               rules: [
                 {
-                  test: /\.txt/,
+                  test: /\.txt$/,
                   type: 'asset/source',
                 },
                 {
                   test: /\.tsx?$/,
+                  use: 'babel-loader',
                 },
               ],
             },

packages/audiodocs/package.json

@@ -21,47 +21,48 @@
     "@babel/preset-env": "^7.23.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.0",
-    "@docusaurus/core": "^2.4.3",
-    "@docusaurus/plugin-debug": "^2.4.3",
-    "@docusaurus/preset-classic": "^2.4.3",
-    "@docusaurus/theme-mermaid": "^2.4.3",
-    "@emotion/react": "^11.10.6",
-    "@emotion/styled": "^11.10.6",
-    "@mdx-js/react": "^1.6.22",
-    "@mui/material": "^5.12.0",
-    "@swmansion/t-rex-ui": "^0.0.13",
+    "@docusaurus/core": "3.7.0",
+    "@docusaurus/plugin-debug": "3.7.0",
+    "@docusaurus/preset-classic": "3.7.0",
+    "@docusaurus/theme-mermaid": "3.7.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mdx-js/react": "^3.0.0",
+    "@mui/material": "^7.1.0",
     "@shopify/react-native-skia": "1.10.2",
+    "@swmansion/t-rex-ui": "1.0.0",
     "@vercel/og": "^0.6.2",
     "babel-polyfill": "^6.26.0",
     "babel-preset-expo": "^9.2.2",
-    "clsx": "^1.2.1",
+    "clsx": "^2.1.0",
     "hast-util-is-element": "1.1.0",
+    "prism-react-renderer": "^2.1.0",
     "raf": "^3.4.1",
     "raw-loader": "^4.0.2",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "react-colorful": "^5.6.1",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "react-draggable": "^4.4.5",
     "react-native": "^0.71.4",
     "react-native-audio-api": "0.5.6",
     "react-native-gesture-handler": "^2.16.0",
     "react-native-reanimated": "^3.8.1",
     "react-native-web": "^0.18.12",
-    "rehype-katex": "5",
-    "remark-math": "3",
+    "rehype-katex": "7",
+    "remark-math": "6",
     "source-map": "^0.7.4",
     "source-map-loader": "^4.0.1",
     "usehooks-ts": "^2.9.1"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "^2.4.3",
-    "@tsconfig/docusaurus": "^1.0.7",
+    "@docusaurus/module-type-aliases": "^3.7.0",
+    "@docusaurus/tsconfig": "3.7.0",
     "copy-webpack-plugin": "^11.0.0",
     "esbuild": "^0.20.2",
     "esbuild-register": "^3.5.0",
     "eslint-plugin-mdx": "^2.2.0",
     "prettier": "^2.8.4",
-    "typescript": "^4.7.4",
+    "typescript": "~5.2.2",
     "typescript-eslint": "^8.18.0",
     "webpack-cli": "^5.0.1"
   },

packages/audiodocs/src/theme/CodeBlock/CodeBlock/highlighting-dark.js

@@ -1,4 +1,4 @@
-const darkTheme = require('prism-react-renderer/themes/github');
+const darkTheme = require('prism-react-renderer').themes.github;
 
 module.exports = {
   ...darkTheme,

packages/audiodocs/src/theme/CodeBlock/CodeBlock/highlighting-light.js

@@ -1,4 +1,4 @@
-const lightTheme = require('prism-react-renderer/themes/github');
+const lightTheme = require('prism-react-renderer').themes.github;
 
 module.exports = {
   ...lightTheme,

packages/audiodocs/src/theme/CodeBlock/highlighting-dark.js

@@ -1,6 +1,6 @@
 {
   // This file is not used in compilation. It is here just for a nice editor experience.
-  "extends": "@tsconfig/docusaurus/tsconfig.json",
+  "extends": "@docusaurus/tsconfig",
   "compilerOptions": {
     "baseUrl": "."
   },