feat: prefill package manager from query param (#2520)

Author: alexdln

app/composables/useSelectedPackageManager.ts

@@ -12,6 +12,10 @@ export const useSelectedPackageManager = createSharedComposable(
 
     // Sync to data-pm attribute on the client
     if (import.meta.client) {
+      const queryPM = new URLSearchParams(window.location.search).get('pm')
+      if (queryPM && packageManagers.some(pm => pm.id === queryPM)) {
+        pm.value = queryPM as PackageManagerId
+      }
       // Watch for changes and update the attribute
       watch(
         pm,

app/utils/prehydrate.ts

@@ -39,20 +39,28 @@ export function initPreferencesOnPrehydrate() {
       document.documentElement.dataset.bgTheme = preferredBackgroundTheme
     }
 
-    // Read and apply package manager preference
-    const storedPM = localStorage.getItem('npmx-pm')
-    // Parse the stored value (it's stored as a JSON string by useLocalStorage)
     let pm = 'npm'
-    if (storedPM) {
-      try {
-        const parsed = JSON.parse(storedPM)
-        if (validPMs.has(parsed)) {
-          pm = parsed
-        }
-      } catch {
-        // If parsing fails, check if it's a plain string (legacy format)
-        if (validPMs.has(storedPM)) {
-          pm = storedPM
+
+    // Support package manager preference in query string (for example, ?pm=pnpm)
+    const queryPM = new URLSearchParams(window.location.search).get('pm')
+    if (queryPM && validPMs.has(queryPM)) {
+      pm = queryPM
+      localStorage.setItem('npmx-pm', pm)
+    } else {
+      // Read and apply package manager preference
+      const storedPM = localStorage.getItem('npmx-pm')
+      // Parse the stored value (it's stored as a JSON string by useLocalStorage)
+      if (storedPM) {
+        try {
+          const parsed = JSON.parse(storedPM)
+          if (validPMs.has(parsed)) {
+            pm = parsed
+          }
+        } catch {
+          // If parsing fails, check if it's a plain string (legacy format)
+          if (validPMs.has(storedPM)) {
+            pm = storedPM
+          }
         }
       }
     }