zeno-state 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Rob Watson
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,74 @@
+# Simple state
+
+A (hopefully) simple global state management system.
+
+## Demo (this repository)
+
+1. Download the code (`git checkout`, or some other way of downloading)
+2. Run `pnpm install`
+3. Run `pnpm run dev`
+4. Open your browser at the location given by pnpm (usually http://localhost:5173)
+5. Open your browser dev tools and enable the React dev tools feature of "Highlight updates when components render."
+6. Have a play and watch how the different start management types handle their rendering
+
+## Installation
+
+```bash
+npm install zeno-state
+```
+
+## Library usage
+
+
+### Step 1: Define a store
+
+I recommend setting a default value that contains all your keys alongside specifying the shape of the data to help
+reduce null value exceptions and to help define the shape of objects contained within empty arrays
+
+
+```tsx
+import { createStore } from 'zeno-state'
+
+const carStore = createStore<{
+  cars: [{
+      make: 'Ford'|'Jaguar',
+      model: string,
+      engineSize: number,
+      colour: string
+  }]
+}>({ cars: [] })
+```
+
+
+### Step 2: Use it
+
+The second argument of `useStore` is a _selector function_.  This allows a portion of the whole state to be used by your
+component and enables re-rendering only when that selection changes.
+
+```tsx
+import { useStore } from 'zeno-state'
+
+function CarList() {
+  const cars = useStore(carStore, state => state.cars)
+
+  return cars.map((car, index) => (
+    <p>{ car.make } - { car.model }</p>
+  ))
+}
+```
+
+
+### Step 3: Update state inside a store
+
+`createStore` returns `get` and `set` methods to update the state, you can use these directly and any components that
+have selected part of the state you update will be re-rendered.  The `set` function accepts an object which is merged
+with the current state object, allowing additions and partial updates to the state.
+
+> Note: this only allows for updating and adding keys to the stored state, not deleting any root-level keys not directly
+> updating deep-nested properties.
+
+```tsx
+function addCar() {
+  carStore.set({ cars: [...cars, { make: 'Ford', model: 'Focus', engineSize: 1.6, colour: 'silver'}]})
+}
+```

package/dist/createStore.d.ts

@@ -0,0 +1,3 @@
+import { Store } from "./simpleState";
+export declare function createStore<State>(state: State): Store<State>;
+//# sourceMappingURL=createStore.d.ts.map

package/dist/createStore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createStore.d.ts","sourceRoot":"","sources":["../src/lib/simple-state/createStore.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,EAA6B,MAAM,eAAe,CAAC;AAEhE,wBAAgB,WAAW,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,CA2B7D"}

package/dist/createStore.js

@@ -0,0 +1,22 @@
+export function createStore(state) {
+    const subscribers = new Set();
+    function subscribe(callback) {
+        subscribers.add(callback);
+        return () => subscribers.delete(callback);
+    }
+    function getSnapshot() {
+        return state;
+    }
+    function alertSubscribers() {
+        subscribers.forEach(subscriber => subscriber(state));
+    }
+    function updateState(slice) {
+        state = { ...state, ...slice };
+        alertSubscribers();
+    }
+    return {
+        subscribe,
+        get: getSnapshot,
+        set: updateState,
+    };
+}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { createStore } from './createStore';
+export { useStore } from './useStore';
+export type { Store, SubscribeFn, UnsubscribeFn } from './simpleState';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/simple-state/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,YAAY,EAAE,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export { createStore } from './createStore';
+export { useStore } from './useStore';

package/dist/simpleState.d.ts

@@ -0,0 +1,12 @@
+export type SubscribeFn<State> = (state: State) => void;
+export type UnsubscribeFn = () => void;
+type SubscriberFn<State> = (callback: SubscribeFn<State>) => UnsubscribeFn;
+type GetSnapshotFn<State> = () => State;
+type UpdateStateFn<State> = (state: Partial<State>) => void;
+export type Store<State> = {
+    subscribe: SubscriberFn<State>;
+    get: GetSnapshotFn<State>;
+    set: UpdateStateFn<State>;
+};
+export {};
+//# sourceMappingURL=simpleState.d.ts.map

package/dist/simpleState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"simpleState.d.ts","sourceRoot":"","sources":["../src/lib/simple-state/simpleState.ts"],"names":[],"mappings":"AACA,MAAM,MAAM,WAAW,CAAC,KAAK,IAAI,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;AACvD,MAAM,MAAM,aAAa,GAAG,MAAM,IAAI,CAAA;AAEtC,KAAK,YAAY,CAAC,KAAK,IAAI,CAAC,QAAQ,EAAE,WAAW,CAAC,KAAK,CAAC,KAAK,aAAa,CAAA;AAC1E,KAAK,aAAa,CAAC,KAAK,IAAI,MAAM,KAAK,CAAA;AACvC,KAAK,aAAa,CAAC,KAAK,IAAI,CAAC,KAAK,EAAE,OAAO,CAAC,KAAK,CAAC,KAAK,IAAI,CAAA;AAE3D,MAAM,MAAM,KAAK,CAAC,KAAK,IAAI;IACzB,SAAS,EAAE,YAAY,CAAC,KAAK,CAAC,CAAA;IAC9B,GAAG,EAAE,aAAa,CAAC,KAAK,CAAC,CAAA;IACzB,GAAG,EAAE,aAAa,CAAC,KAAK,CAAC,CAAA;CAC1B,CAAA"}

package/dist/simpleState.js

@@ -0,0 +1 @@
+export {};

package/dist/useStore.d.ts

@@ -0,0 +1,3 @@
+import { Store } from "./simpleState";
+export declare function useStore<State, Slice>(store: Store<State>, selector: (state: State) => Slice): Slice;
+//# sourceMappingURL=useStore.d.ts.map

package/dist/useStore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStore.d.ts","sourceRoot":"","sources":["../src/lib/simple-state/useStore.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,KAAK,EAAC,MAAM,eAAe,CAAC;AAEpC,wBAAgB,QAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,KAAK,SAI5F"}

package/dist/useStore.js

@@ -0,0 +1,4 @@
+import { useSyncExternalStore } from "react";
+export function useStore(store, selector) {
+    return useSyncExternalStore(store.subscribe, () => (selector(store.get())));
+}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "zeno-state",
+  "private": false,
+  "version": "1.0.0",
+  "type": "module",
+  "description": "A simple global state management library for React",
+  "keywords": ["react", "state", "state-management", "hooks", "global-state"],
+  "author": "Rob Watson",
+  "license": "MIT",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": ["dist", "README.md", "LICENSE"],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "build:lib": "vite build --mode lib && tsc --project tsconfig.lib.json",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "prepublishOnly": "npm run build:lib"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.19.0",
+    "@tailwindcss/vite": "^4.0.6",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.19.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.18",
+    "globals": "^15.14.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.0.6",
+    "typescript": "~5.7.2",
+    "typescript-eslint": "^8.22.0",
+    "vite": "^6.1.0"
+  }
+}