react-stateshape 0.2.0 → 0.2.2

package/README.md

@@ -1,6 +1,6 @@
 # react-stateshape
 
-Shared state management and routing in React apps. Under the hood, routing is shared state management, too, with the shared data being the URL.
+A shared state management and routing lib for React apps. Under the hood, routing is shared state management, too, with the shared data being the URL.
 
 Contents: [useExternalState](#useexternalstate) · [useRoute](#useroute) · [useNavigationStart / useNavigationComplete](#usenavigationstart--usenavigationcomplete) · [useRouteState](#useroutestate) · [Type-safe routes](#type-safe-routes) · [useTransientState](#usetransientstate) · [Annotated examples](#annotated-examples) · [Internals](#internals)
 
@@ -66,16 +66,19 @@ let App = () => (
 
 ### Filtering state updates
 
-⬥ Use the optional `false` parameter in `useExternalState(state, false)`, as in `<ResetButton>` above, to tell the hook not to subscribe the component to tracking the external state updates. The common use case for it is when a component makes use of the external state value setter without using the state value itself.
+⬥ Use the optional `false` parameter in `useExternalState(state, false)`, as in `ResetButton` above, to tell the hook not to subscribe the component to tracking the external state updates. The common use case for it is when a component makes use of the external state value setter without using the state value itself.
 
 ⬥ Apart from setting the optional second parameter of `useExternalState(state, callback)` to a boolean value, use it as a render callback for more fine-grained control over component's re-renders in response to state changes:
 
 ```js
+let itemState = new State({/* A map of `<id>: <item>` */});
+
+// Renders a specific item from `itemState`
 let ItemCard = ({ id }) => {
   let [items, setItems] = useExternalState(itemState, (render, { current, previous }) => {
-    // Assuming that the items have a `revision` property, re-render
-    // `ItemCard` only if the relevant item's `revision` has changed.
-    if (current[id].revision !== previous[id].revision) render();
+    // Assuming that the items have a `timestamp` property, re-render
+    // `ItemCard` only if the relevant item's `timestamp` has increased
+    if (current[id].timestamp > previous[id].timestamp) render();
   });
 
   // ...
@@ -130,7 +133,7 @@ let App = () => {
 
 ⬥ `params` in dynamic values (as in `({ params }) => <Section id={params.id}/>` above) contains the URL pattern's capturing groups.
 
-⬥ By default, `useRoute` and the other routing hooks described here make use of the browser's URL, if it's available. Otherwise, use `<RouteProvider href="/x">` to set a specific URL value. Common use cases: SSR and tests. A less common use case: custom routing behavior, including custom non-URL-based routing ([example](https://codesandbox.io/p/sandbox/tykt44?file=%252Fsrc%252FApp.tsx)).
+⬥ By default, `useRoute` and the other routing hooks described here make use of the browser's URL, if it's available. Otherwise, use `<RouteProvider href={url}>` to set a specific URL value. Common use cases: SSR and tests. A less common use case: custom routing behavior, including custom non-URL-based routing ([example](https://codesandbox.io/p/sandbox/tykt44?file=%252Fsrc%252FApp.tsx)).
 
 ⬥ See also the [Type-safe routes](#type-safe-routes) section.
 

package/dist/index.cjs

@@ -1,3 +1,4 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 let stateshape = require("stateshape");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -312,9 +313,11 @@ exports.useRouteLinks = useRouteLinks;
 exports.useRouteState = useRouteState;
 exports.useTransientState = useTransientState;
 exports.useURL = useURL;
-Object.keys(stateshape).forEach(function (k) {
-  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+Object.keys(stateshape).forEach(function(k) {
+  if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
     enumerable: true,
-    get: function () { return stateshape[k]; }
+    get: function() {
+      return stateshape[k];
+    }
   });
 });

package/dist/index.d.ts

@@ -1,6 +1,6 @@
-import * as stateshape0 from "stateshape";
+import * as stateshape from "stateshape";
 import { ContainerElement, EventCallback, LocationValue, MatchState, NavigationOptions, Route, State, StatePayloadMap, URLData, URLState } from "stateshape";
-import * as react0 from "react";
+import * as react from "react";
 import { AnchorHTMLAttributes, AreaHTMLAttributes, MouseEvent, ReactNode, RefObject } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 export * from "stateshape";
@@ -32,7 +32,7 @@ declare const Area: ({
   ...props
 }: AreaProps) => react_jsx_runtime0.JSX.Element;
 
-declare const RouteContext: react0.Context<Route>;
+declare const RouteContext: react.Context<Route>;
 
 type RouteProviderProps = {
   href?: string | Route | undefined;
@@ -53,7 +53,7 @@ type TransientState = {
   time?: number | undefined;
 };
 
-declare const TransientStateContext: react0.Context<Map<string, State<TransientState, stateshape0.StatePayloadMap<TransientState>>>>;
+declare const TransientStateContext: react.Context<Map<string, State<TransientState, stateshape.StatePayloadMap<TransientState>>>>;
 
 type TransientStateProviderProps = {
   value?: Record<string, TransientState> | Map<string, State<TransientState>> | null | undefined;
@@ -66,7 +66,7 @@ declare const TransientStateProvider: ({
 
 type RenderCallback<T> = (render: () => void, payload: T) => boolean | undefined | void;
 
-declare const URLContext: react0.Context<URLState>;
+declare const URLContext: react.Context<URLState>;
 
 type URLProviderProps = {
   href?: string | URLState | undefined;
@@ -94,10 +94,10 @@ declare function useNavigationComplete(callback: EventCallback<NavigationOptions
 declare function useNavigationStart(callback: EventCallback<NavigationOptions>): void;
 
 declare function useRoute(callback?: RenderCallback<NavigationOptions>): {
-  route: stateshape0.Route;
+  route: stateshape.Route;
   at: {
-    <P extends stateshape0.LocationPattern, X>(urlPattern: P, matchOutput: X | stateshape0.MatchHandler<P, X>): X | undefined;
-    <P extends stateshape0.LocationPattern, X, Y>(urlPattern: P, matchOutput: X | stateshape0.MatchHandler<P, X>, mismatchOutput: Y | stateshape0.MatchHandler<P, Y>): X | Y;
+    <P extends stateshape.LocationPattern, X>(urlPattern: P, matchOutput: X | stateshape.MatchHandler<P, X>): X | undefined;
+    <P extends stateshape.LocationPattern, X, Y>(urlPattern: P, matchOutput: X | stateshape.MatchHandler<P, X>, mismatchOutput: Y | stateshape.MatchHandler<P, Y>): X | Y;
   };
 };
 
@@ -159,6 +159,6 @@ type ControllableTransientState = TransientState & {
 declare function useTransientState<F extends (...args: unknown[]) => unknown>(state: string | State<TransientState> | null, action: F): [ControllableTransientState, (...args: [...Parameters<F>, TransientStateOptions?]) => ReturnType<F>];
 declare function useTransientState(state: string | State<TransientState> | null): [ControllableTransientState];
 
-declare function useURL(callback?: RenderCallback<NavigationOptions>): [string, (update: string | stateshape0.StateUpdate<string>) => void];
+declare function useURL(callback?: RenderCallback<NavigationOptions>): [string, (update: string | stateshape.StateUpdate<string>) => void];
 
 export { A, AProps, Area, AreaProps, ControllableTransientState, EnhanceHref, LinkNavigationProps, RenderCallback, RouteContext, RouteProvider, RouteProviderProps, SetExternalStateValue, SetRouteState, TransientState, TransientStateContext, TransientStateOptions, TransientStateProvider, TransientStateProviderProps, URLContext, URLProvider, URLProviderProps, useExternalState, useLinkClick, useNavigationComplete, useNavigationStart, useRoute, useRouteLinks, useRouteState, useTransientState, useURL };

package/dist/index.mjs

@@ -1,8 +1,7 @@
 import { Route, State, URLState, compileURL, getNavigationOptions, isRouteEvent, isState, matchURL } from "stateshape";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-
-export * from "stateshape"
+export * from "stateshape";
 
 const RouteContext = createContext(new Route(null, { autoStart: false }));
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-stateshape",
-  "version": "0.2.0",
-  "description": "Concise shared state management and routing in React apps",
+  "version": "0.2.2",
+  "description": "A shared state management and routing lib for React apps",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -12,7 +12,7 @@
     "shape": "npx codeshape",
     "t3": "npx auxsrv tests/Tic-tac-toe",
     "test": "npx playwright test --project=chromium",
-    "typecheck": "npx codeshape --typecheck-only"
+    "typecheck": "npx codeshape typecheck"
   },
   "repository": {
     "type": "git",
@@ -34,16 +34,16 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.58.2",
-    "@types/node": "^25.3.0",
+    "@types/node": "^25.5.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "auxsrv": "^0.3.1",
+    "auxsrv": "^0.3.2",
     "immer": "^11.1.4",
     "react-dom": "^19.2.4",
-    "url-shape": "^1.3.13",
+    "url-shape": "^1.3.15",
     "zod": "^4.3.6"
   },
   "dependencies": {
-    "stateshape": "^0.2.0"
+    "stateshape": "^0.2.1"
   }
 }

package/tsconfig.json

@@ -4,6 +4,7 @@
     "declaration": true,
     "emitDeclarationOnly": true,
     "lib": ["ESNext", "DOM"],
+    "types": ["node"],
     "target": "esnext",
     "outDir": "dist",
     "module": "nodenext",