feat: abstract api-client DI into ui package

Author: IMB11

apps/frontend/src/app.vue

@@ -6,12 +6,11 @@
 	</NuxtLayout>
 </template>
 <script setup lang="ts">
-import { NotificationPanel, provideNotificationManager } from '@modrinth/ui'
+import { NotificationPanel, provideModrinthClient, provideNotificationManager } from '@modrinth/ui'
 
 import ModrinthLoadingIndicator from '~/components/ui/modrinth-loading-indicator.ts'
-
-import { createModrinthClient, provideModrinthClient } from './providers/api-client.ts'
-import { FrontendNotificationManager } from './providers/frontend-notifications.ts'
+import { createModrinthClient } from '~/helpers/api.ts'
+import { FrontendNotificationManager } from '~/providers/frontend-notifications.ts'
 
 const auth = await useAuth()
 const config = useRuntimeConfig()

apps/frontend/src/error.vue

@@ -58,8 +58,9 @@ import { IntlFormatted } from '@vintl/vintl/components'
 
 import Logo404 from '~/assets/images/404.svg'
 
+import { provideModrinthClient } from '@modrinth/ui'
 import ModrinthLoadingIndicator from './components/ui/modrinth-loading-indicator.ts'
-import { createModrinthClient, provideModrinthClient } from './providers/api-client.ts'
+import { createModrinthClient } from './helpers/api.ts'
 import { FrontendNotificationManager } from './providers/frontend-notifications.ts'
 
 const auth = await useAuth()

apps/frontend/src/providers/api-client.ts renamed to apps/frontend/src/helpers/api.ts

@@ -1,12 +1,13 @@
-import type { AbstractFeature, AuthConfig, NuxtClientConfig } from '@modrinth/api-client'
 import {
+	AbstractFeature,
 	AuthFeature,
 	CircuitBreakerFeature,
 	NuxtCircuitBreakerStorage,
 	NuxtModrinthClient,
 	VerboseLoggingFeature,
+	type AuthConfig,
+	type NuxtClientConfig,
 } from '@modrinth/api-client'
-import { createContext } from '@modrinth/ui'
 
 export function createModrinthClient(
 	auth: { token: string | undefined },
@@ -35,8 +36,3 @@ export function createModrinthClient(
 
 	return new NuxtModrinthClient(clientConfig)
 }
-
-export const [injectModrinthClient, provideModrinthClient] = createContext<NuxtModrinthClient>(
-	'root',
-	'modrinthClient',
-)

apps/frontend/src/pages/[type]/[id]/settings/environment.vue

@@ -3,6 +3,7 @@ import { CheckIcon } from '@modrinth/assets'
 import {
 	Admonition,
 	commonProjectSettingsMessages,
+	injectModrinthClient,
 	injectNotificationManager,
 	injectProjectPageContext,
 	ProjectSettingsEnvSelector,
@@ -11,8 +12,6 @@ import {
 } from '@modrinth/ui'
 import { defineMessages, useVIntl } from '@vintl/vintl'
 
-import { injectModrinthClient } from '~/providers/api-client.ts'
-
 const { formatMessage } = useVIntl()
 
 const { currentMember, projectV2, projectV3, refreshProject } = injectProjectPageContext()

apps/frontend/src/pages/[type]/[id]/settings/general.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import {
 	IconSelect,
+	injectModrinthClient,
 	injectNotificationManager,
 	injectProjectPageContext,
 	SettingsLabel,
@@ -9,8 +10,6 @@ import {
 } from '@modrinth/ui'
 import { defineMessages, type MessageDescriptor, useVIntl } from '@vintl/vintl'
 
-import { injectModrinthClient } from '~/providers/api-client.ts'
-
 const { formatMessage } = useVIntl()
 
 const { projectV2: project, refreshProject } = injectProjectPageContext()

packages/ui/package.json

@@ -28,6 +28,7 @@
 		"@codemirror/view": "^6.22.1",
 		"@modrinth/assets": "workspace:*",
 		"@modrinth/utils": "workspace:*",
+		"@modrinth/api-client": "workspace:*",
 		"@tresjs/cientos": "^4.3.0",
 		"@tresjs/core": "^4.3.4",
 		"@tresjs/post-processing": "^2.4.0",

packages/ui/src/providers/api-client.ts

@@ -0,0 +1,7 @@
+import type { AbstractModrinthClient } from '@modrinth/api-client'
+import { createContext } from './index'
+
+export const [injectModrinthClient, provideModrinthClient] = createContext<AbstractModrinthClient>(
+	'root',
+	'modrinthClient',
+)

packages/ui/src/providers/index.ts

@@ -78,5 +78,6 @@ export function createContext<ContextValue>(
 	return [injectContext, provideContext] as const
 }
 
+export * from './api-client'
 export * from './project-page'
 export * from './web-notifications'