@view-models/react 3.0.0 → 4.1.0

package/README.md

@@ -46,80 +46,6 @@ function Counter() {
 }
 ```
 
-### Derived State
-
-Use `useDerivedState` with the `derived` helper to compute values from your model state. The `derived` function creates a memoized mapper that uses reference equality (`Object.is`) to cache results, which works perfectly with immutable state.
-
-Derived mappers should be defined outside your components:
-
-```tsx
-import { ViewModel, derived } from "@view-models/core";
-import { useDerivedState } from "@view-models/react";
-
-type TodoItem = {
-  id: number;
-  text: string;
-  completed: boolean;
-};
-
-type TodoState = Readonly<{
-  items: TodoItem[];
-  filter: "all" | "active" | "completed";
-}>;
-
-class TodoViewModel extends ViewModel<TodoState> {
-  // ... methods to modify state
-}
-
-const todoModel = new TodoViewModel({ items: [], filter: "all" });
-
-// Create derived mappers using the derived helper
-const selectStats = derived(({ items }): TodoState) => ({
-  total: items.length,
-  completed: items.filter((item) => item.completed).length,
-  active: items.filter((item) => !item.completed).length,
-}));
-
-function TodoStats() {
-  // Use the derived mapper with useDerivedState
-  const stats = useDerivedState(todoModel, selectStats);
-
-  return (
-    <div>
-      <p>Total: {stats.total}</p>
-      <p>Completed: {stats.completed}</p>
-      <p>Active: {stats.active}</p>
-    </div>
-  );
-}
-```
-
-You can create multiple derived mappers for different parts of your state:
-
-```tsx
-// Create derived mappers outside your components
-const selectFilteredItems = derived(({ items, filter }: TodoState) =>
-  items.filter((item) => {
-    if (filter === "active") return !item.completed;
-    if (filter === "completed") return item.completed;
-    return true;
-  }),
-);
-
-function TodoList() {
-  // The mapper only re-runs when the state reference changes
-  const filteredItems = useDerivedState(todoModel, selectFilteredItems);
-
-  return (
-    <ul>
-      {filteredItems.map((item) => (
-        <li key={item.id}>{item.text}</li>
-      ))}
-    </ul>
-  );
-}
-```
-
 ### Creating view models inside components
 
 When you need to create a view model from within a React component, use `useMemo` to ensure the model is only created once.

package/dist/index.d.ts

@@ -85,55 +85,6 @@ interface ViewModel<T> {
  * }
  * ```
  */
-declare function useModelState<T>(model: ViewModel<T>): T;
+declare const useModelState: <T>(model: ViewModel<T>) => T;
 
-type Mapper<I, O> = (input: I) => O;
-/**
- * A branded type for derived state mapper functions created by the `derived` utility.
- * This type ensures that mapper functions are properly memoized before being used
- * with hooks like `useDerivedState`.
- */
-type DerivedMapper<I, O> = Mapper<I, O> & {
-    __brand: "derived";
-};
-/**
- * A React hook that subscribes to a ViewModel and returns derived state.
- *
- * This hook combines `useModelState` with a derived mapper function to compute derived values
- * from the model's state. The component will re-render whenever the model state changes.
- *
- * The mapper must be created using the `derived` utility, which provides memoization
- * based on state identity to prevent unnecessary recalculations.
- *
- * @template S - The model state type
- * @template D - The derived state type
- * @param model - The ViewModel instance to subscribe to
- * @param mapper - A derived mapper function created with the `derived` utility
- * @returns The derived state computed from the current model state
- *
- * @example
- * ```tsx
- * import { ViewModel, derived } from "@view-models/core";
- * import { useDerivedState } from "@view-models/react";
- *
- * type TodoState = {
- *   items: Array<{ id: string; text: string; completed: boolean }>;
- * };
- *
- * const todoModel = new ViewModel<TodoState>({ items: [] });
- *
- * // Create a derived mapper function
- * const selectCompletedCount = derived(({ items }: TodoState) => ({
- *   completed: items.filter(item => item.completed).length,
- *   total: items.length
- * }));
- *
- * function TodoStats() {
- *   const stats = useDerivedState(todoModel, selectCompletedCount);
- *   return <div>{stats.completed} of {stats.total} completed</div>;
- * }
- * ```
- */
-declare const useDerivedState: <S, D>(model: ViewModel<S>, mapper: DerivedMapper<S, D>) => D;
-
-export { useDerivedState, useModelState };
+export { useModelState };

package/dist/index.js

@@ -1,2 +1,2 @@
-import{useSyncExternalStore as r}from"react";function t(t){return r(t.subscribe.bind(t),()=>t.state)}const o=(r,o)=>o(t(r));export{o as useDerivedState,t as useModelState};
+import{useSyncExternalStore as o}from"react";const r=r=>o(r.subscribe.bind(r),()=>r.state);export{r as useModelState};
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/useModelState.ts","../src/useDerivedState.ts"],"sourcesContent":["import { useSyncExternalStore } from \"react\";\nimport { ViewModel } from \"./ViewModel\";\n\n/**\n * A React hook that subscribes a component to a ViewModel's state updates.\n *\n * This hook connects a React component to a ViewModel instance, automatically\n * subscribing to state changes and triggering re-renders when the state updates.\n *\n * @template T - The state type, which must extend the State interface\n * @param model - The ViewModel instance to subscribe to\n * @returns The current state from the ViewModel\n *\n * @example\n * ```tsx\n * class CounterViewModel extends ViewModel<{ count: number }> {\n *   increment = () => super.update({ count: super.state.count + 1 });\n * }\n *\n * function Counter() {\n *   const counterModel = useMemo(() => new CounterViewModel({ count: 0 }), []);\n *   const { count } = useModelState(counterModel);\n *\n *   return (\n *     <div>\n *       <p>Count: {count}</p>\n *       <button onClick={counterModel.increment}>+</button>\n *     </div>\n *   );\n * }\n * ```\n */\nexport function useModelState<T>(model: ViewModel<T>): T {\n  return useSyncExternalStore(model.subscribe.bind(model), () => model.state);\n}\n","import { useModelState } from \"./useModelState\";\nimport { ViewModel } from \"./ViewModel\";\n\ntype Mapper<I, O> = (input: I) => O;\n\n/**\n * A branded type for derived state mapper functions created by the `derived` utility.\n * This type ensures that mapper functions are properly memoized before being used\n * with hooks like `useDerivedState`.\n */\ntype DerivedMapper<I, O> = Mapper<I, O> & { __brand: \"derived\" };\n\n/**\n * A React hook that subscribes to a ViewModel and returns derived state.\n *\n * This hook combines `useModelState` with a derived mapper function to compute derived values\n * from the model's state. The component will re-render whenever the model state changes.\n *\n * The mapper must be created using the `derived` utility, which provides memoization\n * based on state identity to prevent unnecessary recalculations.\n *\n * @template S - The model state type\n * @template D - The derived state type\n * @param model - The ViewModel instance to subscribe to\n * @param mapper - A derived mapper function created with the `derived` utility\n * @returns The derived state computed from the current model state\n *\n * @example\n * ```tsx\n * import { ViewModel, derived } from \"@view-models/core\";\n * import { useDerivedState } from \"@view-models/react\";\n *\n * type TodoState = {\n *   items: Array<{ id: string; text: string; completed: boolean }>;\n * };\n *\n * const todoModel = new ViewModel<TodoState>({ items: [] });\n *\n * // Create a derived mapper function\n * const selectCompletedCount = derived(({ items }: TodoState) => ({\n *   completed: items.filter(item => item.completed).length,\n *   total: items.length\n * }));\n *\n * function TodoStats() {\n *   const stats = useDerivedState(todoModel, selectCompletedCount);\n *   return <div>{stats.completed} of {stats.total} completed</div>;\n * }\n * ```\n */\nexport const useDerivedState = <S, D>(\n  model: ViewModel<S>,\n  mapper: DerivedMapper<S, D>,\n) => mapper(useModelState(model));\n"],"names":["useModelState","model","useSyncExternalStore","subscribe","bind","state","useDerivedState","mapper"],"mappings":"6CAgCM,SAAUA,EAAiBC,GAC/B,OAAOC,EAAqBD,EAAME,UAAUC,KAAKH,GAAQ,IAAMA,EAAMI,MACvE,CCgBO,MAAMC,EAAkB,CAC7BL,EACAM,IACGA,EAAOP,EAAcC"}
+{"version":3,"file":"index.js","sources":["../src/useModelState.ts"],"sourcesContent":["import { useSyncExternalStore } from \"react\";\nimport { ViewModel } from \"./ViewModel\";\n\n/**\n * A React hook that subscribes a component to a ViewModel's state updates.\n *\n * This hook connects a React component to a ViewModel instance, automatically\n * subscribing to state changes and triggering re-renders when the state updates.\n *\n * @template T - The state type, which must extend the State interface\n * @param model - The ViewModel instance to subscribe to\n * @returns The current state from the ViewModel\n *\n * @example\n * ```tsx\n * class CounterViewModel extends ViewModel<{ count: number }> {\n *   increment = () => super.update({ count: super.state.count + 1 });\n * }\n *\n * function Counter() {\n *   const counterModel = useMemo(() => new CounterViewModel({ count: 0 }), []);\n *   const { count } = useModelState(counterModel);\n *\n *   return (\n *     <div>\n *       <p>Count: {count}</p>\n *       <button onClick={counterModel.increment}>+</button>\n *     </div>\n *   );\n * }\n * ```\n */\nexport const useModelState = <T>(model: ViewModel<T>): T =>\n  useSyncExternalStore(model.subscribe.bind(model), () => model.state);\n"],"names":["useModelState","model","useSyncExternalStore","subscribe","bind","state"],"mappings":"6CAgCO,MAAMA,EAAoBC,GAC/BC,EAAqBD,EAAME,UAAUC,KAAKH,GAAQ,IAAMA,EAAMI"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@view-models/react",
-  "version": "3.0.0",
+  "version": "4.1.0",
   "description": "React integration for @view-models/core",
   "type": "module",
   "main": "./dist/index.js",
@@ -55,6 +55,7 @@
     "@testing-library/react": "^16.1.0",
     "@types/react": "^18.3.18",
     "@view-models/core": "^4.1.0",
+    "@view-models/react": "^3.0.0",
     "@vitest/coverage-v8": "^2.1.8",
     "jsdom": "^26.0.0",
     "prettier": "^3.4.2",

package/src/index.ts

@@ -1,2 +1 @@
 export * from "./useModelState.js";
-export * from "./useDerivedState.js";

package/src/useModelState.ts

@@ -30,6 +30,5 @@ import { ViewModel } from "./ViewModel";
  * }
  * ```
  */
-export function useModelState<T>(model: ViewModel<T>): T {
-  return useSyncExternalStore(model.subscribe.bind(model), () => model.state);
-}
+export const useModelState = <T>(model: ViewModel<T>): T =>
+  useSyncExternalStore(model.subscribe.bind(model), () => model.state);

package/src/useDerivedState.ts

@@ -1,54 +0,0 @@
-import { useModelState } from "./useModelState";
-import { ViewModel } from "./ViewModel";
-
-type Mapper<I, O> = (input: I) => O;
-
-/**
- * A branded type for derived state mapper functions created by the `derived` utility.
- * This type ensures that mapper functions are properly memoized before being used
- * with hooks like `useDerivedState`.
- */
-type DerivedMapper<I, O> = Mapper<I, O> & { __brand: "derived" };
-
-/**
- * A React hook that subscribes to a ViewModel and returns derived state.
- *
- * This hook combines `useModelState` with a derived mapper function to compute derived values
- * from the model's state. The component will re-render whenever the model state changes.
- *
- * The mapper must be created using the `derived` utility, which provides memoization
- * based on state identity to prevent unnecessary recalculations.
- *
- * @template S - The model state type
- * @template D - The derived state type
- * @param model - The ViewModel instance to subscribe to
- * @param mapper - A derived mapper function created with the `derived` utility
- * @returns The derived state computed from the current model state
- *
- * @example
- * ```tsx
- * import { ViewModel, derived } from "@view-models/core";
- * import { useDerivedState } from "@view-models/react";
- *
- * type TodoState = {
- *   items: Array<{ id: string; text: string; completed: boolean }>;
- * };
- *
- * const todoModel = new ViewModel<TodoState>({ items: [] });
- *
- * // Create a derived mapper function
- * const selectCompletedCount = derived(({ items }: TodoState) => ({
- *   completed: items.filter(item => item.completed).length,
- *   total: items.length
- * }));
- *
- * function TodoStats() {
- *   const stats = useDerivedState(todoModel, selectCompletedCount);
- *   return <div>{stats.completed} of {stats.total} completed</div>;
- * }
- * ```
- */
-export const useDerivedState = <S, D>(
-  model: ViewModel<S>,
-  mapper: DerivedMapper<S, D>,
-) => mapper(useModelState(model));