Need Help: Solid.js and more complex data models

[tshowan]

I am using Solidjs to manage my app - I have a central Store that holds everything, that I update with produce(). For very basic apps (ie, those whose state is entirely comprised of "primitive" types - objects, arrays, and literals) this works perfectly.

But to build more complex apps, I want to wrap object types up and control access to them. For example, what previously might have just been an object { type:'block', id:123, contents:[...] } becomes

function createBlock(details){
	const Block = {
		type: 'block',
		id: uuid(),
		contents:[]
	}
	Block.get_contents = ()=> {
		// validation and error checking can now go in here
		return Block.contents; 
	}
	return Block;
}

Then my Store looks like:

const [mainAppData, setAppData] = createStore({
	blocks_to_draw: [
		createBlock(...),
		...
	]
})

This approach doesn't work with Solid:

setAppData(
        produce((data) => {
               data.blocks_to_draw[0].contents.abc = 5; // unsafe access, but it works
               data.blocks_to_draw[0].get_contents().abc = 5; // safe access does not trigger any reactivity
        })
 );

The get_contents() function is returning the Block object held in closure, not the proxy-wrapped version derived from data used by produce().

I have made various attempts to pass data through into the Block object, all of which are highly inelegant. Whatever I do, I have the fiddly and frustrating incidental complexity of tracking the "address" of the Block. The whole point of wrapping objects up in this way is that I want to reason about them without caring about where in mainAppData they live.

I want to be able to work in a sensible way, with domain objects that can control access to their properties. I also want to keep using Solid.js for its reactivity.

How do I make this work?