npmx.dev/app/composables/useSelectedPackageManager.ts at 454d4591c7018af47c2e74bf98773df9c0f3d91a · npmx-dev/npmx.dev · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/**
 * Composable for managing the selected package manager preference.
 *
 * This composable syncs the selected PM to both localStorage and the
 * `data-pm` attribute on `<html>`. The attribute enables CSS-based
 * visibility of PM-specific content without JavaScript.
 *
 */
export const useSelectedPackageManager = createSharedComposable(
  function useSelectedPackageManager() {
    const pm = useLocalStorage<PackageManagerId>('npmx-pm', 'npm')

    // 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(({ id }) => id === queryPM)) {
        pm.value = queryPM as PackageManagerId
      }
      // Watch for changes and update the attribute
      watch(
        pm,
        newPM => {
          document.documentElement.dataset.pm = newPM
        },
        { immediate: true },
      )
    }

    return pm
  },
)