@view-models/core 5.0.0 → 6.0.0

package/README.md

@@ -191,52 +191,58 @@ class TodosViewModel extends ViewModel<TodosState> {
 }
 ```
 
-### Derived State with prepareState
+### Derived State
 
-Override the `prepareState` method to compute derived values or enforce
-invariants before state is committed. This hook intercepts every state update,
-allowing you to transform the state before subscribers are notified:
+When you have state values that are derived from other state, create a dedicated
+update method that computes these values. This approach is more explicit and
+efficient than intercepting every state update:
 
 ```typescript
-type FormState = {
-  firstName: string;
-  lastName: string;
-  fullName: string;
+type TodoState = {
+  todos: ReadonlyArray<{ id: number; text: string; completed: boolean }>;
+  completedCount: number;
+  pendingCount: number;
 };
 
-class FormViewModel extends ViewModel<FormState> {
+class TodoViewModel extends ViewModel<TodoState> {
+  private nextId = 1;
+
   constructor() {
-    super({ firstName: "", lastName: "", fullName: "" });
+    super({ todos: [], completedCount: 0, pendingCount: 0 });
   }
 
-  protected prepareState(updatedState: FormState): FormState {
-    return {
-      ...updatedState,
-      fullName: `${updatedState.firstName} ${updatedState.lastName}`.trim(),
-    };
+  add(text: string) {
+    const todos = [
+      ...super.state.todos,
+      { id: this.nextId++, text, completed: false },
+    ];
+    this.updateTodos(todos);
   }
 
-  setFirstName(firstName: string) {
-    super.update({ firstName });
+  toggle(id: number) {
+    const todos = super.state.todos.map((todo) =>
+      todo.id === id ? { ...todo, completed: !todo.completed } : todo,
+    );
+    this.updateTodos(todos);
   }
 
-  setLastName(lastName: string) {
-    super.update({ lastName });
+  private updateTodos(todos: TodoState["todos"]) {
+    super.update({
+      todos,
+      completedCount: todos.filter((t) => t.completed).length,
+      pendingCount: todos.filter((t) => !t.completed).length,
+    });
   }
 }
 
-const form = new FormViewModel();
-form.setFirstName("John");
-form.setLastName("Doe");
-console.log(form.state.fullName); // "John Doe"
+const todoModel = new TodoViewModel();
+todoModel.add("Buy milk");
+todoModel.add("Walk the dog");
+todoModel.toggle(1);
+console.log(todoModel.state.completedCount); // 1
+console.log(todoModel.state.pendingCount); // 1
 ```
 
-This pattern is useful for:
-
-- Computing derived values that depend on multiple state fields
-- Enforcing invariants (e.g., ensuring values stay within bounds)
-- Normalizing state (e.g., trimming strings, sorting arrays)
-
 ## License
 
 MIT License

package/dist/index.d.ts

@@ -75,33 +75,6 @@ declare abstract class ViewModel<S extends object> {
      * ```
      */
     protected update(update: Partial<S>): void;
-    /**
-     * Hook to transform state before it is committed and subscribers are notified.
-     *
-     * Override this method in your subclass to intercept and modify state updates.
-     * This is useful for computing derived values, enforcing invariants, or
-     * normalizing state before it becomes the new state.
-     *
-     * By default, this method returns the input unchanged.
-     *
-     * @param updatedState - The new state that will be committed
-     * @returns The state to commit (can be modified or the same object)
-     *
-     * @example
-     * ```typescript
-     * type FormState = { firstName: string; lastName: string; fullName: string };
-     *
-     * class FormViewModel extends ViewModel<FormState> {
-     *   protected prepareState(updatedState: FormState): FormState {
-     *     return {
-     *       ...updatedState,
-     *       fullName: `${updatedState.firstName} ${updatedState.lastName}`,
-     *     };
-     *   }
-     * }
-     * ```
-     */
-    protected prepareState(updatedState: S): S;
     /**
      * Get the current state.
      *

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=this.prepareState(t)}update(t){this.i=this.prepareState({...this.i,...t}),this.t.forEach(t=>t())}prepareState(t){return t}get state(){return this.i}}export{t as ViewModel};
+class t{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{t as ViewModel};
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/ViewModel.ts"],"sourcesContent":["/**\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 = this.prepareState(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 update - 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(update: Partial<S>) {\n    this._state = this.prepareState({ ...this._state, ...update });\n    this._listeners.forEach((l) => l());\n  }\n\n  /**\n   * Hook to transform state before it is committed and subscribers are notified.\n   *\n   * Override this method in your subclass to intercept and modify state updates.\n   * This is useful for computing derived values, enforcing invariants, or\n   * normalizing state before it becomes the new state.\n   *\n   * By default, this method returns the input unchanged.\n   *\n   * @param updatedState - The new state that will be committed\n   * @returns The state to commit (can be modified or the same object)\n   *\n   * @example\n   * ```typescript\n   * type FormState = { firstName: string; lastName: string; fullName: string };\n   *\n   * class FormViewModel extends ViewModel<FormState> {\n   *   protected prepareState(updatedState: FormState): FormState {\n   *     return {\n   *       ...updatedState,\n   *       fullName: `${updatedState.firstName} ${updatedState.lastName}`,\n   *     };\n   *   }\n   * }\n   * ```\n   */\n  protected prepareState(updatedState: S): S {\n    return updatedState;\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":["ViewModel","subscribe","listener","this","_listeners","add","delete","constructor","initialState","Set","_state","prepareState","update","forEach","l","updatedState","state"],"mappings":"MAkCsBA,EAsBpB,SAAAC,CAAUC,GAER,OADAC,KAAKC,EAAWC,IAAIH,GACb,KACLC,KAAKC,EAAWE,OAAOJ,GAE3B,CAOA,WAAAK,CAAYC,GAjCJL,KAAAC,EAAa,IAAIK,IAkCvBN,KAAKO,EAASP,KAAKQ,aAAaH,EAClC,CAiBU,MAAAI,CAAOA,GACfT,KAAKO,EAASP,KAAKQ,aAAa,IAAKR,KAAKO,KAAWE,IACrDT,KAAKC,EAAWS,QAASC,GAAMA,IACjC,CA4BU,YAAAH,CAAaI,GACrB,OAAOA,CACT,CAOA,SAAIC,GACF,OAAOb,KAAKO,CACd"}
+{"version":3,"file":"index.js","sources":["../src/ViewModel.ts"],"sourcesContent":["/**\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 update - 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(update: Partial<S>) {\n    this._state = { ...this._state, ...update };\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":["ViewModel","subscribe","listener","this","_listeners","add","delete","constructor","initialState","Set","_state","update","forEach","l","state"],"mappings":"MAkCsBA,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,CAAOA,GACfR,KAAKO,EAAS,IAAKP,KAAKO,KAAWC,GACnCR,KAAKC,EAAWQ,QAASC,GAAMA,IACjC,CAOA,SAAIC,GACF,OAAOX,KAAKO,CACd"}

package/package.json

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

package/src/ViewModel.ts

@@ -67,7 +67,7 @@ export abstract class ViewModel<S extends object> {
    * @param initialState - The initial state of the view model
    */
   constructor(initialState: S) {
-    this._state = this.prepareState(initialState);
+    this._state = initialState;
   }
 
   /**
@@ -86,40 +86,10 @@ export abstract class ViewModel<S extends object> {
    * ```
    */
   protected update(update: Partial<S>) {
-    this._state = this.prepareState({ ...this._state, ...update });
+    this._state = { ...this._state, ...update };
     this._listeners.forEach((l) => l());
   }
 
-  /**
-   * Hook to transform state before it is committed and subscribers are notified.
-   *
-   * Override this method in your subclass to intercept and modify state updates.
-   * This is useful for computing derived values, enforcing invariants, or
-   * normalizing state before it becomes the new state.
-   *
-   * By default, this method returns the input unchanged.
-   *
-   * @param updatedState - The new state that will be committed
-   * @returns The state to commit (can be modified or the same object)
-   *
-   * @example
-   * ```typescript
-   * type FormState = { firstName: string; lastName: string; fullName: string };
-   *
-   * class FormViewModel extends ViewModel<FormState> {
-   *   protected prepareState(updatedState: FormState): FormState {
-   *     return {
-   *       ...updatedState,
-   *       fullName: `${updatedState.firstName} ${updatedState.lastName}`,
-   *     };
-   *   }
-   * }
-   * ```
-   */
-  protected prepareState(updatedState: S): S {
-    return updatedState;
-  }
-
   /**
    * Get the current state.
    *