docs: add framework integration guide (#364) #365
Conversation
WalkthroughAdded framework integration documentation and a runnable React + Vite example (new Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor Dev as Developer
participant Browser
participant Main as src/main.jsx
participant Gardevoir as "gardevoir (CSS)"
participant Globals as "globals.css"
participant App as "App.jsx → render"
Dev->>Main: open project / run dev
Browser->>Main: request module /src/main.jsx
Main->>Gardevoir: import 'gardevoir'
note right of Gardevoir `#D6EAF8`: reset styles applied first
Main->>Globals: import './globals.css'
note right of Globals `#FDEBD0`: app-level styles layered after reset
Main->>App: import App component
Main->>App: ReactDOM.createRoot(...).render(<App/>)
App->>Browser: render UI (typography, interactive demo)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related issues
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
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 |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
docs/frameworks.md (1)
96-100: Next.js SSR preload pattern is clear, but consider a syntax note.The preload pattern on lines 98–99 is correct for Next.js App Router layouts, though developers unfamiliar with inline HTML attributes in JSX may benefit from a brief note that the
onloadandonerrorhandlers are safe in this context.Consider adding a note like:
// app/layout.tsx export default function RootLayout({ children }) { return ( <html> <head> {/* Preload pattern: onload handler converts rel after stylesheet loads, preventing FOUC. Safe in server-side rendered layouts. */} <link rel="preload" as="style" href="https://cdn.jsdelivr.net/npm/gardevoir@1.0.0" onload="this.rel='stylesheet'" /> <noscript><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gardevoir@1.0.0" /></noscript> </head> <body>{children}</body> </html> ); }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
README.md(1 hunks)docs/frameworks.md(1 hunks)
🔇 Additional comments (4)
README.md (1)
108-115: Well-placed framework integration section.The new subsection clearly directs users to comprehensive framework-specific guidance and accurately summarizes the guide's scope. The relative link format and placement before the "Optimize" section are appropriate.
docs/frameworks.md (3)
115-124: Clarify Vue CLI version — example uses Vue 2 API.The Vue CLI section header suggests Vue 3 context (matching the "Vue 3" section above), but line 123 uses the Vue 2 Options API (
new Vue()). This could confuse readers. Either retitle to "Vue CLI (Vue 2)" or update the example to use the Vue 3 Composition API withcreateApp().
1-249: Comprehensive and well-structured framework integration guide.The guide effectively addresses the PR objectives with clear patterns for all specified frameworks, build tool examples, SSR considerations, performance guidelines, and troubleshooting. The quick reference cheat sheet and core principles are particularly useful for quick navigation.
Key strengths:
- Consistent import order guidance across all frameworks (Gardevoir first, then globals)
- Clear SSR caveats for Next.js/Nuxt preventing hydration mismatches
- Practical troubleshooting table with actionable solutions
- Preload pattern repeated to emphasize performance best practice
22-22: No changes required. The gardevoir@1.0.0 version is the latest stable version as of November 16, 2025, making it an appropriate reference point for the documentation examples.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
docs/frameworks.md (2)
98-105: Clarify the SSR optimization pattern context.The preload pattern shown is valid, but in Next.js App Router (layout.tsx), developers typically use the
next/heador metadata API rather than directly adding<link>tags in the component body. Consider adding context that this pattern is better suited for custom HTML templates or clarifying how to implement it in Next.js specifically.Consider revising the example to use Next.js-specific approaches:
-// app/layout.tsx (advanced) inside <head> -<link rel="preload" as="style" href="https://cdn.jsdelivr.net/npm/gardevoir@1.0.0" onload="this.rel='stylesheet'" /> -<noscript><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gardevoir@1.0.0" /></noscript> +// For CDN usage in Next.js, add to next.config.js or use <Script> component +// Or use the npm import approach shown earlier (recommended)
118-127: Update Vue CLI example to Vue 3 syntax.The code on Line 126 uses Vue 2's Options API (
new Vue()), but Vue CLI now defaults to Vue 3. This may confuse developers expecting modern Vue 3 syntax.Apply this diff to use Vue 3 syntax:
## Vue CLI ```js // src/main.js import 'gardevoir'; import './globals.css'; -import Vue from 'vue'; +import { createApp } from 'vue'; import App from './App.vue'; -new Vue({ render: h => h(App) }).$mount('#app'); +createApp(App).mount('#app');Alternatively, rename the section to "Vue 2 (Legacy)" if Vue 2 support is intentional. </blockquote></details> </blockquote></details> <details> <summary>📜 Review details</summary> **Configuration used**: CodeRabbit UI **Review profile**: CHILL **Plan**: Pro <details> <summary>📥 Commits</summary> Reviewing files that changed from the base of the PR and between 5b9c0d3ef1e9cb9571189a8af4b9abb769949480 and 51ef7a0f81795cd583ff7014297938bc6b1dea44. </details> <details> <summary>⛔ Files ignored due to path filters (1)</summary> * `examples/react-vite/package-lock.json` is excluded by `!**/package-lock.json` </details> <details> <summary>📒 Files selected for processing (10)</summary> * `docs/frameworks.md` (1 hunks) * `examples/react-vite/.gitignore` (1 hunks) * `examples/react-vite/README.md` (1 hunks) * `examples/react-vite/index.html` (1 hunks) * `examples/react-vite/package.json` (1 hunks) * `examples/react-vite/src/App.css` (1 hunks) * `examples/react-vite/src/App.jsx` (1 hunks) * `examples/react-vite/src/globals.css` (1 hunks) * `examples/react-vite/src/main.jsx` (1 hunks) * `examples/react-vite/vite.config.js` (1 hunks) </details> <details> <summary>✅ Files skipped from review due to trivial changes (2)</summary> * examples/react-vite/.gitignore * examples/react-vite/package.json </details> <details> <summary>🔇 Additional comments (14)</summary><blockquote> <details> <summary>examples/react-vite/vite.config.js (1)</summary><blockquote> `1-6`: **LGTM! Standard Vite configuration.** The configuration correctly sets up the React plugin for the example project. This minimal setup is appropriate for demonstrating Gardevoir integration. </blockquote></details> <details> <summary>examples/react-vite/src/globals.css (1)</summary><blockquote> `1-11`: **LGTM! Well-documented global styles.** The import order comment on Line 1 is helpful for reinforcing the documented pattern. The styles provide an attractive demo layout while remaining simple and focused. </blockquote></details> <details> <summary>examples/react-vite/index.html (1)</summary><blockquote> `1-12`: **LGTM! Standard Vite HTML entry point.** The HTML structure correctly references the React root element and loads the main entry script as a module, following Vite conventions. </blockquote></details> <details> <summary>examples/react-vite/src/main.jsx (1)</summary><blockquote> `1-11`: **LGTM! Correct import order and modern React setup.** The import order (Gardevoir first, then globals, then components) is properly implemented with helpful inline comments. The use of React 18's `createRoot` API with StrictMode demonstrates current best practices. </blockquote></details> <details> <summary>docs/frameworks.md (4)</summary><blockquote> `38-65`: **LGTM! React examples demonstrate correct patterns.** Both Vite and Create React App examples properly show the import order (Gardevoir first) and use modern React 18 API with `createRoot`. The working example reference on Line 42 is helpful. --- `218-226`: **LGTM! Comprehensive troubleshooting reference.** The troubleshooting table covers common integration issues with clear causes and fixes. This will be valuable for developers encountering problems. --- `67-96`: **LGTM! Comprehensive framework and build tool coverage.** The documentation provides clear, accurate examples for Next.js (both routers), Nuxt, Angular, Svelte, and all major build tools. The performance optimization guidelines, quick reference table, and contribution guidance are well-structured and valuable. Also applies to: 129-198, 200-251 --- `20-23`: Let me get the complete HTTP status from the CDN URL: **Verification confirms CDN URL and version are valid.** The gardevoir package exists on npm, and jsDelivr automatically serves all npm packages, including version 1.0.0 which is confirmed published. The CDN URL format follows the standard jsDelivr convention and is correctly structured. </blockquote></details> <details> <summary>examples/react-vite/src/App.jsx (4)</summary><blockquote> `1-5`: **LGTM! Component setup follows React best practices.** The imports and state management are correctly implemented using modern React hooks. --- `7-28`: **LGTM! Typography demo section showcases reset styles effectively.** The section demonstrates various HTML elements (headings, paragraphs, blockquotes, lists) that benefit from Gardevoir's reset, providing a clear visual reference. --- `30-34`: **LGTM! Interactive counter demonstrates React state management.** The button correctly uses the onClick handler to increment the count, showcasing interactive elements with Gardevoir's reset applied. --- `48-56`: **LGTM! Footer provides helpful guidance.** The footer helpfully directs users to check the import order in `main.jsx`, reinforcing the key integration pattern. </blockquote></details> <details> <summary>examples/react-vite/README.md (1)</summary><blockquote> `1-92`: **LGTM! Excellent example documentation.** The README comprehensively covers: - Import order rationale (critical for correct integration) - Setup and run commands - Project structure - Troubleshooting common issues - Links to broader documentation This provides developers with everything needed to understand and run the example successfully. </blockquote></details> <details> <summary>examples/react-vite/src/App.css (1)</summary><blockquote> `1-101`: **LGTM! Clean, well-organized component styles.** The stylesheet effectively demonstrates: - Consistent visual design with a cohesive color scheme - Proper interactive states (hover, focus) for accessibility - Clear organization by component section - Styles that work well with Gardevoir's reset baseline The styling provides an attractive demo while remaining simple and maintainable. </blockquote></details> </blockquote></details> </details> <!-- This is an auto-generated comment by CodeRabbit for review status -->
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
examples/react-vite/src/App.jsx (1)
32-34: Consider functional state update for better practice.While the current implementation works fine for this demo, using the functional update form is more robust when the new state depends on the previous state.
Apply this diff if you prefer the functional update pattern:
- <button onClick={() => setCount(count + 1)}> + <button onClick={() => setCount(c => c + 1)}> Count: {count} </button>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
README.md(2 hunks)docs/frameworks.md(1 hunks)examples/react-vite/README.md(1 hunks)examples/react-vite/src/App.jsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- docs/frameworks.md
- README.md
🧰 Additional context used
🪛 markdownlint-cli2 (0.18.1)
examples/react-vite/README.md
66-66: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
🔇 Additional comments (4)
examples/react-vite/README.md (1)
1-100: Excellent documentation for React+Vite integration.This README provides clear, actionable guidance on integrating Gardevoir with a React+Vite setup. The import order explanation is sound, troubleshooting section addresses real issues, and the project structure is well-documented. The example successfully demonstrates best practices and aligns with the PR objectives.
examples/react-vite/src/App.jsx (3)
1-2: LGTM!The imports are clean and appropriate for a React demo component using hooks and custom styles.
4-5: LGTM!The component structure and state initialization follow React best practices.
36-44: LGTM! Form submission now handled correctly.The form now includes the
onSubmithandler that prevents the default page reload, addressing the concern from the previous review. This maintains the SPA experience as intended for the demo.
examples/react-vite/README.md
Outdated
| ``` | ||
| react-vite/ | ||
| ├── package.json # Dependencies including Gardevoir | ||
| ├── vite.config.js # Standard Vite config | ||
| ├── index.html # HTML entry point | ||
| └── src/ | ||
| ├── main.jsx # Entry file - imports Gardevoir first | ||
| ├── globals.css # Global custom styles | ||
| ├── App.jsx # Main component | ||
| └── App.css # Component styles | ||
| ``` |
There was a problem hiding this comment.
Add language identifier to fenced code block.
The project structure code block is missing a language identifier per Markdown lint rules (MD040). Use a language-agnostic format or explicitly declare the language.
Apply this diff to fix the code block:
-```
+```plaintext
react-vite/
├── package.json # Dependencies including Gardevoir
├── vite.config.js # Standard Vite config
├── index.html # HTML entry point
└── src/
├── main.jsx # Entry file - imports Gardevoir first
├── globals.css # Global custom styles
├── App.jsx # Main component
└── App.css # Component styles
-```
+```🧰 Tools
🪛 markdownlint-cli2 (0.18.1)
66-66: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
🤖 Prompt for AI Agents
In examples/react-vite/README.md around lines 66 to 76, the fenced code block
for the project tree lacks a language identifier (MD040); update the opening
fence to include a language-agnostic identifier such as "plaintext" so the block
starts with ```plaintext, and leave the closing fence as ``` to satisfy the
linter and preserve the existing content and formatting.
Summary
Adds comprehensive framework integration documentation to help developers integrate Gardevoir/reseter.css into modern JavaScript frameworks.
Changes
docs/frameworks.mdwith integration patterns for React, Next.js, Vue, Nuxt, Angular, SvelteREADME.mdwith link to framework guideFrameworks Covered
Fixes #364
Summary by CodeRabbit