feat: add TypeScript 6 integration test#93
Conversation
Adds integrations/typescript-6/ to confirm recharts compatibility with TypeScript 6 (tested with 6.0.3). The project mirrors vite7-react19 and uses TypeScript 6-specific strict options: - erasableSyntaxOnly: true - verbatimModuleSyntax: true - noUncheckedSideEffectImports: true All pass cleanly, confirming recharts types are compatible with TypeScript 6 consumers using strict settings. Registered as a stable CI test in test-registry.ts. Closes recharts/recharts#7253
WalkthroughThis PR adds a new TypeScript 6 integration example project to the recharts-integ repository. It establishes a complete Vite-based React + TypeScript development environment with Recharts BarChart example, configuration files, and test setup, then registers it in the test suite. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related issues
Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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. Review rate limit: 0/1 reviews remaining, refill in 60 minutes.Comment |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@integrations/typescript-6/src/index.css`:
- Around line 1-14: Remove the extra blank line inside the :root block (between
font-weight: 400; and color-scheme:) and normalize keyword casing in the
font-family value and any CSS function names to lowercase (e.g., make
"system-ui, avenir, helvetica, arial, sans-serif" and "rgba(...)" all lowercase)
so the font-family, color and function keywords in the :root selector
(font-family, font-weight, color-scheme, color, background-color) conform to
Stylelint rules.
🪄 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: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 3a505a55-06d6-4970-93fe-2634ef55b63c
⛔ Files ignored due to path filters (2)
integrations/typescript-6/public/vite.svgis excluded by!**/*.svgintegrations/typescript-6/src/assets/react.svgis excluded by!**/*.svg
📒 Files selected for processing (13)
integrations/typescript-6/eslint.config.jsintegrations/typescript-6/index.htmlintegrations/typescript-6/package.jsonintegrations/typescript-6/src/App.cssintegrations/typescript-6/src/App.spec.tsxintegrations/typescript-6/src/App.tsxintegrations/typescript-6/src/index.cssintegrations/typescript-6/src/main.tsxintegrations/typescript-6/tsconfig.app.jsonintegrations/typescript-6/tsconfig.jsonintegrations/typescript-6/tsconfig.node.jsonintegrations/typescript-6/vite.config.tstest-ui/server/scripts/test-registry.ts
| :root { | ||
| font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; | ||
| line-height: 1.5; | ||
| font-weight: 400; | ||
|
|
||
| color-scheme: light dark; | ||
| color: rgba(255, 255, 255, 0.87); | ||
| background-color: #242424; | ||
|
|
||
| font-synthesis: none; | ||
| text-rendering: optimizeLegibility; | ||
| -webkit-font-smoothing: antialiased; | ||
| -moz-osx-font-smoothing: grayscale; | ||
| } |
There was a problem hiding this comment.
Fix Stylelint violations in the :root block.
The current block has lint errors on empty-line placement and keyword casing, which can fail style checks.
Proposed fix
:root {
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
-
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: `#242424`;
-
font-synthesis: none;
- text-rendering: optimizeLegibility;
+ text-rendering: optimizelegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}📝 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.
| :root { | |
| font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; | |
| line-height: 1.5; | |
| font-weight: 400; | |
| color-scheme: light dark; | |
| color: rgba(255, 255, 255, 0.87); | |
| background-color: #242424; | |
| font-synthesis: none; | |
| text-rendering: optimizeLegibility; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| :root { | |
| font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; | |
| line-height: 1.5; | |
| font-weight: 400; | |
| color-scheme: light dark; | |
| color: rgba(255, 255, 255, 0.87); | |
| background-color: `#242424`; | |
| font-synthesis: none; | |
| text-rendering: optimizelegibility; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } |
🧰 Tools
🪛 Stylelint (17.9.0)
[error] 6-6: Expected no empty line before declaration (declaration-empty-line-before)
(declaration-empty-line-before)
[error] 10-10: Expected no empty line before declaration (declaration-empty-line-before)
(declaration-empty-line-before)
[error] 11-11: Expected "optimizeLegibility" to be "optimizelegibility" (value-keyword-case)
(value-keyword-case)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@integrations/typescript-6/src/index.css` around lines 1 - 14, Remove the
extra blank line inside the :root block (between font-weight: 400; and
color-scheme:) and normalize keyword casing in the font-family value and any CSS
function names to lowercase (e.g., make "system-ui, avenir, helvetica, arial,
sans-serif" and "rgba(...)" all lowercase) so the font-family, color and
function keywords in the :root selector (font-family, font-weight, color-scheme,
color, background-color) conform to Stylelint rules.
## Description - Remove deprecated `baseUrl: "."` from tsconfig.base.json and www/tsconfig.json (baseUrl is deprecated in TS6; paths with relative values work without it under moduleResolution: bundler, and there were no paths relying on it in base) - Remove deprecated `allowSyntheticDefaultImports: false` from tsconfig.json (deprecated in TS6; CommonJS module mode already defaults to false) - Add explicit `rootDir: "./src"` to tsconfig.json (required by TS6 when outDir/declarationDir are set) - Add storybook/css.d.ts ambient CSS module declaration (TS6 adds noUncheckedSideEffectImports to strict mode, requiring type declarations for CSS side-effect imports in the Vite-bundled storybook) Verified: `npm run check-types` passes with zero errors under TypeScript 6.0.3 and continues to pass under TypeScript 5.9.3. ## Related Issue Closes #7253 ## How Has This Been Tested? This is tested through recharts/recharts-integ#93 ## Screenshots (if appropriate): ## Types of changes - [x] Bug fix (non-breaking change which fixes an issue) - [ ] New feature (non-breaking change which adds functionality) - [ ] Breaking change (fix or feature that would cause existing functionality to change) ## Checklist: - [ ] My change requires a change to the documentation. - [ ] I have updated the documentation accordingly. - [ ] I have added tests to cover my changes. - [ ] I have added a storybook story or VR test, or extended an existing story or VR test to show my changes
Adds integrations/typescript-6/ to confirm recharts compatibility with TypeScript 6 (tested with 6.0.3). The project mirrors vite7-react19 and uses TypeScript 6-specific strict options:
All pass cleanly, confirming recharts types are compatible with TypeScript 6 consumers using strict settings.
Registered as a stable CI test in test-registry.ts.
Closes recharts/recharts#7253
Summary by CodeRabbit