docs(www): add bun support for installation commands (#1445)

* feat(www): add bun support for commands * chore: remove changeset --------- Co-authored-by: shadcn <[email protected]>
shadcn-ui · Sep 21, 2023 · 4f8d768 · 4f8d768 · vercel · Sep 21, 2023
1 parent c0deeac
commit 4f8d768
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 12 deletions.
diff --git a/apps/www/components/copy-button.tsx b/apps/www/components/copy-button.tsx
@@ -151,7 +151,7 @@ export function CopyNpmCommandButton({
   }, [hasCopied])
 
   const copyCommand = React.useCallback(
-    (value: string, pm: "npm" | "pnpm" | "yarn") => {
+    (value: string, pm: "npm" | "pnpm" | "yarn" | "bun") => {
       copyToClipboardWithMeta(value, {
         name: "copy_npm_command",
         properties: {
@@ -199,6 +199,11 @@ export function CopyNpmCommandButton({
         >
           pnpm
         </DropdownMenuItem>
+        <DropdownMenuItem
+          onClick={() => copyCommand(commands.__bunCommand__, "bun")}
+        >
+          bun
+        </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
   )

diff --git a/apps/www/components/mdx-components.tsx b/apps/www/components/mdx-components.tsx
@@ -170,8 +170,9 @@ const components = {
     className,
     __rawString__,
     __npmCommand__,
-    __pnpmCommand__,
     __yarnCommand__,
+    __pnpmCommand__,
+    __bunCommand__,
     __withMeta__,
     __src__,
     __event__,
@@ -201,16 +202,20 @@ const components = {
             className={cn("absolute right-4 top-4", __withMeta__ && "top-16")}
           />
         )}
-        {__npmCommand__ && __yarnCommand__ && __pnpmCommand__ && (
-          <CopyNpmCommandButton
-            commands={{
-              __npmCommand__,
-              __pnpmCommand__,
-              __yarnCommand__,
-            }}
-            className={cn("absolute right-4 top-4", __withMeta__ && "top-16")}
-          />
-        )}
+        {__npmCommand__ &&
+          __yarnCommand__ &&
+          __pnpmCommand__ &&
+          __bunCommand__ && (
+            <CopyNpmCommandButton
+              commands={{
+                __npmCommand__,
+                __yarnCommand__,
+                __pnpmCommand__,
+                __bunCommand__,
+              }}
+              className={cn("absolute right-4 top-4", __withMeta__ && "top-16")}
+            />
+          )}
       </StyleWrapper>
     )
   },

diff --git a/apps/www/lib/rehype-npm-command.ts b/apps/www/lib/rehype-npm-command.ts
@@ -20,6 +20,10 @@ export function rehypeNpmCommand() {
           "npm install",
           "pnpm add"
         )
+        node.properties["__bunCommand__"] = npmCommand.replace(
+          "npm install",
+          "bun add"
+        )
       }
 
       // npx create.
@@ -34,6 +38,7 @@ export function rehypeNpmCommand() {
           "npx create-",
           "pnpm create "
         )
+        node.properties["__bunCommand__"] = npmCommand.replace("npx", "bunx")
       }
 
       // npx.
@@ -48,6 +53,7 @@ export function rehypeNpmCommand() {
           "npx",
           "pnpm dlx"
         )
+        node.properties["__bunCommand__"] = npmCommand.replace("npx", "bunx")
       }
     })
   }

diff --git a/apps/www/types/unist.ts b/apps/www/types/unist.ts
@@ -27,4 +27,5 @@ export interface NpmCommands {
   __npmCommand__?: string
   __yarnCommand__?: string
   __pnpmCommand__?: string
+  __bunCommand__?: string
 }