SolidJS•10mo ago

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•10mo 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•10mo 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 🌈•10mo 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 🌈•10mo 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 🌈•10mo ago

so you could use Index

bigmistqke 🌈•10mo 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 🌈•10mo 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 🌈•10mo 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 🌈•10mo 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•10mo 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

Gaming

Programming

Integrate External, Read-Only Data Source Into Reactive System