@view-models/core 2.2.0 → 3.0.0

package/README.md

@@ -1,5 +1,8 @@
 # @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)
+
 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.
 
 ![View models banner](./view-models.png)
@@ -31,16 +34,20 @@ type CounterState = {
 };
 
 class CounterViewModel extends ViewModel<CounterState> {
+  constructor() {
+    super({ count: 0 });
+  }
+
   increment() {
-    this.update(({ count }) => ({
-      count: count + 1,
-    }));
+    super.update({
+      count: super.state.count + 1,
+    });
   }
 
   decrement() {
-    this.update(({ count }) => ({
-      count: count - 1,
-    }));
+    super.update({
+      count: super.state.count - 1,
+    });
   }
 }
 ```
@@ -77,10 +84,10 @@ describe("CounterViewModel", () => {
 
 ## View Models with Derived State
 
-When you need to compute derived values from your state (like counts, filtered lists, or formatted data), use `ViewModelWithDerivedState`:
+When you need to compute derived values from your state (like counts, filtered lists, or formatted data), use `ViewModelWithComputedState`:
 
 ```typescript
-import { ViewModelWithDerivedState } from "@view-models/core";
+import { ViewModelWithComputedState } from "@view-models/core";
 
 type TodoState = {
   items: Array<{ id: string; text: string; done: boolean }>;
@@ -92,7 +99,7 @@ type TodoDerivedState = TodoState & {
   remainingCount: number;
 };
 
-class TodoViewModel extends ViewModelWithDerivedState<
+class TodoViewModel extends ViewModelWithComputedState<
   TodoState,
   TodoDerivedState
 > {
@@ -100,7 +107,7 @@ class TodoViewModel extends ViewModelWithDerivedState<
     super({ items: [] });
   }
 
-  computeDerivedState({ items }: TodoState): TodoDerivedState {
+  computedState({ items }: TodoState): TodoDerivedState {
     return {
       items,
       totalCount: items.length,
@@ -110,17 +117,20 @@ class TodoViewModel extends ViewModelWithDerivedState<
   }
 
   addTodo(text: string) {
-    this.update(({ items }) => ({
-      items: [...items, { id: crypto.randomUUID(), text, done: false }],
-    }));
+    super.update({
+      items: [
+        ...super.state.items,
+        { id: crypto.randomUUID(), text, done: false },
+      ],
+    });
   }
 
   toggleTodo(id: string) {
-    this.update(({ items }) => ({
-      items: items.map((item) =>
+    super.update({
+      items: super.state.items.map((item) =>
         item.id === id ? { ...item, done: !item.done } : item,
       ),
-    }));
+    });
   }
 }
 
@@ -170,16 +180,14 @@ Always return new state objects from your updater functions:
 
 ```typescript
 // Good
-this.update(({ count }) => ({
-  ...state,
-  count: count + 1,
-}));
+super.update({
+  count: super.state.count + 1,
+});
 
 // Bad - mutates existing state
-this.update((state) => {
-  state.count++;
-  return state;
-});
+const state = super.state;
+state.count++;
+super.update(state);
 ```
 
 ### Use Readonly Types
@@ -212,29 +220,29 @@ actions:
 
 ```typescript
 class TodosViewModel extends ViewModel<TodosState> {
-  private api: API
+  private api: API;
 
   constructor(state: TodosState, api: API) {
-    super(state)
-    this.api = api
+    super(state);
+    this.api = api;
   }
 
   async loadTodos() {
-    this.update((state) => ({ ...state, loading: true, failed: false }));
+    super.update({ loading: true, failed: false });
     try {
       const todos = await this.api.fetchTodos();
-      this.update(() => ({ todos, loading: false }));
+      super.update({ todos, loading: false });
     } catch {
-      this.update((state) => ({ ...state, loading: false: failed: true }));
+      super.update({ loading: false, failed: true });
     }
   }
 
   async addTodo(text: string) {
     try {
       const todo = await this.api.createTodo(text);
-      this.update(({ todos }) => ({
-        todos: [...todos, todo],
-      }));
+      super.update({
+        todos: [...super.state.todos, todo],
+      });
     } catch {
       // TODO show error
     }

package/dist/index.d.ts

@@ -1,12 +1,3 @@
-/**
- * Function that receives the current state and returns the new state.
- * The updater function should be pure and return a new state object.
- *
- * @template T - The state type
- * @param currentState - The current state
- * @returns The new state
- */
-type Updater<T> = (currentState: T) => T;
 /**
  * Function that gets called when the state changes.
  *
@@ -36,12 +27,12 @@ type ViewModelListener = () => void;
  *   remainingCount: number;
  * };
  *
- * class TodoViewModel extends ViewModelWithDerivedState<TodoState, TodoDerivedState> {
+ * class TodoViewModel extends ViewModelWithComputedState<TodoState, TodoDerivedState> {
  *   constructor() {
  *     super({ items: [] });
  *   }
  *
- *   computeDerivedState({ items }: TodoState): TodoDerivedState {
+ *   computedState({ items }: TodoState): TodoDerivedState {
  *     return {
  *       items,
  *       totalCount: items.length,
@@ -51,9 +42,9 @@ type ViewModelListener = () => void;
  *   }
  *
  *   addTodo(text: string) {
- *     this.update(({ items }) => ({
- *       items: [...items, { id: crypto.randomUUID(), text, done: false }],
- *     }));
+ *     super.update({
+ *       items: [...super.state.items, { id: crypto.randomUUID(), text, done: false }],
+ *     });
  *   }
  * }
  *
@@ -64,7 +55,7 @@ type ViewModelListener = () => void;
  * todos.addTodo('Learn ViewModels'); // Logs: Completed: 0
  * ```
  */
-declare abstract class ViewModelWithDerivedState<S, D> {
+declare abstract class ViewModelWithComputedState<S extends object, D> {
     private _listeners;
     private _internalState;
     private _state;
@@ -91,7 +82,7 @@ declare abstract class ViewModelWithDerivedState<S, D> {
      * Create a new ViewModel with the given initial internal state.
      *
      * The constructor initializes the internal state and immediately computes
-     * the derived state by calling `computeDerivedState`.
+     * the derived state by calling `computedState`.
      *
      * @param initialState - The initial internal state of the view model
      */
@@ -100,21 +91,19 @@ declare abstract class ViewModelWithDerivedState<S, D> {
      * 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 updater function receives the current internal state and should return the new internal state.
+     * 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`.
-     * Always return a new state object to ensure immutability.
      *
-     * @param updater - Function that receives current internal state and returns new internal state
+     * @param partial - Partial state to merge with the current internal state
      *
      * @example
      * ```typescript
-     * this.update((currentState) => ({
-     *   ...currentState,
-     *   count: currentState.count + 1
-     * }));
+     * super.update({
+     *   count: super.state.count + 1
+     * });
      * ```
      */
-    protected update(updater: Updater<S>): void;
+    protected update(partial: Partial<S>): void;
     /**
      * Compute the derived state from the internal state.
      *
@@ -128,7 +117,7 @@ declare abstract class ViewModelWithDerivedState<S, D> {
      *
      * @example
      * ```typescript
-     * computeDerivedState({ count }: CounterState): CounterDerivedState {
+     * computedState({ count }: CounterState): CounterDerivedState {
      *   return {
      *     count,
      *     isEven: count % 2 === 0,
@@ -137,11 +126,11 @@ declare abstract class ViewModelWithDerivedState<S, D> {
      * }
      * ```
      */
-    abstract computeDerivedState(state: S): D;
+    abstract computedState(state: S): D;
     /**
      * Get the current derived state.
      *
-     * This returns the derived state computed by `computeDerivedState`,
+     * This returns the derived state computed by `computedState`,
      * not the internal state.
      *
      * @returns The current derived state
@@ -167,7 +156,7 @@ declare abstract class ViewModelWithDerivedState<S, D> {
  *   }
  *
  *   increment() {
- *     this.update(({ count }) => ({ count: count + 1 }));
+ *     super.update({ count: super.state.count + 1 });
  *   }
  * }
  *
@@ -178,15 +167,15 @@ declare abstract class ViewModelWithDerivedState<S, D> {
  * counter.increment(); // Logs: Count: 1
  * ```
  */
-declare abstract class ViewModel<S> extends ViewModelWithDerivedState<S, S> {
+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);
-    computeDerivedState(state: S): S;
+    computedState(state: S): S;
 }
 
-export { ViewModel, ViewModelWithDerivedState };
-export type { Updater, ViewModelListener };
+export { ViewModel, ViewModelWithComputedState };
+export type { 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.computeDerivedState(this.i)}update(t){this.i=t(this.i),this.h=this.computeDerivedState(this.i);for(const t of this.t)t()}get state(){return this.h}}class s extends t{constructor(t){super(t)}computeDerivedState(t){return t}}export{s as ViewModel,t as ViewModelWithDerivedState};
+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};
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/ViewModelWithDerivedState.ts","../src/ViewModel.ts"],"sourcesContent":["/**\n * Function that receives the current state and returns the new state.\n * The updater function should be pure and return a new state object.\n *\n * @template T - The state type\n * @param currentState - The current state\n * @returns The new state\n */\nexport type Updater<T> = (currentState: T) => T;\n\n/**\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 ViewModelWithDerivedState<TodoState, TodoDerivedState> {\n *   constructor() {\n *     super({ items: [] });\n *   }\n *\n *   computeDerivedState({ 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 *     this.update(({ items }) => ({\n *       items: [...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 ViewModelWithDerivedState<S, 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 `computeDerivedState`.\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.computeDerivedState(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 updater function receives the current internal state and should return the new internal state.\n   * After updating, the derived state is automatically recomputed via `computeDerivedState`.\n   * Always return a new state object to ensure immutability.\n   *\n   * @param updater - Function that receives current internal state and returns new internal state\n   *\n   * @example\n   * ```typescript\n   * this.update((currentState) => ({\n   *   ...currentState,\n   *   count: currentState.count + 1\n   * }));\n   * ```\n   */\n  protected update(updater: Updater<S>) {\n    this._internalState = updater(this._internalState);\n    this._state = this.computeDerivedState(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   * computeDerivedState({ count }: CounterState): CounterDerivedState {\n   *   return {\n   *     count,\n   *     isEven: count % 2 === 0,\n   *     isPositive: count > 0,\n   *   };\n   * }\n   * ```\n   */\n  abstract computeDerivedState(state: S): D;\n\n  /**\n   * Get the current derived state.\n   *\n   * This returns the derived state computed by `computeDerivedState`,\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 { ViewModelWithDerivedState } from \"./ViewModelWithDerivedState.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 *     this.update(({ count }) => ({ count: 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<S> extends ViewModelWithDerivedState<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  computeDerivedState(state: S): S {\n    return state;\n  }\n}\n"],"names":["ViewModelWithDerivedState","subscribe","listener","this","_listeners","add","delete","constructor","initialState","Set","_internalState","_state","computeDerivedState","update","updater","state","ViewModel","super"],"mappings":"MAoEsBA,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,oBAAoBT,KAAKO,EAC9C,CAoBU,MAAAG,CAAOC,GACfX,KAAKO,EAAiBI,EAAQX,KAAKO,GACnCP,KAAKQ,EAASR,KAAKS,oBAAoBT,KAAKO,GAE5C,IAAK,MAAMR,KAAYC,KAAKC,EAC1BF,GAEJ,CAkCA,SAAIa,GACF,OAAOZ,KAAKQ,CACd,EC7II,MAAgBK,UAAqBhB,EAMzC,WAAAO,CAAYC,GACVS,MAAMT,EACR,CAEA,mBAAAI,CAAoBG,GAClB,OAAOA,CACT"}
+{"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"}

package/package.json

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

package/src/ViewModel.ts

@@ -1,4 +1,4 @@
-import { ViewModelWithDerivedState } from "./ViewModelWithDerivedState.js";
+import { ViewModelWithComputedState } from "./ViewModelWithComputedState.js";
 
 /**
  * Abstract base class for creating reactive view models.
@@ -18,7 +18,7 @@ import { ViewModelWithDerivedState } from "./ViewModelWithDerivedState.js";
  *   }
  *
  *   increment() {
- *     this.update(({ count }) => ({ count: count + 1 }));
+ *     super.update({ count: super.state.count + 1 });
  *   }
  * }
  *
@@ -29,7 +29,9 @@ import { ViewModelWithDerivedState } from "./ViewModelWithDerivedState.js";
  * counter.increment(); // Logs: Count: 1
  * ```
  */
-export abstract class ViewModel<S> extends ViewModelWithDerivedState<S, S> {
+export abstract class ViewModel<
+  S extends object,
+> extends ViewModelWithComputedState<S, S> {
   /**
    * Create a new ViewModel with the given initial state.
    *
@@ -39,7 +41,7 @@ export abstract class ViewModel<S> extends ViewModelWithDerivedState<S, S> {
     super(initialState);
   }
 
-  computeDerivedState(state: S): S {
+  computedState(state: S): S {
     return state;
   }
 }

package/src/{ViewModelWithDerivedState.ts → ViewModelWithComputedState.ts}

@@ -1,13 +1,3 @@
-/**
- * Function that receives the current state and returns the new state.
- * The updater function should be pure and return a new state object.
- *
- * @template T - The state type
- * @param currentState - The current state
- * @returns The new state
- */
-export type Updater<T> = (currentState: T) => T;
-
 /**
  * Function that gets called when the state changes.
  *
@@ -38,12 +28,12 @@ export type ViewModelListener = () => void;
  *   remainingCount: number;
  * };
  *
- * class TodoViewModel extends ViewModelWithDerivedState<TodoState, TodoDerivedState> {
+ * class TodoViewModel extends ViewModelWithComputedState<TodoState, TodoDerivedState> {
  *   constructor() {
  *     super({ items: [] });
  *   }
  *
- *   computeDerivedState({ items }: TodoState): TodoDerivedState {
+ *   computedState({ items }: TodoState): TodoDerivedState {
  *     return {
  *       items,
  *       totalCount: items.length,
@@ -53,9 +43,9 @@ export type ViewModelListener = () => void;
  *   }
  *
  *   addTodo(text: string) {
- *     this.update(({ items }) => ({
- *       items: [...items, { id: crypto.randomUUID(), text, done: false }],
- *     }));
+ *     super.update({
+ *       items: [...super.state.items, { id: crypto.randomUUID(), text, done: false }],
+ *     });
  *   }
  * }
  *
@@ -66,7 +56,7 @@ export type ViewModelListener = () => void;
  * todos.addTodo('Learn ViewModels'); // Logs: Completed: 0
  * ```
  */
-export abstract class ViewModelWithDerivedState<S, D> {
+export abstract class ViewModelWithComputedState<S extends object, D> {
   private _listeners: Set<ViewModelListener> = new Set();
   private _internalState: S;
   private _state: D;
@@ -100,36 +90,34 @@ export abstract class ViewModelWithDerivedState<S, D> {
    * Create a new ViewModel with the given initial internal state.
    *
    * The constructor initializes the internal state and immediately computes
-   * the derived state by calling `computeDerivedState`.
+   * 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.computeDerivedState(this._internalState);
+    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 updater function receives the current internal state and should return the new internal state.
+   * 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`.
-   * Always return a new state object to ensure immutability.
    *
-   * @param updater - Function that receives current internal state and returns new internal state
+   * @param partial - Partial state to merge with the current internal state
    *
    * @example
    * ```typescript
-   * this.update((currentState) => ({
-   *   ...currentState,
-   *   count: currentState.count + 1
-   * }));
+   * super.update({
+   *   count: super.state.count + 1
+   * });
    * ```
    */
-  protected update(updater: Updater<S>) {
-    this._internalState = updater(this._internalState);
-    this._state = this.computeDerivedState(this._internalState);
+  protected update(partial: Partial<S>) {
+    this._internalState = { ...this._internalState, ...partial };
+    this._state = this.computedState(this._internalState);
 
     for (const listener of this._listeners) {
       listener();
@@ -149,7 +137,7 @@ export abstract class ViewModelWithDerivedState<S, D> {
    *
    * @example
    * ```typescript
-   * computeDerivedState({ count }: CounterState): CounterDerivedState {
+   * computedState({ count }: CounterState): CounterDerivedState {
    *   return {
    *     count,
    *     isEven: count % 2 === 0,
@@ -158,12 +146,12 @@ export abstract class ViewModelWithDerivedState<S, D> {
    * }
    * ```
    */
-  abstract computeDerivedState(state: S): D;
+  abstract computedState(state: S): D;
 
   /**
    * Get the current derived state.
    *
-   * This returns the derived state computed by `computeDerivedState`,
+   * This returns the derived state computed by `computedState`,
    * not the internal state.
    *
    * @returns The current derived state

package/src/index.ts

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