refactor: handle generic event pass-through without warnings

provide debug mode capability

Author: d-koppenhagen

docs/.vitepress/theme/index.ts

@@ -7,7 +7,7 @@ export default {
   async enhanceApp({ app }) {
     if (!import.meta.env.SSR) {
       const plugin = await import("../../../src");
-      app.use(plugin);
+      app.use(plugin, { debug: true });
     }
   },
 };

docs/get-started.md

@@ -18,7 +18,7 @@ npm install vue3-openlayers@next # try out the latest version (next channel)
 
 To use `vue3-openlayers` in your application, you can import all components or just what you really need.
 
-```js
+```ts
 import { createApp } from "vue";
 import App from "./App.vue";
 
@@ -27,7 +27,23 @@ import "vue3-openlayers/styles.css"; // vue3-openlayers version < 1.0.0-*
 import "vue3-openlayers/dist/vue3-openlayers.css"; // vue3-openlayers version >= 1.0.0-*
 
 const app = createApp(App);
-app.use(OpenLayersMap);
+app.use(OpenLayersMap /* options */);
 
 app.mount("#app");
 ```
+
+## Debug Mode
+
+You can activate the `debug` mode, to log events receiving from OpenLayers and props passed to OpenLayers on the console.
+
+```ts
+import OpenLayersMap, {
+  type Vue3OpenlayersGlobalOptions,
+} from "vue3-openlayers";
+// ...
+
+const options: Vue3OpenlayersGlobalOptions = {
+  debug: true,
+};
+app.use(OpenLayersMap, options);
+```

src/components/layers/OlLayerGroup.vue

@@ -10,16 +10,20 @@ import LayerGroup, { type Options } from "ol/layer/Group";
 import type Map from "ol/Map";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
 import { layersCommonDefaultProps } from "@/components/layers/LayersCommonProps";
-import eventGateway from "@/helpers/eventGateway";
+import { useOpenLayersEvents } from "@/composables/useOpenLayersEvents";
+
+// prevent warnings caused by event pass-through via useOpenLayersEvents composable
+defineOptions({
+  inheritAttrs: false,
+});
 
 const props = withDefaults(defineProps<Options>(), layersCommonDefaultProps);
-const emit = defineEmits([]);
 
 const map = inject<Map>("map");
 const { properties } = usePropsAsObjectProperties(props);
 
 const layerGroup = new LayerGroup(properties);
-eventGateway(emit, layerGroup, [
+useOpenLayersEvents(layerGroup, [
   "change",
   "change:extend",
   "change:layers",

src/components/sources/OlSourceBingMaps.vue

@@ -8,7 +8,15 @@ import type { Ref } from "vue";
 import { inject, watch, onMounted, onUnmounted, computed } from "vue";
 import type TileLayer from "ol/layer/Tile";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
-import eventGateway, { IMAGE_SOURCE_EVENTS } from "@/helpers/eventGateway";
+import {
+  IMAGE_SOURCE_EVENTS,
+  useOpenLayersEvents,
+} from "@/composables/useOpenLayersEvents";
+
+// prevent warnings caused by event pass-through via useOpenLayersEvents composable
+defineOptions({
+  inheritAttrs: false,
+});
 
 const props = withDefaults(
   defineProps<Omit<Options, "key"> & { apiKey: string }>(),
@@ -24,22 +32,20 @@ const props = withDefaults(
     wrapX: true,
   }
 );
-const emit = defineEmits([]);
 
 const layer = inject<Ref<TileLayer<BingMaps>> | null>("tileLayer");
 
 const { properties } = usePropsAsObjectProperties(props);
 
-const source = computed(() => {
-  const bingMaps = new BingMaps({
-    ...properties,
-    key: properties.apiKey,
-  });
-
-  eventGateway(emit, bingMaps, IMAGE_SOURCE_EVENTS);
+const source = computed(
+  () =>
+    new BingMaps({
+      ...properties,
+      key: properties.apiKey,
+    })
+);
 
-  return bingMaps;
-});
+useOpenLayersEvents(source, IMAGE_SOURCE_EVENTS);
 
 watch(source, () => {
   layer?.value?.setSource(source.value);

src/components/sources/OlSourceCluster.vue

@@ -12,27 +12,30 @@ import type Geometry from "ol/geom/Geometry";
 import type Feature from "ol/Feature";
 import type Point from "ol/geom/Point";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
-import eventGateway, { FEATURE_EVENTS } from "@/helpers/eventGateway";
+import {
+  FEATURE_EVENTS,
+  useOpenLayersEvents,
+} from "@/composables/useOpenLayersEvents";
+
+// prevent warnings caused by event pass-through via useOpenLayersEvents composable
+defineOptions({
+  inheritAttrs: false,
+});
 
 const props = withDefaults(defineProps<Options>(), {
   distance: 20,
   geometryFunction: (feature: Feature<Geometry>): Point =>
     feature.getGeometry() as Point,
   wrapX: true,
 });
-const emit = defineEmits([]);
 
 const layer = inject<Ref<Cluster> | null>("vectorLayer");
 
 const { properties } = usePropsAsObjectProperties(props);
 
-const source = computed(() => {
-  const c = new Cluster(properties);
+const source = computed(() => new Cluster(properties));
 
-  eventGateway(emit, c, FEATURE_EVENTS);
-
-  return c;
-});
+useOpenLayersEvents(source, FEATURE_EVENTS);
 
 const applySource = () => {
   layer?.value?.setSource(null);

src/components/sources/OlSourceImageStatic.vue

@@ -6,29 +6,32 @@ import Static, { type Options } from "ol/source/ImageStatic";
 import { inject, onMounted, onUnmounted, watch } from "vue";
 import type ImageLayer from "ol/layer/Image";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
-import eventGateway, { IMAGE_SOURCE_EVENTS } from "@/helpers/eventGateway";
 import projectionFromProperties from "@/helpers/projection";
+import {
+  IMAGE_SOURCE_EVENTS,
+  useOpenLayersEvents,
+} from "@/composables/useOpenLayersEvents";
+
+// prevent warnings caused by event pass-through via useOpenLayersEvents composable
+defineOptions({
+  inheritAttrs: false,
+});
 
 const props = withDefaults(defineProps<Options>(), {
   interpolate: true,
 });
-const emit = defineEmits([]);
 
 const layer = inject<ImageLayer<Static> | null>("imageLayer");
 const { properties } = usePropsAsObjectProperties(props);
 
-const createSource = () => {
-  const s = new Static({
+const createSource = () =>
+  new Static({
     ...properties,
     projection: projectionFromProperties(properties.projection),
   });
 
-  eventGateway(emit, s, IMAGE_SOURCE_EVENTS);
-
-  return s;
-};
-
 let source = createSource();
+useOpenLayersEvents(source, IMAGE_SOURCE_EVENTS);
 
 watch(properties, () => {
   layer?.setSource(null);

src/components/sources/OlSourceImageWMS.vue

@@ -7,7 +7,15 @@ import { inject, onMounted, onUnmounted, watch } from "vue";
 import type ImageLayer from "ol/layer/Image";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
 import projectionFromProperties from "@/helpers/projection";
-import eventGateway, { IMAGE_SOURCE_EVENTS } from "@/helpers/eventGateway";
+import {
+  IMAGE_SOURCE_EVENTS,
+  useOpenLayersEvents,
+} from "@/composables/useOpenLayersEvents";
+
+// prevent warnings caused by event pass-through via useOpenLayersEvents composable
+defineOptions({
+  inheritAttrs: false,
+});
 
 const props = withDefaults(
   defineProps<
@@ -28,13 +36,12 @@ const props = withDefaults(
     ratio: 1,
   }
 );
-const emit = defineEmits([]);
 
 const layer = inject<ImageLayer<ImageWMS> | null>("imageLayer");
 const { properties } = usePropsAsObjectProperties(props);
 
-const createSource = () => {
-  const i = new ImageWMS({
+const createSource = () =>
+  new ImageWMS({
     ...properties,
     params: {
       ...props.params,
@@ -45,12 +52,8 @@ const createSource = () => {
     projection: projectionFromProperties(properties.projection),
   });
 
-  eventGateway(emit, i, IMAGE_SOURCE_EVENTS);
-
-  return i;
-};
-
 let source = createSource();
+useOpenLayersEvents(source, IMAGE_SOURCE_EVENTS);
 
 watch(properties, () => {
   layer?.setSource(null);

src/components/sources/OlSourceOSM.vue

@@ -7,7 +7,15 @@ import type { Ref } from "vue";
 import { inject, watch, onMounted, onUnmounted, computed } from "vue";
 import type TileLayer from "ol/layer/Tile";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
-import eventGateway, { TILE_SOURCE_EVENTS } from "@/helpers/eventGateway";
+import {
+  TILE_SOURCE_EVENTS,
+  useOpenLayersEvents,
+} from "@/composables/useOpenLayersEvents";
+
+// prevent warnings caused by event pass-through via useOpenLayersEvents composable
+defineOptions({
+  inheritAttrs: false,
+});
 
 const props = withDefaults(defineProps<Options>(), {
   crossOrigin: "anonymous",
@@ -21,19 +29,14 @@ const props = withDefaults(defineProps<Options>(), {
   wrapX: true,
   zDirection: 0,
 });
-const emit = defineEmits([]);
 
 const layer = inject<Ref<TileLayer<OSM>> | null>("tileLayer");
 
 const { properties } = usePropsAsObjectProperties(props);
 
-const source = computed(() => {
-  const o = new OSM(properties);
+const source = computed(() => new OSM(properties));
 
-  eventGateway(emit, o, TILE_SOURCE_EVENTS);
-
-  return o;
-});
+useOpenLayersEvents(source, TILE_SOURCE_EVENTS);
 
 watch(source, () => {
   layer?.value?.setSource(source.value);

src/components/sources/OlSourceStamen.vue

@@ -7,7 +7,15 @@ import Stamen, { type Options } from "ol/source/Stamen";
 import { inject, onMounted, onUnmounted, watch, type Ref, computed } from "vue";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
 import type TileLayer from "ol/layer/Tile";
-import eventGateway, { TILE_SOURCE_EVENTS } from "@/helpers/eventGateway";
+import {
+  TILE_SOURCE_EVENTS,
+  useOpenLayersEvents,
+} from "@/composables/useOpenLayersEvents";
+
+// prevent warnings caused by event pass-through via useOpenLayersEvents composable
+defineOptions({
+  inheritAttrs: false,
+});
 
 const props = withDefaults(defineProps<Options>(), {
   interpolate: true,
@@ -18,22 +26,18 @@ const props = withDefaults(defineProps<Options>(), {
   zDirection: 0,
   wrapX: true,
 });
-const emit = defineEmits([]);
 
 const layer = inject<Ref<TileLayer<Stamen>> | null>("tileLayer");
 const { properties } = usePropsAsObjectProperties(props);
 
-const source = computed(() => {
-  const s = new Stamen(properties);
+const source = computed(() => new Stamen(properties));
 
-  eventGateway(emit, s, [
-    ...TILE_SOURCE_EVENTS,
-    "propertychange",
-    "removefeature",
-  ]);
+useOpenLayersEvents(source, [
+  ...TILE_SOURCE_EVENTS,
+  "propertychange",
+  "removefeature",
+]);
 
-  return s;
-});
 const applySource = () => {
   layer?.value?.setSource(null);
   layer?.value?.setSource(source.value);

src/components/sources/OlSourceTianDiTu.vue

@@ -7,8 +7,16 @@ import { inject, watch, onMounted, onUnmounted, computed } from "vue";
 import type TileLayer from "ol/layer/Tile";
 import usePropsAsObjectProperties from "../../composables/usePropsAsObjectProperties";
 import { Tianditu, type Options } from "@/components/sources/TiandituClass";
-import eventGateway, { TILE_SOURCE_EVENTS } from "@/helpers/eventGateway";
 import type { ImageTile } from "ol";
+import {
+  TILE_SOURCE_EVENTS,
+  useOpenLayersEvents,
+} from "@/composables/useOpenLayersEvents";
+
+// prevent warnings caused by event pass-through via useOpenLayersEvents composable
+defineOptions({
+  inheritAttrs: false,
+});
 
 const props = withDefaults(defineProps<Options>(), {
   layerType: "img",
@@ -26,17 +34,12 @@ const props = withDefaults(defineProps<Options>(), {
   },
   wrapX: true,
 });
-const emit = defineEmits([]);
 
 const layer = inject<Ref<TileLayer<Tianditu>> | null>("tileLayer");
 const { properties } = usePropsAsObjectProperties(props);
-const source = computed(() => {
-  const t = new Tianditu(properties);
+const source = computed(() => new Tianditu(properties));
 
-  eventGateway(emit, t, TILE_SOURCE_EVENTS);
-
-  return t;
-});
+useOpenLayersEvents(source, TILE_SOURCE_EVENTS);
 
 watch(source, () => {
   layer?.value?.setSource(source.value);