How to wrap the “class” into createSignal/Store

[SoTosorrow]

I am a newer of solid, and I want to create a list of reactive items which every item is a object.
I used "createSignal" but it can not track change in "For", so i used the "createStore".
As the docs

Classes are not wrapped, so objects like Date, HTMLElement, RegExp, Map, Set won't be granularly reactive as properties on a store

I can't wrap a instance whatever it is a custom class or library provides (as *1), Although I can embed this by the Spread Syntax(as *2), but maybe there is a better way. And if i used the Spread Syntax, i can't get the instance with type info any more.

Appreciate any help even if point out errors in thinking or code. thanks very much.

import { Component, For} from 'solid-js';
import { createStore } from 'solid-js/store';

let Demo:Component =()=>{
    let [items, setItems] = createStore<any[]>([]);     // a list of object to show
    setItems([                                          // init items value
        new Map,                                        // (*1) Class can not wrapped
        {...new Map()}]                                 // (*2) but can wrapped through spread
    );

    let changeItem = (index:number)=>{    // click to make instance value change
        setItems(index, "v", Math.random())
    }

    return (
        <For each={items}>
            {(item, index)=>(
                <div onClick={[changeItem,index()]}>
                    click_to_change_value : {item.v}
                </div>
            )}
        </For>
    )
}
export default Demo;

[atk]

There's @solid-primitives/map that will get you a reactive Map if you need it.

[SoTosorrow]

In fact, I just want to add solid to the existing class structure non-intrusively, such as displaying a complex custom Class "Item" to the View.
should i just use {...item}?
But you remind me, extra useless properties sure to make less performant.

class Item {
    fill:string;    // the color of Item as aslo as Dom-element color
    x:numer;        // ths position of element
    y:number;
}

[atk]

Why do you need a class at all for these simple properties?

type Item = { fill: string; x: number; y: number };

const items = createStore<Item[]>([]);

Complexity is something that should be ideally reduced and only if that fails, managed.

[SoTosorrow]

emmmm... the class Item is just a sample to show what i want to do. I have some more complex class that already exists.
you are right, complex class maybe is a fail of design, perhaps wrap a exists class is not ideal situation for solid?

[atk]

As so often in development: it depends. Wrapping the class as Ryan suggested will work, but a custom wrapper or a reactive extension of the class might be more performant. I would probably start with wrapped instances and then try to identify performance issues if they arose.

[SoTosorrow]

I just copy the reply to Ryan :)

Got it! anyway, thank you very much, Sometimes because of my experience I can't understand your guidance very well.

At the beginning, I wanted to migrate my code from svelte to solid. I wanted to separate the data from the view, so that the .ts file was only responsible for the data logic (like fill change), and the view only cared about the corresponding changes.
Like the example below, items contains a series of class objects which can call change() and the view gives the DOM update.

I'm just looking for a method like this in solid. if the solid can wrap a list of class like svelte, I don't need to touch my .ts file and the class/data in it.
my english is poor, don't know if it conveyed my meaning.

// item.ts
export default class Item {
    fill:string= '#ddd';
    x:number = 10;
    y:number = 20;

    change(){
        this.fill = 'red';    
    }
}

<script lang="ts">
// svelte
import Item from './Item.ts'

let items:Item[] = [
    new Item(),             // can call change() from Item class
    {...new Item()}         // can not
];

let click = (item:Item)=>{  // toggle click to make circle color changed
    item.change()           // change Item property > this.fill = 'red';
    items = items.map((i)=>(// svelte reactive 
        i == item ? item : i
    ))
}
</script>

<svg width="500" height="900">
    {#each items as item, index(index)}
        <circle on:click={()=>{click(item)}}
            cy={20*index+20}
            cx=30 
            r='5' 
            fill={item.fill}
        />
    {/each}
</svg>

[ryansolid]

Stores can be classes, they just won't wrap child classes. But once they are marked as proxy they will work as a child of other stores and will wrap. Solid exports a symbol that when present on an object(or class instance) will pre-empt the stores not wrapping behavior.

What I'm saying is you can always:

const [store, setStore] = createStore(new MyClass());

Now that isn't too ergonomic but you could wrap that in a function:

function storify(someClassInstance) {
  const [store] = createStore(someClassInstance);
  return store;
}

And then:

setItems(i => [...i, storify(new MyClass())])

Now in the case of certain types of objects I wouldn't expect much. Just because something is a store doesn't mean its methods are bound to a reactive version of this. In general a proxy will just return the underly objects methods and they won't do what you expect. But having this mechanism in Solid means that you could make special classes if authored the right way.

[SoTosorrow]

I understand what you mean, thank you very much for your inspiration, although this method does not seem very elegant.
but now I also feel that wrapping a class may be useless.

[ryansolid]

The trick is this is what MobX does.. Most of their stuff is just objects.. but then they have Observable Maps and Observable Arrays etc.. and they are basically classes that expose a proxy. The way I show it here is a clunky, but the underlying mechanism of using the symbol is pretty powerful for custom reactivity. But it sounds like that is outside your case. The tricky part here is that we don't want to wrap most built ins.. Regex, Dates, HTMLElements etc.. so there wasn't an easy way to make that determination.

[SoTosorrow]

Got it! anyway, thank you very much, Sometimes because of my experience I can't understand your guidance very well.

At the beginning, I wanted to migrate my code from svelte to solid. I wanted to separate the data from the view, so that the .ts file was only responsible for the data logic (like fill change), and the view only cared about the corresponding changes.
Like the example below, items contains a series of class objects which can call change() and the view gives the DOM update.

I'm just looking for a method like this in solid. if the solid can wrap a list of class like svelte, I don't need to touch my .ts file and the class/data in it.
my english is poor, don't know if it conveyed my meaning.

// item.ts
export default class Item {
    fill:string= '#ddd';
    x:number = 10;
    y:number = 20;

    change(){
        this.fill = 'red';    
    }
}

<script lang="ts">
// svelte
import Item from './Item.ts'

let items:Item[] = [
    new Item(),             // can call change() from Item class
    {...new Item()}         // can not
];

let click = (item:Item)=>{  // toggle click to make circle color changed
    item.change()           // change Item property > this.fill = 'red';
    items = items.map((i)=>(// svelte reactive 
        i == item ? item : i
    ))
}
</script>

<svg width="500" height="900">
    {#each items as item, index(index)}
        <circle on:click={()=>{click(item)}}
            cy={20*index+20}
            cx=30 
            r='5' 
            fill={item.fill}
        />
    {/each}
</svg>

[khokm]

Stores can be classes, they just won't wrap child classes.

Is this mentioned in the documentation, or did I miss it?