@view-models/react 1.0.0 → 1.1.0

package/dist/useModelState.d.ts

@@ -1,3 +1,32 @@
 import type { ViewModel, State } from "@view-models/core";
+/**
+ * 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 extends State>(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":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,KAAK,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAErE"}

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.1.0",
   "description": "React integration for @view-models/core",
   "type": "module",
   "main": "./dist/index.js",

package/src/useModelState.ts

@@ -1,6 +1,35 @@
 import { useSyncExternalStore } from "react";
 import type { ViewModel, State } from "@view-models/core";
 
+/**
+ * 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 extends State>(model: ViewModel<T>): T {
   return useSyncExternalStore(model.subscribe.bind(model), () => model.state);
 }