@solid-primitives/map NPM

@solid-primitives/map

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

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

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 });