S
SolidJS14mo 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
halu14mo 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
halu14mo ago
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
bigmistqke
bigmistqke13mo 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
bigmistqke13mo ago
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
bigmistqke
bigmistqke13mo ago
so you could use Index
bigmistqke
bigmistqke13mo ago
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
bigmistqke
bigmistqke13mo 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
bigmistqke13mo ago
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
bigmistqke
bigmistqke13mo 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
halu13mo 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
Want results from more Discord servers?
Add your server