fixes huntabyte#1474

sites/docs/src/content/installation/sveltekit.md

@@ -5,7 +5,7 @@ description: How to setup shadcn-svelte in a SvelteKit project.
 
 <script>
   import { Alert, AlertDescription } from "$lib/registry/new-york/ui/alert";
-  import { Steps, PMCreate, PMExecute, PMInstall, PMAddComp } from "$lib/components/docs";
+  import { Steps, PMCreate, PMExecute, PMInstall, PMAddComp, PMRun } from "$lib/components/docs";
 </script>
 
 ## Setup your project
@@ -46,9 +46,7 @@ const config = {
 
 If you setup a custom path alias you will need to run the dev server at least once to fix your `tsconfig.json` / `jsconfig.json`.
 
-```bash
-npx
-```
+<PMRun command="dev"/>
 
 ### Run the CLI
 

sites/docs/src/lib/components/docs/copy-button.svelte

@@ -4,7 +4,8 @@
 	import ChevronsUpDown from "lucide-svelte/icons/chevrons-up-down";
 	import { tick } from "svelte";
 	import { cn } from "$lib/utils.js";
-	import { getPackageManager, packageManagers } from "$lib/stores/package-manager.js";
+	import { getPackageManager } from "$lib/stores/package-manager.js";
+	import { AGENTS } from "package-manager-detector";
 	import { Button, type ButtonProps } from "$lib/registry/new-york/ui/button/index.js";
 	import * as DropdownMenu from "$lib/registry/new-york/ui/dropdown-menu/index.js";
 
@@ -51,7 +52,7 @@
 		</DropdownMenu.Trigger>
 
 		<DropdownMenu.Content align="end" preventScroll={false}>
-			{#each packageManagers as pm (pm)}
+			{#each AGENTS.filter((agent) => agent !== "pnpm@6" && agent !== "yarn@berry") as pm (pm)}
 				<DropdownMenu.Item
 					onclick={() => {
 						selectedPackageManager.set(pm);

sites/docs/src/lib/components/docs/index.ts

@@ -9,6 +9,7 @@ export { default as PMAddComp } from "./pm-add-comp.svelte";
 export { default as PMCreate } from "./pm-create.svelte";
 export { default as PMInstall } from "./pm-install.svelte";
 export { default as PMRemove } from "./pm-remove.svelte";
+export { default as PMRun } from "./pm-run.svelte";
 export { default as InstallTabs } from "./install-tabs.svelte";
 
 export * from "./page-header/index.js";

sites/docs/src/lib/components/docs/pm-block.svelte

@@ -1,62 +1,53 @@
 <script lang="ts">
 	import Pre from "./markdown/pre.svelte";
+	import { getPackageManager } from "$lib/stores/package-manager.js";
 	import {
-		type PackageManager,
-		getPackageManager,
-	} from "$lib/stores/package-manager.js";
+		resolveCommand,
+		type Agent,
+		type Command,
+		type ResolvedCommand,
+	} from "package-manager-detector";
 
-	type PMBlockType = "execute" | "create" | "install" | "remove";
+	type Props = {
+		type: Command | "create";
+		command: string | string[];
+	};
 
-	export let type: PMBlockType;
-	export let command: string = "";
+	const { type, command }: Props = $props();
 
 	const selectedPackageManager = getPackageManager();
 
-	function getCmd(type: PMBlockType, pm: PackageManager) {
-		if (type === "execute") return getPackageManagerScriptCmd(pm);
-		return pm;
-	}
+	function getCmd(pm: Agent, type: Props["type"]): ResolvedCommand {
+		// ssr
+		if (pm === undefined) pm = "npm";
 
-	function getInstallCommand() {
-		if (command === "") return "install";
-		return getPackageManagerInstallCmd($selectedPackageManager);
-	}
+		let args = [];
+		if (typeof command === "string") {
+			args = command.split(" ");
+		} else {
+			args = command;
+		}
 
-	function getUninstallCommand() {
-		if (command === "") return "uninstall";
-		return getPackageManagerUninstallCmd($selectedPackageManager);
-	}
+		// special handling for create
+		if (type === "create") return { command: pm, args: ["create", ...args] };
 
-	let cmdStart = getCmd(type, $selectedPackageManager);
+		const cmd = resolveCommand(pm, type, args);
+
+		// since docs are static any unresolved command is a code error
+		if (cmd === null) throw new Error("Could not resolve command!");
+
+		return cmd;
+	}
 
-	$: cmdStart = getCmd(type, $selectedPackageManager);
+	let resolvedCommand = $derived(getCmd($selectedPackageManager, type));
 </script>
 
 <figure data-rehype-pretty-code-figure>
 	<Pre isPackageManagerBlock={true} tabindex={0} data-language="bash" data-theme="github-dark">
 		<code data-language="bash" data-theme="github-dark" style="display: grid;">
 			<span data-line>
-				<span style="color:#B392F0;font-weight:bold">{`${cmdStart}`}</span>
-				{#if type === "install" || type === "create" || type == "remove"}
-					<span style="color:#9ECBFF">
-						{#if type === "install"}
-							{`${getInstallCommand()} `}
-						{:else if type == "create"}
-							{"create "}
-						{:else if type == "remove"}
-							{`${getUninstallCommand()} `}
-						{/if}
-					</span>
-				{/if}
-				{#if command !== ""}
-					{#each command.split(" ") as word, i}
-						{#if i === 0}
-							<span style="color:#9ECBFF; margin-left:-8px">{`${word}`}</span>
-						{:else}
-							<span style="color:#9ECBFF">{` ${word}`}</span>
-						{/if}
-					{/each}
-				{/if}
+				<span style="color:#B392F0;font-weight:bold">{resolvedCommand.command}</span>
+				<span style="color:#9ECBFF">{resolvedCommand.args.join(" ")}</span>
 			</span>
 		</code>
 	</Pre>

sites/docs/src/lib/components/docs/pm-remove.svelte

@@ -3,4 +3,4 @@
 	export let command: string;
 </script>
 
-<PMBlock type="remove" {command} />
+<PMBlock type="uninstall" {command} />

sites/docs/src/lib/components/docs/pm-run.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+	import PMBlock from "./pm-block.svelte";
+	export let command: string;
+</script>
+
+<PMBlock type="run" {command} />

sites/docs/src/lib/stores/package-manager.ts

@@ -1,9 +1,10 @@
 import { getContext, setContext } from "svelte";
 import { persisted } from "svelte-persisted-store";
+import type { Agent } from "package-manager-detector";
 
 const PACKAGE_MANAGER = Symbol("packageManager");
 
-export function setPackageManager(initialValue: PackageManager = "npm") {
+export function setPackageManager(initialValue: Agent) {
 	const packageManager = createPackageManagerStore("packageManager", initialValue);
 	setContext(PACKAGE_MANAGER, packageManager);
 	return packageManager;
@@ -13,48 +14,7 @@ export function getPackageManager(): ReturnType<typeof setPackageManager> {
 	return getContext(PACKAGE_MANAGER);
 }
 
-function createPackageManagerStore(key: string, initialValue: PackageManager) {
+function createPackageManagerStore(key: string, initialValue: Agent) {
 	const store = persisted(key, initialValue);
 	return store;
 }
-
-export const packageManagers = ["pnpm", "bun", "yarn", "npm"] as const;
-export type PackageManager = (typeof packageManagers)[number];
-
-const packageManagerToScriptCmd: Record<PackageManager, string> = {
-	npm: "npx",
-	yarn: "yarn dlx",
-	pnpm: "pnpm dlx",
-	bun: "bunx",
-};
-
-export function getPackageManagerScriptCmd(pm: PackageManager): string {
-	return packageManagerToScriptCmd[pm];
-}
-
-const packageManagerToInstallCmd: Record<PackageManager, string> = {
-	npm: "install",
-	yarn: "add",
-	pnpm: "add",
-	bun: "add",
-};
-
-export function getPackageManagerInstallCmd(pm: PackageManager): string {
-	return packageManagerToInstallCmd[pm];
-}
-
-const packageManagerToUninstallCmd: Record<PackageManager, string> = {
-	npm: "uninstall",
-	yarn: "remove",
-	pnpm: "remove",
-	bun: "remove",
-};
-
-export function getPackageManagerUninstallCmd(pm: PackageManager): string {
-	return packageManagerToUninstallCmd[pm];
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function isPackageManager(value: any): value is PackageManager {
-	return packageManagers.includes(value);
-}