@solid-primitives/map


The reactive versions of Map & WeakMap built-in data structures.

- ReactiveMap - A reactive Map.
- ReactiveWeakMap - A reactive WeakMap.

Installation

``bash
npm install @solid-primitives/map


or

yarn add @solid-primitives/map

or

pnpm add @solid-primitives/map
`

ReactiveMap and ReactiveWeakMap

A reactive version of Map/WeakMap data structure. All the reads _(e.g. get or has)_ are signals, and all the writes _(e.g. delete or set)_ will cause updates to appropriate signals.

$3

#### Import

`ts
import { ReactiveMap } from "@solid-primitives/map";
// or
import { ReactiveWeakMap } from "@solid-primitives/map";
`

#### Basic usage

The usage is almost the same as the original Javascript structures.

`ts
const userPoints = new ReactiveMap();
// reads can be listened to reactively
createEffect(() => {
userPoints.get(user1); // => T: number | undefined (reactive)
userPoints.has(user1); // => T: boolean (reactive)
// ReactiveWeakMap won't have .size or any methods that loop over the values
userPoints.size; // => T: number (reactive)
});
// apply changes
userPoints.set(user1, 100);
userPoints.delete(user2);
userPoints.set(user1, { foo: "bar" });
`

#### Constructor arguments

ReactiveMap's and ReactiveWeakMap's constructor one optional argument that is the initial entries of the map.

`ts
const map = new ReactiveMap([
["foo", [1, 2, 3]],
["bar", [3, 4, 5]],
]);
`

#### Values are shallowly wrapped

Treat the values of ReactiveMap and ReactiveMap as individual signals, to cause updates, they have to be set through the .set() method, no mutations.

`ts
const map = new ReactiveMap();
map.set("John", { age: 34 });

// this won't cause any updates:
map.get("John").age = 35;

// this will:
map.set("John", { age: 35 });
``

Changelog

See CHANGELOG.md