@view-models/react 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Sune Simonsen <sune@we-knowhow.dk>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,132 @@
+# @view-models/react
+
+React integration for [@view-models/core](https://github.com/sunesimonsen/view-models-core).
+
+## Installation
+
+```bash
+npm install @view-models/react @view-models/core
+```
+
+## Usage
+
+The `useModelState` hook allows you to subscribe to state updates from a `ViewModel` instance.
+
+```tsx
+import { ViewModel } from "@view-models/core";
+import { useModelState } from "@view-models/react";
+
+type CounterState = Readonly<{ count: number }>;
+
+class CounterViewModel extends ViewModel<CounterState> {
+  increment = () => {
+    this.update(({ count }) => ({ count: count + 1 }));
+  };
+
+  decrement = () => {
+    this.update(({ count }) => ({ count: count - 1 }));
+  };
+}
+
+const counterModel = new CounterViewModel({ count: 0 });
+
+function Counter() {
+  const { count } = useModelState(counterModel);
+
+  return (
+    <div>
+      <p>Count: {count}</p>
+      <button onClick={counterModel.increment}>+</button>
+      <button onClick={counterModel.decrement}>-</button>
+    </div>
+  );
+}
+```
+
+### Creating view models inside components
+
+When you need to create a view model from within a React component, use `useMemo` to ensure the model is only created once.
+
+It's good practice to provide both a component that creates its own model and a customizable version that accepts a model as a prop:
+
+```tsx
+import { useMemo } from "react";
+import { ViewModel } from "@view-models/core";
+import { useModelState } from "@view-models/react";
+
+type CounterState = Readonly<{ count: number }>;
+
+class CounterViewModel extends ViewModel<CounterState> {
+  increment = () => {
+    this.update(({ count }) => ({ count: count + 1 }));
+  };
+
+  decrement = () => {
+    this.update(({ count }) => ({ count: count - 1 }));
+  };
+}
+
+// Customizable version that accepts a model
+function CustomCounter({ model }: { model: CounterViewModel }) {
+  const { count } = useModelState(model);
+
+  return (
+    <div>
+      <p>Count: {count}</p>
+      <button onClick={model.increment}>+</button>
+      <button onClick={model.decrement}>-</button>
+    </div>
+  );
+}
+
+// Simple version that creates its own model
+function Counter() {
+  const model = useMemo(() => new CounterViewModel({ count: 0 }), []);
+  return <CustomCounter model={model} />;
+}
+```
+
+## 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:**
+
+- 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
+
+## License
+
+MIT License
+
+Copyright (c) 2026 Sune Simonsen <sune@we-knowhow.dk>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./useModelState.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

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

package/dist/index.js

@@ -0,0 +1 @@
+export * from "./useModelState.js";

package/dist/useModelState.d.ts

@@ -0,0 +1,3 @@
+import type { ViewModel, State } from "@view-models/core";
+export declare function useModelState<T extends State>(model: ViewModel<T>): T;
+//# sourceMappingURL=useModelState.d.ts.map

package/dist/useModelState.d.ts.map

@@ -0,0 +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"}

package/dist/useModelState.js

@@ -0,0 +1,4 @@
+import { useSyncExternalStore } from "react";
+export function useModelState(model) {
+    return useSyncExternalStore(model.subscribe.bind(model), () => model.state);
+}

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@view-models/react",
+  "version": "1.0.0",
+  "description": "React integration for @view-models/core",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "react",
+    "hooks",
+    "view-models",
+    "state-management"
+  ],
+  "author": "Sune Simonsen",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sunesimonsen/view-models-react.git"
+  },
+  "bugs": {
+    "url": "https://github.com/sunesimonsen/view-models-react/issues"
+  },
+  "homepage": "https://github.com/sunesimonsen/view-models-react#readme",
+  "engines": {
+    "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",
+    "@vitest/coverage-v8": "^2.1.8",
+    "jsdom": "^26.0.0",
+    "prettier": "^3.4.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "typescript": "^5.7.3",
+    "vitest": "^2.1.8"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from "./useModelState.js";

package/src/useModelState.ts

@@ -0,0 +1,6 @@
+import { useSyncExternalStore } from "react";
+import type { ViewModel, State } from "@view-models/core";
+
+export function useModelState<T extends State>(model: ViewModel<T>): T {
+  return useSyncExternalStore(model.subscribe.bind(model), () => model.state);
+}