feat(plugins/toast): migrate plugin

.prettierrc

@@ -1,8 +1,8 @@
 {
-  "semi": false,
-  "trailingComma": "es5",
-  "singleQuote": true,
-  "printWidth": 80,
-  "tabWidth": 2,
-  "useTabs": true
+	"semi": false,
+	"trailingComma": "es5",
+	"singleQuote": true,
+	"printWidth": 80,
+	"tabWidth": 2,
+	"useTabs": true
 }

eslint.config.js

@@ -6,20 +6,17 @@ import vueConfig from '@dataport/eslint-config-geodev/vue'
 import jsonConfig from '@dataport/eslint-config-geodev/json'
 import markdownConfig from '@dataport/eslint-config-geodev/markdown'
 import prettierConfig from 'eslint-plugin-prettier/recommended'
+import perfectionist from 'eslint-plugin-perfectionist'
 
 const polarConfig = {
+	plugins: {
+		perfectionist,
+	},
 	rules: {
-		'prettier/prettier': [
-			'error',
-			{
-				semi: false,
-				trailingComma: 'es5',
-				singleQuote: true,
-				printWidth: 80,
-				tabWidth: 2,
-				useTabs: true,
-			},
-		],
+		'prettier/prettier': 'error',
+
+		// Re-enable rules that are disabled by prettier but do not collide
+		curly: ['error', 'all'],
 
 		// POLAR-specific rules
 		'no-warning-comments': 'warn',
@@ -28,6 +25,7 @@ const polarConfig = {
 
 const polarTsConfig = {
 	rules: {
+		// Relaxed rules
 		'@typescript-eslint/no-unsafe-argument': 'off',
 		'@typescript-eslint/no-unsafe-assignment': 'off',
 		'@typescript-eslint/no-unsafe-call': 'off',
@@ -40,6 +38,15 @@ const polarTsConfig = {
 				allowNumber: true,
 			},
 		],
+
+		// POLAR-specific rules
+		'perfectionist/sort-interfaces': [
+			'error',
+			{
+				type: 'natural',
+				groups: ['required-member', 'unknown'],
+			},
+		],
 	},
 }
 

examples/snowbox/index.js

@@ -1,7 +1,9 @@
 import { changeLanguage } from 'i18next'
+import pluginToast from '@polar/polar/plugins/toast'
+import { useToastStore } from '@polar/polar/plugins/toast/store'
 import pluginFullscreen from '@polar/polar/plugins/fullscreen'
 import pluginIconMenu from '@polar/polar/plugins/iconMenu'
-import { addPlugin, createMap, removePlugin, subscribe } from '@polar/polar'
+import { addPlugin, createMap, subscribe } from '@polar/polar'
 import EmptyComponent from './EmptyComponent.vue'
 import styleJsonUrl from './style.json?url'
 import AnotherEmptyComponent from './AnotherEmptyComponent.vue'
@@ -11,6 +13,7 @@
 const ausgleichsflaechen = '1454'
 const reports = '6059'
 
+// eslint-disable-next-line no-unused-vars
 const dataportTheme = {
 	brandColor: {
 		l: '0.4671',
@@ -43,7 +46,7 @@
 	},
 }
 
 // TODO: Re-enable with isSelectable
 /*
 // arbitrary condition for testing
 const isEvenId = (mmlid) => Number(mmlid.slice(-1)) % 2 === 0
@@ -109,14 +112,14 @@
 						stroke: '#FFFFFF',
 						fill: '#333333',
 					},
 					// TODO(dopenguin): Has some HMR issues, needs to be fixed
 					// isSelectable: isReportSelectable,
 				},
 			],
 			clusterClickZoom: true,
 		},
 		// theme: dataportTheme,
 		/*
 			TODO(dopenguin): Surrounding application should be able give information about dark or light mode via update of a state parameter; light mode by default
 		 */
 		locales: [
@@ -170,7 +173,7 @@
 				plugin: pluginFullscreen(),
 				hint: 'Full of yourself',
 			},
 			// TODO: Delete these two including the component once another plugin is implemented
 			{
 				plugin: {
 					component: EmptyComponent,
@@ -193,6 +196,23 @@
 	})
 )
 
+addPlugin(
+	pluginToast({
+		displayComponent: true,
+		layoutTag: 'BOTTOM_MIDDLE',
+	})
+)
+
+const toastStore = useToastStore()
+toastStore.addToast({
+	text: 'Hallo Welt',
+	severity: 'info',
+})
+toastStore.addToast({
+	text: 'Achtung! Dies ist ein Toast!',
+	severity: 'error',
+})
+
 subscribe(
 	'markers',
 	'selectedCoordinates',

package.json

@@ -78,7 +78,7 @@
 		"@cesium/engine": "^15.0.0",
 		"@commitlint/cli": "^19.8.1",
 		"@commitlint/config-conventional": "^19.8.1",
-		"@dataport/eslint-config-geodev": "^0.3.3",
+		"@dataport/eslint-config-geodev": "^0.4.0",
 		"@kern-ux/native": "^2.3.0",
 		"@masterportal/masterportalapi": "2.48.0",
 		"@material-symbols/svg-400": "^0.34.1",
@@ -97,6 +97,7 @@
 		"es-toolkit": "^1.39.8",
 		"eslint": "^9.31.0",
 		"eslint-config-prettier": "^10.1.8",
+		"eslint-plugin-perfectionist": "^4.15.0",
 		"eslint-plugin-prettier": "^5.5.3",
 		"events": "^3.3.0",
 		"hammerjs": "2.0.8",

src/architecture.spec.ts

@@ -9,18 +9,18 @@ describe('Architectural checks', () => {
 		files = filesOfProject(resolve(__dirname, 'tsconfig.json'))
 	})
 
-	test('POLAR should be cycle-free (except for types)', async () => {
+	test('POLAR should be cycle-free', async () => {
 		const violations = await files
-			.matchingPattern('^(?!.*/types\\.ts$).*')
+			.matchingPattern('.*')
 			.should()
 			.beFreeOfCycles()
 			.check()
 		expect(violations).toEqual([])
 	})
 
-	test('Core should not depend on plugins (except for types)', async () => {
+	test('Core should not depend on plugins (except for plugin types)', async () => {
 		const violations = await files
-			.matchingPattern('^core/(?!types\\.ts$).*$')
+			.matchingPattern('^core/(?!types/.*\\.ts$).*$')
 			.shouldNot()
 			.dependOnFiles()
 			.matchingPattern('^plugins/.*$')

src/core/components/PolarMap.ce.vue

@@ -37,7 +37,9 @@ const overlay = useTemplateRef<typeof PolarMapOverlay>('polar-map-overlay')
 let map: Map | null = null
 
 function onMove() {
-	if (!map) return
+	if (!map) {
+		return
+	}
 	center.value = map.getView().getCenter() || center.value
 	zoom.value = map.getView().getZoom() || zoom.value
 }
@@ -71,12 +73,16 @@ function createMap() {
 // NOTE: Updates can happen if a user resizes the window or the fullscreen plugin is used.
 //       Added as a watcher to trigger the update at the correct time.
 watch(hasWindowSize, (value) => {
-	if (!map) return
+	if (!map) {
+		return
+	}
 	updateDragAndZoomInteractions(map, value, hasSmallDisplay.value)
 })
 
 watch(center, (center) => {
-	if (!map) return
+	if (!map) {
+		return
+	}
 	map.getView().animate({
 		center,
 		duration: 400,
@@ -86,7 +92,9 @@ watch(center, (center) => {
 
 const isMacOS = navigator.userAgent.indexOf('Mac') !== -1
 function wheelEffect(event: WheelEvent) {
-	if (hasWindowSize.value) return
+	if (hasWindowSize.value) {
+		return
+	}
 	const condition = computed(() => !hasWindowSize.value)
 	if (isMacOS && !event.metaKey) {
 		overlay.value?.show('overlay.noCommandOnZoom', condition)

src/core/components/PolarMapOverlay.ce.vue

@@ -34,7 +34,9 @@ function show(
 		conditionWatcher.value = watch(
 			condition,
 			(value) => {
-				if (!value) hide()
+				if (!value) {
+					hide()
+				}
 			},
 			{ immediate: true }
 		)

src/core/components/PolarUI.ce.vue

@@ -5,24 +5,21 @@
 </template>
 
 <script lang="ts" setup>
-import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
 import { useMainStore } from '../stores/main.ts'
 import NineLayout from './layouts/NineLayout.ce.vue'
 import StandardLayout from './layouts/StandardLayout.ce.vue'
 
-const { configuration } = storeToRefs(useMainStore())
+const mainStore = useMainStore()
 
 const layout = computed(() => {
-	const configuredLayout = configuration.value.layout
-
-	if (!configuredLayout || configuredLayout === 'standard') {
+	if (mainStore.layout === 'standard') {
 		return StandardLayout
 	}
-	if (configuredLayout === 'nineRegions') {
+	if (mainStore.layout === 'nineRegions') {
 		return NineLayout
 	}
-	return configuredLayout
+	return mainStore.layout
 })
 </script>
 

src/core/index.ts

@@ -103,20 +103,20 @@
 
 export function removePlugin(pluginId: string) {
 	const coreStore = useMainStore()
-	const plugin = coreStore.plugins.find((p) => p.id === pluginId)
+	const plugin = coreStore.plugins.find(({ id }) => id === pluginId)
 
 	if (!plugin) {
 		console.error(`Plugin "${pluginId}" not found.`)
 		return
 	}
 	const store = plugin.storeModule?.()
 	if (store) {
-		store.teardownPlugin()
+		if (typeof store.teardownPlugin === 'function') {
+			store.teardownPlugin()
+		}
 		store.$reset()
 	}
-	coreStore.plugins = coreStore.plugins.filter(
-		(plugin) => plugin.id !== pluginId
-	)
+	coreStore.plugins = coreStore.plugins.filter(({ id }) => id !== pluginId)
 }
 
 /**
@@ -160,7 +160,7 @@
 
 			const coreStore = useMainStore()
 
 			// TODO(oeninghe-dataport): Pass configuration as CE properties.
 			// createMap may survive as a convenience wrapper.
 			coreStore.configuration = mapZoomOffset({
 				...defaults,

src/core/stores/export.ts

@@ -6,6 +6,12 @@
 
 import { defineStore } from 'pinia'
 import { computed } from 'vue'
+import type {
+	PluginId,
+	BundledPluginId,
+	BundledPluginStores,
+	PolarPluginStore,
+} from '../types'
 import { useMainStore } from './main'
 
 /* eslint-disable tsdoc/syntax */
@@ -18,6 +24,18 @@ import { useMainStore } from './main'
 export const useCoreStore = defineStore('core', () => {
 	const mainStore = useMainStore()
 
+	function getPluginStore<T extends PluginId>(
+		id: T
+	): ReturnType<
+		T extends BundledPluginId
+			? BundledPluginStores<typeof id>
+			: PolarPluginStore
+	> | null {
+		const plugin = mainStore.plugins.find((plugin) => plugin.id === id)
+		// @ts-expect-error | We trust that our internal IDs work.
+		return plugin?.storeModule?.() || null
+	}
+
 	return {
 		/**
 		 * The current height of the map.
@@ -61,6 +79,15 @@ export const useCoreStore = defineStore('core', () => {
 		 * @readonly
 		 */
 		hasWindowSize: computed(() => mainStore.hasWindowSize),
+		/**
+		 * Returns a plugin's store by its ID.
+		 *
+		 * For bundled plugins, the return value is typed.
+		 *
+		 * If no plugin with the specified ID is loaded, `null` is returned instead.
+		 */
+		getPluginStore,
+
 		/**
 		 * Allows reading or setting the OIDC token used for service accesses.
 		 */
@@ -72,6 +99,15 @@ export const useCoreStore = defineStore('core', () => {
 		 * @alpha
 		 */
 		lightElement: computed(() => mainStore.lightElement),
+		/**
+		 * The currently used layout.
+		 * Either a string indicating `standard` or `nineRegions` or a custom Vue component.
+		 *
+		 * @readonly
+		 * @alpha
+		 */
+		layout: computed(() => mainStore.layout),
+
 		/**
 		 * Allows accessing the OpenLayers Map element.
 		 *