From 7bf90efa6243f60fa4128a82540f2995df2ce9f5 Mon Sep 17 00:00:00 2001
From: Nicola Krumschmidt <nicola.krumschmidt@freenet.de>
Date: Wed, 16 Nov 2022 17:28:52 +0100
Subject: [PATCH] Add support for a package extension bundle type (#15672)

* Add bundle type to constants and types

* Add support for API bundle extensions

* Rename generateExtensionsEntry to generateExtensionsEntrypoint

* Add support for App bundle extensions

* Refactor App extension registration

* Replace extensions inject with useExtensions()

* Replace getInterfaces() with useExtensions()

* Replace getDisplays() with useExtensions()

* Replace getLayouts() with useExtensions()

* Replace getModules() with useExtensions()

* Replace getPanels() with useExtensions()

* Replace getOperations() with useExtensions()

* Add useExtension() composable

* Replace useExtensions() with useExtension() where applicable

* Remove interface getters

* Remove display getters

* Remove layout getters

* Remove module getter

* Remove panel getters

* Remove operation getters

* Rename extension register.ts files to index.ts

* Perform module pre register check in parallel

* Remove Refs from AppExtensionConfigs type

* Remove old extension shims

* Ensure registration of modules is awaited when hydrating

* Add support for scaffolding package extensions

* Add support for building bundle extensions

* Add JsonValue type

* Use json for complex command line flags

* Load internal extensions if custom ones are not available

* Fix extension manifest validation for pack extensions

* Fix tests in shared

* Add SplitEntrypoint type

* Move command specific utils to helpers

* Add SDK version getter

* Move extension dev deps generation to helpers

* Move template path to getter util

* Move template copying to a helper

* Only rename copied template files

* Add directus-extension add command

* Convert provided extension source path to url

* Replace deprecated import.meta.globEager

* Mock URL.createObjectURL to make App unit tests pass

* Update rollup-plugin-typescript2

* indentation

* sort vite glob imported modules

* fix unintentional wrong commit

* Simplify app extension import logic

* reinstall @rollup/plugin-virtual

* add test for getInterfaces() expected sort order

Co-authored-by: Rijk van Zanten <rijkvanzanten@me.com>
Co-authored-by: Azri Kahar <42867097+azrikahar@users.noreply.github.com>
---
 api/src/controllers/extensions.ts             |  21 +-
 api/src/extensions.ts                         | 210 ++++++------
 app/src/__setup__/mock-globals.ts             |  21 ++
 .../v-form/form-field-interface.vue           |   9 +-
 app/src/composables/use-extension.ts          |  19 ++
 app/src/composables/use-form-fields.ts        |   8 +-
 app/src/composables/use-system.ts             |  16 +-
 app/src/displays/index.ts                     |  20 +-
 app/src/displays/register.ts                  |  34 --
 app/src/displays/related-values/index.ts      |   8 +-
 app/src/displays/translations/index.ts        |   8 +-
 app/src/extensions.ts                         |  99 ++++++
 app/src/hydrate.ts                            |   6 +-
 .../system-interface-options.vue              |  13 +-
 .../system-interface/system-interface.vue     |   4 +-
 .../_system/system-modules/system-modules.vue |   4 +-
 app/src/interfaces/index.test.ts              |  37 +++
 app/src/interfaces/index.ts                   |  23 +-
 app/src/interfaces/register.ts                |  35 --
 app/src/lang/set-language.ts                  |  20 --
 app/src/layouts/index.ts                      |  19 +-
 app/src/layouts/register.ts                   |  34 --
 app/src/main.ts                               |  18 +-
 app/src/modules/content/routes/collection.vue |   5 +-
 app/src/modules/index.ts                      |  62 +++-
 app/src/modules/insights/routes/dashboard.vue |   4 +-
 .../insights/routes/panel-configuration.vue   |  12 +-
 app/src/modules/register.ts                   |  69 ----
 .../field-detail-advanced-conditions.vue      |  19 +-
 .../field-detail-advanced-display.vue         |   9 +-
 .../field-detail-advanced-interface.vue       |  28 +-
 .../field-configuration.vue                   |   7 +-
 .../field-detail-simple.vue                   |   4 +-
 .../field-detail/shared/extension-options.vue |  20 +-
 .../field-detail/store/alterations/global.ts  |  16 +-
 .../store/alterations/standard.ts             |   7 +-
 .../data-model/field-detail/store/index.ts    |   7 +-
 .../fields/components/field-select.vue        |   8 +-
 .../flows/components/logs-sidebar-detail.vue  |   4 +-
 .../flows/components/operation-detail.vue     |  11 +-
 .../routes/flows/components/operation.vue     |   4 +-
 .../modules/settings/routes/flows/flow.vue    |   4 +-
 .../routes/presets/collection/collection.vue  |   5 +-
 .../modules/settings/routes/presets/item.vue  |   4 +-
 app/src/operations/index.ts                   |  30 +-
 app/src/operations/register.ts                |  45 ---
 app/src/panels/index.ts                       |  20 +-
 app/src/panels/register.ts                    |  35 --
 app/src/shims.d.ts                            |  36 +--
 app/src/stores/insights.ts                    |   4 +-
 app/src/utils/adjust-fields-for-displays.ts   |  18 +-
 app/src/utils/render-string-template.ts       |  17 +-
 app/src/utils/save-as-csv.ts                  |  19 +-
 .../components/layout-sidebar-detail.vue      |   9 +-
 .../views/private/components/module-bar.vue   |   4 +-
 .../private/components/render-display.vue     |   7 +-
 .../private/components/render-template.vue    |  16 +-
 app/vite.config.js                            |  22 +-
 .../create-directus-extension/lib/index.js    |   5 +-
 packages/extensions-sdk/package.json          |   3 +
 .../extensions-sdk/src/cli/commands/add.ts    | 304 ++++++++++++++++++
 .../extensions-sdk/src/cli/commands/build.ts  | 256 ++++++++++++---
 .../extensions-sdk/src/cli/commands/create.ts | 165 ++++++----
 .../src/cli/commands/helpers/copy-template.ts |  72 +++++
 .../helpers/generate-bundle-entrypoint.ts     |  40 +++
 .../helpers/get-extension-dev-deps.ts         |  32 ++
 .../helpers}/load-config.ts                   |   2 +-
 .../commands/helpers/validate-cli-options.ts  |  48 +++
 packages/extensions-sdk/src/cli/run.ts        |   5 +-
 .../src/cli/utils/detect-json-indent.ts       |  13 +
 .../src/cli/utils/get-sdk-version.ts          |   5 +
 .../src/cli/utils/get-template-path.ts        |   5 +
 .../src/cli/utils/rename-map.ts               |  20 --
 .../extensions-sdk/src/cli/utils/to-object.ts |  16 -
 .../src/cli/utils/try-parse-json.ts           |   9 +
 .../{javascript => common/config}/_gitignore  |   0
 .../templates/common/typescript/_gitignore    |   3 -
 .../typescript/{ => config}/tsconfig.json     |   0
 .../javascript/{src => source}/display.vue    |   0
 .../javascript/{src => source}/index.js       |   0
 .../typescript/{src => source}/display.vue    |   0
 .../typescript/{src => source}/index.ts       |   0
 .../typescript/{src => source}/shims.d.ts     |   0
 .../javascript/{src => source}/index.js       |   0
 .../typescript/{src => source}/index.ts       |   0
 .../hook/javascript/{src => source}/index.js  |   0
 .../hook/typescript/{src => source}/index.ts  |   0
 .../javascript/{src => source}/index.js       |   0
 .../javascript/{src => source}/interface.vue  |   0
 .../typescript/{src => source}/index.ts       |   0
 .../typescript/{src => source}/interface.vue  |   0
 .../typescript/{src => source}/shims.d.ts     |   0
 .../javascript/{src => source}/index.js       |   0
 .../javascript/{src => source}/layout.vue     |   0
 .../typescript/{src => source}/index.ts       |   0
 .../typescript/{src => source}/layout.vue     |   0
 .../typescript/{src => source}/shims.d.ts     |   0
 .../javascript/{src => source}/index.js       |   0
 .../javascript/{src => source}/module.vue     |   0
 .../typescript/{src => source}/index.ts       |   0
 .../typescript/{src => source}/module.vue     |   0
 .../typescript/{src => source}/shims.d.ts     |   0
 .../javascript/{src => source}/api.js         |   0
 .../javascript/{src => source}/app.js         |   0
 .../typescript/{src => source}/api.ts         |   0
 .../typescript/{src => source}/app.ts         |   0
 .../typescript/{src => source}/shims.d.ts     |   0
 .../panel/javascript/{src => source}/index.js |   0
 .../javascript/{src => source}/panel.vue      |   0
 .../panel/typescript/{src => source}/index.ts |   0
 .../typescript/{src => source}/panel.vue      |   0
 .../typescript/{src => source}/shims.d.ts     |   0
 packages/shared/src/composables/use-system.ts |   6 +-
 packages/shared/src/constants/extensions.ts   |   4 +-
 packages/shared/src/types/extensions.ts       |  92 ++++--
 packages/shared/src/types/index.ts            |   1 +
 packages/shared/src/types/misc.ts             |   2 +
 packages/shared/src/types/vue.ts              |   3 +
 .../node/generate-extensions-entry.test.ts    |  33 --
 .../utils/node/generate-extensions-entry.ts   |  23 --
 .../generate-extensions-entrypoint.test.ts    | 129 ++++++++
 .../node/generate-extensions-entrypoint.ts    |  55 ++++
 .../shared/src/utils/node/get-extensions.ts   |  23 +-
 packages/shared/src/utils/node/index.ts       |   2 +-
 .../utils/validate-extension-manifest.test.ts | 103 +++++-
 .../src/utils/validate-extension-manifest.ts  |  84 +++--
 pnpm-lock.yaml                                |  15 +
 127 files changed, 1898 insertions(+), 957 deletions(-)
 create mode 100644 app/src/__setup__/mock-globals.ts
 create mode 100644 app/src/composables/use-extension.ts
 delete mode 100644 app/src/displays/register.ts
 create mode 100644 app/src/extensions.ts
 create mode 100644 app/src/interfaces/index.test.ts
 delete mode 100644 app/src/interfaces/register.ts
 delete mode 100644 app/src/layouts/register.ts
 delete mode 100644 app/src/modules/register.ts
 delete mode 100644 app/src/operations/register.ts
 delete mode 100644 app/src/panels/register.ts
 create mode 100644 packages/extensions-sdk/src/cli/commands/add.ts
 create mode 100644 packages/extensions-sdk/src/cli/commands/helpers/copy-template.ts
 create mode 100644 packages/extensions-sdk/src/cli/commands/helpers/generate-bundle-entrypoint.ts
 create mode 100644 packages/extensions-sdk/src/cli/commands/helpers/get-extension-dev-deps.ts
 rename packages/extensions-sdk/src/cli/{utils => commands/helpers}/load-config.ts (94%)
 create mode 100644 packages/extensions-sdk/src/cli/commands/helpers/validate-cli-options.ts
 create mode 100644 packages/extensions-sdk/src/cli/utils/detect-json-indent.ts
 create mode 100644 packages/extensions-sdk/src/cli/utils/get-sdk-version.ts
 create mode 100644 packages/extensions-sdk/src/cli/utils/get-template-path.ts
 delete mode 100644 packages/extensions-sdk/src/cli/utils/rename-map.ts
 delete mode 100644 packages/extensions-sdk/src/cli/utils/to-object.ts
 create mode 100644 packages/extensions-sdk/src/cli/utils/try-parse-json.ts
 rename packages/extensions-sdk/templates/common/{javascript => common/config}/_gitignore (100%)
 delete mode 100644 packages/extensions-sdk/templates/common/typescript/_gitignore
 rename packages/extensions-sdk/templates/common/typescript/{ => config}/tsconfig.json (100%)
 rename packages/extensions-sdk/templates/display/javascript/{src => source}/display.vue (100%)
 rename packages/extensions-sdk/templates/display/javascript/{src => source}/index.js (100%)
 rename packages/extensions-sdk/templates/display/typescript/{src => source}/display.vue (100%)
 rename packages/extensions-sdk/templates/display/typescript/{src => source}/index.ts (100%)
 rename packages/extensions-sdk/templates/display/typescript/{src => source}/shims.d.ts (100%)
 rename packages/extensions-sdk/templates/endpoint/javascript/{src => source}/index.js (100%)
 rename packages/extensions-sdk/templates/endpoint/typescript/{src => source}/index.ts (100%)
 rename packages/extensions-sdk/templates/hook/javascript/{src => source}/index.js (100%)
 rename packages/extensions-sdk/templates/hook/typescript/{src => source}/index.ts (100%)
 rename packages/extensions-sdk/templates/interface/javascript/{src => source}/index.js (100%)
 rename packages/extensions-sdk/templates/interface/javascript/{src => source}/interface.vue (100%)
 rename packages/extensions-sdk/templates/interface/typescript/{src => source}/index.ts (100%)
 rename packages/extensions-sdk/templates/interface/typescript/{src => source}/interface.vue (100%)
 rename packages/extensions-sdk/templates/interface/typescript/{src => source}/shims.d.ts (100%)
 rename packages/extensions-sdk/templates/layout/javascript/{src => source}/index.js (100%)
 rename packages/extensions-sdk/templates/layout/javascript/{src => source}/layout.vue (100%)
 rename packages/extensions-sdk/templates/layout/typescript/{src => source}/index.ts (100%)
 rename packages/extensions-sdk/templates/layout/typescript/{src => source}/layout.vue (100%)
 rename packages/extensions-sdk/templates/layout/typescript/{src => source}/shims.d.ts (100%)
 rename packages/extensions-sdk/templates/module/javascript/{src => source}/index.js (100%)
 rename packages/extensions-sdk/templates/module/javascript/{src => source}/module.vue (100%)
 rename packages/extensions-sdk/templates/module/typescript/{src => source}/index.ts (100%)
 rename packages/extensions-sdk/templates/module/typescript/{src => source}/module.vue (100%)
 rename packages/extensions-sdk/templates/module/typescript/{src => source}/shims.d.ts (100%)
 rename packages/extensions-sdk/templates/operation/javascript/{src => source}/api.js (100%)
 rename packages/extensions-sdk/templates/operation/javascript/{src => source}/app.js (100%)
 rename packages/extensions-sdk/templates/operation/typescript/{src => source}/api.ts (100%)
 rename packages/extensions-sdk/templates/operation/typescript/{src => source}/app.ts (100%)
 rename packages/extensions-sdk/templates/operation/typescript/{src => source}/shims.d.ts (100%)
 rename packages/extensions-sdk/templates/panel/javascript/{src => source}/index.js (100%)
 rename packages/extensions-sdk/templates/panel/javascript/{src => source}/panel.vue (100%)
 rename packages/extensions-sdk/templates/panel/typescript/{src => source}/index.ts (100%)
 rename packages/extensions-sdk/templates/panel/typescript/{src => source}/panel.vue (100%)
 rename packages/extensions-sdk/templates/panel/typescript/{src => source}/shims.d.ts (100%)
 create mode 100644 packages/shared/src/types/vue.ts
 delete mode 100644 packages/shared/src/utils/node/generate-extensions-entry.test.ts
 delete mode 100644 packages/shared/src/utils/node/generate-extensions-entry.ts
 create mode 100644 packages/shared/src/utils/node/generate-extensions-entrypoint.test.ts
 create mode 100644 packages/shared/src/utils/node/generate-extensions-entrypoint.ts

diff --git a/api/src/controllers/extensions.ts b/api/src/controllers/extensions.ts
index 4ac36e15e3..83953c2118 100644
--- a/api/src/controllers/extensions.ts
+++ b/api/src/controllers/extensions.ts
@@ -35,27 +35,20 @@ router.get(
 );
 
 router.get(
-	'/:type/index.js',
+	'/sources/index.js',
 	asyncHandler(async (req, res) => {
-		const type = depluralize(req.params.type as Plural<string>);
-
-		if (!isIn(type, APP_OR_HYBRID_EXTENSION_TYPES)) {
-			throw new RouteNotFoundException(req.path);
-		}
-
 		const extensionManager = getExtensionManager();
 
-		const extensionSource = extensionManager.getAppExtensions(type);
-		if (extensionSource === undefined) {
+		const extensionSource = extensionManager.getAppExtensions();
+		if (extensionSource === null) {
 			throw new RouteNotFoundException(req.path);
 		}
 
 		res.setHeader('Content-Type', 'application/javascript; charset=UTF-8');
-		if (env.EXTENSIONS_CACHE_TTL) {
-			res.setHeader('Cache-Control', getCacheControlHeader(req, ms(env.EXTENSIONS_CACHE_TTL as string)));
-		} else {
-			res.setHeader('Cache-Control', 'no-store');
-		}
+		res.setHeader(
+			'Cache-Control',
+			env.EXTENSIONS_CACHE_TTL ? getCacheControlHeader(req, ms(env.EXTENSIONS_CACHE_TTL as string)) : 'no-store'
+		);
 		res.setHeader('Vary', 'Origin, Cache-Control');
 		res.end(extensionSource);
 	})
diff --git a/api/src/extensions.ts b/api/src/extensions.ts
index 4777c0e8fe..a02b4a27af 100644
--- a/api/src/extensions.ts
+++ b/api/src/extensions.ts
@@ -3,21 +3,20 @@ import path from 'path';
 import {
 	ActionHandler,
 	ApiExtension,
-	AppExtensionType,
+	BundleExtension,
 	EndpointConfig,
 	Extension,
 	ExtensionType,
 	FilterHandler,
 	HookConfig,
 	HybridExtension,
-	HybridExtensionType,
 	InitHandler,
 	OperationApiConfig,
 	ScheduleHandler,
 } from '@directus/shared/types';
 import {
 	ensureExtensionDirs,
-	generateExtensionsEntry,
+	generateExtensionsEntrypoint,
 	getLocalExtensions,
 	getPackageExtensions,
 	pathToRelativeUrl,
@@ -26,12 +25,10 @@ import {
 import {
 	API_OR_HYBRID_EXTENSION_PACKAGE_TYPES,
 	API_OR_HYBRID_EXTENSION_TYPES,
-	APP_OR_HYBRID_EXTENSION_TYPES,
 	APP_SHARED_DEPS,
 	EXTENSION_PACKAGE_TYPES,
 	EXTENSION_TYPES,
 	HYBRID_EXTENSION_TYPES,
-	PACKAGE_EXTENSION_TYPES,
 } from '@directus/shared/constants';
 import getDatabase from './database';
 import emitter, { Emitter } from './emitter';
@@ -69,13 +66,15 @@ export function getExtensionManager(): ExtensionManager {
 	return extensionManager;
 }
 
-type AppExtensions = Partial<Record<AppExtensionType | HybridExtensionType, string>>;
-type ApiExtensions = {
-	hooks: { path: string; events: EventHandler[] }[];
-	endpoints: { path: string }[];
-	operations: { path: string }[];
+type BundleConfig = {
+	endpoints: { name: string; config: EndpointConfig }[];
+	hooks: { name: string; config: HookConfig }[];
+	operations: { name: string; config: OperationApiConfig }[];
 };
 
+type AppExtensions = string | null;
+type ApiExtensions = { path: string }[];
+
 type Options = {
 	schedule: boolean;
 	watch: boolean;
@@ -92,10 +91,11 @@ class ExtensionManager {
 
 	private extensions: Extension[] = [];
 
-	private appExtensions: AppExtensions = {};
-	private apiExtensions: ApiExtensions = { hooks: [], endpoints: [], operations: [] };
+	private appExtensions: AppExtensions = null;
+	private apiExtensions: ApiExtensions = [];
 
 	private apiEmitter: Emitter;
+	private hookEvents: EventHandler[] = [];
 	private endpointRouter: Router;
 
 	private reloadQueue: JobQueue;
@@ -179,8 +179,8 @@ class ExtensionManager {
 		}
 	}
 
-	public getAppExtensions(type: AppExtensionType | HybridExtensionType): string | undefined {
-		return this.appExtensions[type];
+	public getAppExtensions(): string | null {
+		return this.appExtensions;
 	}
 
 	public getEndpointRouter(): Router {
@@ -198,25 +198,24 @@ class ExtensionManager {
 		}
 
 		await this.registerHooks();
-		this.registerEndpoints();
+		await this.registerEndpoints();
 		await this.registerOperations();
+		await this.registerBundles();
 
 		if (env.SERVE_APP) {
-			this.appExtensions = await this.generateExtensionBundles();
+			this.appExtensions = await this.generateExtensionBundle();
 		}
 
 		this.isLoaded = true;
 	}
 
 	private async unload(): Promise<void> {
-		this.unregisterHooks();
-		this.unregisterEndpoints();
-		this.unregisterOperations();
+		this.unregisterApiExtensions();
 
 		this.apiEmitter.offAll();
 
 		if (env.SERVE_APP) {
-			this.appExtensions = {};
+			this.appExtensions = null;
 		}
 
 		this.isLoaded = false;
@@ -257,9 +256,9 @@ class ExtensionManager {
 				extensions
 					.filter((extension) => !extension.local)
 					.flatMap((extension) =>
-						isTypeIn(extension, PACKAGE_EXTENSION_TYPES)
+						extension.type === 'pack'
 							? path.resolve(extension.path, 'package.json')
-							: isTypeIn(extension, HYBRID_EXTENSION_TYPES)
+							: isTypeIn(extension, HYBRID_EXTENSION_TYPES) || extension.type === 'bundle'
 							? [
 									path.resolve(extension.path, extension.entrypoint.app),
 									path.resolve(extension.path, extension.entrypoint.api),
@@ -288,40 +287,36 @@ class ExtensionManager {
 		return [...packageExtensions, ...localExtensions];
 	}
 
-	private async generateExtensionBundles() {
+	private async generateExtensionBundle(): Promise<string | null> {
 		const sharedDepsMapping = await this.getSharedDepsMapping(APP_SHARED_DEPS);
 		const internalImports = Object.entries(sharedDepsMapping).map(([name, path]) => ({
 			find: name,
 			replacement: path,
 		}));
 
-		const bundles: Partial<Record<AppExtensionType | HybridExtensionType, string>> = {};
+		const entrypoint = generateExtensionsEntrypoint(this.extensions);
 
-		for (const extensionType of APP_OR_HYBRID_EXTENSION_TYPES) {
-			const entry = generateExtensionsEntry(extensionType, this.extensions);
+		try {
+			const bundle = await rollup({
+				input: 'entry',
+				external: Object.values(sharedDepsMapping),
+				makeAbsoluteExternalsRelative: false,
+				plugins: [virtual({ entry: entrypoint }), alias({ entries: internalImports })],
+			});
+			const { output } = await bundle.generate({ format: 'es', compact: true });
 
-			try {
-				const bundle = await rollup({
-					input: 'entry',
-					external: Object.values(sharedDepsMapping),
-					makeAbsoluteExternalsRelative: false,
-					plugins: [virtual({ entry }), alias({ entries: internalImports })],
-				});
-				const { output } = await bundle.generate({ format: 'es', compact: true });
+			await bundle.close();
 
-				bundles[extensionType] = output[0].code;
-
-				await bundle.close();
-			} catch (error: any) {
-				logger.warn(`Couldn't bundle App extensions`);
-				logger.warn(error);
-			}
+			return output[0].code;
+		} catch (error: any) {
+			logger.warn(`Couldn't bundle App extensions`);
+			logger.warn(error);
 		}
 
-		return bundles;
+		return null;
 	}
 
-	private async getSharedDepsMapping(deps: string[]) {
+	private async getSharedDepsMapping(deps: string[]): Promise<Record<string, string>> {
 		const appDir = await fse.readdir(path.join(resolvePackage('@directus/app', __dirname), 'dist', 'assets'));
 
 		const depsMapping: Record<string, string> = {};
@@ -350,7 +345,9 @@ class ExtensionManager {
 
 				const config = getModuleDefault(hookInstance);
 
-				this.registerHook(config, hookPath);
+				this.registerHook(config);
+
+				this.apiExtensions.push({ path: hookPath });
 			} catch (error: any) {
 				logger.warn(`Couldn't register hook "${hook.name}"`);
 				logger.warn(error);
@@ -358,7 +355,7 @@ class ExtensionManager {
 		}
 	}
 
-	private registerEndpoints(): void {
+	private async registerEndpoints(): Promise<void> {
 		const endpoints = this.extensions.filter((extension): extension is ApiExtension => extension.type === 'endpoint');
 
 		for (const endpoint of endpoints) {
@@ -368,7 +365,9 @@ class ExtensionManager {
 
 				const config = getModuleDefault(endpointInstance);
 
-				this.registerEndpoint(config, endpointPath, endpoint.name, this.endpointRouter);
+				this.registerEndpoint(config, endpoint.name);
+
+				this.apiExtensions.push({ path: endpointPath });
 			} catch (error: any) {
 				logger.warn(`Couldn't register endpoint "${endpoint.name}"`);
 				logger.warn(error);
@@ -400,7 +399,9 @@ class ExtensionManager {
 
 				const config = getModuleDefault(operationInstance);
 
-				this.registerOperation(config, operationPath);
+				this.registerOperation(config);
+
+				this.apiExtensions.push({ path: operationPath });
 			} catch (error: any) {
 				logger.warn(`Couldn't register operation "${operation.name}"`);
 				logger.warn(error);
@@ -408,17 +409,42 @@ class ExtensionManager {
 		}
 	}
 
-	private registerHook(register: HookConfig, path: string) {
-		const hookHandler: { path: string; events: EventHandler[] } = {
-			path,
-			events: [],
-		};
+	private async registerBundles(): Promise<void> {
+		const bundles = this.extensions.filter((extension): extension is BundleExtension => extension.type === 'bundle');
 
+		for (const bundle of bundles) {
+			try {
+				const bundlePath = path.resolve(bundle.path, bundle.entrypoint.api);
+				const bundleInstances: BundleConfig | { default: BundleConfig } = require(bundlePath);
+
+				const configs = getModuleDefault(bundleInstances);
+
+				for (const { config } of configs.hooks) {
+					this.registerHook(config);
+				}
+
+				for (const { config, name } of configs.endpoints) {
+					this.registerEndpoint(config, name);
+				}
+
+				for (const { config } of configs.operations) {
+					this.registerOperation(config);
+				}
+
+				this.apiExtensions.push({ path: bundlePath });
+			} catch (error: any) {
+				logger.warn(`Couldn't register bundle "${bundle.name}"`);
+				logger.warn(error);
+			}
+		}
+	}
+
+	private registerHook(register: HookConfig): void {
 		const registerFunctions = {
 			filter: (event: string, handler: FilterHandler) => {
 				emitter.onFilter(event, handler);
 
-				hookHandler.events.push({
+				this.hookEvents.push({
 					type: 'filter',
 					name: event,
 					handler,
@@ -427,7 +453,7 @@ class ExtensionManager {
 			action: (event: string, handler: ActionHandler) => {
 				emitter.onAction(event, handler);
 
-				hookHandler.events.push({
+				this.hookEvents.push({
 					type: 'action',
 					name: event,
 					handler,
@@ -436,7 +462,7 @@ class ExtensionManager {
 			init: (event: string, handler: InitHandler) => {
 				emitter.onInit(event, handler);
 
-				hookHandler.events.push({
+				this.hookEvents.push({
 					type: 'init',
 					name: event,
 					handler,
@@ -454,7 +480,7 @@ class ExtensionManager {
 						}
 					});
 
-					hookHandler.events.push({
+					this.hookEvents.push({
 						type: 'schedule',
 						task,
 					});
@@ -473,16 +499,14 @@ class ExtensionManager {
 			logger,
 			getSchema,
 		});
-
-		this.apiExtensions.hooks.push(hookHandler);
 	}
 
-	private registerEndpoint(config: EndpointConfig, path: string, name: string, router: Router) {
+	private registerEndpoint(config: EndpointConfig, name: string): void {
 		const register = typeof config === 'function' ? config : config.handler;
 		const routeName = typeof config === 'function' ? name : config.id;
 
 		const scopedRouter = express.Router();
-		router.use(`/${routeName}`, scopedRouter);
+		this.endpointRouter.use(`/${routeName}`, scopedRouter);
 
 		register(scopedRouter, {
 			services,
@@ -493,66 +517,44 @@ class ExtensionManager {
 			logger,
 			getSchema,
 		});
-
-		this.apiExtensions.endpoints.push({
-			path,
-		});
 	}
 
-	private registerOperation(config: OperationApiConfig, path: string) {
+	private registerOperation(config: OperationApiConfig): void {
 		const flowManager = getFlowManager();
 
 		flowManager.addOperation(config.id, config.handler);
-
-		this.apiExtensions.operations.push({
-			path,
-		});
 	}
 
-	private unregisterHooks(): void {
-		for (const hook of this.apiExtensions.hooks) {
-			for (const event of hook.events) {
-				switch (event.type) {
-					case 'filter':
-						emitter.offFilter(event.name, event.handler);
-						break;
-					case 'action':
-						emitter.offAction(event.name, event.handler);
-						break;
-					case 'init':
-						emitter.offInit(event.name, event.handler);
-						break;
-					case 'schedule':
-						event.task.stop();
-						break;
-				}
+	private unregisterApiExtensions(): void {
+		for (const event of this.hookEvents) {
+			switch (event.type) {
+				case 'filter':
+					emitter.offFilter(event.name, event.handler);
+					break;
+				case 'action':
+					emitter.offAction(event.name, event.handler);
+					break;
+				case 'init':
+					emitter.offInit(event.name, event.handler);
+					break;
+				case 'schedule':
+					event.task.stop();
+					break;
 			}
-
-			delete require.cache[require.resolve(hook.path)];
 		}
 
-		this.apiExtensions.hooks = [];
-	}
-
-	private unregisterEndpoints(): void {
-		for (const endpoint of this.apiExtensions.endpoints) {
-			delete require.cache[require.resolve(endpoint.path)];
-		}
+		this.hookEvents = [];
 
 		this.endpointRouter.stack = [];
 
-		this.apiExtensions.endpoints = [];
-	}
-
-	private unregisterOperations(): void {
-		for (const operation of this.apiExtensions.operations) {
-			delete require.cache[require.resolve(operation.path)];
-		}
-
 		const flowManager = getFlowManager();
 
 		flowManager.clearOperations();
 
-		this.apiExtensions.operations = [];
+		for (const apiExtension of this.apiExtensions) {
+			delete require.cache[require.resolve(apiExtension.path)];
+		}
+
+		this.apiExtensions = [];
 	}
 }
diff --git a/app/src/__setup__/mock-globals.ts b/app/src/__setup__/mock-globals.ts
new file mode 100644
index 0000000000..9933aa1170
--- /dev/null
+++ b/app/src/__setup__/mock-globals.ts
@@ -0,0 +1,21 @@
+import { afterEach } from 'vitest';
+
+const originals = new Map<string, any>();
+
+originals.set('createObjectURL', globalThis.URL.createObjectURL);
+
+Object.defineProperty(globalThis.URL, 'createObjectURL', {
+	value: () => 'blob:http://localhost/0',
+	writable: true,
+	enumerable: false,
+	configurable: true,
+});
+
+afterEach(() => {
+	Object.defineProperty(globalThis.URL, 'createObjectURL', {
+		value: originals.get('createObjectURL'),
+		writable: true,
+		enumerable: false,
+		configurable: true,
+	});
+});
diff --git a/app/src/components/v-form/form-field-interface.vue b/app/src/components/v-form/form-field-interface.vue
index 79646d050c..60a8d8483f 100644
--- a/app/src/components/v-form/form-field-interface.vue
+++ b/app/src/components/v-form/form-field-interface.vue
@@ -48,8 +48,8 @@
 import { useI18n } from 'vue-i18n';
 import { computed } from 'vue';
 import { Field } from '@directus/shared/types';
-import { getInterface } from '@/interfaces';
 import { getDefaultInterfaceForType } from '@/utils/get-default-interface-for-type';
+import { useExtension } from '@/composables/use-extension';
 
 interface Props {
 	field: Field;
@@ -82,7 +82,12 @@ defineEmits(['update:modelValue', 'setFieldValue']);
 
 const { t } = useI18n();
 
-const interfaceExists = computed(() => !!getInterface(props.field?.meta?.interface || 'input'));
+const inter = useExtension(
+	'interface',
+	computed(() => props.field?.meta?.interface ?? 'input')
+);
+
+const interfaceExists = computed(() => !!inter.value);
 </script>
 
 <style lang="scss" scoped>
diff --git a/app/src/composables/use-extension.ts b/app/src/composables/use-extension.ts
new file mode 100644
index 0000000000..1cb22851de
--- /dev/null
+++ b/app/src/composables/use-extension.ts
@@ -0,0 +1,19 @@
+import { Ref, computed, unref } from 'vue';
+import { AppExtensionConfigs, AppExtensionType, HybridExtensionType, Plural } from '@directus/shared/types';
+import { useExtensions } from '@/extensions';
+import { pluralize } from '@directus/shared/utils';
+
+export function useExtension<T extends AppExtensionType | HybridExtensionType>(
+	type: T,
+	name: string | Ref<string | null>
+): Ref<AppExtensionConfigs[Plural<T>][number] | null> {
+	const extensions = useExtensions();
+
+	return computed(() => {
+		const nameRaw = unref(name);
+
+		if (nameRaw === null) return null;
+
+		return (extensions[pluralize(type)].value as any[]).find(({ id }) => id === nameRaw) ?? null;
+	});
+}
diff --git a/app/src/composables/use-form-fields.ts b/app/src/composables/use-form-fields.ts
index 7d7165e5d9..eeacbc5e93 100644
--- a/app/src/composables/use-form-fields.ts
+++ b/app/src/composables/use-form-fields.ts
@@ -1,10 +1,10 @@
 import { FormField } from '@/components/v-form/types';
-import { getInterface } from '@/interfaces';
 import { Field } from '@directus/shared/types';
 import { getDefaultInterfaceForType } from '@/utils/get-default-interface-for-type';
 import { cloneDeep, orderBy } from 'lodash';
 import { computed, ComputedRef, Ref } from 'vue';
 import { translate } from '@/utils/translate-object-values';
+import { useExtension } from './use-extension';
 
 export function useFormFields(fields: Ref<Field[]>): { formFields: ComputedRef<Field[]> } {
 	const formFields = computed(() => {
@@ -24,10 +24,10 @@ export function useFormFields(fields: Ref<Field[]>): { formFields: ComputedRef<F
 		formFields = formFields.map((field, index) => {
 			if (!field.meta) return field;
 
-			let interfaceUsed = getInterface(field.meta.interface);
-			if (interfaceUsed === undefined) {
+			let interfaceUsed = field.meta.interface ? useExtension('interface', field.meta.interface).value : null;
+			if (interfaceUsed === null) {
 				field.meta.interface = getDefaultInterfaceForType(field.type);
-				interfaceUsed = getInterface(field.meta.interface);
+				interfaceUsed = useExtension('interface', field.meta.interface).value;
 			}
 
 			if (interfaceUsed?.hideLabel === true) {
diff --git a/app/src/composables/use-system.ts b/app/src/composables/use-system.ts
index 3a6c862c10..decd34a3cd 100644
--- a/app/src/composables/use-system.ts
+++ b/app/src/composables/use-system.ts
@@ -1,12 +1,6 @@
 import { provide } from 'vue';
 import api from '@/api';
 import { API_INJECT, EXTENSIONS_INJECT, STORES_INJECT } from '@directus/shared/constants';
-import { getInterfaces } from '@/interfaces';
-import { getDisplays } from '@/displays';
-import { getLayouts } from '@/layouts';
-import { getModules } from '@/modules';
-import { getPanels } from '@/panels';
-import { getOperations } from '@/operations';
 import { useAppStore } from '@/stores/app';
 import { useCollectionsStore } from '@/stores/collections';
 import { useFieldsStore } from '@/stores/fields';
@@ -21,6 +15,7 @@ import { useServerStore } from '@/stores/server';
 import { useSettingsStore } from '@/stores/settings';
 import { useUserStore } from '@/stores/user';
 import { useFlowsStore } from '@/stores/flows';
+import { useExtensions } from '@/extensions';
 
 export function useSystem(): void {
 	provide(STORES_INJECT, {
@@ -42,12 +37,5 @@ export function useSystem(): void {
 
 	provide(API_INJECT, api);
 
-	provide(EXTENSIONS_INJECT, {
-		interfaces: getInterfaces().interfaces,
-		displays: getDisplays().displays,
-		layouts: getLayouts().layouts,
-		modules: getModules().modules,
-		panels: getPanels().panels,
-		operations: getOperations().operations,
-	});
+	provide(EXTENSIONS_INJECT, useExtensions());
 }
diff --git a/app/src/displays/index.ts b/app/src/displays/index.ts
index eb3de37461..958b2cc0a8 100644
--- a/app/src/displays/index.ts
+++ b/app/src/displays/index.ts
@@ -1,13 +1,19 @@
-import { shallowRef, Ref } from 'vue';
+import { App } from 'vue';
 import { DisplayConfig } from '@directus/shared/types';
+import { sortBy } from 'lodash';
 
-const displaysRaw: Ref<DisplayConfig[]> = shallowRef([]);
-const displays: Ref<DisplayConfig[]> = shallowRef([]);
+export function getInternalDisplays(): DisplayConfig[] {
+	const displays = import.meta.glob<DisplayConfig>('./*/index.ts', { import: 'default', eager: true });
 
-export function getDisplays(): { displays: Ref<DisplayConfig[]>; displaysRaw: Ref<DisplayConfig[]> } {
-	return { displays, displaysRaw };
+	return sortBy(Object.values(displays), 'id');
 }
 
-export function getDisplay(name?: string | null): DisplayConfig | undefined {
-	return !name ? undefined : displays.value.find(({ id }) => id === name);
+export function registerDisplays(displays: DisplayConfig[], app: App): void {
+	for (const display of displays) {
+		app.component(`display-${display.id}`, display.component);
+
+		if (typeof display.options !== 'function' && Array.isArray(display.options) === false && display.options !== null) {
+			app.component(`display-options-${display.id}`, display.options);
+		}
+	}
 }
diff --git a/app/src/displays/register.ts b/app/src/displays/register.ts
deleted file mode 100644
index 42dd63f97f..0000000000
--- a/app/src/displays/register.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { getRootPath } from '@/utils/get-root-path';
-import { App } from 'vue';
-import { getDisplays } from './index';
-import { DisplayConfig } from '@directus/shared/types';
-
-const { displaysRaw } = getDisplays();
-
-export async function registerDisplays(app: App): Promise<void> {
-	const displayModules = import.meta.globEager('./*/**/index.ts');
-
-	const displays: DisplayConfig[] = Object.values(displayModules).map((module) => module.default);
-	try {
-		const customDisplays: { default: DisplayConfig[] } = import.meta.env.DEV
-			? await import('@directus-extensions-display')
-			: await import(/* @vite-ignore */ `${getRootPath()}extensions/displays/index.js`);
-
-		displays.push(...customDisplays.default);
-	} catch (err: any) {
-		// eslint-disable-next-line no-console
-		console.warn(`Couldn't load custom displays`);
-		// eslint-disable-next-line no-console
-		console.warn(err);
-	}
-
-	displaysRaw.value = displays;
-
-	displaysRaw.value.forEach((display: DisplayConfig) => {
-		app.component(`display-${display.id}`, display.component);
-
-		if (typeof display.options !== 'function' && Array.isArray(display.options) === false && display.options !== null) {
-			app.component(`display-options-${display.id}`, display.options);
-		}
-	});
-}
diff --git a/app/src/displays/related-values/index.ts b/app/src/displays/related-values/index.ts
index b7091b2334..b5f21c89ad 100644
--- a/app/src/displays/related-values/index.ts
+++ b/app/src/displays/related-values/index.ts
@@ -4,9 +4,9 @@ import { getFieldsFromTemplate } from '@directus/shared/utils';
 import { getRelatedCollection } from '@/utils/get-related-collection';
 import DisplayRelatedValues from './related-values.vue';
 import { useFieldsStore } from '@/stores/fields';
-import { getDisplay } from '@/displays';
 import { get, set } from 'lodash';
 import { renderPlainStringTemplate } from '@/utils/render-string-template';
+import { useExtension } from '@/composables/use-extension';
 
 type Options = {
 	template: string;
@@ -79,10 +79,10 @@ export default defineDisplay({
 				continue;
 			}
 
-			const display = getDisplay(field.meta.display);
+			const display = useExtension('display', field.meta.display);
 
-			const stringValue = display?.handler
-				? display.handler(fieldValue, field?.meta?.display_options ?? {}, {
+			const stringValue = display.value?.handler
+				? display.value.handler(fieldValue, field?.meta?.display_options ?? {}, {
 						interfaceOptions: field?.meta?.options ?? {},
 						field: field ?? undefined,
 						collection: collection,
diff --git a/app/src/displays/translations/index.ts b/app/src/displays/translations/index.ts
index 0d7d2b7a9e..38045d4cee 100644
--- a/app/src/displays/translations/index.ts
+++ b/app/src/displays/translations/index.ts
@@ -1,4 +1,3 @@
-import { getDisplay } from '@/displays';
 import { i18n } from '@/lang';
 import { useFieldsStore } from '@/stores/fields';
 import { useRelationsStore } from '@/stores/relations';
@@ -7,6 +6,7 @@ import { renderPlainStringTemplate } from '@/utils/render-string-template';
 import { defineDisplay, getFieldsFromTemplate } from '@directus/shared/utils';
 import { get, set } from 'lodash';
 import DisplayTranslations from './translations.vue';
+import { useExtension } from '@/composables/use-extension';
 
 export default defineDisplay({
 	id: 'translations',
@@ -79,10 +79,10 @@ export default defineDisplay({
 				continue;
 			}
 
-			const display = getDisplay(field.meta.display);
+			const display = useExtension('display', field.meta.display);
 
-			const stringValue = display?.handler
-				? display.handler(fieldValue, field?.meta?.display_options ?? {}, {
+			const stringValue = display.value?.handler
+				? display.value.handler(fieldValue, field?.meta?.display_options ?? {}, {
 						interfaceOptions: field?.meta?.options ?? {},
 						field: field ?? undefined,
 						collection: collection,
diff --git a/app/src/extensions.ts b/app/src/extensions.ts
new file mode 100644
index 0000000000..147ceeb0aa
--- /dev/null
+++ b/app/src/extensions.ts
@@ -0,0 +1,99 @@
+import { AppExtensionConfigs, RefRecord } from '@directus/shared/types';
+import { App, shallowRef, watch } from 'vue';
+import { getInternalDisplays, registerDisplays } from './displays';
+import { getInternalInterfaces, registerInterfaces } from './interfaces';
+import { i18n } from './lang';
+import { getInternalLayouts, registerLayouts } from './layouts';
+import { getInternalModules, registerModules } from './modules';
+import { getInternalOperations, registerOperations } from './operations';
+import { getInternalPanels, registerPanels } from './panels';
+import { getRootPath } from './utils/get-root-path';
+import { translate } from './utils/translate-object-values';
+
+let customExtensions: AppExtensionConfigs | null = null;
+
+const extensions: RefRecord<AppExtensionConfigs> = {
+	interfaces: shallowRef([]),
+	displays: shallowRef([]),
+	layouts: shallowRef([]),
+	modules: shallowRef([]),
+	panels: shallowRef([]),
+	operations: shallowRef([]),
+};
+
+const onHydrateCallbacks: (() => Promise<void>)[] = [];
+const onDehydrateCallbacks: (() => Promise<void>)[] = [];
+
+export async function loadExtensions(): Promise<void> {
+	try {
+		customExtensions = import.meta.env.DEV
+			? await import('@directus-extensions')
+			: await import(/* @vite-ignore */ `${getRootPath()}extensions/sources/index.js`);
+	} catch (err: any) {
+		// eslint-disable-next-line no-console
+		console.warn(`Couldn't load extensions`);
+		// eslint-disable-next-line no-console
+		console.warn(err);
+	}
+}
+
+export function registerExtensions(app: App): void {
+	const interfaces = getInternalInterfaces();
+	const displays = getInternalDisplays();
+	const layouts = getInternalLayouts();
+	const modules = getInternalModules();
+	const panels = getInternalPanels();
+	const operations = getInternalOperations();
+
+	if (customExtensions !== null) {
+		interfaces.push(...customExtensions.interfaces);
+		displays.push(...customExtensions.displays);
+		layouts.push(...customExtensions.layouts);
+		modules.push(...customExtensions.modules);
+		panels.push(...customExtensions.panels);
+		operations.push(...customExtensions.operations);
+	}
+
+	registerInterfaces(interfaces, app);
+	registerDisplays(displays, app);
+	registerLayouts(layouts, app);
+	registerPanels(panels, app);
+	registerOperations(operations, app);
+
+	watch(
+		i18n.global.locale,
+		() => {
+			extensions.interfaces.value = translate(interfaces);
+			extensions.displays.value = translate(displays);
+			extensions.layouts.value = translate(layouts);
+			extensions.panels.value = translate(panels);
+			extensions.operations.value = translate(operations);
+		},
+		{ immediate: true }
+	);
+
+	const { registeredModules, onHydrateModules, onDehydrateModules } = registerModules(modules);
+
+	watch(
+		[i18n.global.locale, registeredModules],
+		() => {
+			extensions.modules.value = translate(registeredModules.value);
+		},
+		{ immediate: true }
+	);
+
+	onHydrateCallbacks.push(onHydrateModules);
+	onDehydrateCallbacks.push(onDehydrateModules);
+}
+
+export async function onHydrateExtensions() {
+	await Promise.all(onHydrateCallbacks.map((onHydrate) => onHydrate()));
+}
+
+export async function onDehydrateExtensions() {
+	await Promise.all(onDehydrateCallbacks.map((onDehydrate) => onDehydrate()));
+}
+
+export function useExtensions(): RefRecord<AppExtensionConfigs> {
+	return extensions;
+}
diff --git a/app/src/hydrate.ts b/app/src/hydrate.ts
index ab672b358c..f834669117 100644
--- a/app/src/hydrate.ts
+++ b/app/src/hydrate.ts
@@ -1,5 +1,4 @@
 import { setLanguage } from '@/lang/set-language';
-import { register as registerModules, unregister as unregisterModules } from '@/modules/register';
 import { getBasemapSources } from '@/utils/geometry/basemap';
 import { useAppStore } from '@/stores/app';
 import { useCollectionsStore } from '@/stores/collections';
@@ -16,6 +15,7 @@ import { useSettingsStore } from '@/stores/settings';
 import { useUserStore } from '@/stores/user';
 import { useNotificationsStore } from '@/stores/notifications';
 import { useTranslationStrings } from '@/composables/use-translation-strings';
+import { onDehydrateExtensions, onHydrateExtensions } from './extensions';
 
 type GenericStore = {
 	$id: string;
@@ -76,7 +76,7 @@ export async function hydrate(): Promise<void> {
 			const hydratedStores = ['userStore', 'permissionsStore'];
 
 			await Promise.all(stores.filter(({ $id }) => !hydratedStores.includes($id)).map((store) => store.hydrate?.()));
-			await registerModules();
+			await onHydrateExtensions();
 			await hydrateTranslationStrings();
 
 			if (userStore.currentUser?.language) lang = userStore.currentUser?.language;
@@ -103,7 +103,7 @@ export async function dehydrate(stores = useStores()): Promise<void> {
 		await store.dehydrate?.();
 	}
 
-	unregisterModules();
+	await onDehydrateExtensions();
 
 	appStore.hydrated = false;
 }
diff --git a/app/src/interfaces/_system/system-interface-options/system-interface-options.vue b/app/src/interfaces/_system/system-interface-options/system-interface-options.vue
index 98ba63a034..85da1139fc 100644
--- a/app/src/interfaces/_system/system-interface-options/system-interface-options.vue
+++ b/app/src/interfaces/_system/system-interface-options/system-interface-options.vue
@@ -29,7 +29,7 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent, computed, inject, ref } from 'vue';
-import { getInterface } from '@/interfaces';
+import { useExtension } from '@/composables/use-extension';
 
 export default defineComponent({
 	props: {
@@ -65,15 +65,8 @@ export default defineComponent({
 
 		const values = inject('values', ref<Record<string, any>>({}));
 
-		const selectedInterface = computed(() => {
-			if (props.interface) {
-				return getInterface(props.interface);
-			}
-
-			if (!values.value[props.interfaceField]) return;
-
-			return getInterface(values.value[props.interfaceField]);
-		});
+		const selectedInterfaceId = computed(() => props.interface ?? values.value[props.interfaceField] ?? null);
+		const selectedInterface = useExtension('interface', selectedInterfaceId);
 
 		const usesCustomComponent = computed(() => {
 			if (!selectedInterface.value) return false;
diff --git a/app/src/interfaces/_system/system-interface/system-interface.vue b/app/src/interfaces/_system/system-interface/system-interface.vue
index f605127bec..8b5b43d38d 100644
--- a/app/src/interfaces/_system/system-interface/system-interface.vue
+++ b/app/src/interfaces/_system/system-interface/system-interface.vue
@@ -14,8 +14,8 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent, computed, inject, ref, watch } from 'vue';
-import { getInterfaces } from '@/interfaces';
 import { InterfaceConfig } from '@directus/shared/types';
+import { useExtensions } from '@/extensions';
 
 export default defineComponent({
 	props: {
@@ -32,7 +32,7 @@ export default defineComponent({
 	setup(props, { emit }) {
 		const { t } = useI18n();
 
-		const { interfaces } = getInterfaces();
+		const { interfaces } = useExtensions();
 
 		const values = inject('values', ref<Record<string, any>>({}));
 
diff --git a/app/src/interfaces/_system/system-modules/system-modules.vue b/app/src/interfaces/_system/system-modules/system-modules.vue
index 8ae6d34f16..22b6fc8db4 100644
--- a/app/src/interfaces/_system/system-modules/system-modules.vue
+++ b/app/src/interfaces/_system/system-modules/system-modules.vue
@@ -60,7 +60,6 @@
 
 <script lang="ts">
 import { defineComponent, PropType, computed, ref } from 'vue';
-import { getModules } from '@/modules';
 import { Settings, SettingsModuleBarModule, SettingsModuleBarLink } from '@directus/shared/types';
 import { hideDragImage } from '@/utils/hide-drag-image';
 import Draggable from 'vuedraggable';
@@ -69,6 +68,7 @@ import { useI18n } from 'vue-i18n';
 import { nanoid } from 'nanoid';
 import { Field, DeepPartial } from '@directus/shared/types';
 import { MODULE_BAR_DEFAULT } from '@/constants';
+import { useExtensions } from '@/extensions';
 
 type PreviewExtra = {
 	to: string;
@@ -130,7 +130,7 @@ export default defineComponent({
 		const values = ref<SettingsModuleBarLink | null>();
 		const initialValues = ref<SettingsModuleBarLink | null>();
 
-		const { modules: registeredModules } = getModules();
+		const { modules: registeredModules } = useExtensions();
 
 		const availableModulesAsBarModule = computed<SettingsModuleBarModule[]>(() => {
 			return registeredModules.value
diff --git a/app/src/interfaces/index.test.ts b/app/src/interfaces/index.test.ts
new file mode 100644
index 0000000000..01e5fdbbed
--- /dev/null
+++ b/app/src/interfaces/index.test.ts
@@ -0,0 +1,37 @@
+import { expect, test, describe } from 'vitest';
+import { getInternalInterfaces } from './index';
+
+/**
+ * Vite v3 reworked the glob import with it's own internal sorting,
+ * so this is to ensure any changes to vite's internal sorting to not affect the expected sort outcome.
+ *
+ *  @see {@link https://github.com/directus/directus/pull/15672#issuecomment-1289975933}
+ */
+
+const expectedInterfacesSortOrder = [
+	'boolean',
+	'input',
+	'input-autocomplete-api',
+	'input-code',
+	'input-hash',
+	'input-multiline',
+	'input-rich-text-html',
+	'input-rich-text-md',
+	'system-collection',
+];
+
+describe('interfaces', () => {
+	test('getInterfaces() should return the expected sorted order of interfaces', () => {
+		const interfaces = getInternalInterfaces();
+		const interfaceIds = interfaces.map((inter) => inter.id);
+		const interfacesToTest = interfaceIds.filter((inter) => expectedInterfacesSortOrder.includes(inter));
+
+		// test all expected sort order
+		expect(interfacesToTest).toEqual(expectedInterfacesSortOrder);
+		// test whether input interface is the first one among all the input related interfaces
+		expect(interfacesToTest.filter((inter) => inter.includes('input')).findIndex((inter) => inter === 'input')).toBe(0);
+		// system-collection should be not be at the start after sorting. Currently it is within the folder called "_system",
+		// so it will be the first item by default without our added sort logic in getInterface().
+		expect(interfacesToTest.findIndex((inter) => inter === 'system-collection')).not.toBe(0);
+	});
+});
diff --git a/app/src/interfaces/index.ts b/app/src/interfaces/index.ts
index f22ddbec0f..cdc7700c89 100644
--- a/app/src/interfaces/index.ts
+++ b/app/src/interfaces/index.ts
@@ -1,13 +1,22 @@
-import { shallowRef, Ref } from 'vue';
+import { App } from 'vue';
 import { InterfaceConfig } from '@directus/shared/types';
+import { sortBy } from 'lodash';
 
-const interfacesRaw: Ref<InterfaceConfig[]> = shallowRef([]);
-const interfaces: Ref<InterfaceConfig[]> = shallowRef([]);
+export function getInternalInterfaces(): InterfaceConfig[] {
+	const interfaces = import.meta.glob<InterfaceConfig>(['./*/index.ts', './_system/*/index.ts'], {
+		import: 'default',
+		eager: true,
+	});
 
-export function getInterfaces(): { interfaces: Ref<InterfaceConfig[]>; interfacesRaw: Ref<InterfaceConfig[]> } {
-	return { interfaces, interfacesRaw };
+	return sortBy(Object.values(interfaces), 'id');
 }
 
-export function getInterface(name?: string | null): InterfaceConfig | undefined {
-	return !name ? undefined : interfaces.value.find(({ id }) => id === name);
+export function registerInterfaces(interfaces: InterfaceConfig[], app: App): void {
+	for (const inter of interfaces) {
+		app.component(`interface-${inter.id}`, inter.component);
+
+		if (typeof inter.options !== 'function' && Array.isArray(inter.options) === false && inter.options !== null) {
+			app.component(`interface-options-${inter.id}`, inter.options);
+		}
+	}
 }
diff --git a/app/src/interfaces/register.ts b/app/src/interfaces/register.ts
deleted file mode 100644
index 76f16291b5..0000000000
--- a/app/src/interfaces/register.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { getRootPath } from '@/utils/get-root-path';
-import { App } from 'vue';
-import { getInterfaces } from './index';
-import { InterfaceConfig } from '@directus/shared/types';
-
-const { interfacesRaw } = getInterfaces();
-
-export async function registerInterfaces(app: App): Promise<void> {
-	const interfaceModules = import.meta.globEager('./*/**/index.ts');
-
-	const interfaces: InterfaceConfig[] = Object.values(interfaceModules).map((module) => module.default);
-
-	try {
-		const customInterfaces: { default: InterfaceConfig[] } = import.meta.env.DEV
-			? await import('@directus-extensions-interface')
-			: await import(/* @vite-ignore */ `${getRootPath()}extensions/interfaces/index.js`);
-
-		interfaces.push(...customInterfaces.default);
-	} catch (err: any) {
-		// eslint-disable-next-line no-console
-		console.warn(`Couldn't load custom interfaces`);
-		// eslint-disable-next-line no-console
-		console.warn(err);
-	}
-
-	interfacesRaw.value = interfaces;
-
-	interfacesRaw.value.forEach((inter: InterfaceConfig) => {
-		app.component(`interface-${inter.id}`, inter.component);
-
-		if (typeof inter.options !== 'function' && Array.isArray(inter.options) === false && inter.options !== null) {
-			app.component(`interface-options-${inter.id}`, inter.options);
-		}
-	});
-}
diff --git a/app/src/lang/set-language.ts b/app/src/lang/set-language.ts
index c331600d37..15b4c4d51f 100644
--- a/app/src/lang/set-language.ts
+++ b/app/src/lang/set-language.ts
@@ -1,21 +1,8 @@
-import { getDisplays } from '@/displays';
-import { getInterfaces } from '@/interfaces';
-import { getPanels } from '@/panels';
-import { getLayouts } from '@/layouts';
-import { getModules } from '@/modules';
 import { useCollectionsStore } from '@/stores/collections';
 import { useFieldsStore } from '@/stores/fields';
-import { translate } from '@/utils/translate-object-values';
 import availableLanguages from './available-languages.yaml';
 import { i18n, Language, loadedLanguages } from './index';
-import { getOperations } from '@/operations';
 import { useTranslationStrings } from '@/composables/use-translation-strings';
-const { modules, modulesRaw } = getModules();
-const { layouts, layoutsRaw } = getLayouts();
-const { interfaces, interfacesRaw } = getInterfaces();
-const { panels, panelsRaw } = getPanels();
-const { displays, displaysRaw } = getDisplays();
-const { operations, operationsRaw } = getOperations();
 import { loadDateFNSLocale } from '@/utils/get-date-fns-locale';
 
 export async function setLanguage(lang: Language): Promise<boolean> {
@@ -43,13 +30,6 @@ export async function setLanguage(lang: Language): Promise<boolean> {
 		(document.querySelector('html') as HTMLElement).setAttribute('lang', lang);
 	}
 
-	modules.value = translate(modulesRaw.value);
-	layouts.value = translate(layoutsRaw.value);
-	interfaces.value = translate(interfacesRaw.value);
-	panels.value = translate(panelsRaw.value);
-	displays.value = translate(displaysRaw.value);
-	operations.value = translate(operationsRaw.value);
-
 	collectionsStore.translateCollections();
 	fieldsStore.translateFields();
 	mergeTranslationStringsForLanguage(lang);
diff --git a/app/src/layouts/index.ts b/app/src/layouts/index.ts
index 40d78b3c0f..652e074cda 100644
--- a/app/src/layouts/index.ts
+++ b/app/src/layouts/index.ts
@@ -1,13 +1,18 @@
-import { shallowRef, Ref } from 'vue';
+import { App } from 'vue';
 import { LayoutConfig } from '@directus/shared/types';
+import { sortBy } from 'lodash';
 
-const layoutsRaw: Ref<LayoutConfig[]> = shallowRef([]);
-const layouts: Ref<LayoutConfig[]> = shallowRef([]);
+export function getInternalLayouts(): LayoutConfig[] {
+	const layouts = import.meta.glob<LayoutConfig>('./*/index.ts', { import: 'default', eager: true });
 
-export function getLayouts(): { layouts: Ref<LayoutConfig[]>; layoutsRaw: Ref<LayoutConfig[]> } {
-	return { layouts, layoutsRaw };
+	return sortBy(Object.values(layouts), 'id');
 }
 
-export function getLayout(name?: string | null): LayoutConfig | undefined {
-	return !name ? undefined : layouts.value.find(({ id }) => id === name);
+export function registerLayouts(layouts: LayoutConfig[], app: App): void {
+	for (const layout of layouts) {
+		app.component(`layout-${layout.id}`, layout.component);
+		app.component(`layout-options-${layout.id}`, layout.slots.options);
+		app.component(`layout-sidebar-${layout.id}`, layout.slots.sidebar);
+		app.component(`layout-actions-${layout.id}`, layout.slots.actions);
+	}
 }
diff --git a/app/src/layouts/register.ts b/app/src/layouts/register.ts
deleted file mode 100644
index f5345d08fc..0000000000
--- a/app/src/layouts/register.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { getRootPath } from '@/utils/get-root-path';
-import { App } from 'vue';
-import { getLayouts } from './index';
-import { LayoutConfig } from '@directus/shared/types';
-
-const { layoutsRaw } = getLayouts();
-
-export async function registerLayouts(app: App): Promise<void> {
-	const layoutModules = import.meta.globEager('./*/**/index.ts');
-
-	const layouts: LayoutConfig[] = Object.values(layoutModules).map((module) => module.default);
-
-	try {
-		const customLayouts: { default: LayoutConfig[] } = import.meta.env.DEV
-			? await import('@directus-extensions-layout')
-			: await import(/* @vite-ignore */ `${getRootPath()}extensions/layouts/index.js`);
-
-		layouts.push(...customLayouts.default);
-	} catch (err: any) {
-		// eslint-disable-next-line no-console
-		console.warn(`Couldn't load custom layouts`);
-		// eslint-disable-next-line no-console
-		console.warn(err);
-	}
-
-	layoutsRaw.value = layouts;
-
-	layoutsRaw.value.forEach((layout) => {
-		app.component(`layout-${layout.id}`, layout.component);
-		app.component(`layout-options-${layout.id}`, layout.slots.options);
-		app.component(`layout-sidebar-${layout.id}`, layout.slots.sidebar);
-		app.component(`layout-actions-${layout.id}`, layout.slots.actions);
-	});
-}
diff --git a/app/src/main.ts b/app/src/main.ts
index f976972904..697fef853a 100644
--- a/app/src/main.ts
+++ b/app/src/main.ts
@@ -7,16 +7,11 @@ import App from './app.vue';
 import { registerComponents } from './components/register';
 import { DIRECTUS_LOGO } from './constants';
 import { registerDirectives } from './directives/register';
-import { registerPanels } from './panels/register';
-import { registerDisplays } from './displays/register';
-import { registerInterfaces } from './interfaces/register';
 import { i18n } from './lang/';
-import { registerLayouts } from './layouts/register';
-import { loadModules } from './modules/register';
 import { router } from './router';
 import './styles/main.scss';
 import { registerViews } from './views/register';
-import { registerOperations } from './operations/register';
+import { loadExtensions, registerExtensions } from './extensions';
 
 init();
 
@@ -44,14 +39,9 @@ async function init() {
 	registerComponents(app);
 	registerViews(app);
 
-	await Promise.all([
-		registerInterfaces(app),
-		registerPanels(app),
-		registerDisplays(app),
-		registerLayouts(app),
-		registerOperations(app),
-		loadModules(),
-	]);
+	await loadExtensions();
+
+	registerExtensions(app);
 
 	app.mount('#app');
 
diff --git a/app/src/modules/content/routes/collection.vue b/app/src/modules/content/routes/collection.vue
index 2a617e578f..06c2196928 100644
--- a/app/src/modules/content/routes/collection.vue
+++ b/app/src/modules/content/routes/collection.vue
@@ -295,9 +295,9 @@ import { usePermissionsStore } from '@/stores/permissions';
 import { useUserStore } from '@/stores/user';
 import DrawerBatch from '@/views/private/components/drawer-batch.vue';
 import { unexpectedError } from '@/utils/unexpected-error';
-import { getLayouts } from '@/layouts';
 import { mergeFilters } from '@directus/shared/utils';
 import { Filter } from '@directus/shared/types';
+import { useExtension } from '@/composables/use-extension';
 
 type Item = {
 	[field: string]: any;
@@ -336,7 +336,6 @@ export default defineComponent({
 
 		const router = useRouter();
 
-		const { layouts } = getLayouts();
 		const userStore = useUserStore();
 		const permissionsStore = usePermissionsStore();
 		const layoutRef = ref();
@@ -382,7 +381,7 @@ export default defineComponent({
 
 		const { bookmarkDialogActive, creatingBookmark, createBookmark } = useBookmarks();
 
-		const currentLayout = computed(() => layouts.value.find((l) => l.id === layout.value));
+		const currentLayout = useExtension('layout', layout);
 
 		watch(
 			collection,
diff --git a/app/src/modules/index.ts b/app/src/modules/index.ts
index 6770dc8e57..df9b876f7b 100644
--- a/app/src/modules/index.ts
+++ b/app/src/modules/index.ts
@@ -1,9 +1,61 @@
-import { shallowRef, Ref } from 'vue';
+import { router } from '@/router';
+import { usePermissionsStore } from '@/stores/permissions';
+import { useUserStore } from '@/stores/user';
+import RouterPass from '@/utils/router-passthrough';
 import { ModuleConfig } from '@directus/shared/types';
+import { ShallowRef, shallowRef } from 'vue';
+import { sortBy } from 'lodash';
 
-const modulesRaw: Ref<ModuleConfig[]> = shallowRef([]);
-const modules: Ref<ModuleConfig[]> = shallowRef([]);
+export function getInternalModules(): ModuleConfig[] {
+	const modules = import.meta.glob<ModuleConfig>('./*/index.ts', { import: 'default', eager: true });
 
-export function getModules(): { modules: Ref<ModuleConfig[]>; modulesRaw: Ref<ModuleConfig[]> } {
-	return { modules, modulesRaw };
+	return sortBy(Object.values(modules), 'id');
+}
+
+export function registerModules(modules: ModuleConfig[]): {
+	registeredModules: ShallowRef<ModuleConfig[]>;
+	onHydrateModules: () => Promise<void>;
+	onDehydrateModules: () => Promise<void>;
+} {
+	const registeredModules = shallowRef<ModuleConfig[]>([]);
+
+	const onHydrateModules = async () => {
+		const userStore = useUserStore();
+		const permissionsStore = usePermissionsStore();
+
+		if (!userStore.currentUser) return;
+
+		registeredModules.value = (
+			await Promise.all(
+				modules.map(async (module) => {
+					if (!module.preRegisterCheck) return module;
+
+					const allowed = await module.preRegisterCheck(userStore.currentUser, permissionsStore.permissions);
+
+					if (allowed) return module;
+
+					return null;
+				})
+			)
+		).filter((module): module is ModuleConfig => module !== null);
+
+		for (const module of registeredModules.value) {
+			router.addRoute({
+				name: module.id,
+				path: `/${module.id}`,
+				component: RouterPass,
+				children: module.routes,
+			});
+		}
+	};
+
+	const onDehydrateModules = async () => {
+		for (const module of modules) {
+			router.removeRoute(module.id);
+		}
+
+		registeredModules.value = [];
+	};
+
+	return { registeredModules, onHydrateModules, onDehydrateModules };
 }
diff --git a/app/src/modules/insights/routes/dashboard.vue b/app/src/modules/insights/routes/dashboard.vue
index a2be52476e..c98896b7ca 100644
--- a/app/src/modules/insights/routes/dashboard.vue
+++ b/app/src/modules/insights/routes/dashboard.vue
@@ -194,7 +194,7 @@
 import { AppTile } from '@/components/v-workspace-tile.vue';
 import { useEditsGuard } from '@/composables/use-edits-guard';
 import { useShortcut } from '@/composables/use-shortcut';
-import { getPanels } from '@/panels';
+import { useExtensions } from '@/extensions';
 import { router } from '@/router';
 import { useAppStore } from '@/stores/app';
 import { useInsightsStore } from '@/stores/insights';
@@ -217,7 +217,7 @@ const props = withDefaults(defineProps<Props>(), { panelKey: null });
 
 const { t } = useI18n();
 
-const { panels: panelsInfo } = getPanels();
+const { panels: panelsInfo } = useExtensions();
 
 const insightsStore = useInsightsStore();
 const appStore = useAppStore();
diff --git a/app/src/modules/insights/routes/panel-configuration.vue b/app/src/modules/insights/routes/panel-configuration.vue
index 69b927f048..aa15b0c8df 100644
--- a/app/src/modules/insights/routes/panel-configuration.vue
+++ b/app/src/modules/insights/routes/panel-configuration.vue
@@ -95,7 +95,8 @@
 
 <script lang="ts" setup>
 import { useDialogRoute } from '@/composables/use-dialog-route';
-import { getPanel, getPanels } from '@/panels';
+import { useExtension } from '@/composables/use-extension';
+import { useExtensions } from '@/extensions';
 import { useInsightsStore } from '@/stores/insights';
 import { CreatePanel } from '@/stores/insights';
 import { Panel } from '@directus/shared/types';
@@ -135,7 +136,7 @@ const edits = reactive<Partial<Panel>>({
 const insightsStore = useInsightsStore();
 
 const { panels } = storeToRefs(insightsStore);
-const { panels: panelTypes } = getPanels();
+const { panels: panelTypes } = useExtensions();
 
 const router = useRouter();
 
@@ -158,9 +159,10 @@ const selectItems = computed<FancySelectItem[]>(() => {
 	});
 });
 
-const currentTypeInfo = computed(() => {
-	return unref(panel).type ? getPanel(unref(panel).type) : null;
-});
+const currentTypeInfo = useExtension(
+	'panel',
+	computed(() => panel.value.type ?? null)
+);
 
 const customOptionsFields = computed(() => {
 	if (typeof currentTypeInfo.value?.options === 'function') {
diff --git a/app/src/modules/register.ts b/app/src/modules/register.ts
deleted file mode 100644
index 4b236dbefc..0000000000
--- a/app/src/modules/register.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import { router } from '@/router';
-import { usePermissionsStore } from '@/stores/permissions';
-import { useUserStore } from '@/stores/user';
-import { getRootPath } from '@/utils/get-root-path';
-import RouterPass from '@/utils/router-passthrough';
-import { getModules } from './index';
-import { ModuleConfig } from '@directus/shared/types';
-
-const { modulesRaw } = getModules();
-
-let queuedModules: ModuleConfig[] = [];
-
-export async function loadModules(): Promise<void> {
-	const moduleModules = import.meta.globEager('./*/index.ts');
-
-	const modules: ModuleConfig[] = Object.values(moduleModules).map((module) => module.default);
-
-	try {
-		const customModules: { default: ModuleConfig[] } = import.meta.env.DEV
-			? await import('@directus-extensions-module')
-			: await import(/* @vite-ignore */ `${getRootPath()}extensions/modules/index.js`);
-
-		modules.push(...customModules.default);
-	} catch (err: any) {
-		// eslint-disable-next-line no-console
-		console.warn(`Couldn't load custom modules`);
-		// eslint-disable-next-line no-console
-		console.warn(err);
-	}
-
-	queuedModules = modules;
-}
-
-export async function register(): Promise<void> {
-	const userStore = useUserStore();
-	const permissionsStore = usePermissionsStore();
-
-	const registeredModules = [];
-
-	for (const mod of queuedModules) {
-		if (!userStore.currentUser) continue;
-
-		if (mod.preRegisterCheck) {
-			const allowed = await mod.preRegisterCheck(userStore.currentUser, permissionsStore.permissions);
-			if (allowed) registeredModules.push(mod);
-		} else {
-			registeredModules.push(mod);
-		}
-	}
-
-	for (const module of registeredModules) {
-		router.addRoute({
-			name: module.id,
-			path: `/${module.id}`,
-			component: RouterPass,
-			children: module.routes,
-		});
-	}
-
-	modulesRaw.value = registeredModules;
-}
-
-export function unregister(): void {
-	for (const module of modulesRaw.value) {
-		router.removeRoute(module.id);
-	}
-
-	modulesRaw.value = [];
-}
diff --git a/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-conditions.vue b/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-conditions.vue
index 12d6d9f76f..96f249e58b 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-conditions.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-conditions.vue
@@ -10,7 +10,7 @@ import { Field, DeepPartial } from '@directus/shared/types';
 import { useI18n } from 'vue-i18n';
 import { useFieldDetailStore, syncFieldDetailStoreProperty } from '../store';
 import { storeToRefs } from 'pinia';
-import { getInterface } from '@/interfaces';
+import { useExtension } from '@/composables/use-extension';
 
 const { t } = useI18n();
 
@@ -19,7 +19,7 @@ const fieldDetailStore = useFieldDetailStore();
 const { field, collection } = storeToRefs(fieldDetailStore);
 
 const conditions = syncFieldDetailStoreProperty('field.meta.conditions');
-const interfaceID = computed(() => field.value.meta?.interface);
+const interfaceId = computed(() => field.value.meta?.interface ?? null);
 
 const repeaterFields = computed<DeepPartial<Field>[]>(() => [
 	{
@@ -90,23 +90,24 @@ const repeaterFields = computed<DeepPartial<Field>[]>(() => [
 		meta: {
 			interface: 'system-interface-options',
 			options: {
-				interface: interfaceID.value,
+				interface: interfaceId.value,
 			},
 		},
 	},
 ]);
 
+const selectedInterface = useExtension('interface', interfaceId);
+
 const optionDefaults = computed(() => {
-	const selectedInterface = getInterface(interfaceID.value);
-	if (!selectedInterface || !selectedInterface.options) return [];
+	if (!selectedInterface.value || !selectedInterface.value.options) return [];
 
 	// Indicates a custom vue component is used for the interface options
-	if ('render' in selectedInterface.options) return [];
+	if ('render' in selectedInterface.value.options) return [];
 
 	let optionsObjectOrArray;
 
-	if (typeof selectedInterface.options === 'function') {
-		optionsObjectOrArray = selectedInterface.options({
+	if (typeof selectedInterface.value.options === 'function') {
+		optionsObjectOrArray = selectedInterface.value.options({
 			field: {
 				type: 'unknown',
 			},
@@ -133,7 +134,7 @@ const optionDefaults = computed(() => {
 			saving: false,
 		});
 	} else {
-		optionsObjectOrArray = selectedInterface.options;
+		optionsObjectOrArray = selectedInterface.value.options;
 	}
 
 	const optionsArray = Array.isArray(optionsObjectOrArray)
diff --git a/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-display.vue b/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-display.vue
index 33d7e947c9..ddcf6f48b5 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-display.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-display.vue
@@ -21,12 +21,11 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent, computed } from 'vue';
-import { getDisplay } from '@/displays';
-import { getInterface } from '@/interfaces';
 import { clone } from 'lodash';
 import { useFieldDetailStore, syncFieldDetailStoreProperty } from '../store';
 import { storeToRefs } from 'pinia';
 import ExtensionOptions from '../shared/extension-options.vue';
+import { useExtension } from '@/composables/use-extension';
 
 export default defineComponent({
 	components: { ExtensionOptions },
@@ -37,11 +36,11 @@ export default defineComponent({
 
 		const { field, displaysForType } = storeToRefs(fieldDetailStore);
 
-		const interfaceID = computed(() => field.value.meta?.interface);
+		const interfaceId = computed(() => field.value.meta?.interface ?? null);
 		const display = syncFieldDetailStoreProperty('field.meta.display');
 
-		const selectedInterface = computed(() => getInterface(interfaceID.value));
-		const selectedDisplay = computed(() => getDisplay(display.value));
+		const selectedInterface = useExtension('interface', interfaceId);
+		const selectedDisplay = useExtension('display', display);
 
 		const selectItems = computed(() => {
 			let recommended = clone(selectedInterface.value?.recommendedDisplays) || [];
diff --git a/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-interface.vue b/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-interface.vue
index 7b9be51c54..8772f3a7f1 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-interface.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-interface.vue
@@ -1,19 +1,19 @@
 <template>
 	<div>
-		<v-fancy-select v-model="interfaceID" class="select" :items="selectItems" />
+		<v-fancy-select v-model="interfaceId" class="select" :items="selectItems" />
 
-		<v-notice v-if="interfaceID && !selectedInterface" class="not-found" type="danger">
-			{{ t('interface_not_found', { interface: interfaceID }) }}
+		<v-notice v-if="interfaceId && !selectedInterface" class="not-found" type="danger">
+			{{ t('interface_not_found', { interface: interfaceId }) }}
 			<div class="spacer" />
-			<button @click="interfaceID = null">{{ t('reset_interface') }}</button>
+			<button @click="interfaceId = null">{{ t('reset_interface') }}</button>
 		</v-notice>
 
 		<extension-options
-			v-if="interfaceID && selectedInterface"
+			v-if="interfaceId && selectedInterface"
 			v-model="options"
 			type="interface"
 			:options="customOptionsFields"
-			:extension="interfaceID"
+			:extension="interfaceId"
 			show-advanced
 		/>
 	</div>
@@ -22,10 +22,10 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent, computed } from 'vue';
-import { getInterface } from '@/interfaces';
 import { useFieldDetailStore, syncFieldDetailStoreProperty } from '../store/';
 import { storeToRefs } from 'pinia';
 import ExtensionOptions from '../shared/extension-options.vue';
+import { useExtension } from '@/composables/use-extension';
 
 export default defineComponent({
 	components: { ExtensionOptions },
@@ -34,7 +34,7 @@ export default defineComponent({
 
 		const fieldDetailStore = useFieldDetailStore();
 
-		const interfaceID = syncFieldDetailStoreProperty('field.meta.interface');
+		const interfaceId = syncFieldDetailStoreProperty('field.meta.interface');
 
 		const { field, interfacesForType } = storeToRefs(fieldDetailStore);
 		const type = computed(() => field.value.type);
@@ -93,15 +93,11 @@ export default defineComponent({
 			return recommendedItems;
 		});
 
-		const selectedInterface = computed(() => getInterface(interfaceID.value));
-
-		const extensionInfo = computed(() => {
-			return getInterface(interfaceID.value);
-		});
+		const selectedInterface = useExtension('interface', interfaceId);
 
 		const customOptionsFields = computed(() => {
-			if (typeof extensionInfo.value?.options === 'function') {
-				return extensionInfo.value?.options(fieldDetailStore);
+			if (typeof selectedInterface.value?.options === 'function') {
+				return selectedInterface.value?.options(fieldDetailStore);
 			}
 
 			return null;
@@ -121,7 +117,7 @@ export default defineComponent({
 			},
 		});
 
-		return { t, selectItems, selectedInterface, interfaceID, customOptionsFields, options };
+		return { t, selectItems, selectedInterface, interfaceId, customOptionsFields, options };
 	},
 });
 </script>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/field-detail-simple/field-configuration.vue b/app/src/modules/settings/routes/data-model/field-detail/field-detail-simple/field-configuration.vue
index 573a26d442..7b39ab98fd 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/field-detail-simple/field-configuration.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/field-detail-simple/field-configuration.vue
@@ -63,12 +63,13 @@
 
 <script lang="ts">
 import { defineComponent, computed, watch } from 'vue';
-import { getInterface, getInterfaces } from '@/interfaces';
 import { useI18n } from 'vue-i18n';
 import { useFieldDetailStore, syncFieldDetailStoreProperty } from '../store/';
 import { storeToRefs } from 'pinia';
 import ExtensionOptions from '../shared/extension-options.vue';
 import RelationshipConfiguration from './relationship-configuration.vue';
+import { useExtensions } from '@/extensions';
+import { useExtension } from '@/composables/use-extension';
 import { nanoid } from 'nanoid/non-secure';
 
 export default defineComponent({
@@ -94,7 +95,7 @@ export default defineComponent({
 		const required = syncFieldDetailStoreProperty('field.meta.required', false);
 		const note = syncFieldDetailStoreProperty('field.meta.note');
 
-		const chosenInterfaceConfig = computed(() => getInterface(chosenInterface.value));
+		const chosenInterfaceConfig = useExtension('interface', chosenInterface);
 
 		const typeOptions = computed(() => {
 			if (!chosenInterfaceConfig.value) return [];
@@ -107,7 +108,7 @@ export default defineComponent({
 
 		const typeDisabled = computed(() => typeOptions.value.length === 1 || localType.value !== 'standard');
 
-		const { interfaces } = getInterfaces();
+		const { interfaces } = useExtensions();
 
 		const interfaceIdsWithHiddenLabel = computed(() =>
 			interfaces.value.filter((inter) => inter.hideLabel === true).map((inter) => inter.id)
diff --git a/app/src/modules/settings/routes/data-model/field-detail/field-detail-simple/field-detail-simple.vue b/app/src/modules/settings/routes/data-model/field-detail/field-detail-simple/field-detail-simple.vue
index 5c07bc7714..2707b6604c 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/field-detail-simple/field-detail-simple.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/field-detail-simple/field-detail-simple.vue
@@ -42,11 +42,11 @@
 import { defineComponent, PropType, computed, toRefs, watch } from 'vue';
 import { Collection } from '@directus/shared/types';
 import { useI18n } from 'vue-i18n';
-import { getInterfaces } from '@/interfaces';
 import { orderBy } from 'lodash';
 import { useFieldDetailStore, syncFieldDetailStoreProperty } from '../store/';
 import { syncRefProperty } from '@/utils/sync-ref-property';
 import FieldConfiguration from './field-configuration.vue';
+import { useExtensions } from '@/extensions';
 
 export default defineComponent({
 	components: { FieldConfiguration },
@@ -69,7 +69,7 @@ export default defineComponent({
 		const fieldDetail = useFieldDetailStore();
 		watch(collection, () => fieldDetail.update({ collection: collection.value.collection }), { immediate: true });
 
-		const { interfaces } = getInterfaces();
+		const { interfaces } = useExtensions();
 
 		const interfacesSorted = computed(() => {
 			return orderBy(
diff --git a/app/src/modules/settings/routes/data-model/field-detail/shared/extension-options.vue b/app/src/modules/settings/routes/data-model/field-detail/shared/extension-options.vue
index f496ce142a..6fa57e3343 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/shared/extension-options.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/shared/extension-options.vue
@@ -26,13 +26,10 @@
 
 <script lang="ts">
 import { defineComponent, PropType, computed } from 'vue';
-import { getOperation } from '@/operations';
-import { getInterface } from '@/interfaces';
-import { getDisplay } from '@/displays';
-import { getPanel } from '@/panels';
 import { useI18n } from 'vue-i18n';
 import { useFieldDetailStore } from '../store';
 import { storeToRefs } from 'pinia';
+import { useExtension } from '@/composables/use-extension';
 
 export default defineComponent({
 	props: {
@@ -73,20 +70,7 @@ export default defineComponent({
 
 		const { collection, field } = storeToRefs(fieldDetailStore);
 
-		const extensionInfo = computed(() => {
-			switch (props.type) {
-				case 'interface':
-					return getInterface(props.extension);
-				case 'display':
-					return getDisplay(props.extension);
-				case 'panel':
-					return getPanel(props.extension);
-				case 'operation':
-					return getOperation(props.extension);
-				default:
-					return null;
-			}
-		});
+		const extensionInfo = useExtension(props.type, props.extension);
 
 		const usesCustomComponent = computed(() => {
 			if (!extensionInfo.value) return false;
diff --git a/app/src/modules/settings/routes/data-model/field-detail/store/alterations/global.ts b/app/src/modules/settings/routes/data-model/field-detail/store/alterations/global.ts
index 268248057a..307ccd5c9e 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/store/alterations/global.ts
+++ b/app/src/modules/settings/routes/data-model/field-detail/store/alterations/global.ts
@@ -1,6 +1,6 @@
+import { useExtension } from '@/composables/use-extension';
 import { set } from 'lodash';
 import { State, StateUpdates } from '../types';
-import { getInterface } from '@/interfaces';
 
 /**
  * In case a relational field removed the schema object, we'll have to make sure it's re-added
@@ -20,11 +20,11 @@ export function resetSchema(updates: StateUpdates, state: State) {
 export function setLocalTypeForInterface(updates: StateUpdates) {
 	if (!updates.field?.meta?.interface) return;
 
-	const chosenInterface = getInterface(updates.field.meta.interface);
+	const chosenInterface = useExtension('interface', updates.field.meta.interface);
 
-	if (!chosenInterface) return;
+	if (!chosenInterface.value) return;
 
-	const localType = chosenInterface?.localTypes?.[0] ?? 'standard';
+	const localType = chosenInterface.value?.localTypes?.[0] ?? 'standard';
 	set(updates, 'localType', localType);
 }
 
@@ -36,13 +36,13 @@ export function setLocalTypeForInterface(updates: StateUpdates) {
 export function setTypeForInterface(updates: StateUpdates, state: State) {
 	if (!updates.field?.meta?.interface) return;
 
-	const chosenInterface = getInterface(updates.field.meta.interface);
+	const chosenInterface = useExtension('interface', updates.field.meta.interface);
 
-	if (!chosenInterface) return updates;
+	if (!chosenInterface.value) return updates;
 
-	if (state.field.type && chosenInterface.types.includes(state.field.type)) return;
+	if (state.field.type && chosenInterface.value.types.includes(state.field.type)) return;
 
-	const defaultType = chosenInterface?.types[0];
+	const defaultType = chosenInterface.value?.types[0];
 	set(updates, 'field.type', defaultType);
 }
 
diff --git a/app/src/modules/settings/routes/data-model/field-detail/store/alterations/standard.ts b/app/src/modules/settings/routes/data-model/field-detail/store/alterations/standard.ts
index 6db3b68eba..74ac6d5fc8 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/store/alterations/standard.ts
+++ b/app/src/modules/settings/routes/data-model/field-detail/store/alterations/standard.ts
@@ -1,6 +1,6 @@
 import { HelperFunctions, State, StateUpdates } from '../types';
-import { getInterface } from '@/interfaces';
 import { set } from 'lodash';
+import { useExtension } from '@/composables/use-extension';
 import { getSpecialForType } from '@/utils/get-special-for-type';
 
 export function applyChanges(updates: StateUpdates, _state: State, helperFn: HelperFunctions) {
@@ -20,9 +20,10 @@ function setSpecialForType(updates: StateUpdates) {
 }
 
 function updateInterface(updates: StateUpdates, fn: HelperFunctions) {
-	const interface_ = getInterface(fn.getCurrent('field.meta.interface'));
+	const inter = useExtension('interface', fn.getCurrent('field.meta.interface'));
+
 	const type = updates.field?.type;
-	if (type && !interface_?.types.includes(type)) {
+	if (type && !inter.value?.types.includes(type)) {
 		set(updates, 'field.meta.interface', undefined);
 	}
 }
diff --git a/app/src/modules/settings/routes/data-model/field-detail/store/index.ts b/app/src/modules/settings/routes/data-model/field-detail/store/index.ts
index a3baee5109..277bea8881 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/store/index.ts
+++ b/app/src/modules/settings/routes/data-model/field-detail/store/index.ts
@@ -1,6 +1,4 @@
 import { defineStore } from 'pinia';
-import { getInterfaces } from '@/interfaces';
-import { getDisplays } from '@/displays';
 import { has, isEmpty, orderBy, cloneDeep } from 'lodash';
 import {
 	InterfaceConfig,
@@ -22,6 +20,7 @@ import { useRelationsStore } from '@/stores/relations';
 import * as alterations from './alterations';
 import { getLocalTypeForField } from '@/utils/get-local-type';
 import api from '@/api';
+import { useExtensions } from '@/extensions';
 
 export function syncFieldDetailStoreProperty(path: string, defaultValue?: any) {
 	const fieldDetailStore = useFieldDetailStore();
@@ -259,7 +258,7 @@ export const useFieldDetailStore = defineStore({
 			return missing.length === 0;
 		},
 		interfacesForType(): InterfaceConfig[] {
-			const { interfaces } = getInterfaces();
+			const { interfaces } = useExtensions();
 
 			return orderBy(
 				interfaces.value.filter((inter: InterfaceConfig) => {
@@ -275,7 +274,7 @@ export const useFieldDetailStore = defineStore({
 			);
 		},
 		displaysForType(): DisplayConfig[] {
-			const { displays } = getDisplays();
+			const { displays } = useExtensions();
 
 			return orderBy(
 				displays.value.filter((inter: DisplayConfig) => {
diff --git a/app/src/modules/settings/routes/data-model/fields/components/field-select.vue b/app/src/modules/settings/routes/data-model/fields/components/field-select.vue
index 6ee05f6614..f33812ab2a 100644
--- a/app/src/modules/settings/routes/data-model/fields/components/field-select.vue
+++ b/app/src/modules/settings/routes/data-model/fields/components/field-select.vue
@@ -148,7 +148,6 @@ import { useI18n } from 'vue-i18n';
 import { defineComponent, PropType, ref, computed } from 'vue';
 import { useCollectionsStore } from '@/stores/collections';
 import { useFieldsStore } from '@/stores/fields';
-import { getInterface } from '@/interfaces';
 import { useRouter } from 'vue-router';
 import { cloneDeep } from 'lodash';
 import { getLocalTypeForField } from '@/utils/get-local-type';
@@ -160,6 +159,7 @@ import FieldSelectMenu from './field-select-menu.vue';
 import { hideDragImage } from '@/utils/hide-drag-image';
 import Draggable from 'vuedraggable';
 import formatTitle from '@directus/format-title';
+import { useExtension } from '@/composables/use-extension';
 
 export default defineComponent({
 	name: 'FieldSelect',
@@ -192,7 +192,11 @@ export default defineComponent({
 		const { deleteActive, deleting, deleteField } = useDeleteField();
 		const { duplicateActive, duplicateName, collections, duplicateTo, saveDuplicate, duplicating } = useDuplicate();
 
-		const interfaceName = computed(() => getInterface(props.field.meta?.interface)?.name);
+		const inter = useExtension(
+			'interface',
+			computed(() => props.field.meta?.interface ?? null)
+		);
+		const interfaceName = computed(() => inter.value?.name ?? null);
 
 		const hidden = computed(() => props.field.meta?.hidden === true);
 
diff --git a/app/src/modules/settings/routes/flows/components/logs-sidebar-detail.vue b/app/src/modules/settings/routes/flows/components/logs-sidebar-detail.vue
index 1d0ca45d5e..bd1d4ebbde 100644
--- a/app/src/modules/settings/routes/flows/components/logs-sidebar-detail.vue
+++ b/app/src/modules/settings/routes/flows/components/logs-sidebar-detail.vue
@@ -79,7 +79,7 @@
 
 <script lang="ts" setup>
 import { useRevisions } from '@/composables/use-revisions';
-import { getOperations } from '@/operations';
+import { useExtensions } from '@/extensions';
 import { Action, FlowRaw } from '@directus/shared/types';
 import { computed, ref, toRefs, unref } from 'vue';
 import { useI18n } from 'vue-i18n';
@@ -96,7 +96,7 @@ const props = defineProps<Props>();
 const { flow } = toRefs(props);
 
 const { triggers } = getTriggers();
-const { operations } = getOperations();
+const { operations } = useExtensions();
 
 const usedTrigger = computed(() => {
 	return triggers.find((trigger) => trigger.id === unref(flow).trigger);
diff --git a/app/src/modules/settings/routes/flows/components/operation-detail.vue b/app/src/modules/settings/routes/flows/components/operation-detail.vue
index 47ddb41471..279237e055 100644
--- a/app/src/modules/settings/routes/flows/components/operation-detail.vue
+++ b/app/src/modules/settings/routes/flows/components/operation-detail.vue
@@ -45,7 +45,7 @@
 			<v-notice v-if="operationType && !selectedOperation" class="not-found" type="danger">
 				{{ t('operation_not_found', { operation: operationType }) }}
 				<div class="spacer" />
-				<button @click="operationType = undefined">{{ t('reset_interface') }}</button>
+				<button @click="operationType = null">{{ t('reset_interface') }}</button>
 			</v-notice>
 
 			<extension-options
@@ -68,12 +68,13 @@
 <script setup lang="ts">
 import { useDialogRoute } from '@/composables/use-dialog-route';
 import ExtensionOptions from '@/modules/settings/routes/data-model/field-detail/shared/extension-options.vue';
-import { getOperation, getOperations } from '@/operations';
 import { translate } from '@/utils/translate-object-values';
 import { FlowRaw } from '@directus/shared/types';
 import slugify from '@sindresorhus/slugify';
 import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useExtensions } from '@/extensions';
+import { useExtension } from '@/composables/use-extension';
 import { customAlphabet } from 'nanoid/non-secure';
 
 const generateSuffix = customAlphabet('abcdefghijklmnopqrstuvwxyz1234567890', 5);
@@ -98,7 +99,7 @@ const isOpen = useDialogRoute();
 const { t } = useI18n();
 
 const options = ref<Record<string, any>>(props.operation?.options ?? {});
-const operationType = ref<string | undefined>(props.operation?.type);
+const operationType = ref<string | null>(props.operation?.type ?? null);
 const operationKey = ref<string | null>(props.operation?.key ?? null);
 const operationName = ref<string | null>(props.operation?.name ?? null);
 
@@ -149,7 +150,7 @@ watch(
 	{ immediate: true }
 );
 
-const selectedOperation = computed(() => getOperation(operationType.value));
+const selectedOperation = useExtension('operation', operationType);
 
 const generatedName = computed(() => (selectedOperation.value ? selectedOperation.value?.name : t('operation_name')));
 
@@ -159,7 +160,7 @@ const generatedKey = computed(() =>
 		: t('operation_key')
 );
 
-const { operations } = getOperations();
+const { operations } = useExtensions();
 
 const displayOperations = computed(() => {
 	return operations.value.map((operation) => ({
diff --git a/app/src/modules/settings/routes/flows/components/operation.vue b/app/src/modules/settings/routes/flows/components/operation.vue
index 168deb0280..7a92bca857 100644
--- a/app/src/modules/settings/routes/flows/components/operation.vue
+++ b/app/src/modules/settings/routes/flows/components/operation.vue
@@ -136,7 +136,7 @@
 
 <script lang="ts" setup>
 import { useClipboard } from '@/composables/use-clipboard';
-import { getOperations } from '@/operations';
+import { useExtensions } from '@/extensions';
 import { translate } from '@/utils/translate-object-values';
 import { Vector2 } from '@/utils/vector2';
 import { FlowRaw } from '@directus/shared/types';
@@ -174,7 +174,7 @@ const props = withDefaults(
 
 const { panelsToBeDeleted } = toRefs(props);
 
-const { operations } = getOperations();
+const { operations } = useExtensions();
 const { triggers } = getTriggers();
 
 const emit = defineEmits([
diff --git a/app/src/modules/settings/routes/flows/flow.vue b/app/src/modules/settings/routes/flows/flow.vue
index 2ded3f5570..d77544ebf8 100644
--- a/app/src/modules/settings/routes/flows/flow.vue
+++ b/app/src/modules/settings/routes/flows/flow.vue
@@ -201,7 +201,7 @@ import { Vector2 } from '@/utils/vector2';
 import FlowDrawer from './flow-drawer.vue';
 
 import LogsSidebarDetail from './components/logs-sidebar-detail.vue';
-import { getOperations } from '@/operations';
+import { useExtensions } from '@/extensions';
 
 // Maps the x and y coordinates of attachments of panels to their id
 export type Attachments = Record<number, Record<number, string>>;
@@ -263,7 +263,7 @@ async function deleteFlow() {
 
 // ------------- Manage Panels ------------- //
 
-const { operations } = getOperations();
+const { operations } = useExtensions();
 
 const triggerDetailOpen = ref(false);
 const stagedPanels = ref<Partial<OperationRaw & { borderRadius: [boolean, boolean, boolean, boolean] }>[]>([]);
diff --git a/app/src/modules/settings/routes/presets/collection/collection.vue b/app/src/modules/settings/routes/presets/collection/collection.vue
index 60ae3e6053..02112fb7c6 100644
--- a/app/src/modules/settings/routes/presets/collection/collection.vue
+++ b/app/src/modules/settings/routes/presets/collection/collection.vue
@@ -155,8 +155,8 @@ import { usePermissionsStore } from '@/stores/permissions';
 import { useUserStore } from '@/stores/user';
 import { usePresetsStore } from '@/stores/presets';
 import DrawerBatch from '@/views/private/components/drawer-batch.vue';
-import { getLayouts } from '@/layouts';
 import { usePreset } from '@/composables/use-preset';
+import { useExtension } from '@/composables/use-extension';
 
 export default defineComponent({
 	name: 'ContentCollection',
@@ -175,7 +175,6 @@ export default defineComponent({
 
 		const { t } = useI18n();
 
-		const { layouts } = getLayouts();
 		const userStore = useUserStore();
 		const permissionsStore = usePermissionsStore();
 		const layoutRef = ref();
@@ -187,7 +186,7 @@ export default defineComponent({
 
 		const { confirmDelete, deleting, batchDelete, error: deleteError, batchEditActive } = useBatch();
 
-		const currentLayout = computed(() => layouts.value.find((l) => l.id === layout.value));
+		const currentLayout = useExtension('layout', layout);
 
 		const { batchEditAllowed, batchDeleteAllowed, createAllowed } = usePermissions();
 
diff --git a/app/src/modules/settings/routes/presets/item.vue b/app/src/modules/settings/routes/presets/item.vue
index 3ad68ffb99..f152076197 100644
--- a/app/src/modules/settings/routes/presets/item.vue
+++ b/app/src/modules/settings/routes/presets/item.vue
@@ -138,13 +138,13 @@ import { Preset, Filter } from '@directus/shared/types';
 import api from '@/api';
 import { useCollectionsStore } from '@/stores/collections';
 import { usePresetsStore } from '@/stores/presets';
-import { getLayouts } from '@/layouts';
 import { useRouter } from 'vue-router';
 import { unexpectedError } from '@/utils/unexpected-error';
 import { useLayout } from '@directus/shared/composables';
 import { useShortcut } from '@/composables/use-shortcut';
 import { useEditsGuard } from '@/composables/use-edits-guard';
 import { isEqual } from 'lodash';
+import { useExtensions } from '@/extensions';
 
 type FormattedPreset = {
 	id: number;
@@ -174,7 +174,7 @@ const router = useRouter();
 
 const collectionsStore = useCollectionsStore();
 const presetsStore = usePresetsStore();
-const { layouts } = getLayouts();
+const { layouts } = useExtensions();
 
 const isNew = computed(() => props.id === '+');
 
diff --git a/app/src/operations/index.ts b/app/src/operations/index.ts
index 5820dcbc82..d3e2570c9e 100644
--- a/app/src/operations/index.ts
+++ b/app/src/operations/index.ts
@@ -1,13 +1,29 @@
-import { shallowRef, Ref } from 'vue';
+import { App } from 'vue';
 import { OperationAppConfig } from '@directus/shared/types';
+import { sortBy } from 'lodash';
 
-const operationsRaw: Ref<OperationAppConfig[]> = shallowRef([]);
-const operations: Ref<OperationAppConfig[]> = shallowRef([]);
+export function getInternalOperations(): OperationAppConfig[] {
+	const operations = import.meta.glob<OperationAppConfig>('./*/index.ts', { import: 'default', eager: true });
 
-export function getOperations(): { operations: Ref<OperationAppConfig[]>; operationsRaw: Ref<OperationAppConfig[]> } {
-	return { operations, operationsRaw };
+	return sortBy(Object.values(operations), 'id');
 }
 
-export function getOperation(name?: string | null): OperationAppConfig | undefined {
-	return !name ? undefined : operations.value.find(({ id }) => id === name);
+export function registerOperations(operations: OperationAppConfig[], app: App): void {
+	for (const operation of operations) {
+		if (
+			typeof operation.overview !== 'function' &&
+			Array.isArray(operation.overview) === false &&
+			operation.overview !== null
+		) {
+			app.component(`operation-overview-${operation.id}`, operation.overview);
+		}
+
+		if (
+			typeof operation.options !== 'function' &&
+			Array.isArray(operation.options) === false &&
+			operation.options !== null
+		) {
+			app.component(`operation-options-${operation.id}`, operation.options);
+		}
+	}
 }
diff --git a/app/src/operations/register.ts b/app/src/operations/register.ts
deleted file mode 100644
index cc4061b49b..0000000000
--- a/app/src/operations/register.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { getRootPath } from '@/utils/get-root-path';
-import { App } from 'vue';
-import { getOperations } from './index';
-import { OperationAppConfig } from '@directus/shared/types';
-
-const { operationsRaw } = getOperations();
-
-export async function registerOperations(app: App): Promise<void> {
-	const operationModules = import.meta.globEager('./*/**/index.ts');
-
-	const operations: OperationAppConfig[] = Object.values(operationModules).map((module) => module.default);
-
-	try {
-		const customOperations: { default: OperationAppConfig[] } = import.meta.env.DEV
-			? await import('@directus-extensions-operation')
-			: await import(/* @vite-ignore */ `${getRootPath()}extensions/operations/index.js`);
-
-		operations.push(...customOperations.default);
-	} catch (err: any) {
-		// eslint-disable-next-line no-console
-		console.warn(`Couldn't load custom operations`);
-		// eslint-disable-next-line no-console
-		console.warn(err);
-	}
-
-	operationsRaw.value = operations;
-
-	operationsRaw.value.forEach((operation: OperationAppConfig) => {
-		if (
-			typeof operation.overview !== 'function' &&
-			Array.isArray(operation.overview) === false &&
-			operation.overview !== null
-		) {
-			app.component(`operation-overview-${operation.id}`, operation.overview);
-		}
-
-		if (
-			typeof operation.options !== 'function' &&
-			Array.isArray(operation.options) === false &&
-			operation.options !== null
-		) {
-			app.component(`operation-options-${operation.id}`, operation.options);
-		}
-	});
-}
diff --git a/app/src/panels/index.ts b/app/src/panels/index.ts
index 3e9285e6d8..28f4173281 100644
--- a/app/src/panels/index.ts
+++ b/app/src/panels/index.ts
@@ -1,13 +1,19 @@
-import { shallowRef, Ref } from 'vue';
+import { App } from 'vue';
 import { PanelConfig } from '@directus/shared/types';
+import { sortBy } from 'lodash';
 
-const panelsRaw: Ref<PanelConfig[]> = shallowRef([]);
-const panels: Ref<PanelConfig[]> = shallowRef([]);
+export function getInternalPanels(): PanelConfig[] {
+	const panels = import.meta.glob<PanelConfig>('./*/index.ts', { import: 'default', eager: true });
 
-export function getPanels(): { panels: Ref<PanelConfig[]>; panelsRaw: Ref<PanelConfig[]> } {
-	return { panels, panelsRaw };
+	return sortBy(Object.values(panels), 'id');
 }
 
-export function getPanel(name?: string | null): PanelConfig | undefined {
-	return !name ? undefined : panels.value.find(({ id }) => id === name);
+export function registerPanels(panels: PanelConfig[], app: App): void {
+	for (const panel of panels) {
+		app.component(`panel-${panel.id}`, panel.component);
+
+		if (typeof panel.options !== 'function' && Array.isArray(panel.options) === false && panel.options !== null) {
+			app.component(`panel-options-${panel.id}`, panel.options);
+		}
+	}
 }
diff --git a/app/src/panels/register.ts b/app/src/panels/register.ts
deleted file mode 100644
index 1345c5cc3b..0000000000
--- a/app/src/panels/register.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { getRootPath } from '@/utils/get-root-path';
-import { App } from 'vue';
-import { getPanels } from './index';
-import { PanelConfig } from '@directus/shared/types';
-
-const { panelsRaw } = getPanels();
-
-export async function registerPanels(app: App): Promise<void> {
-	const panelModules = import.meta.globEager('./*/**/index.ts');
-
-	const panels: PanelConfig[] = Object.values(panelModules).map((module) => module.default);
-
-	try {
-		const customPanels: { default: PanelConfig[] } = import.meta.env.DEV
-			? await import('@directus-extensions-panel')
-			: await import(/* @vite-ignore */ `${getRootPath()}extensions/panels/index.js`);
-
-		panels.push(...customPanels.default);
-	} catch (err: any) {
-		// eslint-disable-next-line no-console
-		console.warn(`Couldn't load custom panels`);
-		// eslint-disable-next-line no-console
-		console.warn(err);
-	}
-
-	panelsRaw.value = panels;
-
-	panelsRaw.value.forEach((panel: PanelConfig) => {
-		app.component(`panel-${panel.id}`, panel.component);
-
-		if (typeof panel.options !== 'function' && Array.isArray(panel.options) === false && panel.options !== null) {
-			app.component(`panel-options-${panel.id}`, panel.options);
-		}
-	});
-}
diff --git a/app/src/shims.d.ts b/app/src/shims.d.ts
index 4fe2f6008f..744ebfbcd3 100644
--- a/app/src/shims.d.ts
+++ b/app/src/shims.d.ts
@@ -33,38 +33,4 @@ declare module 'frappe-charts/src/js/charts/AxisChart' {
 	}
 }
 
-declare module '@directus-extensions-operation' {
-	import { OperationAppConfig } from '@directus/shared/types';
-	const operations: OperationAppConfig[];
-	export default operations;
-}
-
-declare module '@directus-extensions-interface' {
-	import { InterfaceConfig } from '@directus/shared/types';
-	const interfaces: InterfaceConfig[];
-	export default interfaces;
-}
-
-declare module '@directus-extensions-display' {
-	import { DisplayConfig } from '@directus/shared/types';
-	const displays: DisplayConfig[];
-	export default displays;
-}
-
-declare module '@directus-extensions-layout' {
-	import { LayoutConfig } from '@directus/shared/types';
-	const layouts: LayoutConfig[];
-	export default layouts;
-}
-
-declare module '@directus-extensions-panel' {
-	import { PanelConfig } from '@directus/shared/types';
-	const panel: PanelConfig[];
-	export default panel;
-}
-
-declare module '@directus-extensions-module' {
-	import { ModuleConfig } from '@directus/shared/types';
-	const modules: ModuleConfig[];
-	export default modules;
-}
+declare module '@directus-extensions' {}
diff --git a/app/src/stores/insights.ts b/app/src/stores/insights.ts
index a041c2e517..acceaa4964 100644
--- a/app/src/stores/insights.ts
+++ b/app/src/stores/insights.ts
@@ -1,5 +1,4 @@
 import api from '@/api';
-import { getPanels } from '@/panels';
 import { usePermissionsStore } from '@/stores/permissions';
 import { queryToGqlString } from '@/utils/query-to-gql-string';
 import { unexpectedError } from '@/utils/unexpected-error';
@@ -12,6 +11,7 @@ import { acceptHMRUpdate, defineStore } from 'pinia';
 import { computed, reactive, ref, unref } from 'vue';
 import { Dashboard } from '../types';
 import escapeStringRegexp from 'escape-string-regexp';
+import { useExtensions } from '@/extensions';
 
 export type CreatePanel = Partial<Panel> &
 	Pick<Panel, 'id' | 'width' | 'height' | 'position_x' | 'position_y' | 'type' | 'options'>;
@@ -72,7 +72,7 @@ export const useInsightsStore = defineStore('insightsStore', () => {
 		];
 	});
 
-	const { panels: panelTypes } = getPanels();
+	const { panels: panelTypes } = useExtensions();
 
 	return {
 		dashboards,
diff --git a/app/src/utils/adjust-fields-for-displays.ts b/app/src/utils/adjust-fields-for-displays.ts
index bb2a6bcc98..497705d731 100644
--- a/app/src/utils/adjust-fields-for-displays.ts
+++ b/app/src/utils/adjust-fields-for-displays.ts
@@ -1,6 +1,7 @@
-import { getDisplay } from '@/displays';
+import { useExtension } from '@/composables/use-extension';
 import { useFieldsStore } from '@/stores/fields';
 import { Field } from '@directus/shared/types';
+import { computed } from 'vue';
 
 export function adjustFieldsForDisplays(fields: readonly string[], parentCollection: string): string[] {
 	const fieldsStore = useFieldsStore();
@@ -12,19 +13,22 @@ export function adjustFieldsForDisplays(fields: readonly string[], parentCollect
 			if (!field) return fieldKey;
 			if (field.meta?.display === null) return fieldKey;
 
-			const display = getDisplay(field.meta?.display);
+			const display = useExtension(
+				'display',
+				computed(() => field.meta?.display ?? null)
+			);
 
 			if (!display) return fieldKey;
-			if (!display?.fields) return fieldKey;
+			if (!display.value?.fields) return fieldKey;
 
 			let fieldKeys: string[] | null = null;
 
-			if (Array.isArray(display.fields)) {
-				fieldKeys = display.fields.map((relatedFieldKey: string) => `${fieldKey}.${relatedFieldKey}`);
+			if (Array.isArray(display.value.fields)) {
+				fieldKeys = display.value.fields.map((relatedFieldKey: string) => `${fieldKey}.${relatedFieldKey}`);
 			}
 
-			if (typeof display.fields === 'function') {
-				fieldKeys = display
+			if (typeof display.value.fields === 'function') {
+				fieldKeys = display.value
 					.fields(field.meta?.display_options, {
 						collection: field.collection,
 						field: field.field,
diff --git a/app/src/utils/render-string-template.ts b/app/src/utils/render-string-template.ts
index 8ca7052bb9..242cb1a9d0 100644
--- a/app/src/utils/render-string-template.ts
+++ b/app/src/utils/render-string-template.ts
@@ -1,11 +1,11 @@
 import { useAliasFields } from '@/composables/use-alias-fields';
-import { getDisplay } from '@/displays';
 import { useFieldsStore } from '@/stores/fields';
-import { DisplayConfig, Field } from '@directus/shared/types';
+import { Field } from '@directus/shared/types';
 import { getFieldsFromTemplate } from '@directus/shared/utils';
 import { render, renderFn } from 'micromustache';
 import { computed, ComputedRef, Ref, ref, unref } from 'vue';
 import { get, set } from 'lodash';
+import { useExtension } from '@/composables/use-extension';
 
 type StringTemplate = {
 	fieldsInTemplate: ComputedRef<string[]>;
@@ -77,18 +77,17 @@ export function renderDisplayStringTemplate(
 				? get(item, key)
 				: get(item, aliasFields.value[key].fullAlias);
 
-		let display: DisplayConfig | undefined;
-
-		if (fieldsUsed[key]?.meta?.display) {
-			display = getDisplay(fieldsUsed[key]!.meta!.display);
-		}
+		const display = useExtension(
+			'display',
+			computed(() => fieldsUsed[key]?.meta?.display ?? null)
+		);
 
 		if (value !== undefined && value !== null) {
 			set(
 				parsedItem,
 				key,
-				display?.handler
-					? display.handler(value, fieldsUsed[key]?.meta?.display_options ?? {}, {
+				display.value?.handler
+					? display.value.handler(value, fieldsUsed[key]?.meta?.display_options ?? {}, {
 							interfaceOptions: fieldsUsed[key]?.meta?.options ?? {},
 							field: fieldsUsed[key] ?? undefined,
 							collection: collection,
diff --git a/app/src/utils/save-as-csv.ts b/app/src/utils/save-as-csv.ts
index 0dded985d4..ef6ff87cd1 100644
--- a/app/src/utils/save-as-csv.ts
+++ b/app/src/utils/save-as-csv.ts
@@ -1,11 +1,11 @@
 import { useAliasFields } from '@/composables/use-alias-fields';
-import { getDisplay } from '@/displays';
 import { useFieldsStore } from '@/stores/fields';
 import { get } from '@directus/shared/utils';
-import { DisplayConfig, Field, Item } from '@directus/shared/types';
+import { Field, Item } from '@directus/shared/types';
 import { saveAs } from 'file-saver';
 import { parse } from 'json2csv';
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
+import { useExtension } from '@/composables/use-extension';
 
 /**
  * Saves the given collection + items combination as a CSV file
@@ -48,15 +48,14 @@ export async function saveAsCSV(collection: string, fields: string[], items: Ite
 					? get(item, key)
 					: get(item, aliasFields.value[key].fullAlias);
 
-			let display: DisplayConfig | undefined;
-
-			if (fieldsUsed[key]?.meta?.display) {
-				display = getDisplay(fieldsUsed[key]!.meta!.display);
-			}
+			const display = useExtension(
+				'display',
+				computed(() => fieldsUsed[key]?.meta?.display ?? null)
+			);
 
 			if (value !== undefined && value !== null) {
-				parsedItem[name] = display?.handler
-					? await display.handler(value, fieldsUsed[key]?.meta?.display_options ?? {}, {
+				parsedItem[name] = display.value?.handler
+					? await display.value.handler(value, fieldsUsed[key]?.meta?.display_options ?? {}, {
 							interfaceOptions: fieldsUsed[key]?.meta?.options ?? {},
 							field: fieldsUsed[key] ?? undefined,
 							collection: collection,
diff --git a/app/src/views/private/components/layout-sidebar-detail.vue b/app/src/views/private/components/layout-sidebar-detail.vue
index b46804f7c3..712da87db1 100644
--- a/app/src/views/private/components/layout-sidebar-detail.vue
+++ b/app/src/views/private/components/layout-sidebar-detail.vue
@@ -18,8 +18,9 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent, computed } from 'vue';
-import { getLayouts, getLayout } from '@/layouts';
 import { useSync } from '@directus/shared/composables';
+import { useExtensions } from '@/extensions';
+import { useExtension } from '@/composables/use-extension';
 
 export default defineComponent({
 	props: {
@@ -32,9 +33,11 @@ export default defineComponent({
 	setup(props, { emit }) {
 		const { t } = useI18n();
 
-		const { layouts } = getLayouts();
+		const { layouts } = useExtensions();
 
-		const currentLayout = computed(() => getLayout(props.modelValue) ?? getLayout('tabular'));
+		const selectedLayout = useExtension('layout', props.modelValue);
+		const fallbackLayout = useExtension('layout', 'tabular');
+		const currentLayout = computed(() => selectedLayout.value ?? fallbackLayout.value);
 
 		const layout = useSync(props, 'modelValue', emit);
 
diff --git a/app/src/views/private/components/module-bar.vue b/app/src/views/private/components/module-bar.vue
index fc05f2ace3..0be0ee61e8 100644
--- a/app/src/views/private/components/module-bar.vue
+++ b/app/src/views/private/components/module-bar.vue
@@ -30,13 +30,13 @@
 
 <script lang="ts">
 import { defineComponent, computed } from 'vue';
-import { getModules } from '@/modules/';
 import ModuleBarLogo from './module-bar-logo.vue';
 import ModuleBarAvatar from './module-bar-avatar.vue';
 import { useSettingsStore } from '@/stores/settings';
 import { translate } from '@/utils/translate-object-values';
 import { MODULE_BAR_DEFAULT } from '@/constants';
 import { omit } from 'lodash';
+import { useExtensions } from '@/extensions';
 
 export default defineComponent({
 	components: {
@@ -45,7 +45,7 @@ export default defineComponent({
 	},
 	setup() {
 		const settingsStore = useSettingsStore();
-		const { modules: registeredModules } = getModules();
+		const { modules: registeredModules } = useExtensions();
 
 		const registeredModuleIDs = computed(() => registeredModules.value.map((module) => module.id));
 
diff --git a/app/src/views/private/components/render-display.vue b/app/src/views/private/components/render-display.vue
index e148d58ee8..ccc1904072 100644
--- a/app/src/views/private/components/render-display.vue
+++ b/app/src/views/private/components/render-display.vue
@@ -15,9 +15,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from 'vue';
-import { getDisplay } from '@/displays';
+import { defineComponent } from 'vue';
 import { translate } from '@/utils/translate-object-values';
+import { useExtension } from '@/composables/use-extension';
 
 export default defineComponent({
 	props: {
@@ -55,7 +55,8 @@ export default defineComponent({
 		},
 	},
 	setup(props) {
-		const displayInfo = computed(() => getDisplay(props.display));
+		const displayInfo = useExtension('display', props.display);
+
 		return { displayInfo, translate };
 	},
 });
diff --git a/app/src/views/private/components/render-template.vue b/app/src/views/private/components/render-template.vue
index 60f18e4e1f..3d2013f17b 100644
--- a/app/src/views/private/components/render-template.vue
+++ b/app/src/views/private/components/render-template.vue
@@ -25,9 +25,9 @@ import { computed, ref } from 'vue';
 import { useFieldsStore } from '@/stores/fields';
 import { get } from 'lodash';
 import { Field } from '@directus/shared/types';
-import { getDisplay } from '@/displays';
 import { getDefaultDisplayForType } from '@/utils/get-default-display-for-type';
 import { translate } from '@/utils/translate-object-values';
+import { useExtension } from '@/composables/use-extension';
 
 interface Props {
 	template: string;
@@ -79,12 +79,15 @@ function handleArray(fieldKeyBefore: string, fieldKeyAfter: string) {
 
 	if (!field) return value;
 
-	const displayInfo = getDisplay(field.meta?.display);
+	const displayInfo = useExtension(
+		'display',
+		computed(() => field.meta?.display ?? null)
+	);
 
 	let component = field.meta?.display;
 	let options = field.meta?.display_options;
 
-	if (!displayInfo) {
+	if (!displayInfo.value) {
 		component = 'related-values';
 		options = { template: `{{${fieldKeyAfter}}}` };
 	}
@@ -131,10 +134,13 @@ function handleObject(fieldKey: string) {
 	// No need to render the empty display overhead in this case
 	if (display === 'raw') return value;
 
-	const displayInfo = getDisplay(field.meta?.display);
+	const displayInfo = useExtension(
+		'display',
+		computed(() => field.meta?.display ?? null)
+	);
 
 	// If used display doesn't exist in the current project, return raw value
-	if (!displayInfo) return value;
+	if (!displayInfo.value) return value;
 
 	return {
 		component: field.meta?.display,
diff --git a/app/vite.config.js b/app/vite.config.js
index a4338e4852..c6c2042583 100644
--- a/app/vite.config.js
+++ b/app/vite.config.js
@@ -5,7 +5,7 @@ import {
 } from '@directus/shared/constants';
 import {
 	ensureExtensionDirs,
-	generateExtensionsEntry,
+	generateExtensionsEntrypoint,
 	getLocalExtensions,
 	getPackageExtensions,
 } from '@directus/shared/utils/node';
@@ -156,6 +156,7 @@ export default defineConfig({
 	},
 	test: {
 		environment: 'happy-dom',
+		setupFiles: ['src/__setup__/mock-globals.ts'],
 	},
 });
 
@@ -170,10 +171,9 @@ function getExtensionsRealPaths() {
 }
 
 function directusExtensions() {
-	const prefix = '@directus-extensions-';
-	const virtualIds = APP_OR_HYBRID_EXTENSION_TYPES.map((type) => `${prefix}${type}`);
+	const virtualExtensionsId = '@directus-extensions';
 
-	let extensionEntrypoints = {};
+	let extensionsEntrypoint = null;
 
 	return [
 		{
@@ -188,15 +188,13 @@ function directusExtensions() {
 				await loadExtensions();
 			},
 			resolveId(id) {
-				if (virtualIds.includes(id)) {
+				if (id === virtualExtensionsId) {
 					return id;
 				}
 			},
 			load(id) {
-				if (virtualIds.includes(id)) {
-					const extensionType = id.substring(prefix.length);
-
-					return extensionEntrypoints[extensionType];
+				if (id === virtualExtensionsId) {
+					return extensionsEntrypoint;
 				}
 			},
 		},
@@ -213,7 +211,7 @@ function directusExtensions() {
 						output: {
 							entryFileNames: 'assets/[name].[hash].entry.js',
 						},
-						external: virtualIds,
+						external: [virtualExtensionsId],
 						preserveEntrySignatures: 'exports-only',
 					},
 				},
@@ -228,8 +226,6 @@ function directusExtensions() {
 
 		const extensions = [...packageExtensions, ...localExtensions];
 
-		for (const extensionType of APP_OR_HYBRID_EXTENSION_TYPES) {
-			extensionEntrypoints[extensionType] = generateExtensionsEntry(extensionType, extensions);
-		}
+		extensionsEntrypoint = generateExtensionsEntrypoint(extensions);
 	}
 }
diff --git a/packages/create-directus-extension/lib/index.js b/packages/create-directus-extension/lib/index.js
index 9762a1e47b..ccf86685ac 100755
--- a/packages/create-directus-extension/lib/index.js
+++ b/packages/create-directus-extension/lib/index.js
@@ -2,7 +2,7 @@
 'use strict';
 
 const inquirer = require('inquirer');
-const { EXTENSION_TYPES, EXTENSION_LANGUAGES } = require('@directus/shared/constants');
+const { EXTENSION_LANGUAGES, EXTENSION_PACKAGE_TYPES, EXTENSION_TYPES } = require('@directus/shared/constants');
 const { create } = require('@directus/extensions-sdk/cli');
 
 run();
@@ -16,7 +16,7 @@ async function run() {
 			type: 'list',
 			name: 'type',
 			message: 'Choose the extension type',
-			choices: EXTENSION_TYPES,
+			choices: EXTENSION_PACKAGE_TYPES,
 		},
 		{
 			type: 'input',
@@ -28,6 +28,7 @@ async function run() {
 			name: 'language',
 			message: 'Choose the language to use',
 			choices: EXTENSION_LANGUAGES,
+			when: ({ type }) => EXTENSION_TYPES.includes(type),
 		},
 	]);
 
diff --git a/packages/extensions-sdk/package.json b/packages/extensions-sdk/package.json
index 8bdca41a7a..265f156d0f 100644
--- a/packages/extensions-sdk/package.json
+++ b/packages/extensions-sdk/package.json
@@ -54,11 +54,13 @@
 		"@rollup/plugin-node-resolve": "15.0.0",
 		"@rollup/plugin-replace": "5.0.0",
 		"@rollup/plugin-terser": "0.1.0",
+		"@rollup/plugin-virtual": "2.1.0",
 		"@vue/compiler-sfc": "3.2.41",
 		"chalk": "4.1.1",
 		"commander": "9.4.1",
 		"execa": "5.1.1",
 		"fs-extra": "10.1.0",
+		"inquirer": "^8.2.4",
 		"ora": "5.4.0",
 		"rollup": "3.2.3",
 		"rollup-plugin-styles": "4.0.0",
@@ -67,6 +69,7 @@
 	},
 	"devDependencies": {
 		"@types/fs-extra": "9.0.13",
+		"@types/inquirer": "8.2.1",
 		"npm-run-all": "4.1.5",
 		"rimraf": "3.0.2",
 		"typescript": "4.8.4"
diff --git a/packages/extensions-sdk/src/cli/commands/add.ts b/packages/extensions-sdk/src/cli/commands/add.ts
new file mode 100644
index 0000000000..48dcd32e42
--- /dev/null
+++ b/packages/extensions-sdk/src/cli/commands/add.ts
@@ -0,0 +1,304 @@
+import path from 'path';
+import chalk from 'chalk';
+import fse from 'fs-extra';
+import inquirer from 'inquirer';
+import { log } from '../utils/logger';
+import {
+	ExtensionManifestRaw,
+	ExtensionOptions,
+	ExtensionOptionsBundleEntry,
+	ExtensionType,
+} from '@directus/shared/types';
+import { isIn, isTypeIn, validateExtensionManifest } from '@directus/shared/utils';
+import { pathToRelativeUrl } from '@directus/shared/utils/node';
+import {
+	EXTENSION_LANGUAGES,
+	EXTENSION_NAME_REGEX,
+	EXTENSION_PKG_KEY,
+	EXTENSION_TYPES,
+	HYBRID_EXTENSION_TYPES,
+} from '@directus/shared/constants';
+import { getLanguageFromPath, isLanguage, languageToShort } from '../utils/languages';
+import { Language } from '../types';
+import getExtensionDevDeps from './helpers/get-extension-dev-deps';
+import execa from 'execa';
+import ora from 'ora';
+import copyTemplate from './helpers/copy-template';
+import detectJsonIndent from '../utils/detect-json-indent';
+
+export default async function add(): Promise<void> {
+	const extensionPath = process.cwd();
+	const packagePath = path.resolve('package.json');
+
+	if (!(await fse.pathExists(packagePath))) {
+		log(`Current directory is not a valid package.`, 'error');
+		process.exit(1);
+	}
+
+	const extensionManifestFile = await fse.readFile(packagePath, 'utf8');
+	const extensionManifest: ExtensionManifestRaw = JSON.parse(extensionManifestFile);
+
+	const indent = detectJsonIndent(extensionManifestFile);
+
+	if (!validateExtensionManifest(extensionManifest)) {
+		log(`Current directory is not a valid Directus extension.`, 'error');
+		process.exit(1);
+	}
+
+	const extensionOptions = extensionManifest[EXTENSION_PKG_KEY];
+
+	if (extensionOptions.type === 'pack') {
+		log(`Adding entries to extensions with type ${chalk.bold('pack')} is not currently supported.`, 'error');
+		process.exit(1);
+	}
+
+	const sourceExists = await fse.pathExists(path.resolve('src'));
+
+	if (extensionOptions.type === 'bundle') {
+		const { type, name, language, alternativeSource } = await inquirer.prompt<{
+			type: ExtensionType;
+			name: string;
+			language: Language;
+			alternativeSource?: string;
+		}>([
+			{
+				type: 'list',
+				name: 'type',
+				message: 'Choose the extension type',
+				choices: EXTENSION_TYPES,
+			},
+			{
+				type: 'input',
+				name: 'name',
+				message: 'Choose a name for the entry',
+				validate: (name: string) => (name.length === 0 ? 'Entry name can not be empty.' : true),
+			},
+			{
+				type: 'list',
+				name: 'language',
+				message: 'Choose the language to use',
+				choices: EXTENSION_LANGUAGES,
+			},
+			{
+				type: 'input',
+				name: 'alternativeSource',
+				message: 'Specify the path to the extension source',
+				when: !sourceExists && extensionOptions.entries.length > 0,
+			},
+		]);
+
+		const spinner = ora(chalk.bold('Modifying Directus extension...')).start();
+
+		const source = alternativeSource ?? 'src';
+
+		const sourcePath = path.resolve(source, name);
+
+		await fse.ensureDir(sourcePath);
+		await copyTemplate(type, extensionPath, sourcePath, language);
+
+		const newEntries: ExtensionOptionsBundleEntry[] = [
+			...extensionOptions.entries,
+			isIn(type, HYBRID_EXTENSION_TYPES)
+				? {
+						type,
+						name,
+						source: {
+							app: `${pathToRelativeUrl(source)}/${name}/app.${languageToShort(language)}`,
+							api: `${pathToRelativeUrl(source)}/${name}/api.${languageToShort(language)}`,
+						},
+				  }
+				: {
+						type,
+						name,
+						source: `${pathToRelativeUrl(source)}/${name}/index.${languageToShort(language)}`,
+				  },
+		];
+
+		const newExtensionOptions: ExtensionOptions = { ...extensionOptions, entries: newEntries };
+		const newExtensionManifest = {
+			...extensionManifest,
+			[EXTENSION_PKG_KEY]: newExtensionOptions,
+			devDependencies: await getExtensionDevDeps(
+				newEntries.map((entry) => entry.type),
+				getLanguageFromEntries(newEntries)
+			),
+		};
+
+		await fse.writeJSON(packagePath, newExtensionManifest, { spaces: indent ?? '\t' });
+
+		await execa('npm', ['install'], { cwd: extensionPath });
+
+		spinner.succeed(chalk.bold('Done'));
+	} else {
+		const { proceed } = await inquirer.prompt<{ proceed: boolean }>([
+			{
+				type: 'confirm',
+				name: 'proceed',
+				message: 'This will convert your extension to a bundle. Do you want to proceed?',
+			},
+		]);
+
+		if (!proceed) {
+			log(`Extension has not been modified.`, 'info');
+			process.exit(1);
+		}
+
+		const oldName = extensionManifest.name.match(EXTENSION_NAME_REGEX)?.[1] ?? extensionManifest.name;
+
+		const { type, name, language, convertName, extensionName, alternativeSource } = await inquirer.prompt<{
+			type: ExtensionType;
+			name: string;
+			language: Language;
+			convertName: string;
+			extensionName: string;
+			alternativeSource?: string;
+		}>([
+			{
+				type: 'list',
+				name: 'type',
+				message: 'Choose the extension type',
+				choices: EXTENSION_TYPES,
+			},
+			{
+				type: 'input',
+				name: 'name',
+				message: 'Choose a name for the entry',
+				validate: (name: string) => (name.length === 0 ? 'Entry name can not be empty.' : true),
+			},
+			{
+				type: 'list',
+				name: 'language',
+				message: 'Choose the language to use',
+				choices: EXTENSION_LANGUAGES,
+			},
+			{
+				type: 'input',
+				name: 'convertName',
+				message: 'Choose a name for the extension that is converted to an entry',
+				default: oldName,
+				validate: (name: string) => (name.length === 0 ? 'Entry name can not be empty.' : true),
+			},
+			{
+				type: 'input',
+				name: 'extensionName',
+				message: 'Choose a name for the extension',
+				default: ({ convertName }: { convertName: string }) => (convertName !== oldName ? oldName : null),
+				validate: (name: string) => (name.length === 0 ? 'Extension name can not be empty.' : true),
+			},
+			{
+				type: 'input',
+				name: 'alternativeSource',
+				message: 'Specify the path to the extension source',
+				when: !sourceExists,
+			},
+		]);
+
+		const spinner = ora(chalk.bold('Modifying Directus extension...')).start();
+
+		const source = alternativeSource ?? 'src';
+
+		const convertSourcePath = path.resolve(source, convertName);
+		const entrySourcePath = path.resolve(source, name);
+
+		const convertFiles = await fse.readdir(source);
+
+		await Promise.all(
+			convertFiles.map((file) => fse.move(path.resolve(source, file), path.join(convertSourcePath, file)))
+		);
+
+		await fse.ensureDir(entrySourcePath);
+		await copyTemplate(type, extensionPath, entrySourcePath, language);
+
+		const toConvertSourceUrl = (entrypoint: string) =>
+			path.posix.join(pathToRelativeUrl(source), convertName, path.posix.relative(source, entrypoint));
+
+		const entries: ExtensionOptionsBundleEntry[] = [
+			isTypeIn(extensionOptions, HYBRID_EXTENSION_TYPES)
+				? {
+						type: extensionOptions.type,
+						name: convertName,
+						source: {
+							app: toConvertSourceUrl(extensionOptions.source.app),
+							api: toConvertSourceUrl(extensionOptions.source.api),
+						},
+				  }
+				: {
+						type: extensionOptions.type,
+						name: convertName,
+						source: toConvertSourceUrl(extensionOptions.source),
+				  },
+			isIn(type, HYBRID_EXTENSION_TYPES)
+				? {
+						type,
+						name,
+						source: {
+							app: `${pathToRelativeUrl(source)}/${name}/app.${languageToShort(language)}`,
+							api: `${pathToRelativeUrl(source)}/${name}/api.${languageToShort(language)}`,
+						},
+				  }
+				: {
+						type,
+						name,
+						source: `${pathToRelativeUrl(source)}/${name}/index.${languageToShort(language)}`,
+				  },
+		];
+
+		const newExtensionOptions: ExtensionOptions = {
+			type: 'bundle',
+			path: { app: 'dist/app.js', api: 'dist/api.js' },
+			entries,
+			host: extensionOptions.host,
+			hidden: extensionOptions.hidden,
+		};
+		const newExtensionManifest = {
+			...extensionManifest,
+			name: EXTENSION_NAME_REGEX.test(extensionName) ? extensionName : `directus-extension-${extensionName}`,
+			keywords: ['directus', 'directus-extension', `directus-custom-bundle`],
+			[EXTENSION_PKG_KEY]: newExtensionOptions,
+			devDependencies: await getExtensionDevDeps(
+				entries.map((entry) => entry.type),
+				getLanguageFromEntries(entries)
+			),
+		};
+
+		await fse.writeJSON(packagePath, newExtensionManifest, { spaces: indent ?? '\t' });
+
+		await execa('npm', ['install'], { cwd: extensionPath });
+
+		spinner.succeed(chalk.bold('Done'));
+	}
+}
+
+function getLanguageFromEntries(entries: ExtensionOptionsBundleEntry[]): Language[] {
+	const languages = new Set<Language>();
+
+	for (const entry of entries) {
+		if (isTypeIn(entry, HYBRID_EXTENSION_TYPES)) {
+			const languageApp = getLanguageFromPath(entry.source.app);
+			const languageApi = getLanguageFromPath(entry.source.api);
+
+			if (!isLanguage(languageApp)) {
+				log(`App language ${chalk.bold(languageApp)} is not supported.`, 'error');
+				process.exit(1);
+			}
+			if (!isLanguage(languageApi)) {
+				log(`API language ${chalk.bold(languageApi)} is not supported.`, 'error');
+				process.exit(1);
+			}
+
+			languages.add(languageApp);
+			languages.add(languageApi);
+		} else {
+			const language = getLanguageFromPath(entry.source);
+
+			if (!isLanguage(language)) {
+				log(`Language ${chalk.bold(language)} is not supported.`, 'error');
+				process.exit(1);
+			}
+
+			languages.add(language);
+		}
+	}
+
+	return Array.from(languages);
+}
diff --git a/packages/extensions-sdk/src/cli/commands/build.ts b/packages/extensions-sdk/src/cli/commands/build.ts
index 8fba2a7064..21af255b41 100644
--- a/packages/extensions-sdk/src/cli/commands/build.ts
+++ b/packages/extensions-sdk/src/cli/commands/build.ts
@@ -2,17 +2,23 @@ import {
 	API_SHARED_DEPS,
 	APP_EXTENSION_TYPES,
 	APP_SHARED_DEPS,
+	EXTENSION_PACKAGE_TYPES,
 	EXTENSION_PKG_KEY,
-	EXTENSION_TYPES,
 	HYBRID_EXTENSION_TYPES,
 } from '@directus/shared/constants';
-import { ApiExtensionType, AppExtensionType, ExtensionManifestRaw } from '@directus/shared/types';
+import {
+	ApiExtensionType,
+	AppExtensionType,
+	ExtensionManifestRaw,
+	ExtensionOptionsBundleEntry,
+} from '@directus/shared/types';
 import { isIn, isTypeIn, validateExtensionManifest } from '@directus/shared/utils';
 import commonjs from '@rollup/plugin-commonjs';
 import json from '@rollup/plugin-json';
 import { nodeResolve } from '@rollup/plugin-node-resolve';
 import replace from '@rollup/plugin-replace';
 import terser from '@rollup/plugin-terser';
+import virtual from '@rollup/plugin-virtual';
 import chalk from 'chalk';
 import fse from 'fs-extra';
 import ora from 'ora';
@@ -30,9 +36,11 @@ import typescript from 'rollup-plugin-typescript2';
 import vue from 'rollup-plugin-vue';
 import { Language, RollupConfig, RollupMode } from '../types';
 import { getLanguageFromPath, isLanguage } from '../utils/languages';
-import loadConfig from '../utils/load-config';
 import { clear, log } from '../utils/logger';
-import toObject from '../utils/to-object';
+import tryParseJson from '../utils/try-parse-json';
+import generateBundleEntrypoint from './helpers/generate-bundle-entrypoint';
+import loadConfig from './helpers/load-config';
+import { validateBundleEntriesOption, validateSplitEntrypointOption } from './helpers/validate-cli-options';
 
 type BuildOptions = {
 	type?: string;
@@ -50,35 +58,36 @@ export default async function build(options: BuildOptions): Promise<void> {
 
 	if (!options.type && !options.input && !options.output) {
 		const packagePath = path.resolve('package.json');
-		let extensionManifest: ExtensionManifestRaw = {};
 
 		if (!(await fse.pathExists(packagePath))) {
 			log(`Current directory is not a valid package.`, 'error');
 			process.exit(1);
-		} else {
-			extensionManifest = await fse.readJSON(packagePath);
+		}
 
-			if (!validateExtensionManifest(extensionManifest)) {
-				log(`Current directory is not a valid Directus extension.`, 'error');
-				process.exit(1);
-			}
+		const extensionManifest: ExtensionManifestRaw = await fse.readJSON(packagePath);
+
+		if (!validateExtensionManifest(extensionManifest)) {
+			log(`Current directory is not a valid Directus extension.`, 'error');
+			process.exit(1);
 		}
 
 		const extensionOptions = extensionManifest[EXTENSION_PKG_KEY];
 
-		if (!isTypeIn(extensionOptions, EXTENSION_TYPES)) {
-			log(
-				`Extension type ${chalk.bold(
-					extensionOptions.type
-				)} is not supported. Available extension types: ${EXTENSION_TYPES.map((t) => chalk.bold.magenta(t)).join(
-					', '
-				)}.`,
-				'error'
-			);
+		if (extensionOptions.type === 'pack') {
+			log(`Building extension type ${chalk.bold('pack')} is not currently supported.`, 'error');
 			process.exit(1);
 		}
 
-		if (isTypeIn(extensionOptions, HYBRID_EXTENSION_TYPES)) {
+		if (extensionOptions.type === 'bundle') {
+			await buildBundleExtension({
+				entries: extensionOptions.entries,
+				outputApp: extensionOptions.path.app,
+				outputApi: extensionOptions.path.api,
+				watch,
+				sourcemap,
+				minify,
+			});
+		} else if (isTypeIn(extensionOptions, HYBRID_EXTENSION_TYPES)) {
 			await buildHybridExtension({
 				inputApp: extensionOptions.source.app,
 				inputApi: extensionOptions.source.api,
@@ -106,16 +115,23 @@ export default async function build(options: BuildOptions): Promise<void> {
 		if (!type) {
 			log(`Extension type has to be specified using the ${chalk.blue('[-t, --type <type>]')} option.`, 'error');
 			process.exit(1);
-		} else if (!isIn(type, EXTENSION_TYPES)) {
+		}
+
+		if (!isIn(type, EXTENSION_PACKAGE_TYPES)) {
 			log(
-				`Extension type ${chalk.bold(type)} is not supported. Available extension types: ${EXTENSION_TYPES.map((t) =>
-					chalk.bold.magenta(t)
+				`Extension type ${chalk.bold(type)} is not supported. Available extension types: ${EXTENSION_PACKAGE_TYPES.map(
+					(t) => chalk.bold.magenta(t)
 				).join(', ')}.`,
 				'error'
 			);
 			process.exit(1);
 		}
 
+		if (type === 'pack') {
+			log(`Building extension type ${chalk.bold('pack')} is not currently supported.`, 'error');
+			process.exit(1);
+		}
+
 		if (!input) {
 			log(`Extension entrypoint has to be specified using the ${chalk.blue('[-i, --input <file>]')} option.`, 'error');
 			process.exit(1);
@@ -128,30 +144,65 @@ export default async function build(options: BuildOptions): Promise<void> {
 			process.exit(1);
 		}
 
-		if (isIn(type, HYBRID_EXTENSION_TYPES)) {
-			const inputObject = toObject(input);
-			const outputObject = toObject(output);
+		if (type === 'bundle') {
+			const entries = tryParseJson(input);
+			const splitOutput = tryParseJson(output);
 
-			if (!inputObject || !inputObject.app || !inputObject.api) {
+			if (!validateBundleEntriesOption(entries)) {
 				log(
-					`Input option needs to be of the format ${chalk.blue('[-i app:<app-entrypoint>,api:<api-entrypoint>]')}.`,
+					`Input option needs to be of the format ${chalk.blue(
+						`[-i '[{"type":"<extension-type>","name":"<extension-name>","source":<entrypoint>}]']`
+					)}.`,
 					'error'
 				);
 				process.exit(1);
 			}
-			if (!outputObject || !outputObject.app || !outputObject.api) {
+			if (!validateSplitEntrypointOption(splitOutput)) {
 				log(
-					`Output option needs to be of the format ${chalk.blue('[-o app:<app-output-file>,api:<api-output-file>]')}.`,
+					`Output option needs to be of the format ${chalk.blue(
+						`[-o '{"app":"<app-entrypoint>","api":"<api-entrypoint>"}']`
+					)}.`,
+					'error'
+				);
+				process.exit(1);
+			}
+
+			await buildBundleExtension({
+				entries,
+				outputApp: splitOutput.app,
+				outputApi: splitOutput.api,
+				watch,
+				sourcemap,
+				minify,
+			});
+		} else if (isIn(type, HYBRID_EXTENSION_TYPES)) {
+			const splitInput = tryParseJson(input);
+			const splitOutput = tryParseJson(output);
+
+			if (!validateSplitEntrypointOption(splitInput)) {
+				log(
+					`Input option needs to be of the format ${chalk.blue(
+						`[-i '{"app":"<app-entrypoint>","api":"<api-entrypoint>"}']`
+					)}.`,
+					'error'
+				);
+				process.exit(1);
+			}
+			if (!validateSplitEntrypointOption(splitOutput)) {
+				log(
+					`Output option needs to be of the format ${chalk.blue(
+						`[-o '{"app":"<app-entrypoint>","api":"<api-entrypoint>"}']`
+					)}.`,
 					'error'
 				);
 				process.exit(1);
 			}
 
 			await buildHybridExtension({
-				inputApp: inputObject.app,
-				inputApi: inputObject.api,
-				outputApp: outputObject.app,
-				outputApi: outputObject.api,
+				inputApp: splitInput.app,
+				inputApi: splitInput.api,
+				outputApp: splitOutput.app,
+				outputApi: splitOutput.api,
 				watch,
 				sourcemap,
 				minify,
@@ -259,7 +310,7 @@ async function buildHybridExtension({
 		process.exit(1);
 	}
 	if (!isLanguage(languageApi)) {
-		log(`API language ${chalk.bold(languageApp)} is not supported.`, 'error');
+		log(`API language ${chalk.bold(languageApi)} is not supported.`, 'error');
 		process.exit(1);
 	}
 
@@ -297,6 +348,121 @@ async function buildHybridExtension({
 	}
 }
 
+async function buildBundleExtension({
+	entries,
+	outputApp,
+	outputApi,
+	watch,
+	sourcemap,
+	minify,
+}: {
+	entries: ExtensionOptionsBundleEntry[];
+	outputApp: string;
+	outputApi: string;
+	watch: boolean;
+	sourcemap: boolean;
+	minify: boolean;
+}) {
+	if (outputApp.length === 0) {
+		log(`App output file can not be empty.`, 'error');
+		process.exit(1);
+	}
+	if (outputApi.length === 0) {
+		log(`API output file can not be empty.`, 'error');
+		process.exit(1);
+	}
+
+	const languagesApp = new Set<Language>();
+	const languagesApi = new Set<Language>();
+
+	for (const entry of entries) {
+		if (isTypeIn(entry, HYBRID_EXTENSION_TYPES)) {
+			const inputApp = entry.source.app;
+			const inputApi = entry.source.api;
+
+			if (!(await fse.pathExists(inputApp)) || !(await fse.stat(inputApp)).isFile()) {
+				log(`App entrypoint ${chalk.bold(inputApp)} does not exist.`, 'error');
+				process.exit(1);
+			}
+			if (!(await fse.pathExists(inputApi)) || !(await fse.stat(inputApi)).isFile()) {
+				log(`API entrypoint ${chalk.bold(inputApi)} does not exist.`, 'error');
+				process.exit(1);
+			}
+
+			const languageApp = getLanguageFromPath(inputApp);
+			const languageApi = getLanguageFromPath(inputApi);
+
+			if (!isLanguage(languageApp)) {
+				log(`App language ${chalk.bold(languageApp)} is not supported.`, 'error');
+				process.exit(1);
+			}
+			if (!isLanguage(languageApi)) {
+				log(`API language ${chalk.bold(languageApi)} is not supported.`, 'error');
+				process.exit(1);
+			}
+
+			languagesApp.add(languageApp);
+			languagesApi.add(languageApi);
+		} else {
+			const input = entry.source;
+
+			if (!(await fse.pathExists(input)) || !(await fse.stat(input)).isFile()) {
+				log(`Entrypoint ${chalk.bold(input)} does not exist.`, 'error');
+				process.exit(1);
+			}
+
+			const language = getLanguageFromPath(input);
+
+			if (!isLanguage(language)) {
+				log(`Language ${chalk.bold(language)} is not supported.`, 'error');
+				process.exit(1);
+			}
+
+			if (isIn(entry.type, APP_EXTENSION_TYPES)) {
+				languagesApp.add(language);
+			} else {
+				languagesApi.add(language);
+			}
+		}
+	}
+
+	const config = await loadConfig();
+	const plugins = config.plugins ?? [];
+
+	const entrypointApp = generateBundleEntrypoint('app', entries);
+	const entrypointApi = generateBundleEntrypoint('api', entries);
+
+	const rollupOptionsApp = getRollupOptions({
+		mode: 'browser',
+		input: { entry: entrypointApp },
+		language: Array.from(languagesApp),
+		sourcemap,
+		minify,
+		plugins,
+	});
+	const rollupOptionsApi = getRollupOptions({
+		mode: 'node',
+		input: { entry: entrypointApi },
+		language: Array.from(languagesApi),
+		sourcemap,
+		minify,
+		plugins,
+	});
+	const rollupOutputOptionsApp = getRollupOutputOptions({ mode: 'browser', output: outputApp, sourcemap });
+	const rollupOutputOptionsApi = getRollupOutputOptions({ mode: 'node', output: outputApi, sourcemap });
+
+	const rollupOptionsAll = [
+		{ rollupOptions: rollupOptionsApp, rollupOutputOptions: rollupOutputOptionsApp },
+		{ rollupOptions: rollupOptionsApi, rollupOutputOptions: rollupOutputOptionsApi },
+	];
+
+	if (watch) {
+		await watchExtension(rollupOptionsAll);
+	} else {
+		await buildExtension(rollupOptionsAll);
+	}
+}
+
 async function buildExtension(config: RollupConfig | RollupConfig[]) {
 	const configs = Array.isArray(config) ? config : [config];
 
@@ -388,19 +554,22 @@ function getRollupOptions({
 	plugins,
 }: {
 	mode: RollupMode;
-	input: string;
-	language: Language;
+	input: string | Record<string, string>;
+	language: Language | Language[];
 	sourcemap: boolean;
 	minify: boolean;
 	plugins: Plugin[];
 }): RollupOptions {
+	const languages = Array.isArray(language) ? language : [language];
+
 	if (mode === 'browser') {
 		return {
-			input,
+			input: typeof input !== 'string' ? 'entry' : input,
 			external: APP_SHARED_DEPS,
 			plugins: [
+				typeof input !== 'string' ? virtual(input) : null,
 				vue({ preprocessStyles: true }) as Plugin,
-				language === 'typescript' ? typescript({ check: false }) : null,
+				languages.includes('typescript') ? typescript({ check: false }) : null,
 				styles(),
 				...plugins,
 				nodeResolve({ browser: true }),
@@ -417,10 +586,11 @@ function getRollupOptions({
 		};
 	} else {
 		return {
-			input,
+			input: typeof input !== 'string' ? 'entry' : input,
 			external: API_SHARED_DEPS,
 			plugins: [
-				language === 'typescript' ? typescript({ check: false }) : null,
+				typeof input !== 'string' ? virtual(input) : null,
+				languages.includes('typescript') ? typescript({ check: false }) : null,
 				...plugins,
 				nodeResolve(),
 				commonjs({ sourceMap: sourcemap }),
@@ -457,7 +627,7 @@ function getRollupOutputOptions({
 		return {
 			file: output,
 			format: 'cjs',
-			exports: 'default',
+			exports: 'auto',
 			inlineDynamicImports: true,
 			sourcemap,
 		};
diff --git a/packages/extensions-sdk/src/cli/commands/create.ts b/packages/extensions-sdk/src/cli/commands/create.ts
index 23b85683c6..93c1c6ea58 100644
--- a/packages/extensions-sdk/src/cli/commands/create.ts
+++ b/packages/extensions-sdk/src/cli/commands/create.ts
@@ -4,36 +4,31 @@ import fse from 'fs-extra';
 import execa from 'execa';
 import ora from 'ora';
 import {
-	EXTENSION_TYPES,
 	EXTENSION_PKG_KEY,
 	EXTENSION_LANGUAGES,
 	HYBRID_EXTENSION_TYPES,
-	API_OR_HYBRID_EXTENSION_TYPES,
-	APP_OR_HYBRID_EXTENSION_TYPES,
 	EXTENSION_NAME_REGEX,
+	EXTENSION_PACKAGE_TYPES,
+	PACKAGE_EXTENSION_TYPES,
 } from '@directus/shared/constants';
 import { isIn } from '@directus/shared/utils';
-import { ExtensionType } from '@directus/shared/types';
+import { ExtensionOptions, ExtensionPackageType, ExtensionType, PackageExtensionType } from '@directus/shared/types';
 import { log } from '../utils/logger';
 import { isLanguage, languageToShort } from '../utils/languages';
-import renameMap from '../utils/rename-map';
-import { Language } from '../types';
-import getPackageVersion from '../utils/get-package-version';
+import getSdkVersion from '../utils/get-sdk-version';
+import getExtensionDevDeps from './helpers/get-extension-dev-deps';
+import copyTemplate from './helpers/copy-template';
 
-const pkg = require('../../../../package.json');
-
-const TEMPLATE_PATH = path.resolve(__dirname, '../../../../templates');
-
-type CreateOptions = { language: string };
+type CreateOptions = { language?: string };
 
 export default async function create(type: string, name: string, options: CreateOptions): Promise<void> {
 	const targetDir = name.substring(name.lastIndexOf('/') + 1);
 	const targetPath = path.resolve(targetDir);
 
-	if (!isIn(type, EXTENSION_TYPES)) {
+	if (!isIn(type, EXTENSION_PACKAGE_TYPES)) {
 		log(
-			`Extension type ${chalk.bold(type)} is not supported. Available extension types: ${EXTENSION_TYPES.map((t) =>
-				chalk.bold.magenta(t)
+			`Extension type ${chalk.bold(type)} is not supported. Available extension types: ${EXTENSION_PACKAGE_TYPES.map(
+				(t) => chalk.bold.magenta(t)
 			).join(', ')}.`,
 			'error'
 		);
@@ -61,9 +56,61 @@ export default async function create(type: string, name: string, options: Create
 		}
 	}
 
-	if (!isLanguage(options.language)) {
+	if (isIn(type, PACKAGE_EXTENSION_TYPES)) {
+		await createPackageExtension({ type, name, targetDir, targetPath });
+	} else {
+		const language = options.language ?? 'javascript';
+
+		await createLocalExtension({ type, name, targetDir, targetPath, language });
+	}
+}
+
+async function createPackageExtension({
+	type,
+	name,
+	targetDir,
+	targetPath,
+}: {
+	type: PackageExtensionType;
+	name: string;
+	targetDir: string;
+	targetPath: string;
+}) {
+	const spinner = ora(chalk.bold('Scaffolding Directus extension...')).start();
+
+	await fse.ensureDir(targetPath);
+	await copyTemplate(type, targetPath);
+
+	const host = `^${getSdkVersion()}`;
+	const options: ExtensionOptions =
+		type === 'bundle' ? { type, path: { app: 'dist/app.js', api: 'dist/api.js' }, entries: [], host } : { type, host };
+	const packageManifest = getPackageManifest(name, options, await getExtensionDevDeps(type));
+
+	await fse.writeJSON(path.join(targetPath, 'package.json'), packageManifest, { spaces: '\t' });
+
+	await execa('npm', ['install'], { cwd: targetPath });
+
+	spinner.succeed(chalk.bold('Done'));
+
+	log(getDoneMessage(type, targetDir, targetPath));
+}
+
+async function createLocalExtension({
+	type,
+	name,
+	targetDir,
+	targetPath,
+	language,
+}: {
+	type: ExtensionType;
+	name: string;
+	targetDir: string;
+	targetPath: string;
+	language: string;
+}) {
+	if (!isLanguage(language)) {
 		log(
-			`Language ${chalk.bold(options.language)} is not supported. Available languages: ${EXTENSION_LANGUAGES.map((t) =>
+			`Language ${chalk.bold(language)} is not supported. Available languages: ${EXTENSION_LANGUAGES.map((t) =>
 				chalk.bold.magenta(t)
 			).join(', ')}.`,
 			'error'
@@ -74,32 +121,23 @@ export default async function create(type: string, name: string, options: Create
 	const spinner = ora(chalk.bold('Scaffolding Directus extension...')).start();
 
 	await fse.ensureDir(targetPath);
+	await copyTemplate(type, targetPath, 'src', language);
 
-	await fse.copy(path.join(TEMPLATE_PATH, 'common', options.language), targetPath);
-	await fse.copy(path.join(TEMPLATE_PATH, type, options.language), targetPath);
-	await renameMap(targetPath, (name) => (name.startsWith('_') ? `.${name.substring(1)}` : null));
-
-	const entryPath = isIn(type, HYBRID_EXTENSION_TYPES) ? { app: 'dist/app.js', api: 'dist/api.js' } : 'dist/index.js';
-	const sourcePath = isIn(type, HYBRID_EXTENSION_TYPES)
-		? { app: `src/app.${languageToShort(options.language)}`, api: `src/api.${languageToShort(options.language)}` }
-		: `src/index.${languageToShort(options.language)}`;
-
-	const packageManifest = {
-		name: EXTENSION_NAME_REGEX.test(name) ? name : `directus-extension-${name}`,
-		version: '1.0.0',
-		keywords: ['directus', 'directus-extension', `directus-custom-${type}`],
-		[EXTENSION_PKG_KEY]: {
-			type,
-			path: entryPath,
-			source: sourcePath,
-			host: `^${pkg.version}`,
-		},
-		scripts: {
-			build: 'directus-extension build',
-			dev: 'directus-extension build -w --no-minify',
-		},
-		devDependencies: await getPackageDeps(type, options.language),
-	};
+	const host = `^${getSdkVersion()}`;
+	const options: ExtensionOptions = isIn(type, HYBRID_EXTENSION_TYPES)
+		? {
+				type,
+				path: { app: 'dist/app.js', api: 'dist/api.js' },
+				source: { app: `src/app.${languageToShort(language)}`, api: `src/api.${languageToShort(language)}` },
+				host,
+		  }
+		: {
+				type,
+				path: 'dist/index.js',
+				source: `src/index.${languageToShort(language)}`,
+				host,
+		  };
+	const packageManifest = getPackageManifest(name, options, await getExtensionDevDeps(type, language));
 
 	await fse.writeJSON(path.join(targetPath, 'package.json'), packageManifest, { spaces: '\t' });
 
@@ -107,29 +145,32 @@ export default async function create(type: string, name: string, options: Create
 
 	spinner.succeed(chalk.bold('Done'));
 
-	log(`
+	log(getDoneMessage(type, targetDir, targetPath));
+}
+
+function getPackageManifest(name: string, options: ExtensionOptions, deps: Record<string, string>) {
+	return {
+		name: EXTENSION_NAME_REGEX.test(name) ? name : `directus-extension-${name}`,
+		version: '1.0.0',
+		keywords: ['directus', 'directus-extension', `directus-custom-${options.type}`],
+		[EXTENSION_PKG_KEY]: options,
+		scripts: {
+			build: 'directus-extension build',
+			dev: 'directus-extension build -w --no-minify',
+		},
+		devDependencies: deps,
+	};
+}
+
+function getDoneMessage(type: ExtensionPackageType, targetDir: string, targetPath: string) {
+	return `
 Your ${type} extension has been created at ${chalk.green(targetPath)}
 
 To start developing, run:
-  ${chalk.blue('cd')} ${targetDir}
-  ${chalk.blue('npm run')} dev
+	${chalk.blue('cd')} ${targetDir}
+	${chalk.blue('npm run')} dev
 
 and then to build for production, run:
-  ${chalk.blue('npm run')} build
-	`);
-}
-
-async function getPackageDeps(type: ExtensionType, language: Language) {
-	return {
-		'@directus/extensions-sdk': pkg.version,
-		...(language === 'typescript'
-			? {
-					...(isIn(type, API_OR_HYBRID_EXTENSION_TYPES)
-						? { '@types/node': `^${await getPackageVersion('@types/node')}` }
-						: {}),
-					typescript: `^${await getPackageVersion('typescript')}`,
-			  }
-			: {}),
-		...(isIn(type, APP_OR_HYBRID_EXTENSION_TYPES) ? { vue: `^${await getPackageVersion('vue')}` } : {}),
-	};
+	${chalk.blue('npm run')} build
+`;
 }
diff --git a/packages/extensions-sdk/src/cli/commands/helpers/copy-template.ts b/packages/extensions-sdk/src/cli/commands/helpers/copy-template.ts
new file mode 100644
index 0000000000..a8bba547f6
--- /dev/null
+++ b/packages/extensions-sdk/src/cli/commands/helpers/copy-template.ts
@@ -0,0 +1,72 @@
+import path from 'path';
+import fse from 'fs-extra';
+import getTemplatePath from '../../utils/get-template-path';
+import { ExtensionPackageType } from '@directus/shared/types';
+import { Language } from '../../types';
+
+type TemplateFile = { type: 'config' | 'source'; path: string };
+
+async function copyTemplateFile(templateFile: TemplateFile, extensionPath: string, sourcePath?: string) {
+	if (sourcePath !== undefined) {
+		const oldName = path.basename(templateFile.path);
+		const newName = oldName.startsWith('_') ? `.${oldName.substring(1)}` : oldName;
+
+		const targetPath =
+			templateFile.type === 'config'
+				? path.join(extensionPath, newName)
+				: path.resolve(extensionPath, sourcePath, newName);
+
+		await fse.copy(templateFile.path, targetPath, { overwrite: false });
+	}
+}
+
+async function getFilesInDir(templatePath: string): Promise<string[]> {
+	if (!(await fse.pathExists(templatePath))) return [];
+
+	const files = await fse.readdir(templatePath);
+
+	return files.map((file) => path.join(templatePath, file));
+}
+
+async function getLanguageTemplateFiles(templateLanguagePath: string): Promise<TemplateFile[]> {
+	const [configFiles, sourceFiles] = await Promise.all([
+		getFilesInDir(path.join(templateLanguagePath, 'config')),
+		getFilesInDir(path.join(templateLanguagePath, 'source')),
+	]);
+
+	const configTemplateFiles: TemplateFile[] = configFiles.map((file) => ({ type: 'config', path: file }));
+	const sourceTemplateFiles: TemplateFile[] = sourceFiles.map((file) => ({ type: 'source', path: file }));
+
+	return [...configTemplateFiles, ...sourceTemplateFiles];
+}
+
+async function getTypeTemplateFiles(templateTypePath: string, language?: Language): Promise<TemplateFile[]> {
+	const [commonTemplateFiles, languageTemplateFiles] = await Promise.all([
+		getLanguageTemplateFiles(path.join(templateTypePath, 'common')),
+		language ? getLanguageTemplateFiles(path.join(templateTypePath, language)) : null,
+	]);
+
+	return [...commonTemplateFiles, ...(languageTemplateFiles ? languageTemplateFiles : [])];
+}
+
+async function getTemplateFiles(type: ExtensionPackageType, language?: Language): Promise<TemplateFile[]> {
+	const templatePath = getTemplatePath();
+
+	const [commonTemplateFiles, typeTemplateFiles] = await Promise.all([
+		getTypeTemplateFiles(path.join(templatePath, 'common'), language),
+		getTypeTemplateFiles(path.join(templatePath, type), language),
+	]);
+
+	return [...commonTemplateFiles, ...typeTemplateFiles];
+}
+
+export default async function copyTemplate(
+	type: ExtensionPackageType,
+	extensionPath: string,
+	sourcePath?: string,
+	language?: Language
+): Promise<void> {
+	const templateFiles = await getTemplateFiles(type, language);
+
+	await Promise.all(templateFiles.map((templateFile) => copyTemplateFile(templateFile, extensionPath, sourcePath)));
+}
diff --git a/packages/extensions-sdk/src/cli/commands/helpers/generate-bundle-entrypoint.ts b/packages/extensions-sdk/src/cli/commands/helpers/generate-bundle-entrypoint.ts
new file mode 100644
index 0000000000..dfc16f8479
--- /dev/null
+++ b/packages/extensions-sdk/src/cli/commands/helpers/generate-bundle-entrypoint.ts
@@ -0,0 +1,40 @@
+import path from 'path';
+import {
+	API_OR_HYBRID_EXTENSION_TYPES,
+	APP_OR_HYBRID_EXTENSION_TYPES,
+	HYBRID_EXTENSION_TYPES,
+} from '@directus/shared/constants';
+import { ExtensionOptionsBundleEntry } from '@directus/shared/types';
+import { isIn, isTypeIn, pluralize } from '@directus/shared/utils';
+import { pathToRelativeUrl } from '@directus/shared/utils/node';
+
+export default function generateBundleEntrypoint(mode: 'app' | 'api', entries: ExtensionOptionsBundleEntry[]): string {
+	const types = mode === 'app' ? APP_OR_HYBRID_EXTENSION_TYPES : API_OR_HYBRID_EXTENSION_TYPES;
+
+	const entriesForTypes = entries.filter((entry) => isIn(entry.type, types));
+
+	const imports = entriesForTypes.map(
+		(entry, i) =>
+			`import e${i} from './${pathToRelativeUrl(
+				path.resolve(
+					isTypeIn(entry, HYBRID_EXTENSION_TYPES)
+						? mode === 'app'
+							? entry.source.app
+							: entry.source.api
+						: entry.source
+				)
+			)}';`
+	);
+
+	const exports = types.map(
+		(type) =>
+			`export const ${pluralize(type)} = [${entriesForTypes
+				.map((entry, i) =>
+					entry.type === type ? (mode === 'app' ? `e${i}` : `{name:'${entry.name}',config:e${i}}`) : null
+				)
+				.filter((e): e is string => e !== null)
+				.join(',')}];`
+	);
+
+	return `${imports.join('')}${exports.join('')}`;
+}
diff --git a/packages/extensions-sdk/src/cli/commands/helpers/get-extension-dev-deps.ts b/packages/extensions-sdk/src/cli/commands/helpers/get-extension-dev-deps.ts
new file mode 100644
index 0000000000..9094f12d1f
--- /dev/null
+++ b/packages/extensions-sdk/src/cli/commands/helpers/get-extension-dev-deps.ts
@@ -0,0 +1,32 @@
+import { API_OR_HYBRID_EXTENSION_TYPES, APP_OR_HYBRID_EXTENSION_TYPES } from '@directus/shared/constants';
+import { ExtensionPackageType } from '@directus/shared/types';
+import { isIn } from '@directus/shared/utils';
+import { Language } from '../../types';
+import getPackageVersion from '../../utils/get-package-version';
+import getSdkVersion from '../../utils/get-sdk-version';
+
+export default async function getExtensionDevDeps(
+	type: ExtensionPackageType | ExtensionPackageType[],
+	language: Language | Language[] = []
+): Promise<Record<string, string>> {
+	const types = Array.isArray(type) ? type : [type];
+	const languages = Array.isArray(language) ? language : [language];
+
+	const deps: Record<string, string> = {
+		'@directus/extensions-sdk': getSdkVersion(),
+	};
+
+	if (languages.includes('typescript')) {
+		if (types.some((type) => isIn(type, API_OR_HYBRID_EXTENSION_TYPES))) {
+			deps['@types/node'] = `^${await getPackageVersion('@types/node')}`;
+		}
+
+		deps['typescript'] = `^${await getPackageVersion('typescript')}`;
+	}
+
+	if (types.some((type) => isIn(type, APP_OR_HYBRID_EXTENSION_TYPES))) {
+		deps['vue'] = `^${await getPackageVersion('vue')}`;
+	}
+
+	return deps;
+}
diff --git a/packages/extensions-sdk/src/cli/utils/load-config.ts b/packages/extensions-sdk/src/cli/commands/helpers/load-config.ts
similarity index 94%
rename from packages/extensions-sdk/src/cli/utils/load-config.ts
rename to packages/extensions-sdk/src/cli/commands/helpers/load-config.ts
index f08f6730b9..8f9b1a81e4 100644
--- a/packages/extensions-sdk/src/cli/utils/load-config.ts
+++ b/packages/extensions-sdk/src/cli/commands/helpers/load-config.ts
@@ -1,6 +1,6 @@
 import path from 'path';
 import fse from 'fs-extra';
-import { Config } from '../types';
+import { Config } from '../../types';
 import { pathToRelativeUrl } from '@directus/shared/utils/node';
 
 const CONFIG_FILE_NAMES = ['extension.config.js', 'extension.config.mjs', 'extension.config.cjs'];
diff --git a/packages/extensions-sdk/src/cli/commands/helpers/validate-cli-options.ts b/packages/extensions-sdk/src/cli/commands/helpers/validate-cli-options.ts
new file mode 100644
index 0000000000..9158b32b93
--- /dev/null
+++ b/packages/extensions-sdk/src/cli/commands/helpers/validate-cli-options.ts
@@ -0,0 +1,48 @@
+import { ExtensionOptionsBundleEntry, JsonValue, SplitEntrypoint } from '@directus/shared/types';
+import { validateExtensionOptionsBundleEntry } from '@directus/shared/utils';
+
+function validateNonPrimitive(value: JsonValue | undefined): value is JsonValue[] | { [key: string]: JsonValue } {
+	if (
+		value === undefined ||
+		value === null ||
+		typeof value === 'string' ||
+		typeof value === 'number' ||
+		typeof value === 'boolean'
+	) {
+		return false;
+	}
+
+	return true;
+}
+
+export function validateSplitEntrypointOption(option: JsonValue | undefined): option is SplitEntrypoint {
+	if (!validateNonPrimitive(option) || Array.isArray(option)) {
+		return false;
+	}
+
+	if (!option.app || !option.api) {
+		return false;
+	}
+
+	return true;
+}
+
+export function validateBundleEntriesOption(option: JsonValue | undefined): option is ExtensionOptionsBundleEntry[] {
+	if (!validateNonPrimitive(option) || !Array.isArray(option)) {
+		return false;
+	}
+
+	if (
+		!option.every((entry) => {
+			if (!validateNonPrimitive(entry) || Array.isArray(entry)) {
+				return false;
+			}
+
+			return validateExtensionOptionsBundleEntry(entry);
+		})
+	) {
+		return false;
+	}
+
+	return true;
+}
diff --git a/packages/extensions-sdk/src/cli/run.ts b/packages/extensions-sdk/src/cli/run.ts
index ed6ac70371..35785a13c8 100644
--- a/packages/extensions-sdk/src/cli/run.ts
+++ b/packages/extensions-sdk/src/cli/run.ts
@@ -1,5 +1,6 @@
 import { Command } from 'commander';
 import create from './commands/create';
+import add from './commands/add';
 import build from './commands/build';
 
 const pkg = require('../../../package.json');
@@ -13,9 +14,11 @@ program
 	.command('create')
 	.arguments('<type> <name>')
 	.description('Scaffold a new Directus extension')
-	.option('-l, --language <language>', 'specify the language to use', 'javascript')
+	.option('-l, --language <language>', 'specify the language to use')
 	.action(create);
 
+program.command('add').description('Add entries to an existing Directus extension').action(add);
+
 program
 	.command('build')
 	.description('Bundle a Directus extension to a single entrypoint')
diff --git a/packages/extensions-sdk/src/cli/utils/detect-json-indent.ts b/packages/extensions-sdk/src/cli/utils/detect-json-indent.ts
new file mode 100644
index 0000000000..562e615fe4
--- /dev/null
+++ b/packages/extensions-sdk/src/cli/utils/detect-json-indent.ts
@@ -0,0 +1,13 @@
+export default function detectJsonIndent(json: string) {
+	const lines = json.split(/\r?\n/);
+
+	const braceLine = lines.findIndex((line) => /^(?:\{|\[)/.test(line));
+
+	if (braceLine === -1 || braceLine + 1 > lines.length - 1) return null;
+
+	const indent = lines[braceLine + 1]!.match(/[ \t]+/)?.[0];
+
+	if (indent === undefined) return null;
+
+	return indent;
+}
diff --git a/packages/extensions-sdk/src/cli/utils/get-sdk-version.ts b/packages/extensions-sdk/src/cli/utils/get-sdk-version.ts
new file mode 100644
index 0000000000..a43322f916
--- /dev/null
+++ b/packages/extensions-sdk/src/cli/utils/get-sdk-version.ts
@@ -0,0 +1,5 @@
+export default function getSdkVersion(): string {
+	const pkg = require('../../../../package.json');
+
+	return pkg.version;
+}
diff --git a/packages/extensions-sdk/src/cli/utils/get-template-path.ts b/packages/extensions-sdk/src/cli/utils/get-template-path.ts
new file mode 100644
index 0000000000..8896899887
--- /dev/null
+++ b/packages/extensions-sdk/src/cli/utils/get-template-path.ts
@@ -0,0 +1,5 @@
+import path from 'path';
+
+export default function getTemplatePath(): string {
+	return path.resolve(__dirname, '..', '..', '..', '..', 'templates');
+}
diff --git a/packages/extensions-sdk/src/cli/utils/rename-map.ts b/packages/extensions-sdk/src/cli/utils/rename-map.ts
deleted file mode 100644
index 8687b5f164..0000000000
--- a/packages/extensions-sdk/src/cli/utils/rename-map.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import path from 'path';
-import fse from 'fs-extra';
-
-export default async function renameMap(file: string, map: (name: string) => string | null): Promise<void> {
-	const info = await fse.stat(file);
-
-	if (info.isFile()) {
-		const newName = map(path.basename(file));
-
-		if (newName !== null) {
-			fse.rename(file, path.join(path.dirname(file), newName));
-		}
-	} else {
-		const subFiles = await fse.readdir(file);
-
-		for (const subFile of subFiles) {
-			await renameMap(path.join(file, subFile), map);
-		}
-	}
-}
diff --git a/packages/extensions-sdk/src/cli/utils/to-object.ts b/packages/extensions-sdk/src/cli/utils/to-object.ts
deleted file mode 100644
index 1f008a81b2..0000000000
--- a/packages/extensions-sdk/src/cli/utils/to-object.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-export default function toObject(val: string): Record<string, string> | null {
-	const arr = val.split(',');
-
-	const obj: Record<string, string> = {};
-	for (const v of arr) {
-		const sub = v.match(/^([^:]+):(.+)$/);
-
-		if (sub) {
-			obj[sub[1]!] = sub[2]!;
-		} else {
-			return null;
-		}
-	}
-
-	return obj;
-}
diff --git a/packages/extensions-sdk/src/cli/utils/try-parse-json.ts b/packages/extensions-sdk/src/cli/utils/try-parse-json.ts
new file mode 100644
index 0000000000..a9d65a8c00
--- /dev/null
+++ b/packages/extensions-sdk/src/cli/utils/try-parse-json.ts
@@ -0,0 +1,9 @@
+import { JsonValue } from '@directus/shared/types';
+
+export default function tryParseJson(str: string): JsonValue | undefined {
+	try {
+		return JSON.parse(str);
+	} catch {
+		return undefined;
+	}
+}
diff --git a/packages/extensions-sdk/templates/common/javascript/_gitignore b/packages/extensions-sdk/templates/common/common/config/_gitignore
similarity index 100%
rename from packages/extensions-sdk/templates/common/javascript/_gitignore
rename to packages/extensions-sdk/templates/common/common/config/_gitignore
diff --git a/packages/extensions-sdk/templates/common/typescript/_gitignore b/packages/extensions-sdk/templates/common/typescript/_gitignore
deleted file mode 100644
index a44058ca87..0000000000
--- a/packages/extensions-sdk/templates/common/typescript/_gitignore
+++ /dev/null
@@ -1,3 +0,0 @@
-.DS_Store
-node_modules
-dist
\ No newline at end of file
diff --git a/packages/extensions-sdk/templates/common/typescript/tsconfig.json b/packages/extensions-sdk/templates/common/typescript/config/tsconfig.json
similarity index 100%
rename from packages/extensions-sdk/templates/common/typescript/tsconfig.json
rename to packages/extensions-sdk/templates/common/typescript/config/tsconfig.json
diff --git a/packages/extensions-sdk/templates/display/javascript/src/display.vue b/packages/extensions-sdk/templates/display/javascript/source/display.vue
similarity index 100%
rename from packages/extensions-sdk/templates/display/javascript/src/display.vue
rename to packages/extensions-sdk/templates/display/javascript/source/display.vue
diff --git a/packages/extensions-sdk/templates/display/javascript/src/index.js b/packages/extensions-sdk/templates/display/javascript/source/index.js
similarity index 100%
rename from packages/extensions-sdk/templates/display/javascript/src/index.js
rename to packages/extensions-sdk/templates/display/javascript/source/index.js
diff --git a/packages/extensions-sdk/templates/display/typescript/src/display.vue b/packages/extensions-sdk/templates/display/typescript/source/display.vue
similarity index 100%
rename from packages/extensions-sdk/templates/display/typescript/src/display.vue
rename to packages/extensions-sdk/templates/display/typescript/source/display.vue
diff --git a/packages/extensions-sdk/templates/display/typescript/src/index.ts b/packages/extensions-sdk/templates/display/typescript/source/index.ts
similarity index 100%
rename from packages/extensions-sdk/templates/display/typescript/src/index.ts
rename to packages/extensions-sdk/templates/display/typescript/source/index.ts
diff --git a/packages/extensions-sdk/templates/display/typescript/src/shims.d.ts b/packages/extensions-sdk/templates/display/typescript/source/shims.d.ts
similarity index 100%
rename from packages/extensions-sdk/templates/display/typescript/src/shims.d.ts
rename to packages/extensions-sdk/templates/display/typescript/source/shims.d.ts
diff --git a/packages/extensions-sdk/templates/endpoint/javascript/src/index.js b/packages/extensions-sdk/templates/endpoint/javascript/source/index.js
similarity index 100%
rename from packages/extensions-sdk/templates/endpoint/javascript/src/index.js
rename to packages/extensions-sdk/templates/endpoint/javascript/source/index.js
diff --git a/packages/extensions-sdk/templates/endpoint/typescript/src/index.ts b/packages/extensions-sdk/templates/endpoint/typescript/source/index.ts
similarity index 100%
rename from packages/extensions-sdk/templates/endpoint/typescript/src/index.ts
rename to packages/extensions-sdk/templates/endpoint/typescript/source/index.ts
diff --git a/packages/extensions-sdk/templates/hook/javascript/src/index.js b/packages/extensions-sdk/templates/hook/javascript/source/index.js
similarity index 100%
rename from packages/extensions-sdk/templates/hook/javascript/src/index.js
rename to packages/extensions-sdk/templates/hook/javascript/source/index.js
diff --git a/packages/extensions-sdk/templates/hook/typescript/src/index.ts b/packages/extensions-sdk/templates/hook/typescript/source/index.ts
similarity index 100%
rename from packages/extensions-sdk/templates/hook/typescript/src/index.ts
rename to packages/extensions-sdk/templates/hook/typescript/source/index.ts
diff --git a/packages/extensions-sdk/templates/interface/javascript/src/index.js b/packages/extensions-sdk/templates/interface/javascript/source/index.js
similarity index 100%
rename from packages/extensions-sdk/templates/interface/javascript/src/index.js
rename to packages/extensions-sdk/templates/interface/javascript/source/index.js
diff --git a/packages/extensions-sdk/templates/interface/javascript/src/interface.vue b/packages/extensions-sdk/templates/interface/javascript/source/interface.vue
similarity index 100%
rename from packages/extensions-sdk/templates/interface/javascript/src/interface.vue
rename to packages/extensions-sdk/templates/interface/javascript/source/interface.vue
diff --git a/packages/extensions-sdk/templates/interface/typescript/src/index.ts b/packages/extensions-sdk/templates/interface/typescript/source/index.ts
similarity index 100%
rename from packages/extensions-sdk/templates/interface/typescript/src/index.ts
rename to packages/extensions-sdk/templates/interface/typescript/source/index.ts
diff --git a/packages/extensions-sdk/templates/interface/typescript/src/interface.vue b/packages/extensions-sdk/templates/interface/typescript/source/interface.vue
similarity index 100%
rename from packages/extensions-sdk/templates/interface/typescript/src/interface.vue
rename to packages/extensions-sdk/templates/interface/typescript/source/interface.vue
diff --git a/packages/extensions-sdk/templates/interface/typescript/src/shims.d.ts b/packages/extensions-sdk/templates/interface/typescript/source/shims.d.ts
similarity index 100%
rename from packages/extensions-sdk/templates/interface/typescript/src/shims.d.ts
rename to packages/extensions-sdk/templates/interface/typescript/source/shims.d.ts
diff --git a/packages/extensions-sdk/templates/layout/javascript/src/index.js b/packages/extensions-sdk/templates/layout/javascript/source/index.js
similarity index 100%
rename from packages/extensions-sdk/templates/layout/javascript/src/index.js
rename to packages/extensions-sdk/templates/layout/javascript/source/index.js
diff --git a/packages/extensions-sdk/templates/layout/javascript/src/layout.vue b/packages/extensions-sdk/templates/layout/javascript/source/layout.vue
similarity index 100%
rename from packages/extensions-sdk/templates/layout/javascript/src/layout.vue
rename to packages/extensions-sdk/templates/layout/javascript/source/layout.vue
diff --git a/packages/extensions-sdk/templates/layout/typescript/src/index.ts b/packages/extensions-sdk/templates/layout/typescript/source/index.ts
similarity index 100%
rename from packages/extensions-sdk/templates/layout/typescript/src/index.ts
rename to packages/extensions-sdk/templates/layout/typescript/source/index.ts
diff --git a/packages/extensions-sdk/templates/layout/typescript/src/layout.vue b/packages/extensions-sdk/templates/layout/typescript/source/layout.vue
similarity index 100%
rename from packages/extensions-sdk/templates/layout/typescript/src/layout.vue
rename to packages/extensions-sdk/templates/layout/typescript/source/layout.vue
diff --git a/packages/extensions-sdk/templates/layout/typescript/src/shims.d.ts b/packages/extensions-sdk/templates/layout/typescript/source/shims.d.ts
similarity index 100%
rename from packages/extensions-sdk/templates/layout/typescript/src/shims.d.ts
rename to packages/extensions-sdk/templates/layout/typescript/source/shims.d.ts
diff --git a/packages/extensions-sdk/templates/module/javascript/src/index.js b/packages/extensions-sdk/templates/module/javascript/source/index.js
similarity index 100%
rename from packages/extensions-sdk/templates/module/javascript/src/index.js
rename to packages/extensions-sdk/templates/module/javascript/source/index.js
diff --git a/packages/extensions-sdk/templates/module/javascript/src/module.vue b/packages/extensions-sdk/templates/module/javascript/source/module.vue
similarity index 100%
rename from packages/extensions-sdk/templates/module/javascript/src/module.vue
rename to packages/extensions-sdk/templates/module/javascript/source/module.vue
diff --git a/packages/extensions-sdk/templates/module/typescript/src/index.ts b/packages/extensions-sdk/templates/module/typescript/source/index.ts
similarity index 100%
rename from packages/extensions-sdk/templates/module/typescript/src/index.ts
rename to packages/extensions-sdk/templates/module/typescript/source/index.ts
diff --git a/packages/extensions-sdk/templates/module/typescript/src/module.vue b/packages/extensions-sdk/templates/module/typescript/source/module.vue
similarity index 100%
rename from packages/extensions-sdk/templates/module/typescript/src/module.vue
rename to packages/extensions-sdk/templates/module/typescript/source/module.vue
diff --git a/packages/extensions-sdk/templates/module/typescript/src/shims.d.ts b/packages/extensions-sdk/templates/module/typescript/source/shims.d.ts
similarity index 100%
rename from packages/extensions-sdk/templates/module/typescript/src/shims.d.ts
rename to packages/extensions-sdk/templates/module/typescript/source/shims.d.ts
diff --git a/packages/extensions-sdk/templates/operation/javascript/src/api.js b/packages/extensions-sdk/templates/operation/javascript/source/api.js
similarity index 100%
rename from packages/extensions-sdk/templates/operation/javascript/src/api.js
rename to packages/extensions-sdk/templates/operation/javascript/source/api.js
diff --git a/packages/extensions-sdk/templates/operation/javascript/src/app.js b/packages/extensions-sdk/templates/operation/javascript/source/app.js
similarity index 100%
rename from packages/extensions-sdk/templates/operation/javascript/src/app.js
rename to packages/extensions-sdk/templates/operation/javascript/source/app.js
diff --git a/packages/extensions-sdk/templates/operation/typescript/src/api.ts b/packages/extensions-sdk/templates/operation/typescript/source/api.ts
similarity index 100%
rename from packages/extensions-sdk/templates/operation/typescript/src/api.ts
rename to packages/extensions-sdk/templates/operation/typescript/source/api.ts
diff --git a/packages/extensions-sdk/templates/operation/typescript/src/app.ts b/packages/extensions-sdk/templates/operation/typescript/source/app.ts
similarity index 100%
rename from packages/extensions-sdk/templates/operation/typescript/src/app.ts
rename to packages/extensions-sdk/templates/operation/typescript/source/app.ts
diff --git a/packages/extensions-sdk/templates/operation/typescript/src/shims.d.ts b/packages/extensions-sdk/templates/operation/typescript/source/shims.d.ts
similarity index 100%
rename from packages/extensions-sdk/templates/operation/typescript/src/shims.d.ts
rename to packages/extensions-sdk/templates/operation/typescript/source/shims.d.ts
diff --git a/packages/extensions-sdk/templates/panel/javascript/src/index.js b/packages/extensions-sdk/templates/panel/javascript/source/index.js
similarity index 100%
rename from packages/extensions-sdk/templates/panel/javascript/src/index.js
rename to packages/extensions-sdk/templates/panel/javascript/source/index.js
diff --git a/packages/extensions-sdk/templates/panel/javascript/src/panel.vue b/packages/extensions-sdk/templates/panel/javascript/source/panel.vue
similarity index 100%
rename from packages/extensions-sdk/templates/panel/javascript/src/panel.vue
rename to packages/extensions-sdk/templates/panel/javascript/source/panel.vue
diff --git a/packages/extensions-sdk/templates/panel/typescript/src/index.ts b/packages/extensions-sdk/templates/panel/typescript/source/index.ts
similarity index 100%
rename from packages/extensions-sdk/templates/panel/typescript/src/index.ts
rename to packages/extensions-sdk/templates/panel/typescript/source/index.ts
diff --git a/packages/extensions-sdk/templates/panel/typescript/src/panel.vue b/packages/extensions-sdk/templates/panel/typescript/source/panel.vue
similarity index 100%
rename from packages/extensions-sdk/templates/panel/typescript/src/panel.vue
rename to packages/extensions-sdk/templates/panel/typescript/source/panel.vue
diff --git a/packages/extensions-sdk/templates/panel/typescript/src/shims.d.ts b/packages/extensions-sdk/templates/panel/typescript/source/shims.d.ts
similarity index 100%
rename from packages/extensions-sdk/templates/panel/typescript/src/shims.d.ts
rename to packages/extensions-sdk/templates/panel/typescript/source/shims.d.ts
diff --git a/packages/shared/src/composables/use-system.ts b/packages/shared/src/composables/use-system.ts
index 008bdaa22b..ba84bfe411 100644
--- a/packages/shared/src/composables/use-system.ts
+++ b/packages/shared/src/composables/use-system.ts
@@ -1,7 +1,7 @@
 import { inject } from 'vue';
 import { AxiosInstance } from 'axios';
 import { API_INJECT, EXTENSIONS_INJECT, STORES_INJECT } from '../constants';
-import { AppExtensionConfigs } from '../types';
+import { AppExtensionConfigs, RefRecord } from '../types';
 
 export function useStores(): Record<string, any> {
 	const stores = inject<Record<string, any>>(STORES_INJECT);
@@ -19,8 +19,8 @@ export function useApi(): AxiosInstance {
 	return api;
 }
 
-export function useExtensions(): AppExtensionConfigs {
-	const extensions = inject<AppExtensionConfigs>(EXTENSIONS_INJECT);
+export function useExtensions(): RefRecord<AppExtensionConfigs> {
+	const extensions = inject<RefRecord<AppExtensionConfigs>>(EXTENSIONS_INJECT);
 
 	if (!extensions) throw new Error('[useExtensions]: The extensions could not be found.');
 
diff --git a/packages/shared/src/constants/extensions.ts b/packages/shared/src/constants/extensions.ts
index 057aaa7dd6..cb51f39674 100644
--- a/packages/shared/src/constants/extensions.ts
+++ b/packages/shared/src/constants/extensions.ts
@@ -6,7 +6,7 @@ export const API_EXTENSION_TYPES = ['hook', 'endpoint'] as const;
 export const HYBRID_EXTENSION_TYPES = ['operation'] as const;
 export const EXTENSION_TYPES = [...APP_EXTENSION_TYPES, ...API_EXTENSION_TYPES, ...HYBRID_EXTENSION_TYPES] as const;
 
-export const PACKAGE_EXTENSION_TYPES = ['pack'] as const;
+export const PACKAGE_EXTENSION_TYPES = ['pack', 'bundle'] as const;
 export const EXTENSION_PACKAGE_TYPES = [...EXTENSION_TYPES, ...PACKAGE_EXTENSION_TYPES] as const;
 
 export const APP_OR_HYBRID_EXTENSION_TYPES = [...APP_EXTENSION_TYPES, ...HYBRID_EXTENSION_TYPES] as const;
@@ -22,6 +22,6 @@ export const API_OR_HYBRID_EXTENSION_PACKAGE_TYPES = [
 
 export const EXTENSION_LANGUAGES = ['javascript', 'typescript'] as const;
 
-export const EXTENSION_NAME_REGEX = /^(?:(?:@[^/]+\/)?directus-extension-|@directus\/extension-).+$/;
+export const EXTENSION_NAME_REGEX = /^(?:(?:@[^/]+\/)?directus-extension-|@directus\/extension-)(.+)$/;
 
 export const EXTENSION_PKG_KEY = 'directus:extension';
diff --git a/packages/shared/src/types/extensions.ts b/packages/shared/src/types/extensions.ts
index ea6b0889c7..c94a580b69 100644
--- a/packages/shared/src/types/extensions.ts
+++ b/packages/shared/src/types/extensions.ts
@@ -1,6 +1,5 @@
 import { Knex } from 'knex';
 import { Logger } from 'pino';
-import { Ref } from 'vue';
 import {
 	API_EXTENSION_TYPES,
 	APP_EXTENSION_TYPES,
@@ -22,6 +21,7 @@ import { Field } from './fields';
 import { Relation } from './relations';
 import { Collection } from './collection';
 import { SchemaOverview } from './schema';
+import { OperationAppConfig } from './operations';
 
 export type AppExtensionType = typeof APP_EXTENSION_TYPES[number];
 export type ApiExtensionType = typeof API_EXTENSION_TYPES[number];
@@ -31,50 +31,70 @@ export type ExtensionType = typeof EXTENSION_TYPES[number];
 export type PackageExtensionType = typeof PACKAGE_EXTENSION_TYPES[number];
 export type ExtensionPackageType = typeof EXTENSION_PACKAGE_TYPES[number];
 
-type ExtensionCommon = {
+export type SplitEntrypoint = { app: string; api: string };
+
+type ExtensionBase = {
 	path: string;
 	name: string;
 };
 
-type AppExtensionCommon = {
+type AppExtensionBase = {
 	type: AppExtensionType;
 	entrypoint: string;
 };
 
-type ApiExtensionCommon = {
+type ApiExtensionBase = {
 	type: ApiExtensionType;
 	entrypoint: string;
 };
 
-type HybridExtensionCommon = {
+type HybridExtensionBase = {
 	type: HybridExtensionType;
-	entrypoint: { app: string; api: string };
+	entrypoint: SplitEntrypoint;
 };
 
-type PackageExtensionCommon = {
-	type: PackageExtensionType;
+type PackExtensionBase = {
+	type: 'pack';
 	children: string[];
 };
 
-type ExtensionLocalCommon = ExtensionCommon & {
+type BundleExtensionBase = {
+	type: 'bundle';
+	entrypoint: SplitEntrypoint;
+	entries: { type: ExtensionType; name: string }[];
+};
+
+type PackageExtensionBase = PackExtensionBase | BundleExtensionBase;
+
+type ExtensionLocalBase = ExtensionBase & {
 	local: true;
 };
 
-type ExtensionPackageCommon = ExtensionCommon & {
+type ExtensionPackageBase = ExtensionBase & {
 	version: string;
 	host: string;
 	local: false;
 };
 
-export type ExtensionLocal = ExtensionLocalCommon & (AppExtensionCommon | ApiExtensionCommon | HybridExtensionCommon);
-export type ExtensionPackage = ExtensionPackageCommon &
-	(AppExtensionCommon | ApiExtensionCommon | HybridExtensionCommon | PackageExtensionCommon);
+export type ExtensionLocal = ExtensionLocalBase & (AppExtensionBase | ApiExtensionBase | HybridExtensionBase);
+export type ExtensionPackage = ExtensionPackageBase &
+	(AppExtensionBase | ApiExtensionBase | HybridExtensionBase | PackageExtensionBase);
+
+export type AppExtension = AppExtensionBase & (ExtensionLocalBase | ExtensionPackageBase);
+export type ApiExtension = ApiExtensionBase & (ExtensionLocalBase | ExtensionPackageBase);
+export type HybridExtension = HybridExtensionBase & (ExtensionLocalBase | ExtensionPackageBase);
+
+export type PackExtension = PackExtensionBase & ExtensionPackageBase;
+export type BundleExtension = BundleExtensionBase & ExtensionPackageBase;
 
-export type AppExtension = AppExtensionCommon & (ExtensionLocalCommon | ExtensionPackageCommon);
-export type ApiExtension = ApiExtensionCommon & (ExtensionLocalCommon | ExtensionPackageCommon);
-export type HybridExtension = HybridExtensionCommon & (ExtensionLocalCommon | ExtensionPackageCommon);
 export type Extension = ExtensionLocal | ExtensionPackage;
 
+export type ExtensionOptionsBundleEntryRaw = {
+	type?: string;
+	name?: string;
+	source?: string | Partial<SplitEntrypoint>;
+};
+
 export type ExtensionManifestRaw = {
 	name?: string;
 	version?: string;
@@ -82,14 +102,19 @@ export type ExtensionManifestRaw = {
 
 	[EXTENSION_PKG_KEY]?: {
 		type?: string;
-		path?: string | { app: string; api: string };
-		source?: string | { app: string; api: string };
+		path?: string | Partial<SplitEntrypoint>;
+		source?: string | Partial<SplitEntrypoint>;
+		entries?: ExtensionOptionsBundleEntryRaw[];
 		host?: string;
 		hidden?: boolean;
 	};
 };
 
-type ExtensionOptionsCommon = {
+export type ExtensionOptionsBundleEntry =
+	| { type: AppExtensionType | ApiExtensionType; name: string; source: string }
+	| { type: HybridExtensionType; name: string; source: SplitEntrypoint };
+
+type ExtensionOptionsBase = {
 	host: string;
 	hidden?: boolean;
 };
@@ -102,15 +127,23 @@ type ExtensionOptionsAppOrApi = {
 
 type ExtensionOptionsHybrid = {
 	type: HybridExtensionType;
-	path: { app: string; api: string };
-	source: { app: string; api: string };
+	path: SplitEntrypoint;
+	source: SplitEntrypoint;
 };
 
-type ExtensionOptionsPackage = {
-	type: PackageExtensionType;
+type ExtensionOptionsPack = {
+	type: 'pack';
 };
 
-export type ExtensionOptions = ExtensionOptionsCommon &
+type ExtensionOptionsBundle = {
+	type: 'bundle';
+	path: SplitEntrypoint;
+	entries: ExtensionOptionsBundleEntry[];
+};
+
+type ExtensionOptionsPackage = ExtensionOptionsPack | ExtensionOptionsBundle;
+
+export type ExtensionOptions = ExtensionOptionsBase &
 	(ExtensionOptionsAppOrApi | ExtensionOptionsHybrid | ExtensionOptionsPackage);
 
 export type ExtensionManifest = {
@@ -122,11 +155,12 @@ export type ExtensionManifest = {
 };
 
 export type AppExtensionConfigs = {
-	interfaces: Ref<InterfaceConfig[]>;
-	displays: Ref<DisplayConfig[]>;
-	layouts: Ref<LayoutConfig[]>;
-	modules: Ref<ModuleConfig[]>;
-	panels: Ref<PanelConfig[]>;
+	interfaces: InterfaceConfig[];
+	displays: DisplayConfig[];
+	layouts: LayoutConfig[];
+	modules: ModuleConfig[];
+	panels: PanelConfig[];
+	operations: OperationAppConfig[];
 };
 
 export type ApiExtensionContext = {
diff --git a/packages/shared/src/types/index.ts b/packages/shared/src/types/index.ts
index a213a9a8b0..37c855e5be 100644
--- a/packages/shared/src/types/index.ts
+++ b/packages/shared/src/types/index.ts
@@ -26,3 +26,4 @@ export * from './schema';
 export * from './settings';
 export * from './shares';
 export * from './users';
+export * from './vue';
diff --git a/packages/shared/src/types/misc.ts b/packages/shared/src/types/misc.ts
index ee2976805e..05faf1481d 100644
--- a/packages/shared/src/types/misc.ts
+++ b/packages/shared/src/types/misc.ts
@@ -31,4 +31,6 @@ export type DeepPartial<T> = T extends Builtin
 
 export type JsonValue = null | string | number | boolean | JsonValue[] | { [key: string]: JsonValue };
 
+export type GenericString<T> = T extends string ? string : T;
+
 export type Plural<T extends string> = `${T}s`;
diff --git a/packages/shared/src/types/vue.ts b/packages/shared/src/types/vue.ts
new file mode 100644
index 0000000000..ea64d507b6
--- /dev/null
+++ b/packages/shared/src/types/vue.ts
@@ -0,0 +1,3 @@
+import { Ref } from 'vue';
+
+export type RefRecord<T> = { [k in keyof T]: Ref<T[k]> };
diff --git a/packages/shared/src/utils/node/generate-extensions-entry.test.ts b/packages/shared/src/utils/node/generate-extensions-entry.test.ts
deleted file mode 100644
index 466d53ee9a..0000000000
--- a/packages/shared/src/utils/node/generate-extensions-entry.test.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { describe, expect, it } from 'vitest';
-
-import { Extension } from '../../types/extensions';
-import { generateExtensionsEntry } from './generate-extensions-entry';
-
-describe('generateExtensionsEntry', () => {
-	const type = 'panel';
-
-	it('returns an extension entrypoint exporting all extensions with a type that matches the provided type', () => {
-		const mockExtension: Extension[] = [
-			{ path: './extensions', name: 'mockExtension', type: 'panel', entrypoint: 'index.js', local: true },
-		];
-		expect(generateExtensionsEntry(type, mockExtension)).toBe(
-			`import e0 from './extensions/index.js';
-export default [e0];`
-		);
-	});
-
-	it('returns an empty extension entrypoint if there is no extension with the provided type', () => {
-		const mockExtension: Extension[] = [
-			{
-				path: './extensions',
-				name: 'mockExtension',
-				type: 'pack',
-				version: '1.0.0',
-				host: '^9.0.0',
-				children: [],
-				local: false,
-			},
-		];
-		expect(generateExtensionsEntry(type, mockExtension)).toBe(`export default [];`);
-	});
-});
diff --git a/packages/shared/src/utils/node/generate-extensions-entry.ts b/packages/shared/src/utils/node/generate-extensions-entry.ts
deleted file mode 100644
index 87b7097ee0..0000000000
--- a/packages/shared/src/utils/node/generate-extensions-entry.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import path from 'path';
-import { HYBRID_EXTENSION_TYPES } from '../../constants';
-import { AppExtension, AppExtensionType, Extension, HybridExtension, HybridExtensionType } from '../../types';
-import { isTypeIn } from '../array-helpers';
-import { pathToRelativeUrl } from './path-to-relative-url';
-
-export function generateExtensionsEntry(type: AppExtensionType | HybridExtensionType, extensions: Extension[]): string {
-	const filteredExtensions = extensions.filter(
-		(extension): extension is AppExtension | HybridExtension => extension.type === type
-	);
-
-	return `${filteredExtensions
-		.map(
-			(extension, i) =>
-				`import e${i} from './${pathToRelativeUrl(
-					path.resolve(
-						extension.path,
-						isTypeIn(extension, HYBRID_EXTENSION_TYPES) ? extension.entrypoint.app : extension.entrypoint
-					)
-				)}';\n`
-		)
-		.join('')}export default [${filteredExtensions.map((_, i) => `e${i}`).join(',')}];`;
-}
diff --git a/packages/shared/src/utils/node/generate-extensions-entrypoint.test.ts b/packages/shared/src/utils/node/generate-extensions-entrypoint.test.ts
new file mode 100644
index 0000000000..9abef91052
--- /dev/null
+++ b/packages/shared/src/utils/node/generate-extensions-entrypoint.test.ts
@@ -0,0 +1,129 @@
+import { describe, expect, it } from 'vitest';
+
+import { Extension } from '../../types/extensions';
+import { generateExtensionsEntrypoint } from './generate-extensions-entrypoint';
+
+describe('generateExtensionsEntrypoint', () => {
+	it('returns an empty extension entrypoint if there is no App, Hybrid or Bundle extension', () => {
+		const mockExtensions: Extension[] = [
+			{
+				path: './extensions/pack',
+				name: 'mock-pack-extension',
+				type: 'pack',
+				version: '1.0.0',
+				host: '^9.0.0',
+				children: [],
+				local: false,
+			},
+		];
+
+		expect(generateExtensionsEntrypoint(mockExtensions)).toBe(
+			`export const interfaces = [];export const displays = [];export const layouts = [];export const modules = [];export const panels = [];export const operations = [];`
+		);
+	});
+
+	it('returns an extension entrypoint exporting a single App extension', () => {
+		const mockExtensions: Extension[] = [
+			{ path: './extensions/panel', name: 'mock-panel-extension', type: 'panel', entrypoint: 'index.js', local: true },
+		];
+
+		expect(generateExtensionsEntrypoint(mockExtensions)).toBe(
+			`import panel0 from './extensions/panel/index.js';export const interfaces = [];export const displays = [];export const layouts = [];export const modules = [];export const panels = [panel0];export const operations = [];`
+		);
+	});
+
+	it('returns an extension entrypoint exporting a single Hybrid extension', () => {
+		const mockExtensions: Extension[] = [
+			{
+				path: './extensions/operation',
+				name: 'mock-operation-extension',
+				type: 'operation',
+				entrypoint: { app: 'app.js', api: 'api.js' },
+				local: true,
+			},
+		];
+
+		expect(generateExtensionsEntrypoint(mockExtensions)).toBe(
+			`import operation0 from './extensions/operation/app.js';export const interfaces = [];export const displays = [];export const layouts = [];export const modules = [];export const panels = [];export const operations = [operation0];`
+		);
+	});
+
+	it('returns an extension entrypoint exporting from a single Bundle extension', () => {
+		const mockExtensions: Extension[] = [
+			{
+				path: './extensions/bundle',
+				name: 'mock-bundle-extension',
+				version: '1.0.0',
+				type: 'bundle',
+				entrypoint: { app: 'app.js', api: 'api.js' },
+				entries: [
+					{ type: 'interface', name: 'mock-bundle-interface' },
+					{ type: 'operation', name: 'mock-bundle-operation' },
+					{ type: 'hook', name: 'mock-bundle-hook' },
+				],
+				host: '^9.0.0',
+				local: false,
+			},
+		];
+
+		expect(generateExtensionsEntrypoint(mockExtensions)).toBe(
+			`import {interfaces as interfaceBundle0,operations as operationBundle0} from './extensions/bundle/app.js';export const interfaces = [...interfaceBundle0];export const displays = [];export const layouts = [];export const modules = [];export const panels = [];export const operations = [...operationBundle0];`
+		);
+	});
+
+	it('returns an extension entrypoint exporting multiple extensions', () => {
+		const mockExtensions: Extension[] = [
+			{
+				path: './extensions/pack',
+				name: 'mock-pack-extension',
+				type: 'pack',
+				version: '1.0.0',
+				host: '^9.0.0',
+				children: [],
+				local: false,
+			},
+			{
+				path: './extensions/display',
+				name: 'mock-display-extension',
+				type: 'display',
+				entrypoint: 'index.js',
+				local: true,
+			},
+			{
+				path: './extensions/operation',
+				name: 'mock-operation-extension',
+				type: 'operation',
+				entrypoint: { app: 'app.js', api: 'api.js' },
+				local: true,
+			},
+			{
+				path: './extensions/bundle',
+				name: 'mock-bundle0-extension',
+				version: '1.0.0',
+				type: 'bundle',
+				entrypoint: { app: 'app.js', api: 'api.js' },
+				entries: [
+					{ type: 'layout', name: 'mock-bundle-layout' },
+					{ type: 'operation', name: 'mock-bundle-operation' },
+					{ type: 'hook', name: 'mock-bundle-hook' },
+				],
+				host: '^9.0.0',
+				local: false,
+			},
+			{
+				path: './extensions/bundle-no-app',
+				name: 'mock-bundle-no-app-extension',
+				version: '1.0.0',
+				type: 'bundle',
+				entrypoint: { app: 'app.js', api: 'api.js' },
+				entries: [{ type: 'endpoint', name: 'mock-bundle-no-app-endpoint' }],
+				host: '^9.0.0',
+				local: false,
+			},
+		];
+
+		expect(generateExtensionsEntrypoint(mockExtensions)).toBe(
+			`import display0 from './extensions/display/index.js';import operation0 from './extensions/operation/app.js';import {layouts as layoutBundle0,operations as operationBundle0} from './extensions/bundle/app.js';export const interfaces = [];export const displays = [display0];export const layouts = [...layoutBundle0];export const modules = [];export const panels = [];export const operations = [operation0,...operationBundle0];`
+		);
+	});
+});
diff --git a/packages/shared/src/utils/node/generate-extensions-entrypoint.ts b/packages/shared/src/utils/node/generate-extensions-entrypoint.ts
new file mode 100644
index 0000000000..72375e9321
--- /dev/null
+++ b/packages/shared/src/utils/node/generate-extensions-entrypoint.ts
@@ -0,0 +1,55 @@
+import path from 'path';
+import { APP_OR_HYBRID_EXTENSION_TYPES, HYBRID_EXTENSION_TYPES } from '../../constants';
+import { AppExtension, BundleExtension, Extension, HybridExtension } from '../../types';
+import { isIn, isTypeIn } from '../array-helpers';
+import { pluralize } from '../pluralize';
+import { pathToRelativeUrl } from './path-to-relative-url';
+
+export function generateExtensionsEntrypoint(extensions: Extension[]): string {
+	const appOrHybridExtensions = extensions.filter((extension): extension is AppExtension | HybridExtension =>
+		isIn(extension.type, APP_OR_HYBRID_EXTENSION_TYPES)
+	);
+
+	const bundleExtensions = extensions.filter(
+		(extension): extension is BundleExtension =>
+			extension.type === 'bundle' && extension.entries.some((entry) => isIn(entry.type, APP_OR_HYBRID_EXTENSION_TYPES))
+	);
+
+	const appOrHybridExtensionImports = APP_OR_HYBRID_EXTENSION_TYPES.flatMap((type) =>
+		appOrHybridExtensions
+			.filter((extension) => extension.type === type)
+			.map(
+				(extension, i) =>
+					`import ${type}${i} from './${pathToRelativeUrl(
+						path.resolve(
+							extension.path,
+							isTypeIn(extension, HYBRID_EXTENSION_TYPES) ? extension.entrypoint.app : extension.entrypoint
+						)
+					)}';`
+			)
+	);
+
+	const bundleExtensionImports = bundleExtensions.map(
+		(extension, i) =>
+			`import {${APP_OR_HYBRID_EXTENSION_TYPES.filter((type) => extension.entries.some((entry) => entry.type === type))
+				.map((type) => `${pluralize(type)} as ${type}Bundle${i}`)
+				.join(',')}} from './${pathToRelativeUrl(path.resolve(extension.path, extension.entrypoint.app))}';`
+	);
+
+	const extensionExports = APP_OR_HYBRID_EXTENSION_TYPES.map(
+		(type) =>
+			`export const ${pluralize(type)} = [${appOrHybridExtensions
+				.filter((extension) => extension.type === type)
+				.map((_, i) => `${type}${i}`)
+				.concat(
+					bundleExtensions
+						.map((extension, i) =>
+							extension.entries.some((entry) => entry.type === type) ? `...${type}Bundle${i}` : null
+						)
+						.filter((e): e is string => e !== null)
+				)
+				.join(',')}];`
+	);
+
+	return `${appOrHybridExtensionImports.join('')}${bundleExtensionImports.join('')}${extensionExports.join('')}`;
+}
diff --git a/packages/shared/src/utils/node/get-extensions.ts b/packages/shared/src/utils/node/get-extensions.ts
index aa56fa8c6d..1f13826bbb 100644
--- a/packages/shared/src/utils/node/get-extensions.ts
+++ b/packages/shared/src/utils/node/get-extensions.ts
@@ -9,12 +9,7 @@ import {
 } from '../../types';
 import { resolvePackage } from './resolve-package';
 import { listFolders } from './list-folders';
-import {
-	EXTENSION_NAME_REGEX,
-	EXTENSION_PKG_KEY,
-	HYBRID_EXTENSION_TYPES,
-	PACKAGE_EXTENSION_TYPES,
-} from '../../constants';
+import { EXTENSION_NAME_REGEX, EXTENSION_PKG_KEY, HYBRID_EXTENSION_TYPES } from '../../constants';
 import { pluralize } from '../pluralize';
 import { validateExtensionManifest } from '../validate-extension-manifest';
 import { isIn, isTypeIn } from '../array-helpers';
@@ -37,7 +32,7 @@ async function resolvePackageExtensions(
 		const extensionOptions = extensionManifest[EXTENSION_PKG_KEY];
 
 		if (isIn(extensionOptions.type, types)) {
-			if (isTypeIn(extensionOptions, PACKAGE_EXTENSION_TYPES)) {
+			if (extensionOptions.type === 'pack') {
 				const extensionChildren = Object.keys(extensionManifest.dependencies ?? {}).filter((dep) =>
 					EXTENSION_NAME_REGEX.test(dep)
 				);
@@ -54,6 +49,20 @@ async function resolvePackageExtensions(
 
 				extensions.push(extension);
 				extensions.push(...(await resolvePackageExtensions(extension.children || [], extension.path, types)));
+			} else if (extensionOptions.type === 'bundle') {
+				extensions.push({
+					path: extensionPath,
+					name: extensionName,
+					version: extensionManifest.version,
+					type: extensionOptions.type,
+					entrypoint: {
+						app: extensionOptions.path.app,
+						api: extensionOptions.path.api,
+					},
+					entries: extensionOptions.entries,
+					host: extensionOptions.host,
+					local: false,
+				});
 			} else if (isTypeIn(extensionOptions, HYBRID_EXTENSION_TYPES)) {
 				extensions.push({
 					path: extensionPath,
diff --git a/packages/shared/src/utils/node/index.ts b/packages/shared/src/utils/node/index.ts
index 9394c26c56..781c37bf7f 100644
--- a/packages/shared/src/utils/node/index.ts
+++ b/packages/shared/src/utils/node/index.ts
@@ -1,5 +1,5 @@
 export * from './ensure-extension-dirs';
-export * from './generate-extensions-entry';
+export * from './generate-extensions-entrypoint';
 export * from './get-extensions';
 export * from './list-folders';
 export * from './path-to-relative-url';
diff --git a/packages/shared/src/utils/validate-extension-manifest.test.ts b/packages/shared/src/utils/validate-extension-manifest.test.ts
index f815230906..2a0453b2ff 100644
--- a/packages/shared/src/utils/validate-extension-manifest.test.ts
+++ b/packages/shared/src/utils/validate-extension-manifest.test.ts
@@ -1,18 +1,22 @@
 import { describe, expect, it } from 'vitest';
-import { validateExtensionManifest } from './validate-extension-manifest';
+import { validateExtensionManifest, validateExtensionOptionsBundleEntry } from './validate-extension-manifest';
 
-describe('', () => {
+describe('validateExtensionManifest', () => {
 	it('returns false when passed item has no name or version', () => {
-		expect(validateExtensionManifest({})).toBe(false);
+		const mockExtension = {};
+
+		expect(validateExtensionManifest(mockExtension)).toBe(false);
 	});
 
 	it('returns false when passed item has no EXTENSION_PKG_KEY', () => {
 		const mockExtension = { name: 'test', version: '0.1' };
+
 		expect(validateExtensionManifest(mockExtension)).toBe(false);
 	});
 
 	it('returns false when passed item has no type', () => {
 		const mockExtension = { name: 'test', version: '0.1', 'directus:extension': {} };
+
 		expect(validateExtensionManifest(mockExtension)).toBe(false);
 	});
 
@@ -22,42 +26,47 @@ describe('', () => {
 			version: '0.1',
 			'directus:extension': { type: 'not_extension_type' },
 		};
+
 		expect(validateExtensionManifest(mockExtension)).toBe(false);
 	});
 
-	it('returns false when passed item has a package type and has no host', () => {
+	it('returns false when passed item has no host', () => {
 		const mockExtension = {
 			name: 'test',
 			version: '0.1',
 			'directus:extension': { type: 'pack' },
 		};
+
 		expect(validateExtensionManifest(mockExtension)).toBe(false);
 	});
 
-	it('returns false when passed item has a hybrid type and has no path, source, host or they have the wrong format', () => {
+	it('returns false when passed item has a type of bundle and has no path, entries or they have the wrong format', () => {
 		const mockExtension = {
 			name: 'test',
 			version: '0.1',
-			'directus:extension': { type: 'operation' },
+			'directus:extension': { type: 'bundle', host: '^9.0.0' },
 		};
+
 		expect(validateExtensionManifest(mockExtension)).toBe(false);
 	});
 
-	it('returns false when passed item has an App or API type and has no path, source or host', () => {
+	it('returns false when passed item has a Hybrid type and has no path, source or they have the wrong format', () => {
 		const mockExtension = {
 			name: 'test',
 			version: '0.1',
-			'directus:extension': { type: 'interface' },
+			'directus:extension': { type: 'operation', host: '^9.0.0' },
 		};
+
 		expect(validateExtensionManifest(mockExtension)).toBe(false);
 	});
 
-	it('returns false when passed item has a type other than pack and has no path, source or host', () => {
+	it('returns false when passed item has an App or API type and has no path or source', () => {
 		const mockExtension = {
 			name: 'test',
 			version: '0.1',
-			'directus:extension': { type: 'interface' },
+			'directus:extension': { type: 'interface', host: '^9.0.0' },
 		};
+
 		expect(validateExtensionManifest(mockExtension)).toBe(false);
 	});
 
@@ -67,10 +76,11 @@ describe('', () => {
 			version: '0.1',
 			'directus:extension': { type: 'interface', path: './dist/index.js', source: './src/index.js', host: '^9.0.0' },
 		};
+
 		expect(validateExtensionManifest(mockExtension)).toBe(true);
 	});
 
-	it('returns true when passed a valid ExtensionManifest with a hybrid type', () => {
+	it('returns true when passed a valid ExtensionManifest with a Hybrid type', () => {
 		const mockExtension = {
 			name: 'test',
 			version: '0.1',
@@ -81,15 +91,84 @@ describe('', () => {
 				host: '^9.0.0',
 			},
 		};
+
 		expect(validateExtensionManifest(mockExtension)).toBe(true);
 	});
 
-	it('returns true when passed a valid ExtensionManifest with a package type', () => {
+	it('returns true when passed a valid ExtensionManifest with a type of bundle', () => {
+		const mockExtension = {
+			name: 'test',
+			version: '0.1',
+			'directus:extension': {
+				type: 'bundle',
+				path: { app: './dist/app.js', api: './dist/api.js' },
+				entries: [
+					{ type: 'interface', name: 'test-interface', source: './src/test-interface/index.js' },
+					{ type: 'hook', name: 'test-hook', source: './src/test-hook/index.js' },
+					{
+						type: 'operation',
+						name: 'test-operation',
+						source: { app: './src/test-operation/app.js', api: './src/test-operation/api.js' },
+					},
+				],
+				host: '^9.0.0',
+			},
+		};
+
+		expect(validateExtensionManifest(mockExtension)).toBe(true);
+	});
+
+	it('returns true when passed a valid ExtensionManifest with a Package type', () => {
 		const mockExtension = {
 			name: 'test',
 			version: '0.1',
 			'directus:extension': { type: 'pack', host: '^9.0.0' },
 		};
+
 		expect(validateExtensionManifest(mockExtension)).toBe(true);
 	});
 });
+
+describe('validateExtensionOptionsBundleEntry', () => {
+	it('returns false when passed item has no type', () => {
+		const mockEntry = {};
+
+		expect(validateExtensionOptionsBundleEntry(mockEntry)).toBe(false);
+	});
+
+	it('returns false when passed item has an invalid type', () => {
+		const mockEntry = { type: 'bundle' };
+
+		expect(validateExtensionOptionsBundleEntry(mockEntry)).toBe(false);
+	});
+
+	it('returns false when passed item has no name', () => {
+		const mockEntry = { type: 'interface' };
+
+		expect(validateExtensionOptionsBundleEntry(mockEntry)).toBe(false);
+	});
+
+	it('returns false when passed item has a Hybrid type and has no source or it has the wrong format', () => {
+		const mockEntry = { type: 'operation', name: 'test', source: './src/index.js' };
+
+		expect(validateExtensionOptionsBundleEntry(mockEntry)).toBe(false);
+	});
+
+	it('returns false when passed item has an App or API type and has no source', () => {
+		const mockEntry = { type: 'interface', name: 'test' };
+
+		expect(validateExtensionOptionsBundleEntry(mockEntry)).toBe(false);
+	});
+
+	it('returns true when passed a valid ExtensionOptionsBundleEntry with an App or API type', () => {
+		const mockEntry = { type: 'interface', name: 'test', source: './src/index.js' };
+
+		expect(validateExtensionOptionsBundleEntry(mockEntry)).toBe(true);
+	});
+
+	it('returns true when passed a valid ExtensionOptionsBundleEntry with a Hybrid type', () => {
+		const mockEntry = { type: 'operation', name: 'test', source: { app: './src/app.js', api: './src/api.js' } };
+
+		expect(validateExtensionOptionsBundleEntry(mockEntry)).toBe(true);
+	});
+});
diff --git a/packages/shared/src/utils/validate-extension-manifest.ts b/packages/shared/src/utils/validate-extension-manifest.ts
index ed3a9fb6c0..d8a8bfa361 100644
--- a/packages/shared/src/utils/validate-extension-manifest.ts
+++ b/packages/shared/src/utils/validate-extension-manifest.ts
@@ -1,10 +1,16 @@
 import {
 	EXTENSION_PACKAGE_TYPES,
 	EXTENSION_PKG_KEY,
+	EXTENSION_TYPES,
 	HYBRID_EXTENSION_TYPES,
 	PACKAGE_EXTENSION_TYPES,
 } from '../constants';
-import { ExtensionManifest, ExtensionManifestRaw } from '../types';
+import {
+	ExtensionManifest,
+	ExtensionManifestRaw,
+	ExtensionOptionsBundleEntry,
+	ExtensionOptionsBundleEntryRaw,
+} from '../types';
 import { isIn } from './array-helpers';
 
 export function validateExtensionManifest(
@@ -16,38 +22,66 @@ export function validateExtensionManifest(
 
 	const extensionOptions = extensionManifest[EXTENSION_PKG_KEY];
 
-	if (!extensionOptions) {
-		return false;
-	}
-
-	if (!extensionOptions.type) {
-		return false;
-	}
-
-	if (!isIn(extensionOptions.type, EXTENSION_PACKAGE_TYPES)) {
+	if (
+		!extensionOptions ||
+		!extensionOptions.type ||
+		!isIn(extensionOptions.type, EXTENSION_PACKAGE_TYPES) ||
+		!extensionOptions.host
+	) {
 		return false;
 	}
 
 	if (isIn(extensionOptions.type, PACKAGE_EXTENSION_TYPES)) {
-		if (!extensionOptions.host) {
-			return false;
+		if (extensionOptions.type === 'bundle') {
+			if (
+				!extensionOptions.path ||
+				typeof extensionOptions.path === 'string' ||
+				!extensionOptions.path.app ||
+				!extensionOptions.path.api ||
+				!extensionOptions.entries ||
+				!Array.isArray(extensionOptions.entries) ||
+				!extensionOptions.entries.every((entry) => validateExtensionOptionsBundleEntry(entry))
+			) {
+				return false;
+			}
 		}
-	} else if (isIn(extensionOptions.type, HYBRID_EXTENSION_TYPES)) {
-		if (
-			!extensionOptions.path ||
-			!extensionOptions.source ||
-			typeof extensionOptions.path === 'string' ||
-			typeof extensionOptions.source === 'string' ||
-			!extensionOptions.path.app ||
-			!extensionOptions.path.api ||
-			!extensionOptions.source.app ||
-			!extensionOptions.source.api ||
-			!extensionOptions.host
-		) {
+	} else {
+		if (isIn(extensionOptions.type, HYBRID_EXTENSION_TYPES)) {
+			if (
+				!extensionOptions.path ||
+				!extensionOptions.source ||
+				typeof extensionOptions.path === 'string' ||
+				typeof extensionOptions.source === 'string' ||
+				!extensionOptions.path.app ||
+				!extensionOptions.path.api ||
+				!extensionOptions.source.app ||
+				!extensionOptions.source.api
+			) {
+				return false;
+			}
+		} else {
+			if (!extensionOptions.path || !extensionOptions.source) {
+				return false;
+			}
+		}
+	}
+
+	return true;
+}
+
+export function validateExtensionOptionsBundleEntry(
+	entry: ExtensionOptionsBundleEntryRaw
+): entry is ExtensionOptionsBundleEntry {
+	if (!entry.type || !isIn(entry.type, EXTENSION_TYPES) || !entry.name) {
+		return false;
+	}
+
+	if (isIn(entry.type, HYBRID_EXTENSION_TYPES)) {
+		if (!entry.source || typeof entry.source === 'string' || !entry.source.app || !entry.source.api) {
 			return false;
 		}
 	} else {
-		if (!extensionOptions.path || !extensionOptions.source || !extensionOptions.host) {
+		if (!entry.source) {
 			return false;
 		}
 	}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index dcb90974f3..06e6173e16 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -758,12 +758,15 @@ importers:
       '@rollup/plugin-node-resolve': 15.0.0
       '@rollup/plugin-replace': 5.0.0
       '@rollup/plugin-terser': 0.1.0
+      '@rollup/plugin-virtual': 2.1.0
       '@types/fs-extra': 9.0.13
+      '@types/inquirer': 8.2.1
       '@vue/compiler-sfc': 3.2.41
       chalk: 4.1.1
       commander: 9.4.1
       execa: 5.1.1
       fs-extra: 10.1.0
+      inquirer: ^8.2.4
       npm-run-all: 4.1.5
       ora: 5.4.0
       rimraf: 3.0.2
@@ -779,11 +782,13 @@ importers:
       '@rollup/plugin-node-resolve': 15.0.0_rollup@3.2.3
       '@rollup/plugin-replace': 5.0.0_rollup@3.2.3
       '@rollup/plugin-terser': 0.1.0_rollup@3.2.3
+      '@rollup/plugin-virtual': 2.1.0_rollup@3.2.3
       '@vue/compiler-sfc': 3.2.41
       chalk: 4.1.1
       commander: 9.4.1
       execa: 5.1.1
       fs-extra: 10.1.0
+      inquirer: 8.2.4
       ora: 5.4.0
       rollup: 3.2.3
       rollup-plugin-styles: 4.0.0_rollup@3.2.3
@@ -791,6 +796,7 @@ importers:
       rollup-plugin-vue: 6.0.0_@vue+compiler-sfc@3.2.41
     devDependencies:
       '@types/fs-extra': 9.0.13
+      '@types/inquirer': 8.2.1
       npm-run-all: 4.1.5
       rimraf: 3.0.2
       typescript: 4.8.4
@@ -4434,6 +4440,15 @@ packages:
       terser: 5.15.1
     dev: false
 
+  /@rollup/plugin-virtual/2.1.0_rollup@3.2.3:
+    resolution: {integrity: sha512-CPPAtlKT53HFqC8jFHb/V5WErpU8Hrq2TyCR0A7kPQMlF2wNUf0o1xuAc+Qxj8NCZM0Z3Yvl+FbUXfJjVWqDwA==}
+    engines: {node: '>=8.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0
+    dependencies:
+      rollup: 3.2.3
+    dev: false
+
   /@rollup/plugin-virtual/3.0.0_rollup@3.2.3:
     resolution: {integrity: sha512-K9KORe1myM62o0lKkNR4MmCxjwuAXsZEtIHpaILfv4kILXTOrXt/R2ha7PzMcCHPYdnkWPiBZK8ed4Zr3Ll5lQ==}
     engines: {node: '>=14.0.0'}