;
diff --git a/tsconfig.json b/packages/core/tsconfig.json
similarity index 100%
rename from tsconfig.json
rename to packages/core/tsconfig.json
diff --git a/tsconfig.node.json b/packages/core/tsconfig.node.json
similarity index 100%
rename from tsconfig.node.json
rename to packages/core/tsconfig.node.json
diff --git a/vite.config.ts b/packages/core/vite.config.ts
similarity index 65%
rename from vite.config.ts
rename to packages/core/vite.config.ts
index 77e899d..775095b 100644
--- a/vite.config.ts
+++ b/packages/core/vite.config.ts
@@ -1,7 +1,8 @@
-import { defineConfig } from "vitest/config";
+import path from "path";
+
import preact from "@preact/preset-vite";
import dts from "vite-plugin-dts";
-import path from "path";
+import { defineConfig } from "vitest/config";
const coverage = 100;
@@ -13,16 +14,16 @@ export default defineConfig({
statements: coverage,
functions: coverage,
branches: coverage,
- lines: coverage
- }
+ lines: coverage,
+ },
},
plugins: [preact(), dts({ insertTypesEntry: true })],
build: {
lib: {
- entry: path.resolve(__dirname, "src/deepSignal.ts"),
- name: "preact-signal-store",
- fileName: (format) => `lib.${format}.js`
+ entry: path.resolve(__dirname, "src/core.ts"),
+ name: "deepsignalcore",
+ fileName: format => `lib.${format}.js`,
},
- rollupOptions: { external: ["@preact/signals", "preact", "preact/hooks"] }
+ rollupOptions: { external: ["@preact/signals-core"] },
},
});
diff --git a/packages/preact/README.md b/packages/preact/README.md
new file mode 100644
index 0000000..07c0eec
--- /dev/null
+++ b/packages/preact/README.md
@@ -0,0 +1,274 @@
+# 📶 @deepsignal/preact
+
+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. This package is intended for use with Preact
+applications only.
+
+## Installation
+
+```sh
+# npm
+npm i @deepsignal/preact @preact/signals
+# yarn
+yarn add @deepsignal/preact @preact/signals
+# pnpm
+pnpm add @deepsignal/preact @preact/signals
+```
+
+This package also requires `@preact/signals` as peer dependencies, as well as `preact` itself (although the commands above assume you have `preact` already installed).
+
+## Why use `@deepsignal/preact`?
+
+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
+
+```ts
+import { deepSignal } from "@deepsignal/preact";
+
+const userStore = deepSignal({
+ name: {
+ first: "Thor",
+ last: "Odinson"
+ },
+ email: "thor@avengers.org"
+});
+```
+
+...is equivalent to this code...
+
+```ts
+import { signal, batch } from "@preact/signals";
+
+const userStore = {
+ name: {
+ first: signal("Thor"),
+ last: signal("Odinson"),
+ get value(): { first: string, last: string } {
+ return {
+ first: this.first.value,
+ last: this.last.value
+ }
+ },
+ set value(payload: { first: string, last: string }) {
+ batch(() => {
+ this.first.value = payload.first;
+ this.last.value = payload.last;
+ });
+ },
+ peek(): { first: string, last: string } {
+ return {
+ first: this.first.peek(),
+ last: this.last.peek()
+ }
+ },
+ },
+ email: signal("thor@avengers.org"),
+ get value(): { name: { first: string, last: string }, email: string } {
+ return {
+ name: {
+ first: this.name.first.value,
+ last: this.name.last.value
+ },
+ email: this.email.value
+ }
+ },
+ set value(payload: { name: { first: string, last: string }, email: string }) {
+ batch(() => {
+ this.name.first.value = payload.name.first;
+ this.name.last.value = payload.name.last;
+ this.email.value = payload.email;
+ });
+ },
+ peek(): { name: { first: string, last: string }, email: string } {
+ return {
+ name: {
+ first: this.name.first.peek(),
+ last: this.name.last.peek()
+ },
+ email: this.email.peek()
+ }
+ },
+};
+```
+
+### 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.
+
+```tsx
+import { useDeepSignal } from "@deepsignal/preact";
+
+const UserRegistrationForm = () => {
+ const user = useDeepSignal(() => ({
+ name: {
+ first: "",
+ last: ""
+ },
+ email: ""
+ }));
+
+ const submitRegistration = (event) => {
+ event.preventDefault();
+ fetch(
+ "/register",
+ { method: "POST", body: JSON.stringify(user.peek()) }
+ );
+ }
+
+ return (
+
+ );
+}
+```
+
+### 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
+
+```ts
+import { deepSignal } from "@deepsignal/preact";
+
+const userStore = deepSignal({
+ name: {
+ first: "Thor",
+ last: "Odinson"
+ },
+ email: "thor@avengers.org"
+});
+
+// TS error: Cannot assign to 'email' because it is a read-only property.
+userStore.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 `@deepsignal/preact` 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...
+
+```ts
+import create from "zustand";
+
+export const useBearStore = create((set) => ({
+ bears: 0,
+ increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
+ removeAllBears: () => set({ bears: 0 }),
+}))
+```
+
+...and create an effectively equivalent version with `@deepsignal/preact` like this...
+
+```ts
+import { deepSignal } from "@deepsignal/preact";
+
+export const bearStore = {
+ data: deepSignal({
+ bears: 0
+ }),
+ increasePopulation() {
+ this.data.bears.value++;
+ },
+ removeAllBears() {
+ this.data.bears.value = 0
+ }
+};
+```
+
+### 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`
+
+```ts
+import { deepSignal } from "@deepsignal/preact";
+import { effect } from "@preact/signals";
+
+type UserStore = {
+ name: {
+ first: string;
+ last: string;
+ };
+ email: string;
+}
+
+const getInitialUserStore = (): UserStore => {
+ const storedUserStore = localStorage.getItem("USER_STORE_KEY");
+ if (storedUserStore) {
+ // you should probably validate this 🤷♂️
+ return JSON.parse(storedUserStore);
+ } else {
+ return {
+ name: {
+ first: "",
+ last: ""
+ },
+ email: ""
+ };
+ }
+}
+
+const userStore = deepSignal(getInitialUserStore());
+
+effect(() => localStorage.setItem("USER_STORE_KEY", JSON.stringify(userStore.value)));
+```
+
+This would also work for any level of the `DeepSignal`.
+
+```ts
+import { deepSignal } from "@deepsignal/preact";
+import { effect } from "@preact/signals";
+
+type UserNameStore = {
+ first: string;
+ last: string;
+};
+
+const getInitialUserNameStore = (): UserNameStore => {
+ const storedUserStore = localStorage.getItem("USER_NAME_STORE_KEY");
+
+ // you should probably validate this too 🤷♂️
+ return storedUserStore ? JSON.parse(storedUserStore) : { first: "", last: "" },
+}
+
+const userStore = deepSignal({
+ name: getInitialUserNameStore(),
+ email: ""
+});
+
+effect(() => 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.
diff --git a/packages/preact/package.json b/packages/preact/package.json
new file mode 100644
index 0000000..5acaec0
--- /dev/null
+++ b/packages/preact/package.json
@@ -0,0 +1,57 @@
+{
+ "name": "@deepsignal/preact",
+ "private": false,
+ "version": "3.0.1",
+ "type": "module",
+ "files": [
+ "dist"
+ ],
+ "main": "./dist/lib.umd.js",
+ "module": "./dist/lib.es.js",
+ "types": "./dist/lib.d.ts",
+ "exports": {
+ ".": {
+ "import": "./dist/lib.es.js",
+ "require": "./dist/lib.umd.js"
+ }
+ },
+ "scripts": {
+ "build": "tsc --emitDeclarationOnly && vite build",
+ "test": "vitest run --coverage"
+ },
+ "dependencies": {
+ "@deepsignal/core": "3.0.1"
+ },
+ "peerDependencies": {
+ "@preact/signals": "1.x.x"
+ },
+ "devDependencies": {
+ "@preact/preset-vite": "^2.3.0",
+ "@preact/signals": "^1.1.1",
+ "@testing-library/preact": "^3.2.2",
+ "@types/node": "^18.7.16",
+ "@vitest/coverage-c8": "^0.23.1",
+ "jsdom": "^20.0.0",
+ "preact": "^10.10.6",
+ "typescript": "^4.6.4",
+ "v8": "^0.1.0",
+ "vite": "^3.1.0",
+ "vite-plugin-dts": "^1.4.1",
+ "vitest": "^0.23.1"
+ },
+ "homepage": "https://github.com/EthanStandel/deepsignal#readme",
+ "repository": "https://github.com/EthanStandel/deepsignal",
+ "keywords": [
+ "preact",
+ "state",
+ "management",
+ "manager",
+ "cqrs",
+ "redux",
+ "store",
+ "deep",
+ "signal",
+ "signals"
+ ],
+ "license": "MIT"
+}
diff --git a/packages/preact/src/preact.test.tsx b/packages/preact/src/preact.test.tsx
new file mode 100644
index 0000000..7288d68
--- /dev/null
+++ b/packages/preact/src/preact.test.tsx
@@ -0,0 +1,134 @@
+import { render, fireEvent } from "@testing-library/preact";
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { h, Fragment } from "preact";
+import { it, expect, describe } from "vitest";
+
+import { deepSignal, useDeepSignal } from "./preact";
+
+describe("deepSignal", () => {
+ it("rerenders if inner Signal is updated but the DeepSignal is subscribed to", () => {
+ let renderCount = -1;
+ const deepSignalInstance = deepSignal({ inner: { count: 0 } });
+ const Test = () => {
+ renderCount++;
+ return (
+ <>
+
+ Count is {deepSignalInstance.value.inner.count}
+
+
+
+ );
+ };
+ const page = render();
+ const button = page.getByRole("button");
+ fireEvent.click(button);
+ fireEvent.click(button);
+ fireEvent.click(button);
+ expect(renderCount).toBe(3);
+ expect(page.getByTestId("count").innerHTML).toBe("Count is 3");
+ page.unmount();
+ });
+
+ it("rerenders if DeepSignal is updated but the inner Signal is subscribed to", () => {
+ let renderCount = -1;
+ const deepSignalInstance = deepSignal({ inner: { count: 0 } });
+ const Test = () => {
+ renderCount++;
+ return (
+ <>
+
+ Count is {deepSignalInstance.inner.count.value}
+
+
+
+ );
+ };
+ const page = render();
+ const button = page.getByRole("button");
+ fireEvent.click(button);
+ fireEvent.click(button);
+ fireEvent.click(button);
+ expect(renderCount).toBe(3);
+ expect(page.getByTestId("count").innerHTML).toBe("Count is 3");
+ page.unmount();
+ });
+
+ it("can be used in a local-only context", () => {
+ let renderCount = -1;
+ const Test = () => {
+ const deepSignalInstance = useDeepSignal({ inner: { count: 0 } });
+ renderCount++;
+ return (
+ <>
+
+ Count is {deepSignalInstance.value.inner.count}
+
+
+
+ );
+ };
+ const page = render();
+ const button = page.getByRole("button");
+ fireEvent.click(button);
+ fireEvent.click(button);
+ fireEvent.click(button);
+ expect(renderCount).toBe(3);
+ expect(page.getByTestId("count").innerHTML).toBe("Count is 3");
+ page.unmount();
+ });
+
+ it("can be used in a local-only context using functional setter", () => {
+ let renderCount = -1;
+ const Test = () => {
+ const deepSignalInstance = useDeepSignal(() => ({ inner: { count: 0 } }));
+ renderCount++;
+ return (
+ <>
+
+ Count is {deepSignalInstance.inner.count.value}
+
+
+
+ );
+ };
+ const page = render();
+ const button = page.getByRole("button");
+ fireEvent.click(button);
+ fireEvent.click(button);
+ fireEvent.click(button);
+ expect(renderCount).toBe(3);
+ expect(page.getByTestId("count").innerHTML).toBe("Count is 3");
+ page.unmount();
+ });
+
+ it("doesn't allow you to set a property with keys named peek or value", () => {
+ expect(() => deepSignal({ value: "hello" })).toThrowError(
+ /reserved property name/
+ );
+
+ expect(() => deepSignal({ peek: "hello" })).toThrowError(
+ /reserved property name/
+ );
+ });
+});
diff --git a/packages/preact/src/preact.ts b/packages/preact/src/preact.ts
new file mode 100644
index 0000000..5de1bb5
--- /dev/null
+++ b/packages/preact/src/preact.ts
@@ -0,0 +1,11 @@
+import { deepSignal, DeepState } from "@deepsignal/core";
+import { useMemo } from "preact/hooks";
+import "@preact/signals";
+
+const useDeepSignal = (initial: T | (() => T)) =>
+ useMemo(
+ () => deepSignal(typeof initial === "function" ? initial() : initial),
+ []
+ );
+
+export { useDeepSignal, deepSignal };
diff --git a/packages/preact/tsconfig.json b/packages/preact/tsconfig.json
new file mode 100644
index 0000000..b4f9cc2
--- /dev/null
+++ b/packages/preact/tsconfig.json
@@ -0,0 +1,24 @@
+{
+ "compilerOptions": {
+ "target": "ESNext",
+ "useDefineForClassFields": true,
+ "lib": ["DOM", "DOM.Iterable", "ESNext"],
+ "allowJs": false,
+ "skipLibCheck": true,
+ "esModuleInterop": false,
+ "allowSyntheticDefaultImports": true,
+ "strict": true,
+ "forceConsistentCasingInFileNames": true,
+ "module": "ESNext",
+ "moduleResolution": "Node",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "preserve",
+ "jsxFactory": "h",
+ "jsxFragmentFactory": "Fragment",
+ "declaration": true,
+ "outDir": "dist"
+ },
+ "include": ["src"],
+ "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/packages/preact/tsconfig.node.json b/packages/preact/tsconfig.node.json
new file mode 100644
index 0000000..9d31e2a
--- /dev/null
+++ b/packages/preact/tsconfig.node.json
@@ -0,0 +1,9 @@
+{
+ "compilerOptions": {
+ "composite": true,
+ "module": "ESNext",
+ "moduleResolution": "Node",
+ "allowSyntheticDefaultImports": true
+ },
+ "include": ["vite.config.ts"]
+}
diff --git a/packages/preact/vite.config.ts b/packages/preact/vite.config.ts
new file mode 100644
index 0000000..48b22e7
--- /dev/null
+++ b/packages/preact/vite.config.ts
@@ -0,0 +1,36 @@
+import path from "path";
+
+import preact from "@preact/preset-vite";
+import dts from "vite-plugin-dts";
+import { defineConfig } from "vitest/config";
+
+const coverage = 100;
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ test: {
+ environment: "jsdom",
+ coverage: {
+ statements: coverage,
+ functions: coverage,
+ branches: coverage,
+ lines: coverage,
+ },
+ },
+ plugins: [preact(), dts({ insertTypesEntry: true })],
+ build: {
+ lib: {
+ entry: path.resolve(__dirname, "src/preact.ts"),
+ name: "deepsignalpreact",
+ fileName: format => `lib.${format}.js`,
+ },
+ rollupOptions: {
+ external: [
+ "@preact/signals",
+ "preact",
+ "preact/hooks",
+ "@deepsignal/core",
+ ],
+ },
+ },
+});
diff --git a/packages/react/README.md b/packages/react/README.md
new file mode 100644
index 0000000..e1ea16d
--- /dev/null
+++ b/packages/react/README.md
@@ -0,0 +1,274 @@
+# 📶 @deepsignal/react
+
+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. This package is intended for use with React
+applications only.
+
+## Installation
+
+```sh
+# npm
+npm i @deepsignal/react @preact/signals-react
+# yarn
+yarn add @deepsignal/react @preact/signals-react
+# pnpm
+pnpm add @deepsignal/react @preact/signals-react
+```
+
+This package also requires `@preact/signals-react` as peer dependencies, as well as `react` itself (although the commands above assume you have `react` already installed).
+
+## Why use `@deepsignal/react`?
+
+In a current React 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
+
+```ts
+import { deepSignal } from "@deepsignal/react";
+
+const userStore = deepSignal({
+ name: {
+ first: "Thor",
+ last: "Odinson"
+ },
+ email: "thor@avengers.org"
+});
+```
+
+...is equivalent to this code...
+
+```ts
+import { signal, batch } from "@preact/signals-react";
+
+const userStore = {
+ name: {
+ first: signal("Thor"),
+ last: signal("Odinson"),
+ get value(): { first: string, last: string } {
+ return {
+ first: this.first.value,
+ last: this.last.value
+ }
+ },
+ set value(payload: { first: string, last: string }) {
+ batch(() => {
+ this.first.value = payload.first;
+ this.last.value = payload.last;
+ });
+ },
+ peek(): { first: string, last: string } {
+ return {
+ first: this.first.peek(),
+ last: this.last.peek()
+ }
+ },
+ },
+ email: signal("thor@avengers.org"),
+ get value(): { name: { first: string, last: string }, email: string } {
+ return {
+ name: {
+ first: this.name.first.value,
+ last: this.name.last.value
+ },
+ email: this.email.value
+ }
+ },
+ set value(payload: { name: { first: string, last: string }, email: string }) {
+ batch(() => {
+ this.name.first.value = payload.name.first;
+ this.name.last.value = payload.name.last;
+ this.email.value = payload.email;
+ });
+ },
+ peek(): { name: { first: string, last: string }, email: string } {
+ return {
+ name: {
+ first: this.name.first.peek(),
+ last: this.name.last.peek()
+ },
+ email: this.email.peek()
+ }
+ },
+};
+```
+
+### 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.
+
+```tsx
+import { useDeepSignal } from "@deepsignal/react";
+
+const UserRegistrationForm = () => {
+ const user = useDeepSignal(() => ({
+ name: {
+ first: "",
+ last: ""
+ },
+ email: ""
+ }));
+
+ const submitRegistration = (event) => {
+ event.preventDefault();
+ fetch(
+ "/register",
+ { method: "POST", body: JSON.stringify(user.peek()) }
+ );
+ }
+
+ return (
+
+ );
+}
+```
+
+### 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
+
+```ts
+import { deepSignal } from "@deepsignal/react";
+
+const userStore = deepSignal({
+ name: {
+ first: "Thor",
+ last: "Odinson"
+ },
+ email: "thor@avengers.org"
+});
+
+// TS error: Cannot assign to 'email' because it is a read-only property.
+userStore.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 `@deepsignal/react` 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...
+
+```ts
+import create from "zustand";
+
+export const useBearStore = create((set) => ({
+ bears: 0,
+ increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
+ removeAllBears: () => set({ bears: 0 }),
+}))
+```
+
+...and create an effectively equivalent version with `@deepsignal/react` like this...
+
+```ts
+import { deepSignal } from "@deepsignal/react";
+
+export const bearStore = {
+ data: deepSignal({
+ bears: 0
+ }),
+ increasePopulation() {
+ this.data.bears.value++;
+ },
+ removeAllBears() {
+ this.data.bears.value = 0
+ }
+};
+```
+
+### 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-react` and call `DeepSignal.value`
+
+```ts
+import { deepSignal } from "@deepsignal/react";
+import { effect } from "@preact/signals";
+
+type UserStore = {
+ name: {
+ first: string;
+ last: string;
+ };
+ email: string;
+}
+
+const getInitialUserStore = (): UserStore => {
+ const storedUserStore = localStorage.getItem("USER_STORE_KEY");
+ if (storedUserStore) {
+ // you should probably validate this 🤷♂️
+ return JSON.parse(storedUserStore);
+ } else {
+ return {
+ name: {
+ first: "",
+ last: ""
+ },
+ email: ""
+ };
+ }
+}
+
+const userStore = deepSignal(getInitialUserStore());
+
+effect(() => localStorage.setItem("USER_STORE_KEY", JSON.stringify(userStore.value)));
+```
+
+This would also work for any level of the `DeepSignal`.
+
+```ts
+import { deepSignal } from "@deepsignal/react";
+import { effect } from "@preact/signals-react";
+
+type UserNameStore = {
+ first: string;
+ last: string;
+};
+
+const getInitialUserNameStore = (): UserNameStore => {
+ const storedUserStore = localStorage.getItem("USER_NAME_STORE_KEY");
+
+ // you should probably validate this too 🤷♂️
+ return storedUserStore ? JSON.parse(storedUserStore) : { first: "", last: "" },
+}
+
+const userStore = deepSignal({
+ name: getInitialUserNameStore(),
+ email: ""
+});
+
+effect(() => 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.
diff --git a/packages/react/package.json b/packages/react/package.json
new file mode 100644
index 0000000..098dcc7
--- /dev/null
+++ b/packages/react/package.json
@@ -0,0 +1,58 @@
+{
+ "name": "@deepsignal/react",
+ "private": false,
+ "version": "3.0.1",
+ "type": "module",
+ "files": [
+ "dist"
+ ],
+ "main": "./dist/lib.umd.js",
+ "module": "./dist/lib.es.js",
+ "types": "./dist/lib.d.ts",
+ "exports": {
+ ".": {
+ "import": "./dist/lib.es.js",
+ "require": "./dist/lib.umd.js"
+ }
+ },
+ "scripts": {
+ "build": "tsc --emitDeclarationOnly && vite build",
+ "test": "vitest run --coverage"
+ },
+ "dependencies": {
+ "@deepsignal/core": "3.0.1"
+ },
+ "peerDependencies": {
+ "@preact/signals-react": "1.x.x"
+ },
+ "devDependencies": {
+ "@preact/signals-react": "^1.1.1",
+ "@testing-library/react": "13.4.0",
+ "@types/node": "^18.7.16",
+ "@types/react": "18.0.21",
+ "@vitejs/plugin-react": "^2.1.0",
+ "@vitest/coverage-c8": "^0.23.1",
+ "jsdom": "^20.0.0",
+ "react": "^18.2.0",
+ "typescript": "^4.6.4",
+ "v8": "^0.1.0",
+ "vite": "^3.1.0",
+ "vite-plugin-dts": "^1.4.1",
+ "vitest": "^0.23.1"
+ },
+ "homepage": "https://github.com/EthanStandel/deepsignal#readme",
+ "repository": "https://github.com/EthanStandel/deepsignal",
+ "keywords": [
+ "react",
+ "state",
+ "management",
+ "manager",
+ "cqrs",
+ "redux",
+ "store",
+ "deep",
+ "signal",
+ "signals"
+ ],
+ "license": "MIT"
+}
diff --git a/packages/react/src/react.test.tsx b/packages/react/src/react.test.tsx
new file mode 100644
index 0000000..51f7f5e
--- /dev/null
+++ b/packages/react/src/react.test.tsx
@@ -0,0 +1,132 @@
+import { render, fireEvent } from "@testing-library/react";
+import { it, expect, describe } from "vitest";
+
+import { deepSignal, useDeepSignal } from "./react";
+
+describe("deepSignal", () => {
+ it("rerenders if inner Signal is updated but the DeepSignal is subscribed to", () => {
+ let renderCount = -1;
+ const deepSignalInstance = deepSignal({ inner: { count: 0 } });
+ const Test = () => {
+ renderCount++;
+ return (
+ <>
+
+ Count is {deepSignalInstance.value.inner.count}
+
+
+
+ );
+ };
+ const page = render();
+ const button = page.getByRole("button");
+ fireEvent.click(button);
+ fireEvent.click(button);
+ fireEvent.click(button);
+ expect(renderCount).toBe(3);
+ expect(page.getByTestId("count").innerHTML).toBe("Count is 3");
+ page.unmount();
+ });
+
+ it("rerenders if DeepSignal is updated but the inner Signal is subscribed to", () => {
+ let renderCount = -1;
+ const deepSignalInstance = deepSignal({ inner: { count: 0 } });
+ const Test = () => {
+ renderCount++;
+ return (
+ <>
+
+ Count is {deepSignalInstance.inner.count.value}
+
+
+
+ );
+ };
+ const page = render();
+ const button = page.getByRole("button");
+ fireEvent.click(button);
+ fireEvent.click(button);
+ fireEvent.click(button);
+ expect(renderCount).toBe(3);
+ expect(page.getByTestId("count").innerHTML).toBe("Count is 3");
+ page.unmount();
+ });
+
+ it("can be used in a local-only context", () => {
+ let renderCount = -1;
+ const Test = () => {
+ const deepSignalInstance = useDeepSignal({ inner: { count: 0 } });
+ renderCount++;
+ return (
+ <>
+
+ Count is {deepSignalInstance.value.inner.count}
+
+
+
+ );
+ };
+ const page = render();
+ const button = page.getByRole("button");
+ fireEvent.click(button);
+ fireEvent.click(button);
+ fireEvent.click(button);
+ expect(renderCount).toBe(3);
+ expect(page.getByTestId("count").innerHTML).toBe("Count is 3");
+ page.unmount();
+ });
+
+ it("can be used in a local-only context using functional setter", () => {
+ let renderCount = -1;
+ const Test = () => {
+ const deepSignalInstance = useDeepSignal(() => ({ inner: { count: 0 } }));
+ renderCount++;
+ return (
+ <>
+
+ Count is {deepSignalInstance.inner.count.value}
+
+
+
+ );
+ };
+ const page = render();
+ const button = page.getByRole("button");
+ fireEvent.click(button);
+ fireEvent.click(button);
+ fireEvent.click(button);
+ expect(renderCount).toBe(3);
+ expect(page.getByTestId("count").innerHTML).toBe("Count is 3");
+ page.unmount();
+ });
+
+ it("doesn't allow you to set a property with keys named peek or value", () => {
+ expect(() => deepSignal({ value: "hello" })).toThrowError(
+ /reserved property name/
+ );
+
+ expect(() => deepSignal({ peek: "hello" })).toThrowError(
+ /reserved property name/
+ );
+ });
+});
diff --git a/packages/react/src/react.ts b/packages/react/src/react.ts
new file mode 100644
index 0000000..243861d
--- /dev/null
+++ b/packages/react/src/react.ts
@@ -0,0 +1,12 @@
+import { useMemo } from "react";
+
+import { deepSignal, DeepState } from "@deepsignal/core";
+import "@preact/signals-react";
+
+const useDeepSignal = (initial: T | (() => T)) =>
+ useMemo(
+ () => deepSignal(typeof initial === "function" ? initial() : initial),
+ []
+ );
+
+export { useDeepSignal, deepSignal };
diff --git a/packages/react/tsconfig.json b/packages/react/tsconfig.json
new file mode 100644
index 0000000..9dc14bc
--- /dev/null
+++ b/packages/react/tsconfig.json
@@ -0,0 +1,22 @@
+{
+ "compilerOptions": {
+ "target": "ESNext",
+ "useDefineForClassFields": true,
+ "lib": ["DOM", "DOM.Iterable", "ESNext"],
+ "allowJs": false,
+ "skipLibCheck": true,
+ "esModuleInterop": false,
+ "allowSyntheticDefaultImports": true,
+ "strict": true,
+ "forceConsistentCasingInFileNames": true,
+ "module": "ESNext",
+ "moduleResolution": "Node",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "react-jsx",
+ "declaration": true,
+ "outDir": "dist"
+ },
+ "include": ["src"],
+ "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/packages/react/tsconfig.node.json b/packages/react/tsconfig.node.json
new file mode 100644
index 0000000..9d31e2a
--- /dev/null
+++ b/packages/react/tsconfig.node.json
@@ -0,0 +1,9 @@
+{
+ "compilerOptions": {
+ "composite": true,
+ "module": "ESNext",
+ "moduleResolution": "Node",
+ "allowSyntheticDefaultImports": true
+ },
+ "include": ["vite.config.ts"]
+}
diff --git a/packages/react/vite.config.ts b/packages/react/vite.config.ts
new file mode 100644
index 0000000..72fe870
--- /dev/null
+++ b/packages/react/vite.config.ts
@@ -0,0 +1,31 @@
+import path from "path";
+
+import react from "@vitejs/plugin-react";
+import dts from "vite-plugin-dts";
+import { defineConfig } from "vitest/config";
+
+const coverage = 100;
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ test: {
+ environment: "jsdom",
+ coverage: {
+ statements: coverage,
+ functions: coverage,
+ branches: coverage,
+ lines: coverage,
+ },
+ },
+ plugins: [react(), dts({ insertTypesEntry: true })],
+ build: {
+ lib: {
+ entry: path.resolve(__dirname, "src/react.ts"),
+ name: "deepsignalreact",
+ fileName: format => `lib.${format}.js`,
+ },
+ rollupOptions: {
+ external: ["@preact/signals-react", "react", "@deepsignal/core"],
+ },
+ },
+});
diff --git a/src/deepSignal.test.tsx b/src/deepSignal.test.tsx
deleted file mode 100644
index 5c490d1..0000000
--- a/src/deepSignal.test.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-import { h } from "preact";
-import { describe, it, expect } from "vitest";
-import { deepSignal, useDeepSignal } from "./deepSignal";
-import { effect, Signal } from "@preact/signals";
-import { render, fireEvent } from "@testing-library/preact";
-
-describe("deepSignal", () => {
-
- it("turns string properties into Signals", () => {
- const testStore = deepSignal({
- hello: "world"
- });
- expect(testStore.hello instanceof Signal).toBeTruthy();
- expect(testStore.value.hello).toBe("world");
- });
-
- it("turns deeply nested atomic properties into Signals with peek and value", () => {
- const testStore = deepSignal({
- hello: {
- world: {
- foo: "bar" as number | string | Array
- }
- }
- });
- expect(testStore.hello.world.foo instanceof Signal).toBeTruthy();
- expect(testStore.value.hello.world.foo).toBe("bar");
- expect(testStore.hello.value.world.foo).toBe("bar");
- expect(testStore.hello.world.value.foo).toBe("bar");
- expect(testStore.hello.world.foo.value).toBe("bar");
- testStore.value = { hello: { world: { foo: 123 }} };
- expect(testStore.peek().hello.world.foo).toBe(123);
- expect(testStore.hello.peek().world.foo).toBe(123);
- expect(testStore.hello.world.peek().foo).toBe(123);
- expect(testStore.hello.world.foo.peek()).toBe(123);
- });
-
- it("turns deeply nested arrays into Signals with peek and value", () => {
- const testStore = deepSignal({
- hello: {
- world: {
- foo: [1, 2, 3]
- }
- }
- });
- expect(testStore.hello.world.foo instanceof Signal).toBeTruthy();
- expect(testStore.value.hello.world.foo[0]).toBe(1);
- expect(testStore.hello.value.world.foo[0]).toBe(1);
- expect(testStore.hello.world.value.foo[0]).toBe(1);
- expect(testStore.hello.world.foo.value[0]).toBe(1);
- testStore.value = { hello: { world: { foo: [3, 2, 1] }} };
- expect(testStore.peek().hello.world.foo[0]).toBe(3);
- expect(testStore.hello.peek().world.foo[0]).toBe(3);
- expect(testStore.hello.world.peek().foo[0]).toBe(3);
- expect(testStore.hello.world.foo.peek()[0]).toBe(3);
- });
-
- it("rerenders if inner Signal is updated but the DeepSignal is subscribed to", () => {
- let renderCount = -1;
- const deepSignalInstance = deepSignal({ inner: { count: 0 } });
- const Test = () => {
- renderCount++;
- return (
- <>
- Count is {deepSignalInstance.value.inner.count}
-
-
- )
- }
- const page = render();
- const button = page.getByRole("button");
- fireEvent.click(button);
- fireEvent.click(button);
- fireEvent.click(button);
- expect(renderCount).toBe(3);
- expect(page.getByTestId("count").innerHTML).toBe("Count is 3");
- page.unmount();
- });
-
- it("rerenders if DeepSignal is updated but the inner Signal is subscribed to", () => {
- let renderCount = -1;
- const deepSignalInstance = deepSignal({ inner: { count: 0 } });
- const Test = () => {
- renderCount++;
- return (
- <>
- Count is {deepSignalInstance.inner.count.value}
-
-
- )
- }
- const page = render();
- const button = page.getByRole("button");
- fireEvent.click(button);
- fireEvent.click(button);
- fireEvent.click(button);
- expect(renderCount).toBe(3);
- expect(page.getByTestId("count").innerHTML).toBe("Count is 3");
- page.unmount();
- });
-
- it("can be used in a local-only context", () => {
- let renderCount = -1;
- const Test = () => {
- const deepSignalInstance = useDeepSignal({ inner: { count: 0 } });
- renderCount++;
- return (
- <>
- Count is {deepSignalInstance.value.inner.count}
-
-
- )
- }
- const page = render();
- const button = page.getByRole("button");
- fireEvent.click(button);
- fireEvent.click(button);
- fireEvent.click(button);
- expect(renderCount).toBe(3);
- expect(page.getByTestId("count").innerHTML).toBe("Count is 3");
- page.unmount();
- });
-
- it("can be used in a local-only context using functional setter", () => {
- let renderCount = -1;
- const Test = () => {
- const deepSignalInstance = useDeepSignal(() => ({ inner: { count: 0 } }));
- renderCount++;
- return (
- <>
- Count is {deepSignalInstance.inner.count.value}
-
-
- )
- }
- const page = render();
- const button = page.getByRole("button");
- fireEvent.click(button);
- fireEvent.click(button);
- fireEvent.click(button);
- expect(renderCount).toBe(3);
- expect(page.getByTestId("count").innerHTML).toBe("Count is 3");
- page.unmount();
- });
-
- it("doesn't allow you to set a property with keys named peek or value", () => {
- expect(() => deepSignal({ value: "hello" })).toThrowError(/reserved property name/);
- expect(() => deepSignal({ peek: "hello" })).toThrowError(/reserved property name/);
- });
-
-});
\ No newline at end of file
diff --git a/src/deepSignal.ts b/src/deepSignal.ts
deleted file mode 100644
index 83b9a88..0000000
--- a/src/deepSignal.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import { signal, Signal, batch } from "@preact/signals";
-import { useMemo } from "preact/hooks";
-
-type Signalable = Array | ((...args: any[]) => any) | string | boolean | number | bigint | symbol | undefined | null;
-
-type Storeable = {
- [key: string]: (() => any) | Signalable | Storeable
-};
-
-type ReadOnlyDeep = {
- readonly [P in keyof T]: ReadOnlyDeep;
-}
-
-export interface IDeepSignal { value: ReadOnlyDeep, peek: () => ReadOnlyDeep };
-
-export type DeepSignal = IDeepSignal & {
- [K in keyof T]:
- T[K] extends Signalable ? Signal :
- T[K] extends Storeable ? DeepSignal :
- Signal;
-};
-
-class DeepSignalImpl implements IDeepSignal {
- get value(): ReadOnlyDeep {
- return getValue(this as any as DeepSignal);
- }
-
- set value(payload: ReadOnlyDeep) {
- batch(() => setValue(this as any as DeepSignal, payload));
- }
-
- peek(): ReadOnlyDeep {
- return getValue(this as any as DeepSignal, { peek: true });
- }
-}
-
-export const deepSignal = (initialValue: T): DeepSignal =>
- Object.assign(
- new DeepSignalImpl(),
- Object.entries(initialValue).reduce(
- (acc, [key, value]) => {
- if (["value", "peek"].some(iKey => iKey === key)) {
- throw new Error(`${key} is a reserved property name`);
- } else if (typeof value !== "object" || value === null || Array.isArray(value)) {
- acc[key] = signal(value);
- } else {
- acc[key] = deepSignal(value);
- }
- return acc;
- }, {} as { [key: string]: unknown })
- ) as DeepSignal;
-
-const setValue = > (
- deepSignal: T,
- payload: U
-): void =>
- Object.keys(payload).forEach((key: keyof U) =>
- deepSignal[key].value = payload[key]
- );
-
-const getValue = > (
- deepSignal: T,
- { peek = false }: { peek?: boolean } = {}
-): ReadOnlyDeep =>
- Object.entries(deepSignal).reduce((
- acc,
- [key, value]
- ) => {
- if (value instanceof Signal) {
- acc[key] = peek ? value.peek() : value.value;
- } else if (value instanceof DeepSignalImpl) {
- acc[key] = getValue(value, { peek });
- }
- return acc;
- }, {} as { [key: string]: unknown }) as ReadOnlyDeep;
-
-export const useDeepSignal = (initial: T | (() => T)) =>
- useMemo(() => deepSignal(typeof initial === "function" ? initial() : initial), []);