halu Posts - Answer Overflow

halu

Explore posts from servers

•Created by halu on 6/27/2024 in #support

SOLVED: createLazyMemo Broken?

Not being updated after initial run: https://playground.solidjs.com/anonymous/5bd22dcf-1313-41dc-8fe2-efff425c7def Another example: https://playground.solidjs.com/anonymous/c50c02a6-35e9-4b74-bd74-2b1414fda976

11 replies

SSolidJS

•Created by halu on 6/20/2024 in #support

SOLVED: Non-Reactive Memo for Reactive Values?

I wish to perform a memoized calculation on demand rather than optimistically. Here we see createMemo running optimistically: https://playground.solidjs.com/anonymous/63165594-60fe-4ff2-966f-620574dd5761 Here i've solved the problem by manually tracking the dirty state and determining whether to recalc or just return at call time: https://playground.solidjs.com/anonymous/21a6530b-632c-46df-80d6-48ddd75ba665 I'm fine with this solution, but i just wanted to check that i'm not missing anything obvious

13 replies

SSolidJS

•Created by halu on 5/30/2024 in #support

SOLVED: Trigger Side Effects on a Callbacks Dependency Updates

I'm connecting a live feed to solid and currently trying to apply a filter. I filter the feed as it comes in, but if the filter function changes or a reactive value under its scope updates, I need to re-filter from scratch. I'm not sure how to do this...

// 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)

I'd prefer to not filter over the whole map for every insert, but idk how to detect those deep changes like "set_filter_user".

181 replies

SSolidJS

•Created by halu on 2/23/2024 in #support

Solid-Router: "named views" equivalent?

What would be the solid-router equivalent of vue-routers "named views"? https://router.vuejs.org/guide/essentials/named-views

{
  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
      }
    }
  ]
}

Found this, but idk that i want to use a 2 year abandoned repo https://github.com/SupertigerDev/solid-named-router

19 replies

SSolidJS

•Created by halu on 9/19/2023 in #support

Integrate External, Read-Only Data Source Into Reactive System

Suppose the following:

// 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>
    )
  }

How do I get that external event to trigger DOM updates and recall the getter? https://playground.solidjs.com/anonymous/c937bc30-3d80-432c-814b-956ee3b58efa

12 replies

Gaming

Programming