Deprecated

This package is being deprecated in favor of a package model that mirrors the original preactjs/signals repo. If you were using this package, then @deepsignal/preact is a drop-in-replacement for you! And if you were wishing this package had React support like @preact/signals-react then great news: You can now use @deepsignal/react! And if you happened to want the underlying framework-agnostic logic for this repo like @preact/signals-core, then you can use @deepsignal/core.

📶 preact-signal-store

This library is meant to expand on Preact's new Signal primitive to make it a viable state management solution at the scale of a full state management system by wrapping the built in primitive with a new DeepSignal model.

Installation

1# npm
2npm i preact-signal-store
3# yarn
4yarn add preact-signal-store
5# pnpm
6pnpm add preact-signal-store

This package also requires preact & @preact/signals as peer dependencies.

Major v2.0 updates

This library was originally written with a much simpler store model. Version 2.0 aims to make the new DeepSignal model act far closer to how Signals work under the hood. I hope this should make it more accessible to Preact developers already comfortable with the Signal primitive.

Why use preact-signal-store?

In a current Preact application you would be easily tempted to use a state management solution from the React ecosystem which relies on the VDOM. If you use a library like this then then your application wide state updates could be causing full VDOM rerenders. Signals provide us an escape from that on the scale of micro-state, but this library aims to scale that solution for larger applications.

How it works

Very simply, the library just takes an arbitrary object of any scale or shape, and recursively turns all properties into signals. The objects themselves each turn into a DeepSignal which contains a value getter & setter as well as a peek method just like regular Signal instances. However, if you assign a new value to a DeepSignal, the setter method will recursively find every true Signal inside the object and assign them to a new value. So if you subscribe to a Signal in a component, you can guarantee that it will be updated no matter what level of the store gets reassigned.

So a simple example like this

1import { deepSignal } from "preact-signal-store";
2
3const userStore = deepSignal({
4  name: {
5    first: "Thor",
6    last: "Odinson"
7  },
8  email: "thor@avengers.org"
9});

...is equivalent to this code...

1import { signal } from "@preact/signals";
2
3const userStore = {
4  name: {
5    first: signal("Thor"),
6    last: signal("Odinson"),
7    get value(): { first: string, last: string } {
8      return {
9        first: this.first.value,
10        last: this.last.value
11      }
12    },
13    set value(payload: { first: string, last: string }) {
14      batch(() => {
15        this.first.value = payload.first;
16        this.last.value = payload.last;
17      });
18    },
19    peek(): { first: string, last: string } {
20      return {
21        first: this.first.peek(),
22        last: this.last.peek()
23      }
24    },
25  },
26  email: signal("thor@avengers.org"),
27  get value(): { name: { first: string, last: string }, email: string } {
28    return {
29      name: {
30        first: this.name.first.value,
31        last: this.name.last.value
32      },
33      email: this.email.value
34    }
35  },
36  set value(payload: { name: { first: string, last: string }, email: string }) {
37    batch(() => {
38      this.name.first.value = payload.name.first;
39      this.name.last.value = payload.name.last;
40      this.email.value = payload.email;
41    });
42  },
43  peek(): { name: { first: string, last: string }, email: string } {
44    return {
45      name: {
46        first: this.name.first.peek(),
47        last: this.name.last.peek()
48      },
49      email: this.email.peek()
50    }
51  },
52};

Using DeepSignal in a local context

By utilizing useDeepSignal you can get a local state DX that's very similar to class components while continuing to have the performance advantages of signals.

1import { useDeepSignal } from "preact-signal-store";
2
3const UserRegistrationForm = () => {
4  const user = useDeepSignal(() => ({
5    name: {
6      first: "",
7      last: ""
8    },
9    email: ""
10  }));
11
12  const submitRegistration = (event) => {
13    event.preventDefault();
14    fetch(
15      "/register",
16      { method: "POST", body: JSON.stringify(user.peek()) }
17    );
18  }
19
20  return (
21    <form onSubmit={submitRegistration}>
22      <label>
23        First name
24        <input value={user.name.first}
25          onInput={e => user.name.first.value = e.currentTarget.value} />
26      </label>
27      <label>
28        Last name
29        <input value={user.name.last}
30          onInput={e => user.name.last.value = e.currentTarget.value} />
31      </label>
32      <label>
33        Email
34        <input value={user.email}
35          onInput={e => user.email.value = e.currentTarget.value} />
36      </label>
37      <button>Submit</button>
38    </form>
39  );
40}

TypeScript support

The API for deepStore and useDeepStore will handle dynamic typing for arbitrary input! It will also help you avoid a case like this

1import { deepSignal } from "preact-signal-store";
2
3const userStore = deepSignal({
4  name: {
5    first: "Thor",
6    last: "Odinson"
7  },
8  email: "thor@avengers.org"
9});
10
11// TS error: Cannot assign to 'email' because it is a read-only property.
12userStore.value.email = "another@email.com"

Recipes

Zustand style method actions

When I look to Zustand for the API it provides, it seems like a lot of their API (as much as I admire it) is based around supporting the functional context. But the output of preact-signal-store is very openly dynamic and writing to it inside or outside of a component ends up being the same. So you can take Zustand's basic example...

1import create from "zustand";
2
3export const useBearStore = create((set) => ({
4  bears: 0,
5  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
6  removeAllBears: () => set({ bears: 0 }),
7}))

...and create an effectively equivalent version with preact-signal-store like this...

1import { deepSignal } from "preact-signal-store";
2
3export const bearStore = {
4  data: deepSignal({
5    bears: 0
6  }),
7  increasePopulation() {
8    this.data.bears.value++;
9  },
10  removeAllBears() {
11    this.data.bears.value = 0
12  }
13};

Storing and fetching from localStorage

Because the value getter on a DeepSignal effectively calls the value getter on each underlying Signal, calling the DeepSignal's getter will properly subscribe to each underlying signal. So if you wanted to manage the side effects of any level of a DeepSignal you just need to call effect from @preact/signals and call DeepSignal.value

1import { deepSignal } from "preact-signal-store";
2import { effect } from "@preact/signals";
3
4type UserStore = {
5  name: {
6    first: string;
7    last: string;
8  };
9  email: string;
10}
11
12const getInitialUserStore = (): UserStore => {
13  const storedUserStore = localStorage.getItem("USER_STORE_KEY");
14  if (storedUserStore) {
15    // you should probably validate this 🤷‍♂️
16    return JSON.parse(storedUserStore);
17  } else {
18    return {
19      name: {
20        first: "",
21        last: ""
22      },
23      email: ""
24    };
25  }
26}
27
28const userStore = deepSignal(getInitialUserStore());
29
30effect(() => localStorage.setItem("USER_STORE_KEY", JSON.stringify(userStore.value)));

This would also work for any level of the DeepSignal.

1import { deepSignal } from "preact-signal-store";
2import { effect } from "@preact/signals";
3
4type UserNameStore = {
5  first: string;
6  last: string;
7};
8
9const getInitialUserNameStore = (): UserNameStore => {
10  const storedUserStore = localStorage.getItem("USER_NAME_STORE_KEY");
11
12  // you should probably validate this too 🤷‍♂️
13  return storedUserStore ? JSON.parse(storedUserStore) : { first: "", last: "" },
14}
15
16const userStore = deepSignal({
17  name: getInitialUserNameStore(),
18  email: ""
19});
20
21effect(() => localStorage.setItem("USER_NAME_STORE_KEY", JSON.stringify(userStore.name.value)));

This should fulfill most needs for middleware or plugins. If this fails to meet your needs, please file an issue and I will address the particular ask.