@t8/react-store 1.2.1 → 1.2.3

package/README.md

@@ -68,6 +68,8 @@ Moving the local state to the full-fledged shared state:
 
 🔹 The optional `false` parameter in `useStore(store, false)` (as in `<ResetButton>` above) tells the hook not to subscribe the component to tracking the store state updates. The common use case is when a component makes use of the store state setter without using the store state value.
 
+🔹 With SSR, it's common practice to put shared values into React Context rather than module-level variables to avoid cross-request data sharing. The same applies to stores, see an example in the [Sharing state via Context](#sharing-state-via-context) section below.
+
 🔹 Similarly to instances of the built-in data container classes, such as `Set` and `Map`, stores are created as `new Store(data)` rather than with a factory function.
 
 ## Single store or multiple stores
@@ -103,7 +105,7 @@ let ItemCard = ({ id }) => {
 
 While `useStore(itemStore)` in this component would trigger a re-render in response to any changes in the `itemStore` (which can be fine with a small store), with `useStore(itemStore, shouldUpdate)` the `ItemCard` component has a more targeted subscription to the store: in this example, a re-render will only be triggered if the `revision` property of the item with the given `id` has changed.
 
-## Providing shared state
+## Sharing state via Context
 
 Shared state can be provided to the app by means of a regular React Context provider:
 
@@ -177,12 +179,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 state 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.
+
 ```js
 import { PersistentStore } from "@t8/react-store";
 
 let counterStore = new PersistentStore(0, "counter");
 ```
 
-The store's state value is initially restored from and saved whenever updated to the `"counter"` key of `localStorage`. (Pass `{ session: true }` as the `options` parameter of `new PersistentStore(data, storageKey, options?)` to use `sessionStorage` instead of `localStorage`.) Otherwise, `counterStore` works pretty much like a regular store described above.
+🔹 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 overridden by setting `options.serialize` and `options.deserialize` in `new PersistentStore(data, storageKey, options?)`. By default, they are `JSON.stringify()` and `JSON.parse()`.
+🔹 `PersistentStore` skips interaction with the browser storage in non-browser environments, which makes it equally usable with SSR.

package/dist/index.js

@@ -121,7 +121,8 @@ var PersistentStore = class extends Store {
 // src/useStore.ts
 import { useEffect, useMemo, useRef, useState } from "react";
 function useStore(store, shouldUpdate = true) {
-  if (!isStore(store)) throw new Error("'store' is not an instance of Store");
+  if (!isStore(store))
+    throw new Error("'store' is not an instance of Store");
   let [, setRevision] = useState(-1);
   let state = store.getState();
   let setState = useMemo(() => store.setState.bind(store), [store]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@t8/react-store",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "description": "Small React app state management lib aligned with React's state pattern, condensed to the essentials",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/useStore.ts

@@ -36,7 +36,8 @@ export function useStore<T>(
   store: Store<T>,
   shouldUpdate: ShouldUpdate<T> = true,
 ): [T, SetStoreState<T>] {
-  if (!isStore(store)) throw new Error("'store' is not an instance of Store");
+  if (!isStore<T>(store))
+    throw new Error("'store' is not an instance of Store");
 
   let [, setRevision] = useState(-1);