@t8/react-store 1.2.8 → 1.2.10

package/README.md

@@ -2,9 +2,7 @@
 
 React app state management condensed to the essentials
 
-[![npm](https://img.shields.io/npm/v/@t8/react-store?labelColor=345&color=46e)](https://www.npmjs.com/package/@t8/react-store) ![Lightweight](https://img.shields.io/bundlephobia/minzip/@t8/react-store?label=minzip&labelColor=345&color=46e)
-
-**Features:** Quickest migration from local state · Familiar useState pattern · CSR/SSR without workarounds · Integrable with Immer · Quickly pluggable persistence across page reloads
+**Features:** Quickest migration from local state · Single pattern for shared and local state · CSR/SSR without workarounds · Integrable with Immer · Quickly pluggable persistence across page reloads
 
 <!-- docsgen-show-start --
 ```diff
@@ -23,8 +21,6 @@ React app state management condensed to the essentials
 ```
 -- docsgen-show-end -->
 
-Installation: `npm i @t8/react-store`
-
 ## Shared state setup
 
 Moving local state to the full-fledged shared state:
@@ -177,14 +173,14 @@ A standalone store initialized outside a component can be used by the component
 
 ## Persistence across page reloads
 
-Replacing `new Store(data)` with `new PersistentStore(data, storageKey)` as shown below gets the store's value initially restored from and saved whenever updated to `storageKey` in `localStorage`. (Pass `{ session: true }` as the `options` parameter of `new PersistentStore(data, storageKey, options?)` to use `sessionStorage` instead of `localStorage`.) Otherwise, persistent stores work pretty much like regular stores described above.
+Replacing `new Store(data)` with `new PersistentStore(data, { key })` as shown below gets the store's value initially restored from and saved whenever updated to the specified `key` in `localStorage`. (Pass `session: true` to the second parameter of the constructor to use `sessionStorage` instead of `localStorage`.) Otherwise, persistent stores work pretty much like regular stores described above.
 
 ```js
-import { PersistentStore } from "@t8/react-store";
+import { PersistentStore } from "@t8/persistent-store";
 
-let counterStore = new PersistentStore(0, "counter");
+let counterStore = new PersistentStore(0, { key: "counter" });
 ```
 
-⬥ The way data gets saved to and restored from a browser storage entry (including filtering out certain data or otherwise rearranging the saved data) can be redefined by setting `options.serialize` and `options.deserialize` in `new PersistentStore(data, storageKey, options?)`. By default, these options act like `JSON.stringify()` and `JSON.parse()` respectively.
+⬥ The way data gets saved to and restored from a browser storage entry (including filtering out certain data or otherwise rearranging the saved data) can be redefined by setting `options.serialize` and `options.deserialize` in `new PersistentStore(data, options)`. By default, these options act like `JSON.stringify()` and `JSON.parse()` respectively.
 
 ⬥ `PersistentStore` skips interaction with the browser storage in non-browser environments, which makes it equally usable with SSR.

package/dist/index.cjs

@@ -1,4 +1,4 @@
-let __t8_store = require("@t8/store");
+let _t8_store = require("@t8/store");
 let react = require("react");
 
 /**
@@ -29,16 +29,16 @@ let react = require("react");
 * when this function returns `true`.
 */
 function useStore(store, shouldUpdate = true) {
-  if (!(0, __t8_store.isStore)(store)) throw new Error("'store' is not an instance of Store");
+  if (!(0, _t8_store.isStore)(store)) throw new Error("'store' is not an instance of Store");
   let [, setRevision] = (0, react.useState)(-1);
   let value = store.getValue();
   let setValue = (0, react.useMemo)(() => store.setValue.bind(store), [store]);
   let initialStoreRevision = (0, react.useRef)(store.revision);
   (0, react.useEffect)(() => {
-    if ((0, __t8_store.isPersistentStore)(store)) store.syncOnce();
+    store.emit("effect");
     if (!shouldUpdate) return;
-    let unsubscribe = store.onUpdate((nextValue, prevValue) => {
-      if (typeof shouldUpdate !== "function" || shouldUpdate(nextValue, prevValue)) setRevision(Math.random());
+    let unsubscribe = store.on("update", ({ current, previous }) => {
+      if (typeof shouldUpdate !== "function" || shouldUpdate(current, previous)) setRevision(Math.random());
     });
     if (store.revision !== initialStoreRevision.current) setRevision(Math.random());
     return () => {
@@ -50,9 +50,9 @@ function useStore(store, shouldUpdate = true) {
 }
 
 exports.useStore = useStore;
-Object.keys(__t8_store).forEach(function (k) {
+Object.keys(_t8_store).forEach(function (k) {
   if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
     enumerable: true,
-    get: function () { return __t8_store[k]; }
+    get: function () { return _t8_store[k]; }
   });
 });

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { isPersistentStore, isStore } from "@t8/store";
+import { isStore } from "@t8/store";
 import { useEffect, useMemo, useRef, useState } from "react";
 
 export * from "@t8/store"
@@ -37,10 +37,10 @@ function useStore(store, shouldUpdate = true) {
   let setValue = useMemo(() => store.setValue.bind(store), [store]);
   let initialStoreRevision = useRef(store.revision);
   useEffect(() => {
-    if (isPersistentStore(store)) store.syncOnce();
+    store.emit("effect");
     if (!shouldUpdate) return;
-    let unsubscribe = store.onUpdate((nextValue, prevValue) => {
-      if (typeof shouldUpdate !== "function" || shouldUpdate(nextValue, prevValue)) setRevision(Math.random());
+    let unsubscribe = store.on("update", ({ current, previous }) => {
+      if (typeof shouldUpdate !== "function" || shouldUpdate(current, previous)) setRevision(Math.random());
     });
     if (store.revision !== initialStoreRevision.current) setRevision(Math.random());
     return () => {

package/package.json

@@ -1,45 +1,45 @@
-{
-  "name": "@t8/react-store",
-  "version": "1.2.8",
-  "description": "React app state management condensed to the essentials",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
-  "type": "module",
-  "scripts": {
-    "demo": "npx @t8/serve tests/counter --spa -b src/index.tsx",
-    "demo-t3": "npx @t8/serve tests/tic-tac-toe --spa -b src/index.tsx",
-    "preversion": "npx npm-run-all shape test",
-    "shape": "npx codeshape",
-    "test": "npx playwright test --project=chromium"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/t8js/react-store.git"
-  },
-  "homepage": "https://t8.js.org/react-store",
-  "keywords": [
-    "react",
-    "state management",
-    "shared state",
-    "global state",
-    "store"
-  ],
-  "author": "axtk",
-  "license": "MIT",
-  "peerDependencies": {
-    "react": ">=16.8"
-  },
-  "devDependencies": {
-    "@playwright/test": "^1.56.0",
-    "@t8/serve": "^0.2.0",
-    "@types/node": "^24.5.2",
-    "@types/react": "^19.2.7",
-    "@types/react-dom": "^19.2.3",
-    "immer": "^11.0.1",
-    "react-dom": "^19.2.3"
-  },
-  "dependencies": {
-    "@t8/store": "^1.4.0"
-  }
-}
+{
+  "name": "@t8/react-store",
+  "version": "1.2.10",
+  "description": "React app state management condensed to the essentials",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "scripts": {
+    "demo": "npx @t8/serve tests/counter --spa -b src/index.tsx",
+    "demo-t3": "npx @t8/serve tests/tic-tac-toe --spa -b src/index.tsx",
+    "preversion": "npx npm-run-all shape test",
+    "shape": "npx codeshape",
+    "test": "npx playwright test --project=chromium"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/t8js/react-store.git"
+  },
+  "homepage": "https://t8.js.org/react-store",
+  "keywords": [
+    "react",
+    "state management",
+    "shared state",
+    "global state",
+    "store"
+  ],
+  "author": "axtk",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=16.8"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.56.0",
+    "@t8/serve": "^0.2.0",
+    "@types/node": "^24.5.2",
+    "@types/react": "^19.2.9",
+    "@types/react-dom": "^19.2.3",
+    "immer": "^11.1.3",
+    "react-dom": "^19.2.3"
+  },
+  "dependencies": {
+    "@t8/store": "^1.5.0"
+  }
+}

package/src/useStore.ts

@@ -1,4 +1,4 @@
-import { isPersistentStore, isStore, type Store } from "@t8/store";
+import { isStore, type Store } from "@t8/store";
 import { useEffect, useMemo, useRef, useState } from "react";
 
 export type SetStoreValue<T> = Store<T>["setValue"];
@@ -46,15 +46,13 @@ export function useStore<T>(
   let initialStoreRevision = useRef(store.revision);
 
   useEffect(() => {
-    if (isPersistentStore<T>(store)) store.syncOnce();
+    // Allow stores to hook into the effect
+    store.emit("effect");
 
     if (!shouldUpdate) return;
 
-    let unsubscribe = store.onUpdate((nextValue, prevValue) => {
-      if (
-        typeof shouldUpdate !== "function" ||
-        shouldUpdate(nextValue, prevValue)
-      )
+    let unsubscribe = store.on("update", ({ current, previous }) => {
+      if (typeof shouldUpdate !== "function" || shouldUpdate(current, previous))
         setRevision(Math.random());
     });