@solid-primitives/static-store

Primitives for creating small reactive objects that doesn't change their shape over time - don't need a proxy wrapper.

• createStaticStore - Creates a writable static store object.
• createDerivedStaticStore - Creates a static store that is derived from a source function.

Installation

1npm install @solid-primitives/static-store
2# or
3yarn add @solid-primitives/static-store
4# or
5pnpm add @solid-primitives/static-store

createStaticStore

Creates read-only object that is shallowly reactive — only reactive on its first level and for the enumerable properties specified in the initial value — and a setter. It behaves similarly to createStore, but with limited features to keep it simple and performant. Designed to be used for reactive objects with static keys and dynamic values, like reactive Event State, location, etc.

How to use it

It takes a single argument - an initial value. It returns a tuple with the store object and a setter function.

1import { createStaticStore } from "@solid-primitives/static-store";
2
3const [size, setSize] = createStaticStore({ width: 0, height: 0 });
4
5createEffect(() => {
6  // both of these are separate signals, that can be listened to independently
7  console.log(size.width, size.height);
8});
9
10// changing the property will trigger observers of that property only
11setSize("width", 100);
12
13el.addEventListener("resize", () => {
14  // passed object will get merged with the existing store
15  setSize({ width: el.offsetWidth, height: el.offsetHeight });
16});
17
18// adding a new property will NOT work
19// the shape of the store is static
20setSize("new-property", "value");

createDerivedStaticStore

A derived version of the createStaticStore. It will use the update function to derive the value of the store. It will only update when the dependencies of the update function change.

How to use it

It works similarly to the createMemo primitive and it takes the same arguments, but it returns a reactive object rather than an accessor function.

1// source
2const [size, setSize] = createSignal({ width: 0, height: 0 });
3
4const store = createDerivedStaticStore(size);
5
6createEffect(() => {
7  // both of these are separate signals, that can be listened to independently
8  console.log(store.width, store.height);
9});
10
11el.addEventListener("resize", () => {
12  // only the changed properties that changed will trigger their observers
13  setSize(p => ({ ...p, height: el.offsetHeight }));
14});

createHydratableStaticStore

A "hydratable" version of the createStaticStore - it will use the serverValue on the server and the update function on the client. If initialized during hydration it will use serverValue as the initial value and update it once hydration is complete.

Warning This primitive version is experimental, and mostly used internally by other primitives. It is not recommended to use it directly.

1import { createHydratableStaticStore } from "@solid-primitives/static-store";
2
3// reads from the DOM
4const getSize = () => ({ width: el.offsetWidth, height: el.offsetHeight });
5
6const [size, setSize] = createHydratableStaticStore(
7  // server fallback value
8  { width: 0, height: 0 },
9  // update function (called onMount)
10  () => {
11    el.addEventListener("resize", () => setSize(getSize()));
12    return getSize();
13  },
14);
15
16createEffect(() => {
17  console.log(size.width, size.height);
18});

Changelog

See CHANGELOG.md