From 2569724ce8e5c032e1a700ebf58cd0b88fdac28c Mon Sep 17 00:00:00 2001
From: Nicola Krumschmidt <nicola.krumschmidt@freenet.de>
Date: Fri, 27 Aug 2021 17:18:39 +0200
Subject: [PATCH] Replace system provide with composables (#7668)

---
 app/src/app.vue                               | 19 ++++---------------
 app/src/composables/use-system.ts             |  9 +++++++++
 packages/extension-sdk/src/index.ts           |  2 +-
 packages/shared/src/composables/index.ts      |  1 +
 packages/shared/src/composables/use-system.ts | 19 +++++++++++++++++++
 packages/shared/src/constants/index.ts        |  1 +
 packages/shared/src/constants/injection.ts    |  2 ++
 7 files changed, 37 insertions(+), 16 deletions(-)
 create mode 100644 app/src/composables/use-system.ts
 create mode 100644 packages/shared/src/composables/use-system.ts
 create mode 100644 packages/shared/src/constants/injection.ts

diff --git a/app/src/app.vue b/app/src/app.vue
index 18e2b723d3..3d34c347d2 100644
--- a/app/src/app.vue
+++ b/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 };
 	},
diff --git a/app/src/composables/use-system.ts b/app/src/composables/use-system.ts
new file mode 100644
index 0000000000..6d3632938b
--- /dev/null
+++ b/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);
+}
diff --git a/packages/extension-sdk/src/index.ts b/packages/extension-sdk/src/index.ts
index 1ea9b62793..0c3111e8b3 100644
--- a/packages/extension-sdk/src/index.ts
+++ b/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';
diff --git a/packages/shared/src/composables/index.ts b/packages/shared/src/composables/index.ts
index 911c1c0e88..92bfa3a17e 100644
--- a/packages/shared/src/composables/index.ts
+++ b/packages/shared/src/composables/index.ts
@@ -1 +1,2 @@
 export * from './use-layout-state';
+export * from './use-system';
diff --git a/packages/shared/src/composables/use-system.ts b/packages/shared/src/composables/use-system.ts
new file mode 100644
index 0000000000..580e01f6a2
--- /dev/null
+++ b/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;
+}
diff --git a/packages/shared/src/constants/index.ts b/packages/shared/src/constants/index.ts
index fe095a517d..b43d52413a 100644
--- a/packages/shared/src/constants/index.ts
+++ b/packages/shared/src/constants/index.ts
@@ -1,3 +1,4 @@
 export * from './extensions';
 export * from './fields';
+export * from './injection';
 export * from './symbols';
diff --git a/packages/shared/src/constants/injection.ts b/packages/shared/src/constants/injection.ts
new file mode 100644
index 0000000000..ac9357dc53
--- /dev/null
+++ b/packages/shared/src/constants/injection.ts
@@ -0,0 +1,2 @@
+export const STORES_INJECT = 'stores';
+export const API_INJECT = 'api';