SOLVED: Trigger Side Effects on a Callbacks Dependency Updates

  // DOESNT WORK:
  createEffect(
    on(filter, () => { // <<<< the problem is this effect listens to just changes to the filter itself
      // run if "set_filter_user" or "replace_filter"
      console.log("refiltered!");
      filter_feed.clear();
      for (let [key, value] of feed_cache) {
        if (filter()(value)) filter_feed.set(key, value);
      }
    }),
  );

  // DOESNT WORK:
  createEffect(
    on(filter, () => { // <<<< the problem is this effect listens to just changes to the filter itself
      // run if "set_filter_user" or "replace_filter"
      console.log("refiltered!");
      filter_feed.clear();
      for (let [key, value] of feed_cache) {
        if (filter()(value)) filter_feed.set(key, value);
      }
    }),
  );

// generic
function live_filter<T>(
  filter: Accessor<(item: T) => boolean>, 
  onInsert: (cb:()=>void)=>void,
  source_store: ()=>unknown
  options: () => {
    let store = new ReactiveMap<string, T>()
    return {
      store: ()=>store,
      filter_set: store.set,
      filter_clear: store.clear
    }
  }
) {
  const { clear, set, filter_store } = options()
  let init = false;

  let RegisterEffect = (first_input: T) => {
    let first_filter: boolean;
    createEffect(() => {
      if (!init) {
        // dummy_input to init tracking
        first_filter = filter()(first_input);
      } else {
        console.log("refiltered!");
        filter_clear();
        for (let [key, item] of source_store()) {
          if (filter()(item)) filter_set(key, item);
        }
      }
    });
    init = true;
    // I believe this is guaranteed as first createEffect call is sync.
    return first_filter!;
  };

  // 3rd Party Fn populates cache
  onInsert((key: string, item: T) => {
    let is_filtered = init ? filter()(item) : RegisterEffect(item);
    if (is_filtered) {
      filter_set(key, item);
    }
  });

  return filter_feed;
}

// default with map
live_filter(my_filter, onInsert, feed_cache)

// customized for solid store
live_filter(
  my_filter, 
  onInsert,
  feed_cache,
  options: () => {
    let [store, setStore] = createStore({})
    return {
      store: ()=>store,
      filter_set: setStore,
      filter_clear: ()=>setStore(reconcile({}))
    }
  }
)

// generic
function live_filter<T>(
  filter: Accessor<(item: T) => boolean>, 
  onInsert: (cb:()=>void)=>void,
  source_store: ()=>unknown
  options: () => {
    let store = new ReactiveMap<string, T>()
    return {
      store: ()=>store,
      filter_set: store.set,
      filter_clear: store.clear
    }
  }
) {
  const { clear, set, filter_store } = options()
  let init = false;

  let RegisterEffect = (first_input: T) => {
    let first_filter: boolean;
    createEffect(() => {
      if (!init) {
        // dummy_input to init tracking
        first_filter = filter()(first_input);
      } else {
        console.log("refiltered!");
        filter_clear();
        for (let [key, item] of source_store()) {
          if (filter()(item)) filter_set(key, item);
        }
      }
    });
    init = true;
    // I believe this is guaranteed as first createEffect call is sync.
    return first_filter!;
  };

  // 3rd Party Fn populates cache
  onInsert((key: string, item: T) => {
    let is_filtered = init ? filter()(item) : RegisterEffect(item);
    if (is_filtered) {
      filter_set(key, item);
    }
  });

  return filter_feed;
}

// default with map
live_filter(my_filter, onInsert, feed_cache)

// customized for solid store
live_filter(
  my_filter, 
  onInsert,
  feed_cache,
  options: () => {
    let [store, setStore] = createStore({})
    return {
      store: ()=>store,
      filter_set: setStore,
      filter_clear: ()=>setStore(reconcile({}))
    }
  }
)

// a base class for exposing store data while controlling all changes to be made only inside this class
export class StoreClass<T extends object> {
    public readonly store: T;
    protected setStore: ReturnType<typeof createStore<T>>[1];

    constructor(initialState: T) {
        const [store, setStore] = createStore<T>(initialState)
        this.store = store;
        this.setStore = setStore;
    }
}

// then can define store classes

// this is the type for the store
interface MySomethingStore {
    some: string
    data: string
}

export class MySomethingState extends StoreClass<MySomethingStore> {
    constructor() {
        super({some: "initial", data: "data"})
    }

    operationThatChangesTheStore() {
        this.setStore({some: "thing else"})
    }
}

// then in components

// a reference to the store (possibly a central store)
const mySomethingState: MySomethingState = ...
const store = mySomethingState.store

// then in the jsx
<div>{store.some} {store.data}</div>

// a base class for exposing store data while controlling all changes to be made only inside this class
export class StoreClass<T extends object> {
    public readonly store: T;
    protected setStore: ReturnType<typeof createStore<T>>[1];

    constructor(initialState: T) {
        const [store, setStore] = createStore<T>(initialState)
        this.store = store;
        this.setStore = setStore;
    }
}

// then can define store classes

// this is the type for the store
interface MySomethingStore {
    some: string
    data: string
}

export class MySomethingState extends StoreClass<MySomethingStore> {
    constructor() {
        super({some: "initial", data: "data"})
    }

    operationThatChangesTheStore() {
        this.setStore({some: "thing else"})
    }
}

// then in components

// a reference to the store (possibly a central store)
const mySomethingState: MySomethingState = ...
const store = mySomethingState.store

// then in the jsx
<div>{store.some} {store.data}</div>

modifyMutable(
  data,
  reconcile({
    colors: ['red', 'blue', 'orange', 'black'],
    fruits: ['apple', 'banana', 'orange']
  })
)

modifyMutable(
  data,
  reconcile({
    colors: ['red', 'blue', 'orange', 'black'],
    fruits: ['apple', 'banana', 'orange']
  })
)

setStore(produce(store => {
    callRecursiveFunctionToDoSomethingOn(store)
}))

setStore(produce(store => {
    callRecursiveFunctionToDoSomethingOn(store)
}))

setStore(produce(store => {
    const node = store[get][to][the][deep][path]
    callRecursiveFunctionToDoSomethingOn(node)
}))

setStore(produce(store => {
    const node = store[get][to][the][deep][path]
    callRecursiveFunctionToDoSomethingOn(node)
}))

// you can traverse structure from this:
{
    a: {
       b: {
          c: {}
       },
       d: {}
    }
}

// and read/write to these: 
{
  a: {/* node properties */}
  b: {}
  c: {}
  d: {}
}

// you can traverse structure from this:
{
    a: {
       b: {
          c: {}
       },
       d: {}
    }
}

// and read/write to these: 
{
  a: {/* node properties */}
  b: {}
  c: {}
  d: {}
}

{
  a: {children: ['b', 'd']}
  b: {children: ['c']}
  c: {}
  d: {}
}

{
  a: {children: ['b', 'd']}
  b: {children: ['c']}
  c: {}
  d: {}
}

{
  a: {parent: ''}  // no parent is the root
  b: {parent: 'a'}
  c: {parent: 'b'}
  d: {parent: 'a'}
}

{
  a: {parent: ''}  // no parent is the root
  b: {parent: 'a'}
  c: {parent: 'b'}
  d: {parent: 'a'}
}

const Child = (props: {id: string, children: string[]}) => {
  const context = useContext(TreeContext)

  return (
    <div>
      <For each={props.children}>
      {childId => <Child id={childId} children={context.tree[childId].children} />}
      </For>
    </div>
  )
}

const Child = (props: {id: string, children: string[]}) => {
  const context = useContext(TreeContext)

  return (
    <div>
      <For each={props.children}>
      {childId => <Child id={childId} children={context.tree[childId].children} />}
      </For>
    </div>
  )
}

for each node, check if it's children has 'c'

for each node, check if it's children has 'c'