perf: lazy-load Mermaid, YouTube, and TwitterTweetEmbed to reduce bundle size - #5667
perf: lazy-load Mermaid, YouTube, and TwitterTweetEmbed to reduce bundle size#5667patilpratik1905 wants to merge 1 commit into
Conversation
…ove unused Twitter components
✅ Deploy Preview for asyncapi-website ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
📝 WalkthroughWalkthroughMDX embeds now use client-only dynamic loading. Mermaid rendering moved into a dedicated component with strict security, light/dark theme variables, theme-change detection, SVG rendering, and error handling. ChangesMDX embed rendering
Estimated code review effort: 3 (Moderate) | ~20 minutes Sequence Diagram(s)sequenceDiagram
participant MDXProvider
participant MermaidDiagram
participant MermaidAPI
MDXProvider->>MermaidDiagram: pass graph
MermaidDiagram->>MermaidDiagram: detect active theme
MermaidDiagram->>MermaidAPI: initialize and render graph
MermaidAPI-->>MermaidDiagram: return SVG
MermaidDiagram-->>MDXProvider: inject SVG
Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
|
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-5667--asyncapi-website.netlify.app/ |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@components/MDX/MermaidDiagram.tsx`:
- Line 25: Apply the repository formatter to the full changed files
components/MDX/MermaidDiagram.tsx (anchor, line 25) and components/MDX/MDX.tsx
(sibling, line 39), correcting trailing commas, dynamic-import formatting, and
JSX layout violations without changing behavior.
- Around line 101-105: Initialize the theme state in MermaidDiagram from
getMermaidTheme() instead of defaulting to 'light', so the first render uses the
active page theme. Update the existing useEffect only as needed to continue
responding to later theme changes.
- Line 3: Upgrade the Mermaid dependency used by the MermaidDiagram renderer to
a fixed release newer than 9.3.0, then regression-test client-side MDX graph
rendering, including relevant graph and Gantt diagrams. Preserve the existing
import and rendering behavior while confirming the upgrade prevents the reported
CSS injection and Gantt loop issues.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 96d003fe-c720-45dc-8645-4ca791620693
📒 Files selected for processing (2)
components/MDX/MDX.tsxcomponents/MDX/MermaidDiagram.tsx
| @@ -0,0 +1,150 @@ | |||
| 'use client'; | |||
|
|
|||
| import mermaid from 'mermaid'; | |||
There was a problem hiding this comment.
🔒 Security & Privacy | 🟠 Major | 🏗️ Heavy lift
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== files =="
git ls-files | rg '(^|/)components/MDX/MermaidDiagram\.tsx$|package\.json$|package-lock\.json$|pnpm-lock\.yaml$|yarn\.lock$' || true
echo "== MermaidDiagram excerpt =="
if [ -f components/MDX/MermaidDiagram.tsx ]; then
wc -l components/MDX/MermaidDiagram.tsx
sed -n '1,160p' components/MDX/MermaidDiagram.tsx | cat -n
fi
echo "== package mermaid references =="
for f in package.json package-lock.json pnpm-lock.yaml yarn.lock; do
if [ -f "$f" ]; then
echo "--- $f ---"
rg -n '"?mermaid"?|mermaid@|mermaid:' "$f" -A 3 -B 3 || true
fi
done
echo "== mermaid imports/usages =="
rg -n "mermaid|Mermaid" . --glob '!node_modules' --glob '!dist' --glob '!build' || trueRepository: asyncapi/website
Length of output: 16356
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Read-only package-management/dependency verifier: inspect exact mermaid package versions
# declared in lock metadata when available, without installing or running repo code.
python3 - <<'PY'
import json, re, pathlib
def parse_package_json(p):
data=json.loads(p.read_text())
for section in ["dependencies","devDependencies","optionalDependencies","peerDependencies"]:
if section in data:
for name,val in data[section].items():
if name.lower()=="mermaid":
print("package.json", section, name, val)
for lock in ["package-lock.json","pnpm-lock.yaml","yarn.lock"]:
p=pathlib.Path(lock)
if not p.exists(): continue
print(f"LOCK {lock}")
text=p.read_text(errors="ignore")
if lock == "package-lock.json":
data=json.loads(text)
packages=data.get("packages", {})
for pkg, meta in packages.items():
if pkg in ("", "node_modules/mermaid"):
continue
if "mermaid" in pkg.lower():
ver=meta.get("version")
pkg_path=pkg.replace("\\","/")
print(pkg_path, "version=", ver, "dependencies=", meta.get("dependencies"))
elif lock == "pnpm-lock.yaml":
for line in text.splitlines():
m=re.search(r'^\s*(?:mermaid[^:\s]*)?:\s*(?:version:\s*)?(\S+)', line)
if m:
print("pnpm_lock", m.group(1))
if "mermaid:" in text:
idx=text.find("\n mermaid:")
print(text[idx:idx+400])
elif lock == "yarn.lock":
for m in re.finditer(r'^"mermaid@[^"]*":\s*\r?\n((?:[^\n]+(?:\r?\n|(?<!\r)\n))*?)\n([A-Z]|\s*(?:[^"][A-Za-z0-9_/\-@]|"))', text, re.S):
block="\n".join(m.group(1).splitlines())
ver_match=re.search(r'version "([^"]+)"', block)
print("yarn_lock", ver_match.group(1) if ver_match else block.splitlines()[0])
PYRepository: asyncapi/website
Length of output: 177
🌐 Web query:
Mermaid 9.3.0 affected vulnerabilities CSS injection Gantt infinite loop securityLevel strict
💡 Result:
Mermaid version 9.3.0 is affected by various security vulnerabilities, as it precedes the fixed versions (10.9.6 and 11.15.0) that address multiple recently identified flaws [1][2][3]. Regarding the specific issues mentioned: CSS Injection: Recent vulnerabilities (e.g., CVE-2026-41159 and others) involve improper sanitization of configuration options (like fontFamily, themeCSS, and altFontFamily) and classDef directives [1][4][3]. These flaws allow attackers to inject malicious CSS that can escape the diagram's scope, leading to page defacement or data exfiltration [1][3]. Gantt Infinite Loop: A denial-of-service (DoS) vulnerability (CVE-2026-41150) affects Mermaid Gantt charts when they use an 'excludes' attribute to exclude all dates, causing an infinite loop during rendering [2][5][6]. SecurityLevel Strict: Setting 'securityLevel' to 'strict' is a standard security practice in Mermaid that encodes HTML tags and disables click functionality [7][8]. However, it may not fully mitigate all injection vulnerabilities depending on the specific attack vector (e.g., configuration-based CSS injection) [1][3]. For the highest level of security when rendering untrusted content, the 'sandbox' securityLevel is recommended, as it renders the diagram within a sandboxed iframe [1][3][8]. To secure your application, you should upgrade to version 10.9.6 or 11.15.0 or later [1][2][3]. If upgrading is not immediately possible, using 'securityLevel': 'sandbox' is the suggested mitigation for several of these injection-based vulnerabilities [1][3][9].
Citations:
- 1: GHSA-87f9-hvmw-gh4p
- 2: GHSA-6m6c-36f7-fhxh
- 3: https://osv.dev/vulnerability/GHSA-xcj9-5m2h-648r
- 4: https://github.com/mermaid-js/mermaid/security/advisories
- 5: https://nvd.nist.gov/vuln/detail/CVE-2026-41150
- 6: https://osv.dev/vulnerability/GHSA-6m6c-36f7-fhxh
- 7: https://github.com/mermaid-js/mermaid/blob/9745f325/packages/mermaid/src/docs/config/usage.md
- 8: https://www.mintlify.com/mermaid-js/mermaid/concepts/configuration
- 9: https://nvd.nist.gov/vuln/detail/cve-2026-41149
🌐 Web query:
mermaid 10.9.6 release notes vulnerabilities fixed
💡 Result:
The Mermaid 10.9.6 release, published on May 11, 2026, includes backported security fixes originally addressed in version 11.15.0 [1][2]. This release resolves several vulnerabilities and dependency issues [1]: Security Fixes - CVE-2026-41159 (GHSA-87f9-hvmw-gh4p): Fixed an improper sanitization issue in configuration options (fontFamily, themeCSS, and altFontFamily) that allowed for CSS injection and escaping of diagram scoping [3][4]. - CVE-2026-41148: Prevented unbalanced CSS styles in classDefs [1][5]. - CVE-2026-41149: Updated the creation of CSS styles to utilize the CSSOM (CSS Object Model) [1][5]. - CVE-2026-41150: Fixed a potential infinite loop in the Gantt diagram implementation when excluding all dates [1][5]. Dependency and Other Fixes - CVE-2026-41907: Loosened the uuid dependency range to allow version 14. This change allows users to silence dependency warnings for a vulnerable code path that Mermaid does not actively use [1][5]. For systems unable to upgrade immediately, the CSS injection vulnerability (CVE-2026-41159) can be mitigated by setting the securityLevel configuration to 'sandbox' or by enabling the secure configuration option [3][4].
Citations:
- 1: https://github.com/mermaid-js/mermaid/releases/tag/v10.9.6
- 2: https://newreleases.io/project/npm/mermaid/release/10.9.6
- 3: GHSA-87f9-hvmw-gh4p
- 4: https://security.snyk.io/vuln/SNYK-JS-MERMAID-16642055
- 5: mermaid-js/mermaid@dd351a7
Upgrade Mermaid before rendering MDX graphs client-side.
The app pins Mermaid 9.3.0, which is affected by later-fixed CSS injection and Gantt infinite-loop vulnerabilities that can alter page styling or hang a visiting tab. Upgrade to a fixed release and regression-test the renderer.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@components/MDX/MermaidDiagram.tsx` at line 3, Upgrade the Mermaid dependency
used by the MermaidDiagram renderer to a fixed release newer than 9.3.0, then
regression-test client-side MDX graph rendering, including relevant graph and
Gantt diagrams. Preserve the existing import and rendering behavior while
confirming the upgrade prevents the reported CSS injection and Gantt loop
issues.
| tertiaryBkg: '#F7F9FA', | ||
| clusterBkg: '#F7F9FA', | ||
| clusterBorder: '#BFC6C7', | ||
| edgeLabelBackground: '#FFFFFF', |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Apply the repository formatter to both changed files.
The supplied ESLint results report Prettier errors throughout both files.
components/MDX/MermaidDiagram.tsx#L25-L25: format the full changed file, including trailing-comma violations.components/MDX/MDX.tsx#L39-L39: format the full changed file, including dynamic-import and JSX layout violations.
🧰 Tools
🪛 ESLint
[error] 25-25: Delete ,
(prettier/prettier)
📍 Affects 2 files
components/MDX/MermaidDiagram.tsx#L25-L25(this comment)components/MDX/MDX.tsx#L39-L39
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@components/MDX/MermaidDiagram.tsx` at line 25, Apply the repository formatter
to the full changed files components/MDX/MermaidDiagram.tsx (anchor, line 25)
and components/MDX/MDX.tsx (sibling, line 39), correcting trailing commas,
dynamic-import formatting, and JSX layout violations without changing behavior.
Source: Linters/SAST tools
| const [svg, setSvg] = useState<string | null>(null); | ||
| const [theme, setTheme] = useState<MermaidTheme>('light'); | ||
|
|
||
| useEffect(() => { | ||
| setTheme(getMermaidTheme()); |
There was a problem hiding this comment.
🚀 Performance & Scalability | 🟡 Minor | ⚡ Quick win
Initialize from the active theme.
On an initially dark page, the first render effect always renders a light diagram, then re-renders it dark after setTheme. This doubles Mermaid layout work and can briefly show the wrong theme.
Proposed fix
const [svg, setSvg] = useState<string | null>(null);
-const [theme, setTheme] = useState<MermaidTheme>('light');
+const [theme, setTheme] = useState<MermaidTheme>(getMermaidTheme);
useEffect(() => {
- setTheme(getMermaidTheme());
-
const observer = new MutationObserver(() => {📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const [svg, setSvg] = useState<string | null>(null); | |
| const [theme, setTheme] = useState<MermaidTheme>('light'); | |
| useEffect(() => { | |
| setTheme(getMermaidTheme()); | |
| const [svg, setSvg] = useState<string | null>(null); | |
| const [theme, setTheme] = useState<MermaidTheme>(getMermaidTheme); | |
| useEffect(() => { | |
| const observer = new MutationObserver(() => { |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@components/MDX/MermaidDiagram.tsx` around lines 101 - 105, Initialize the
theme state in MermaidDiagram from getMermaidTheme() instead of defaulting to
'light', so the first render uses the active page theme. Update the existing
useEffect only as needed to continue responding to later theme changes.
|
@asyncapi/bounty_team |
3 participants
Problem
MDX.tsxwas statically importing:mermaid(~1.5 MB)react-twitter-embedreact-youtube-embedAs a result, these libraries were included in the initial JavaScript bundle for every page using the MDX renderer, even when the page contained no Mermaid diagrams, Twitter embeds, or YouTube videos.
On Lighthouse mobile (4× CPU slowdown), this resulted in several seconds of unnecessary JavaScript parsing and execution, negatively impacting:
Root Cause
MDX.tsxused static imports for Mermaid, Twitter, and YouTube components, preventing webpack from code-splitting these dependencies. Consequently, every MDX page downloaded and parsed these libraries regardless of whether they were actually used.Solution
Mermaid
MermaidDiagram.tsxcomponent.MutationObservertheme switchingmermaidAPI.renderlogicTwitter Embed
TwitterTweetEmbed:Remove Unused Twitter Components
Removed the following unused exports:
TwitterTimelineEmbedTwitterShareButtonTwitterFollowButtonTwitterHashtagButtonTwitterMentionButtonTwitterMomentShareTwitterDMButtonTwitterVideoEmbedTwitterOnAirButtonA repository-wide grep across all
.mdxfiles confirmed that none of these components are referenced anywhere in the documentation.YouTube
Replaced the static import with:
All dynamic imports use
ssr: falsebecause these components rely on browser-only APIs such asdocument,MutationObserver, and third-party embed scripts.Testing
npx tsc --noEmitnpm run lintPerformance Impact
Related Issue
Summary by CodeRabbit
New Features
Bug Fixes