TyphonJS•6mo ago

v12 seems to break item reactivity for createFilterQuery

I've been trying out my system on v12. Something I notice is that some of my reactive components are no longer reactive. Specifically where I've used createFilterQuery. I don't get any errors but when the items in the wildcard list are changed, the view doesn't update. I mean the filter select still works reactively but if any of the values of the items in the list are altered, or if the core list changes (e.g. item is added or deleted from the original unfiltered list) those changes aren't reactively rendered. I don't understand why that might be but I've tested the same code in both v11 and v12 and it's working in v11. My svelte component looks something like this:

  $: typeSearch.set(typeFilterValue);
  $: items = [...$wildcard];

  /** @type {import('@typhonjs-fvtt/runtime/svelte/store').DynMapReducer<string, Item>} */
  const wildcard = doc.embedded.create(Item, {
    name: "wildcard",
    filters: [nameSearch, typeSearch],
    sort: (a, b) => a.name.localeCompare(b.name),
  });

  $: typeSearch.set(typeFilterValue);
  $: items = [...$wildcard];

  /** @type {import('@typhonjs-fvtt/runtime/svelte/store').DynMapReducer<string, Item>} */
  const wildcard = doc.embedded.create(Item, {
    name: "wildcard",
    filters: [nameSearch, typeSearch],
    sort: (a, b) => a.name.localeCompare(b.name),
  });

<template>
<Select options {typeFilterOptions} bind:value={typeFilterValue} />
{#each items as item (item.id)}
  .. various item properties
{/each}

<template>
<Select options {typeFilterOptions} bind:value={typeFilterValue} />
{#each items as item (item.id)}
  .. various item properties
{/each}

It might not precisely be to do with createFilterQuery. I'm not sure yet why it's happening, but certainly, what was working in v11 is not working in v12.

3 Replies

TyphonJS (Michael)•6mo ago

I'm not sure what you are referring to with createFilterQuery that reminds me of older TRL example code. Have you taken a look at DynReducerHelper? essential-svelte-esm uses it: https://github.com/typhonjs-fvtt-demo/essential-svelte-esm/blob/main/src/view/document/embedded-collection/EmbeddedDocAppShell.svelte

geoidesicOP•6mo ago

I'm not sure what you are referring to with...

This: https://discord.com/channels/737953117999726592/1127834196795199589/1133098292163649637

TyphonJS (Michael)•6mo ago

Yes. That is now replaced with DynReducerHelper.filters.regexObjectQuery. createFilterQuery was removed last year from the standard library. Perhaps you are using an older version of the standard library.

Gaming

Programming

v12 seems to break item reactivity for createFilterQuery