feat: improve package manager detection on hydration

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

@@ -42,7 +42,7 @@ export function initPreferencesOnPrehydrate() {
     let pm = 'npm'
 
     // Support package manager preference in query string (for example, ?pm=pnpm)
-    const queryPM = new URLSearchParams(document.location.search).get('pm')
+    const queryPM = new URLSearchParams(window.location.search).get('pm')
     if (queryPM && validPMs.has(queryPM)) {
       pm = queryPM
       localStorage.setItem('npmx-pm', pm)