Add support for Displays (#249)

* Create displays extension type

* Optimize define

* Add missing layout component export

* Add readme

* Remove codesmell

src/modules/collections/index.ts

@@ -3,29 +3,27 @@ import CollectionsOverview from './routes/overview/';
 import CollectionsBrowse from './routes/browse/';
 import CollectionsDetail from './routes/detail/';
 
-export default defineModule({
+export default defineModule(({ i18n }) => ({
 	id: 'collections',
-	register: ({ i18n }) => ({
-		name: i18n.tc('collection', 2),
-		routes: [
-			{
-				name: 'collections-overview',
-				path: '/',
-				component: CollectionsOverview,
-			},
-			{
-				name: 'collections-browse',
-				path: '/:collection',
-				component: CollectionsBrowse,
-				props: true,
-			},
-			{
-				name: 'collections-detail',
-				path: '/:collection/:primaryKey',
-				component: CollectionsDetail,
-				props: true,
-			},
-		],
-		icon: 'box',
-	}),
-});
+	name: i18n.tc('collection', 2),
+	icon: 'box',
+	routes: [
+		{
+			name: 'collections-overview',
+			path: '/',
+			component: CollectionsOverview,
+		},
+		{
+			name: 'collections-browse',
+			path: '/:collection',
+			component: CollectionsBrowse,
+			props: true,
+		},
+		{
+			name: 'collections-detail',
+			path: '/:collection/:primaryKey',
+			component: CollectionsDetail,
+			props: true,
+		},
+	],
+}));

src/modules/collections/routes/browse/browse.vue

@@ -77,7 +77,7 @@ import { i18n } from '@/lang';
 import api from '@/api';
 import { LayoutComponent } from '@/layouts/types';
 import useCollectionPresetsStore from '@/stores/collection-presets';
-import { debounce, clone } from 'lodash';
+import { debounce } from 'lodash';
 
 const redirectIfNeeded: NavigationGuard = async (to, from, next) => {
 	const collectionsStore = useCollectionsStore();

src/modules/define.ts

@@ -1,18 +1,20 @@
 import { i18n } from '@/lang/';
-import { Module, ModuleOptions, ModuleContext } from './types';
+import { ModuleDefineParam, ModuleContext, ModuleConfig } from './types';
 
-export function defineModule(options: ModuleOptions): Module {
-	const context: ModuleContext = { i18n };
+export function defineModule(config: ModuleDefineParam): ModuleConfig {
+	let options: ModuleConfig;
 
-	const config = {
-		id: options.id,
-		...options.register(context),
-	};
+	if (typeof config === 'function') {
+		const context: ModuleContext = { i18n };
+		options = config(context);
+	} else {
+		options = config;
+	}
 
-	config.routes = config.routes.map((route) => ({
+	options.routes = options.routes.map((route) => ({
 		...route,
-		path: `/:project/${config.id}${route.path}`,
+		path: `/:project/${options.id}${route.path}`,
 	}));
 
-	return config;
+	return options;
 }

src/modules/types.ts

@@ -1,19 +1,13 @@
 import VueI18n from 'vue-i18n';
 import { RouteConfig } from 'vue-router';
 
-export type ModuleOptions = {
+export type ModuleConfig = {
 	id: string;
-	register: (context: ModuleContext) => ModuleConfig;
-};
-
-export interface ModuleConfig {
-	routes: RouteConfig[];
 	icon: string;
 	name: string | VueI18n.TranslateResult;
-}
-
-export interface Module extends ModuleConfig {
-	id: string;
-}
+	routes: RouteConfig[];
+};
 
 export type ModuleContext = { i18n: VueI18n };
+
+export type ModuleDefineParam = ModuleConfig | ((context: ModuleContext) => ModuleConfig);