// 3rd Party Cache
let feed_cache = new Map<string, FeedItem>()

let [filter_user, set_filter_user] = createSignal<User|undefined>()
let [filter_fn, replace_filter] = createSignal((item: FeedItem) => {
  // if filter user set, show just their messages. else, show everyones.
  return filter_user() ? item.sender === filter_user().id : true
})

function live_filter(filter) {
  const filter_feed = new ReactiveMap<string, InstanceType<T>>()

  // 3rd Party Fn populates cache
  Feed.onInsert((key:string, item: FeedItem)=>{
    if (filter()(item)) {
      filter_feed.set(key, item)
    }
  })
  
  // pseudo-code
  watchDeep(filter, ()=>{
    // if someone runs "set_filter_user" or "replace_filter", 
    // this should run:
    filter_feed.clear()
    for (let [key, value] of feed_cache) {
      if(filter()(value)) filter_feed.set(key, value)
    }
  })

  return filter_feed
}

let filtered_feed = live_filter(filter_fn)

// 3rd Party Cache
let feed_cache = new Map<string, FeedItem>()

let [filter_user, set_filter_user] = createSignal<User|undefined>()
let [filter_fn, replace_filter] = createSignal((item: FeedItem) => {
  // if filter user set, show just their messages. else, show everyones.
  return filter_user() ? item.sender === filter_user().id : true
})

function live_filter(filter) {
  const filter_feed = new ReactiveMap<string, InstanceType<T>>()

  // 3rd Party Fn populates cache
  Feed.onInsert((key:string, item: FeedItem)=>{
    if (filter()(item)) {
      filter_feed.set(key, item)
    }
  })
  
  // pseudo-code
  watchDeep(filter, ()=>{
    // if someone runs "set_filter_user" or "replace_filter", 
    // this should run:
    filter_feed.clear()
    for (let [key, value] of feed_cache) {
      if(filter()(value)) filter_feed.set(key, value)
    }
  })

  return filter_feed
}

let filtered_feed = live_filter(filter_fn)

{
  path: '/',
  component: MainLayout,
  children: [
    {
      path: 'home',
      components: {
        default: Home,
        sideBar: DefaultSideBar
     ,
    {
      path: 'store',
      components: {
        default: Store,
        sideBar: StoreSideBar
      }
    }
  ]
}

{
  path: '/',
  component: MainLayout,
  children: [
    {
      path: 'home',
      components: {
        default: Home,
        sideBar: DefaultSideBar
     ,
    {
      path: 'store',
      components: {
        default: Store,
        sideBar: StoreSideBar
      }
    }
  ]
}

// Hypothetical external data
  let externalData = new Map()
  EventEmitter.emit("dataChanged", /*no event info*/)

// My problem...
  function externMemo (externData) {
    EventEmitter.on("dataChanged", ()=>/*trigger getter refetch & dom update*/ )
    let getter = ()=>{ 
      // ...
      return externData 
    }
  
    return getter
  }

// Hypothetical Component
  let component = () => {
    let reactiveData = externMemo(externalData)
    return (
     <div>
       {reactiveData().values() /*returns current externalData values*/}
     </div>
    )
  }

// Hypothetical external data
  let externalData = new Map()
  EventEmitter.emit("dataChanged", /*no event info*/)

// My problem...
  function externMemo (externData) {
    EventEmitter.on("dataChanged", ()=>/*trigger getter refetch & dom update*/ )
    let getter = ()=>{ 
      // ...
      return externData 
    }
  
    return getter
  }

// Hypothetical Component
  let component = () => {
    let reactiveData = externMemo(externalData)
    return (
     <div>
       {reactiveData().values() /*returns current externalData values*/}
     </div>
    )
  }