@view-models/core 3.0.0 → 4.1.0

package/README.md

@@ -1,7 +1,7 @@
 # @view-models/core
 
 [![CI](https://github.com/sunesimonsen/view-models-core/actions/workflows/ci.yml/badge.svg)](https://github.com/sunesimonsen/view-models-core/actions/workflows/ci.yml)
-[![Bundle Size](https://img.badgesize.io/https://unpkg.com/@view-models/core@2.2.0/dist/index.js?label=gzip&compression=gzip)](https://unpkg.com/@view-models/core@2.2.0/dist/index.js)
+[![Bundle Size](https://img.badgesize.io/https://unpkg.com/@view-models/core@latest/dist/index.js?label=gzip&compression=gzip)](https://unpkg.com/@view-models/core@latest/dist/index.js)
 
 A lightweight, framework-agnostic library for building reactive view models with TypeScript. Separate your business logic from your UI framework with a simple, testable pattern.
 
@@ -82,87 +82,79 @@ describe("CounterViewModel", () => {
 });
 ```
 
-## View Models with Derived State
+## Framework Integration
+
+The view models are designed to work with framework-specific adapters. Upcoming adapters include:
+
+- [@view-models/react](https://github.com/sunesimonsen/view-models-react) - React hooks integration
+- [@view-models/preact](https://github.com/sunesimonsen/view-models-preact) - Preact hooks integration
 
-When you need to compute derived values from your state (like counts, filtered lists, or formatted data), use `ViewModelWithComputedState`:
+These adapters will allow you to use the same view model with different frameworks:
 
 ```typescript
-import { ViewModelWithComputedState } from "@view-models/core";
+// Coming soon with @view-models/react
+function Counter({ model }) {
+  const { count } = useModelState(model);
 
-type TodoState = {
-  items: Array<{ id: string; text: string; done: boolean }>;
-};
+  return (
+    <div>
+      <p>Count: {count}</p>
+      <button onClick={model.increment}>+</button>
+      <button onClick={model.decrement}>-</button>
+    </div>
+  );
+}
+```
+
+## Derived State
 
-type TodoDerivedState = TodoState & {
-  totalCount: number;
-  completedCount: number;
-  remainingCount: number;
+The `derived` utility creates memoized mapper functions for computing derived state from your view model. This is useful when you need to transform or aggregate state values without recomputing on every render.
+
+The `derived` function uses `Object.is` to compare inputs. When the input reference hasn't changed (which is guaranteed when using immutable updates), the cached output is returned without re-executing the mapper function.
+
+```typescript
+import { ViewModel, derived } from "@view-models/core";
+
+type CartState = {
+  items: Array<{ id: string; price: number; quantity: number }>;
 };
 
-class TodoViewModel extends ViewModelWithComputedState<
-  TodoState,
-  TodoDerivedState
-> {
+class CartViewModel extends ViewModel<CartState> {
   constructor() {
     super({ items: [] });
   }
 
-  computedState({ items }: TodoState): TodoDerivedState {
-    return {
-      items,
-      totalCount: items.length,
-      completedCount: items.filter((item) => item.done).length,
-      remainingCount: items.filter((item) => !item.done).length,
-    };
-  }
-
-  addTodo(text: string) {
-    super.update({
-      items: [
-        ...super.state.items,
-        { id: crypto.randomUUID(), text, done: false },
-      ],
-    });
-  }
-
-  toggleTodo(id: string) {
+  addItem(item: { id: string; price: number; quantity: number }) {
     super.update({
-      items: super.state.items.map((item) =>
-        item.id === id ? { ...item, done: !item.done } : item,
-      ),
+      items: [...super.state.items, item],
     });
   }
 }
 
-const todos = new TodoViewModel();
-console.log(todos.state.totalCount); // 0
-
-todos.addTodo("Learn ViewModels");
-console.log(todos.state.totalCount); // 1
-console.log(todos.state.remainingCount); // 1
+// Create a derived mapper that computes cart statistics
+const selectCartStats = derived((state: CartState) => ({
+  total: state.items.reduce((sum, item) => sum + item.price * item.quantity, 0),
+  itemCount: state.items.reduce((sum, item) => sum + item.quantity, 0),
+}));
+
+// Use it to compute derived state
+const cart = new CartViewModel();
+cart.addItem({ id: "1", price: 10, quantity: 2 });
+cart.addItem({ id: "2", price: 15, quantity: 1 });
+const stats = selectCartStats(cart.state); // { total: 35, itemCount: 3 }
 ```
 
-The derived state is automatically recomputed whenever the internal state changes, ensuring your computed properties are always up-to-date.
-
-## Framework Integration
-
-The view models are designed to work with framework-specific adapters. Upcoming adapters include:
-
-- [@view-models/react](https://github.com/sunesimonsen/view-models-react) - React hooks integration
-- [@view-models/preact](https://github.com/sunesimonsen/view-models-preact) - Preact hooks integration
-
-These adapters will allow you to use the same view model with different frameworks:
+Derived mappers are particularly useful with framework hooks like `useDerivedState` (from [@view-models/react](https://github.com/sunesimonsen/view-models-react)):
 
 ```typescript
-// Coming soon with @view-models/react
-function Counter({ model }) {
-  const { count } = useModelState(model);
+function CartSummary({ cart }) {
+  // Only recomputes when cart.state reference changes
+  const stats = useDerivedState(cart, selectCartStats);
 
   return (
     <div>
-      <p>Count: {count}</p>
-      <button onClick={model.increment}>+</button>
-      <button onClick={model.decrement}>-</button>
+      <p>Items: {stats.itemCount}</p>
+      <p>Total: ${stats.total}</p>
     </div>
   );
 }

package/dist/index.d.ts

@@ -1,63 +1,72 @@
+type Mapper<I, O> = (input: I) => O;
 /**
- * Function that gets called when the state changes.
+ * 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";
+};
+/**
+ * Creates a memoized derived state mapper function that caches results based on input identity.
+ *
+ * The memoization uses `Object.is` to compare inputs, making it ideal for use with
+ * immutable state objects. When the input reference hasn't changed, the cached output
+ * is returned without re-executing the function.
+ *
+ * @template I - The input type
+ * @template O - The output type
+ * @param fn - A pure function that transforms input to output
+ * @returns A memoized derived mapper function
  *
- * @template T - The state type
+ * @example
+ * ```ts
+ * const selectStats = derived(({ items }: AppState) => ({
+ *   total: items.reduce((sum, item) => sum + item.price, 0),
+ *   count: items.length
+ * }));
+ *
+ * // Use with useDerivedState
+ * const stats = selectStats(model.state);
+ * ```
+ */
+declare const derived: <I, O>(fn: Mapper<I, O>) => DerivedMapper<I, O>;
+
+/**
+ * Function that gets called when the state changes.
  */
 type ViewModelListener = () => void;
 /**
- * Abstract base class for creating reactive view models with derived state.
+ * Abstract base class for creating reactive view models.
  *
- * This class extends the basic ViewModel pattern by allowing you to compute
- * derived state from internal state. The internal state is managed privately,
- * while the derived state (which can include computed properties) is exposed
- * to subscribers.
+ * A ViewModel manages state and notifies subscribers when the state changes.
+ * Extend this class to create your own view models with custom business logic.
  *
- * @template S - The internal state type (managed internally)
- * @template D - The derived state type (exposed to subscribers)
+ * @template S - The state type
  *
  * @example
  * ```typescript
- * type TodoState = {
- *   items: Array<{ id: string; text: string; done: boolean }>;
- * };
- *
- * type TodoDerivedState = TodoState & {
- *   totalCount: number;
- *   completedCount: number;
- *   remainingCount: number;
- * };
+ * type CounterState = { count: number };
  *
- * class TodoViewModel extends ViewModelWithComputedState<TodoState, TodoDerivedState> {
+ * class CounterViewModel extends ViewModel<CounterState> {
  *   constructor() {
- *     super({ items: [] });
- *   }
- *
- *   computedState({ items }: TodoState): TodoDerivedState {
- *     return {
- *       items,
- *       totalCount: items.length,
- *       completedCount: items.filter(item => item.done).length,
- *       remainingCount: items.filter(item => !item.done).length,
- *     };
+ *     super({ count: 0 });
  *   }
  *
- *   addTodo(text: string) {
- *     super.update({
- *       items: [...super.state.items, { id: crypto.randomUUID(), text, done: false }],
- *     });
+ *   increment() {
+ *     super.update({ count: super.state.count + 1 });
  *   }
  * }
  *
- * const todos = new TodoViewModel();
- * todos.subscribe(() => {
- *   console.log('Completed:', todos.state.completedCount);
+ * const counter = new CounterViewModel();
+ * const unsubscribe = counter.subscribe(() => {
+ *   console.log('Count:', counter.state.count);
  * });
- * todos.addTodo('Learn ViewModels'); // Logs: Completed: 0
+ * counter.increment(); // Logs: Count: 1
  * ```
  */
-declare abstract class ViewModelWithComputedState<S extends object, D> {
+declare abstract class ViewModel<S extends object> {
     private _listeners;
-    private _internalState;
     private _state;
     /**
      * Subscribe to state changes.
@@ -69,8 +78,8 @@ declare abstract class ViewModelWithComputedState<S extends object, D> {
      *
      * @example
      * ```typescript
-     * const unsubscribe = viewModel.subscribe((state) => {
-     *   console.log('State changed:', state);
+     * const unsubscribe = viewModel.subscribe(() => {
+     *   console.log('State changed:', viewModel.state);
      * });
      *
      * // Later, when you want to stop listening:
@@ -79,22 +88,18 @@ declare abstract class ViewModelWithComputedState<S extends object, D> {
      */
     subscribe(listener: ViewModelListener): () => void;
     /**
-     * Create a new ViewModel with the given initial internal state.
-     *
-     * The constructor initializes the internal state and immediately computes
-     * the derived state by calling `computedState`.
+     * Create a new ViewModel with the given initial state.
      *
-     * @param initialState - The initial internal state of the view model
+     * @param initialState - The initial state of the view model
      */
     constructor(initialState: S);
     /**
-     * Update the internal state, recompute derived state, and notify all subscribers.
+     * Update the state and notify all subscribers.
      *
      * This method is protected and should only be called from within your view model subclass.
-     * The partial state is merged with the current internal state to create the new internal state.
-     * After updating, the derived state is automatically recomputed via `computeDerivedState`.
+     * The partial state is merged with the current state to create the new state.
      *
-     * @param partial - Partial state to merge with the current internal state
+     * @param partial - Partial state to merge with the current state
      *
      * @example
      * ```typescript
@@ -105,77 +110,12 @@ declare abstract class ViewModelWithComputedState<S extends object, D> {
      */
     protected update(partial: Partial<S>): void;
     /**
-     * Compute the derived state from the internal state.
-     *
-     * This abstract method must be implemented by subclasses to transform
-     * the internal state into the derived state that will be exposed to
-     * subscribers. This method is called automatically after each state
-     * update and during initialization.
-     *
-     * @param state - The current internal state
-     * @returns The derived state with any computed properties
+     * Get the current state.
      *
-     * @example
-     * ```typescript
-     * computedState({ count }: CounterState): CounterDerivedState {
-     *   return {
-     *     count,
-     *     isEven: count % 2 === 0,
-     *     isPositive: count > 0,
-     *   };
-     * }
-     * ```
+     * @returns The current state
      */
-    abstract computedState(state: S): D;
-    /**
-     * Get the current derived state.
-     *
-     * This returns the derived state computed by `computedState`,
-     * not the internal state.
-     *
-     * @returns The current derived state
-     */
-    get state(): D;
-}
-
-/**
- * Abstract base class for creating reactive view models.
- *
- * A ViewModel manages state and notifies subscribers when the state changes.
- * Extend this class to create your own view models with custom business logic.
- *
- * @template S - The state type
- *
- * @example
- * ```typescript
- * type CounterState = { count: number };
- *
- * class CounterViewModel extends ViewModel<CounterState> {
- *   constructor() {
- *     super({ count: 0 });
- *   }
- *
- *   increment() {
- *     super.update({ count: super.state.count + 1 });
- *   }
- * }
- *
- * const counter = new CounterViewModel();
- * const unsubscribe = counter.subscribe((state) => {
- *   console.log('Count:', state.count);
- * });
- * counter.increment(); // Logs: Count: 1
- * ```
- */
-declare abstract class ViewModel<S extends object> extends ViewModelWithComputedState<S, S> {
-    /**
-     * Create a new ViewModel with the given initial state.
-     *
-     * @param initialState - The initial state of the view model
-     */
-    constructor(initialState: S);
-    computedState(state: S): S;
+    get state(): S;
 }
 
-export { ViewModel, ViewModelWithComputedState };
-export type { ViewModelListener };
+export { ViewModel, derived };
+export type { DerivedMapper, ViewModelListener };

package/dist/index.js

@@ -1,2 +1,2 @@
-class t{subscribe(t){return this.t.add(t),()=>{this.t.delete(t)}}constructor(t){this.t=new Set,this.i=t,this.h=this.computedState(this.i)}update(t){this.i={...this.i,...t},this.h=this.computedState(this.i);for(const t of this.t)t()}get state(){return this.h}}class s extends t{constructor(t){super(t)}computedState(t){return t}}export{s as ViewModel,t as ViewModelWithComputedState};
+const t={},s=s=>{let e=t,r=t;return i=>e!==t&&Object.is(e,i)?r:r=s(e=i)};class e{subscribe(t){return this.t.add(t),()=>{this.t.delete(t)}}constructor(t){this.t=new Set,this.i=t}update(t){this.i={...this.i,...t},this.t.forEach(t=>t())}get state(){return this.i}}export{e as ViewModel,s as derived};
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/ViewModelWithComputedState.ts","../src/ViewModel.ts"],"sourcesContent":["/**\n * Function that gets called when the state changes.\n *\n * @template T - The state type\n */\nexport type ViewModelListener = () => void;\n\n/**\n * Abstract base class for creating reactive view models with derived state.\n *\n * This class extends the basic ViewModel pattern by allowing you to compute\n * derived state from internal state. The internal state is managed privately,\n * while the derived state (which can include computed properties) is exposed\n * to subscribers.\n *\n * @template S - The internal state type (managed internally)\n * @template D - The derived state type (exposed to subscribers)\n *\n * @example\n * ```typescript\n * type TodoState = {\n *   items: Array<{ id: string; text: string; done: boolean }>;\n * };\n *\n * type TodoDerivedState = TodoState & {\n *   totalCount: number;\n *   completedCount: number;\n *   remainingCount: number;\n * };\n *\n * class TodoViewModel extends ViewModelWithComputedState<TodoState, TodoDerivedState> {\n *   constructor() {\n *     super({ items: [] });\n *   }\n *\n *   computedState({ items }: TodoState): TodoDerivedState {\n *     return {\n *       items,\n *       totalCount: items.length,\n *       completedCount: items.filter(item => item.done).length,\n *       remainingCount: items.filter(item => !item.done).length,\n *     };\n *   }\n *\n *   addTodo(text: string) {\n *     super.update({\n *       items: [...super.state.items, { id: crypto.randomUUID(), text, done: false }],\n *     });\n *   }\n * }\n *\n * const todos = new TodoViewModel();\n * todos.subscribe(() => {\n *   console.log('Completed:', todos.state.completedCount);\n * });\n * todos.addTodo('Learn ViewModels'); // Logs: Completed: 0\n * ```\n */\nexport abstract class ViewModelWithComputedState<S extends object, D> {\n  private _listeners: Set<ViewModelListener> = new Set();\n  private _internalState: S;\n  private _state: D;\n\n  /**\n   * Subscribe to state changes.\n   *\n   * The listener will be called immediately after any state update.\n   *\n   * @param listener - Function to call when state changes\n   * @returns Function to unsubscribe the listener\n   *\n   * @example\n   * ```typescript\n   * const unsubscribe = viewModel.subscribe((state) => {\n   *   console.log('State changed:', state);\n   * });\n   *\n   * // Later, when you want to stop listening:\n   * unsubscribe();\n   * ```\n   */\n  subscribe(listener: ViewModelListener): () => void {\n    this._listeners.add(listener);\n    return () => {\n      this._listeners.delete(listener);\n    };\n  }\n\n  /**\n   * Create a new ViewModel with the given initial internal state.\n   *\n   * The constructor initializes the internal state and immediately computes\n   * the derived state by calling `computedState`.\n   *\n   * @param initialState - The initial internal state of the view model\n   */\n  constructor(initialState: S) {\n    this._internalState = initialState;\n    this._state = this.computedState(this._internalState);\n  }\n\n  /**\n   * Update the internal state, recompute derived state, and notify all subscribers.\n   *\n   * This method is protected and should only be called from within your view model subclass.\n   * The partial state is merged with the current internal state to create the new internal state.\n   * After updating, the derived state is automatically recomputed via `computeDerivedState`.\n   *\n   * @param partial - Partial state to merge with the current internal state\n   *\n   * @example\n   * ```typescript\n   * super.update({\n   *   count: super.state.count + 1\n   * });\n   * ```\n   */\n  protected update(partial: Partial<S>) {\n    this._internalState = { ...this._internalState, ...partial };\n    this._state = this.computedState(this._internalState);\n\n    for (const listener of this._listeners) {\n      listener();\n    }\n  }\n\n  /**\n   * Compute the derived state from the internal state.\n   *\n   * This abstract method must be implemented by subclasses to transform\n   * the internal state into the derived state that will be exposed to\n   * subscribers. This method is called automatically after each state\n   * update and during initialization.\n   *\n   * @param state - The current internal state\n   * @returns The derived state with any computed properties\n   *\n   * @example\n   * ```typescript\n   * computedState({ count }: CounterState): CounterDerivedState {\n   *   return {\n   *     count,\n   *     isEven: count % 2 === 0,\n   *     isPositive: count > 0,\n   *   };\n   * }\n   * ```\n   */\n  abstract computedState(state: S): D;\n\n  /**\n   * Get the current derived state.\n   *\n   * This returns the derived state computed by `computedState`,\n   * not the internal state.\n   *\n   * @returns The current derived state\n   */\n  get state(): D {\n    return this._state;\n  }\n}\n","import { ViewModelWithComputedState } from \"./ViewModelWithComputedState.js\";\n\n/**\n * Abstract base class for creating reactive view models.\n *\n * A ViewModel manages state and notifies subscribers when the state changes.\n * Extend this class to create your own view models with custom business logic.\n *\n * @template S - The state type\n *\n * @example\n * ```typescript\n * type CounterState = { count: number };\n *\n * class CounterViewModel extends ViewModel<CounterState> {\n *   constructor() {\n *     super({ count: 0 });\n *   }\n *\n *   increment() {\n *     super.update({ count: super.state.count + 1 });\n *   }\n * }\n *\n * const counter = new CounterViewModel();\n * const unsubscribe = counter.subscribe((state) => {\n *   console.log('Count:', state.count);\n * });\n * counter.increment(); // Logs: Count: 1\n * ```\n */\nexport abstract class ViewModel<\n  S extends object,\n> extends ViewModelWithComputedState<S, S> {\n  /**\n   * Create a new ViewModel with the given initial state.\n   *\n   * @param initialState - The initial state of the view model\n   */\n  constructor(initialState: S) {\n    super(initialState);\n  }\n\n  computedState(state: S): S {\n    return state;\n  }\n}\n"],"names":["ViewModelWithComputedState","subscribe","listener","this","_listeners","add","delete","constructor","initialState","Set","_internalState","_state","computedState","update","partial","state","ViewModel","super"],"mappings":"MA0DsBA,EAuBpB,SAAAC,CAAUC,GAER,OADAC,KAAKC,EAAWC,IAAIH,GACb,KACLC,KAAKC,EAAWE,OAAOJ,GAE3B,CAUA,WAAAK,CAAYC,GArCJL,KAAAC,EAAqC,IAAIK,IAsC/CN,KAAKO,EAAiBF,EACtBL,KAAKQ,EAASR,KAAKS,cAAcT,KAAKO,EACxC,CAkBU,MAAAG,CAAOC,GACfX,KAAKO,EAAiB,IAAKP,KAAKO,KAAmBI,GACnDX,KAAKQ,EAASR,KAAKS,cAAcT,KAAKO,GAEtC,IAAK,MAAMR,KAAYC,KAAKC,EAC1BF,GAEJ,CAkCA,SAAIa,GACF,OAAOZ,KAAKQ,CACd,ECjII,MAAgBK,UAEZhB,EAMR,WAAAO,CAAYC,GACVS,MAAMT,EACR,CAEA,aAAAI,CAAcG,GACZ,OAAOA,CACT"}
+{"version":3,"file":"index.js","sources":["../src/derived.ts","../src/ViewModel.ts"],"sourcesContent":["type 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 */\nexport type DerivedMapper<I, O> = Mapper<I, O> & { __brand: \"derived\" };\n\nconst UNINITIALIZED = {};\n\n/**\n * Creates a memoized derived state mapper function that caches results based on input identity.\n *\n * The memoization uses `Object.is` to compare inputs, making it ideal for use with\n * immutable state objects. When the input reference hasn't changed, the cached output\n * is returned without re-executing the function.\n *\n * @template I - The input type\n * @template O - The output type\n * @param fn - A pure function that transforms input to output\n * @returns A memoized derived mapper function\n *\n * @example\n * ```ts\n * const selectStats = derived(({ items }: AppState) => ({\n *   total: items.reduce((sum, item) => sum + item.price, 0),\n *   count: items.length\n * }));\n *\n * // Use with useDerivedState\n * const stats = selectStats(model.state);\n * ```\n */\nexport const derived = <I, O>(fn: Mapper<I, O>): DerivedMapper<I, O> => {\n  let lastInput: I | typeof UNINITIALIZED = UNINITIALIZED;\n  let lastOutput: O | typeof UNINITIALIZED = UNINITIALIZED;\n  return ((input: I) => {\n    if (lastInput !== UNINITIALIZED && Object.is(lastInput, input)) {\n      return lastOutput as O;\n    }\n    return (lastOutput = fn((lastInput = input)));\n  }) as DerivedMapper<I, O>;\n};\n","/**\n * Function that gets called when the state changes.\n */\nexport type ViewModelListener = () => void;\n\n/**\n * Abstract base class for creating reactive view models.\n *\n * A ViewModel manages state and notifies subscribers when the state changes.\n * Extend this class to create your own view models with custom business logic.\n *\n * @template S - The state type\n *\n * @example\n * ```typescript\n * type CounterState = { count: number };\n *\n * class CounterViewModel extends ViewModel<CounterState> {\n *   constructor() {\n *     super({ count: 0 });\n *   }\n *\n *   increment() {\n *     super.update({ count: super.state.count + 1 });\n *   }\n * }\n *\n * const counter = new CounterViewModel();\n * const unsubscribe = counter.subscribe(() => {\n *   console.log('Count:', counter.state.count);\n * });\n * counter.increment(); // Logs: Count: 1\n * ```\n */\nexport abstract class ViewModel<S extends object> {\n  private _listeners = new Set<ViewModelListener>();\n  private _state: S;\n\n  /**\n   * Subscribe to state changes.\n   *\n   * The listener will be called immediately after any state update.\n   *\n   * @param listener - Function to call when state changes\n   * @returns Function to unsubscribe the listener\n   *\n   * @example\n   * ```typescript\n   * const unsubscribe = viewModel.subscribe(() => {\n   *   console.log('State changed:', viewModel.state);\n   * });\n   *\n   * // Later, when you want to stop listening:\n   * unsubscribe();\n   * ```\n   */\n  subscribe(listener: ViewModelListener): () => void {\n    this._listeners.add(listener);\n    return () => {\n      this._listeners.delete(listener);\n    };\n  }\n\n  /**\n   * Create a new ViewModel with the given initial state.\n   *\n   * @param initialState - The initial state of the view model\n   */\n  constructor(initialState: S) {\n    this._state = initialState;\n  }\n\n  /**\n   * Update the state and notify all subscribers.\n   *\n   * This method is protected and should only be called from within your view model subclass.\n   * The partial state is merged with the current state to create the new state.\n   *\n   * @param partial - Partial state to merge with the current state\n   *\n   * @example\n   * ```typescript\n   * super.update({\n   *   count: super.state.count + 1\n   * });\n   * ```\n   */\n  protected update(partial: Partial<S>) {\n    this._state = { ...this._state, ...partial };\n    this._listeners.forEach((l) => l());\n  }\n\n  /**\n   * Get the current state.\n   *\n   * @returns The current state\n   */\n  get state(): S {\n    return this._state;\n  }\n}\n"],"names":["UNINITIALIZED","derived","fn","lastInput","lastOutput","input","Object","is","ViewModel","subscribe","listener","this","_listeners","add","delete","constructor","initialState","Set","_state","update","partial","forEach","l","state"],"mappings":"AASA,MAAMA,EAAgB,CAAA,EAyBTC,EAAiBC,IAC5B,IAAIC,EAAsCH,EACtCI,EAAuCJ,EAC3C,OAASK,GACHF,IAAcH,GAAiBM,OAAOC,GAAGJ,EAAWE,GAC/CD,EAEDA,EAAaF,EAAIC,EAAYE,UCPnBG,EAsBpB,SAAAC,CAAUC,GAER,OADAC,KAAKC,EAAWC,IAAIH,GACb,KACLC,KAAKC,EAAWE,OAAOJ,GAE3B,CAOA,WAAAK,CAAYC,GAjCJL,KAAAC,EAAa,IAAIK,IAkCvBN,KAAKO,EAASF,CAChB,CAiBU,MAAAG,CAAOC,GACfT,KAAKO,EAAS,IAAKP,KAAKO,KAAWE,GACnCT,KAAKC,EAAWS,QAASC,GAAMA,IACjC,CAOA,SAAIC,GACF,OAAOZ,KAAKO,CACd"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@view-models/core",
-  "version": "3.0.0",
+  "version": "4.1.0",
   "description": "A lightweight, framework-agnostic library for building reactive view models with TypeScript",
   "keywords": [
     "view",

package/src/ViewModel.ts

@@ -1,4 +1,7 @@
-import { ViewModelWithComputedState } from "./ViewModelWithComputedState.js";
+/**
+ * Function that gets called when the state changes.
+ */
+export type ViewModelListener = () => void;
 
 /**
  * Abstract base class for creating reactive view models.
@@ -23,25 +26,76 @@ import { ViewModelWithComputedState } from "./ViewModelWithComputedState.js";
  * }
  *
  * const counter = new CounterViewModel();
- * const unsubscribe = counter.subscribe((state) => {
- *   console.log('Count:', state.count);
+ * const unsubscribe = counter.subscribe(() => {
+ *   console.log('Count:', counter.state.count);
  * });
  * counter.increment(); // Logs: Count: 1
  * ```
  */
-export abstract class ViewModel<
-  S extends object,
-> extends ViewModelWithComputedState<S, S> {
+export abstract class ViewModel<S extends object> {
+  private _listeners = new Set<ViewModelListener>();
+  private _state: S;
+
+  /**
+   * Subscribe to state changes.
+   *
+   * The listener will be called immediately after any state update.
+   *
+   * @param listener - Function to call when state changes
+   * @returns Function to unsubscribe the listener
+   *
+   * @example
+   * ```typescript
+   * const unsubscribe = viewModel.subscribe(() => {
+   *   console.log('State changed:', viewModel.state);
+   * });
+   *
+   * // Later, when you want to stop listening:
+   * unsubscribe();
+   * ```
+   */
+  subscribe(listener: ViewModelListener): () => void {
+    this._listeners.add(listener);
+    return () => {
+      this._listeners.delete(listener);
+    };
+  }
+
   /**
    * Create a new ViewModel with the given initial state.
    *
    * @param initialState - The initial state of the view model
    */
   constructor(initialState: S) {
-    super(initialState);
+    this._state = initialState;
   }
 
-  computedState(state: S): S {
-    return state;
+  /**
+   * Update the state and notify all subscribers.
+   *
+   * This method is protected and should only be called from within your view model subclass.
+   * The partial state is merged with the current state to create the new state.
+   *
+   * @param partial - Partial state to merge with the current state
+   *
+   * @example
+   * ```typescript
+   * super.update({
+   *   count: super.state.count + 1
+   * });
+   * ```
+   */
+  protected update(partial: Partial<S>) {
+    this._state = { ...this._state, ...partial };
+    this._listeners.forEach((l) => l());
+  }
+
+  /**
+   * Get the current state.
+   *
+   * @returns The current state
+   */
+  get state(): S {
+    return this._state;
   }
 }

package/src/derived.ts

@@ -0,0 +1,44 @@
+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`.
+ */
+export type DerivedMapper<I, O> = Mapper<I, O> & { __brand: "derived" };
+
+const UNINITIALIZED = {};
+
+/**
+ * Creates a memoized derived state mapper function that caches results based on input identity.
+ *
+ * The memoization uses `Object.is` to compare inputs, making it ideal for use with
+ * immutable state objects. When the input reference hasn't changed, the cached output
+ * is returned without re-executing the function.
+ *
+ * @template I - The input type
+ * @template O - The output type
+ * @param fn - A pure function that transforms input to output
+ * @returns A memoized derived mapper function
+ *
+ * @example
+ * ```ts
+ * const selectStats = derived(({ items }: AppState) => ({
+ *   total: items.reduce((sum, item) => sum + item.price, 0),
+ *   count: items.length
+ * }));
+ *
+ * // Use with useDerivedState
+ * const stats = selectStats(model.state);
+ * ```
+ */
+export const derived = <I, O>(fn: Mapper<I, O>): DerivedMapper<I, O> => {
+  let lastInput: I | typeof UNINITIALIZED = UNINITIALIZED;
+  let lastOutput: O | typeof UNINITIALIZED = UNINITIALIZED;
+  return ((input: I) => {
+    if (lastInput !== UNINITIALIZED && Object.is(lastInput, input)) {
+      return lastOutput as O;
+    }
+    return (lastOutput = fn((lastInput = input)));
+  }) as DerivedMapper<I, O>;
+};

package/src/index.ts

@@ -1,2 +1,2 @@
+export * from "./derived.js";
 export * from "./ViewModel.js";
-export * from "./ViewModelWithComputedState.js";

package/src/ViewModelWithComputedState.ts

@@ -1,162 +0,0 @@
-/**
- * Function that gets called when the state changes.
- *
- * @template T - The state type
- */
-export type ViewModelListener = () => void;
-
-/**
- * Abstract base class for creating reactive view models with derived state.
- *
- * This class extends the basic ViewModel pattern by allowing you to compute
- * derived state from internal state. The internal state is managed privately,
- * while the derived state (which can include computed properties) is exposed
- * to subscribers.
- *
- * @template S - The internal state type (managed internally)
- * @template D - The derived state type (exposed to subscribers)
- *
- * @example
- * ```typescript
- * type TodoState = {
- *   items: Array<{ id: string; text: string; done: boolean }>;
- * };
- *
- * type TodoDerivedState = TodoState & {
- *   totalCount: number;
- *   completedCount: number;
- *   remainingCount: number;
- * };
- *
- * class TodoViewModel extends ViewModelWithComputedState<TodoState, TodoDerivedState> {
- *   constructor() {
- *     super({ items: [] });
- *   }
- *
- *   computedState({ items }: TodoState): TodoDerivedState {
- *     return {
- *       items,
- *       totalCount: items.length,
- *       completedCount: items.filter(item => item.done).length,
- *       remainingCount: items.filter(item => !item.done).length,
- *     };
- *   }
- *
- *   addTodo(text: string) {
- *     super.update({
- *       items: [...super.state.items, { id: crypto.randomUUID(), text, done: false }],
- *     });
- *   }
- * }
- *
- * const todos = new TodoViewModel();
- * todos.subscribe(() => {
- *   console.log('Completed:', todos.state.completedCount);
- * });
- * todos.addTodo('Learn ViewModels'); // Logs: Completed: 0
- * ```
- */
-export abstract class ViewModelWithComputedState<S extends object, D> {
-  private _listeners: Set<ViewModelListener> = new Set();
-  private _internalState: S;
-  private _state: D;
-
-  /**
-   * Subscribe to state changes.
-   *
-   * The listener will be called immediately after any state update.
-   *
-   * @param listener - Function to call when state changes
-   * @returns Function to unsubscribe the listener
-   *
-   * @example
-   * ```typescript
-   * const unsubscribe = viewModel.subscribe((state) => {
-   *   console.log('State changed:', state);
-   * });
-   *
-   * // Later, when you want to stop listening:
-   * unsubscribe();
-   * ```
-   */
-  subscribe(listener: ViewModelListener): () => void {
-    this._listeners.add(listener);
-    return () => {
-      this._listeners.delete(listener);
-    };
-  }
-
-  /**
-   * Create a new ViewModel with the given initial internal state.
-   *
-   * The constructor initializes the internal state and immediately computes
-   * the derived state by calling `computedState`.
-   *
-   * @param initialState - The initial internal state of the view model
-   */
-  constructor(initialState: S) {
-    this._internalState = initialState;
-    this._state = this.computedState(this._internalState);
-  }
-
-  /**
-   * Update the internal state, recompute derived state, and notify all subscribers.
-   *
-   * This method is protected and should only be called from within your view model subclass.
-   * The partial state is merged with the current internal state to create the new internal state.
-   * After updating, the derived state is automatically recomputed via `computeDerivedState`.
-   *
-   * @param partial - Partial state to merge with the current internal state
-   *
-   * @example
-   * ```typescript
-   * super.update({
-   *   count: super.state.count + 1
-   * });
-   * ```
-   */
-  protected update(partial: Partial<S>) {
-    this._internalState = { ...this._internalState, ...partial };
-    this._state = this.computedState(this._internalState);
-
-    for (const listener of this._listeners) {
-      listener();
-    }
-  }
-
-  /**
-   * Compute the derived state from the internal state.
-   *
-   * This abstract method must be implemented by subclasses to transform
-   * the internal state into the derived state that will be exposed to
-   * subscribers. This method is called automatically after each state
-   * update and during initialization.
-   *
-   * @param state - The current internal state
-   * @returns The derived state with any computed properties
-   *
-   * @example
-   * ```typescript
-   * computedState({ count }: CounterState): CounterDerivedState {
-   *   return {
-   *     count,
-   *     isEven: count % 2 === 0,
-   *     isPositive: count > 0,
-   *   };
-   * }
-   * ```
-   */
-  abstract computedState(state: S): D;
-
-  /**
-   * Get the current derived state.
-   *
-   * This returns the derived state computed by `computedState`,
-   * not the internal state.
-   *
-   * @returns The current derived state
-   */
-  get state(): D {
-    return this._state;
-  }
-}