feat(npm): extract NpmClient to shared React context

packages/npm/src/NpmClientContext.tsx

@@ -0,0 +1,14 @@
+import { createContext, useContext, useMemo } from 'react';
+import { NpmClient } from 'npmjs-api-client';
+
+const NpmClientContext = createContext<NpmClient | null>(null);
+
+export function NpmClientProvider({ children }: { children: React.ReactNode }) {
+  const client = useMemo(() => new NpmClient(), []);
+  return <NpmClientContext value={client}>{children}</NpmClientContext>;
+}
+
+export function useNpmClient(): NpmClient {
+  const client = useContext(NpmClientContext);
+  return client ?? new NpmClient();
+}

packages/npm/src/hooks/useNpmMaintainer.ts

@@ -1,7 +1,8 @@
-import { useMemo } from 'react';
+
 import { useQuery, type UseQueryResult } from '@tanstack/react-query';
-import { NpmClient, type NpmUser } from 'npmjs-api-client';
+import { type NpmUser } from 'npmjs-api-client';
 import { npmQueryKeys } from '../keys/npmQueryKeys.js';
+import { useNpmClient } from '../NpmClientContext.js';
 
 export interface UseNpmMaintainerOptions {
   enabled?: boolean;
@@ -12,7 +13,7 @@ export function useNpmMaintainer(
   options: UseNpmMaintainerOptions = {}
 ): UseQueryResult<NpmUser, Error> {
   const { enabled = true } = options;
-  const client = useMemo(() => new NpmClient(), []);
+  const client = useNpmClient();
 
   return useQuery<NpmUser, Error>({
     queryKey: npmQueryKeys.maintainer(username),

packages/npm/src/hooks/useNpmMaintainerPackages.ts

@@ -1,7 +1,8 @@
-import { useMemo } from 'react';
+
 import { useQuery, type UseQueryResult } from '@tanstack/react-query';
-import { NpmClient, type NpmSearchResult, type MaintainerPackagesParams } from 'npmjs-api-client';
+import { type NpmSearchResult, type MaintainerPackagesParams } from 'npmjs-api-client';
 import { npmQueryKeys } from '../keys/npmQueryKeys.js';
+import { useNpmClient } from '../NpmClientContext.js';
 
 export interface UseNpmMaintainerPackagesOptions extends MaintainerPackagesParams {
   enabled?: boolean;
@@ -12,7 +13,7 @@ export function useNpmMaintainerPackages(
   options: UseNpmMaintainerPackagesOptions = {}
 ): UseQueryResult<NpmSearchResult, Error> {
   const { enabled = true, ...params } = options;
-  const client = useMemo(() => new NpmClient(), []);
+  const client = useNpmClient();
 
   const queryParams = Object.keys(params).length > 0 ? params : undefined;
 

packages/npm/src/hooks/useNpmPackage.ts

@@ -1,6 +1,6 @@
-import { useMemo } from 'react';
 import { useQuery, type UseQueryResult } from '@tanstack/react-query';
-import { NpmClient, type NpmPackument } from 'npmjs-api-client';
+import { type NpmPackument } from 'npmjs-api-client';
+import { useNpmClient } from '../NpmClientContext.js';
 import { npmQueryKeys } from '../keys/npmQueryKeys.js';
 
 export interface UseNpmPackageOptions {
@@ -12,7 +12,7 @@ export function useNpmPackage(
   options: UseNpmPackageOptions = {}
 ): UseQueryResult<NpmPackument, Error> {
   const { enabled = true } = options;
-  const client = useMemo(() => new NpmClient(), []);
+  const client = useNpmClient();
 
   return useQuery<NpmPackument, Error>({
     queryKey: npmQueryKeys.package(name),

packages/npm/src/hooks/useNpmPackageDistTags.ts

@@ -1,7 +1,8 @@
-import { useMemo } from 'react';
+
 import { useQuery, type UseQueryResult } from '@tanstack/react-query';
-import { NpmClient, type NpmDistTags } from 'npmjs-api-client';
+import { type NpmDistTags } from 'npmjs-api-client';
 import { npmQueryKeys } from '../keys/npmQueryKeys.js';
+import { useNpmClient } from '../NpmClientContext.js';
 
 export interface UseNpmPackageDistTagsOptions {
   enabled?: boolean;
@@ -12,7 +13,7 @@ export function useNpmPackageDistTags(
   options: UseNpmPackageDistTagsOptions = {}
 ): UseQueryResult<NpmDistTags, Error> {
   const { enabled = true } = options;
-  const client = useMemo(() => new NpmClient(), []);
+  const client = useNpmClient();
 
   return useQuery<NpmDistTags, Error>({
     queryKey: npmQueryKeys.packageDistTags(name),

packages/npm/src/hooks/useNpmPackageDownloadRange.ts

@@ -1,7 +1,8 @@
-import { useMemo } from 'react';
+
 import { useQuery, type UseQueryResult } from '@tanstack/react-query';
-import { NpmClient, type NpmDownloadRange, type NpmDownloadPeriod } from 'npmjs-api-client';
+import { type NpmDownloadRange, type NpmDownloadPeriod } from 'npmjs-api-client';
 import { npmQueryKeys } from '../keys/npmQueryKeys.js';
+import { useNpmClient } from '../NpmClientContext.js';
 
 export interface UseNpmPackageDownloadRangeOptions {
   period?: NpmDownloadPeriod;
@@ -13,7 +14,7 @@ export function useNpmPackageDownloadRange(
   options: UseNpmPackageDownloadRangeOptions = {}
 ): UseQueryResult<NpmDownloadRange, Error> {
   const { period = 'last-month', enabled = true } = options;
-  const client = useMemo(() => new NpmClient(), []);
+  const client = useNpmClient();
 
   return useQuery<NpmDownloadRange, Error>({
     queryKey: npmQueryKeys.packageDownloadRange(name, period),

packages/npm/src/hooks/useNpmPackageDownloads.ts

@@ -1,7 +1,8 @@
-import { useMemo } from 'react';
+
 import { useQuery, type UseQueryResult } from '@tanstack/react-query';
-import { NpmClient, type NpmDownloadPoint, type NpmDownloadPeriod } from 'npmjs-api-client';
+import { type NpmDownloadPoint, type NpmDownloadPeriod } from 'npmjs-api-client';
 import { npmQueryKeys } from '../keys/npmQueryKeys.js';
+import { useNpmClient } from '../NpmClientContext.js';
 
 export interface UseNpmPackageDownloadsOptions {
   period?: NpmDownloadPeriod;
@@ -13,7 +14,7 @@ export function useNpmPackageDownloads(
   options: UseNpmPackageDownloadsOptions = {}
 ): UseQueryResult<NpmDownloadPoint, Error> {
   const { period = 'last-month', enabled = true } = options;
-  const client = useMemo(() => new NpmClient(), []);
+  const client = useNpmClient();
 
   return useQuery<NpmDownloadPoint, Error>({
     queryKey: npmQueryKeys.packageDownloads(name, period),

packages/npm/src/hooks/useNpmPackageLatest.ts

@@ -1,6 +1,7 @@
-import { useMemo } from 'react';
+
 import { useQuery, type UseQueryResult } from '@tanstack/react-query';
-import { NpmClient, type NpmPackageVersion } from 'npmjs-api-client';
+import { type NpmPackageVersion } from 'npmjs-api-client';
+import { useNpmClient } from '../NpmClientContext.js';
 import { npmQueryKeys } from '../keys/npmQueryKeys.js';
 
 export interface UseNpmPackageLatestOptions {
@@ -12,7 +13,7 @@ export function useNpmPackageLatest(
   options: UseNpmPackageLatestOptions = {}
 ): UseQueryResult<NpmPackageVersion, Error> {
   const { enabled = true } = options;
-  const client = useMemo(() => new NpmClient(), []);
+  const client = useNpmClient();
 
   return useQuery<NpmPackageVersion, Error>({
     queryKey: npmQueryKeys.packageVersion(name, 'latest'),

packages/npm/src/hooks/useNpmPackageMaintainers.ts

@@ -1,7 +1,8 @@
-import { useMemo } from 'react';
+
 import { useQuery, type UseQueryResult } from '@tanstack/react-query';
-import { NpmClient, type NpmPerson } from 'npmjs-api-client';
+import { type NpmPerson } from 'npmjs-api-client';
 import { npmQueryKeys } from '../keys/npmQueryKeys.js';
+import { useNpmClient } from '../NpmClientContext.js';
 
 export interface UseNpmPackageMaintainersOptions {
   enabled?: boolean;
@@ -12,7 +13,7 @@ export function useNpmPackageMaintainers(
   options: UseNpmPackageMaintainersOptions = {}
 ): UseQueryResult<NpmPerson[], Error> {
   const { enabled = true } = options;
-  const client = useMemo(() => new NpmClient(), []);
+  const client = useNpmClient();
 
   return useQuery<NpmPerson[], Error>({
     queryKey: npmQueryKeys.packageMaintainers(name),

packages/npm/src/hooks/useNpmPackageVersion.ts

@@ -1,7 +1,8 @@
-import { useMemo } from 'react';
+
 import { useQuery, type UseQueryResult } from '@tanstack/react-query';
-import { NpmClient, type NpmPackageVersion } from 'npmjs-api-client';
+import { type NpmPackageVersion } from 'npmjs-api-client';
 import { npmQueryKeys } from '../keys/npmQueryKeys.js';
+import { useNpmClient } from '../NpmClientContext.js';
 
 export interface UseNpmPackageVersionOptions {
   enabled?: boolean;
@@ -13,7 +14,7 @@ export function useNpmPackageVersion(
   options: UseNpmPackageVersionOptions = {}
 ): UseQueryResult<NpmPackageVersion, Error> {
   const { enabled = true } = options;
-  const client = useMemo(() => new NpmClient(), []);
+  const client = useNpmClient();
 
   return useQuery<NpmPackageVersion, Error>({
     queryKey: npmQueryKeys.packageVersion(name, version),

packages/npm/src/hooks/useNpmPackageVersions.ts

@@ -1,7 +1,8 @@
-import { useMemo } from 'react';
+
 import { useQuery, type UseQueryResult } from '@tanstack/react-query';
-import { NpmClient, type NpmPackageVersion } from 'npmjs-api-client';
+import { type NpmPackageVersion } from 'npmjs-api-client';
 import { npmQueryKeys } from '../keys/npmQueryKeys.js';
+import { useNpmClient } from '../NpmClientContext.js';
 
 export interface UseNpmPackageVersionsOptions {
   enabled?: boolean;
@@ -12,7 +13,7 @@ export function useNpmPackageVersions(
   options: UseNpmPackageVersionsOptions = {}
 ): UseQueryResult<NpmPackageVersion[], Error> {
   const { enabled = true } = options;
-  const client = useMemo(() => new NpmClient(), []);
+  const client = useNpmClient();
 
   return useQuery<NpmPackageVersion[], Error>({
     queryKey: npmQueryKeys.packageVersions(name),

packages/npm/src/hooks/useNpmSearch.ts

@@ -1,7 +1,8 @@
-import { useMemo } from 'react';
+
 import { useQuery, type UseQueryResult } from '@tanstack/react-query';
-import { NpmClient, type NpmSearchResult, type NpmSearchParams } from 'npmjs-api-client';
+import { type NpmSearchResult, type NpmSearchParams } from 'npmjs-api-client';
 import { npmQueryKeys } from '../keys/npmQueryKeys.js';
+import { useNpmClient } from '../NpmClientContext.js';
 
 export interface UseNpmSearchOptions extends Omit<NpmSearchParams, 'text'> {
   enabled?: boolean;
@@ -12,7 +13,7 @@ export function useNpmSearch(
   options: UseNpmSearchOptions = {}
 ): UseQueryResult<NpmSearchResult, Error> {
   const { enabled = true, ...rest } = options;
-  const client = useMemo(() => new NpmClient(), []);
+  const client = useNpmClient();
 
   const params: NpmSearchParams = { text, ...rest };
 

packages/npm/src/index.ts

@@ -3,6 +3,7 @@
 // - npmjs-api-client (https://www.npmjs.com/package/npmjs-api-client)
 // - @tanstack/react-query
 
+export * from './NpmClientContext.js';
 export * from './hooks/useNpmPackage.js';
 export * from './hooks/useNpmPackageVersion.js';
 export * from './hooks/useNpmPackageLatest.js';