@view-models/preact 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/preact
+
+Preact integration for [@view-models/core](https://github.com/sunesimonsen/view-models-core).
+
+## Installation
+
+```bash
+npm install @view-models/preact @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/preact";
+
+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 Preact 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 "preact/hooks";
+import { ViewModel } from "@view-models/core";
+import { useModelState } from "@view-models/preact";
+
+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 Preact 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,32 @@
+import type { ViewModel, State } from "@view-models/core";
+/**
+ * A Preact hook that subscribes a component to a ViewModel's state updates.
+ *
+ * This hook connects a Preact 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

@@ -0,0 +1 @@
+{"version":3,"file":"useModelState.d.ts","sourceRoot":"","sources":["../src/useModelState.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAG1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,KAAK,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAYrE"}

package/dist/useModelState.js

@@ -0,0 +1,37 @@
+import { useEffect, useState } from "preact/hooks";
+/**
+ * A Preact hook that subscribes a component to a ViewModel's state updates.
+ *
+ * This hook connects a Preact 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) {
+    const [state, setState] = useState(model.state);
+    useEffect(() => model.subscribe((newState) => {
+        setState(newState);
+    }), [model]);
+    return state;
+}

package/dist/useSyncExternalStore.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Custom implementation of useSyncExternalStore for Preact.
+ *
+ * This hook subscribes to an external store and returns its current state.
+ * It ensures that the component re-renders when the store's state changes.
+ *
+ * @param subscribe - Function to subscribe to the store. Should return an unsubscribe function.
+ * @param getSnapshot - Function that returns the current state of the store.
+ * @returns The current state from the store.
+ */
+export declare function useSyncExternalStore<T>(subscribe: (callback: () => void) => () => void, getSnapshot: () => T): T;
+//# sourceMappingURL=useSyncExternalStore.d.ts.map

package/dist/useSyncExternalStore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSyncExternalStore.d.ts","sourceRoot":"","sources":["../src/useSyncExternalStore.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,EACpC,SAAS,EAAE,CAAC,QAAQ,EAAE,MAAM,IAAI,KAAK,MAAM,IAAI,EAC/C,WAAW,EAAE,MAAM,CAAC,GACnB,CAAC,CA2CH"}

package/dist/useSyncExternalStore.js

@@ -0,0 +1,48 @@
+import { useState, useEffect } from "preact/hooks";
+/**
+ * Custom implementation of useSyncExternalStore for Preact.
+ *
+ * This hook subscribes to an external store and returns its current state.
+ * It ensures that the component re-renders when the store's state changes.
+ *
+ * @param subscribe - Function to subscribe to the store. Should return an unsubscribe function.
+ * @param getSnapshot - Function that returns the current state of the store.
+ * @returns The current state from the store.
+ */
+export function useSyncExternalStore(subscribe, getSnapshot) {
+    // Store the snapshot in an object to enable proper equality checks
+    // This allows us to use Object.is in the setState updater
+    const [state, setState] = useState(() => ({
+        snapshot: getSnapshot(),
+    }));
+    useEffect(() => {
+        // Track if the component is still mounted to prevent setState on unmounted component
+        let isMounted = true;
+        // Callback invoked when the external store updates
+        const handleUpdate = () => {
+            if (!isMounted)
+                return;
+            const newSnapshot = getSnapshot();
+            // Only update state if the snapshot has changed
+            // This prevents unnecessary re-renders
+            setState((prev) => {
+                if (Object.is(prev.snapshot, newSnapshot)) {
+                    return prev;
+                }
+                return { snapshot: newSnapshot };
+            });
+        };
+        // Subscribe to the external store
+        const unsubscribe = subscribe(handleUpdate);
+        // Check for updates that may have occurred during subscription
+        // This handles the race condition where the store updates between
+        // the initial render and the effect running
+        handleUpdate();
+        // Cleanup: mark as unmounted and unsubscribe
+        return () => {
+            isMounted = false;
+            unsubscribe();
+        };
+    }, [subscribe, getSnapshot]);
+    return state.snapshot;
+}

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@view-models/preact",
+  "version": "1.0.0",
+  "description": "Preact 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": [
+    "preact",
+    "hooks",
+    "view-models",
+    "state-management"
+  ],
+  "author": "Sune Simonsen",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sunesimonsen/view-models-preact.git"
+  },
+  "bugs": {
+    "url": "https://github.com/sunesimonsen/view-models-preact/issues"
+  },
+  "homepage": "https://github.com/sunesimonsen/view-models-preact#readme",
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "peerDependencies": {
+    "@view-models/core": "^1.1.0",
+    "preact": ">=10.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/preact": "^3.2.4",
+    "@view-models/core": "^1.1.0",
+    "@vitest/coverage-v8": "^2.1.8",
+    "jsdom": "^26.0.0",
+    "preact": "^10.26.1",
+    "prettier": "^3.4.2",
+    "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,45 @@
+import type { ViewModel, State } from "@view-models/core";
+import { useEffect, useState } from "preact/hooks";
+
+/**
+ * A Preact hook that subscribes a component to a ViewModel's state updates.
+ *
+ * This hook connects a Preact 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 {
+  const [state, setState] = useState<T>(model.state);
+
+  useEffect(
+    () =>
+      model.subscribe((newState) => {
+        setState(newState);
+      }),
+    [model],
+  );
+
+  return state;
+}