Class PropChangeTracker<T, K>

Example

Track changes to a subset of resolved component properties.

<script lang="ts">
   import { PropChangeTracker }  from '#runtime/svelte/reactivity';

   import { isObject }           from '#runtime/util/object';

   import {
      isBoolean,
      isString,
      resolveByPredicate }       from '#runtime/util/predicate';

   interface Props
   {
      foo?: boolean;
      bar?: string;
   }

   // Combined props options object with `foo` and / or `bar`.
   export let options?: Props = void 0;

   // Individual prop `foo`
   export let foo ?: string = void 0;

   // Individual prop `bar`
   export let bar?: string = void 0;

   const tracker = new PropChangeTracker<Props>({
      keys: ['foo', 'bar']
   });

   // Stores all resolved props.
   const props: Props = {};

   // Normalize the combined options separately from resolution of the individual exported props. The individual
   // props will take precedence over the combined options object.

   $: inputOptions: Props = isObject(options) ? options : {};

   $: props.foo = resolveByPredicate(isBoolean, foo, inputOptions.foo) ?? true;

   $: props.bar = resolveByPredicate(isString, bar, inputOptions?.bar);

   // Control based logic based on prop changes.
   $: {
      const changes = tracker.check(props);

      if (changes.changed)
      {
         if (changes.has('foo'))
         {
            // `foo` state changed.
         }

         if (changes.hasAny('foo', 'bar'))
         {
            // `foo` and / or `bar` changed.
         }
      }
   }
</script>
Copy