use mutationObserver.disconnect() for unmount (#1100)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
the-guild-org · Jun 5, 2023 · 689e633 · 689e633
1 parent 7e1268f
commit 689e633
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 17 deletions.
diff --git a/.changeset/@theguild_components-1100-dependencies.md b/.changeset/@theguild_components-1100-dependencies.md
@@ -0,0 +1,6 @@
+---
+"@theguild/components": patch
+---
+dependencies updates:
+  - Updated dependency [`nextra@2.7.0` ↗︎](https://www.npmjs.com/package/nextra/v/2.7.0) (from `2.6.2`, in `dependencies`)
+  - Updated dependency [`nextra-theme-docs@2.7.0` ↗︎](https://www.npmjs.com/package/nextra-theme-docs/v/2.7.0) (from `2.6.2`, in `dependencies`)
diff --git a/.changeset/sour-donuts-reflect.md b/.changeset/sour-donuts-reflect.md
@@ -0,0 +1,5 @@
+---
+'@theguild/remark-mermaid': patch
+---
+
+use `mutationObserver.disconnect()` for unmount
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -71,8 +71,8 @@
     "focus-trap-react": "10.1.4",
     "fuzzy": "^0.1.3",
     "next-videos": "1.5.0",
-    "nextra": "2.6.2",
-    "nextra-theme-docs": "2.6.2",
+    "nextra": "2.7.0",
+    "nextra-theme-docs": "2.7.0",
     "react-instantsearch-dom": "6.40.0",
     "react-paginate": "8.2.0",
     "react-player": "2.12.0",

diff --git a/packages/components/src/next.config.ts b/packages/components/src/next.config.ts
@@ -3,7 +3,6 @@ import withVideos from 'next-videos';
 import nextra from 'nextra';
 import remarkMdxDisableExplicitJsx from 'remark-mdx-disable-explicit-jsx';
 import nextBundleAnalyzer from '@next/bundle-analyzer';
-import { remarkMermaid } from '@theguild/remark-mermaid';
 import { applyUnderscoreRedirects } from './underscore-redirects';
 
 export const defaultRemarkPlugins = [
@@ -12,7 +11,6 @@ export const defaultRemarkPlugins = [
     remarkMdxDisableExplicitJsx,
     { whiteList: ['iframe', 'video', 'source'] },
   ],
-  remarkMermaid,
 ] as any;
 
 export const withGuildDocs = ({

diff --git a/packages/remark-mermaid/src/mermaid.tsx b/packages/remark-mermaid/src/mermaid.tsx
@@ -11,6 +11,10 @@ export function Mermaid({ chart }: { chart: string }): ReactElement {
     mutationObserver.observe(htmlElement, { attributes: true });
     renderChart();
 
+    return () => {
+      mutationObserver.disconnect();
+    };
+
     // Switching themes taken from https://github.com/mermaid-js/mermaid/blob/1b40f552b20df4ab99a986dd58c9d254b3bfd7bc/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue#L53
     async function renderChart() {
       const hasDarkClass = htmlElement.classList.contains('dark');

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/website/package.json b/website/package.json
@@ -14,7 +14,7 @@
     "@theguild/components": "workspace:*",
     "next": "13.4.2",
     "next-mdx-remote": "4.4.1",
-    "nextra": "2.6.2",
+    "nextra": "2.7.0",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },