perf: prevent watching reactive props continously

BREAKING CHANGE:
the composable `usePropsAsObjectProperties` which is used as foundation in all components has been refactored.
Props were watched always deeply and for lot's of components this was done multiple times since the components implement watchers by themselves.
However, even if not expected, this may cause some side effects with reactive changes which must be applied for individual components when not implemented and therefore considered as a breaking change.
Please check your app carefully when updating to the new major version.

Author: d-koppenhagen

src/components/animations/OlAnimationFeature.vue

@@ -21,7 +21,7 @@ const props = withDefaults(
 const map = inject("map");
 const vectorLayer = inject<Ref<VectorSource<Geometry>> | null>("vectorLayer");
 
-const { properties } = usePropsAsObjectProperties(props);
+const properties = usePropsAsObjectProperties(props);
 
 defineExpose({
   map,

src/components/interaction/OlClusterSelectInteraction.vue

@@ -27,7 +27,7 @@ const props = withDefaults(defineProps<Options>(), {
 
 const map = inject<Map>("map");
 
-const { properties } = usePropsAsObjectProperties(props);
+const properties = usePropsAsObjectProperties(props);
 
 const select = computed(() => {
   return new SelectCluster({

src/components/interaction/OlDragBoxInteraction.vue

@@ -20,7 +20,7 @@ const props = withDefaults(defineProps<Options>(), {});
 
 const map = inject<Map>("map");
 
-const { properties } = usePropsAsObjectProperties(props);
+const properties = usePropsAsObjectProperties(props);
 
 const dragbox = computed(() => {
   const s = new DragBox({

src/components/interaction/OlDragRotateInteraction.vue

@@ -22,12 +22,10 @@ const props = withDefaults(
 
 const map = inject<Map>("map");
 
-const { properties } = usePropsAsObjectProperties(props);
+const properties = usePropsAsObjectProperties(props);
 
 const dragrotate = computed(() => {
-  const s = new DragRotate({
-    ...properties,
-  });
+  const s = new DragRotate(properties);
 
   return s;
 });

src/components/interaction/OlDragRotateZoomInteraction.vue

@@ -19,7 +19,7 @@ const props = withDefaults(
 );
 
 const map = inject<Map>("map");
-const { properties } = usePropsAsObjectProperties(props);
+const properties = usePropsAsObjectProperties(props);
 const dragRotateZoom = computed(() => {
   const OlDragRotateAndZoom = new DragRotateAndZoom({
     ...properties,

src/components/interaction/OlLinktInteraction.vue

@@ -29,7 +29,7 @@ const props = withDefaults(defineProps<Options>(), {
 });
 
 const map = inject<Map>("map");
-const { properties } = usePropsAsObjectProperties(props);
+const properties = usePropsAsObjectProperties(props);
 
 const link = shallowRef(new Link(properties));
 

src/components/interaction/OlSelectInteraction.vue

@@ -35,7 +35,7 @@ const props = withDefaults(
 );
 
 const map = inject<Map>("map");
-const { properties } = usePropsAsObjectProperties(props);
+const properties = usePropsAsObjectProperties(props);
 
 const select = computed(() => {
   return new Select({

src/components/interaction/OlSnapInteraction.vue

@@ -26,7 +26,7 @@ const props = withDefaults(
 const map = inject<Map>("map");
 const source = inject<Ref<VectorSource> | null>("vectorSource");
 
-const { properties } = usePropsAsObjectProperties(props);
+const properties = usePropsAsObjectProperties(props);
 
 const createSnap = () => {
   const olSnap = new Snap({

src/components/interaction/OlTransformInteraction.vue

@@ -43,7 +43,7 @@ defineOptions({
 
 const map = inject<Map>("map");
 
-const { properties } = usePropsAsObjectProperties(props);
+const properties = usePropsAsObjectProperties(props);
 
 const transform = computed(() => {
   const olTransform = new Transform({

src/components/layers/OlAnimatedClusterLayer.vue

@@ -59,7 +59,7 @@ const props = withDefaults(
 const map = inject<Map>("map");
 const layerGroup = inject<LayerGroup | null>("layerGroup", null);
 
-const { properties } = usePropsAsObjectProperties(props);
+const properties = usePropsAsObjectProperties(props);
 
 const clusterSource = shallowRef(
   new Cluster({

src/components/layers/OlHeatmapLayer.vue

@@ -47,7 +47,7 @@ const props = withDefaults(
 const map = inject<Map>("map");
 const layerGroup = inject<LayerGroup | null>("layerGroup", null);
 
-const { properties } = usePropsAsObjectProperties(props);
+const properties = usePropsAsObjectProperties(props);
 const heatmapLayer = shallowRef(new HeatmapLayer(properties));
 
 watch(

src/components/layers/OlImageLayer.vue

@@ -23,7 +23,7 @@ const props = withDefaults(
 const map = inject<Map>("map");
 const layerGroup = inject<LayerGroup | null>("layerGroup", null);
 
-const { properties } = usePropsAsObjectProperties(props);
+const properties = usePropsAsObjectProperties(props);
 
 const imageLayer = ref(new ImageLayer(properties));
 

src/components/layers/OlLayerGroup.vue

@@ -30,7 +30,7 @@ const props = withDefaults(
 );
 
 const map = inject<Map>("map");
-const { properties } = usePropsAsObjectProperties(props);
+const properties = usePropsAsObjectProperties(props);
 
 const layerGroup = shallowRef(new LayerGroup(properties));
 useOpenLayersEvents(layerGroup, [

src/components/layers/OlTileLayer.vue

@@ -40,7 +40,7 @@ const map = inject<Map>("map");
 const layerGroup = inject<LayerGroup | null>("layerGroup", null);
 const overViewMap = inject<Ref<OverviewMap | null> | null>("overviewMap", null);
 
-const { properties } = usePropsAsObjectProperties(props);
+const properties = usePropsAsObjectProperties(props);
 
 const tileLayer = ref(new TileLayer(properties));
 

src/components/layers/OlVectorImageLayer.vue

@@ -36,7 +36,7 @@ const props = withDefaults(
 const map = inject<Map>("map");
 const layerGroup = inject<LayerGroup | null>("layerGroup", null);
 
-const { properties } = usePropsAsObjectProperties(props);
+const properties = usePropsAsObjectProperties(props);
 
 const vectorImageLayer = computed(() => new VectorImageLayer(properties));
 

src/components/layers/OlVectorLayer.vue

@@ -39,7 +39,7 @@ const props = withDefaults(
 const map = inject<Map>("map");
 const layerGroup = inject<LayerGroup | null>("layerGroup", null);
 
-const { properties } = usePropsAsObjectProperties(props);
+const properties = usePropsAsObjectProperties(props);
 
 const vectorLayer = computed(() => new VectorLayer(properties));
 

src/components/layers/OlVectorTileLayer.vue

@@ -41,7 +41,7 @@ const props = withDefaults(
 const map = inject<Map>("map");
 const layerGroup = inject<LayerGroup | null>("layerGroup", null);
 
-const { properties } = usePropsAsObjectProperties(props);
+const properties = usePropsAsObjectProperties(props);
 
 const vectorTileLayer = computed(() => new VectorTileLayer(properties));
 

src/components/layers/OlWebglTileLayer.vue

@@ -28,7 +28,7 @@ const layerGroup = inject<LayerGroup | null>("layerGroup", null);
 
 const overViewMap = inject<Ref<OverviewMap | null> | null>("overviewMap", null);
 
-const { properties } = usePropsAsObjectProperties(props);
+const properties = usePropsAsObjectProperties(props);
 
 const tileLayer = shallowRef(new TileLayer(properties));
 

src/components/layers/OlWebglVectorLayer.vue

@@ -39,7 +39,7 @@ const props = withDefaults(
 const map = inject<Map>("map");
 const layerGroup = inject<LayerGroup | null>("layerGroup", null);
 
-const { properties } = usePropsAsObjectProperties(props);
+const properties = usePropsAsObjectProperties(props);
 
 const webglVectorLayer = computed(() => {
   return new WebGLVectorLayer({

src/components/map/OlGeoLocation.vue

@@ -31,7 +31,7 @@ const props = withDefaults(defineProps<Options>(), {
   }),
 });
 
-const { properties } = usePropsAsObjectProperties(props);
+const properties = usePropsAsObjectProperties(props);
 
 const geoLoc = computed(() => new Geolocation(properties));
 

src/components/map/OlMap.vue

@@ -37,7 +37,7 @@ const emit = defineEmits([
   "rendercomplete",
 ]);
 
-const { properties } = usePropsAsObjectProperties(props);
+const properties = usePropsAsObjectProperties(props);
 
 const mapRef = ref<string | HTMLElement | undefined>(undefined);
 let map: Map | undefined = new Map(properties);

src/components/map/OlOverlay.vue

@@ -33,7 +33,7 @@ const map = inject<Map>("map");
 
 const htmlContent = ref<HTMLElement>();
 
-const { properties } = usePropsAsObjectProperties(props);
+const properties = usePropsAsObjectProperties(props);
 
 const overlay = shallowRef(new Overlay(properties));
 

src/components/map/OlView.vue

@@ -27,7 +27,7 @@ const props = withDefaults(defineProps<ViewOptions>(), {
 });
 
 const map = inject<Map>("map");
-const { properties } = usePropsAsObjectProperties(props);
+const properties = usePropsAsObjectProperties(props);
 
 const createProp = () => {
   return {

src/components/mapControls/OlAttributionControl.vue

@@ -32,7 +32,7 @@ const props = withDefaults(
 );
 
 const attrs = useAttrs();
-const { properties } = usePropsAsObjectProperties(props);
+const properties = usePropsAsObjectProperties(props);
 const { control } = useControl(Attribution, properties, attrs);
 
 defineExpose({

src/components/mapControls/OlButtonControl.vue

@@ -20,7 +20,7 @@ const props = withDefaults(
 );
 
 const attrs = useAttrs();
-const { properties } = usePropsAsObjectProperties(props);
+const properties = usePropsAsObjectProperties(props);
 
 const { control } = useControl(Button, properties, attrs);
 

src/components/mapControls/OlContextMenuControl.vue

@@ -21,7 +21,7 @@ defineOptions({
 });
 
 const attrs = useAttrs();
-const { properties } = usePropsAsObjectProperties(props);
+const properties = usePropsAsObjectProperties(props);
 
 const { control } = useControl(ContextMenu, properties, attrs);
 useOpenLayersEvents(control, ["beforeopen", "open", "close", "add-menu-entry"]);

src/components/mapControls/OlControlBar.vue

@@ -20,7 +20,7 @@ const props = withDefaults(
 );
 
 const attrs = useAttrs();
-const { properties } = usePropsAsObjectProperties(props);
+const properties = usePropsAsObjectProperties(props);
 
 const { control } = useControl(Bar, properties, attrs);
 

src/components/mapControls/OlFullScreenControl.vue

@@ -33,7 +33,7 @@ const props = withDefaults(
 );
 
 const attrs = useAttrs();
-const { properties } = usePropsAsObjectProperties(props);
+const properties = usePropsAsObjectProperties(props);
 const { control } = useControl(FullScreen, properties, attrs);
 
 defineExpose({

src/components/mapControls/OlLayerSwitcherControl.vue

@@ -17,7 +17,7 @@ const props = withDefaults(defineProps<Options>(), {
 });
 
 const attrs = useAttrs();
-const { properties } = usePropsAsObjectProperties(props);
+const properties = usePropsAsObjectProperties(props);
 
 const { control } = useControl(LayerSwitcher, properties, attrs);
 

src/components/mapControls/OlLayerSwitcherImageControl.vue

@@ -18,7 +18,7 @@ const props = withDefaults(defineProps<Options>(), {
 });
 
 const attrs = useAttrs();
-const { properties } = usePropsAsObjectProperties(props);
+const properties = usePropsAsObjectProperties(props);
 
 const { control } = useControl(LayerSwitcherImage, properties, attrs);
 

src/components/mapControls/OlMousePositionControl.vue

@@ -21,7 +21,7 @@ const props = withDefaults(
 );
 
 const attrs = useAttrs();
-const { properties } = usePropsAsObjectProperties(props);
+const properties = usePropsAsObjectProperties(props);
 
 const { control } = useControl(MousePosition, properties, attrs);
 defineExpose({

src/components/mapControls/OlOverviewMapControl.vue

@@ -13,7 +13,7 @@ import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties
 const props = defineProps<Options>();
 
 const attrs = useAttrs();
-const { properties } = usePropsAsObjectProperties(props);
+const properties = usePropsAsObjectProperties(props);
 const { control } = useControl(OverviewMap, properties, attrs);
 
 provide("overviewMap", control);

src/components/mapControls/OlPrintDialogControl.vue

@@ -13,7 +13,7 @@ import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties
 const props = withDefaults(defineProps<Options>(), {});
 
 const attrs = useAttrs();
-const { properties } = usePropsAsObjectProperties(props);
+const properties = usePropsAsObjectProperties(props);
 
 const { control } = useControl(PrintDialog, properties, attrs);
 

src/components/mapControls/OlProfileControl.vue

@@ -16,7 +16,7 @@ defineOptions({
 const props = withDefaults(defineProps<Options>(), {});
 
 const attrs = useAttrs();
-const { properties } = usePropsAsObjectProperties(props);
+const properties = usePropsAsObjectProperties(props);
 const { control } = useControl(Profile, properties, attrs);
 
 useOpenLayersEvents(control, [

src/components/mapControls/OlRotateControl.vue

@@ -30,7 +30,7 @@ const props = withDefaults(
 );
 
 const attrs = useAttrs();
-const { properties } = usePropsAsObjectProperties(props);
+const properties = usePropsAsObjectProperties(props);
 
 const { control } = useControl(Rotate, properties, attrs);
 

src/components/mapControls/OlScaleLineControl.vue

@@ -31,7 +31,7 @@ const props = withDefaults(
 );
 
 const attrs = useAttrs();
-const { properties } = usePropsAsObjectProperties(props);
+const properties = usePropsAsObjectProperties(props);
 
 const { control } = useControl(ScaleLine, properties, attrs);
 

src/components/mapControls/OlSearchControl.vue

@@ -14,7 +14,7 @@ const props = withDefaults(defineProps<Options>(), {
 });
 
 const attrs = useAttrs();
-const { properties } = usePropsAsObjectProperties(props);
+const properties = usePropsAsObjectProperties(props);
 
 const { control } = useControl(Search, properties, attrs);
 

src/components/mapControls/OlSwipeControl.vue

@@ -23,7 +23,7 @@ const props = withDefaults(
 );
 
 const attrs = useAttrs();
-const { properties } = usePropsAsObjectProperties(props);
+const properties = usePropsAsObjectProperties(props);
 
 const { control } = useControl(Swipe, properties, attrs);
 

src/components/mapControls/OlToggleControl.vue

@@ -11,7 +11,7 @@ import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties
 const props = withDefaults(defineProps<Options>(), {});
 
 const attrs = useAttrs();
-const { properties } = usePropsAsObjectProperties(props);
+const properties = usePropsAsObjectProperties(props);
 
 const { control } = useControl(Toggle, properties, attrs);
 

src/components/mapControls/OlVideoRecorderControl.vue

@@ -20,7 +20,7 @@ const props = withDefaults(defineProps<Options & { downloadName?: string }>(), {
 });
 
 const attrs = useAttrs();
-const { properties } = usePropsAsObjectProperties(props);
+const properties = usePropsAsObjectProperties(props);
 const { control } = useControl(VideoRecorder, properties, attrs);
 
 useOpenLayersEvents(control, ["start", "stop", "pause", "resume"]);

src/components/mapControls/OlZoneControl.vue

@@ -23,7 +23,7 @@ const props = withDefaults(
 );
 
 const attrs = useAttrs();
-const { properties } = usePropsAsObjectProperties(props);
+const properties = usePropsAsObjectProperties(props);
 
 const { control } = useControl(MapZone, properties, attrs);
 

src/components/mapControls/OlZoomControl.vue

@@ -20,7 +20,7 @@ const props = withDefaults(defineProps<Options>(), {
 });
 
 const attrs = useAttrs();
-const { properties } = usePropsAsObjectProperties(props);
+const properties = usePropsAsObjectProperties(props);
 
 const { control } = useControl(Zoom, properties, attrs);
 defineExpose({

src/components/mapControls/OlZoomSliderControl.vue

@@ -20,7 +20,7 @@ const props = withDefaults(
 );
 
 const attrs = useAttrs();
-const { properties } = usePropsAsObjectProperties(props);
+const properties = usePropsAsObjectProperties(props);
 
 const { control } = useControl(ZoomSlider, properties, attrs);
 defineExpose({