@view-models/react 1.1.0 → 1.3.0

package/README.md

@@ -1,5 +1,8 @@
 # @view-models/react
 
+[![CI](https://github.com/sunesimonsen/view-models-react/actions/workflows/ci.yml/badge.svg)](https://github.com/sunesimonsen/view-models-react/actions/workflows/ci.yml)
+[![Bundle Size](https://img.badgesize.io/https://unpkg.com/@view-models/react@latest/dist/index.js?label=gzip&compression=gzip)](https://unpkg.com/@view-models/react@latest/dist/index.js)
+
 React integration for [@view-models/core](https://github.com/sunesimonsen/view-models-core).
 
 ## Installation
@@ -20,11 +23,11 @@ type CounterState = Readonly<{ count: number }>;
 
 class CounterViewModel extends ViewModel<CounterState> {
   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 });
   };
 }
 
@@ -58,11 +61,11 @@ type CounterState = Readonly<{ count: number }>;
 
 class CounterViewModel extends ViewModel<CounterState> {
   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 });
   };
 }
 
@@ -86,26 +89,9 @@ function Counter() {
 }
 ```
 
-## API
-
-### `useModelState<T>(model: ViewModel<T>): T`
-
-A React hook that subscribes to state updates from a ViewModel instance.
-
-**Parameters:**
-
-- `model`: A ViewModel instance to subscribe to
-
-**Returns:**
-
-- The current state of the ViewModel
-
-**Features:**
+## API Reference
 
-- Automatically subscribes to state updates when the component mounts
-- Automatically unsubscribes when the component unmounts
-- Re-renders the component when the ViewModel state changes
-- Multiple components can subscribe to the same ViewModel
+For detailed API documentation, see [docs](./docs).
 
 ## License
 

package/dist/index.d.ts

@@ -1,2 +1,90 @@
-export * from "./useModelState.js";
-//# sourceMappingURL=index.d.ts.map
+/**
+ * Function that gets called when the state changes.
+ *
+ * @template T - The state type
+ * @param state - The new state
+ */
+type ViewModelListener = () => void;
+/**
+ * Interface for a ViewModel that manages state and notifies subscribers of changes.
+ *
+ * ViewModels provide a way to manage component state outside of the component tree,
+ * allowing multiple components to share and react to the same state. They follow
+ * the observer pattern, where components can subscribe to state changes and receive
+ * notifications when updates occur.
+ *
+ * @template T - The type of state managed by this ViewModel
+ *
+ * @example
+ * ```typescript
+ * // Implementing a ViewModel
+ * class CounterViewModel extends ViewModel<{ count: number }> {
+ *   increment = () => super.update({ count: super.state.count + 1 });
+ *   decrement = () => super.update(({ count: super.state.count - 1  }));
+ * }
+ *
+ * // Using in a component
+ * const counterModel = new CounterViewModel({ count: 0 });
+ * const { count } = useModelState(counterModel);
+ * ```
+ */
+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 = () => super.update({ count: super.state.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>
+ *   );
+ * }
+ * ```
+ */
+declare function useModelState<T>(model: ViewModel<T>): T;
+
+export { useModelState };
+export type { ViewModel, ViewModelListener };

package/dist/index.js

@@ -1 +1,2 @@
-export * from "./useModelState.js";
+import{useSyncExternalStore as r}from"react";function t(t){return r(t.subscribe.bind(t),()=>t.state)}export{t as useModelState};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/useModelState.ts"],"sourcesContent":["import { useSyncExternalStore } from \"react\";\n\n/**\n * Function that gets called when the state changes.\n *\n * @template T - The state type\n * @param state - The new state\n */\nexport type ViewModelListener = () => void;\n\n/**\n * Interface for a ViewModel that manages state and notifies subscribers of changes.\n *\n * ViewModels provide a way to manage component state outside of the component tree,\n * allowing multiple components to share and react to the same state. They follow\n * the observer pattern, where components can subscribe to state changes and receive\n * notifications when updates occur.\n *\n * @template T - The type of state managed by this ViewModel\n *\n * @example\n * ```typescript\n * // Implementing a ViewModel\n * class CounterViewModel extends ViewModel<{ count: number }> {\n *   increment = () => super.update({ count: super.state.count + 1 });\n *   decrement = () => super.update(({ count: super.state.count - 1  }));\n * }\n *\n * // Using in a component\n * const counterModel = new CounterViewModel({ count: 0 });\n * const { count } = useModelState(counterModel);\n * ```\n */\nexport interface ViewModel<T> {\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\n  /**\n   * Get the current state.\n   *\n   * @returns The current state\n   */\n  get state(): T;\n}\n\n/**\n * A React hook that subscribes a component to a ViewModel's state updates.\n *\n * This hook connects a React component to a ViewModel instance, automatically\n * subscribing to state changes and triggering re-renders when the state updates.\n *\n * @template T - The state type, which must extend the State interface\n * @param model - The ViewModel instance to subscribe to\n * @returns The current state from the ViewModel\n *\n * @example\n * ```tsx\n * class CounterViewModel extends ViewModel<{ count: number }> {\n *   increment = () => super.update({ count: super.state.count + 1 });\n * }\n *\n * function Counter() {\n *   const counterModel = useMemo(() => new CounterViewModel({ count: 0 }), []);\n *   const { count } = useModelState(counterModel);\n *\n *   return (\n *     <div>\n *       <p>Count: {count}</p>\n *       <button onClick={counterModel.increment}>+</button>\n *     </div>\n *   );\n * }\n * ```\n */\nexport function useModelState<T>(model: ViewModel<T>): T {\n  return useSyncExternalStore(model.subscribe.bind(model), () => model.state);\n}\n"],"names":["useModelState","model","useSyncExternalStore","subscribe","bind","state"],"mappings":"6CA2FM,SAAUA,EAAiBC,GAC/B,OAAOC,EAAqBD,EAAME,UAAUC,KAAKH,GAAQ,IAAMA,EAAMI,MACvE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@view-models/react",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "React integration for @view-models/core",
   "type": "module",
   "main": "./dist/index.js",
@@ -16,13 +16,15 @@
     "src"
   ],
   "scripts": {
-    "build": "tsc",
+    "clean": "rm -rf dist",
+    "build": "npm run clean && rollup -c",
     "typecheck": "tsc --noEmit",
     "test": "vitest run",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
     "format": "prettier --write .",
     "format:check": "prettier --check .",
+    "docs": "typedoc && npm run format",
     "prepublishOnly": "npm run build"
   },
   "keywords": [
@@ -45,18 +47,24 @@
     "node": ">=18.0.0"
   },
   "peerDependencies": {
-    "@view-models/core": "^1.1.0",
     "react": ">=17.0.0"
   },
   "devDependencies": {
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.3.0",
     "@testing-library/react": "^16.1.0",
     "@types/react": "^18.3.18",
-    "@view-models/core": "^1.1.0",
+    "@view-models/core": "^3.0.0",
     "@vitest/coverage-v8": "^2.1.8",
     "jsdom": "^26.0.0",
     "prettier": "^3.4.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "rollup": "^4.57.0",
+    "rollup-plugin-dts": "^6.3.0",
+    "tslib": "^2.8.1",
+    "typedoc": "^0.28.16",
+    "typedoc-plugin-markdown": "^4.9.0",
     "typescript": "^5.7.3",
     "vitest": "^2.1.8"
   },

package/src/useModelState.ts

@@ -1,5 +1,64 @@
 import { useSyncExternalStore } from "react";
-import type { ViewModel, State } from "@view-models/core";
+
+/**
+ * Function that gets called when the state changes.
+ *
+ * @template T - The state type
+ * @param state - The new state
+ */
+export type ViewModelListener = () => void;
+
+/**
+ * Interface for a ViewModel that manages state and notifies subscribers of changes.
+ *
+ * ViewModels provide a way to manage component state outside of the component tree,
+ * allowing multiple components to share and react to the same state. They follow
+ * the observer pattern, where components can subscribe to state changes and receive
+ * notifications when updates occur.
+ *
+ * @template T - The type of state managed by this ViewModel
+ *
+ * @example
+ * ```typescript
+ * // Implementing a ViewModel
+ * class CounterViewModel extends ViewModel<{ count: number }> {
+ *   increment = () => super.update({ count: super.state.count + 1 });
+ *   decrement = () => super.update(({ count: super.state.count - 1  }));
+ * }
+ *
+ * // Using in a component
+ * const counterModel = new CounterViewModel({ count: 0 });
+ * const { count } = useModelState(counterModel);
+ * ```
+ */
+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.
@@ -14,7 +73,7 @@ import type { ViewModel, State } from "@view-models/core";
  * @example
  * ```tsx
  * class CounterViewModel extends ViewModel<{ count: number }> {
- *   increment = () => this.update(({ count }) => ({ count: count + 1 }));
+ *   increment = () => super.update({ count: super.state.count + 1 });
  * }
  *
  * function Counter() {
@@ -30,6 +89,6 @@ import type { ViewModel, State } from "@view-models/core";
  * }
  * ```
  */
-export function useModelState<T extends State>(model: ViewModel<T>): T {
+export function useModelState<T>(model: ViewModel<T>): T {
   return useSyncExternalStore(model.subscribe.bind(model), () => model.state);
 }

package/dist/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC"}

package/dist/useModelState.d.ts

@@ -1,32 +0,0 @@
-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 +0,0 @@
-{"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,33 +0,0 @@
-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);
-}