@view-models/react 1.0.0 → 1.2.0

package/dist/useModelState.d.ts

@@ -1,3 +1,65 @@
-import type { ViewModel, State } from "@view-models/core";
-export declare function useModelState<T extends State>(model: ViewModel<T>): T;
+/**
+ * Function that gets called when the state changes.
+ *
+ * @template T - The state type
+ * @param state - The new state
+ */
+export type ViewModelListener = () => void;
+export interface ViewModel<T> {
+    /**
+     * 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;
+    /**
+     * Get the current state.
+     *
+     * @returns The current state
+     */
+    get state(): T;
+}
+/**
+ * A React hook that subscribes a component to a ViewModel's state updates.
+ *
+ * This hook connects a React component to a ViewModel instance, automatically
+ * subscribing to state changes and triggering re-renders when the state updates.
+ *
+ * @template T - The state type, which must extend the State interface
+ * @param model - The ViewModel instance to subscribe to
+ * @returns The current state from the ViewModel
+ *
+ * @example
+ * ```tsx
+ * class CounterViewModel extends ViewModel<{ count: number }> {
+ *   increment = () => this.update(({ count }) => ({ count: count + 1 }));
+ * }
+ *
+ * function Counter() {
+ *   const counterModel = useMemo(() => new CounterViewModel({ count: 0 }), []);
+ *   const { count } = useModelState(counterModel);
+ *
+ *   return (
+ *     <div>
+ *       <p>Count: {count}</p>
+ *       <button onClick={counterModel.increment}>+</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function useModelState<T>(model: ViewModel<T>): T;
 //# sourceMappingURL=useModelState.d.ts.map

package/dist/useModelState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useModelState.d.ts","sourceRoot":"","sources":["../src/useModelState.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1D,wBAAgB,aAAa,CAAC,CAAC,SAAS,KAAK,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAErE"}
+{"version":3,"file":"useModelState.d.ts","sourceRoot":"","sources":["../src/useModelState.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,MAAM,MAAM,iBAAiB,GAAG,MAAM,IAAI,CAAC;AAE3C,MAAM,WAAW,SAAS,CAAC,CAAC;IAC1B;;;;;;;;;;;;;;;;;OAiBG;IACH,SAAS,CAAC,QAAQ,EAAE,iBAAiB,GAAG,MAAM,IAAI,CAAC;IAEnD;;;;OAIG;IACH,IAAI,KAAK,IAAI,CAAC,CAAC;CAChB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,aAAa,CAAC,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAEvD"}

package/dist/useModelState.js

@@ -1,4 +1,33 @@
 import { useSyncExternalStore } from "react";
+/**
+ * A React hook that subscribes a component to a ViewModel's state updates.
+ *
+ * This hook connects a React component to a ViewModel instance, automatically
+ * subscribing to state changes and triggering re-renders when the state updates.
+ *
+ * @template T - The state type, which must extend the State interface
+ * @param model - The ViewModel instance to subscribe to
+ * @returns The current state from the ViewModel
+ *
+ * @example
+ * ```tsx
+ * class CounterViewModel extends ViewModel<{ count: number }> {
+ *   increment = () => this.update(({ count }) => ({ count: count + 1 }));
+ * }
+ *
+ * function Counter() {
+ *   const counterModel = useMemo(() => new CounterViewModel({ count: 0 }), []);
+ *   const { count } = useModelState(counterModel);
+ *
+ *   return (
+ *     <div>
+ *       <p>Count: {count}</p>
+ *       <button onClick={counterModel.increment}>+</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
 export function useModelState(model) {
     return useSyncExternalStore(model.subscribe.bind(model), () => model.state);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@view-models/react",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "React integration for @view-models/core",
   "type": "module",
   "main": "./dist/index.js",
@@ -45,13 +45,12 @@
     "node": ">=18.0.0"
   },
   "peerDependencies": {
-    "@view-models/core": "^1.1.0",
     "react": ">=17.0.0"
   },
   "devDependencies": {
     "@testing-library/react": "^16.1.0",
     "@types/react": "^18.3.18",
-    "@view-models/core": "^1.1.0",
+    "@view-models/core": "^2.0.0",
     "@vitest/coverage-v8": "^2.1.8",
     "jsdom": "^26.0.0",
     "prettier": "^3.4.2",

package/src/useModelState.ts

@@ -1,6 +1,71 @@
 import { useSyncExternalStore } from "react";
-import type { ViewModel, State } from "@view-models/core";
 
-export function useModelState<T extends State>(model: ViewModel<T>): T {
+/**
+ * Function that gets called when the state changes.
+ *
+ * @template T - The state type
+ * @param state - The new state
+ */
+export type ViewModelListener = () => void;
+
+export interface ViewModel<T> {
+  /**
+   * 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;
+
+  /**
+   * Get the current state.
+   *
+   * @returns The current state
+   */
+  get state(): T;
+}
+
+/**
+ * A React hook that subscribes a component to a ViewModel's state updates.
+ *
+ * This hook connects a React component to a ViewModel instance, automatically
+ * subscribing to state changes and triggering re-renders when the state updates.
+ *
+ * @template T - The state type, which must extend the State interface
+ * @param model - The ViewModel instance to subscribe to
+ * @returns The current state from the ViewModel
+ *
+ * @example
+ * ```tsx
+ * class CounterViewModel extends ViewModel<{ count: number }> {
+ *   increment = () => this.update(({ count }) => ({ count: count + 1 }));
+ * }
+ *
+ * function Counter() {
+ *   const counterModel = useMemo(() => new CounterViewModel({ count: 0 }), []);
+ *   const { count } = useModelState(counterModel);
+ *
+ *   return (
+ *     <div>
+ *       <p>Count: {count}</p>
+ *       <button onClick={counterModel.increment}>+</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function useModelState<T>(model: ViewModel<T>): T {
   return useSyncExternalStore(model.subscribe.bind(model), () => model.state);
 }