react-better-model 0.2.2 → 1.0.0-beta

package/readme.md

@@ -1,125 +1,232 @@
-React Better Model
-===
-Easy way to share state and events between components and services.
+# React Better Model
 
-Installation:
-===
+Tiny, class-based models for React with a ruthless focus on simplicity: define a class, call `createModel`, and use a handful of hooks. Everything stays TypeScript-friendly and lets you extend behavior through your own model methods and events.
+
+- API reference: see [Docs/API.md](Docs/API.md)
+- Example app: Todo demo at https://github.com/ingvardm/react-better-model-todo-example
+- TL;DR: see [Docs/TLDR.md](Docs/TLDR.md)
+
+## Installation
 ```bash
 npm i react-better-model
 ```
-or
 ```bash
 yarn add react-better-model
 ```
+```bash
+pnpm add react-better-model
+```
 
-Usage
-===
-Minimal working example
+## Minimal example
 ```ts
-import { useCallback } from "react"
-import { createModel, Model } from "react-better-model"
+// DiceModel.ts
+import { Model, createModel } from 'react-better-model'
+
+class DiceModel extends Model {
+  constructor() {
+    super({ lastRoll: 1 })
+  }
+
+  roll = () => {
+    const next = 1 + Math.floor(Math.random() * 6)
+    this.setState({ lastRoll: next })
+  }
+}
+
+export const {
+  Provider: DiceProvider,
+  useModel: useDice,
+} = createModel(DiceModel)
+```
 
-// initial state
-const helloWorldModelInitialState = {
-	count: 0,
+```tsx
+// RollButton.tsx
+import React from 'react'
+import { useDice } from './DiceModel'
+
+export function RollButton() {
+  const model = useDice()
+
+  return (
+    <button onClick={model.roll}>
+      Roll the die
+    </button>
+  )
 }
+```
 
-// model state type (usefull later)
-type HelloWorldModelState = typeof helloWorldModelInitialState
+```tsx
+// RollResult.tsx
+import React from 'react'
+import { useDice } from './DiceModel'
 
-// model event types (optional, if you want to use events)
-type HelloWorldModelEvents = {
-	click: number
+export function RollResult() {
+  const model = useDice()
+  const [value] = model.useState('lastRoll')
+  return <p>Last roll: {value}</p>
 }
+```
+
+```tsx
+// root component
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+import { RollButton } from './RollButton'
+import { RollResult } from './RollResult'
+import { DiceProvider } from './DiceModel'
+
+createRoot(document.getElementById('root')!).render(
+  <DiceProvider>
+    <RollButton />
+    <RollResult />
+  </DiceProvider>
+)
+```
 
-// create your model class
-class HelloWorldModelClass extends Model<HelloWorldModelState, HelloWorldModelEvents> {
-	constructor(state = helloWorldModelInitialState){
-		super(state)
-	}
+## State access and updates
+- `useState('key')`: narrow subscription to one top-level key. Returns `[value, setValue]`; `setValue` skips updates when the value is unchanged.
+- `useMapper(state => derived)`: derive values from one or many keys. The mapper is inspected to track which keys it reads; re-runs only when those change.
+- `setState(patch)`: merge-style update for multiple keys; use inside model class methods to express actions.
+- `reduce(draft => patch)`: compute the next state from a copy of the current state in one place.
+- Class methods are your actions: declare methods on the model that call `setState`/`reduce` and call them from components (or events) to keep mutation logic centralized.
+
+```ts
+// inside a component that has access to the model
+const [count, setCount] = model.useState('count') // read + update a single key
+
+const doubled = model.useMapper((s) => s.count * 2) // derive from count; runs only when count changes
+
+// inside the model class
+increment = () => this.setState({ count: this.state.count + 1 }) // merge update
+
+bumpBoth = () => this.setState({ count: this.state.count + 1, bonus: (this.state as any).bonus + 1 }) // multi-key patch
+
+boost = () => this.reduce((state) => ({ count: state.count + 10 })) // compute next state from a draft
+```
+
+## Provider control
+`createModel` gives you `useModelInstance` to spin up a model inside the provider scope and keep a stable reference without extra wiring.
+
+```tsx
+// App.tsx
+import React from 'react'
+import { DiceProvider, useModelInstance } from './DiceModel'
+
+function AppBody() {
+  // Build the instance once; you can pass initial state if needed.
+  const instance = useModelInstance({ lastRoll: 3 })
+
+  return (
+    <DiceProvider value={instance}>
+      {/* children that call useDice() */}
+    </DiceProvider>
+  )
 }
+```
+Use this when you want to control the model from the root (e.g., wire logging, external events) while still letting descendants consume it via `useModel`.
+
+## Events
+Declare your events on the model type, dispatch them from class methods, and subscribe/dispatch from components with `useEvent`.
 
-// create object that will contain hooks and refferences
-// that you can use in your code
-const HWM = createModel(HelloWorldModelClass)
-
-// component with button that listens to and sets 'count' value
-const ButtonAdd = HWM.withModel(({ model, ...props }) => {
-	const [count, setCount] = model.useState('count')
-
-	const onClick = useCallback(() => {
-		setCount(count + 1)
-	}, [count])
-
-	// this is just an example of listening and setting value.
-	// a better way (without listening) would be:
-	// const onClick = useCallback(() => {
-	// 	model.reduce((state) => {
-	// 		return {
-	// 			count: state.count + 1
-	// 		}
-	// 	})
-	// }, [])
-
-	return <button onClick={onClick}>increment count</button>
-})
-
-// Button that uses an event dispatcher
-const ButtonClickEvent = HWM.withModel(({ model, ...props }) => {
-	const [count] = model.useState('count')
-
-	const dispatchClearEvent = model.useEvent('click')
-
-	const clear = useCallback(() => {
-		dispatchClearEvent(count)
-	}, [count])
-
-	return <button onClick={clear}>click to dispatch 'click' event</button>
-})
-
-// label with the current count value
-const CountLabel = HWM.withModel(({ model, ...props }) => {
-	const [count] = model.useState('count')
-
-	return <p>current count is: {count}</p>
-})
-
-// convinience component to handle model events in one place
-const EventHandler = HWM.withModel(({ model, ...props }) => {
-	const handleClickEvent = useCallback((x: HelloWorldModelEvents['click']) => {
-		alert(`clicked ${x} times`)
-	}, [])
-
-	model.useEvent('click', handleClickEvent)
-
-	return null
-})
-
-// the widget itself wrapped in HelloWorldModel Provider
-// any consumers (HWM.withModel(...)) rendered here
-// are inside the same context.
-// they can still use other models via useState hook
-// created with createModel()
-export const HelloWorldWidget = HWM.withProvider(({
-	model,
-	...props
-}) => {
-	return <>
-		<EventHandler/>     {/* Event handling component */}
-		<CountLabel />      {/* Label that displays updated count */}
-		<ButtonAdd/>        {/* Button that increases the count */}
-		<ButtonClickEvent/> {/* Button that dispatches 'click' event */}
-	</>
-})
+```ts
+// ChatModel.ts
+import { Model, createModel } from 'react-better-model'
+
+type ChatEvents = { 'message:new': { id: string; text: string } }
+
+class ChatModel extends Model<ChatEvents> {
+  constructor() {
+    super({ messages: [] as { id: string; text: string }[] })
+  }
+
+  addMessage = (text: string) => {
+    const msg = { id: '1234', text }
+    this.setState({ messages: [...this.state.messages, msg] })
+    this.dispatch('message:new', msg)
+  }
+}
+
+export const { Provider: ChatProvider, useModel: useChat } = createModel(ChatModel)
 ```
 
-Documentation
-===
-[Model creation](model_creation.md)<br>
-[Global models](global_model.md)<br>
-[State](state.md)<br>
-[Events](events.md)<br>
+```tsx
+// NewMessageForm.tsx (dispatch only)
+import React, { useState } from 'react'
+import { useChat } from './ChatModel'
+
+export function NewMessageForm() {
+  const chat = useChat()
+  const send = chat.useEvent('message:new') // dispatcher only
+  const [text, setText] = useState('')
+
+  return (
+    <form onSubmit={(e) => { e.preventDefault(); chat.addMessage(text); send({ id: 'ui', text }); setText('') }}>
+      <input value={text} onChange={(e) => setText(e.target.value)} />
+      <button type="submit">Send</button>
+    </form>
+  )
+}
+```
+
+```tsx
+// MessageLogger.tsx (subscribe + optional dispatch)
+import React, { useEffect } from 'react'
+import { useChat } from './ChatModel'
+
+export function MessageLogger() {
+  const chat = useChat()
+  const emit = chat.useEvent('message:new', (msg) => {
+    console.log('New message', msg)
+  })
 
-Example
-===
-[Example project](https://github.com/ingvardm/react-model-hooks-example)
+  // emit can still dispatch if you need to trigger elsewhere:
+  useEffect(() => {
+    emit({ id: 'system', text: 'logger mounted' })
+  }, [emit])
+
+  return null
+}
+```
+
+## Global models (optional)
+Some state is truly global (e.g., auth/session). You can instantiate a model once and export it without a Provider.
+
+```ts
+// authModel.ts
+import { Model } from 'react-better-model'
+
+class AuthModel extends Model {
+  constructor() {
+    super({ user: null as null | { id: string; name: string } })
+  }
+
+  setUser = (user: AuthModel['state']['user']) => this.setState({ user })
+}
+
+export const authModel = new AuthModel()
+```
+
+```tsx
+// Nav.tsx
+import React from 'react'
+import { authModel } from './authModel'
+
+export function Nav() {
+  const [user] = authModel.useState('user')
+  return <div>{user ? `Hi, ${user.name}` : 'Sign in'}</div>
+}
+```
+You still get typed hooks, but you skip a Provider when the model truly lives at app scope.
+
+## Patterns & pitfalls
+- Prefer immutable top-level updates: replace keys instead of mutating nested structures so subscriptions fire. e.g., `setState({ todos: todos.map(...) })`.
+- Keep derived data out of state: compute with `useMapper` or on the fly in model methods.
+- Class methods are your API surface: call them from components instead of mutating state directly.
+- Scope models with Providers: make multiple instances for different parts of the tree instead of sharing global singletons.
+- Event names should be literal and typed (e.g., `'clear-todos'`), and payloads should be minimal.
+
+## Developing this library
+- Install dependancies: `pnpm install`
+- Build: `pnpm run build` runs TypeScript and emits to `lib/`.
+- Tests: `pnpm run test` (ts-jest, jsdom).
+- Docs live in `Docs/` and the root README; keep API changes reflected there.

package/lib/Model.d.ts

@@ -1,23 +0,0 @@
-import { Sub, Subs } from './types';
-export declare class Model<S = {}, E = {}> {
-    state: S;
-    events: E;
-    protected initialState: S;
-    protected subs: Subs<S>;
-    protected listeners: Subs<E>;
-    protected updateSingleSubscriber: <K extends keyof S>(k: K, v: S[K]) => void;
-    protected updateSubscribers: (delta: Partial<S>) => void;
-    protected updateEventListeners: <K extends keyof E>(k: K, data?: (E[K] extends undefined ? never : E[K]) | undefined) => void;
-    constructor(state: S, events?: E);
-    onStateChange: <K extends keyof S>(k: K, cb: Sub<S>) => () => void;
-    setState: (delta: Partial<S>) => void;
-    setValue: <K extends keyof S>(key: K, value: S[K]) => void;
-    reduce: (reducer: (state: S) => Partial<S>) => void;
-    reset: () => void;
-    onEvent: <K extends keyof E>(k: K, cb: Sub<E>) => () => void;
-    dispatch: <K extends keyof E>(key: K, data?: (E[K] extends undefined ? never : E[K]) | undefined) => void;
-    awaitEvent: <K extends keyof E>(key: K) => Promise<E[K]>;
-    useState: <K extends keyof S>(key: K) => [this["state"][K], (data: this["state"][K]) => void];
-    useEvent: <K extends keyof E>(ns: K, cb?: Sub<E, K> | undefined) => (data?: (E[K] extends undefined ? never : E[K]) | undefined) => void;
-}
-//# sourceMappingURL=Model.d.ts.map

package/lib/Model.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Model.d.ts","sourceRoot":"","sources":["../src/Model.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAEnC,qBAAa,KAAK,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,EAAE;IA0BxB,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,CAAC;IA1BjB,SAAS,CAAC,YAAY,IAAA;IACtB,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,CAAY;IACnC,SAAS,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,CAAY;IAGxC,SAAS,CAAC,sBAAsB,6CAE/B;IAED,SAAS,CAAC,iBAAiB,UAAW,QAAQ,CAAC,CAAC,UAQ/C;IAED,SAAS,CAAC,oBAAoB,gGAE7B;gBAIO,KAAK,EAAE,CAAC,EACR,MAAM,GAAE,CAAW;IAM3B,aAAa,gCAAiC,IAAI,CAAC,CAAC,gBAanD;IAED,QAAQ,UAAW,QAAQ,CAAC,CAAC,UAO5B;IAED,QAAQ,mDAIP;IAED,MAAM,oBAAqB,CAAC,KAAK,QAAQ,CAAC,CAAC,UAI1C;IAED,KAAK,aAEJ;IAID,OAAO,gCAAiC,IAAI,CAAC,CAAC,gBAa7C;IAED,QAAQ,kGAEP;IAED,UAAU,+CAOT;IAID,QAAQ,sFAEP;IAED,QAAQ,iIAEP;CAED"}

package/lib/Model.js

@@ -1,108 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Model = void 0;
-var event_hooks_1 = require("./hooks/event-hooks");
-var state_hooks_1 = require("./hooks/state-hooks");
-var Model = /** @class */ (function () {
-    //#endregion updaters
-    function Model(state, events) {
-        var _this = this;
-        if (events === void 0) { events = {}; }
-        this.state = state;
-        this.events = events;
-        this.subs = new Map();
-        this.listeners = new Map();
-        //#region updaters
-        this.updateSingleSubscriber = function (k, v) {
-            var _a;
-            (_a = _this.subs.get(k)) === null || _a === void 0 ? void 0 : _a.forEach(function (cb) { return cb(v); });
-        };
-        this.updateSubscribers = function (delta) {
-            var keyVals = Object.entries(delta);
-            for (var _i = 0, _a = keyVals; _i < _a.length; _i++) {
-                var _b = _a[_i], key = _b[0], val = _b[1];
-                if (_this.subs.has(key)) {
-                    _this.updateSingleSubscriber(key, val);
-                }
-            }
-        };
-        this.updateEventListeners = function (k, data) {
-            var _a;
-            (_a = _this.listeners.get(k)) === null || _a === void 0 ? void 0 : _a.forEach(function (cb) { return cb(data); });
-        };
-        //#region state
-        this.onStateChange = function (k, cb) {
-            var keySubs = _this.subs.get(k);
-            if (!keySubs) {
-                keySubs = new Set();
-                _this.subs.set(k, keySubs);
-            }
-            keySubs.add(cb);
-            return function () {
-                keySubs.delete(cb);
-            };
-        };
-        this.setState = function (delta) {
-            _this.state = __assign(__assign({}, _this.state), delta);
-            _this.updateSubscribers(delta);
-        };
-        this.setValue = function (key, value) {
-            _this.state[key] = value;
-            _this.updateSingleSubscriber(key, value);
-        };
-        this.reduce = function (reducer) {
-            var nextState = reducer(_this.state);
-            _this.setState(nextState);
-        };
-        this.reset = function () {
-            _this.setState(_this.initialState);
-        };
-        //#endregion state
-        //#region events
-        this.onEvent = function (k, cb) {
-            var nsListeners = _this.listeners.get(k);
-            if (!nsListeners) {
-                nsListeners = new Set();
-                _this.listeners.set(k, nsListeners);
-            }
-            nsListeners.add(cb);
-            return function () {
-                nsListeners.delete(cb);
-            };
-        };
-        this.dispatch = function (key, data) {
-            _this.updateEventListeners(key, data);
-        };
-        this.awaitEvent = function (key) {
-            return new Promise(function (resolve) {
-                var remove = _this.onEvent(key, function (data) {
-                    remove();
-                    resolve(data);
-                });
-            });
-        };
-        //#endregion events
-        //#region instance hooks
-        this.useState = function (key) {
-            return (0, state_hooks_1.useModelInstanceState)(_this, key);
-        };
-        this.useEvent = function (ns, cb) {
-            return (0, event_hooks_1.useModelInstanceEvent)(_this, ns, cb);
-        };
-        this.initialState = __assign({}, state);
-    }
-    return Model;
-}());
-exports.Model = Model;
-//# sourceMappingURL=Model.js.map

package/lib/Model.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Model.js","sourceRoot":"","sources":["../src/Model.ts"],"names":[],"mappings":"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"}

package/lib/hooks/event-hooks.d.ts

@@ -1,6 +0,0 @@
-import { Context } from 'react';
-import { Model } from '../Model';
-import { Sub } from '../types';
-export declare function useModelInstanceEvent<K extends keyof M['events'], D extends M['events'], M extends Model<M['state'], M['events']>>(viewModel: M, ns: K, cb?: Sub<D, K>): (data?: (D[K] extends undefined ? never : D[K]) | undefined) => void;
-export declare function useModelCtxEvent<K extends keyof M['events'], D extends M['events'], M extends Model<M['state'], M['events']>>(ctx: Context<M>, ns: K, cb?: (eventData: D[K]) => void): (data?: (D[K] extends undefined ? never : D[K]) | undefined) => void;
-//# sourceMappingURL=event-hooks.d.ts.map

package/lib/hooks/event-hooks.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"event-hooks.d.ts","sourceRoot":"","sources":["../../src/hooks/event-hooks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAyB,MAAM,OAAO,CAAA;AAEtD,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAE9B,wBAAgB,qBAAqB,CAAC,CAAC,SAAS,MAAM,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,SAAS,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EACjI,SAAS,EAAE,CAAC,EACZ,EAAE,EAAE,CAAC,EACL,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,wEASd;AAED,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,SAAS,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAC5H,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC,EACf,EAAE,EAAE,CAAC,EACL,EAAE,CAAC,EAAE,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,wEAK9B"}

package/lib/hooks/event-hooks.js

@@ -1,19 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useModelCtxEvent = exports.useModelInstanceEvent = void 0;
-var react_1 = require("react");
-function useModelInstanceEvent(viewModel, ns, cb) {
-    (0, react_1.useEffect)(function () {
-        if (cb) {
-            return viewModel.onEvent(ns, cb);
-        }
-    }, [cb]);
-    return function (data) { return viewModel.dispatch(ns, data); };
-}
-exports.useModelInstanceEvent = useModelInstanceEvent;
-function useModelCtxEvent(ctx, ns, cb) {
-    var viewModel = (0, react_1.useContext)(ctx);
-    return useModelInstanceEvent(viewModel, ns, cb);
-}
-exports.useModelCtxEvent = useModelCtxEvent;
-//# sourceMappingURL=event-hooks.js.map

package/lib/hooks/event-hooks.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"event-hooks.js","sourceRoot":"","sources":["../../src/hooks/event-hooks.ts"],"names":[],"mappings":";;;AAAA,+BAAsD;AAKtD,SAAgB,qBAAqB,CACpC,SAAY,EACZ,EAAK,EACL,EAAc;IAEd,IAAA,iBAAS,EAAC;QACT,IAAI,EAAE,EAAE;YACP,OAAO,SAAS,CAAC,OAAO,CAAC,EAAE,EAAE,EAAsB,CAAC,CAAA;SACpD;IACF,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;IAER,OAAO,UAAC,IAA4C,IAAK,OAAA,SAAS,CAAC,QAAQ,CAAC,EAAE,EAAE,IAAK,CAAC,EAA7B,CAA6B,CAAA;AACvF,CAAC;AAZD,sDAYC;AAED,SAAgB,gBAAgB,CAC/B,GAAe,EACf,EAAK,EACL,EAA8B;IAE9B,IAAM,SAAS,GAAG,IAAA,kBAAU,EAAC,GAAG,CAAC,CAAA;IAEjC,OAAO,qBAAqB,CAAC,SAAS,EAAE,EAAE,EAAE,EAAE,CAAC,CAAA;AAChD,CAAC;AARD,4CAQC"}

package/lib/hooks/model-hooks.d.ts

@@ -1,4 +0,0 @@
-import { Context } from 'react';
-import { Model } from '../Model';
-export declare function useModelCtx<M extends Model<M['state'], M['events']>>(ctx: Context<M>): M;
-//# sourceMappingURL=model-hooks.d.ts.map

package/lib/hooks/model-hooks.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"model-hooks.d.ts","sourceRoot":"","sources":["../../src/hooks/model-hooks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAc,MAAM,OAAO,CAAA;AAE3C,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAEhC,wBAAgB,WAAW,CAAC,CAAC,SAAS,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EACnE,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC,KAGf"}

package/lib/hooks/model-hooks.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useModelCtx = void 0;
-var react_1 = require("react");
-function useModelCtx(ctx) {
-    return (0, react_1.useContext)(ctx);
-}
-exports.useModelCtx = useModelCtx;
-//# sourceMappingURL=model-hooks.js.map

package/lib/hooks/model-hooks.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"model-hooks.js","sourceRoot":"","sources":["../../src/hooks/model-hooks.ts"],"names":[],"mappings":";;;AAAA,+BAA2C;AAI3C,SAAgB,WAAW,CAC1B,GAAe;IAEf,OAAO,IAAA,kBAAU,EAAC,GAAG,CAAC,CAAA;AACvB,CAAC;AAJD,kCAIC"}

package/lib/hooks/state-hooks.d.ts

@@ -1,5 +0,0 @@
-import { Context } from 'react';
-import { Model } from '../Model';
-export declare function useModelInstanceState<K extends keyof M['state'], M extends Model<M['state'], M['events']>>(viewModel: M, key: K): [M['state'][K], (data: M['state'][K]) => void];
-export declare function useModelCtxState<K extends keyof M['state'], M extends Model<M['state'], M['events']>>(ctx: Context<M>, key: K): [M["state"][K], (data: M["state"][K]) => void];
-//# sourceMappingURL=state-hooks.d.ts.map

package/lib/hooks/state-hooks.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"state-hooks.d.ts","sourceRoot":"","sources":["../../src/hooks/state-hooks.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,OAAO,EAKP,MAAM,OAAO,CAAA;AAEd,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAGhC,wBAAgB,qBAAqB,CAAC,CAAC,SAAS,MAAM,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,SAAS,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EACzG,SAAS,EAAE,CAAC,EACZ,GAAG,EAAE,CAAC,GACJ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,CAUhD;AAED,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,SAAS,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EACpG,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC,EACf,GAAG,EAAE,CAAC,kDAKN"}

package/lib/hooks/state-hooks.js

@@ -1,19 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useModelCtxState = exports.useModelInstanceState = void 0;
-var react_1 = require("react");
-function useModelInstanceState(viewModel, key) {
-    var _a = (0, react_1.useState)(viewModel.state[key]), value = _a[0], setValue = _a[1];
-    (0, react_1.useEffect)(function () { return viewModel.onStateChange(key, setValue); }, []);
-    var setter = (0, react_1.useCallback)(function (v) {
-        viewModel.setValue(key, v);
-    }, [key]);
-    return [value, setter];
-}
-exports.useModelInstanceState = useModelInstanceState;
-function useModelCtxState(ctx, key) {
-    var viewModel = (0, react_1.useContext)(ctx);
-    return useModelInstanceState(viewModel, key);
-}
-exports.useModelCtxState = useModelCtxState;
-//# sourceMappingURL=state-hooks.js.map

package/lib/hooks/state-hooks.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"state-hooks.js","sourceRoot":"","sources":["../../src/hooks/state-hooks.ts"],"names":[],"mappings":";;;AAAA,+BAMc;AAKd,SAAgB,qBAAqB,CACpC,SAAY,EACZ,GAAM;IAEA,IAAA,KAAoB,IAAA,gBAAQ,EAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAjD,KAAK,QAAA,EAAE,QAAQ,QAAkC,CAAA;IAExD,IAAA,iBAAS,EAAC,cAAM,OAAA,SAAS,CAAC,aAAa,CAAC,GAAG,EAAE,QAA2B,CAAC,EAAzD,CAAyD,EAAE,EAAE,CAAC,CAAA;IAE9E,IAAM,MAAM,GAAG,IAAA,mBAAW,EAAC,UAAC,CAAC;QAC5B,SAAS,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC,CAAA;IAC3B,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAA;IAET,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,CAAA;AACvB,CAAC;AAbD,sDAaC;AAED,SAAgB,gBAAgB,CAC/B,GAAe,EACf,GAAM;IAEN,IAAM,SAAS,GAAG,IAAA,kBAAU,EAAC,GAAG,CAAC,CAAA;IAEjC,OAAO,qBAAqB,CAAC,SAAS,EAAE,GAAG,CAAC,CAAA;AAC7C,CAAC;AAPD,4CAOC"}

package/lib/types.d.ts

@@ -1,13 +0,0 @@
-import { ProviderProps } from 'react';
-import { Model } from './Model';
-export declare type Sub<S, K extends keyof S = keyof S> = (v: S[K]) => void;
-export declare type Subs<S> = Map<keyof S, Set<Sub<S>>>;
-export declare type CreateModelOptions = {
-    globalInstance?: Model;
-    createGlobalInstance?: boolean;
-};
-export declare type ModelProviderProps<M extends Model> = Omit<ProviderProps<M>, 'value'> & {
-    value?: M;
-    initialState?: M['state'];
-};
-//# sourceMappingURL=types.d.ts.map

package/lib/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AACrC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAE/B,oBAAY,GAAG,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,CAAA;AAEnE,oBAAY,IAAI,CAAC,CAAC,IAAI,GAAG,CAAC,MAAM,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;AAE/C,oBAAY,kBAAkB,GAAG;IAChC,cAAc,CAAC,EAAE,KAAK,CAAA;IACtB,oBAAoB,CAAC,EAAE,OAAO,CAAA;CAC9B,CAAA;AAED,oBAAY,kBAAkB,CAAC,CAAC,SAAS,KAAK,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,GAAG;IACnF,KAAK,CAAC,EAAE,CAAC,CAAA;IACT,YAAY,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,CAAA;CACzB,CAAA"}

package/lib/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/lib/utils/compose-providers.d.ts

@@ -1,3 +0,0 @@
-import { FC } from 'react';
-export declare function composeProviders(providers: FC[]): FC;
-//# sourceMappingURL=compose-providers.d.ts.map

package/lib/utils/compose-providers.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"compose-providers.d.ts","sourceRoot":"","sources":["../../src/utils/compose-providers.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAEjC,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,EAAE,EAAE,GAAG,EAAE,CAWpD"}

package/lib/utils/compose-providers.js

@@ -1,19 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.composeProviders = void 0;
-var react_1 = __importDefault(require("react"));
-function composeProviders(providers) {
-    return providers.reduce(function (Parent, Child) { return function (_a) {
-        var children = _a.children;
-        return react_1.default.createElement(Parent, null,
-            react_1.default.createElement(Child, null, children));
-    }; }, function (_a) {
-        var children = _a.children;
-        return react_1.default.createElement(react_1.default.Fragment, null, children);
-    });
-}
-exports.composeProviders = composeProviders;
-//# sourceMappingURL=compose-providers.js.map

package/lib/utils/compose-providers.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"compose-providers.js","sourceRoot":"","sources":["../../src/utils/compose-providers.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAAiC;AAEjC,SAAgB,gBAAgB,CAAC,SAAe;IAC/C,OAAO,SAAS,CAAC,MAAM,CACtB,UAAC,MAAU,EAAE,KAAS,IAAK,OAAA,UAAC,EAAY;YAAV,QAAQ,cAAA;QACrC,OAAO,8BAAC,MAAM;YACb,8BAAC,KAAK,QACH,QAAQ,CACH,CACA,CAAA;IACV,CAAC,EAN0B,CAM1B,EACD,UAAC,EAAY;YAAV,QAAQ,cAAA;QAAO,OAAA,8DAAI,QAAQ,CAAK;IAAjB,CAAiB,CACnC,CAAA;AACF,CAAC;AAXD,4CAWC"}