@solid-primitives/map
v0.4.13
Published
The Map & WeakMap data structures as a reactive signals.
Downloads
47,291
Readme
@solid-primitives/map
The reactive versions of Map
& WeakMap
built-in data structures.
ReactiveMap
- A reactiveMap
.ReactiveWeakMap
- A reactiveWeakMap
.
Installation
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.
How to use it
Import
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.
const userPoints = new ReactiveMap<User, number>();
// 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.
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.
const map = new ReactiveMap<string, { age: number }>();
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