On website, use recharts from the source code instead of npm registry#6725
Conversation
WalkthroughUpdates the recharts dependency to latest, simplifies the vite config factory signature to remove mode-based parameter, makes the recharts alias unconditional in the build configuration, and adds explanatory comments to tsconfig.json regarding type mappings. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes
Possibly related PRs
Suggested reviewers
Pre-merge checks and finishing touches❌ Failed checks (1 inconclusive)
✅ Passed checks (2 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
www/tsconfig.json (1)
26-35: Helpful documentation, but consider automating the build-types step.The comment clearly explains the type mapping rationale. However, requiring developers to manually run
npm run build-typesfrom the main package could lead to type/implementation mismatches if forgotten.Consider one of these improvements:
- Add a
postinstallorpreparescript to the main package.json that runsbuild-typesautomatically- Document this requirement in the www README or CONTRIBUTING guide
- Add a pre-commit hook or CI check to ensure types are up-to-date
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
www/package.json(1 hunks)www/tsconfig.json(1 hunks)www/vite.config.ts(2 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (DEVELOPING.md)
Run type checking on the codebase using
npm run check-types
**/*.{ts,tsx}: Never useanytype (implicit or explicit) in TypeScript code
Preferunknownoveranyand refine the type in TypeScript
Type function parameters and return values explicitly in TypeScript, do not rely on implicit any or inference; exceptions are React components and trivial functions
Do not useastype assertions in TypeScript; the only exception isas const
Files:
www/vite.config.ts
**/*.{js,ts,tsx}
📄 CodeRabbit inference engine (CONTRIBUTING.md)
Ensure code lints by running
npm run lintand follows Airbnb's Style Guide
Files:
www/vite.config.ts
🧠 Learnings (6)
📚 Learning: 2025-11-19T14:08:01.728Z
Learnt from: PavelVanecek
Repo: recharts/recharts PR: 6659
File: www/src/components/GuideView/Performance/index.tsx:232-250
Timestamp: 2025-11-19T14:08:01.728Z
Learning: In Recharts version 3.4.2, object-as-prop optimizations were introduced to reduce unnecessary re-renders when new object references are passed as props. This affects the recommendation for the `react-perf/jsx-no-new-object-as-prop` ESLint rule.
Applied to files:
www/package.json
📚 Learning: 2025-11-25T01:22:48.289Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: DEVELOPING.md:0-0
Timestamp: 2025-11-25T01:22:48.289Z
Learning: Applies to **/*.{ts,tsx} : Run type checking on the codebase using `npm run check-types`
Applied to files:
www/tsconfig.json
📚 Learning: 2025-11-25T01:22:59.729Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T01:22:59.729Z
Learning: Applies to **/*.{ts,tsx} : Type function parameters and return values explicitly in TypeScript, do not rely on implicit any or inference; exceptions are React components and trivial functions
Applied to files:
www/tsconfig.json
📚 Learning: 2025-11-25T01:22:59.729Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T01:22:59.729Z
Learning: Applies to **/*.{ts,tsx} : Do not use `as` type assertions in TypeScript; the only exception is `as const`
Applied to files:
www/tsconfig.json
📚 Learning: 2025-11-23T13:30:10.395Z
Learnt from: PavelVanecek
Repo: recharts/recharts PR: 6669
File: www/src/docs/exampleComponents/ScatterChart/ScatterChartWithLabels.tsx:2-2
Timestamp: 2025-11-23T13:30:10.395Z
Learning: The `TooltipIndex` type from recharts is defined in `src/state/tooltipSlice.ts` but is not currently exported from the public API entry points. It should not be imported from `recharts/types/state/tooltipSlice` as this is an internal implementation path. An ESLint rule is needed to prevent regressions.
Applied to files:
www/tsconfig.json
📚 Learning: 2025-11-25T01:22:48.289Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: DEVELOPING.md:0-0
Timestamp: 2025-11-25T01:22:48.289Z
Learning: Applies to {test,www/test}/**/*.spec.{ts,tsx} : Write unit tests in the `test` or `www/test` directories with `.spec.tsx` file extension
Applied to files:
www/tsconfig.json
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Build, Test, Pack
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (2)
www/vite.config.ts (2)
8-8: LGTM: Correctly removed unused parameter.The
modeparameter is no longer needed since the alias is now unconditional. This simplifies the function signature appropriately.
44-54: This configuration is appropriate for the monorepo structure.The
../srcalias inwww/vite.config.tsis specifically for building the documentation website, not the npm package distribution. The repository structure ensures thatsrcis always available relative towwwduring builds. The rootpackage.jsonbuild scripts compile the actual npm package independently—they are unaffected by this website configuration. Production website deployments will work correctly as long as the monorepo structure is maintained, which is guaranteed during the build process.
| "react-router-dom": "^7.9.5", | ||
| "react-runner": "^1.0.5", | ||
| "recharts": "^3.5.1", | ||
| "recharts": "latest", |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# Check the vite config for alias configuration
cd www && cat -n vite.config.tsRepository: recharts/recharts
Length of output: 2152
🏁 Script executed:
# Check if node_modules/recharts is referenced anywhere
rg "node_modules/recharts" --type-add 'config:*.{json,ts,js,mts}' -iRepository: recharts/recharts
Length of output: 168
🏁 Script executed:
# Check current package.json for recharts version
grep -A2 -B2 '"recharts"' www/package.jsonRepository: recharts/recharts
Length of output: 189
🏁 Script executed:
# Look for any imports of recharts from node_modules or understanding build setup
rg "from ['\"]recharts['\"]" www/src --type ts --type tsx --type js --type jsx -cRepository: recharts/recharts
Length of output: 88
🏁 Script executed:
# Search for recharts imports with correct syntax
rg "from ['\"]recharts" www/src -A 2Repository: recharts/recharts
Length of output: 45157
🏁 Script executed:
# Check if www is a published package or just docs
cat www/package.json | head -20Repository: recharts/recharts
Length of output: 716
🏁 Script executed:
# See if www build output or any process uses node_modules/recharts
rg "node_modules" www --type json --type js --type tsRepository: recharts/recharts
Length of output: 213
🏁 Script executed:
# Check the root package.json to understand project structure
cat package.json | grep -A 5 '"name"'Repository: recharts/recharts
Length of output: 389
🏁 Script executed:
# Check if www package is published or deployed anywhere
grep -r "recharts.github.io" . --include="*.json" --include="*.md" --include="*.yml" --include="*.yaml" 2>/dev/null | head -20Repository: recharts/recharts
Length of output: 1878
🏁 Script executed:
# Check the CI/CD or deployment config to see if www is built/deployed
find . -name ".github" -o -name ".gitlab-ci.yml" -o -name ".circleci" -o -name "netlify.toml" -o -name "vercel.json" 2>/dev/null | head -5Repository: recharts/recharts
Length of output: 70
🏁 Script executed:
# Verify what versions of recharts might be needed if alias fails
cat www/package-lock.json | grep -A 10 '"recharts"' | head -20Repository: recharts/recharts
Length of output: 114
Replace "latest" with a pinned version to ensure reproducible builds.
The "latest" version specifier can lead to non-deterministic builds, as different environments may install different versions. Although www/vite.config.ts unconditionally aliases recharts to the local ../src directory (which serves the website's development and production builds), the npm dependency in www/package.json should still specify an exact or caret version to maintain reproducibility and provide a clear fallback reference.
Consider pinning to the version matching the main package (e.g., "^3.5.1") for consistency and clarity, even if the alias always takes precedence.
🤖 Prompt for AI Agents
In www/package.json around line 45, the dependency "recharts": "latest" should
be replaced with a pinned or careted version (for example "recharts": "^3.5.1")
to ensure reproducible builds and a clear fallback; update that entry to the
chosen exact/caret version and then regenerate the lockfile (npm/yarn/pnpm
install) so the lockfile reflects the pinned dependency.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #6725 +/- ##
=======================================
Coverage 94.02% 94.02%
=======================================
Files 500 500
Lines 42684 42684
Branches 4917 4917
=======================================
Hits 40135 40135
Misses 2544 2544
Partials 5 5 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Bundle ReportBundle size has no change ✅ |
2 participants
Description
We already had this for local dev, now the same config applies for prod as well.
Related Issue
The zIndex fiasco.
Motivation and Context
This allows us to write examples and guides for not-yet-released features. Same as we were doing with Storybook.
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.