Replace system provide with composables (#7668)

app/src/app.vue

@@ -22,11 +22,10 @@
 
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
-import { defineComponent, toRefs, watch, computed, provide, onMounted, onUnmounted } from 'vue';
-import * as stores from '@/stores';
-import api, { addTokenToURL } from '@/api';
-import axios from 'axios';
+import { defineComponent, toRefs, watch, computed, onMounted, onUnmounted } from 'vue';
+import { useAppStore, useUserStore, useServerStore } from '@/stores';
 import { startIdleTracking, stopIdleTracking } from './idle';
+import useSystem from '@/composables/use-system';
 
 import useWindowSize from '@/composables/use-window-size';
 import setFavicon from '@/utils/set-favicon';
@@ -35,8 +34,6 @@ export default defineComponent({
 	setup() {
 		const { t } = useI18n();
 
-		const { useAppStore, useUserStore, useServerStore } = stores;
-
 		const appStore = useAppStore();
 		const userStore = useUserStore();
 		const serverStore = useServerStore();
@@ -106,15 +103,7 @@ export default defineComponent({
 
 		const error = computed(() => appStore.error);
 
-		/**
-		 * This allows custom extensions to use the apps internals
-		 */
-		provide('system', {
-			...stores,
-			api,
-			axios,
-			addTokenToURL,
-		});
+		useSystem();
 
 		return { t, hydrating, brandStyle, error, customCSS };
 	},

app/src/composables/use-system.ts

@@ -0,0 +1,9 @@
+import { provide } from 'vue';
+import api from '@/api';
+import * as stores from '@/stores';
+import { API_INJECT, STORES_INJECT } from '@directus/shared/constants';
+
+export default function useSystem(): void {
+	provide(STORES_INJECT, stores);
+	provide(API_INJECT, api);
+}

packages/extension-sdk/src/index.ts

@@ -6,4 +6,4 @@ export {
 	defineHook,
 	defineEndpoint,
 } from '@directus/shared/utils';
-export { useLayoutState } from '@directus/shared/composables';
+export { useLayoutState, useStores, useApi } from '@directus/shared/composables';

packages/shared/src/composables/index.ts

@@ -1 +1,2 @@
 export * from './use-layout-state';
+export * from './use-system';

packages/shared/src/composables/use-system.ts

@@ -0,0 +1,19 @@
+import { inject } from 'vue';
+import { AxiosInstance } from 'axios';
+import { API_INJECT, STORES_INJECT } from '../constants';
+
+export function useStores(): Record<string, any> {
+	const stores = inject<Record<string, any>>(STORES_INJECT);
+
+	if (!stores) throw new Error('[useStores]: This function has to be used inside a Directus extension.');
+
+	return stores;
+}
+
+export function useApi(): AxiosInstance {
+	const api = inject<AxiosInstance>(API_INJECT);
+
+	if (!api) throw new Error('[useApi]: This function has to be used inside a Directus extension.');
+
+	return api;
+}

packages/shared/src/constants/index.ts

@@ -1,3 +1,4 @@
 export * from './extensions';
 export * from './fields';
+export * from './injection';
 export * from './symbols';

packages/shared/src/constants/injection.ts

@@ -0,0 +1,2 @@
+export const STORES_INJECT = 'stores';
+export const API_INJECT = 'api';