feat: suggest installing dependency as devDependency when appropriate

Closes #530

Author: wojtekmaj

app/components/Terminal/Install.vue

@@ -7,6 +7,7 @@ const props = defineProps<{
   requestedVersion?: string | null
   installVersionOverride?: string | null
   jsrInfo?: JsrPackageInfo | null
+  readmeHtml?: string | null
   typesPackageName?: string | null
   executableInfo?: { hasExecutable: boolean; primaryCommand?: string } | null
   createPackageInfo?: { packageName: string } | null
@@ -30,6 +31,20 @@ function getInstallPartsForPM(pmId: PackageManagerId) {
   })
 }
 
+const devDependencySuggestion = computed(() =>
+  getDevDependencySuggestion(props.packageName, props.readmeHtml),
+)
+
+function getDevInstallPartsForPM(pmId: PackageManagerId) {
+  return getInstallCommandParts({
+    packageName: props.packageName,
+    packageManager: pmId,
+    version: props.requestedVersion,
+    jsrInfo: props.jsrInfo,
+    dev: true,
+  })
+}
+
 // Generate run command parts for a specific package manager
 function getRunPartsForPM(pmId: PackageManagerId, command?: string) {
   return getRunCommandParts({
@@ -68,7 +83,7 @@ function getTypesInstallPartsForPM(pmId: PackageManagerId) {
   const pm = packageManagers.find(p => p.id === pmId)
   if (!pm) return []
 
-  const devFlag = pmId === 'bun' ? '-d' : '-D'
+  const devFlag = getDevDependencyFlag(pmId)
   const pkgSpec = pmId === 'deno' ? `npm:${props.typesPackageName}` : props.typesPackageName
 
   return [pm.label, pm.action, devFlag, pkgSpec]
@@ -95,6 +110,18 @@ const copyRunCommand = (command?: string) => copyRun(getFullRunCommand(command))
 
 const { copied: createCopied, copy: copyCreate } = useClipboard({ copiedDuring: 2000 })
 const copyCreateCommand = () => copyCreate(getFullCreateCommand())
+
+const { copied: devInstallCopied, copy: copyDevInstall } = useClipboard({ copiedDuring: 2000 })
+const copyDevInstallCommand = () =>
+  copyDevInstall(
+    getInstallCommand({
+      packageName: props.packageName,
+      packageManager: selectedPM.value,
+      version: props.requestedVersion,
+      jsrInfo: props.jsrInfo,
+      dev: true,
+    }),
+  )
 </script>
 
 <template>
@@ -133,6 +160,41 @@ const copyCreateCommand = () => copyCreate(getFullCreateCommand())
           </button>
         </div>
 
+        <!-- Suggested dev dependency install command -->
+        <template v-if="devDependencySuggestion.recommended">
+          <div class="flex items-center gap-2 pt-1 select-none">
+            <span class="text-fg-subtle font-mono text-sm"
+              ># {{ $t('package.get_started.dev_dependency_hint') }}</span
+            >
+          </div>
+          <div
+            v-for="pm in packageManagers"
+            :key="`install-dev-${pm.id}`"
+            :data-pm-cmd="pm.id"
+            class="flex items-center gap-2 group/devinstallcmd min-w-0"
+          >
+            <span class="text-fg-subtle font-mono text-sm select-none shrink-0">$</span>
+            <code class="font-mono text-sm min-w-0"
+              ><span
+                v-for="(part, i) in getDevInstallPartsForPM(pm.id)"
+                :key="i"
+                :class="i === 0 ? 'text-fg' : 'text-fg-muted'"
+                >{{ i > 0 ? ' ' : '' }}{{ part }}</span
+              ></code
+            >
+            <button
+              type="button"
+              class="px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/devinstallcmd:opacity-100 hover:(text-fg border-border-hover) active:scale-95 focus-visible:opacity-100 focus-visible:outline-accent/70 select-none"
+              :aria-label="$t('package.get_started.copy_dev_command')"
+              @click.stop="copyDevInstallCommand"
+            >
+              <span aria-live="polite">{{
+                devInstallCopied ? $t('common.copied') : $t('common.copy')
+              }}</span>
+            </button>
+          </div>
+        </template>
+
         <!-- @types package install - render all PM variants when types package exists -->
         <template v-if="typesPackageName && showTypesInInstall">
           <div

app/pages/package/[[org]]/[name].vue

@@ -1234,6 +1234,7 @@ const showSkeleton = shallowRef(false)
             :requested-version="requestedVersion"
             :install-version-override="installVersionOverride"
             :jsr-info="jsrInfo"
+            :readme-html="readmeData?.html"
             :types-package-name="typesPackageName"
             :executable-info="executableInfo"
             :create-package-info="createPackageInfo"

app/utils/install-command.ts

@@ -68,6 +68,117 @@ export interface InstallCommandOptions {
   packageManager: PackageManagerId
   version?: string | null
   jsrInfo?: JsrPackageInfo | null
+  dev?: boolean
+}
+
+export type DevDependencySuggestionReason = 'known-package' | 'readme-hint'
+
+export interface DevDependencySuggestion {
+  recommended: boolean
+  reason?: DevDependencySuggestionReason
+}
+
+const KNOWN_DEV_DEPENDENCY_PACKAGES = new Set<string>([
+  '@types',
+  'biome',
+  'chai',
+  'eslint',
+  'esbuild',
+  'husky',
+  'jest',
+  'lint-staged',
+  'mocha',
+  'oxc',
+  'oxfmt',
+  'oxlint',
+  'playwright',
+  'prettier',
+  'rolldown',
+  'rollup',
+  'stylelint',
+  'ts-jest',
+  'ts-node',
+  'tsx',
+  'turbo',
+  'typescript',
+  'vite',
+  'vitest',
+  'webpack',
+])
+
+function isKnownDevDependencyPackage(packageName: string): boolean {
+  const normalized = packageName.toLowerCase()
+  if (normalized.startsWith('@types/')) {
+    return true
+  }
+  // Match scoped packages by name segment, e.g. @scope/eslint-config
+  const namePart = normalized.includes('/') ? normalized.split('/').pop() : normalized
+  if (!namePart) return false
+
+  return (
+    KNOWN_DEV_DEPENDENCY_PACKAGES.has(normalized) ||
+    KNOWN_DEV_DEPENDENCY_PACKAGES.has(namePart) ||
+    normalized.startsWith('@typescript-eslint/') ||
+    namePart.startsWith('eslint-') ||
+    namePart.startsWith('prettier-') ||
+    namePart.startsWith('vite-') ||
+    namePart.startsWith('webpack-') ||
+    namePart.startsWith('babel-')
+  )
+}
+
+function escapeRegExp(text: string): string {
+  return text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}
+
+function hasReadmeDevInstallHint(packageName: string, readmeHtml?: string | null): boolean {
+  if (!readmeHtml) return false
+
+  const escapedName = escapeRegExp(packageName)
+  const escapedNpmName = escapeRegExp(`npm:${packageName}`)
+  const packageSpec = `(?:${escapedName}|${escapedNpmName})(?:@[\\w.-]+)?`
+
+  const patterns = [
+    // npm install -D pkg / pnpm add --save-dev pkg
+    new RegExp(
+      String.raw`(?:npm|pnpm|yarn|bun|vlt)\s+(?:install|add|i)\s+(?:--save-dev|-d)\s+${packageSpec}`,
+      'i',
+    ),
+    // npm install pkg --save-dev / pnpm add pkg -D
+    new RegExp(
+      String.raw`(?:npm|pnpm|yarn|bun|vlt)\s+(?:install|add|i)\s+${packageSpec}\s+(?:--save-dev|-d)`,
+      'i',
+    ),
+    // deno add -D npm:pkg
+    new RegExp(String.raw`deno\s+add\s+(?:--dev|-d)\s+${packageSpec}`, 'i'),
+  ]
+
+  return patterns.some(pattern => pattern.test(readmeHtml))
+}
+
+export function getDevDependencySuggestion(
+  packageName: string,
+  readmeHtml?: string | null,
+): DevDependencySuggestion {
+  if (isKnownDevDependencyPackage(packageName)) {
+    return {
+      recommended: true,
+      reason: 'known-package',
+    }
+  }
+
+  if (hasReadmeDevInstallHint(packageName, readmeHtml)) {
+    return {
+      recommended: true,
+      reason: 'readme-hint',
+    }
+  }
+
+  return { recommended: false }
+}
+
+export function getDevDependencyFlag(packageManager: PackageManagerId): '-D' | '-d' {
+  return packageManager === 'bun' ? '-d' : '-D'
 }
 
 /**
@@ -108,8 +219,9 @@ export function getInstallCommandParts(options: InstallCommandOptions): string[]
 
   const spec = getPackageSpecifier(options)
   const version = options.version ? `@${options.version}` : ''
+  const devFlag = options.dev ? [getDevDependencyFlag(options.packageManager)] : []
 
-  return [pm.label, pm.action, `${spec}${version}`]
+  return [pm.label, pm.action, ...devFlag, `${spec}${version}`]
 }
 
 export interface ExecuteCommandOptions extends InstallCommandOptions {

i18n/locales/en.json

@@ -221,6 +221,8 @@
       "title": "Get started",
       "pm_label": "Package manager",
       "copy_command": "Copy install command",
+      "copy_dev_command": "Copy dev install command",
+      "dev_dependency_hint": "Usually installed as a dev dependency",
       "view_types": "View {package}"
     },
     "create": {

i18n/locales/pl-PL.json

@@ -221,6 +221,8 @@
       "title": "Zacznij",
       "pm_label": "Menedżer pakietów",
       "copy_command": "Kopiuj komendę instalacji",
+      "copy_dev_command": "Kopiuj komendę instalacji dla dev",
+      "dev_dependency_hint": "Zazwyczaj instalowane jako zależność deweloperska",
       "view_types": "Zobacz {package}"
     },
     "create": {

lunaria/files/en-GB.json

@@ -220,6 +220,8 @@
       "title": "Get started",
       "pm_label": "Package manager",
       "copy_command": "Copy install command",
+      "copy_dev_command": "Copy dev install command",
+      "dev_dependency_hint": "Usually installed as a dev dependency",
       "view_types": "View {package}"
     },
     "create": {

lunaria/files/en-US.json

@@ -220,6 +220,8 @@
       "title": "Get started",
       "pm_label": "Package manager",
       "copy_command": "Copy install command",
+      "copy_dev_command": "Copy dev install command",
+      "dev_dependency_hint": "Usually installed as a dev dependency",
       "view_types": "View {package}"
     },
     "create": {

lunaria/files/pl-PL.json

@@ -220,6 +220,8 @@
       "title": "Zacznij",
       "pm_label": "Menedżer pakietów",
       "copy_command": "Kopiuj komendę instalacji",
+      "copy_dev_command": "Kopiuj komendę instalacji dla dev",
+      "dev_dependency_hint": "Zazwyczaj instalowane jako zależność deweloperska",
       "view_types": "Zobacz {package}"
     },
     "create": {