Support map store

[uwej711]

It looks to me that currently only atoms are supported. If I have a map and want to listen/subscribe to some keys, I have to create my own controller or is there any other way?

I will try to implement the controller and create a PR for that if you are interested.

[emilbonnek]

I have not had to use maps myself so I am not sure how they work. I took a peek into nanostores/solid and nanostores/react and they don't seem to have any special code for maps. nanostores/vue however do have something.

You are very welcome to try making something and if it fits in nicely we can merge it here so others can use it too.

[pearofducks]

@uwej711 - I've proposed a fix in my PR, but if you want to test/use the fix while waiting for it to merge it's available here

[uwej711]

I actually wanted to have something that allows me to subscribe to a single key of a map store:

export class MapController<MapType> implements ReactiveController {
    private unsubscribe: undefined | (() => void);

    constructor(
        private host: ReactiveControllerHost,
        private map: MapStore,
        private key: string,
    ) {
        host.addController(this);
    }

    // Subscribe to the atom when the host connects
    hostConnected() {
        this.unsubscribe = listenKeys(this.map, [this.key], () => {
            this.host.requestUpdate();
        });
    }

    // Unsubscribe from the atom when the host disconnects
    hostDisconnected() {
        this.unsubscribe?.();
    }

    /**
     * The current value of the map key^.
     * @readonly
     */
    get value() {
        return this.map.get()[this.key];
    }
}

I added this to my project and it looks like it is working.

[pearofducks]

Nice! IMO that depends on the philosophy in this project - as you could accomplish the same thing just using a computed with useStores instead of increasing the API surface.

[uwej711]

Maybe I can add some information about my use case:

I have multiple checkboxes and I want to store the information if a checkbox is checked or not in the nanostore map passing the key as an attribute to the checkbox. So I don't no beforehand what my keys are. Other components monitor a key in the map and disable themself when the value for the key in the map is false. Here again, the key is passed to the component as an attribute and is not known before.

I think you can do it with computed but I haven't tried.