@solid-primitives/map

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

Changelog

See CHANGELOG.md

Similar packages

Other packages similar to @solid-primitives/map

solid-js

Solid's built-in stores support reactive objects and collections of state. They are a broader state-management tool; the map primitives offer a more direct Map/Set-style interface for collection operations.

mobx

MobX provides observable collections, including observable maps and sets, with automatic tracking. It offers a fuller reactive-state system, while the Solid primitives are designed to integrate with Solid's reactivity.

@vue/reactivity

Vue's reactivity package makes native collections such as Map and Set reactive through its proxy-based system. It is framework-agnostic at the reactivity layer and uses Vue's tracking model rather than Solid's.