S
SolidJS•16mo ago
halu

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
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
10 Replies
halu
haluOP•16mo ago
so I have two ways: plain old signal with explicit non-equal setter: 
function externMemo(externData: Map<Date, number>) {
  let [val, setVal] = createSignal(externData, {equals: false, name: "trigger"})
  EE.on("dataChanged", ()=>{
    console.log( "dataChanged", JSON.stringify([...externalData.values()]) )
    setVal(externData)
  })
  return val
}
function externMemo(externData: Map<Date, number>) {
  let [val, setVal] = createSignal(externData, {equals: false, name: "trigger"})
  EE.on("dataChanged", ()=>{
    console.log( "dataChanged", JSON.stringify([...externalData.values()]) )
    setVal(externData)
  })
  return val
}
Tracker with vanilla getter: 
function externMemo(externData: Map<Date, number>) {
  let [track, dirty] = createSignal(undefined, {equals: false, name: "trigger"})

  let test = ()=>{
    track()
    console.log( 'dataChanged', JSON.stringify([...externalData.values()]) )
    return externData
  }

  EE.on("dataChanged", ()=>{
    console.log("dataChanged")
    dirty()
  })

  return test
}
function externMemo(externData: Map<Date, number>) {
  let [track, dirty] = createSignal(undefined, {equals: false, name: "trigger"})

  let test = ()=>{
    track()
    console.log( 'dataChanged', JSON.stringify([...externalData.values()]) )
    return externData
  }

  EE.on("dataChanged", ()=>{
    console.log("dataChanged")
    dirty()
  })

  return test
}
So my follow up questions: 1. for very large external data, would using the Tracker method be more performant and memory efficient than the plain old signal method? 2. are there any lower level solutions?
halu
haluOP•16mo ago
https://playground.solidjs.com/anonymous/57f4b710-a887-4dbf-ba09-1fb7a6decbee
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
bigmistqke
bigmistqke•16mo ago
memory wise it will be exactly the same I just wouldn't use <For/> to loop through the data. since For is keyed on reference it would create a new html-element on each update (since the data coming in will be completely new each time, i assume).
bigmistqke
bigmistqke•16mo ago
see https://playground.solidjs.com/anonymous/26d431cc-6de7-4d6f-881b-a338622f351e
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
bigmistqke
bigmistqke•16mo ago
so you could use Index
bigmistqke
bigmistqke•16mo ago
like https://playground.solidjs.com/anonymous/fd9ad9f9-e1f4-4be5-a871-1dba53416117
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
bigmistqke
bigmistqke•16mo ago
if you would still need to switch around rows, you might wanna use setStore with reconcile, but it comes with the cost of a diff and a proxy (and it sounds to me ur use case is more vast amounts of data coming in and needing to be visualised)
bigmistqke
bigmistqke•16mo ago
like https://playground.solidjs.com/anonymous/230c38cd-a1c0-4177-bd40-a268aeef0ce7
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
bigmistqke
bigmistqke•16mo ago
but ye, especially in ur example. memory would be exactly the same. you pass around this reference to this externalData-map. bit confused with the set-up ngl.
halu
haluOP•16mo ago
I'm wrapping a DB lib, it handles a cache that keeps the data in sync with the server So I need to listen to changes on that cache in a reactive manor my worry was that createSignal would somehow instance the data to make it reactive ( I forget how it works under the hood ) if that's not he case then all is good 👍 thx

Did you find this page helpful?