Skip to content

Commit

Permalink
chore: create svelte store to deep compare values
Browse files Browse the repository at this point in the history
Update the store value if previous and new values aren't deep equal
  • Loading branch information
KevinFabre-ods committed Sep 28, 2023
1 parent 7fd5e30 commit b3cf1f3
Show file tree
Hide file tree
Showing 2 changed files with 39 additions and 38 deletions.
48 changes: 10 additions & 38 deletions packages/visualizations/src/components/MapPoi/Map.svelte
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script lang="ts">
import type { BBox } from 'geojson';
import createDeepEqual from '../../stores/createDeepEqual';
import MapRender from './MapRender.svelte';
Expand All @@ -12,26 +12,20 @@
getPopupsConfiguration,
getMapOptions,
} from './utils';
import type { Center, PoiMapData, PoiMapOptions } from './types';
import type { PoiMapData, PoiMapOptions } from './types';
export let data: Async<PoiMapData>;
export let options: PoiMapOptions;
let bbox: BBox;
let previousBbox: BBox;
let center: Center;
let previousCenter: Center;
$: style = getMapStyle(options.style);
$: sources = getMapSources(data.value?.sources);
$: layers = getMapLayers(data.value?.layers);
$: popupsConfiguration = getPopupsConfiguration(data.value?.layers);
$: ({
bbox: currentBbox,
bbox: _bbox,
zoom,
center: currentCenter,
center: _center,
title,
subtitle,
description,
Expand All @@ -41,32 +35,10 @@
interactive,
} = getMapOptions(options));
/*
* As options is an object, current bbox updates when options changes
* We want to trigger an update to MapRender only if bbox value changes, not its reference.
*/
$: {
// Update bbox only if different from previous bbox
if (
currentBbox &&
(!previousBbox || currentBbox.some((bound, index) => bound !== previousBbox[index]))
) {
bbox = currentBbox;
previousBbox = currentBbox;
}
}
// Same thing as above for center
$: {
if (
currentCenter &&
(!previousCenter ||
currentCenter.some((point, index) => point !== previousCenter[index]))
) {
center = currentCenter;
previousCenter = currentCenter;
}
}
let bbox = createDeepEqual(_bbox);
let center = createDeepEqual(_center);
$: bbox.set(_bbox);
$: center.set(_center);
</script>

<div>
Expand All @@ -76,8 +48,8 @@
{sources}
{layers}
{popupsConfiguration}
{bbox}
{center}
bbox={$bbox}
center={$center}
{zoom}
{title}
{subtitle}
Expand Down
29 changes: 29 additions & 0 deletions packages/visualizations/src/stores/createDeepEqual.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import { writable, get } from 'svelte/store';

/**
* Creates a Svelte writable store that compares values deeply before updating.
*
* @param initialValue - The initial value for the store.
* @returns An object containing the subscribe and set methods.
*/
const createDeepEqual = <V>(initialValue: V | undefined) => {
const value = writable<V | undefined>(initialValue);

return {
/**
* Subscribes to changes in the store's value.
*/
subscribe: value.subscribe,
/**
* Sets the new value for the store if it differs from the current value
* by performing a deep comparison.
*/
set: (newValue: V | undefined) => {
if (JSON.stringify(newValue) !== JSON.stringify(get(value))) {
value.set(newValue);
}
},
};
};

export default createDeepEqual;

0 comments on commit b3cf1f3

Please sign in to comment.