diff --git a/packages/client/src/stores/dnd.js b/packages/client/src/stores/dnd.js index eee338c167..532dea0ad5 100644 --- a/packages/client/src/stores/dnd.js +++ b/packages/client/src/stores/dnd.js @@ -1,4 +1,4 @@ -import { writable, derived } from "svelte/store" +import { writable } from "svelte/store" import { computed } from "../utils/computed.js" const createDndStore = () => { diff --git a/packages/client/src/utils/computed.js b/packages/client/src/utils/computed.js index 02bf97710a..aa89e7ad1b 100644 --- a/packages/client/src/utils/computed.js +++ b/packages/client/src/utils/computed.js @@ -1,20 +1,22 @@ import { writable } from "svelte/store" -const getKey = value => { - if (value == null || typeof value !== "object") { - return value - } else { - return JSON.stringify(value) - } -} - -export const computed = (store, getValue) => { - const initialValue = getValue(store) +/** + * Extension of Svelte's built in "derived" stores, which the addition of deep + * comparison of non-primitives. Falls back to using shallow comparison for + * primitive types to avoid performance penalties. + * Useful for instances where a deep comparison is cheaper than an additional + * store invalidation. + * @param store the store to observer + * @param deriveValue the derivation function + * @returns {Writable<*>} a derived svelte store containing just the derived value + */ +export const computed = (store, deriveValue) => { + const initialValue = deriveValue(store) const computedStore = writable(initialValue) let lastKey = getKey(initialValue) store.subscribe(state => { - const value = getValue(state) + const value = deriveValue(state) const key = getKey(value) if (key !== lastKey) { lastKey = key @@ -24,3 +26,13 @@ export const computed = (store, getValue) => { return computedStore } + +// Helper function to serialise any value into a primitive which can be cheaply +// and shallowly compared +const getKey = value => { + if (value == null || typeof value !== "object") { + return value + } else { + return JSON.stringify(value) + } +}