docs: pnpm, yarn, bun cli options #63
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Caution Review failedThe pull request is closed. WalkthroughThis update refactors how CLI installation commands are rendered in documentation and components. It introduces a new Changes
Sequence Diagram(s)sequenceDiagram
participant DocPage
participant ComponentInstallCli
participant CliCommand
participant CopyableCommand
participant Clipboard
DocPage->>ComponentInstallCli: Render with npmCommand prop
ComponentInstallCli->>CliCommand: Pass npmCommand and possible others
CliCommand->>CliCommand: Derive missing commands for other package managers
CliCommand->>CliCommand: Render tabs for pnpm, npm, yarn, bun
CliCommand->>CopyableCommand: Render command for selected tab
CopyableCommand->>Clipboard: On copy button click, copy command
Possibly related PRs
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (4)
types/unist.d.ts (2)
13-20: Consider revising the property naming convention.The double underscore prefix (e.g.,
__npmCommand__,__yarnCommand__) typically indicates private or internal properties in JavaScript/TypeScript conventions. Since these properties appear to be part of the public API based on their usage in components, consider using a more conventional naming pattern.properties?: { __src__?: string; - __npmCommand__?: string; - __yarnCommand__?: string; - __pnpmCommand__?: string; - __bunCommand__?: string; + npmCommand?: string; + yarnCommand?: string; + pnpmCommand?: string; + bunCommand?: string; className?: string[]; };
29-34: Consider eliminating code duplication between interfaces.The
NpmCommandsinterface duplicates the command properties fromUnistNode.properties. This could lead to maintenance overhead when adding new package managers or modifying command structures.Consider extracting the common command properties into a shared type:
+export interface PackageManagerCommands { + __npmCommand__?: string; + __yarnCommand__?: string; + __pnpmCommand__?: string; + __bunCommand__?: string; +} export interface UnistNode extends Node { // ... other properties properties?: { __src__?: string; - __npmCommand__?: string; - __yarnCommand__?: string; - __pnpmCommand__?: string; - __bunCommand__?: string; + ...PackageManagerCommands; className?: string[]; }; children?: UnistNode[]; } -export interface NpmCommands { - __npmCommand__?: string; - __yarnCommand__?: string; - __pnpmCommand__?: string; - __bunCommand__?: string; -} +export interface NpmCommands extends PackageManagerCommands {}lib/rehype-npm-command.ts (2)
15-15: Remove commented incomplete code.The commented line should be removed as it appears to be incomplete debugging code.
- // console.log(node., "node");
4-18: Consider implementing the actual transformation logic.The function currently only logs npm commands but doesn't perform any tree modifications. Based on the
UnistNodeinterface extensions mentioned in the summary (with__npmCommand__,__yarnCommand__, etc. properties), this function appears incomplete.Would you like me to help implement the actual command processing logic to annotate nodes with the appropriate package manager commands, or is this function intended to remain as a logging utility for now?
🧰 Tools
🪛 Biome (1.9.4)
[error] 11-11: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (31)
components/CodeBlock.tsx(1 hunks)components/ComponentInstall.tsx(1 hunks)components/MDX.tsx(2 hunks)content/docs/components/accordion.mdx(1 hunks)content/docs/components/alert.mdx(1 hunks)content/docs/components/avatar.mdx(1 hunks)content/docs/components/badge.mdx(1 hunks)content/docs/components/breadcrumb.mdx(1 hunks)content/docs/components/button.mdx(1 hunks)content/docs/components/card.mdx(1 hunks)content/docs/components/checkbox.mdx(1 hunks)content/docs/components/dialog.mdx(1 hunks)content/docs/components/input.mdx(1 hunks)content/docs/components/label.mdx(1 hunks)content/docs/components/menu.mdx(1 hunks)content/docs/components/popover.mdx(1 hunks)content/docs/components/progress.mdx(1 hunks)content/docs/components/radio.mdx(1 hunks)content/docs/components/select.mdx(1 hunks)content/docs/components/slider.mdx(1 hunks)content/docs/components/sonner.mdx(1 hunks)content/docs/components/switch.mdx(1 hunks)content/docs/components/text.mdx(1 hunks)content/docs/components/toggle-group.mdx(1 hunks)content/docs/components/toggle.mdx(1 hunks)content/docs/components/tooltip.mdx(2 hunks)content/docs/install/nextjs.mdx(3 hunks)content/docs/install/vite.mdx(4 hunks)contentlayer.config.ts(2 hunks)lib/rehype-npm-command.ts(1 hunks)types/unist.d.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (2)
lib/rehype-npm-command.ts (1)
types/unist.d.ts (1)
UnistTree(24-27)
components/ComponentInstall.tsx (1)
components/retroui/Button.tsx (1)
Button(36-55)
🪛 Biome (1.9.4)
lib/rehype-npm-command.ts
[error] 11-11: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
🔇 Additional comments (41)
components/CodeBlock.tsx (1)
31-31: LGTM: Improved code formatting.The added blank line before the return statement improves code readability by providing visual separation between the logic and the return statement.
content/docs/components/slider.mdx (1)
17-17: LGTM: Simplified CLI command presentation.The refactoring from a multiline code block to a single
npmCommandprop aligns well with the newCliCommandcomponent architecture, providing a cleaner and more maintainable approach to displaying installation commands.content/docs/components/sonner.mdx (1)
23-24: LGTM: Consistent refactoring with improved CLI command presentation.The changes follow the same beneficial refactoring pattern seen across other component documentation files, simplifying CLI command presentation and improving consistency across the documentation.
content/docs/components/switch.mdx (1)
17-17: Applied new CLI component for installation
Replaces the inline fenced code block with a self-closing<ComponentInstall.Cli>using thenpmCommandprop, standardizing this doc with other component pages.content/docs/components/menu.mdx (1)
17-17: Standardize CLI install snippet
Uses the new<ComponentInstall.Cli>component withnpmCommandto consolidate the full install command into one prop, matching the updated documentation pattern.content/docs/components/checkbox.mdx (1)
17-17: Update CLI installation tonpmCommandprop
Simplifies the shell snippet by moving it into thenpmCommandattribute of<ComponentInstall.Cli>, keeping consistency across docs.content/docs/components/popover.mdx (1)
12-13: Simplify Popover install block
Converts the fenced CLI snippet into a self-closing<ComponentInstall.Cli npmCommand="…"/>and leaves the Manual section unchanged—consistent with the new multi-PM UI.components/MDX.tsx (1)
11-11: ExposeCliCommandin MDX components
Imports and registers the newCliCommandalongsideComponentInstallso that MDX files can leverage the multi-package‐manager CLI UI.Also applies to: 106-106
content/docs/components/button.mdx (1)
14-14: Consistent Usage of Self-Closing CLI ComponentReplacing the multiline code block with the self-closing
<ComponentInstall.Cli npmCommand="…"/>streamlines the documentation and correctly leverages the new interactive CLI component for multi-PM support.content/docs/components/radio.mdx (1)
17-17: Streamlined CLI Installation CommandThe single-line
<ComponentInstall.Cli npmCommand="…"/>is correctly used here, aligning with the updated tabbed interface and copy-to-clipboard functionality.content/docs/components/accordion.mdx (1)
17-17: Simplified ComponentInstall.Cli UsageGood update—using the
npmCommandprop in a self-closing tag cleanly replaces the old fenced code block and works with the new CLI command tabs.content/docs/components/avatar.mdx (1)
12-12: Adopted New Self-Closing CLI PatternThe change to
<ComponentInstall.Cli npmCommand="…"/>is correct and maintains consistency with other component docs using the enhanced CLI component.content/docs/components/badge.mdx (1)
12-12: Updated to Self-Closing CLI ComponentThis single-line usage of
npmCommandsimplifies the docs and fully utilizes the updated interactive CLI component across package managers.content/docs/components/progress.mdx (1)
17-17: Replace inline code block with self-closing CLI command
The<ComponentInstall.Cli>tag correctly uses the newnpmCommandprop to consolidate the install step into a single attribute, leveraging the updated multi-PM tabbed interface and copy-to-clipboard support.content/docs/components/card.mdx (1)
14-14: Streamlined CLI installation with single prop
Switching to a self-closing<ComponentInstall.Cli npmCommand="…"/>simplifies the MDX and aligns with the enhanced CLI component API for multiple package managers.content/docs/components/select.mdx (1)
17-17: Unified CLI command presentation
Good conversion to<ComponentInstall.Cli npmCommand="…"/>, ensuring consistent, interactive install instructions across npm, yarn, pnpm, and bun.content/docs/components/input.mdx (1)
14-14: Consistent CLI command refactor
Embedding the install command in thenpmCommandprop cleans up the code and leverages the new CLI component’s multi-PM tabs and clipboard functionality.content/docs/components/label.mdx (1)
13-13: Simplified CLI usage via prop
The self-closing<ComponentInstall.Cli npmCommand="…"/>refactors out the fenced block and correctly uses the updated CLI component interface.content/docs/components/text.mdx (1)
33-33: Streamlined CLI Installation
Using a self-closing<ComponentInstall.Cli>with thenpmCommandprop improves readability and ensures consistency across component docs.content/docs/install/vite.mdx (6)
11-11: Wrap project creation command in<CliCommand>
Thenpm create vite@latestcommand is now encapsulated by the interactive<CliCommand>component for a unified, multi-PM presentation.
19-19: Use<CliCommand>for Tailwind installation
Embeddingnpm install tailwindcss @tailwindcss/vitein<CliCommand>enhances the copy-to-clipboard UX and aligns with the new CLI interface.
81-81: Convert dev-dependency install to<CliCommand>
Wrappingnpm install -D @types/nodein<CliCommand>supports pnpm, yarn, and bun tabs.
106-106: Encapsulate Shadcn init in<CliCommand>
Thenpx shadcn@latest initstep now leverages the interactive CLI component for consistency.
219-219: Simplify component add command
Thenpx shadcn@latest add 'https://retroui.dev/r/button.json'invocation is now a prop on<ComponentInstall.Cli>, matching the updated pattern.
223-223: Refactor install dependencies command
Movingnpm install class-variance-authorityinto<CliCommand>streamlines the manual install instructions.content/docs/components/toggle-group.mdx (2)
12-12: Adopt<ComponentInstall.Cli>for component addition
The toggle-group JSON install command is now a self-closing<ComponentInstall.Cli>withnpmCommand, aligning with the new docs standard.
13-13: The<ComponentInstall.Manual>opening tag indentation was adjusted but no functional changes occurred.content/docs/components/toggle.mdx (2)
12-12: Use<ComponentInstall.Cli>for toggle component install
Encapsulatingnpx shadcn@latest add 'https://retroui.dev/r/toggle.json'as a prop simplifies the JSX and matches the updated CLI component API.
13-13: The<ComponentInstall.Manual>tag was re-indented without content changes; no action needed.content/docs/components/tooltip.mdx (3)
15-15: Refactor tooltip CLI installation
Thenpx shadcn@latest add 'https://retroui.dev/r/tooltip.json'step is now a self-closing<ComponentInstall.Cli>withnpmCommand.
16-16: The<ComponentInstall.Manual>opening tag indentation changed; the manual instructions remain identical.
29-29: The closing</ComponentInstall.Manual>tag was re-indented; no functional impact.content/docs/components/breadcrumb.mdx (1)
12-12: LGTM! Clean refactoring to support enhanced CLI component.The change from embedding CLI commands in code blocks to using the
npmCommandprop is a good improvement that enables the new multi-package-manager interface with copy-to-clipboard functionality.content/docs/components/dialog.mdx (1)
17-17: LGTM! Consistent refactoring pattern.This change aligns with the broader refactoring effort to standardize CLI command presentation across documentation files using the enhanced
ComponentInstall.Clicomponent.content/docs/components/alert.mdx (1)
12-12: LGTM! Consistent implementation across documentation.The refactoring follows the same pattern as other documentation files, providing a consistent user experience across all component installation instructions.
contentlayer.config.ts (1)
82-82: LGTM! Plugin reordering looks good.Moving
rehypeSlugto the beginning of the plugins array is a good practice as slug generation should happen early in the processing pipeline.content/docs/install/nextjs.mdx (3)
11-11: LGTM! Great improvement to CLI command presentation.The new
<CliCommand>component provides a better user experience with multiple package manager options and copy-to-clipboard functionality.
19-19: LGTM! Consistent with the new CLI pattern.The utilities installation command follows the same improved pattern as the project initialization.
30-30: LGTM! ComponentInstall.Cli refactoring looks good.The new
npmCommandprop approach is cleaner than embedding shell code blocks as children.components/ComponentInstall.tsx (2)
29-83: LGTM! Excellent implementation of multi-package-manager CLI commands.The
CliCommandcomponent provides great UX improvements:
- Automatic command conversion between package managers
- Clean tabbed interface
- Proper handling of both
npxandnpmcommandsThe logic for converting commands is sound and covers the main package managers developers use.
85-106: LGTM! Clean integration with the existing TabPanel structure.The
ComponentInstallClicomponent maintains consistency with the existing component architecture while leveraging the newCliCommandfunctionality.
lib/rehype-npm-command.ts
Outdated
| if (node.children && node.children[0]?.value?.startsWith("npx")) { | ||
| console.log(node.children[0].value, "node.properties"); | ||
| } |
There was a problem hiding this comment.
Fix optional chaining and logging issues.
The code has several issues that should be addressed:
- Optional chaining: As flagged by static analysis, the logical AND check is redundant when using optional chaining
- Incorrect logging: The second parameter logs the string
"node.properties"instead of the actualnode.propertiesvalue
Apply this diff to fix the issues:
- if (node.children && node.children[0]?.value?.startsWith("npx")) {
- console.log(node.children[0].value, "node.properties");
+ if (node.children?.[0]?.value?.startsWith("npx")) {
+ console.log(node.children[0].value, node.properties);
}📝 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.
| if (node.children && node.children[0]?.value?.startsWith("npx")) { | |
| console.log(node.children[0].value, "node.properties"); | |
| } | |
| if (node.children?.[0]?.value?.startsWith("npx")) { | |
| console.log(node.children[0].value, node.properties); | |
| } |
🧰 Tools
🪛 Biome (1.9.4)
[error] 11-11: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
🤖 Prompt for AI Agents
In lib/rehype-npm-command.ts around lines 11 to 13, remove the redundant logical
AND check before optional chaining by relying solely on optional chaining to
verify node.children and its first child's value. Also, update the console.log
statement to log the actual node.properties object instead of the string
"node.properties" by passing node.properties as the second argument.
| const CopyableCommand = ({ command }: { command: string }) => { | ||
| const [copied, setCopied] = useState(false); | ||
|
|
||
| const copyToClipboard = async () => { | ||
| await navigator.clipboard.writeText(command); | ||
| setCopied(true); | ||
| setTimeout(() => setCopied(false), 2000); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="flex items-center justify-between gap-2 group"> | ||
| <code className="flex-1">{command}</code> | ||
| <Button size="sm" onClick={copyToClipboard} title="Copy to clipboard"> | ||
| {copied ? "Copied" : "Copy"} | ||
| </Button> | ||
| </div> | ||
| ); | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add error handling for clipboard operations.
The CopyableCommand component uses the clipboard API without error handling. The clipboard API may not be available in all browsers or non-HTTPS contexts.
const copyToClipboard = async () => {
- await navigator.clipboard.writeText(command);
- setCopied(true);
- setTimeout(() => setCopied(false), 2000);
+ try {
+ await navigator.clipboard.writeText(command);
+ setCopied(true);
+ setTimeout(() => setCopied(false), 2000);
+ } catch (error) {
+ // Fallback for environments where clipboard API is not available
+ console.warn('Failed to copy to clipboard:', error);
+ // Could implement a fallback method here
+ }
};📝 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 CopyableCommand = ({ command }: { command: string }) => { | |
| const [copied, setCopied] = useState(false); | |
| const copyToClipboard = async () => { | |
| await navigator.clipboard.writeText(command); | |
| setCopied(true); | |
| setTimeout(() => setCopied(false), 2000); | |
| }; | |
| return ( | |
| <div className="flex items-center justify-between gap-2 group"> | |
| <code className="flex-1">{command}</code> | |
| <Button size="sm" onClick={copyToClipboard} title="Copy to clipboard"> | |
| {copied ? "Copied" : "Copy"} | |
| </Button> | |
| </div> | |
| ); | |
| }; | |
| const CopyableCommand = ({ command }: { command: string }) => { | |
| const [copied, setCopied] = useState(false); | |
| const copyToClipboard = async () => { | |
| try { | |
| await navigator.clipboard.writeText(command); | |
| setCopied(true); | |
| setTimeout(() => setCopied(false), 2000); | |
| } catch (error) { | |
| // Fallback for environments where clipboard API is not available | |
| console.warn('Failed to copy to clipboard:', error); | |
| // Could implement a fallback method here | |
| } | |
| }; | |
| return ( | |
| <div className="flex items-center justify-between gap-2 group"> | |
| <code className="flex-1">{command}</code> | |
| <Button size="sm" onClick={copyToClipboard} title="Copy to clipboard"> | |
| {copied ? "Copied" : "Copy"} | |
| </Button> | |
| </div> | |
| ); | |
| }; |
🤖 Prompt for AI Agents
In components/ComponentInstall.tsx around lines 10 to 27, the clipboard API
usage in the copyToClipboard function lacks error handling, which can cause
issues if the API is unavailable or fails. Wrap the clipboard writeText call in
a try-catch block to catch any errors, and handle failures gracefully, such as
by logging the error or showing a fallback message. This ensures the component
behaves reliably across different browsers and contexts.
| const isNpx = npmCommand.includes("npx"); | ||
| if (isNpx) { | ||
| pnpmCommand = pnpmCommand ?? npmCommand.replace("npx", "pnpm dlx"); | ||
| yarnCommand = yarnCommand ?? npmCommand.replace("npx", "yarn"); | ||
| bunCommand = bunCommand ?? npmCommand.replace("npx", "bunx"); | ||
| } else { | ||
| pnpmCommand = pnpmCommand ?? npmCommand.replace("npm", "pnpm"); | ||
| yarnCommand = yarnCommand ?? npmCommand.replace("npm", "yarn"); | ||
| bunCommand = bunCommand ?? npmCommand.replace("npm", "bun"); | ||
| } |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Consider edge cases in command conversion logic.
The command conversion assumes simple string replacement will work. While this covers most cases, there might be edge cases where the replacement doesn't work as expected.
🏁 Script executed:
#!/bin/bash
# Description: Find CLI commands in documentation to verify conversion patterns work
# Expected: Check if there are any complex command patterns that might not convert properly
# Search for npmCommand usage patterns in documentation
rg 'npmCommand="[^"]*"' -oLength of output: 3221
Command conversion logic in ComponentInstall.tsx needs precision
The current .replace("npm","yarn") / .replace("npx","yarn") approach will generate invalid Yarn commands and may mis-handle other cases; for example:
npm install foo→yarn install foo
(should beyarn add foo)npm install -D foo→yarn install -D foo
(should beyarn add -D foo)npx shadcn@latest init→yarn shadcn@latest init
(should beyarn dlx shadcn@latest init)
To fix, update the logic in components/ComponentInstall.tsx (around lines 40–49):
- Match and replace prefixes via regex instead of a generic
.replace("npm","yarn")
• e.g.if (isNpx) { yarnCommand = yarnCommand ?? npmCommand.replace(/^npx\s+/, "yarn dlx "); // … } else { yarnCommand = yarnCommand ?? npmCommand.replace(/^npm install\s+/, "yarn add ") .replace(/^npm install -D\s+/, "yarn add -D "); // … }
- Ensure
pnpm&bunbranches remain correct but likewise only replace the leading command - Consider using
.replaceAllor chained regexes if multiple verbs need handling
Addresses:
- Yarn installs/adds
- Dev-flag syntax (
-D) - One-off CLI runs (
npx→yarn dlx)
🤖 Prompt for AI Agents
In components/ComponentInstall.tsx around lines 40 to 49, the current command
conversion uses simple string replacement which can produce invalid commands,
especially for yarn where "npm install" should become "yarn add" and "npx"
should become "yarn dlx". Fix this by replacing only the command prefixes using
regex patterns: for npx commands, replace the leading "npx " with "yarn dlx ";
for npm commands, replace "npm install " with "yarn add " and "npm install -D "
with "yarn add -D ". Apply similar prefix-only replacements for pnpm and bun
commands to ensure correctness without affecting other parts of the command
string.
Summary by CodeRabbit
New Features
Documentation
Style